1
9
10import { mergeAttributes, Node } from "@tiptap/core";
11
12export interface EquationOptions {
13 readonly HTMLAttributes: Record<string, unknown>;
14}
15
16declare module "@tiptap/core" {
17 interface Config {
18 options: EquationOptions;
19 }
20}
21
22export const EquationNode = Node.create<EquationOptions>({
23 name: "factoryEquation",
24 group: "inline",
25 inline: true,
26 atom: true,
27 selectable: true,
28
29 addOptions() {
30 return {
31 HTMLAttributes: {
32 class: "factory-equation",
33 },
34 };
35 },
36
37 addAttributes() {
38 return {
39 latex: {
40 default: "",
41 parseHTML: (element) => element.getAttribute("data-latex") ?? "",
42 renderHTML: (attributes) => ({ "data-latex": attributes.latex }),
43 },
44 alt: {
45 default: null,
46 parseHTML: (element) => element.getAttribute("data-alt"),
47 renderHTML: (attributes) =>
48 attributes.alt === null ? {} : { "data-alt": attributes.alt },
49 },
50 };
51 },
52
53 parseHTML() {
54 return [{ tag: "span.factory-equation" }];
55 },
56
57 renderHTML({ node, HTMLAttributes }) {
58 return [
59 "span",
60 mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
61 (node.attrs.alt as string | null) ?? (node.attrs.latex as string) ?? "",
62 ];
63 },
64});
65
