tiptap-markdown-react 0.8.0 → 0.8.1

package/README.md

@@ -161,7 +161,7 @@ const comments: CommentRef[] = [
 
 ### 5. Equations (KaTeX)
 
-Insert from the toolbar **More** menu (`Inline equation` / `Block equation`). Click an existing formula to edit LaTeX with a live preview. There is no keyboard shortcut and typing `$` / `$$` does **not** convert to math.
+Insert from the toolbar **More** menu (`Inline equation` / `Block equation`). Click an existing formula to edit. The editor is an anchored chip + live KaTeX preview + pill input with **Done**; inline confirms with Enter, block with ⌘/Ctrl+Enter. There is no typing shortcut and `$` / `$$` does **not** convert to math.
 
 Markdown on disk:
 
@@ -235,6 +235,8 @@ The underlying extensions `MarkdownPaste` / `MarkdownFileDrop` (and the `looksLi
 | `onError` | `(err: unknown) => void` | Side-effect error callback (e.g. failed upload). |
 | `labels` | `Partial<ToolbarLabels>` | i18n labels. |
 | `extraToolbarItems` | `ExtraToolbarItem[]` | Custom items appended to the "More" menu. |
+| `labels.inlineMath` / `blockMath` | `string` | More-menu equation items. |
+| `labels.mathPlaceholder` / `mathDone` / `mathNewInline` / `mathNewBlock` | `string` | Equation editor (chip, preview, Done). |
 
 ### `<MarkdownPreview>` (client)
 

package/dist/components/MathEditorPopover.d.ts

@@ -1,12 +1,15 @@
+import { Editor } from '@tiptap/react';
 import { MathKind } from '../math';
 export interface MathEditorPopoverProps {
+    editor: Editor;
     kind: MathKind;
+    mode: 'insert' | 'edit';
+    pos?: number;
     latex: string;
-    title: string;
+    newLabel: string;
     placeholder: string;
     doneLabel: string;
-    cancelLabel: string;
     onConfirm: (latex: string) => void;
     onCancel: () => void;
 }
-export declare function MathEditorPopover({ kind, latex, title, placeholder, doneLabel, cancelLabel, onConfirm, onCancel, }: MathEditorPopoverProps): import('react').ReactPortal;
+export declare function MathEditorPopover({ editor, kind, mode, pos, latex, newLabel, placeholder, doneLabel, onConfirm, onCancel, }: MathEditorPopoverProps): import("react").JSX.Element;

package/dist/index.js

@@ -590,7 +590,9 @@ const defaultToolbarLabels = {
   blockMath: "Block equation",
   mathPlaceholder: "E = mc^2",
   mathDone: "Done",
-  mathCancel: "Cancel"
+  mathCancel: "Cancel",
+  mathNewInline: "New equation",
+  mathNewBlock: "Add a TeX equation"
 };
 const defaultColorPaletteLabels = {
   none: "None",
@@ -979,36 +981,42 @@ function insertMarkdown(editor, markdown, sources = []) {
   const prepared = enrichMarkdownCitations(markdown, sources);
   editor.chain().focus().insertContent(prepared, { contentType: "markdown" }).run();
 }
-const toolbar = "_toolbar_8cpy8_2";
-const inner = "_inner_8cpy8_15";
-const btn = "_btn_8cpy8_27";
-const btnActive = "_btnActive_8cpy8_50";
-const tableBubble = "_tableBubble_8cpy8_66";
-const txtIcon = "_txtIcon_8cpy8_78";
-const colorIcon = "_colorIcon_8cpy8_86";
-const colorIconGlyph = "_colorIconGlyph_8cpy8_94";
-const colorIconBar = "_colorIconBar_8cpy8_100";
-const scriptTrigger = "_scriptTrigger_8cpy8_107";
-const scriptTriggerGlyph = "_scriptTriggerGlyph_8cpy8_127";
-const divider = "_divider_8cpy8_135";
-const styleTrigger = "_styleTrigger_8cpy8_144";
-const styleTriggerLabel = "_styleTriggerLabel_8cpy8_173";
-const styleTriggerCaret = "_styleTriggerCaret_8cpy8_181";
-const styleItem = "_styleItem_8cpy8_187";
-const styleIcon = "_styleIcon_8cpy8_193";
-const scriptGlyph = "_scriptGlyph_8cpy8_203";
-const menu = "_menu_8cpy8_215";
-const menuItem = "_menuItem_8cpy8_226";
-const menuItemSelected = "_menuItemSelected_8cpy8_252";
-const popoverContent$1 = "_popoverContent_8cpy8_266";
-const mathOverlay = "_mathOverlay_8cpy8_270";
-const mathPopover = "_mathPopover_8cpy8_280";
-const mathTitle = "_mathTitle_8cpy8_290";
-const mathTextarea = "_mathTextarea_8cpy8_297";
-const mathPreview = "_mathPreview_8cpy8_316";
-const mathActions = "_mathActions_8cpy8_326";
-const mathBtn = "_mathBtn_8cpy8_333";
-const mathBtnPrimary = "_mathBtnPrimary_8cpy8_348";
+const toolbar = "_toolbar_z6tes_2";
+const inner = "_inner_z6tes_15";
+const btn = "_btn_z6tes_27";
+const btnActive = "_btnActive_z6tes_50";
+const tableBubble = "_tableBubble_z6tes_66";
+const txtIcon = "_txtIcon_z6tes_78";
+const colorIcon = "_colorIcon_z6tes_86";
+const colorIconGlyph = "_colorIconGlyph_z6tes_94";
+const colorIconBar = "_colorIconBar_z6tes_100";
+const scriptTrigger = "_scriptTrigger_z6tes_107";
+const scriptTriggerGlyph = "_scriptTriggerGlyph_z6tes_127";
+const divider = "_divider_z6tes_135";
+const styleTrigger = "_styleTrigger_z6tes_144";
+const styleTriggerLabel = "_styleTriggerLabel_z6tes_173";
+const styleTriggerCaret = "_styleTriggerCaret_z6tes_181";
+const styleItem = "_styleItem_z6tes_187";
+const styleIcon = "_styleIcon_z6tes_193";
+const scriptGlyph = "_scriptGlyph_z6tes_203";
+const menu = "_menu_z6tes_215";
+const menuItem = "_menuItem_z6tes_226";
+const menuItemSelected = "_menuItemSelected_z6tes_252";
+const popoverContent$1 = "_popoverContent_z6tes_266";
+const mathAnchor = "_mathAnchor_z6tes_270";
+const mathContent = "_mathContent_z6tes_277";
+const mathStack = "_mathStack_z6tes_286";
+const mathStackBlock = "_mathStackBlock_z6tes_293";
+const mathHint = "_mathHint_z6tes_298";
+const mathHintBlock = "_mathHintBlock_z6tes_310";
+const mathHintIcon = "_mathHintIcon_z6tes_316";
+const mathPreviewInline = "_mathPreviewInline_z6tes_322";
+const mathPreviewBlock = "_mathPreviewBlock_z6tes_332";
+const mathField = "_mathField_z6tes_347";
+const mathFieldBlock = "_mathFieldBlock_z6tes_359";
+const mathInput = "_mathInput_z6tes_366";
+const mathDone = "_mathDone_z6tes_384";
+const mathDoneKbd = "_mathDoneKbd_z6tes_409";
 const styles$3 = {
   toolbar,
   inner,
@@ -1032,14 +1040,20 @@ const styles$3 = {
   menuItem,
   menuItemSelected,
   popoverContent: popoverContent$1,
-  mathOverlay,
-  mathPopover,
-  mathTitle,
-  mathTextarea,
-  mathPreview,
-  mathActions,
-  mathBtn,
-  mathBtnPrimary
+  mathAnchor,
+  mathContent,
+  mathStack,
+  mathStackBlock,
+  mathHint,
+  mathHintBlock,
+  mathHintIcon,
+  mathPreviewInline,
+  mathPreviewBlock,
+  mathField,
+  mathFieldBlock,
+  mathInput,
+  mathDone,
+  mathDoneKbd
 };
 const palette = "_palette_x5lrq_2";
 const noneRow = "_noneRow_x5lrq_11";
@@ -1116,93 +1130,198 @@ function ColorPalette({ value, onPick, labels }) {
     )) })
   ] });
 }
+function getMathAnchorRect(editor, kind, pos) {
+  const editorRect = editor.view.dom.getBoundingClientRect();
+  if (pos != null) {
+    const dom = editor.view.nodeDOM(pos);
+    const el = dom instanceof HTMLElement ? dom : dom instanceof Node ? dom.parentElement : null;
+    if (el) {
+      const r = el.getBoundingClientRect();
+      if (kind === "block") {
+        return new DOMRect(editorRect.left, r.top, editorRect.width, r.height);
+      }
+      return r;
+    }
+  }
+  const coords = editor.view.coordsAtPos(editor.state.selection.from);
+  if (kind === "block") {
+    return new DOMRect(editorRect.left, coords.bottom, editorRect.width, 0);
+  }
+  return new DOMRect(coords.left, coords.bottom, 0, 0);
+}
 function MathEditorPopover({
+  editor,
   kind,
+  mode,
+  pos,
   latex,
-  title,
+  newLabel,
   placeholder,
   doneLabel,
-  cancelLabel,
   onConfirm,
   onCancel
 }) {
   const [draft, setDraft] = useState(latex);
+  const [rect, setRect] = useState(() => getMathAnchorRect(editor, kind, pos));
   const titleId = useId();
+  const inputRef = useRef(null);
+  const confirmedRef = useRef(false);
+  const isBlock = kind === "block";
   useEffect(() => {
     setDraft(latex);
   }, [latex]);
   useEffect(() => {
-    const onKey = (e) => {
-      if (e.key === "Escape") onCancel();
+    const update = () => setRect(getMathAnchorRect(editor, kind, pos));
+    update();
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
     };
-    document.addEventListener("keydown", onKey, true);
-    return () => document.removeEventListener("keydown", onKey, true);
-  }, [onCancel]);
-  const preview = renderMathHtml(draft.trim(), kind === "block");
+  }, [editor, kind, pos]);
+  useEffect(() => {
+    var _a;
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+  }, []);
+  useEffect(() => {
+    if (pos == null) return;
+    const dom = editor.view.nodeDOM(pos);
+    const el = dom instanceof HTMLElement ? dom : dom instanceof Node ? dom.parentElement : null;
+    if (!el) return;
+    el.classList.add("tmr-math-editing");
+    return () => {
+      el.classList.remove("tmr-math-editing");
+    };
+  }, [editor, pos]);
+  const preview = useMemo(
+    () => renderMathHtml(draft.trim(), isBlock),
+    [draft, isBlock]
+  );
   const canSubmit = draft.trim().length > 0;
-  return createPortal(
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: styles$3.mathOverlay,
-        onMouseDown: (e) => {
-          if (e.target === e.currentTarget) onCancel();
-        },
-        children: /* @__PURE__ */ jsxs(
-          "div",
+  const showHint = !canSubmit && mode === "insert";
+  const submit = () => {
+    if (!canSubmit) return;
+    confirmedRef.current = true;
+    onConfirm(draft.trim());
+  };
+  const onKeyDown = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      onCancel();
+      return;
+    }
+    if (e.key !== "Enter") return;
+    if (isBlock && !(e.metaKey || e.ctrlKey)) return;
+    e.preventDefault();
+    submit();
+  };
+  const field = isBlock ? /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ref: inputRef,
+      className: styles$3.mathInput,
+      value: draft,
+      placeholder,
+      rows: Math.max(3, draft.split("\n").length),
+      "aria-labelledby": titleId,
+      onChange: (e) => setDraft(e.target.value),
+      onKeyDown
+    }
+  ) : /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: inputRef,
+      className: styles$3.mathInput,
+      value: draft,
+      placeholder,
+      "aria-labelledby": titleId,
+      onChange: (e) => setDraft(e.target.value),
+      onKeyDown
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    Popover.Root,
+    {
+      open: true,
+      onOpenChange: (open) => {
+        if (!open && !confirmedRef.current) onCancel();
+      },
+      children: [
+        /* @__PURE__ */ jsx(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ jsx(
+          "span",
           {
-            className: styles$3.mathPopover,
-            role: "dialog",
-            "aria-modal": "true",
-            "aria-labelledby": titleId,
-            onMouseDown: (e) => e.stopPropagation(),
-            children: [
-              /* @__PURE__ */ jsx("div", { id: titleId, className: styles$3.mathTitle, children: title }),
-              /* @__PURE__ */ jsx(
-                "textarea",
-                {
-                  className: styles$3.mathTextarea,
-                  value: draft,
-                  placeholder,
-                  autoFocus: true,
-                  rows: kind === "block" ? 5 : 3,
-                  onChange: (e) => setDraft(e.target.value)
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: styles$3.mathPreview,
-                  dangerouslySetInnerHTML: { __html: preview }
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: styles$3.mathActions, children: [
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: styles$3.mathBtn,
-                    onClick: onCancel,
-                    children: cancelLabel
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    className: `${styles$3.mathBtn} ${styles$3.mathBtnPrimary}`,
-                    disabled: !canSubmit,
-                    onClick: () => onConfirm(draft.trim()),
-                    children: doneLabel
-                  }
-                )
-              ] })
-            ]
+            className: styles$3.mathAnchor,
+            style: { left: rect.left, top: rect.top }
           }
-        )
-      }
-    ),
-    document.body
+        ) }),
+        /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
+          Popover.Content,
+          {
+            className: styles$3.mathContent,
+            side: "bottom",
+            align: "start",
+            sideOffset: mode === "edit" ? 0 : 6,
+            collisionPadding: 12,
+            style: isBlock ? { width: Math.max(rect.width, 280) } : void 0,
+            onOpenAutoFocus: (e) => e.preventDefault(),
+            onCloseAutoFocus: (e) => e.preventDefault(),
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: isBlock ? `${styles$3.mathStack} ${styles$3.mathStackBlock}` : styles$3.mathStack,
+                role: "dialog",
+                "aria-modal": "false",
+                "aria-labelledby": titleId,
+                children: [
+                  showHint ? /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      id: titleId,
+                      className: isBlock ? `${styles$3.mathHint} ${styles$3.mathHintBlock}` : styles$3.mathHint,
+                      children: [
+                        /* @__PURE__ */ jsx("span", { className: styles$3.mathHintIcon, "aria-hidden": true, children: isBlock ? "TeX" : "√x" }),
+                        newLabel
+                      ]
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      id: titleId,
+                      className: isBlock ? styles$3.mathPreviewBlock : styles$3.mathPreviewInline,
+                      dangerouslySetInnerHTML: { __html: preview }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: isBlock ? `${styles$3.mathField} ${styles$3.mathFieldBlock}` : styles$3.mathField,
+                      children: [
+                        field,
+                        /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            type: "button",
+                            className: styles$3.mathDone,
+                            disabled: !canSubmit,
+                            title: isBlock ? `${doneLabel} (⌘/Ctrl+Enter)` : `${doneLabel} (Enter)`,
+                            onClick: submit,
+                            children: [
+                              doneLabel,
+                              /* @__PURE__ */ jsx("span", { className: styles$3.mathDoneKbd, "aria-hidden": true, children: "↵" })
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ) })
+      ]
+    }
   );
 }
 function ToolbarButton({
@@ -1888,12 +2007,14 @@ function EditorToolbar({
     mathEdit ? /* @__PURE__ */ jsx(
       MathEditorPopover,
       {
+        editor,
         kind: mathEdit.kind,
+        mode: mathEdit.mode,
+        pos: mathEdit.pos,
         latex: mathEdit.latex,
-        title: mathEdit.kind === "inline" ? t.inlineMath : t.blockMath,
+        newLabel: mathEdit.kind === "inline" ? t.mathNewInline : t.mathNewBlock,
         placeholder: t.mathPlaceholder,
         doneLabel: t.mathDone,
-        cancelLabel: t.mathCancel,
         onConfirm: applyMath,
         onCancel: () => setMathEdit(null)
       }