tiptap-markdown-react 0.12.1 → 0.14.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-DVdii3VR.js";
-import { C, a, R, b, f, m, r, s } from "./scrollToTocHeading-DVdii3VR.js";
+import { c as renderOrUpdateChart, d as destroyChart } from "./scrollToTocHeading-DKL19FQG.js";
+import { C, a, R, b, f, m, r, s } from "./scrollToTocHeading-DKL19FQG.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";
@@ -11,10 +11,10 @@ import { TableOfContents } from "@tiptap/extension-table-of-contents";
 import { NodeViewWrapper, ReactNodeViewRenderer, useEditorState, NodeViewContent, useEditor, EditorContent } from "@tiptap/react";
 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 { e as enrichMarkdownCitations, c as styles$6 } from "./ReportContent-DxldXfpO.js";
+import { R as R2, a as a2, b as b2, s as s2 } from "./ReportContent-DxldXfpO.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-C2zqDjSP.js";
+import { g, e, s as s3 } from "./extractToc-C2zqDjSP.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";
@@ -184,19 +184,19 @@ function commentAnchorPlugin(options = {}) {
         const decos = [];
         const bounds = blockBounds(state.doc);
         if (showGutter) {
-          for (const b2 of bounds) {
+          for (const b3 of bounds) {
             const idsInBlock = [];
             for (const [id, ranges] of byId) {
-              if (rangesIntersectBlock(ranges, b2.start, b2.end)) {
+              if (rangesIntersectBlock(ranges, b3.start, b3.end)) {
                 idsInBlock.push(id);
               }
             }
             if (idsInBlock.length > 0) {
               decos.push(
                 Decoration.widget(
-                  b2.start,
-                  (view) => gutterDom(idsInBlock, view, b2.start),
-                  { side: -1, key: `tmr-gutter:${b2.start}` }
+                  b3.start,
+                  (view) => gutterDom(idsInBlock, view, b3.start),
+                  { side: -1, key: `tmr-gutter:${b3.start}` }
                 )
               );
             }
@@ -210,10 +210,10 @@ function commentAnchorPlugin(options = {}) {
               Decoration.inline(r2.from, r2.to, { class: "tmr-comment-active" })
             );
           }
-          for (const b2 of bounds) {
-            if (rangesIntersectBlock(ranges, b2.start, b2.end)) {
+          for (const b3 of bounds) {
+            if (rangesIntersectBlock(ranges, b3.start, b3.end)) {
               decos.push(
-                Decoration.node(b2.start, b2.end, {
+                Decoration.node(b3.start, b3.end, {
                   class: "tmr-comment-block-active"
                 })
               );
@@ -525,6 +525,14 @@ const TableDeleteIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
   /* @__PURE__ */ jsx("path", { d: "M15 5v14" }),
   /* @__PURE__ */ jsx("path", { d: "m7 2 10 20" })
 ] });
+const CopyIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+] });
+const ChevronsUpDownIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("path", { d: "m7 15 5 5 5-5" }),
+  /* @__PURE__ */ jsx("path", { d: "m7 9 5-5 5 5" })
+] });
 const defaultChartLabels = {
   tabLabel: (chartType, index) => `${chartType} ${index + 1}`,
   done: "Done",
@@ -608,7 +616,10 @@ const defaultTocLabels = {
 };
 const defaultCodeBlockLabels = {
   autoDetect: "Auto-detect",
-  delete: "Delete code block"
+  delete: "Delete code block",
+  copy: "Copy code",
+  expand: "Expand code",
+  collapse: "Collapse code"
 };
 const defaultCommentLabels = {
   open: "Open",
@@ -1281,29 +1292,45 @@ function createChart(options = {}) {
     }
   });
 }
-const wrapper = "_wrapper_5i2vi_2";
-const header$1 = "_header_5i2vi_18";
-const langTrigger = "_langTrigger_5i2vi_28";
-const langChevron = "_langChevron_5i2vi_50";
-const langBadge = "_langBadge_5i2vi_56";
-const langMenu = "_langMenu_5i2vi_71";
-const langItem = "_langItem_5i2vi_84";
-const langItemSelected = "_langItemSelected_5i2vi_103";
-const langItemCheck = "_langItemCheck_5i2vi_108";
-const deleteBtn = "_deleteBtn_5i2vi_116";
-const pre = "_pre_5i2vi_136";
+const wrapper = "_wrapper_16490_2";
+const header$1 = "_header_16490_18";
+const langTrigger = "_langTrigger_16490_28";
+const langChevron = "_langChevron_16490_50";
+const readonlyHeader = "_readonlyHeader_16490_56";
+const langBadge = "_langBadge_16490_64";
+const langMenu = "_langMenu_16490_78";
+const langItem = "_langItem_16490_91";
+const langItemSelected = "_langItemSelected_16490_110";
+const langItemCheck = "_langItemCheck_16490_115";
+const deleteBtn = "_deleteBtn_16490_123";
+const pre = "_pre_16490_143";
+const readonly = "_readonly_16490_56";
+const expanded = "_expanded_16490_162";
+const gutter = "_gutter_16490_168";
+const gutterLine = "_gutterLine_16490_185";
+const readonlyActions = "_readonlyActions_16490_189";
+const actionBtn = "_actionBtn_16490_195";
+const langBraces = "_langBraces_16490_214";
 const styles$4 = {
   wrapper,
   header: header$1,
   langTrigger,
   langChevron,
+  readonlyHeader,
   langBadge,
   langMenu,
   langItem,
   langItemSelected,
   langItemCheck,
   deleteBtn,
-  pre
+  pre,
+  readonly,
+  expanded,
+  gutter,
+  gutterLine,
+  readonlyActions,
+  actionBtn,
+  langBraces
 };
 const LANGUAGES = [
   { value: "", label: "Auto-detect" },
@@ -1341,7 +1368,60 @@ function CodeBlockView({
   const current = LANGUAGES.find((l) => l.value === language);
   const currentLabel = current ? current.value === "" ? labels.autoDetect : current.label : labels.autoDetect;
   const editable = editor.isEditable;
-  return /* @__PURE__ */ jsxs(NodeViewWrapper, { className: styles$4.wrapper, children: [
+  const readonly2 = !editable;
+  const [copied, setCopied] = useState(false);
+  const [expanded2, setExpanded] = useState(false);
+  const [scrollable, setScrollable] = useState(false);
+  const [lineCount, setLineCount] = useState(
+    () => Math.max((node.textContent ?? "").split("\n").length, 1)
+  );
+  const preRef = useRef(null);
+  useEffect(() => {
+    if (!readonly2) return;
+    const pre2 = preRef.current;
+    if (!pre2) return;
+    const update = () => {
+      setLineCount(Math.max((pre2.textContent ?? "").split("\n").length, 1));
+      setScrollable(pre2.scrollHeight > pre2.clientHeight + 2);
+    };
+    update();
+    const mo = new MutationObserver(update);
+    mo.observe(pre2, { childList: true, subtree: true, characterData: true });
+    window.addEventListener("resize", update);
+    return () => {
+      mo.disconnect();
+      window.removeEventListener("resize", update);
+    };
+  }, [readonly2, expanded2]);
+  const handleCopy = () => {
+    var _a2;
+    const text = node.textContent ?? "";
+    const done = () => {
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1500);
+    };
+    if ((_a2 = navigator.clipboard) == null ? void 0 : _a2.writeText) {
+      navigator.clipboard.writeText(text).then(done, () => {
+      });
+      return;
+    }
+    const ta = document.createElement("textarea");
+    ta.value = text;
+    document.body.appendChild(ta);
+    ta.select();
+    try {
+      document.execCommand("copy");
+      done();
+    } catch {
+    }
+    ta.remove();
+  };
+  const wrapperClass = [
+    styles$4.wrapper,
+    readonly2 ? styles$4.readonly : "",
+    expanded2 ? styles$4.expanded : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(NodeViewWrapper, { className: wrapperClass, children: [
     editable ? /* @__PURE__ */ jsxs("div", { className: styles$4.header, contentEditable: false, children: [
       /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
         /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
@@ -1393,10 +1473,51 @@ function CodeBlockView({
         }
       )
     ] }) : (
-      // 只读：只展示语言标签，无下拉 / 删除等交互件
-      /* @__PURE__ */ jsx("div", { className: styles$4.langBadge, contentEditable: false, children: currentLabel })
+      // 只读头部：左侧语言标签，右侧复制 + 展开收起（内容不超限高时隐藏展开钮）
+      /* @__PURE__ */ jsxs("div", { className: styles$4.readonlyHeader, contentEditable: false, children: [
+        /* @__PURE__ */ jsxs("span", { className: styles$4.langBadge, children: [
+          /* @__PURE__ */ jsx("span", { className: styles$4.langBraces, children: "{}" }),
+          currentLabel
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: styles$4.readonlyActions, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: styles$4.actionBtn,
+              onClick: handleCopy,
+              "aria-label": labels.copy,
+              title: labels.copy,
+              children: copied ? /* @__PURE__ */ jsx(CheckIcon, { size: 14 }) : /* @__PURE__ */ jsx(CopyIcon, { size: 14 })
+            }
+          ),
+          scrollable ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: styles$4.actionBtn,
+              onClick: () => setExpanded((v) => !v),
+              "aria-label": expanded2 ? labels.collapse : labels.expand,
+              title: expanded2 ? labels.collapse : labels.expand,
+              "aria-expanded": expanded2,
+              children: /* @__PURE__ */ jsx(ChevronsUpDownIcon, { size: 14 })
+            }
+          ) : null
+        ] })
+      ] })
     ),
-    /* @__PURE__ */ jsx("pre", { className: styles$4.pre, children: /* @__PURE__ */ jsx(NodeViewContent, { as: "code" }) })
+    /* @__PURE__ */ jsxs("pre", { ref: preRef, className: styles$4.pre, children: [
+      readonly2 ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: styles$4.gutter,
+          contentEditable: false,
+          "aria-hidden": "true",
+          children: Array.from({ length: lineCount }, (_, i) => /* @__PURE__ */ jsx("span", { className: styles$4.gutterLine, children: i + 1 }, i))
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(NodeViewContent, { as: "code" })
+    ] })
   ] });
 }
 const CodeBlock = CodeBlockLowlight.extend({
@@ -1654,14 +1775,14 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
         (_a = onCommentClickRef.current) == null ? void 0 : _a.call(onCommentClickRef, click);
         (_b = onActiveCommentChangeRef.current) == null ? void 0 : _b.call(onActiveCommentChangeRef, click.commentIds[0] ?? null);
       }
-      const gutter = transaction.getMeta(COMMENT_GUTTER_META);
-      if (gutter) {
+      const gutter2 = transaction.getMeta(COMMENT_GUTTER_META);
+      if (gutter2) {
         (_c = onCommentClickRef.current) == null ? void 0 : _c.call(onCommentClickRef, {
-          commentIds: gutter.commentIds,
+          commentIds: gutter2.commentIds,
           anchorEl: null,
-          pos: gutter.pos
+          pos: gutter2.pos
         });
-        (_d = onActiveCommentChangeRef.current) == null ? void 0 : _d.call(onActiveCommentChangeRef, gutter.commentIds[0] ?? null);
+        (_d = onActiveCommentChangeRef.current) == null ? void 0 : _d.call(onActiveCommentChangeRef, gutter2.commentIds[0] ?? null);
       }
     };
     editor.on("transaction", onTransaction);
@@ -1735,10 +1856,18 @@ function MarkdownPreview({
     ),
     [markdown, sources]
   );
+  const previewCodeBlock = useMemo(
+    () => pureCodeBlock.extend({
+      addNodeView() {
+        return ReactNodeViewRenderer(CodeBlockView);
+      }
+    }),
+    []
+  );
   const extensions = useMemo(
     () => [
       ...baseExtensions,
-      pureCodeBlock,
+      previewCodeBlock,
       pureImage,
       createChart({ editable: false }),
       createCitationRef({ renderCitation }),
@@ -3566,7 +3695,7 @@ function getMarkdownForRange(editor, from, to, options = {}) {
   let first = 0;
   let last = blocks.length - 1;
   if (expand) {
-    first = blocks.findIndex((b2) => b2.to > start);
+    first = blocks.findIndex((b3) => b3.to > start);
     if (first < 0) return null;
     for (let i = blocks.length - 1; i >= first; i -= 1) {
       if (blocks[i].from < end) {
@@ -3577,7 +3706,7 @@ function getMarkdownForRange(editor, from, to, options = {}) {
     start = blocks[first].from;
     end = blocks[last].to;
   }
-  const parts = blocks.map((b2) => manager.serialize({ type: "doc", content: [b2.json] }));
+  const parts = blocks.map((b3) => manager.serialize({ type: "doc", content: [b3.json] }));
   const full = editor.getMarkdown();
   if (expand && parts.join(BLOCK_SEPARATOR) === full) {
     const markdown2 = parts.slice(first, last + 1).join(BLOCK_SEPARATOR);
@@ -3650,6 +3779,7 @@ export {
   CheckIcon,
   ChevronDownIcon,
   ChevronUpIcon,
+  ChevronsUpDownIcon,
   a as CitationInteractive,
   CitationRef,
   CodeBlockView,
@@ -3660,6 +3790,7 @@ export {
   ColumnDeleteIcon,
   CommentMark,
   CommentPopover,
+  CopyIcon,
   EditorToolbar,
   FIND_DEBOUNCE_MS,
   default2 as FindAndReplace,
@@ -3715,6 +3846,7 @@ export {
   defaultTocLabels,
   defaultToolbarLabels,
   enrichMarkdownCitations,
+  b2 as extractFootnoteSources,
   e as extractToc,
   f as findCitationRefElement,
   findRangeByAnchor,