tiptap-markdown-react 0.7.5 → 0.8.1

package/dist/index.js

@@ -5,9 +5,9 @@ import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
 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, 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 ReportContent } from "./extractToc-DPWZ7Oby.js";
-import { g, h, i } from "./extractToc-DPWZ7Oby.js";
+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 { Slice, Fragment } from "@tiptap/pm/model";
 import { Extension } from "@tiptap/core";
 import { PluginKey, Plugin } from "@tiptap/pm/state";
@@ -585,7 +585,14 @@ const defaultToolbarLabels = {
   tableDeleteColumn: "Delete column",
   tableAddRowBefore: "Add row before",
   tableAddRowAfter: "Add row after",
-  tableDeleteRow: "Delete row"
+  tableDeleteRow: "Delete row",
+  inlineMath: "Inline equation",
+  blockMath: "Block equation",
+  mathPlaceholder: "E = mc^2",
+  mathDone: "Done",
+  mathCancel: "Cancel",
+  mathNewInline: "New equation",
+  mathNewBlock: "Add a TeX equation"
 };
 const defaultColorPaletteLabels = {
   none: "None",
@@ -974,28 +981,42 @@ function insertMarkdown(editor, markdown, sources = []) {
   const prepared = enrichMarkdownCitations(markdown, sources);
   editor.chain().focus().insertContent(prepared, { contentType: "markdown" }).run();
 }
-const toolbar = "_toolbar_i2emf_2";
-const inner = "_inner_i2emf_15";
-const btn = "_btn_i2emf_27";
-const btnActive = "_btnActive_i2emf_50";
-const tableBubble = "_tableBubble_i2emf_66";
-const txtIcon = "_txtIcon_i2emf_78";
-const colorIcon = "_colorIcon_i2emf_86";
-const colorIconGlyph = "_colorIconGlyph_i2emf_94";
-const colorIconBar = "_colorIconBar_i2emf_100";
-const scriptTrigger = "_scriptTrigger_i2emf_107";
-const scriptTriggerGlyph = "_scriptTriggerGlyph_i2emf_127";
-const divider = "_divider_i2emf_135";
-const styleTrigger = "_styleTrigger_i2emf_144";
-const styleTriggerLabel = "_styleTriggerLabel_i2emf_173";
-const styleTriggerCaret = "_styleTriggerCaret_i2emf_181";
-const styleItem = "_styleItem_i2emf_187";
-const styleIcon = "_styleIcon_i2emf_193";
-const scriptGlyph = "_scriptGlyph_i2emf_203";
-const menu = "_menu_i2emf_215";
-const menuItem = "_menuItem_i2emf_226";
-const menuItemSelected = "_menuItemSelected_i2emf_252";
-const popoverContent$1 = "_popoverContent_i2emf_266";
+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,
@@ -1018,7 +1039,21 @@ const styles$3 = {
   menu,
   menuItem,
   menuItemSelected,
-  popoverContent: popoverContent$1
+  popoverContent: popoverContent$1,
+  mathAnchor,
+  mathContent,
+  mathStack,
+  mathStackBlock,
+  mathHint,
+  mathHintBlock,
+  mathHintIcon,
+  mathPreviewInline,
+  mathPreviewBlock,
+  mathField,
+  mathFieldBlock,
+  mathInput,
+  mathDone,
+  mathDoneKbd
 };
 const palette = "_palette_x5lrq_2";
 const noneRow = "_noneRow_x5lrq_11";
@@ -1095,6 +1130,200 @@ 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,
+  newLabel,
+  placeholder,
+  doneLabel,
+  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 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);
+    };
+  }, [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;
+  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.mathAnchor,
+            style: { left: rect.left, top: rect.top }
+          }
+        ) }),
+        /* @__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({
   title,
   active: active2,
@@ -1369,6 +1598,38 @@ function EditorToolbar({
     else chain().unsetFontSize().run();
   };
   const canEditFontSize = editorFocused && state.isParagraph;
+  const [mathEdit, setMathEdit] = useState(null);
+  useEffect(() => subscribeMathClick((payload) => {
+    setMathEdit({
+      kind: payload.kind,
+      mode: "edit",
+      pos: payload.pos,
+      latex: payload.latex
+    });
+  }), []);
+  const openInsertMath = (kind) => {
+    const { from, to } = editor.state.selection;
+    const selected = from === to ? "" : editor.state.doc.textBetween(from, to, " ");
+    setMathEdit({ kind, mode: "insert", latex: selected });
+  };
+  const applyMath = (latex) => {
+    if (!mathEdit) return;
+    const { kind, mode, pos } = mathEdit;
+    setMathEdit(null);
+    if (mode === "edit" && pos != null) {
+      if (kind === "inline") {
+        chain().updateInlineMath({ latex, pos }).run();
+      } else {
+        chain().updateBlockMath({ latex, pos }).run();
+      }
+      return;
+    }
+    if (kind === "inline") {
+      chain().insertContent({ type: "inlineMath", attrs: { latex } }).run();
+    } else {
+      chain().insertContent({ type: "blockMath", attrs: { latex } }).run();
+    }
+  };
   const scriptActive = state.superscript ? "superscript" : state.subscript ? "subscript" : "normal";
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(
@@ -1685,6 +1946,14 @@ function EditorToolbar({
                   /* @__PURE__ */ jsx("span", { className: styles$3.styleIcon, children: "{ }" }),
                   t.codeBlock
                 ] }) }),
+                /* @__PURE__ */ jsx(MenuItem, { onSelect: () => openInsertMath("inline"), children: /* @__PURE__ */ jsxs("span", { className: styles$3.styleItem, children: [
+                  /* @__PURE__ */ jsx("span", { className: styles$3.styleIcon, children: "√x" }),
+                  t.inlineMath
+                ] }) }),
+                /* @__PURE__ */ jsx(MenuItem, { onSelect: () => openInsertMath("block"), children: /* @__PURE__ */ jsxs("span", { className: styles$3.styleItem, children: [
+                  /* @__PURE__ */ jsx("span", { className: styles$3.styleIcon, children: "∑" }),
+                  t.blockMath
+                ] }) }),
                 /* @__PURE__ */ jsx(MenuItem, { onSelect: () => chain().setHorizontalRule().run(), children: /* @__PURE__ */ jsxs("span", { className: styles$3.styleItem, children: [
                   /* @__PURE__ */ jsx("span", { className: styles$3.styleIcon, children: "—" }),
                   t.hr
@@ -1735,6 +2004,21 @@ function EditorToolbar({
         onChange: handleMdFileChange
       }
     ),
+    mathEdit ? /* @__PURE__ */ jsx(
+      MathEditorPopover,
+      {
+        editor,
+        kind: mathEdit.kind,
+        mode: mathEdit.mode,
+        pos: mathEdit.pos,
+        latex: mathEdit.latex,
+        newLabel: mathEdit.kind === "inline" ? t.mathNewInline : t.mathNewBlock,
+        placeholder: t.mathPlaceholder,
+        doneLabel: t.mathDone,
+        onConfirm: applyMath,
+        onCancel: () => setMathEdit(null)
+      }
+    ) : null,
     tableMenu && createPortal(
       /* @__PURE__ */ jsxs(
         "div",
@@ -2154,10 +2438,10 @@ export {
   TrashIcon,
   UnderlineIcon,
   UndoIcon,
-  g as applyCitationSources,
+  h as applyCitationSources,
   applyCommentAnchorsToEditor,
   baseExtensions,
-  h as blockTextHash,
+  i as blockTextHash,
   collectCommentIds,
   commentAnchorExtension,
   commentAnchorPlugin,
@@ -2170,7 +2454,7 @@ export {
   defaultTocLabels,
   defaultToolbarLabels,
   enrichMarkdownCitations,
-  i as extractToc,
+  j as extractToc,
   findCitationRefElement,
   focusComment,
   insertMarkdown,