tiptap-markdown-react 0.8.6 → 0.8.8

package/README.md

@@ -222,7 +222,7 @@ Three ways to get markdown into the editor, all built in:
 
 - **Paste markdown text** — plain-text paste is heuristically detected (headings, lists, links, fences, tables…) and parsed into rich content. Rich-text (HTML) paste is untouched; Shift+paste always inserts plain text; pasting inside a code block is never converted. Opt out with `markdownPaste={false}`.
 - **Drop / paste `.md` files** — drag a `.md` / `.markdown` file into the editor (inserted at drop point) or paste a copied file (inserted at cursor). Opt out with `markdownFileDrop={false}`.
-- **Toolbar import** — "Import Markdown" in the toolbar's More menu opens a file picker and inserts the parsed file at the cursor (label: `labels.importMarkdown`).
+- **Toolbar import** — the main-bar **Import** button opens a file picker and inserts the parsed file at the cursor (label: `labels.importDocument`). `.md` / `.markdown` is read in-package; any other file is handed to `onImportDocument`, so hosts decide which formats to accept (`importAccept`) and how to convert them. Without that callback the picker stays `.md`-only.
 
 The underlying extensions `MarkdownPaste` / `MarkdownFileDrop` (and the `looksLikeMarkdown` heuristic) are exported for custom pipelines.
 
@@ -232,7 +232,10 @@ The underlying extensions `MarkdownPaste` / `MarkdownFileDrop` (and the `looksLi
 | --- | --- | --- |
 | `editor` | `Editor` | The instance from `onEditorReady`. |
 | `onImageUpload` | `(file: File) => Promise<string>` | Upload handler returning a URL. Omit to hide the image button. |
-| `onError` | `(err: unknown) => void` | Side-effect error callback (e.g. failed upload). |
+| `onError` | `(err, source?: 'image' \| 'markdown' \| 'import') => void` | Side-effect error callback (e.g. failed upload). |
+| `onImportDocument` | `(file, ctx) => Promise<ImportDocumentResult \| string>` | Converts a non-Markdown file to Markdown. `ctx.signal` aborts on cancel/unmount; `ctx.onProgress` reports upload/convert progress back. Omit and Import only takes `.md`. |
+| `importAccept` | `string` | Extra `accept` for the Import picker, e.g. `.docx,.csv,.pdf`. The package never validates extensions itself. |
+| `showImport` | `boolean` | Show the Import button (default `true`). |
 | `labels` | `Partial<ToolbarLabels>` | i18n labels. |
 | `extraToolbarItems` | `ExtraToolbarItem[]` | Custom items appended to the "More" menu. |
 | `labels.inlineMath` / `blockMath` | `string` | More-menu equation items. |

package/dist/components/EditorToolbar.d.ts

@@ -1,6 +1,23 @@
 import { Editor } from '@tiptap/react';
 import { ReactNode } from 'react';
 import { ToolbarLabels } from '../labels';
+import { SourceRef } from '../citationUtils';
+/** `onImportDocument` 的成功返回。给字符串等价于 `{ markdown }`。 */
+export interface ImportDocumentResult {
+    markdown: string;
+    sources?: SourceRef[];
+}
+/** 导入进度。宿主自行决定怎么展示（包只据此禁用按钮）。 */
+export interface ImportDocumentProgress {
+    /** 0–1。通常只有上传阶段可测；转换阶段可省略。 */
+    ratio?: number;
+    phase: 'upload' | 'convert';
+}
+export interface ImportDocumentContext {
+    /** 用户点取消或组件卸载时 abort，宿主据此中断请求。 */
+    signal: AbortSignal;
+    onProgress?: (p: ImportDocumentProgress) => void;
+}
 /** More 菜单里注入的自定义项（宿主用它扩展工具栏，如「导入项目报告」）。 */
 export interface ExtraToolbarItem {
     key: string;
@@ -22,7 +39,20 @@ export interface EditorToolbarProps {
      * 副作用错误回调（图片上传 / Markdown 导入失败），供宿主弹自己的提示。
      * `source` 区分来源，避免一律显示「图片上传失败」。
      */
-    onError?: (err: unknown, source?: 'image' | 'markdown') => void;
+    onError?: (err: unknown, source?: 'image' | 'markdown' | 'import') => void;
+    /**
+     * 非 Markdown 文件的转换：收到文件，返回可插入的 Markdown。未提供则导入只吃 .md。
+     * 包内不校验扩展名——格式白名单由宿主的 `importAccept` 与本回调自己负责。
+     * 抛错转交 onError(..., 'import')；`AbortError` 视为用户取消，不报错。
+     */
+    onImportDocument?: (file: File, ctx: ImportDocumentContext) => Promise<ImportDocumentResult | string>;
+    /**
+     * 追加到导入 input 的 accept（默认已含 `.md,.markdown,text/markdown`）。
+     * 例：`.doc,.docx,.csv,.pdf`。仅在传了 `onImportDocument` 时生效。
+     */
+    importAccept?: string;
+    /** 是否显示导入按钮，默认 `true`。卡片等场景可关掉。 */
+    showImport?: boolean;
     labels?: Partial<ToolbarLabels>;
     /** 追加到 More 菜单末尾的自定义项。 */
     extraToolbarItems?: ExtraToolbarItem[];
@@ -32,4 +62,4 @@ export interface EditorToolbarProps {
  * 顶部操作栏（antd-free，Radix Popover 菜单 + 内联 SVG 图标）。位置由父级控制，
  * 这里只渲染按钮 + 反映 editor 激活态。不含业务耦合，扩展项经 extraToolbarItems 注入。
  */
-export declare function EditorToolbar({ editor, onImageUpload, onError, labels, extraToolbarItems, className, }: EditorToolbarProps): import("react").JSX.Element;
+export declare function EditorToolbar({ editor, onImageUpload, onError, onImportDocument, importAccept, showImport, labels, extraToolbarItems, className, }: EditorToolbarProps): import("react").JSX.Element;

package/dist/icons/index.d.ts

@@ -17,6 +17,7 @@ export declare const StrikethroughIcon: (p: IconProps) => import("react").JSX.El
 export declare const CodeIcon: (p: IconProps) => import("react").JSX.Element;
 export declare const LinkIcon: (p: IconProps) => import("react").JSX.Element;
 export declare const ImageIcon: (p: IconProps) => import("react").JSX.Element;
+export declare const ImportIcon: (p: IconProps) => import("react").JSX.Element;
 export declare const ListUnorderedIcon: (p: IconProps) => import("react").JSX.Element;
 export declare const ListOrderedIcon: (p: IconProps) => import("react").JSX.Element;
 export declare const ListChecksIcon: (p: IconProps) => import("react").JSX.Element;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { MarkdownWysiwygEditor, type MarkdownWysiwygEditorHandle, type MarkdownWysiwygEditorProps, } from './components/MarkdownWysiwygEditor';
 export { MarkdownPreview, type MarkdownPreviewProps, } from './components/MarkdownPreview';
-export { EditorToolbar, type EditorToolbarProps, type ExtraToolbarItem, } from './components/EditorToolbar';
+export { EditorToolbar, type EditorToolbarProps, type ExtraToolbarItem, type ImportDocumentContext, type ImportDocumentProgress, type ImportDocumentResult, } from './components/EditorToolbar';
 export { ColorPalette, type ColorPaletteProps } from './components/ColorPalette';
 export { TocPanel, type TocPanelProps } from './components/TocPanel';
 export { CodeBlockView } from './components/CodeBlockView';

package/dist/index.js

@@ -327,10 +327,10 @@ function nextComment(editor, dir = "next") {
   focusComment(editor, target);
   return target;
 }
-const MD_FILE_RE = /\.(md|markdown)$/i;
+const MD_FILE_RE$1 = /\.(md|markdown)$/i;
 const MD_MIME_TYPES = ["text/markdown", "text/x-markdown", ""];
 async function insertMarkdownFiles(editor, files, pos) {
-  const mdFiles = files.filter((f) => MD_FILE_RE.test(f.name));
+  const mdFiles = files.filter((f) => MD_FILE_RE$1.test(f.name));
   if (mdFiles.length === 0) return;
   const markdown = editor.markdown;
   if (!markdown) return;
@@ -461,6 +461,11 @@ const ImageIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
   /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "2" }),
   /* @__PURE__ */ jsx("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
 ] });
+const ImportIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("path", { d: "M12 3v12" }),
+  /* @__PURE__ */ jsx("path", { d: "m8 11 4 4 4-4" }),
+  /* @__PURE__ */ jsx("path", { d: "M8 5H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-4" })
+] });
 const ListUnorderedIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
   /* @__PURE__ */ jsx("line", { x1: "8", x2: "21", y1: "6", y2: "6" }),
   /* @__PURE__ */ jsx("line", { x1: "8", x2: "21", y1: "12", y2: "12" }),
@@ -572,6 +577,12 @@ const defaultToolbarLabels = {
   image: "Image",
   imageUploadFailed: "Image upload failed",
   importMarkdownFailed: "Markdown import failed",
+  importDocument: "Import",
+  importDocumentBusy: "Importing…",
+  importDocumentUploading: (percent) => `Uploading ${percent}%`,
+  importDocumentConverting: "Converting…",
+  importDocumentCancel: "Cancel",
+  importDocumentFailed: "Import failed",
   blockquote: "Blockquote",
   bulletList: "Bullet list",
   orderedList: "Ordered list",
@@ -980,46 +991,84 @@ function MarkdownPreview({
 }
 function insertMarkdown(editor, markdown, sources = []) {
   const prepared = enrichMarkdownCitations(markdown, sources);
-  editor.chain().focus().insertContent(prepared, { contentType: "markdown" }).run();
+  if (!prepared) return;
+  if (tryInsertMarkdown(editor, prepared)) return;
+  for (const block of splitTopLevelBlocks(prepared)) {
+    if (tryInsertMarkdown(editor, block)) continue;
+    insertPlainParagraph(editor, stripToPlainText(block));
+  }
+}
+function tryInsertMarkdown(editor, markdown) {
+  try {
+    return editor.chain().focus().insertContent(markdown, { contentType: "markdown" }).run();
+  } catch {
+    return false;
+  }
+}
+function insertPlainParagraph(editor, text) {
+  if (!text) return;
+  editor.chain().focus().insertContent({
+    type: "paragraph",
+    content: [{ type: "text", text }]
+  }).run();
+}
+function splitTopLevelBlocks(markdown) {
+  const out = [];
+  for (const [i2, part] of markdown.split(/(```[\s\S]*?```)/).entries()) {
+    if (!part) continue;
+    if (i2 % 2 === 1) {
+      out.push(part);
+      continue;
+    }
+    for (const block of part.split(/\n{2,}/)) {
+      if (block.trim()) out.push(block);
+    }
+  }
+  return out;
 }
-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";
+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 styles$3 = {
   toolbar,
   inner,
   btn,
   btnActive,
+  importCancel,
   tableBubble,
   txtIcon,
   colorIcon,
@@ -1356,6 +1405,7 @@ function ToolbarButton({
   title,
   active: active2,
   disabled,
+  busy,
   onClick,
   children
 }) {
@@ -1366,6 +1416,7 @@ function ToolbarButton({
       title,
       "aria-label": title,
       "aria-pressed": active2,
+      "aria-busy": busy,
       disabled,
       className: `${styles$3.btn} ${active2 ? styles$3.btnActive : ""}`,
       onMouseDown: (e) => e.preventDefault(),
@@ -1471,10 +1522,15 @@ 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,
+  showImport = true,
   labels,
   extraToolbarItems,
   className
@@ -1586,20 +1642,62 @@ function EditorToolbar({
       onError == null ? void 0 : onError(err, "image");
     }
   };
-  const mdFileInputRef = useRef(null);
-  const handleMdFileChange = async (e) => {
+  const importInputRef = useRef(null);
+  const [importing, setImporting] = useState(
+    null
+  );
+  const importAbortRef = useRef(null);
+  useEffect(() => () => {
+    var _a;
+    return (_a = importAbortRef.current) == null ? void 0 : _a.abort();
+  }, []);
+  const handleImportChange = async (e) => {
     var _a;
     const file = (_a = e.target.files) == null ? void 0 : _a[0];
     e.target.value = "";
     if (!file) return;
+    if (MD_FILE_RE.test(file.name)) {
+      try {
+        insertMarkdown(editor, await file.text());
+      } catch (err) {
+        console.error("markdown import failed:", err);
+        onError == null ? void 0 : onError(err, "markdown");
+      }
+      return;
+    }
+    if (!onImportDocument) {
+      onError == null ? void 0 : onError(new Error(`unsupported file: ${file.name}`), "import");
+      return;
+    }
+    const ctrl = new AbortController();
+    importAbortRef.current = ctrl;
+    setImporting({ phase: "upload" });
     try {
-      const text = await file.text();
-      insertMarkdown(editor, text);
+      const raw = await onImportDocument(file, {
+        signal: ctrl.signal,
+        onProgress: (p) => {
+          if (!ctrl.signal.aborted) setImporting(p);
+        }
+      });
+      const md = typeof raw === "string" ? raw : raw.markdown;
+      const sources = typeof raw === "string" ? [] : raw.sources ?? [];
+      insertMarkdown(editor, md, sources);
     } catch (err) {
-      console.error("markdown import failed:", err);
-      onError == null ? void 0 : onError(err, "markdown");
+      if (!ctrl.signal.aborted) {
+        console.error("document import failed:", err);
+        onError == null ? void 0 : onError(err, "import");
+      }
+    } finally {
+      if (importAbortRef.current === ctrl) importAbortRef.current = null;
+      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 applyTextColor = (color) => {
     if (color) chain().setColor(color).run();
     else chain().unsetColor().run();
@@ -1951,6 +2049,34 @@ 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();
+                },
+                children: t.importDocumentCancel
+              }
+            ) : null
+          ] }) : null,
           /* @__PURE__ */ jsx(
             ToolbarButton,
             {
@@ -2033,13 +2159,6 @@ function EditorToolbar({
                     ] })
                   }
                 ),
-                /* @__PURE__ */ jsx(MenuItem, { onSelect: () => {
-                  var _a;
-                  return (_a = mdFileInputRef.current) == null ? void 0 : _a.click();
-                }, children: /* @__PURE__ */ jsxs("span", { className: styles$3.styleItem, children: [
-                  /* @__PURE__ */ jsx("span", { className: styles$3.styleIcon, children: "M↓" }),
-                  t.importMarkdown
-                ] }) }),
                 extraToolbarItems == null ? void 0 : extraToolbarItems.map((item2) => /* @__PURE__ */ jsx(
                   MenuItem,
                   {
@@ -2058,16 +2177,16 @@ function EditorToolbar({
         ] })
       }
     ),
-    /* @__PURE__ */ jsx(
+    showImport ? /* @__PURE__ */ jsx(
       "input",
       {
-        ref: mdFileInputRef,
+        ref: importInputRef,
         type: "file",
-        accept: ".md,.markdown,text/markdown",
+        accept: onImportDocument && importAccept ? `${MD_ACCEPT},${importAccept}` : MD_ACCEPT,
         hidden: true,
-        onChange: handleMdFileChange
+        onChange: handleImportChange
       }
-    ),
+    ) : null,
     mathEdit ? /* @__PURE__ */ jsx(
       MathEditorPopover,
       {
@@ -2481,6 +2600,7 @@ export {
   CommentPopover,
   EditorToolbar,
   ImageIcon,
+  ImportIcon,
   ItalicIcon,
   LinkIcon,
   ListChecksIcon,