tiptap-markdown-react 0.9.6 → 0.10.0

package/dist/anchorRange.d.ts

@@ -0,0 +1,24 @@
+import { Editor } from '@tiptap/react';
+import { CommentAnchorStatus, CommentSegment } from './commentAnchor/commentMapper';
+/**
+ * 内容锚点 → 当前文档里的区间。
+ *
+ * 用途：宿主在提交一次「圈选改写」时记下选区的内容锚点（`prefix` / `exact` / `suffix`，
+ * `blockHash` 可选），等 AI 改完、推送回来时再用它把那段区间找回来——**不能用位置**，
+ * 因为编辑器在这期间可能整体重建过（保存、切卡、SWR 刷新都会重挂），位置活不过重建。
+ *
+ * 锚点类型直接复用评论锚定那套（`commentMapper`），匹配走同一条 fallback 链：
+ * `blockHash` → 前后文 → `exact` → 前缀降级（前 20 字）。**这条链是会降级的**，所以：
+ *
+ * > 调用方必须自己比对返回的 `text` 是否仍等于提交时那一段。本函数只回答「在哪」，
+ * > 不回答「还算不算同一段」——后者决定了是原地回填还是弹冲突。
+ */
+export interface AnchorRange {
+    /** doc 坐标 */
+    from: number;
+    to: number;
+    /** 区间当前对应的纯文本（块间用 `\n\n` 连接，与选区文本同一口径）。 */
+    text: string;
+    status: CommentAnchorStatus;
+}
+export declare function findRangeByAnchor(editor: Editor, anchor: CommentSegment | null | undefined): AnchorRange | null;

package/dist/anchorRange.test.d.ts

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

package/dist/components/MarkdownWysiwygEditor.d.ts

@@ -3,6 +3,8 @@ import { SourceRef } from '../citationUtils';
 import { RenderCitation } from '../citationTypes';
 import { CommentClickPayload, CommentRef } from '../commentAnchor/commentTypes';
 import { CodeBlockLabels } from '../labels';
+import { PendingAnchor } from '../pendingAnchor';
+import { SelectionKind } from '../selectionKind';
 import { TocItem } from '../toc/extractToc';
 export interface MarkdownWysiwygEditorHandle {
     /** 取当前正文的 markdown 字符串。 */
@@ -58,6 +60,23 @@ export interface MarkdownWysiwygEditorProps {
     extraExtensions?: AnyExtension[];
     /** 代码块 NodeView 的本地化文案。 */
     codeBlockLabels?: Partial<CodeBlockLabels>;
+    /**
+     * 「这段正在被 AI 改写」的高亮：宿主在提交请求时给上、回填或冲突时传空数组清空。
+     * 走 decoration，**不进 markdown、不进 undo 历史**，能盖住表格与图表这类块级节点。
+     */
+    pendingAnchors?: PendingAnchor[];
+    /** 点击待改写高亮区域时回调，给出锚点 id（宿主可用来跳回/取消）。 */
+    onAnchorClick?: (id: string) => void;
+    /**
+     * 选区变化。宿主用它做「选中即出现引用」——塌缩成光标也会报（`empty: true`），
+     * 好让引用跟着消失；`kind` 区分普通文字 / 表格单元格 / 整节点（图表）。
+     */
+    onSelectionChange?: (selection: {
+        from: number;
+        to: number;
+        empty: boolean;
+        kind: SelectionKind;
+    }) => void;
     /** 附加到滚动容器的 class。 */
     className?: string;
     /**

package/dist/index.d.ts

@@ -36,5 +36,11 @@ export type { CommentRef, CommentClickPayload, RenderComment, RenderCommentConte
 export { useIsMobile } from './hooks/useIsMobile';
 export * from './icons';
 export { insertMarkdown } from './insertMarkdown';
+export { findRangeByAnchor, type AnchorRange } from './anchorRange';
+export { getMarkdownForRange, type GetMarkdownForRangeOptions, type MarkdownRange, } from './markdownRange';
+export { normalizeMarkdown } from './normalizeMarkdown';
+export { PENDING_ANCHOR_CLASS, type PendingAnchor, } from './pendingAnchor';
+export { replaceRangeWithMarkdown, type ReplaceRangeOptions } from './replaceRange';
+export { selectionKind, type SelectionKind } from './selectionKind';
 export type { Editor } from '@tiptap/react';
 export type { JSONContent } from '@tiptap/core';

package/dist/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { Markdown } from "@tiptap/markdown";
+import { Markdown, MarkdownManager } from "@tiptap/markdown";
 import { c as renderOrUpdateChart, d as destroyChart } from "./scrollToTocHeading-BnfiGfjk.js";
 import { C, a, R, b, f, m, r, s } from "./scrollToTocHeading-BnfiGfjk.js";
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
@@ -10,17 +10,18 @@ import { NodeViewWrapper, ReactNodeViewRenderer, NodeViewContent, useEditor, Edi
 import { useRef, useState, useMemo, useEffect, forwardRef, useImperativeHandle, useId, useCallback, useContext, createContext } from "react";
 import { e as enrichMarkdownCitations, b as styles$5 } from "./ReportContent-XJE1P0zp.js";
 import { R as R2, a as a2, s as s2 } from "./ReportContent-XJE1P0zp.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 } from "./extractToc-BrN-Lwwy.js";
-import { g, e, d, s as s3 } from "./extractToc-BrN-Lwwy.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-BrN-Lwwy.js";
+import { g, e, s as s3 } from "./extractToc-BrN-Lwwy.js";
 import { Slice, Fragment } from "@tiptap/pm/model";
 import { Extension, Node as Node$1 } from "@tiptap/core";
-import { PluginKey, Plugin } from "@tiptap/pm/state";
+import { PluginKey, Plugin, NodeSelection, TextSelection } from "@tiptap/pm/state";
 import { DecorationSet, Decoration } from "@tiptap/pm/view";
 import { FileHandlePlugin } from "@tiptap/extension-file-handler";
+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";
-import { isInTable, selectedRect, rowIsHeader, CellSelection } from "@tiptap/pm/tables";
 function CitationRefView({ node, extension }) {
   const index = String(node.attrs.index ?? "");
   const url = node.attrs.url || null;
@@ -452,6 +453,78 @@ const MarkdownFileDrop = Extension.create({
     ];
   }
 });
+const PENDING_ANCHOR_META = "tmr:pendingAnchor";
+const pendingAnchorPluginKey = new PluginKey(
+  "tmrPendingAnchor"
+);
+const PENDING_ANCHOR_CLASS = "tmr-pending-anchor";
+const pendingAnchorExtension = Extension.create({
+  name: "pendingAnchor",
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: pendingAnchorPluginKey,
+        state: {
+          init: () => ({ decorations: DecorationSet.empty }),
+          apply(tr, value) {
+            const next = tr.getMeta(PENDING_ANCHOR_META);
+            if (next) return { decorations: buildDecorations(tr.doc, next) };
+            if (tr.docChanged) {
+              return { decorations: value.decorations.map(tr.mapping, tr.doc) };
+            }
+            return value;
+          }
+        },
+        props: {
+          decorations(state) {
+            var _a;
+            return ((_a = pendingAnchorPluginKey.getState(state)) == null ? void 0 : _a.decorations) ?? null;
+          }
+        }
+      })
+    ];
+  }
+});
+function setPendingAnchors(editor, anchors) {
+  editor.view.dispatch(
+    editor.state.tr.setMeta(PENDING_ANCHOR_META, anchors).setMeta(skipTrailingNodeMeta, true).setMeta("addToHistory", false)
+  );
+}
+function buildDecorations(doc, anchors) {
+  const bounds = [];
+  doc.forEach((child, offset) => {
+    bounds.push({ from: offset, to: offset + child.nodeSize });
+  });
+  const decorations = [];
+  for (const anchor of anchors) {
+    for (const range of anchor.ranges) {
+      const from = Math.max(0, Math.min(range.from, range.to));
+      const to = Math.min(doc.content.size, Math.max(range.from, range.to));
+      if (from >= to) continue;
+      for (const bound of bounds) {
+        if (bound.to <= from || bound.from >= to) continue;
+        const attrs = {
+          class: PENDING_ANCHOR_CLASS,
+          "data-pending-id": anchor.id
+        };
+        if (from <= bound.from && to >= bound.to) {
+          decorations.push(Decoration.node(bound.from, bound.to, attrs));
+        } else {
+          decorations.push(
+            Decoration.inline(Math.max(from, bound.from), Math.min(to, bound.to), attrs)
+          );
+        }
+      }
+    }
+  }
+  return decorations.length ? DecorationSet.create(doc, decorations) : DecorationSet.empty;
+}
+function selectionKind(selection) {
+  if (selection instanceof CellSelection) return "cell";
+  if (selection instanceof NodeSelection) return "node";
+  if (selection instanceof TextSelection) return "text";
+  return "text";
+}
 function looksLikeMarkdown(text) {
   return /^#{1,6}\s/m.test(text) || // 标题
   /\*\*[^*\n]+\*\*/.test(text) || // 加粗
@@ -1055,7 +1128,10 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
   onCommentClick,
   onActiveCommentChange,
   showCommentGutter = true,
-  commentInteractive = true
+  commentInteractive = true,
+  pendingAnchors,
+  onAnchorClick,
+  onSelectionChange
 }, ref) {
   const preparedInitial = prepareChartMarkdown(
     enrichMarkdownCitations(initialMarkdown, sources ?? [])
@@ -1074,6 +1150,7 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
         interactive: commentInteractive
       }),
       Markdown,
+      pendingAnchorExtension,
       TableOfContents.configure({
         getId: makeTocGetId(),
         onUpdate: (anchors) => {
@@ -1122,6 +1199,47 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
       )
     );
   }, [editor, activeCommentId]);
+  useEffect(() => {
+    if (!editor) return;
+    setPendingAnchors(editor, pendingAnchors ?? []);
+  }, [editor, pendingAnchors]);
+  const onAnchorClickRef = useRef(onAnchorClick);
+  useEffect(() => {
+    onAnchorClickRef.current = onAnchorClick;
+  }, [onAnchorClick]);
+  useEffect(() => {
+    if (!editor) return;
+    const dom = editor.view.dom;
+    const onClick = (event) => {
+      var _a, _b, _c;
+      const target = event.target;
+      const id = (_b = (_a = target == null ? void 0 : target.closest) == null ? void 0 : _a.call(target, "[data-pending-id]")) == null ? void 0 : _b.getAttribute("data-pending-id");
+      if (id) (_c = onAnchorClickRef.current) == null ? void 0 : _c.call(onAnchorClickRef, id);
+    };
+    dom.addEventListener("click", onClick);
+    return () => dom.removeEventListener("click", onClick);
+  }, [editor]);
+  const onSelectionChangeRef = useRef(onSelectionChange);
+  useEffect(() => {
+    onSelectionChangeRef.current = onSelectionChange;
+  }, [onSelectionChange]);
+  useEffect(() => {
+    if (!editor) return;
+    const onSelectionUpdate = () => {
+      var _a;
+      const { from, to, empty } = editor.state.selection;
+      (_a = onSelectionChangeRef.current) == null ? void 0 : _a.call(onSelectionChangeRef, {
+        from,
+        to,
+        empty,
+        kind: selectionKind(editor.state.selection)
+      });
+    };
+    editor.on("selectionUpdate", onSelectionUpdate);
+    return () => {
+      editor.off("selectionUpdate", onSelectionUpdate);
+    };
+  }, [editor]);
   const onCommentClickRef = useRef(onCommentClick);
   const onActiveCommentChangeRef = useRef(onActiveCommentChange);
   onCommentClickRef.current = onCommentClick;
@@ -2067,8 +2185,8 @@ function EditorToolbar({
       if (!coords) return;
       const $pos = editor.state.doc.resolve(coords.pos);
       let inTable = false;
-      for (let d2 = $pos.depth; d2 > 0; d2--) {
-        if ($pos.node(d2).type.name === "table") {
+      for (let d = $pos.depth; d > 0; d--) {
+        if ($pos.node(d).type.name === "table") {
           inTable = true;
           break;
         }
@@ -2984,6 +3102,121 @@ function CommentPopover({
     ) })
   ] });
 }
+const PROBE_ID = "__anchor-range-probe__";
+function findRangeByAnchor(editor, anchor) {
+  if (!anchor || !anchor.exact) return null;
+  const [result] = mapCommentAnchors(editor.state.doc, [
+    { commentId: PROBE_ID, segments: [anchor] }
+  ]);
+  const range = result == null ? void 0 : result.ranges[0];
+  if (!range) return null;
+  return {
+    from: range.from,
+    to: range.to,
+    text: editor.state.doc.textBetween(range.from, range.to, "\n\n"),
+    status: result.status
+  };
+}
+const BLOCK_SEPARATOR = "\n\n";
+function topLevelBlocks(editor) {
+  const blocks = [];
+  editor.state.doc.forEach((node, offset) => {
+    blocks.push({
+      json: node.toJSON(),
+      from: offset,
+      to: offset + node.nodeSize
+    });
+  });
+  return blocks;
+}
+function getMarkdownForRange(editor, from, to, options = {}) {
+  const manager = editor.markdown;
+  if (!manager) return null;
+  const size = editor.state.doc.content.size;
+  let start = Math.max(0, Math.min(from, to));
+  let end = Math.min(size, Math.max(from, to));
+  if (start >= end) return null;
+  const blocks = topLevelBlocks(editor);
+  if (blocks.length === 0) return null;
+  const expand = options.expandToBlocks !== false;
+  let first = 0;
+  let last = blocks.length - 1;
+  if (expand) {
+    first = blocks.findIndex((b2) => b2.to > start);
+    if (first < 0) return null;
+    for (let i = blocks.length - 1; i >= first; i -= 1) {
+      if (blocks[i].from < end) {
+        last = i;
+        break;
+      }
+    }
+    start = blocks[first].from;
+    end = blocks[last].to;
+  }
+  const parts = blocks.map((b2) => manager.serialize({ type: "doc", content: [b2.json] }));
+  const full = editor.getMarkdown();
+  if (expand && parts.join(BLOCK_SEPARATOR) === full) {
+    const markdown2 = parts.slice(first, last + 1).join(BLOCK_SEPARATOR);
+    if (!markdown2) return null;
+    const at2 = first === 0 ? 0 : parts.slice(0, first).join(BLOCK_SEPARATOR).length + BLOCK_SEPARATOR.length;
+    return { markdown: markdown2, from: at2, to: at2 + markdown2.length };
+  }
+  const markdown = manager.serialize(
+    editor.state.doc.cut(start, end).toJSON()
+  );
+  if (!markdown) return null;
+  const at = full.indexOf(markdown);
+  if (at < 0 || full.indexOf(markdown, at + 1) >= 0) return null;
+  return { markdown, from: at, to: at + markdown.length };
+}
+function normalizeMarkdown(markdown) {
+  if (!markdown) return markdown;
+  const manager = getManager();
+  return manager.serialize(manager.parse(prepareChartMarkdown(markdown)));
+}
+let sharedManager = null;
+function getManager() {
+  sharedManager ?? (sharedManager = new MarkdownManager({
+    extensions: [...baseExtensions, pureCodeBlock, pureImage, pureChart, CitationRef]
+  }));
+  return sharedManager;
+}
+function replaceRangeWithMarkdown(editor, range, markdown, options = {}) {
+  const prepared = prepareChartMarkdown(
+    enrichMarkdownCitations(markdown ?? "", options.sources ?? [])
+  );
+  if (!prepared.trim()) return false;
+  let from = Math.max(0, Math.min(range.from, range.to));
+  let to = Math.max(range.from, range.to);
+  if (from === to) return false;
+  if (tryInsertMarkdownAt(editor, from, to, prepared)) return true;
+  for (const block of splitTopLevelBlocks(prepared)) {
+    const before = editor.state.doc.content.size;
+    const changed = tryInsertMarkdownAt(editor, from, to, block) || insertPlainParagraphAt(editor, from, to, stripToPlainText(block));
+    if (!changed) continue;
+    const inserted = editor.state.doc.content.size - before + (to - from);
+    from += inserted;
+    to = from;
+  }
+  return true;
+}
+function tryInsertMarkdownAt(editor, from, to, markdown) {
+  try {
+    return editor.chain().insertContentAt({ from, to }, markdown, { contentType: "markdown" }).run();
+  } catch {
+    return false;
+  }
+}
+function insertPlainParagraphAt(editor, from, to, text) {
+  try {
+    return editor.chain().insertContentAt(
+      { from, to },
+      { type: "paragraph", content: text ? [{ type: "text", text }] : [] }
+    ).run();
+  } catch {
+    return false;
+  }
+}
 export {
   BoldIcon,
   COMMENT_ACTIVE_META,
@@ -3017,6 +3250,7 @@ export {
   MarkdownPreview,
   MarkdownWysiwygEditor,
   MenuIcon,
+  PENDING_ANCHOR_CLASS,
   RedoIcon,
   R2 as ReportContent,
   R as ReportContentInteractive,
@@ -3050,7 +3284,9 @@ export {
   enrichMarkdownCitations,
   e as extractToc,
   f as findCitationRefElement,
+  findRangeByAnchor,
   focusComment,
+  getMarkdownForRange,
   insertMarkdown,
   looksLikeMarkdown,
   lowlight,
@@ -3059,13 +3295,16 @@ export {
   mergeCommentIntervals,
   m as mountChartsInContainer,
   nextComment,
+  normalizeMarkdown,
   prepareChartMarkdown,
-  d as pureChart,
+  pureChart,
   pureCodeBlock,
   pureImage,
   r as readCitationAttrs,
+  replaceRangeWithMarkdown,
   reportChart,
   s as scrollToTocHeading,
+  selectionKind,
   s2 as serializeChartPayload,
   s3 as stabilizeMarkdown,
   stripCommentAnchorMarks,