tiptap-markdown-react 0.13.0 → 0.14.1

package/README.md

@@ -258,6 +258,7 @@ Override any of these CSS variables on an ancestor (e.g. `:root` or the editor c
 | `--tmr-line-height` | `1.7` | Content line height |
 | `--tmr-min-height` | `420px` | Editor min height |
 | `--tmr-code-bg` | `#f4f4f4` | Inline code background |
+| `--tmr-code-max-height` | `480px` | Readonly code block max height (long blocks scroll internally; the header toggle expands to full height; `none` disables the cap). Editable code blocks are never capped |
 | `--tmr-table-header-bg` | `#f7f7f7` | Table header background |
 | `--tmr-comment-ring` | `rgba(219, 171, 10, 0.55)` | Active mark / block outline ring |
 | `--tmr-comment-gutter-bg` | `#f4b400` | Gutter bubble background |

package/dist/components/CodeBlockView.d.ts

@@ -2,5 +2,10 @@ import { NodeViewProps } from '@tiptap/react';
 /**
  * 代码块自定义 NodeView：右上角语言选择器（Radix DropdownMenu，支持方向键导航）+ 删除。
  * 文案（Auto-detect / 删除标题）从扩展 options.codeBlockLabels 读取，缺省用英文默认。
+ *
+ * 只读态（预览 / 只读编辑器）走另一套头部：左侧语言标签，右侧复制 + 展开收起；
+ * 超出 `--tmr-code-max-height`（缺省 480px）的代码块默认限高块内滚动，行号槽
+ * 用 MutationObserver 跟踪 PM 管理的 code 内容保持同步（纯文本变化不触发 React
+ * 重渲染，gutter 行数靠观察器自刷新）。
  */
 export declare function CodeBlockView({ node, updateAttributes, deleteNode, extension, editor, }: NodeViewProps): import("react").JSX.Element;

package/dist/components/codeBlockReadonly.dom.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/icons/index.d.ts

@@ -40,3 +40,5 @@ export declare const RowBeforeIcon: (p: IconProps) => import("react").JSX.Elemen
 export declare const RowAfterIcon: (p: IconProps) => import("react").JSX.Element;
 export declare const RowDeleteIcon: (p: IconProps) => import("react").JSX.Element;
 export declare const TableDeleteIcon: (p: IconProps) => import("react").JSX.Element;
+export declare const CopyIcon: (p: IconProps) => import("react").JSX.Element;
+export declare const ChevronsUpDownIcon: (p: IconProps) => import("react").JSX.Element;

package/dist/index.js

@@ -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 || expanded2 ? /* @__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 }),
@@ -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,