feat: update macros katex

hunghg255 · hunghg255 · commit 80b43d4e5b20 · 2025-12-27T10:09:04.000+07:00
diff --git a/playground/src/App.tsx b/playground/src/App.tsx
@@ -90,6 +90,8 @@ import 'katex/dist/katex.min.css'
 import 'easydrawer/styles.css'
 import "@excalidraw/excalidraw/index.css";
 
+import 'katex/contrib/mhchem'
+
 // import Collaboration from '@tiptap/extension-collaboration'
 // import CollaborationCaret from '@tiptap/extension-collaboration-caret'
 // import { HocuspocusProvider } from '@hocuspocus/provider'
diff --git a/src/components/Bubble/RichTextBubbleKatex.tsx b/src/components/Bubble/RichTextBubbleKatex.tsx
@@ -5,7 +5,7 @@ import katexLib from 'katex';
 import { Pencil, Trash2 } from 'lucide-react';
 
 import { ActionButton } from '@/components/ActionButton';
-import { Button } from '@/components/ui';
+import { Button, Label } from '@/components/ui';
 import { Dialog, DialogContent, DialogFooter, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
 import { Textarea } from '@/components/ui/textarea';
 import { Katex } from '@/extensions/Katex';
@@ -14,6 +14,7 @@ import { useAttributes } from '@/hooks/useAttributes';
 import { useLocale } from '@/locales';
 import { useEditorInstance } from '@/store/editor';
 import { useEditableEditor } from '@/store/store';
+import { parseJSONString } from '@/utils/columns';
 import { deleteNode } from '@/utils/delete-node';
 
 function ModalEditKatex({
@@ -27,36 +28,38 @@ function ModalEditKatex({
 
   const attrs = useAttributes<IKatexAttrs>(editor, Katex.name, {
     text: '',
-    defaultShowPicker: false,
+    macros: '',
   });
-  const { text, defaultShowPicker } = attrs;
 
-  const [currentValue, setCurrentValue] = useState(text || '');
+  const { text, macros } = attrs;
 
-  useEffect(() => {
-    if (visible) setCurrentValue(text || '');
-  }, [visible]);
+  const [currentValue, setCurrentValue] = useState(decodeURIComponent(text || ''));
+
+  const [currentMacros, setCurrentMacros] = useState(decodeURIComponent(macros || ''));
 
   useEffect(() => {
-    if (defaultShowPicker) {
-      toggleVisible(true);
-      editor.chain().updateAttributes(Katex.name, { defaultShowPicker: false }).focus().run();
+    if (visible) {
+      setCurrentValue(decodeURIComponent(text || ''));
+      setCurrentMacros(decodeURIComponent(macros || ''));
     }
-  }, [editor, defaultShowPicker, toggleVisible]);
+  }, [visible]);
 
   const submit = useCallback(() => {
-    editor.chain().focus().setKatex({ text: currentValue }).run();
+    editor.chain().focus().setKatex({ text: encodeURIComponent(currentValue), macros: encodeURIComponent(currentMacros) }).run();
     setCurrentValue('');
+    setCurrentMacros('');
     toggleVisible(false);
-  }, [editor, currentValue, toggleVisible]);
+  }, [editor, currentValue, currentMacros, toggleVisible]);
 
   const formatText = useMemo(() => {
     try {
-      return katexLib.renderToString(`${currentValue}`);
+      return katexLib.renderToString(currentValue, {
+        macros: parseJSONString(currentMacros || '')
+      });
     } catch {
       return currentValue;
     }
-  }, [currentValue]);
+  }, [currentValue, currentMacros]);
 
   const previewContent = useMemo(
     () => {
@@ -89,19 +92,39 @@ function ModalEditKatex({
           style={{ height: '100%', border: '1px solid hsl(var(--border))' }}
         >
           <div className="richtext-flex richtext-gap-[10px] richtext-rounded-[10px] richtext-p-[10px]">
-            <Textarea
-              autoFocus
-              className="richtext-flex-1"
-              onChange={e => setCurrentValue(e.target.value)}
-              placeholder="Text"
-
-              required
-              rows={10}
-              value={currentValue}
-              style={{
-                color: 'hsl(var(--foreground))',
-              }}
-            />
+            <div className='richtext-flex-1'>
+
+              <Label className="mb-[6px]">
+                Expression
+              </Label>
+
+              <Textarea
+                autoFocus
+                className="richtext-mb-[10px]"
+                onChange={e => setCurrentValue(e.target.value)}
+                placeholder="Text"
+                required
+                rows={10}
+                value={currentValue}
+                style={{
+                  color: 'hsl(var(--foreground))',
+                }}
+              />
+
+              <Label className="mb-[6px]">
+                Macros
+              </Label>
+
+              <Textarea
+                onChange={e => setCurrentMacros(e.target.value)}
+                placeholder="Macros"
+                rows={10}
+                value={currentMacros}
+                style={{
+                  color: 'hsl(var(--foreground))',
+                }}
+              />
+            </div>
 
             <div
               className="richtext-flex richtext-flex-1 richtext-items-center richtext-justify-center richtext-rounded-[10px] richtext-p-[10px]"
diff --git a/src/components/ui/emoji-picker.tsx b/src/components/ui/emoji-picker.tsx
@@ -34,7 +34,7 @@ function EmojiPickerSearch({
 }: React.ComponentProps<typeof EmojiPickerPrimitive.Search>) {
   return (
     <div
-      className={cn('!richtext-flex !richtext-h-9 !richtext-items-center !richtext-gap-2 !richtext-border-b !richtext-px-3', className)}
+      className={cn('!richtext-flex !richtext-h-9 !richtext-items-center !richtext-gap-2 !richtext-border-b richtext-border-border !richtext-px-3', className)}
       data-slot="emoji-picker-search-wrapper"
     >
       <SearchIcon className="!richtext-size-4 !richtext-shrink-0 !richtext-opacity-50" />
@@ -138,7 +138,7 @@ function EmojiPickerFooter({
     <div
       data-slot="emoji-picker-footer"
       className={cn(
-        '!richtext-max-w-(--frimousse-viewport-width) !richtext-flex !richtext-w-full !richtext-min-w-0 !richtext-items-center !richtext-gap-1 !richtext-border-t !richtext-p-2',
+        '!richtext-max-w-(--frimousse-viewport-width) !richtext-flex !richtext-w-full !richtext-min-w-0 !richtext-items-center !richtext-gap-1 !richtext-border-t richtext-border-border !richtext-p-2',
         className
       )}
       {...props}
diff --git a/src/extensions/Katex/Katex.ts b/src/extensions/Katex/Katex.ts
@@ -7,7 +7,7 @@ export * from '@/extensions/Katex/components/RichTextKatex';
 
 export interface IKatexAttrs {
   text?: string
-  defaultShowPicker?: boolean
+  macros?: string
 }
 
 interface IKatexOptions {
@@ -63,8 +63,9 @@ export const Katex = /* @__PURE__ */ Node.create<IKatexOptions>({
         default: '',
         parseHTML: getDatasetAttribute('text'),
       },
-      defaultShowPicker: {
-        default: false,
+      macros: {
+        default: '',
+        parseHTML: getDatasetAttribute('macros'),
       },
     };
   },
@@ -95,9 +96,6 @@ export const Katex = /* @__PURE__ */ Node.create<IKatexOptions>({
       nodeInputRule({
         find: /^\$katex\$$/,
         type: this.type,
-        getAttributes: () => {
-          return { defaultShowPicker: true };
-        },
       }),
     ];
   },
diff --git a/src/extensions/Katex/components/KatexWrapper.tsx b/src/extensions/Katex/components/KatexWrapper.tsx
@@ -1,25 +1,29 @@
 import { useMemo } from 'react';
 
 import { NodeViewWrapper } from '@tiptap/react';
-import katex from 'katex';
+import katexLib from 'katex';
+
+import { parseJSONString } from '@/utils/columns';
 
 export function KatexNodeView({ node }: any) {
-  const { text } = node.attrs;
+  const { text, macros } = node.attrs;
 
   const formatText = useMemo(() => {
     try {
-      return katex.renderToString(`${text}`);
+      return katexLib.renderToString(decodeURIComponent(text || ''), {
+        macros: parseJSONString(decodeURIComponent(macros || ''))
+      });
     } catch {
       return text;
     }
-  }, [text]);
+  }, [text, macros]);
 
   const content = useMemo(
     () =>
       text.trim()
         ? (
           <span contentEditable={false}
-dangerouslySetInnerHTML={{ __html: formatText }}
+            dangerouslySetInnerHTML={{ __html: formatText }}
           >
           </span>
         )
diff --git a/src/extensions/Katex/components/RichTextKatex.tsx b/src/extensions/Katex/components/RichTextKatex.tsx
@@ -1,8 +1,8 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 import katexLib from 'katex';
 
-import { ActionButton, Button } from '@/components';
+import { ActionButton, Button, Label } from '@/components';
 import { Dialog, DialogContent, DialogFooter, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
 import { Textarea } from '@/components/ui/textarea';
 import type { IKatexAttrs } from '@/extensions/Katex/Katex';
@@ -12,51 +12,55 @@ import { useAttributes } from '@/hooks/useAttributes';
 import { useButtonProps } from '@/hooks/useButtonProps';
 import { useLocale } from '@/locales';
 import { useEditorInstance } from '@/store/editor';
+import { parseJSONString } from '@/utils/columns';
 
 export function RichTextKatex() {
   const { t } = useLocale();
   const [visible, toggleVisible] = useState(false);
 
-    const buttonProps = useButtonProps(Katex.name);
+  const buttonProps = useButtonProps(Katex.name);
 
-    const {
-      icon = undefined,
-      tooltip = undefined,
-      tooltipOptions = {},
-      isActive = undefined,
-    } = buttonProps?.componentProps ?? {};
+  const {
+    icon = undefined,
+    tooltip = undefined,
+    tooltipOptions = {},
+    isActive = undefined,
+  } = buttonProps?.componentProps ?? {};
 
-    const { editorDisabled } = useToggleActive(isActive);
+  const { editorDisabled } = useToggleActive(isActive);
 
   const editor = useEditorInstance();
 
   const attrs = useAttributes<IKatexAttrs>(editor, Katex.name, {
     text: '',
-    defaultShowPicker: false,
+    macros: '',
   });
-  const { text, defaultShowPicker } = attrs;
+  const { text, macros } = attrs;
 
-  const [currentValue, setCurrentValue] = useState(text || '');
+  const [currentValue, setCurrentValue] = useState(decodeURIComponent(text || ''));
+  const [currentMacros, setCurrentMacros] = useState(decodeURIComponent(macros || ''));
 
   const submit = useCallback(() => {
-    editor.chain().focus().setKatex({ text: currentValue }).run();
+
+    editor.chain().focus().setKatex({
+      text: encodeURIComponent(currentValue),
+      macros: encodeURIComponent(currentMacros),
+    }).run();
+
     setCurrentValue('');
+    setCurrentMacros('');
     toggleVisible(false);
-  }, [editor, currentValue]);
-
-  useEffect(() => {
-    if (defaultShowPicker) {
-      editor.chain().updateAttributes(Katex.name, { defaultShowPicker: false }).focus().run();
-    }
-  }, [editor, defaultShowPicker]);
+  }, [editor, currentValue, currentMacros]);
 
   const formatText = useMemo(() => {
     try {
-      return katexLib.renderToString(`${currentValue}`);
+      return katexLib.renderToString(currentValue, {
+        macros: parseJSONString(currentMacros)
+      });
     } catch {
       return currentValue;
     }
-  }, [currentValue]);
+  }, [currentMacros, currentValue]);
 
   const previewContent = useMemo(
     () => {
@@ -75,14 +79,14 @@ export function RichTextKatex() {
       open={visible}
     >
       <DialogTrigger
-      asChild
-      disabled={editorDisabled}
+        asChild
+        disabled={editorDisabled}
       >
         <ActionButton
           disabled={editorDisabled}
-        icon={icon}
-      tooltip={tooltip}
-        tooltipOptions={tooltipOptions}
+          icon={icon}
+          tooltip={tooltip}
+          tooltipOptions={tooltipOptions}
           action={() => {
             if (editorDisabled) return;
             toggleVisible(true);
@@ -92,26 +96,48 @@ export function RichTextKatex() {
 
       <DialogContent className="richtext-z-[99999] !richtext-max-w-[1300px]">
         <DialogTitle>
-            {t('editor.formula.dialog.text')}
+          {t('editor.formula.dialog.text')}
         </DialogTitle>
 
         <div
           style={{ height: '100%', border: '1px solid hsl(var(--border))' }}
         >
           <div className="richtext-flex richtext-gap-[10px] richtext-rounded-[10px] richtext-p-[10px]">
-                          <Textarea
-              autoFocus
-              className="richtext-flex-1"
-              onChange={e => setCurrentValue(e.target.value)}
-              placeholder="Text"
-
-            required
-            rows={10}
-            value={currentValue}
-            style={{
-              color: 'hsl(var(--foreground))',
-            }}
-                          />
+            <div className='richtext-flex-1'>
+              <Label className="mb-[6px]">
+                Expression
+              </Label>
+
+              <Textarea
+                autoFocus
+                className="richtext-mb-[10px]"
+                onChange={e => setCurrentValue(e.target.value)}
+                placeholder="Text"
+                required
+                rows={10}
+                value={currentValue}
+                style={{
+                  color: 'hsl(var(--foreground))',
+                }}
+              />
+
+              <Label className="mb-[6px]">
+                Macros
+              </Label>
+
+              <Textarea
+                className="richtext-flex-1"
+                placeholder="Macros"
+                rows={10}
+                value={currentMacros}
+                onChange={e => {
+                  setCurrentMacros(e.target.value);
+                }}
+                style={{
+                  color: 'hsl(var(--foreground))',
+                }}
+              />
+            </div>
 
             <div
               className="richtext-flex richtext-flex-1 richtext-items-center richtext-justify-center richtext-rounded-[10px] richtext-p-[10px]"
diff --git a/src/utils/columns.ts b/src/utils/columns.ts
