tiptap-markdown-react 0.8.1 → 0.8.3

package/dist/index.js

@@ -6,8 +6,8 @@ import Image from "@tiptap/extension-image";
 import { TableOfContents } from "@tiptap/extension-table-of-contents";
 import { NodeViewWrapper, ReactNodeViewRenderer, NodeViewContent, useEditor, EditorContent, useEditorState } from "@tiptap/react";
 import { forwardRef, useEffect, useRef, useImperativeHandle, useMemo, useState, useId, useCallback, useContext, createContext } from "react";
-import { C as CitationRef, m as mergeCommentIntervals, a as mapCommentAnchors, e as enrichMarkdownCitations, s as styles$5, b as baseExtensions, c as CommentMark, l as lowlight, d as makeTocGetId, p as pureCodeBlock, f as pureImage, r as renderMathHtml, g as subscribeMathClick, R as ReportContent } from "./extractToc-C0E_xYTj.js";
-import { h, i, j } from "./extractToc-C0E_xYTj.js";
+import { C as CitationRef, m as mergeCommentIntervals, a as mapCommentAnchors, e as enrichMarkdownCitations, s as styles$5, b as baseExtensions, c as CommentMark, l as lowlight, d as makeTocGetId, p as pureCodeBlock, f as pureImage, r as renderMathHtml, g as subscribeMathClick, R as ReportContent } from "./extractToc-CMvSKha8.js";
+import { h, i, j } from "./extractToc-CMvSKha8.js";
 import { Slice, Fragment } from "@tiptap/pm/model";
 import { Extension } from "@tiptap/core";
 import { PluginKey, Plugin } from "@tiptap/pm/state";
@@ -981,42 +981,41 @@ function insertMarkdown(editor, markdown, sources = []) {
   const prepared = enrichMarkdownCitations(markdown, sources);
   editor.chain().focus().insertContent(prepared, { contentType: "markdown" }).run();
 }
-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 toolbar = "_toolbar_w3tos_2";
+const inner = "_inner_w3tos_15";
+const btn = "_btn_w3tos_27";
+const btnActive = "_btnActive_w3tos_50";
+const tableBubble = "_tableBubble_w3tos_66";
+const txtIcon = "_txtIcon_w3tos_78";
+const colorIcon = "_colorIcon_w3tos_86";
+const colorIconGlyph = "_colorIconGlyph_w3tos_94";
+const colorIconBar = "_colorIconBar_w3tos_100";
+const scriptTrigger = "_scriptTrigger_w3tos_107";
+const scriptTriggerGlyph = "_scriptTriggerGlyph_w3tos_127";
+const divider = "_divider_w3tos_135";
+const styleTrigger = "_styleTrigger_w3tos_144";
+const styleTriggerLabel = "_styleTriggerLabel_w3tos_173";
+const styleTriggerCaret = "_styleTriggerCaret_w3tos_181";
+const styleItem = "_styleItem_w3tos_187";
+const styleIcon = "_styleIcon_w3tos_193";
+const scriptGlyph = "_scriptGlyph_w3tos_203";
+const menu = "_menu_w3tos_215";
+const menuItem = "_menuItem_w3tos_226";
+const menuItemSelected = "_menuItemSelected_w3tos_252";
+const popoverContent$1 = "_popoverContent_w3tos_266";
+const mathLayer = "_mathLayer_w3tos_270";
+const mathStack = "_mathStack_w3tos_275";
+const mathStackBlock = "_mathStackBlock_w3tos_282";
+const mathHint = "_mathHint_w3tos_287";
+const mathHintBlock = "_mathHintBlock_w3tos_299";
+const mathHintIcon = "_mathHintIcon_w3tos_305";
+const mathPreviewInline = "_mathPreviewInline_w3tos_311";
+const mathPreviewBlock = "_mathPreviewBlock_w3tos_337";
+const mathField = "_mathField_w3tos_367";
+const mathFieldBlock = "_mathFieldBlock_w3tos_379";
+const mathInput = "_mathInput_w3tos_386";
+const mathDone = "_mathDone_w3tos_404";
+const mathDoneKbd = "_mathDoneKbd_w3tos_429";
 const styles$3 = {
   toolbar,
   inner,
@@ -1040,8 +1039,7 @@ const styles$3 = {
   menuItem,
   menuItemSelected,
   popoverContent: popoverContent$1,
-  mathAnchor,
-  mathContent,
+  mathLayer,
   mathStack,
   mathStackBlock,
   mathHint,
@@ -1130,24 +1128,52 @@ function ColorPalette({ value, onPick, labels }) {
     )) })
   ] });
 }
-function getMathAnchorRect(editor, kind, pos) {
+function resolveNodeEl(editor, pos) {
+  const dom = editor.view.nodeDOM(pos);
+  if (dom instanceof HTMLElement) return dom;
+  if (dom instanceof Node) return dom.parentElement;
+  return null;
+}
+function getMathPreviewFontSize(editor, pos) {
+  const el = pos != null ? resolveNodeEl(editor, pos) : null;
+  return getComputedStyle(el ?? editor.view.dom).fontSize;
+}
+function getMathLayerStyle(editor, kind, mode, pos) {
+  const host = editor.view.dom.parentElement;
+  if (!host) return {};
+  const hostRect = host.getBoundingClientRect();
   const editorRect = editor.view.dom.getBoundingClientRect();
+  const gap = mode === "edit" ? 0 : 6;
+  const blockWidth = editor.view.dom.clientWidth;
   if (pos != null) {
-    const dom = editor.view.nodeDOM(pos);
-    const el = dom instanceof HTMLElement ? dom : dom instanceof Node ? dom.parentElement : null;
+    const el = resolveNodeEl(editor, pos);
     if (el) {
       const r = el.getBoundingClientRect();
       if (kind === "block") {
-        return new DOMRect(editorRect.left, r.top, editorRect.width, r.height);
+        return {
+          left: editorRect.left - hostRect.left,
+          top: r.top - hostRect.top + gap,
+          width: blockWidth
+        };
       }
-      return r;
+      return {
+        left: r.left - hostRect.left,
+        top: r.top - hostRect.top + gap
+      };
     }
   }
   const coords = editor.view.coordsAtPos(editor.state.selection.from);
   if (kind === "block") {
-    return new DOMRect(editorRect.left, coords.bottom, editorRect.width, 0);
+    return {
+      left: editorRect.left - hostRect.left,
+      top: coords.bottom - hostRect.top + gap,
+      width: blockWidth
+    };
   }
-  return new DOMRect(coords.left, coords.bottom, 0, 0);
+  return {
+    left: coords.left - hostRect.left,
+    top: coords.bottom - hostRect.top + gap
+  };
 }
 function MathEditorPopover({
   editor,
@@ -1162,38 +1188,53 @@ function MathEditorPopover({
   onCancel
 }) {
   const [draft, setDraft] = useState(latex);
-  const [rect, setRect] = useState(() => getMathAnchorRect(editor, kind, pos));
+  const [layerStyle, setLayerStyle] = useState(
+    () => getMathLayerStyle(editor, kind, mode, pos)
+  );
+  const [previewFontSize, setPreviewFontSize] = useState(
+    () => getMathPreviewFontSize(editor, pos)
+  );
   const titleId = useId();
   const inputRef = useRef(null);
-  const confirmedRef = useRef(false);
+  const rootRef = useRef(null);
   const isBlock = kind === "block";
+  const host = editor.view.dom.parentElement;
   useEffect(() => {
     setDraft(latex);
   }, [latex]);
   useEffect(() => {
-    const update = () => setRect(getMathAnchorRect(editor, kind, pos));
+    const update = () => {
+      setLayerStyle(getMathLayerStyle(editor, kind, mode, pos));
+      setPreviewFontSize(getMathPreviewFontSize(editor, pos));
+    };
     update();
     window.addEventListener("resize", update);
-    window.addEventListener("scroll", update, true);
-    return () => {
-      window.removeEventListener("resize", update);
-      window.removeEventListener("scroll", update, true);
-    };
-  }, [editor, kind, pos]);
+    return () => window.removeEventListener("resize", update);
+  }, [editor, kind, mode, 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;
+    const el = resolveNodeEl(editor, pos);
     if (!el) return;
     el.classList.add("tmr-math-editing");
     return () => {
       el.classList.remove("tmr-math-editing");
     };
   }, [editor, pos]);
+  useEffect(() => {
+    const onPtr = (e) => {
+      var _a;
+      const target = e.target;
+      if (!(target instanceof Node)) return;
+      if ((_a = rootRef.current) == null ? void 0 : _a.contains(target)) return;
+      onCancel();
+    };
+    document.addEventListener("pointerdown", onPtr);
+    return () => document.removeEventListener("pointerdown", onPtr);
+  }, [onCancel]);
   const preview = useMemo(
     () => renderMathHtml(draft.trim(), isBlock),
     [draft, isBlock]
@@ -1202,7 +1243,6 @@ function MathEditorPopover({
   const showHint = !canSubmit && mode === "insert";
   const submit = () => {
     if (!canSubmit) return;
-    confirmedRef.current = true;
     onConfirm(draft.trim());
   };
   const onKeyDown = (e) => {
@@ -1240,88 +1280,70 @@ function MathEditorPopover({
       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.mathAnchor,
-            style: { left: rect.left, top: rect.top }
-          }
-        ) }),
-        /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
-          Popover.Content,
+  if (!host) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: rootRef,
+        className: styles$3.mathLayer,
+        style: layerStyle,
+        role: "dialog",
+        "aria-modal": "false",
+        "aria-labelledby": titleId,
+        children: /* @__PURE__ */ jsxs(
+          "div",
           {
-            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: "↵" })
-                            ]
-                          }
-                        )
-                      ]
-                    }
-                  )
-                ]
-              }
-            )
+            className: isBlock ? `${styles$3.mathStack} ${styles$3.mathStackBlock}` : styles$3.mathStack,
+            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,
+                  style: { fontSize: previewFontSize },
+                  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: "↵" })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
           }
-        ) })
-      ]
-    }
+        )
+      }
+    ),
+    host
   );
 }
 function ToolbarButton({