tiptap-markdown-react 0.11.0 → 0.12.0

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;
@@ -614,19 +614,20 @@ 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_1lvby_3";
+const row = "_row_1lvby_25";
+const field = "_field_1lvby_40";
+const fieldIcon = "_fieldIcon_1lvby_59";
+const input = "_input_1lvby_64";
+const counter = "_counter_1lvby_75";
+const counterInvalid = "_counterInvalid_1lvby_84";
+const btn$1 = "_btn_1lvby_88";
+const toggle = "_toggle_1lvby_116";
+const toggleOn = "_toggleOn_1lvby_128";
+const closeBtn = "_closeBtn_1lvby_136";
+const textBtn = "_textBtn_1lvby_140";
+const spacer = "_spacer_1lvby_145";
+const readOnly = "_readOnly_1lvby_150";
 const styles$5 = {
   bar,
   row,
@@ -638,6 +639,7 @@ const styles$5 = {
   btn: btn$1,
   toggle,
   toggleOn,
+  closeBtn,
   textBtn,
   spacer,
   readOnly
@@ -647,11 +649,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 +676,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 +700,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 +743,19 @@ 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);
     });
   };
+  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) => {
@@ -763,6 +783,46 @@ function FindReplaceBar({
               }
             )
           ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: toggleClass(state.caseSensitive),
+              title: t.caseSensitive,
+              "aria-label": t.caseSensitive,
+              "aria-pressed": state.caseSensitive,
+              onMouseDown: keepFocus,
+              onClick: () => toggle2("caseSensitive", !state.caseSensitive),
+              children: "Aa"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: toggleClass(state.wholeWord),
+              title: t.wholeWord,
+              "aria-label": t.wholeWord,
+              "aria-pressed": state.wholeWord,
+              onMouseDown: keepFocus,
+              onClick: () => toggle2("wholeWord", !state.wholeWord),
+              children: "ab"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              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: ".*"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: styles$5.spacer }),
           /* @__PURE__ */ jsx(
             "span",
             {
@@ -802,7 +862,7 @@ function FindReplaceBar({
             "button",
             {
               type: "button",
-              className: styles$5.btn,
+              className: `${styles$5.btn} ${styles$5.closeBtn}`,
               title: t.close,
               "aria-label": t.close,
               onClick: onClose,
@@ -823,45 +883,6 @@ function FindReplaceBar({
               spellCheck: false
             }
           ) }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: toggleClass(state.caseSensitive),
-              title: t.caseSensitive,
-              "aria-label": t.caseSensitive,
-              "aria-pressed": state.caseSensitive,
-              onMouseDown: keepFocus,
-              onClick: () => toggle2("caseSensitive", !state.caseSensitive),
-              children: "Aa"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: toggleClass(state.wholeWord),
-              title: t.wholeWord,
-              "aria-label": t.wholeWord,
-              "aria-pressed": state.wholeWord,
-              onMouseDown: keepFocus,
-              onClick: () => toggle2("wholeWord", !state.wholeWord),
-              children: "ab"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              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: ".*"
-            }
-          ),
           /* @__PURE__ */ jsx("span", { className: styles$5.spacer }),
           /* @__PURE__ */ jsx(
             "button",
@@ -1425,6 +1446,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 +1480,9 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
   onAnchorClick,
   onSelectionChange,
   findReplace = true,
+  findBar = findReplace,
+  findBarContainer,
+  findBarOffset = DEFAULT_FIND_BAR_OFFSET,
   findShortcut = true,
   findLabels
 }, ref) {
@@ -1513,7 +1548,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 +1570,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 +1683,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,
       {