tiptap-markdown-react 1.4.0 → 1.5.0

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { Markdown, MarkdownManager } from "@tiptap/markdown";
-import { g as getLocaleBundle, S as SearchIcon, d as ChevronUpIcon, e as ChevronDownIcon, X as XIcon, h as ReplaceIcon, i as ReplaceAllIcon, j as renderOrUpdateChart, k as destroyChart, l as CheckIcon, T as TrashIcon, n as CopyIcon, o as ChevronsUpDownIcon, G as GripIcon, E as EraserIcon, D as DownloadIcon, u as useIsMobile, K as KeyboardIcon, p as EditorToc, I as ImagePreviewHost, q as sameTocItems$1, A as AlignRightIcon, t as AlignCenterIcon, v as AlignLeftIcon, w as CropIcon, x as CaptionsIcon, y as ExpandIcon, z as requestImagePreview, B as RotateCcwIcon, F as ExternalLinkIcon, H as TableDeleteIcon, J as ColumnBeforeIcon, L as ColumnAfterIcon, M as ColumnDeleteIcon, N as RowBeforeIcon, O as RowAfterIcon, P as RowDeleteIcon, U as UndoIcon, Q as RedoIcon, V as BoldIcon, W as ItalicIcon, Y as UnderlineIcon, Z as StrikethroughIcon, _ as CodeIcon, $ as LinkIcon, a0 as ImageIcon, a1 as DetailsIcon, a2 as AlignJustifyIcon, a3 as IndentIncreaseIcon, a4 as IndentDecreaseIcon, a5 as LineHeightIcon, a6 as ListUnorderedIcon, a7 as ListOrderedIcon, a8 as ListChecksIcon } from "./ReportContentWithCharts-3cn7_5Tz.js";
-import { C, a9, aa, a, ab, ac, ad, ae, b, c, af, ag, ah, f, m, r, s } from "./ReportContentWithCharts-3cn7_5Tz.js";
+import { g as getLocaleBundle, S as SearchIcon, d as ChevronUpIcon, e as ChevronDownIcon, X as XIcon, h as ReplaceIcon, i as ReplaceAllIcon, j as renderOrUpdateChart, k as destroyChart, l as CheckIcon, T as TrashIcon, n as CopyIcon, o as ChevronsUpDownIcon, G as GripIcon, E as EraserIcon, D as DownloadIcon, u as useIsMobile, K as KeyboardIcon, p as EditorToc, I as ImagePreviewHost, q as sameTocItems$1, A as AlignRightIcon, t as AlignCenterIcon, v as AlignLeftIcon, w as CropIcon, x as CaptionsIcon, y as ExpandIcon, z as requestImagePreview, B as RotateCcwIcon, F as ExternalLinkIcon, H as TableDeleteIcon, J as ColumnBeforeIcon, L as ColumnAfterIcon, M as ColumnDeleteIcon, N as RowBeforeIcon, O as RowAfterIcon, P as RowDeleteIcon, U as UndoIcon, Q as RedoIcon, V as PaintbrushIcon, W as BoldIcon, Y as ItalicIcon, Z as UnderlineIcon, _ as StrikethroughIcon, $ as CodeIcon, a0 as LinkIcon, a1 as ImageIcon, a2 as DetailsIcon, a3 as AlignJustifyIcon, a4 as IndentIncreaseIcon, a5 as IndentDecreaseIcon, a6 as LineHeightIcon, a7 as ListUnorderedIcon, a8 as ListOrderedIcon, a9 as ListChecksIcon } from "./ReportContentWithCharts-CMMUE51M.js";
+import { C, aa, ab, a, ac, ad, ae, af, b, c, ag, ah, ai, f, m, r, s } from "./ReportContentWithCharts-CMMUE51M.js";
 import { jsx, jsxs, Fragment as Fragment$2 } from "react/jsx-runtime";
 import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
 import FindAndReplace, { FindAndReplacePluginKey, createSearchRegex } from "@tiptap/extension-find-and-replace";
@@ -14,10 +14,10 @@ import { NodeViewWrapper, ReactNodeViewRenderer, useEditorState, ReactRenderer,
 import { Extension, Node as Node$1, mergeAttributes } from "@tiptap/core";
 import { createPortal } from "react-dom";
 import { useState, useEffect, useCallback, useRef, useMemo, useSyncExternalStore, useLayoutEffect, forwardRef, useId, useImperativeHandle, Fragment as Fragment$1, useContext, createContext } from "react";
-import { q as normalizeImageAlign, l as normalizeImageCrop, m as cropImageBox, e as enrichMarkdownCitations, o as styles$e, i as imageMarkdownTokenizer, c as imageParseMarkdown, d as imageRenderMarkdown, f as imageNodeHtml, g as imageFigureParseRule, h as imageCropAttribute, j as imageCaptionAttribute, k as imageAlignAttribute, r as normalizeImageCaption } from "./ReportContent-B0HdrWAi.js";
-import { R, a as a2, b as b2, s as s2 } from "./ReportContent-B0HdrWAi.js";
-import { C as CitationRef, i as mergeCommentIntervals, h as mapCommentAnchors, p as prepareChartMarkdown, j as reportChart, f as CommentMark, b as baseExtensions, l as lowlight, m as makeTocGetId, k as parseCodeTokenAsChartOrCodeBlock, a as pureCodeBlock, c as pureImage, n as renderMathInto, o as readCurrentNumberingFormat, q as subscribeMathClick, t as applyNumberingFormat, N as NUMBERING_FORMAT_IDS, u as NUMBERING_FORMAT_LABELS, v as NUMBERING_FORMAT_PREVIEWS, d as pureChart } from "./extractToc-Bz924Nh4.js";
-import { P, g, e, s as s3 } from "./extractToc-Bz924Nh4.js";
+import { q as normalizeImageAlign, l as normalizeImageCrop, m as cropImageBox, e as enrichMarkdownCitations, o as styles$e, i as imageMarkdownTokenizer, c as imageParseMarkdown, d as imageRenderMarkdown, f as imageNodeHtml, g as imageFigureParseRule, h as imageCropAttribute, j as imageCaptionAttribute, k as imageAlignAttribute, r as normalizeImageCaption } from "./ReportContent-DUvhic0o.js";
+import { R, a as a2, b as b2, s as s2 } from "./ReportContent-DUvhic0o.js";
+import { C as CitationRef, i as mergeCommentIntervals, h as mapCommentAnchors, p as prepareChartMarkdown, j as reportChart, f as CommentMark, b as baseExtensions, l as lowlight, m as makeTocGetId, k as parseCodeTokenAsChartOrCodeBlock, a as pureCodeBlock, c as pureImage, n as renderMathInto, o as readCurrentNumberingFormat, q as subscribeMathClick, t as applyNumberingFormat, N as NUMBERING_FORMAT_IDS, u as NUMBERING_FORMAT_LABELS, v as NUMBERING_FORMAT_PREVIEWS, d as pureChart } from "./extractToc-B-hg0XuH.js";
+import { P, g, e, s as s3 } from "./extractToc-B-hg0XuH.js";
 import { Slice, Fragment } from "@tiptap/pm/model";
 import { PluginKey, Plugin, Selection, TextSelection, NodeSelection } from "@tiptap/pm/state";
 import { DecorationSet, Decoration } from "@tiptap/pm/view";
@@ -4404,6 +4404,263 @@ const styles$6 = {
   mathDone,
   mathDoneKbd
 };
+const FORMAT_MARKS = /* @__PURE__ */ new Set([
+  "bold",
+  "italic",
+  "underline",
+  "strike",
+  "code",
+  "highlight",
+  "textStyle",
+  "superscript",
+  "subscript"
+]);
+const PLAIN_BLOCK = {
+  type: "paragraph",
+  level: null,
+  textAlign: null,
+  indent: null,
+  lineHeight: null
+};
+function isFormatMark(name) {
+  return FORMAT_MARKS.has(name);
+}
+function isStyleBlock(node) {
+  return node.type.name === "paragraph" || node.type.name === "heading";
+}
+function readBlock(node) {
+  const indent = Number(node.attrs.indent);
+  const lineHeight = Number(node.attrs.lineHeight);
+  return {
+    type: node.type.name === "heading" ? "heading" : "paragraph",
+    level: node.type.name === "heading" ? Number(node.attrs.level) || 1 : null,
+    textAlign: typeof node.attrs.textAlign === "string" && node.attrs.textAlign ? node.attrs.textAlign : null,
+    indent: Number.isFinite(indent) && indent > 0 ? indent : null,
+    lineHeight: Number.isFinite(lineHeight) && lineHeight > 0 ? lineHeight : null
+  };
+}
+function sameMarkSet(a3, b3) {
+  if (a3.length !== b3.length) return false;
+  return a3.every((mark) => b3.some((other) => mark.eq(other)));
+}
+function anchorTextblock(doc, from, to) {
+  const $from = doc.resolve(from);
+  if ($from.parent.isTextblock && !$from.parent.type.spec.code) {
+    return { node: $from.parent, pos: $from.before() };
+  }
+  if (from === to) return null;
+  let found = null;
+  doc.nodesBetween(from, to, (node, pos) => {
+    if (found) return false;
+    if (node.isTextblock && !node.type.spec.code) {
+      found = { node, pos };
+      return false;
+    }
+  });
+  return found;
+}
+function blockIsCovered(node, pos, from, to) {
+  const contentFrom = pos + 1;
+  const contentTo = pos + node.nodeSize - 1;
+  return from <= contentFrom && to >= contentTo;
+}
+function sourceMarks(doc, from, to, stored) {
+  var _a;
+  if (from === to) {
+    if (stored) return stored;
+    return doc.resolve(from).marks();
+  }
+  const $from = doc.resolve(from);
+  if ((_a = $from.nodeAfter) == null ? void 0 : _a.isText) return $from.nodeAfter.marks;
+  return $from.marks();
+}
+function captureFormat(editor) {
+  if (!editor.isEditable) return null;
+  const { selection, storedMarks, doc } = editor.state;
+  const anchor = anchorTextblock(doc, selection.from, selection.to);
+  if (!anchor) return null;
+  const marks = sourceMarks(doc, selection.from, selection.to, storedMarks).filter((mark) => isFormatMark(mark.type.name)).map((mark) => ({ type: mark.type.name, attrs: { ...mark.attrs } }));
+  const block = isStyleBlock(anchor.node) && (selection.empty || blockIsCovered(anchor.node, anchor.pos, selection.from, selection.to)) ? readBlock(anchor.node) : null;
+  return { marks, block };
+}
+function canPaint(doc, from, to) {
+  return anchorTextblock(doc, from, to) != null;
+}
+function removeFormatMarks(tr, from, to) {
+  if (from >= to) return;
+  for (const name of FORMAT_MARKS) {
+    const type = tr.doc.type.schema.marks[name];
+    if (type) tr.removeMark(from, to, type);
+  }
+}
+function addFormatMarks(tr, from, to, marks) {
+  if (from >= to) return;
+  for (const mark of marks) {
+    const type = tr.doc.type.schema.marks[mark.type];
+    if (!type || !isFormatMark(mark.type)) continue;
+    tr.addMark(from, to, type.create(mark.attrs));
+  }
+}
+function marksForNextInput(tr, stateStored) {
+  if (tr.storedMarksSet) return tr.storedMarks ?? [];
+  if (stateStored) return stateStored;
+  return tr.selection.$from.marks();
+}
+function setFormatStoredMarks(tr, marks, stateStored) {
+  const current = marksForNextInput(tr, stateStored);
+  const kept = current.filter((mark) => !isFormatMark(mark.type.name));
+  const next = [
+    ...kept,
+    ...marks.flatMap((mark) => {
+      const type = tr.doc.type.schema.marks[mark.type];
+      return type && isFormatMark(mark.type) ? [type.create(mark.attrs)] : [];
+    })
+  ];
+  if (sameMarkSet(current, next)) return;
+  tr.setStoredMarks(next);
+}
+function stripFormatStoredMarks(tr, stateStored) {
+  const current = marksForNextInput(tr, stateStored);
+  const next = current.filter((mark) => !isFormatMark(mark.type.name));
+  if (sameMarkSet(current, next)) return;
+  tr.setStoredMarks(next);
+}
+function applyBlockAt(tr, pos, block) {
+  var _a, _b, _c;
+  const node = tr.doc.nodeAt(pos);
+  if (!node || !isStyleBlock(node)) return;
+  const $pos = tr.doc.resolve(pos);
+  let typeName = node.type.name;
+  if (block.type === "heading") {
+    const heading = tr.doc.type.schema.nodes.heading;
+    if (heading && $pos.parent.canReplaceWith($pos.index(), $pos.index() + 1, heading)) {
+      typeName = "heading";
+    }
+  } else if (node.type.name === "heading") {
+    const paragraph = tr.doc.type.schema.nodes.paragraph;
+    if (paragraph && $pos.parent.canReplaceWith($pos.index(), $pos.index() + 1, paragraph)) {
+      typeName = "paragraph";
+    }
+  }
+  const type = tr.doc.type.schema.nodes[typeName];
+  if (!type) return;
+  const indent = Number(node.attrs.indent);
+  const lineHeight = Number(node.attrs.lineHeight);
+  const sameType = node.type === type;
+  const sameLevel = typeName !== "heading" || Number(node.attrs.level) === (block.level ?? 1);
+  const sameAlign = (node.attrs.textAlign || null) === block.textAlign;
+  const sameIndent = (Number.isFinite(indent) && indent > 0 ? indent : null) === block.indent;
+  const sameLine = (Number.isFinite(lineHeight) && lineHeight > 0 ? lineHeight : null) === block.lineHeight;
+  if (sameType && sameLevel && sameAlign && sameIndent && sameLine) return;
+  const attrs = { ...node.attrs };
+  if (typeName === "heading") attrs.level = block.level ?? 1;
+  else delete attrs.level;
+  if ((_a = type.spec.attrs) == null ? void 0 : _a.textAlign) attrs.textAlign = block.textAlign;
+  if ((_b = type.spec.attrs) == null ? void 0 : _b.indent) attrs.indent = block.indent;
+  if ((_c = type.spec.attrs) == null ? void 0 : _c.lineHeight) attrs.lineHeight = block.lineHeight;
+  tr.setNodeMarkup(pos, type, attrs);
+}
+function coveredStyleBlockPositions(doc, from, to) {
+  const positions = [];
+  doc.nodesBetween(from, to, (node, pos) => {
+    if (!isStyleBlock(node)) return;
+    if (blockIsCovered(node, pos, from, to)) positions.push(pos);
+  });
+  return positions;
+}
+function mutateFormatting(tr, mode, format, stateStored) {
+  const docBefore = tr.doc;
+  const ranges = tr.selection.ranges.map((range) => ({
+    from: range.$from.pos,
+    to: range.$to.pos
+  }));
+  const caretOnly = ranges.every((range) => range.from === range.to);
+  if (caretOnly) {
+    for (const range of ranges) {
+      const $pos = tr.doc.resolve(range.from);
+      const parent = $pos.parent;
+      if (!parent.isTextblock || parent.type.spec.code) continue;
+      if (mode === "clear") {
+        removeFormatMarks(tr, $pos.start(), $pos.end());
+        if (isStyleBlock(parent)) applyBlockAt(tr, $pos.before(), PLAIN_BLOCK);
+      } else if ((format == null ? void 0 : format.block) && isStyleBlock(parent)) {
+        applyBlockAt(tr, $pos.before(), format.block);
+      }
+    }
+    if (mode === "clear") stripFormatStoredMarks(tr, stateStored);
+    else if (format) setFormatStoredMarks(tr, format.marks, stateStored);
+  } else {
+    for (const range of ranges) {
+      removeFormatMarks(tr, range.from, range.to);
+      if (mode === "paint" && format) addFormatMarks(tr, range.from, range.to, format.marks);
+    }
+    const positions = /* @__PURE__ */ new Set();
+    for (const range of ranges) {
+      for (const pos of coveredStyleBlockPositions(tr.doc, range.from, range.to)) {
+        positions.add(pos);
+      }
+    }
+    const ordered = [...positions].sort((a3, b3) => b3 - a3);
+    for (const pos of ordered) {
+      if (mode === "clear") applyBlockAt(tr, pos, PLAIN_BLOCK);
+      else if (format == null ? void 0 : format.block) applyBlockAt(tr, pos, format.block);
+    }
+    if (mode === "clear") stripFormatStoredMarks(tr, stateStored);
+    else if (format) setFormatStoredMarks(tr, format.marks, stateStored);
+  }
+  const docChanged = !tr.doc.eq(docBefore);
+  const storedChanged = tr.storedMarksSet && !sameMarkSet(tr.storedMarks ?? [], stateStored ?? []);
+  return docChanged || storedChanged;
+}
+function runFormatCommand(editor, mutate) {
+  return editor.chain().focus().command(({ tr }) => mutate(tr)).run();
+}
+function pinCursorMarks(editor, desired) {
+  if (!editor.state.selection.empty) return;
+  const current = editor.state.storedMarks ?? editor.state.selection.$from.marks();
+  if (sameMarkSet(current, desired)) return;
+  editor.view.dispatch(
+    editor.state.tr.setStoredMarks(desired).setMeta("addToHistory", false)
+  );
+}
+function storedMarksFor(editor, captured) {
+  const current = editor.state.storedMarks ?? editor.state.selection.$from.marks();
+  const kept = current.filter((mark) => !isFormatMark(mark.type.name));
+  if (!captured) return kept;
+  return [
+    ...kept,
+    ...captured.flatMap((mark) => {
+      const type = editor.schema.marks[mark.type];
+      return type && isFormatMark(mark.type) ? [type.create(mark.attrs)] : [];
+    })
+  ];
+}
+function clearFormatting(editor) {
+  if (!editor.isEditable) return false;
+  const { selection, doc } = editor.state;
+  if (!canPaint(doc, selection.from, selection.to)) return false;
+  const stateStored = editor.state.storedMarks;
+  const ok = runFormatCommand(
+    editor,
+    (tr) => mutateFormatting(tr, "clear", null, stateStored)
+  );
+  if (editor.state.selection.empty) pinCursorMarks(editor, storedMarksFor(editor, null));
+  return ok;
+}
+function applyCapturedFormat(editor, format) {
+  if (!editor.isEditable) return false;
+  const { selection, doc } = editor.state;
+  if (!canPaint(doc, selection.from, selection.to)) return false;
+  const stateStored = editor.state.storedMarks;
+  runFormatCommand(
+    editor,
+    (tr) => mutateFormatting(tr, "paint", format, stateStored)
+  );
+  if (editor.state.selection.empty) {
+    pinCursorMarks(editor, storedMarksFor(editor, format.marks));
+  }
+  return true;
+}
 const palette = "_palette_x5lrq_2";
 const noneRow = "_noneRow_x5lrq_11";
 const noneIcon = "_noneIcon_x5lrq_23";
@@ -6462,6 +6719,63 @@ function EditorToolbar({
       editor.off("blur", onBlur);
     };
   }, [editor]);
+  const [painter, setPainter] = useState("off");
+  const [paintSample, setPaintSample] = useState(null);
+  const painterClickAt = useRef(0);
+  const painterEditor = useRef(editor);
+  const disarmPainter = () => {
+    painterClickAt.current = 0;
+    setPainter("off");
+    setPaintSample(null);
+  };
+  useEffect(() => {
+    if (painterEditor.current === editor) return;
+    painterEditor.current = editor;
+    disarmPainter();
+  }, [editor]);
+  useEffect(() => {
+    if (editor.isDestroyed) return;
+    const dom = editor.view.dom;
+    dom.classList.toggle("tmr-format-painter", painter !== "off");
+    return () => {
+      if (!editor.isDestroyed) dom.classList.remove("tmr-format-painter");
+    };
+  }, [editor, painter]);
+  useEffect(() => {
+    if (painter === "off" || !paintSample || editor.isDestroyed) return;
+    const dom = editor.view.dom;
+    const apply2 = () => {
+      const handled = applyCapturedFormat(editor, paintSample);
+      if (handled && painter === "once") disarmPainter();
+    };
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      disarmPainter();
+    };
+    dom.addEventListener("mouseup", apply2);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      dom.removeEventListener("mouseup", apply2);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [editor, painter, paintSample]);
+  const onFormatPainterClick = () => {
+    const now = Date.now();
+    const quick = now - painterClickAt.current < 300;
+    painterClickAt.current = now;
+    if (painter !== "off") {
+      if (quick && painter === "once") {
+        setPainter("locked");
+        return;
+      }
+      disarmPainter();
+      return;
+    }
+    const captured = captureFormat(editor);
+    if (!captured) return;
+    setPaintSample(captured);
+    setPainter(quick ? "locked" : "once");
+  };
   const fileInputRef = useRef(null);
   const chain = () => editor.chain().focus();
   const imageUploadEnabled = hasImageUpload(editor);
@@ -6668,6 +6982,23 @@ function EditorToolbar({
               children: /* @__PURE__ */ jsx(RedoIcon, {})
             }
           ),
+          /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              title: t.formatPainter,
+              active: painter !== "off",
+              onClick: onFormatPainterClick,
+              children: /* @__PURE__ */ jsx(PaintbrushIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              title: t.clearFormatting,
+              onClick: () => clearFormatting(editor),
+              children: /* @__PURE__ */ jsx(EraserIcon, {})
+            }
+          ),
           /* @__PURE__ */ jsx(Divider, {}),
           /* @__PURE__ */ jsxs(
             MenuPopover,
@@ -7429,8 +7760,8 @@ export {
   C as ChartMount,
   CheckIcon,
   ChevronDownIcon,
-  a9 as ChevronLeftIcon,
-  aa as ChevronRightIcon,
+  aa as ChevronLeftIcon,
+  ab as ChevronRightIcon,
   ChevronUpIcon,
   ChevronsUpDownIcon,
   a as CitationInteractive,
@@ -7454,12 +7785,12 @@ export {
   FIND_DEBOUNCE_MS,
   default2 as FindAndReplace,
   FindReplaceBar,
-  ab as FitIcon,
+  ac as FitIcon,
   GripIcon,
   ImageAlignTools,
   ImageIcon,
   ImageUploadNode,
-  ac as ImportIcon,
+  ad as ImportIcon,
   ImportPlaceholder,
   IndentDecreaseIcon,
   IndentIncreaseIcon,
@@ -7471,13 +7802,14 @@ export {
   ListChecksIcon,
   ListOrderedIcon,
   ListUnorderedIcon,
-  ad as LockIcon,
+  ae as LockIcon,
   MarkdownFileDrop,
   MarkdownPaste,
   MarkdownPreview,
   MarkdownWysiwygEditor,
-  ae as MenuIcon,
+  af as MenuIcon,
   PENDING_ANCHOR_CLASS,
+  PaintbrushIcon,
   P as ParagraphStyles,
   RedoIcon,
   ReplaceAllIcon,
@@ -7486,7 +7818,7 @@ export {
   b as ReportContentInteractive,
   c as ReportContentWithCharts,
   RotateCcwIcon,
-  af as RotateCwIcon,
+  ag as RotateCwIcon,
   RowAfterIcon,
   RowBeforeIcon,
   RowDeleteIcon,
@@ -7499,8 +7831,8 @@ export {
   UnderlineIcon,
   UndoIcon,
   XIcon,
-  ag as ZoomInIcon,
-  ah as ZoomOutIcon,
+  ah as ZoomInIcon,
+  ai as ZoomOutIcon,
   a2 as applyCitationSources,
   applyCommentAnchorsToEditor,
   applyLink,