tiptap-markdown-react 0.8.0 → 0.8.2

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";
@@ -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,41 @@ 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_16b09_2";
+const inner = "_inner_16b09_15";
+const btn = "_btn_16b09_27";
+const btnActive = "_btnActive_16b09_50";
+const tableBubble = "_tableBubble_16b09_66";
+const txtIcon = "_txtIcon_16b09_78";
+const colorIcon = "_colorIcon_16b09_86";
+const colorIconGlyph = "_colorIconGlyph_16b09_94";
+const colorIconBar = "_colorIconBar_16b09_100";
+const scriptTrigger = "_scriptTrigger_16b09_107";
+const scriptTriggerGlyph = "_scriptTriggerGlyph_16b09_127";
+const divider = "_divider_16b09_135";
+const styleTrigger = "_styleTrigger_16b09_144";
+const styleTriggerLabel = "_styleTriggerLabel_16b09_173";
+const styleTriggerCaret = "_styleTriggerCaret_16b09_181";
+const styleItem = "_styleItem_16b09_187";
+const styleIcon = "_styleIcon_16b09_193";
+const scriptGlyph = "_scriptGlyph_16b09_203";
+const menu = "_menu_16b09_215";
+const menuItem = "_menuItem_16b09_226";
+const menuItemSelected = "_menuItemSelected_16b09_252";
+const popoverContent$1 = "_popoverContent_16b09_266";
+const mathLayer = "_mathLayer_16b09_270";
+const mathStack = "_mathStack_16b09_275";
+const mathStackBlock = "_mathStackBlock_16b09_282";
+const mathHint = "_mathHint_16b09_287";
+const mathHintBlock = "_mathHintBlock_16b09_299";
+const mathHintIcon = "_mathHintIcon_16b09_305";
+const mathPreviewInline = "_mathPreviewInline_16b09_311";
+const mathPreviewBlock = "_mathPreviewBlock_16b09_321";
+const mathField = "_mathField_16b09_336";
+const mathFieldBlock = "_mathFieldBlock_16b09_348";
+const mathInput = "_mathInput_16b09_355";
+const mathDone = "_mathDone_16b09_373";
+const mathDoneKbd = "_mathDoneKbd_16b09_398";
 const styles$3 = {
   toolbar,
   inner,
@@ -1032,14 +1039,19 @@ const styles$3 = {
   menuItem,
   menuItemSelected,
   popoverContent: popoverContent$1,
-  mathOverlay,
-  mathPopover,
-  mathTitle,
-  mathTextarea,
-  mathPreview,
-  mathActions,
-  mathBtn,
-  mathBtnPrimary
+  mathLayer,
+  mathStack,
+  mathStackBlock,
+  mathHint,
+  mathHintBlock,
+  mathHintIcon,
+  mathPreviewInline,
+  mathPreviewBlock,
+  mathField,
+  mathFieldBlock,
+  mathInput,
+  mathDone,
+  mathDoneKbd
 };
 const palette = "_palette_x5lrq_2";
 const noneRow = "_noneRow_x5lrq_11";
@@ -1116,93 +1128,211 @@ function ColorPalette({ value, onPick, labels }) {
     )) })
   ] });
 }
+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 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 el = resolveNodeEl(editor, pos);
+    if (el) {
+      const r = el.getBoundingClientRect();
+      if (kind === "block") {
+        return {
+          left: editorRect.left - hostRect.left,
+          top: r.top - hostRect.top + gap,
+          width: blockWidth
+        };
+      }
+      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 {
+      left: editorRect.left - hostRect.left,
+      top: coords.bottom - hostRect.top + gap,
+      width: blockWidth
+    };
+  }
+  return {
+    left: coords.left - hostRect.left,
+    top: coords.bottom - hostRect.top + gap
+  };
+}
 function MathEditorPopover({
+  editor,
   kind,
+  mode,
+  pos,
   latex,
-  title,
+  newLabel,
   placeholder,
   doneLabel,
-  cancelLabel,
   onConfirm,
   onCancel
 }) {
   const [draft, setDraft] = useState(latex);
+  const [layerStyle, setLayerStyle] = useState(
+    () => getMathLayerStyle(editor, kind, mode, pos)
+  );
   const titleId = useId();
+  const inputRef = useRef(null);
+  const rootRef = useRef(null);
+  const isBlock = kind === "block";
+  const host = editor.view.dom.parentElement;
   useEffect(() => {
     setDraft(latex);
   }, [latex]);
   useEffect(() => {
-    const onKey = (e) => {
-      if (e.key === "Escape") onCancel();
+    const update = () => setLayerStyle(getMathLayerStyle(editor, kind, mode, pos));
+    update();
+    window.addEventListener("resize", update);
+    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 el = resolveNodeEl(editor, pos);
+    if (!el) return;
+    el.classList.add("tmr-math-editing");
+    return () => {
+      el.classList.remove("tmr-math-editing");
     };
-    document.addEventListener("keydown", onKey, true);
-    return () => document.removeEventListener("keydown", onKey, true);
+  }, [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 = renderMathHtml(draft.trim(), kind === "block");
+  const preview = useMemo(
+    () => renderMathHtml(draft.trim(), isBlock),
+    [draft, isBlock]
+  );
   const canSubmit = draft.trim().length > 0;
+  const showHint = !canSubmit && mode === "insert";
+  const submit = () => {
+    if (!canSubmit) return;
+    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
+    }
+  );
+  if (!host) return null;
   return createPortal(
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: styles$3.mathOverlay,
-        onMouseDown: (e) => {
-          if (e.target === e.currentTarget) onCancel();
-        },
+        ref: rootRef,
+        className: styles$3.mathLayer,
+        style: layerStyle,
+        role: "dialog",
+        "aria-modal": "false",
+        "aria-labelledby": titleId,
         children: /* @__PURE__ */ jsxs(
           "div",
           {
-            className: styles$3.mathPopover,
-            role: "dialog",
-            "aria-modal": "true",
-            "aria-labelledby": titleId,
-            onMouseDown: (e) => e.stopPropagation(),
+            className: isBlock ? `${styles$3.mathStack} ${styles$3.mathStackBlock}` : styles$3.mathStack,
             children: [
-              /* @__PURE__ */ jsx("div", { id: titleId, className: styles$3.mathTitle, children: title }),
-              /* @__PURE__ */ jsx(
-                "textarea",
+              showHint ? /* @__PURE__ */ jsxs(
+                "div",
                 {
-                  className: styles$3.mathTextarea,
-                  value: draft,
-                  placeholder,
-                  autoFocus: true,
-                  rows: kind === "block" ? 5 : 3,
-                  onChange: (e) => setDraft(e.target.value)
+                  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(
+              ) : /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: styles$3.mathPreview,
+                  id: titleId,
+                  className: isBlock ? styles$3.mathPreviewBlock : styles$3.mathPreviewInline,
                   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
-                  }
-                )
-              ] })
+              /* @__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: "↵" })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
             ]
           }
         )
       }
     ),
-    document.body
+    host
   );
 }
 function ToolbarButton({
@@ -1888,12 +2018,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)
       }