tiptap-markdown-react 0.11.0 → 0.12.1

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { Markdown, MarkdownManager } from "@tiptap/markdown";
-import { c as renderOrUpdateChart, d as destroyChart } from "./scrollToTocHeading-EkePiWil.js";
-import { C, a, R, b, f, m, r, s } from "./scrollToTocHeading-EkePiWil.js";
+import { c as renderOrUpdateChart, d as destroyChart } from "./scrollToTocHeading-DVdii3VR.js";
+import { C, a, R, b, f, m, r, s } from "./scrollToTocHeading-DVdii3VR.js";
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
 import FindAndReplace, { FindAndReplacePluginKey, createSearchRegex } from "@tiptap/extension-find-and-replace";
@@ -9,11 +9,12 @@ import { default as default2 } from "@tiptap/extension-find-and-replace";
 import Image from "@tiptap/extension-image";
 import { TableOfContents } from "@tiptap/extension-table-of-contents";
 import { NodeViewWrapper, ReactNodeViewRenderer, useEditorState, NodeViewContent, useEditor, EditorContent } from "@tiptap/react";
-import { useState, useRef, useCallback, useEffect, useMemo, forwardRef, useImperativeHandle, useId, useContext, createContext } from "react";
-import { e as enrichMarkdownCitations, b as styles$6 } from "./ReportContent-By-tSiNn.js";
-import { R as R2, a as a2, s as s2 } from "./ReportContent-By-tSiNn.js";
-import { C as CitationRef, i as mergeCommentIntervals, h as mapCommentAnchors, p as prepareChartMarkdown, j as reportChart, b as baseExtensions, f as CommentMark, l as lowlight, m as makeTocGetId, k as parseCodeTokenAsChartOrCodeBlock, a as pureCodeBlock, c as pureImage, n as renderMathInto, o as subscribeMathClick, d as pureChart } from "./extractToc-CB4RYsMJ.js";
-import { g, e, s as s3 } from "./extractToc-CB4RYsMJ.js";
+import { createPortal } from "react-dom";
+import { useState, useEffect, useCallback, useRef, useMemo, forwardRef, useImperativeHandle, useId, useContext, createContext } from "react";
+import { e as enrichMarkdownCitations, b as styles$6 } from "./ReportContent-CfvE4CYH.js";
+import { R as R2, a as a2, s as s2 } from "./ReportContent-CfvE4CYH.js";
+import { C as CitationRef, i as mergeCommentIntervals, h as mapCommentAnchors, p as prepareChartMarkdown, j as reportChart, b as baseExtensions, f as CommentMark, l as lowlight, m as makeTocGetId, k as parseCodeTokenAsChartOrCodeBlock, a as pureCodeBlock, c as pureImage, n as renderMathInto, o as subscribeMathClick, d as pureChart } from "./extractToc-BT3OquOq.js";
+import { g, e, s as s3 } from "./extractToc-BT3OquOq.js";
 import { Slice, Fragment } from "@tiptap/pm/model";
 import { Extension, Node as Node$1 } from "@tiptap/core";
 import { PluginKey, Plugin, NodeSelection, TextSelection } from "@tiptap/pm/state";
@@ -23,7 +24,6 @@ import { skipTrailingNodeMeta } from "@tiptap/extensions";
 import { CellSelection, isInTable, selectedRect, rowIsHeader } from "@tiptap/pm/tables";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import * as Popover from "@radix-ui/react-popover";
-import { createPortal } from "react-dom";
 function CitationRefView({ node, extension }) {
   const index = String(node.attrs.index ?? "");
   const url = node.attrs.url || null;
@@ -462,6 +462,26 @@ const XIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
   /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
 ] });
 const ChevronUpIcon = (p) => /* @__PURE__ */ jsx(Svg, { ...p, children: /* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6" }) });
+const ReplaceIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("path", { d: "M14 4a1 1 0 0 1 1-1" }),
+  /* @__PURE__ */ jsx("path", { d: "M15 10a1 1 0 0 1-1-1" }),
+  /* @__PURE__ */ jsx("path", { d: "M21 4a1 1 0 0 0-1-1" }),
+  /* @__PURE__ */ jsx("path", { d: "M21 9a1 1 0 0 1-1 1" }),
+  /* @__PURE__ */ jsx("path", { d: "m3 7 3 3 3-3" }),
+  /* @__PURE__ */ jsx("path", { d: "M6 10V5a2 2 0 0 1 2-2h2" }),
+  /* @__PURE__ */ jsx("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1" })
+] });
+const ReplaceAllIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("path", { d: "M14 14a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1" }),
+  /* @__PURE__ */ jsx("path", { d: "M14 4a1 1 0 0 1 1-1" }),
+  /* @__PURE__ */ jsx("path", { d: "M15 10a1 1 0 0 1-1-1" }),
+  /* @__PURE__ */ jsx("path", { d: "M19 14a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1" }),
+  /* @__PURE__ */ jsx("path", { d: "M21 4a1 1 0 0 0-1-1" }),
+  /* @__PURE__ */ jsx("path", { d: "M21 9a1 1 0 0 1-1 1" }),
+  /* @__PURE__ */ jsx("path", { d: "m3 7 3 3 3-3" }),
+  /* @__PURE__ */ jsx("path", { d: "M6 10V5a2 2 0 0 1 2-2h2" }),
+  /* @__PURE__ */ jsx("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1" })
+] });
 const ColumnBeforeIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
   /* @__PURE__ */ jsx("rect", { x: "10", y: "4", width: "11", height: "16", rx: "1" }),
   /* @__PURE__ */ jsx("path", { d: "M14 4v16" }),
@@ -614,19 +634,19 @@ const defaultFindLabels = {
   invalidRegex: "Invalid pattern",
   readOnly: "Read-only"
 };
-const bar = "_bar_fzqxj_3";
-const row = "_row_fzqxj_25";
-const field = "_field_fzqxj_33";
-const fieldIcon = "_fieldIcon_fzqxj_49";
-const input = "_input_fzqxj_54";
-const counter = "_counter_fzqxj_65";
-const counterInvalid = "_counterInvalid_fzqxj_74";
-const btn$1 = "_btn_fzqxj_78";
-const toggle = "_toggle_fzqxj_106";
-const toggleOn = "_toggleOn_fzqxj_111";
-const textBtn = "_textBtn_fzqxj_121";
-const spacer = "_spacer_fzqxj_126";
-const readOnly = "_readOnly_fzqxj_131";
+const bar = "_bar_1h61e_3";
+const row = "_row_1h61e_25";
+const field = "_field_1h61e_43";
+const fieldIcon = "_fieldIcon_1h61e_62";
+const input = "_input_1h61e_67";
+const counter = "_counter_1h61e_79";
+const counterInvalid = "_counterInvalid_1h61e_89";
+const btn$1 = "_btn_1h61e_93";
+const toggle = "_toggle_1h61e_29";
+const toggleOn = "_toggleOn_1h61e_135";
+const iconGroup = "_iconGroup_1h61e_29";
+const spacer = "_spacer_1h61e_150";
+const readOnly = "_readOnly_1h61e_155";
 const styles$5 = {
   bar,
   row,
@@ -638,7 +658,7 @@ const styles$5 = {
   btn: btn$1,
   toggle,
   toggleOn,
-  textBtn,
+  iconGroup,
   spacer,
   readOnly
 };
@@ -647,11 +667,20 @@ function FindReplaceBar({
   onClose,
   labels,
   inputRef,
-  className
+  className,
+  style
 }) {
   const t = { ...defaultFindLabels, ...labels };
   const [term, setTerm] = useState("");
   const [replaceTerm, setReplaceTerm] = useState("");
+  const hasExtension = typeof editor.commands.setSearchTerm === "function";
+  useEffect(() => {
+    if (!hasExtension) {
+      console.warn(
+        "[tiptap-markdown-react] FindReplaceBar 需要官方 find 扩展：请让 <MarkdownWysiwygEditor findReplace> 保持开启（默认 true），否则 setSearchTerm / replaceAll 等命令不存在。"
+      );
+    }
+  }, [hasExtension]);
   const state = useEditorState({
     editor,
     selector: ({ editor: instance }) => {
@@ -665,13 +694,20 @@ function FindReplaceBar({
       };
     }
   });
+  const runCommand = useCallback(
+    (run) => {
+      if (!hasExtension) return;
+      runFindCommand(run);
+    },
+    [hasExtension]
+  );
   const appliedTermRef = useRef(null);
   const pushTerm = useCallback(
     (value) => {
       appliedTermRef.current = value;
-      runFindCommand(() => editor.commands.setSearchTerm(value));
+      runCommand(() => editor.commands.setSearchTerm(value));
     },
-    [editor]
+    [editor, runCommand]
   );
   const flushTerm = useCallback(() => {
     if (appliedTermRef.current !== term) pushTerm(term);
@@ -682,19 +718,19 @@ function FindReplaceBar({
     return () => clearTimeout(timer);
   }, [term, pushTerm]);
   useEffect(() => {
-    runFindCommand(() => editor.commands.setReplaceTerm(replaceTerm));
-  }, [editor, replaceTerm]);
+    runCommand(() => editor.commands.setReplaceTerm(replaceTerm));
+  }, [editor, replaceTerm, runCommand]);
   useEffect(() => {
     return () => {
-      if (!editor.isDestroyed) editor.commands.clearSearch();
+      if (!editor.isDestroyed) runCommand(() => editor.commands.clearSearch());
     };
-  }, [editor]);
+  }, [editor, runCommand]);
   const runAction = useCallback(
     (action) => {
       flushTerm();
-      runFindCommand(action);
+      runCommand(action);
     },
-    [flushTerm]
+    [flushTerm, runCommand]
   );
   const invalidPattern = useMemo(
     () => term !== "" && state.useRegex && createSearchRegex(term, {
@@ -725,17 +761,18 @@ function FindReplaceBar({
     }
   };
   const toggle2 = (key, value) => {
-    runFindCommand(() => {
+    runCommand(() => {
       if (key === "caseSensitive") editor.commands.setCaseSensitive(value);
-      else if (key === "wholeWord") editor.commands.setWholeWord(value);
-      else editor.commands.setUseRegex(value);
+      else editor.commands.setWholeWord(value);
     });
   };
+  if (!hasExtension) return null;
   const toggleClass = (on) => `${styles$5.btn} ${styles$5.toggle}${on ? ` ${styles$5.toggleOn}` : ""}`;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: className ? `${styles$5.bar} ${className}` : styles$5.bar,
+      style,
       role: "dialog",
       "aria-label": t.find,
       onKeyDown: (e2) => {
@@ -761,68 +798,17 @@ function FindReplaceBar({
                 autoFocus: true,
                 spellCheck: false
               }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `${styles$5.counter}${invalidPattern ? ` ${styles$5.counterInvalid}` : ""}`,
+                "aria-live": "polite",
+                title: invalidPattern ? t.invalidRegex : void 0,
+                children: invalidPattern ? t.invalidRegex : counter2
+              }
             )
           ] }),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: `${styles$5.counter}${invalidPattern ? ` ${styles$5.counterInvalid}` : ""}`,
-              "aria-live": "polite",
-              title: invalidPattern ? t.invalidRegex : void 0,
-              children: invalidPattern ? t.invalidRegex : counter2
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: styles$5.btn,
-              title: t.previous,
-              "aria-label": t.previous,
-              disabled: state.total === 0,
-              onMouseDown: keepFocus,
-              onClick: () => runAction(() => editor.commands.goToPreviousResult()),
-              children: /* @__PURE__ */ jsx(ChevronUpIcon, { size: 16 })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: styles$5.btn,
-              title: t.next,
-              "aria-label": t.next,
-              disabled: state.total === 0,
-              onMouseDown: keepFocus,
-              onClick: () => runAction(() => editor.commands.goToNextResult()),
-              children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: 16 })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: styles$5.btn,
-              title: t.close,
-              "aria-label": t.close,
-              onClick: onClose,
-              children: /* @__PURE__ */ jsx(XIcon, { size: 16 })
-            }
-          )
-        ] }),
-        editor.isEditable ? /* @__PURE__ */ jsxs("div", { className: styles$5.row, children: [
-          /* @__PURE__ */ jsx("span", { className: styles$5.field, children: /* @__PURE__ */ jsx(
-            "input",
-            {
-              className: styles$5.input,
-              value: replaceTerm,
-              onChange: (e2) => setReplaceTerm(e2.target.value),
-              onKeyDown: onReplaceKeyDown,
-              placeholder: t.replace,
-              "aria-label": t.replace,
-              spellCheck: false
-            }
-          ) }),
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -849,40 +835,85 @@ function FindReplaceBar({
               children: "ab"
             }
           ),
-          /* @__PURE__ */ jsx(
-            "button",
+          /* @__PURE__ */ jsx("span", { className: styles$5.spacer }),
+          /* @__PURE__ */ jsxs("span", { className: styles$5.iconGroup, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: styles$5.btn,
+                title: t.previous,
+                "aria-label": t.previous,
+                disabled: state.total === 0,
+                onMouseDown: keepFocus,
+                onClick: () => runAction(() => editor.commands.goToPreviousResult()),
+                children: /* @__PURE__ */ jsx(ChevronUpIcon, { size: 16 })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: styles$5.btn,
+                title: t.next,
+                "aria-label": t.next,
+                disabled: state.total === 0,
+                onMouseDown: keepFocus,
+                onClick: () => runAction(() => editor.commands.goToNextResult()),
+                children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: 16 })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: styles$5.btn,
+                title: t.close,
+                "aria-label": t.close,
+                onClick: onClose,
+                children: /* @__PURE__ */ jsx(XIcon, { size: 16 })
+              }
+            )
+          ] })
+        ] }),
+        editor.isEditable ? /* @__PURE__ */ jsxs("div", { className: styles$5.row, children: [
+          /* @__PURE__ */ jsx("span", { className: styles$5.field, children: /* @__PURE__ */ jsx(
+            "input",
             {
-              type: "button",
-              className: toggleClass(state.useRegex),
-              title: t.useRegex,
-              "aria-label": t.useRegex,
-              "aria-pressed": state.useRegex,
-              onMouseDown: keepFocus,
-              onClick: () => toggle2("useRegex", !state.useRegex),
-              children: ".*"
+              className: styles$5.input,
+              value: replaceTerm,
+              onChange: (e2) => setReplaceTerm(e2.target.value),
+              onKeyDown: onReplaceKeyDown,
+              placeholder: t.replace,
+              "aria-label": t.replace,
+              spellCheck: false
             }
-          ),
+          ) }),
           /* @__PURE__ */ jsx("span", { className: styles$5.spacer }),
           /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
-              className: `${styles$5.btn} ${styles$5.textBtn}`,
+              className: styles$5.btn,
+              title: t.replaceOne,
+              "aria-label": t.replaceOne,
               disabled: state.total === 0,
               onMouseDown: keepFocus,
               onClick: () => runAction(() => editor.commands.replace()),
-              children: t.replaceOne
+              children: /* @__PURE__ */ jsx(ReplaceIcon, { size: 16 })
             }
           ),
           /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
-              className: `${styles$5.btn} ${styles$5.textBtn}`,
+              className: styles$5.btn,
+              title: t.replaceAll,
+              "aria-label": t.replaceAll,
               disabled: state.total === 0,
               onMouseDown: keepFocus,
               onClick: () => runAction(() => editor.commands.replaceAll()),
-              children: t.replaceAll
+              children: /* @__PURE__ */ jsx(ReplaceAllIcon, { size: 16 })
             }
           )
         ] }) : /* @__PURE__ */ jsx("div", { className: styles$5.row, children: /* @__PURE__ */ jsx("span", { className: styles$5.readOnly, children: t.readOnly }) })
@@ -1425,6 +1456,17 @@ const ImageWithConfirmDelete = Image.extend({
     };
   }
 });
+const DEFAULT_FIND_BAR_OFFSET = { top: 4, right: 4 };
+function findBarOffsetStyle(offset) {
+  const px = (v) => typeof v === "number" ? `${v}px` : v;
+  return {
+    position: "absolute",
+    top: px(offset.top),
+    right: px(offset.right),
+    bottom: px(offset.bottom),
+    left: px(offset.left)
+  };
+}
 const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
   initialMarkdown = "",
   editable = true,
@@ -1448,6 +1490,9 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
   onAnchorClick,
   onSelectionChange,
   findReplace = true,
+  findBar = findReplace,
+  findBarContainer,
+  findBarOffset = DEFAULT_FIND_BAR_OFFSET,
   findShortcut = true,
   findLabels
 }, ref) {
@@ -1513,7 +1558,7 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
     editor == null ? void 0 : editor.commands.focus();
   }, [editor]);
   useEffect(() => {
-    if (!editor || !findReplace || !findShortcut) return;
+    if (!editor || !findReplace || !findBar || !findShortcut) return;
     const onKeyDown = (event) => {
       if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey) {
         return;
@@ -1535,7 +1580,7 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
     };
     document.addEventListener("keydown", onKeyDown, true);
     return () => document.removeEventListener("keydown", onKeyDown, true);
-  }, [editor, findReplace, findShortcut]);
+  }, [editor, findReplace, findBar, findShortcut]);
   const commentsSignatureRef = useRef("");
   useEffect(() => {
     if (!editor || !editable) return;
@@ -1648,17 +1693,27 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
     }),
     [editor, closeFind]
   );
+  const findBarTarget = typeof findBarContainer === "function" ? findBarContainer() : findBarContainer ?? null;
+  useEffect(() => {
+    if (!findBarTarget) return;
+    if (getComputedStyle(findBarTarget).position === "static") {
+      findBarTarget.style.position = "relative";
+    }
+  }, [findBarTarget]);
+  const findBarNode = editor && findBar && findOpen ? /* @__PURE__ */ jsx(
+    FindReplaceBar,
+    {
+      editor,
+      labels: findLabels,
+      onClose: closeFind,
+      inputRef: findInputRef,
+      className: styles$6.findBar,
+      style: findBarOffsetStyle(findBarOffset)
+    }
+  ) : null;
   return /* @__PURE__ */ jsxs("div", { className: styles$6.editorHost, children: [
-    editor && findReplace && findOpen ? /* @__PURE__ */ jsx("div", { className: styles$6.findBarAnchor, children: /* @__PURE__ */ jsx(
-      FindReplaceBar,
-      {
-        editor,
-        labels: findLabels,
-        onClose: closeFind,
-        inputRef: findInputRef,
-        className: styles$6.findBar
-      }
-    ) }) : null,
+    findBarNode && !findBarTarget ? /* @__PURE__ */ jsx("div", { className: styles$6.findBarAnchor, children: findBarNode }) : null,
+    findBarNode && findBarTarget ? createPortal(findBarNode, findBarTarget) : null,
     /* @__PURE__ */ jsx(
       EditorContent,
       {
@@ -3625,6 +3680,8 @@ export {
   MenuIcon,
   PENDING_ANCHOR_CLASS,
   RedoIcon,
+  ReplaceAllIcon,
+  ReplaceIcon,
   R2 as ReportContent,
   R as ReportContentInteractive,
   b as ReportContentWithCharts,