tiptap-markdown-react 0.8.8 → 0.8.10

package/dist/index.js

@@ -6,10 +6,10 @@ import Image from "@tiptap/extension-image";
 import { TableOfContents } from "@tiptap/extension-table-of-contents";
 import { NodeViewWrapper, ReactNodeViewRenderer, NodeViewContent, useEditor, EditorContent, useEditorState } from "@tiptap/react";
 import { forwardRef, useEffect, useRef, useImperativeHandle, useMemo, useState, useId, useCallback, useContext, createContext } from "react";
-import { C as CitationRef, m as mergeCommentIntervals, a as mapCommentAnchors, e as enrichMarkdownCitations, s as styles$5, b as baseExtensions, c as CommentMark, l as lowlight, d as makeTocGetId, p as pureCodeBlock, f as pureImage, r as renderMathInto, g as subscribeMathClick, R as ReportContent } from "./extractToc-Dft8DJ1g.js";
-import { h, i, j, k } from "./extractToc-Dft8DJ1g.js";
+import { C as CitationRef, m as mergeCommentIntervals, a as mapCommentAnchors, e as enrichMarkdownCitations, s as styles$5, b as baseExtensions, c as CommentMark, l as lowlight, d as makeTocGetId, p as pureCodeBlock, f as pureImage, r as renderMathInto, g as subscribeMathClick, R as ReportContent } from "./extractToc-DiY1iu1J.js";
+import { h, i, j, k } from "./extractToc-DiY1iu1J.js";
 import { Slice, Fragment } from "@tiptap/pm/model";
-import { Extension } from "@tiptap/core";
+import { Extension, Node as Node$1 } from "@tiptap/core";
 import { PluginKey, Plugin } from "@tiptap/pm/state";
 import { DecorationSet, Decoration } from "@tiptap/pm/view";
 import { FileHandlePlugin } from "@tiptap/extension-file-handler";
@@ -327,6 +327,88 @@ function nextComment(editor, dir = "next") {
   focusComment(editor, target);
   return target;
 }
+function findPlaceholderPos(doc) {
+  let found = null;
+  doc.descendants((node, pos) => {
+    if (node.type.name === "importPlaceholder") {
+      found = pos;
+      return false;
+    }
+  });
+  return found;
+}
+const ImportPlaceholder = Node$1.create({
+  name: "importPlaceholder",
+  group: "block",
+  atom: true,
+  selectable: false,
+  draggable: false,
+  addAttributes() {
+    return {
+      label: {
+        default: "",
+        parseHTML: (el) => el.getAttribute("data-label") ?? "",
+        renderHTML: (attrs) => attrs.label ? { "data-label": attrs.label } : {}
+      }
+    };
+  },
+  parseHTML() {
+    return [{ tag: 'div[data-type="import-placeholder"]' }];
+  },
+  renderHTML({ node, HTMLAttributes }) {
+    const label = String(node.attrs.label ?? "");
+    return [
+      "div",
+      {
+        ...HTMLAttributes,
+        "data-type": "import-placeholder",
+        class: "tmr-import-placeholder",
+        contenteditable: "false",
+        "aria-live": "polite",
+        "aria-busy": "true"
+      },
+      ["span", { class: "tmr-import-placeholder-spin", "aria-hidden": "true" }],
+      ["span", { class: "tmr-import-placeholder-label" }, label]
+    ];
+  },
+  renderMarkdown() {
+    return "";
+  },
+  addCommands() {
+    return {
+      insertImportPlaceholder: (label) => ({ chain }) => chain().focus().insertContent({
+        type: this.name,
+        attrs: { label }
+      }).command(({ tr }) => {
+        tr.setMeta("addToHistory", false);
+        tr.setMeta("preventUpdate", true);
+        return true;
+      }).run(),
+      updateImportPlaceholder: (label) => ({ tr, dispatch, state }) => {
+        const pos = findPlaceholderPos(state.doc);
+        if (pos == null) return false;
+        if (dispatch) {
+          dispatch(
+            tr.setNodeMarkup(pos, void 0, { label }).setMeta("addToHistory", false).setMeta("preventUpdate", true)
+          );
+        }
+        return true;
+      },
+      removeImportPlaceholder: () => ({ tr, dispatch, state }) => {
+        const pos = findPlaceholderPos(state.doc);
+        if (pos == null) return false;
+        const node = state.doc.nodeAt(pos);
+        if (!node) return false;
+        if (dispatch) {
+          dispatch(
+            tr.delete(pos, pos + node.nodeSize).setMeta("addToHistory", false).setMeta("preventUpdate", true)
+          );
+        }
+        return true;
+      }
+    };
+  }
+});
 const MD_FILE_RE$1 = /\.(md|markdown)$/i;
 const MD_MIME_TYPES = ["text/markdown", "text/x-markdown", ""];
 async function insertMarkdownFiles(editor, files, pos) {
@@ -578,10 +660,11 @@ const defaultToolbarLabels = {
   imageUploadFailed: "Image upload failed",
   importMarkdownFailed: "Markdown import failed",
   importDocument: "Import",
+  importDocumentHint: "Import a file",
+  importDocumentOther: "Document",
   importDocumentBusy: "Importing…",
   importDocumentUploading: (percent) => `Uploading ${percent}%`,
   importDocumentConverting: "Converting…",
-  importDocumentCancel: "Cancel",
   importDocumentFailed: "Import failed",
   blockquote: "Blockquote",
   bulletList: "Bullet list",
@@ -590,7 +673,7 @@ const defaultToolbarLabels = {
   more: "More",
   codeBlock: "Code block",
   hr: "Divider",
-  importMarkdown: "Import Markdown",
+  importMarkdown: "Markdown",
   tableInsert: "Insert table",
   tableAddColumnBefore: "Add column before",
   tableAddColumnAfter: "Add column after",
@@ -829,6 +912,7 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
       ...baseExtensions,
       CodeBlock.configure({ lowlight, codeBlockLabels }),
       ImageWithConfirmDelete.configure({ inline: false }),
+      ImportPlaceholder,
       createCitationRef({ renderCitation }),
       CommentMark,
       commentAnchorExtension({
@@ -989,6 +1073,32 @@ function MarkdownPreview({
     }
   );
 }
+const MD_FILE_RE = /\.(md|markdown)$/i;
+const MD_ACCEPT = ".md,.markdown,text/markdown";
+function resolveImportMenuItems({
+  labels,
+  onImportDocument,
+  importAccept,
+  importMenuItems
+}) {
+  if (importMenuItems == null ? void 0 : importMenuItems.length) return importMenuItems;
+  const markdown = {
+    key: "markdown",
+    label: labels.importMarkdown,
+    accept: MD_ACCEPT
+  };
+  if (onImportDocument && importAccept) {
+    return [
+      markdown,
+      {
+        key: "document",
+        label: labels.importDocumentOther,
+        accept: importAccept
+      }
+    ];
+  }
+  return [markdown];
+}
 function insertMarkdown(editor, markdown, sources = []) {
   const prepared = enrichMarkdownCitations(markdown, sources);
   if (!prepared) return;
@@ -1029,46 +1139,44 @@ function splitTopLevelBlocks(markdown) {
 function stripToPlainText(markdown) {
   return markdown.replace(/!\[[^\]]*\]\([^)]+\)/g, "").replace(/\[([^\]]+)\]\([^)]+\)/g, "$1").replace(/^#{1,6}\s+/gm, "").replace(/^[ \t]*[-*+]\s+/gm, "").replace(/^[ \t]*\d+\.\s+/gm, "").replace(/[*_~`]+/g, "").replace(/<[^>]+>/g, "").replace(/\|/g, " ").replace(/\s+/g, " ").trim();
 }
-const toolbar = "_toolbar_1ybhg_2";
-const inner = "_inner_1ybhg_15";
-const btn = "_btn_1ybhg_27";
-const btnActive = "_btnActive_1ybhg_50";
-const importCancel = "_importCancel_1ybhg_66";
-const tableBubble = "_tableBubble_1ybhg_85";
-const txtIcon = "_txtIcon_1ybhg_97";
-const colorIcon = "_colorIcon_1ybhg_105";
-const colorIconGlyph = "_colorIconGlyph_1ybhg_113";
-const colorIconBar = "_colorIconBar_1ybhg_119";
-const scriptTrigger = "_scriptTrigger_1ybhg_126";
-const scriptTriggerGlyph = "_scriptTriggerGlyph_1ybhg_146";
-const divider = "_divider_1ybhg_154";
-const styleTrigger = "_styleTrigger_1ybhg_163";
-const styleTriggerLabel = "_styleTriggerLabel_1ybhg_192";
-const styleTriggerCaret = "_styleTriggerCaret_1ybhg_200";
-const styleItem = "_styleItem_1ybhg_206";
-const styleIcon = "_styleIcon_1ybhg_212";
-const scriptGlyph = "_scriptGlyph_1ybhg_222";
-const menu = "_menu_1ybhg_234";
-const menuItem = "_menuItem_1ybhg_245";
-const menuItemSelected = "_menuItemSelected_1ybhg_271";
-const popoverContent$1 = "_popoverContent_1ybhg_285";
-const mathLayer = "_mathLayer_1ybhg_289";
-const mathStack = "_mathStack_1ybhg_294";
-const mathStackBlock = "_mathStackBlock_1ybhg_301";
-const mathHint = "_mathHint_1ybhg_306";
-const mathHintBlock = "_mathHintBlock_1ybhg_318";
-const mathHintIcon = "_mathHintIcon_1ybhg_324";
-const mathField = "_mathField_1ybhg_355";
-const mathFieldBlock = "_mathFieldBlock_1ybhg_367";
-const mathInput = "_mathInput_1ybhg_374";
-const mathDone = "_mathDone_1ybhg_392";
-const mathDoneKbd = "_mathDoneKbd_1ybhg_417";
+const toolbar = "_toolbar_16b09_2";
+const inner = "_inner_16b09_15";
+const btn = "_btn_16b09_27";
+const btnActive = "_btnActive_16b09_50";
+const tableBubble = "_tableBubble_16b09_66";
+const txtIcon = "_txtIcon_16b09_78";
+const colorIcon = "_colorIcon_16b09_86";
+const colorIconGlyph = "_colorIconGlyph_16b09_94";
+const colorIconBar = "_colorIconBar_16b09_100";
+const scriptTrigger = "_scriptTrigger_16b09_107";
+const scriptTriggerGlyph = "_scriptTriggerGlyph_16b09_127";
+const divider = "_divider_16b09_135";
+const styleTrigger = "_styleTrigger_16b09_144";
+const styleTriggerLabel = "_styleTriggerLabel_16b09_173";
+const styleTriggerCaret = "_styleTriggerCaret_16b09_181";
+const styleItem = "_styleItem_16b09_187";
+const styleIcon = "_styleIcon_16b09_193";
+const scriptGlyph = "_scriptGlyph_16b09_203";
+const menu = "_menu_16b09_215";
+const menuItem = "_menuItem_16b09_226";
+const menuItemSelected = "_menuItemSelected_16b09_252";
+const popoverContent$1 = "_popoverContent_16b09_266";
+const mathLayer = "_mathLayer_16b09_270";
+const mathStack = "_mathStack_16b09_275";
+const mathStackBlock = "_mathStackBlock_16b09_282";
+const mathHint = "_mathHint_16b09_287";
+const mathHintBlock = "_mathHintBlock_16b09_299";
+const mathHintIcon = "_mathHintIcon_16b09_305";
+const mathField = "_mathField_16b09_336";
+const mathFieldBlock = "_mathFieldBlock_16b09_348";
+const mathInput = "_mathInput_16b09_355";
+const mathDone = "_mathDone_16b09_373";
+const mathDoneKbd = "_mathDoneKbd_16b09_398";
 const styles$3 = {
   toolbar,
   inner,
   btn,
   btnActive,
-  importCancel,
   tableBubble,
   txtIcon,
   colorIcon,
@@ -1522,14 +1630,13 @@ function ColorPopover({
 }
 const HEADING_LEVELS = [1, 2, 3, 4, 5, 6];
 const FONT_SIZES = ["12px", "14px", "16px", "18px", "20px", "24px", "30px"];
-const MD_FILE_RE = /\.(md|markdown)$/i;
-const MD_ACCEPT = ".md,.markdown,text/markdown";
 function EditorToolbar({
   editor,
   onImageUpload,
   onError,
   onImportDocument,
   importAccept,
+  importMenuItems,
   showImport = true,
   labels,
   extraToolbarItems,
@@ -1671,18 +1778,24 @@ function EditorToolbar({
     }
     const ctrl = new AbortController();
     importAbortRef.current = ctrl;
-    setImporting({ phase: "upload" });
+    setImporting({ phase: "upload", ratio: 0 });
+    const labelOf = (p) => p.phase === "convert" ? t.importDocumentConverting : t.importDocumentUploading(Math.round((p.ratio ?? 0) * 100));
+    editor.commands.insertImportPlaceholder(labelOf({ phase: "upload", ratio: 0 }));
     try {
       const raw = await onImportDocument(file, {
         signal: ctrl.signal,
         onProgress: (p) => {
-          if (!ctrl.signal.aborted) setImporting(p);
+          if (ctrl.signal.aborted) return;
+          setImporting(p);
+          editor.commands.updateImportPlaceholder(labelOf(p));
         }
       });
+      editor.commands.removeImportPlaceholder();
       const md = typeof raw === "string" ? raw : raw.markdown;
       const sources = typeof raw === "string" ? [] : raw.sources ?? [];
       insertMarkdown(editor, md, sources);
     } catch (err) {
+      editor.commands.removeImportPlaceholder();
       if (!ctrl.signal.aborted) {
         console.error("document import failed:", err);
         onError == null ? void 0 : onError(err, "import");
@@ -1692,12 +1805,20 @@ function EditorToolbar({
       setImporting(null);
     }
   };
-  const importTitle = (() => {
-    if (!importing) return t.importDocument;
-    if (importing.phase === "convert") return t.importDocumentConverting;
-    const pct = Math.round((importing.ratio ?? 0) * 100);
-    return t.importDocumentUploading(pct);
-  })();
+  const importItems = resolveImportMenuItems({
+    labels: t,
+    onImportDocument,
+    importAccept,
+    importMenuItems
+  });
+  const pickImport = (accept) => {
+    const input = importInputRef.current;
+    if (!input) return;
+    input.accept = accept;
+    input.value = "";
+    input.click();
+  };
+  const importTitle = importing ? t.importDocumentBusy : t.importDocumentHint;
   const applyTextColor = (color) => {
     if (color) chain().setColor(color).run();
     else chain().unsetColor().run();
@@ -2049,34 +2170,41 @@ function EditorToolbar({
               }
             )
           ] }) : null,
-          showImport ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            /* @__PURE__ */ jsx(
-              ToolbarButton,
-              {
-                title: importTitle,
-                disabled: !!importing,
-                busy: !!importing,
-                onClick: () => {
-                  var _a;
-                  return (_a = importInputRef.current) == null ? void 0 : _a.click();
-                },
-                children: /* @__PURE__ */ jsx(ImportIcon, {})
-              }
-            ),
-            importing ? /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: styles$3.importCancel,
-                onMouseDown: (e) => e.preventDefault(),
-                onClick: () => {
-                  var _a;
-                  return (_a = importAbortRef.current) == null ? void 0 : _a.abort();
+          showImport ? /* @__PURE__ */ jsx(
+            MenuPopover,
+            {
+              trigger: /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: styles$3.styleTrigger,
+                  title: importTitle,
+                  "aria-label": importTitle,
+                  "aria-busy": !!importing,
+                  disabled: !!importing,
+                  onMouseDown: (e) => e.preventDefault(),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: styles$3.styleTriggerLabel, children: t.importDocument }),
+                    /* @__PURE__ */ jsx(
+                      ChevronDownIcon,
+                      {
+                        size: 12,
+                        className: styles$3.styleTriggerCaret
+                      }
+                    )
+                  ]
+                }
+              ),
+              children: importItems.map((item2) => /* @__PURE__ */ jsx(
+                MenuItem,
+                {
+                  onSelect: () => pickImport(item2.accept),
+                  children: item2.label
                 },
-                children: t.importDocumentCancel
-              }
-            ) : null
-          ] }) : null,
+                item2.key
+              ))
+            }
+          ) : null,
           /* @__PURE__ */ jsx(
             ToolbarButton,
             {
@@ -2182,7 +2310,6 @@ function EditorToolbar({
       {
         ref: importInputRef,
         type: "file",
-        accept: onImportDocument && importAccept ? `${MD_ACCEPT},${importAccept}` : MD_ACCEPT,
         hidden: true,
         onChange: handleImportChange
       }
@@ -2601,6 +2728,7 @@ export {
   EditorToolbar,
   ImageIcon,
   ImportIcon,
+  ImportPlaceholder,
   ItalicIcon,
   LinkIcon,
   ListChecksIcon,