tiptap-markdown-react 1.6.0 → 1.7.0

package/dist/i18n/types.d.ts

@@ -16,4 +16,6 @@ export interface LocaleBundle {
     codeBlock: CodeBlockLabels;
     find: FindLabels;
     imageUpload: ImageUploadLabels;
+    /** 正文顶部文档标题的占位。 */
+    titlePlaceholder: string;
 }

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 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, aa as MinimizeIcon } from "./ReportContentWithCharts-BaBitkZX.js";
-import { C, ab, ac, a, ad, ae, af, ag, b, c, ah, ai, aj, f, m, r, s } from "./ReportContentWithCharts-BaBitkZX.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, aa as MinimizeIcon } from "./ReportContentWithCharts-DeuBXydb.js";
+import { C, ab, ac, a, ad, ae, af, ag, b, c, ah, ai, aj, f, m, r, s } from "./ReportContentWithCharts-DeuBXydb.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-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 { 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-BlGb1jJw.js";
+import { R, a as a2, b as b2, s as s2 } from "./ReportContent-BlGb1jJw.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-DNrkCXJc.js";
+import { P, g, e, s as s3 } from "./extractToc-DNrkCXJc.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";
@@ -3738,6 +3738,62 @@ function sameTocItems(a3, b3) {
     (item2, index) => item2.id === b3[index].id && item2.level === b3[index].level && item2.text === b3[index].text
   );
 }
+function isAtDocumentStart(selection) {
+  if (!selection.empty) return selection.from === 0;
+  const $from = selection.$from;
+  if ($from.parentOffset !== 0) return false;
+  for (let depth = $from.depth; depth > 0; depth -= 1) {
+    if ($from.index(depth - 1) !== 0) return false;
+  }
+  return true;
+}
+function DocumentTitleField({
+  value,
+  placeholder,
+  maxLength,
+  readOnly: readOnly2,
+  inputRef,
+  onChange,
+  onMoveToBody
+}) {
+  useLayoutEffect(() => {
+    const el = inputRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    if (el.scrollHeight > 0) el.style.height = `${el.scrollHeight}px`;
+  }, [inputRef, value]);
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ref: inputRef,
+      className: styles$e.documentTitle,
+      "data-document-title": "",
+      value,
+      placeholder,
+      maxLength,
+      rows: 1,
+      "aria-label": placeholder,
+      readOnly: readOnly2,
+      onChange: (event) => onChange(event.target.value),
+      onKeyDown: (event) => {
+        if (readOnly2 || isComposingKeyEvent(event.nativeEvent)) return;
+        if (event.key === "Enter" && !event.shiftKey) {
+          event.preventDefault();
+          onMoveToBody();
+          return;
+        }
+        if (event.key !== "ArrowDown" || event.shiftKey || event.altKey || event.metaKey || event.ctrlKey) {
+          return;
+        }
+        const el = event.currentTarget;
+        if (el.selectionStart === el.value.length && el.selectionEnd === el.value.length) {
+          event.preventDefault();
+          onMoveToBody();
+        }
+      }
+    }
+  );
+}
 const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
   initialMarkdown = "",
   editable = true,
@@ -3745,6 +3801,11 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
   sources,
   renderCitation,
   placeholder,
+  documentTitle,
+  defaultDocumentTitle = "",
+  onDocumentTitleChange,
+  documentTitlePlaceholder,
+  documentTitleMaxLength = 200,
   onEditorReady,
   onTocChange,
   toc = false,
@@ -3785,7 +3846,25 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
   const [findOpen, setFindOpen] = useState(false);
   const [shortcutsOpen, setShortcutsOpen] = useState(false);
   const [tocItems, setTocItems] = useState([]);
+  const [uncontrolledTitle, setUncontrolledTitle] = useState(defaultDocumentTitle);
   const findInputRef = useRef(null);
+  const titleInputRef = useRef(null);
+  const showDocumentTitleRef = useRef(false);
+  const titleValueRef = useRef("");
+  const onDocumentTitleChangeRef = useRef(onDocumentTitleChange);
+  onDocumentTitleChangeRef.current = onDocumentTitleChange;
+  const titleControlled = typeof documentTitle === "string";
+  const titleControlledRef = useRef(titleControlled);
+  titleControlledRef.current = titleControlled;
+  const titleValue = titleControlled ? documentTitle : uncontrolledTitle;
+  const showDocumentTitle = documentTitle !== false && (editable || titleValue.trim().length > 0);
+  showDocumentTitleRef.current = showDocumentTitle;
+  titleValueRef.current = titleValue;
+  const setDocumentTitle = useCallback((next) => {
+    var _a;
+    if (!titleControlledRef.current) setUncontrolledTitle(next);
+    (_a = onDocumentTitleChangeRef.current) == null ? void 0 : _a.call(onDocumentTitleChangeRef, next);
+  }, []);
   const onTocChangeRef = useRef(onTocChange);
   onTocChangeRef.current = onTocChange;
   const tocItemsRef = useRef([]);
@@ -3875,6 +3954,20 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
     editorProps: {
       attributes: {
         class: styles$e.editorContent
+      },
+      handleKeyDown: (_view, event) => {
+        if (!showDocumentTitleRef.current) return false;
+        if (event.key !== "ArrowUp" || event.shiftKey || event.altKey || event.metaKey || event.ctrlKey || isComposingKeyEvent(event)) {
+          return false;
+        }
+        if (!isAtDocumentStart(_view.state.selection)) return false;
+        const title = titleInputRef.current;
+        if (!title) return false;
+        event.preventDefault();
+        title.focus();
+        const end = title.value.length;
+        title.setSelectionRange(end, end);
+        return true;
       }
     }
   });
@@ -4042,6 +4135,7 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
         var _a;
         return ((_a = editor == null ? void 0 : editor.getMarkdown) == null ? void 0 : _a.call(editor)) ?? "";
       },
+      getDocumentTitle: () => showDocumentTitleRef.current ? titleValueRef.current : "",
       getHTML: () => {
         var _a;
         return ((_a = editor == null ? void 0 : editor.getHTML) == null ? void 0 : _a.call(editor)) ?? "";
@@ -4099,6 +4193,20 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
       children: /* @__PURE__ */ jsx(KeyboardIcon, { size: 18 })
     }
   ) : null;
+  const padDrag = showBlockDrag ? styles$e.withBlockDrag : "";
+  const padToc = toc && !blockDragMobile && tocItems.length > 0 ? styles$e.withToc : "";
+  const editorSurface = /* @__PURE__ */ jsx(ImagePreviewHost, { locale, activate: editable ? "dblclick" : "click", children: /* @__PURE__ */ jsx(
+    EditorContent,
+    {
+      editor,
+      className: [
+        styles$e.editorScroll,
+        showDocumentTitle ? "" : padDrag,
+        showDocumentTitle ? "" : padToc,
+        className ?? ""
+      ].filter(Boolean).join(" ")
+    }
+  ) });
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -4115,18 +4223,21 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
             locale
           }
         ) : null,
-        /* @__PURE__ */ jsx(ImagePreviewHost, { locale, activate: editable ? "dblclick" : "click", children: /* @__PURE__ */ jsx(
-          EditorContent,
-          {
-            editor,
-            className: [
-              styles$e.editorScroll,
-              showBlockDrag ? styles$e.withBlockDrag : "",
-              toc && !blockDragMobile && tocItems.length > 0 ? styles$e.withToc : "",
-              className ?? ""
-            ].filter(Boolean).join(" ")
-          }
-        ) }),
+        showDocumentTitle ? /* @__PURE__ */ jsxs("div", { className: [styles$e.titleStack, padDrag, padToc].filter(Boolean).join(" "), children: [
+          /* @__PURE__ */ jsx(
+            DocumentTitleField,
+            {
+              value: titleValue,
+              placeholder: documentTitlePlaceholder ?? getLocaleBundle(locale).titlePlaceholder,
+              maxLength: documentTitleMaxLength,
+              readOnly: !editable,
+              inputRef: titleInputRef,
+              onChange: setDocumentTitle,
+              onMoveToBody: () => editor == null ? void 0 : editor.commands.focus("start")
+            }
+          ),
+          editorSurface
+        ] }) : editorSurface,
         editor && showBlockDrag ? /* @__PURE__ */ jsx(BlockDragHandle, { editor }) : null,
         editor && characterCount ? /* @__PURE__ */ jsxs("div", { className: styles$e.editorStatus, children: [
           /* @__PURE__ */ jsx(CharacterCountStatus, { editor, locale }),
@@ -4237,6 +4348,30 @@ const ESCAPE_GUARDS = [
   '[role="listbox"]',
   '[role="menu"]'
 ].join(",");
+const POPUP_MENU_ROOT = "[data-radix-popper-content-wrapper], .ant-menu-submenu-popup, .ant-dropdown, .ant-select-dropdown, .ant-cascader-menus, .ant-picker-dropdown, .ant-popover";
+function isShown(el) {
+  let current = el;
+  while (current && current !== document.documentElement) {
+    if (!(current instanceof HTMLElement)) return false;
+    if (current.hidden || current.getAttribute("aria-hidden") === "true") return false;
+    const style = window.getComputedStyle(current);
+    if (style.display === "none" || style.visibility === "hidden") return false;
+    current = current.parentElement;
+  }
+  return true;
+}
+function isEscapeLayer(node) {
+  if (!isShown(node)) return false;
+  if (node.getAttribute("role") !== "menu") return true;
+  if (node.closest(POPUP_MENU_ROOT)) return true;
+  if (node.classList.contains("ant-menu-root") || node.closest('nav, [role="navigation"], aside, .ant-layout-sider')) {
+    return false;
+  }
+  return true;
+}
+function escapeLayerOpen() {
+  return [...document.querySelectorAll(ESCAPE_GUARDS)].some(isEscapeLayer);
+}
 let savedBodyOverflow = null;
 function readExplicitTarget(target) {
   if (typeof target === "function") return target();
@@ -4318,7 +4453,7 @@ function useToolbarFullscreen({
     if (!fullscreen) return;
     const onKey = (event) => {
       if (event.key !== "Escape" || isComposingKeyEvent(event)) return;
-      if (document.querySelector(ESCAPE_GUARDS)) return;
+      if (escapeLayerOpen()) return;
       if (!editor.isDestroyed && editor.view.dom.classList.contains("tmr-format-painter")) {
         return;
       }