tiptap-markdown-react 0.7.4 → 0.8.0

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,12 @@ 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"
 };
 const defaultColorPaletteLabels = {
   none: "None",
@@ -974,28 +979,36 @@ 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_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 styles$3 = {
   toolbar,
   inner,
@@ -1018,7 +1031,15 @@ const styles$3 = {
   menu,
   menuItem,
   menuItemSelected,
-  popoverContent: popoverContent$1
+  popoverContent: popoverContent$1,
+  mathOverlay,
+  mathPopover,
+  mathTitle,
+  mathTextarea,
+  mathPreview,
+  mathActions,
+  mathBtn,
+  mathBtnPrimary
 };
 const palette = "_palette_x5lrq_2";
 const noneRow = "_noneRow_x5lrq_11";
@@ -1095,6 +1116,95 @@ function ColorPalette({ value, onPick, labels }) {
     )) })
   ] });
 }
+function MathEditorPopover({
+  kind,
+  latex,
+  title,
+  placeholder,
+  doneLabel,
+  cancelLabel,
+  onConfirm,
+  onCancel
+}) {
+  const [draft, setDraft] = useState(latex);
+  const titleId = useId();
+  useEffect(() => {
+    setDraft(latex);
+  }, [latex]);
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") onCancel();
+    };
+    document.addEventListener("keydown", onKey, true);
+    return () => document.removeEventListener("keydown", onKey, true);
+  }, [onCancel]);
+  const preview = renderMathHtml(draft.trim(), kind === "block");
+  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",
+          {
+            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
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
 function ToolbarButton({
   title,
   active: active2,
@@ -1369,6 +1479,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 +1827,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 +1885,19 @@ function EditorToolbar({
         onChange: handleMdFileChange
       }
     ),
+    mathEdit ? /* @__PURE__ */ jsx(
+      MathEditorPopover,
+      {
+        kind: mathEdit.kind,
+        latex: mathEdit.latex,
+        title: mathEdit.kind === "inline" ? t.inlineMath : t.blockMath,
+        placeholder: t.mathPlaceholder,
+        doneLabel: t.mathDone,
+        cancelLabel: t.mathCancel,
+        onConfirm: applyMath,
+        onCancel: () => setMathEdit(null)
+      }
+    ) : null,
     tableMenu && createPortal(
       /* @__PURE__ */ jsxs(
         "div",
@@ -2154,10 +2317,10 @@ export {
   TrashIcon,
   UnderlineIcon,
   UndoIcon,
-  g as applyCitationSources,
+  h as applyCitationSources,
   applyCommentAnchorsToEditor,
   baseExtensions,
-  h as blockTextHash,
+  i as blockTextHash,
   collectCommentIds,
   commentAnchorExtension,
   commentAnchorPlugin,
@@ -2170,7 +2333,7 @@ export {
   defaultTocLabels,
   defaultToolbarLabels,
   enrichMarkdownCitations,
-  i as extractToc,
+  j as extractToc,
   findCitationRefElement,
   focusComment,
   insertMarkdown,