From 52017b60ca78c588768caa51887576bed51753bb Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Thu, 27 Jun 2024 23:25:13 +0100
Subject: [PATCH] change math node attribute name

---
 .../features/editor/components/math/math-block.tsx | 12 ++++++------
 .../editor/components/math/math-inline.tsx         | 12 ++++++------
 packages/editor-ext/src/lib/math/math-block.ts     | 10 +++++-----
 packages/editor-ext/src/lib/math/math-inline.ts    | 14 +++++++++-----
 4 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/apps/client/src/features/editor/components/math/math-block.tsx b/apps/client/src/features/editor/components/math/math-block.tsx
index 5fa8354..7413499 100644
--- a/apps/client/src/features/editor/components/math/math-block.tsx
+++ b/apps/client/src/features/editor/components/math/math-block.tsx
@@ -36,8 +36,8 @@ export default function MathBlockView(props: NodeViewProps) {
   };
 
   useEffect(() => {
-    renderMath(node.attrs.katex, mathResultContainer.current);
-  }, [node.attrs.katex]);
+    renderMath(node.attrs.text, mathResultContainer.current);
+  }, [node.attrs.text]);
 
   useEffect(() => {
     if (isEditing) {
@@ -48,14 +48,14 @@ export default function MathBlockView(props: NodeViewProps) {
   useEffect(() => {
     if (debouncedPreview !== null) {
       queueMicrotask(() => {
-        updateAttributes({ katex: debouncedPreview });
+        updateAttributes({ text: debouncedPreview });
       });
     }
   }, [debouncedPreview]);
 
   useEffect(() => {
     setIsEditing(!!props.selected);
-    if (props.selected) setPreview(node.attrs.katex);
+    if (props.selected) setPreview(node.attrs.text);
   }, [props.selected]);
 
   return (
@@ -77,7 +77,7 @@ export default function MathBlockView(props: NodeViewProps) {
             props.selected ? classes.selected : "",
             error ? classes.error : "",
             (isEditing && !preview?.trim().length) ||
-            (!isEditing && !node.attrs.katex.trim().length)
+            (!isEditing && !node.attrs.text.trim().length)
               ? classes.empty
               : "",
           ].join(" ")}
@@ -93,7 +93,7 @@ export default function MathBlockView(props: NodeViewProps) {
             ref={mathResultContainer}
           ></div>
           {((isEditing && !preview?.trim().length) ||
-            (!isEditing && !node.attrs.katex.trim().length)) && (
+            (!isEditing && !node.attrs.text.trim().length)) && (
             <div>Empty equation</div>
           )}
           {error && <div>Invalid equation</div>}
diff --git a/apps/client/src/features/editor/components/math/math-inline.tsx b/apps/client/src/features/editor/components/math/math-inline.tsx
index a2ec5a5..675b181 100644
--- a/apps/client/src/features/editor/components/math/math-inline.tsx
+++ b/apps/client/src/features/editor/components/math/math-inline.tsx
@@ -30,22 +30,22 @@ export default function MathInlineView(props: NodeViewProps) {
   };
 
   useEffect(() => {
-    renderMath(node.attrs.katex, mathResultContainer.current);
-  }, [node.attrs.katex]);
+    renderMath(node.attrs.text, mathResultContainer.current);
+  }, [node.attrs.text]);
 
   useEffect(() => {
     if (isEditing) {
       renderMath(preview || "", mathPreviewContainer.current);
     } else if (preview !== null) {
       queueMicrotask(() => {
-        updateAttributes({ katex: preview });
+        updateAttributes({ text: preview });
       });
     }
   }, [preview, isEditing]);
 
   useEffect(() => {
     setIsEditing(!!props.selected);
-    if (props.selected) setPreview(node.attrs.katex);
+    if (props.selected) setPreview(node.attrs.text);
   }, [props.selected]);
 
   return (
@@ -69,7 +69,7 @@ export default function MathInlineView(props: NodeViewProps) {
               props.selected ? classes.selected : "",
               error ? classes.error : "",
               (isEditing && !preview?.trim().length) ||
-              (!isEditing && !node.attrs.katex.trim().length)
+              (!isEditing && !node.attrs.text.trim().length)
                 ? classes.empty
                 : "",
             ].join(" ")}
@@ -83,7 +83,7 @@ export default function MathInlineView(props: NodeViewProps) {
               ref={mathResultContainer}
             ></div>
             {((isEditing && !preview?.trim().length) ||
-              (!isEditing && !node.attrs.katex.trim().length)) && (
+              (!isEditing && !node.attrs.text.trim().length)) && (
               <div>Empty equation</div>
             )}
             {error && <div>Invalid equation</div>}
diff --git a/packages/editor-ext/src/lib/math/math-block.ts b/packages/editor-ext/src/lib/math/math-block.ts
index ce14afb..61dbfe0 100644
--- a/packages/editor-ext/src/lib/math/math-block.ts
+++ b/packages/editor-ext/src/lib/math/math-block.ts
@@ -15,7 +15,7 @@ export interface MathBlockOptions {
 }
 
 export interface MathBlockAttributes {
-  katex: string;
+  text: string;
 }
 
 export const inputRegex = /(?:^|\s)((?:\$\$\$)((?:[^$]+))(?:\$\$\$))$/;
@@ -34,7 +34,7 @@ export const MathBlock = Node.create({
 
   addAttributes() {
     return {
-      katex: {
+      text: {
         default: "",
         parseHTML: (element) => element.innerHTML.split("$")[1],
       },
@@ -56,7 +56,7 @@ export const MathBlock = Node.create({
     return [
       "div",
       {},
-      ["div", { "data-katex": true }, `$${HTMLAttributes.katex}$`],
+      ["div", { "data-katex": true }, `$${HTMLAttributes.text}$`],
     ];
   },
 
@@ -65,7 +65,7 @@ export const MathBlock = Node.create({
   },
 
   renderText({ node }) {
-    return node.attrs.katex;
+    return node.attrs.text;
   },
 
   addCommands() {
@@ -87,7 +87,7 @@ export const MathBlock = Node.create({
         find: inputRegex,
         type: this.type,
         getAttributes: (match) => ({
-          katex: match[1].replaceAll("$", ""),
+          text: match[1].replaceAll("$", ""),
         }),
       }),
     ];
diff --git a/packages/editor-ext/src/lib/math/math-inline.ts b/packages/editor-ext/src/lib/math/math-inline.ts
index c495567..d34267d 100644
--- a/packages/editor-ext/src/lib/math/math-inline.ts
+++ b/packages/editor-ext/src/lib/math/math-inline.ts
@@ -1,4 +1,4 @@
-import { Node, nodeInputRule, wrappingInputRule } from "@tiptap/core";
+import { Node, nodeInputRule } from "@tiptap/core";
 import { ReactNodeViewRenderer } from "@tiptap/react";
 
 declare module "@tiptap/core" {
@@ -14,6 +14,10 @@ export interface MathInlineOption {
   view: any;
 }
 
+export interface MathInlineAttributes {
+  text: string;
+}
+
 export const inputRegex = /(?:^|\s)((?:\$\$)((?:[^$]+))(?:\$\$))$/;
 
 export const MathInline = Node.create<MathInlineOption>({
@@ -31,7 +35,7 @@ export const MathInline = Node.create<MathInlineOption>({
 
   addAttributes() {
     return {
-      katex: {
+      text: {
         default: "",
         parseHTML: (element) => element.innerHTML.split("$")[1],
       },
@@ -53,12 +57,12 @@ export const MathInline = Node.create<MathInlineOption>({
     return [
       "div",
       {},
-      ["span", { "data-katex": true }, `$${HTMLAttributes.katex}$`],
+      ["span", { "data-katex": true }, `$${HTMLAttributes.text}$`],
     ];
   },
 
   renderText({ node }) {
-    return node.attrs.katex;
+    return node.attrs.text;
   },
 
   addNodeView() {
@@ -84,7 +88,7 @@ export const MathInline = Node.create<MathInlineOption>({
         find: inputRegex,
         type: this.type,
         getAttributes: (match) => ({
-          katex: match[1].replaceAll("$", ""),
+          text: match[1].replaceAll("$", ""),
         }),
       }),
     ];