remons-markdown-editor 1.0.0-beta.3 → 1.0.0-beta.4

package/dist/index.js

@@ -1,5 +1,6 @@
 // src/MarkdownEditor.tsx
-import { useState as useState3, useRef as useRef4, useCallback as useCallback5, useEffect as useEffect4, forwardRef as forwardRef2, useImperativeHandle } from "react";
+import { useState as useState4, useRef as useRef5, useCallback as useCallback6, useEffect as useEffect6, forwardRef as forwardRef2, useImperativeHandle } from "react";
+import { message } from "antd";
 
 // src/components/Editor/index.tsx
 import { useEffect, useRef } from "react";
@@ -11,6 +12,7 @@ import { EditorView, keymap } from "@codemirror/view";
 import { defaultKeymap, indentWithTab } from "@codemirror/commands";
 import { markdown } from "@codemirror/lang-markdown";
 import { oneDark } from "@codemirror/theme-one-dark";
+import { Facet as Facet2 } from "@codemirror/state";
 
 // src/components/Editor/containerWidget.ts
 import { ViewPlugin, Decoration, WidgetType } from "@codemirror/view";
@@ -88,8 +90,6 @@ function findContainers(docText) {
 }
 
 // src/registry/componentRegistry.tsx
-import { Input, Select } from "antd";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ComponentRegistry = class {
   constructor() {
     this.schemas = /* @__PURE__ */ new Map();
@@ -132,80 +132,6 @@ var ComponentRegistry = class {
   }
 };
 var componentRegistry = new ComponentRegistry();
-componentRegistry.register("linkCard", {
-  name: "linkCard",
-  label: "\u94FE\u63A5\u5361\u7247",
-  fields: [
-    { key: "title", defaultValue: "\u94FE\u63A5\u6807\u9898" },
-    { key: "link", defaultValue: "https://example.com" },
-    { key: "description", defaultValue: "\u94FE\u63A5\u63CF\u8FF0" },
-    { key: "theme", defaultValue: "default" }
-  ],
-  renderDialog: (props, onChange) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { style: { marginBottom: 12 }, children: [
-      /* @__PURE__ */ jsx("div", { style: { marginBottom: 4 }, children: "\u6807\u9898" }),
-      /* @__PURE__ */ jsx(Input, { value: props.title, onChange: (e) => onChange("title", e.target.value) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: { marginBottom: 12 }, children: [
-      /* @__PURE__ */ jsx("div", { style: { marginBottom: 4 }, children: "\u94FE\u63A5" }),
-      /* @__PURE__ */ jsx(Input, { value: props.link, onChange: (e) => onChange("link", e.target.value) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: { marginBottom: 12 }, children: [
-      /* @__PURE__ */ jsx("div", { style: { marginBottom: 4 }, children: "\u63CF\u8FF0" }),
-      /* @__PURE__ */ jsx(Input.TextArea, { rows: 3, value: props.description, onChange: (e) => onChange("description", e.target.value) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("div", { style: { marginBottom: 4 }, children: "\u4E3B\u9898" }),
-      /* @__PURE__ */ jsx(
-        Select,
-        {
-          value: props.theme,
-          onChange: (v) => onChange("theme", v),
-          options: [
-            { label: "\u9ED8\u8BA4", value: "default" },
-            { label: "\u4E3B\u8981", value: "primary" },
-            { label: "\u8B66\u544A", value: "warning" }
-          ]
-        }
-      )
-    ] })
-  ] })
-});
-componentRegistry.register("note", {
-  name: "note",
-  label: "\u6CE8\u91CA",
-  fields: [
-    { key: "type", defaultValue: "info" },
-    { key: "title", defaultValue: "\u6CE8\u610F" },
-    { key: "content", defaultValue: "\u5907\u6CE8\u5185\u5BB9" }
-  ],
-  renderDialog: (props, onChange) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { style: { marginBottom: 12 }, children: [
-      /* @__PURE__ */ jsx("div", { style: { marginBottom: 4 }, children: "\u7C7B\u578B" }),
-      /* @__PURE__ */ jsx(
-        Select,
-        {
-          value: props.type,
-          onChange: (v) => onChange("type", v),
-          options: [
-            { label: "\u4FE1\u606F", value: "info" },
-            { label: "\u63D0\u793A", value: "tip" },
-            { label: "\u8B66\u544A", value: "warning" },
-            { label: "\u5371\u9669", value: "danger" }
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: { marginBottom: 12 }, children: [
-      /* @__PURE__ */ jsx("div", { style: { marginBottom: 4 }, children: "\u6807\u9898" }),
-      /* @__PURE__ */ jsx(Input, { value: props.title, onChange: (e) => onChange("title", e.target.value) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("div", { style: { marginBottom: 4 }, children: "\u5185\u5BB9" }),
-      /* @__PURE__ */ jsx(Input.TextArea, { rows: 3, value: props.content, onChange: (e) => onChange("content", e.target.value) })
-    ] })
-  ] })
-});
 var componentRegistry_default = componentRegistry;
 
 // src/components/Editor/containerWidget.ts
@@ -351,13 +277,151 @@ var containerWidgetPlugin = ViewPlugin.fromClass(
   }
 );
 
+// src/components/Toolbar/buttons.tsx
+function insertAtCursor(view, before, after = "", placeholder = "") {
+  const { from, to } = view.state.selection.main;
+  const selectedText = view.state.doc.sliceString(from, to);
+  const insert = selectedText ? `${before}${selectedText}${after}` : `${before}${placeholder}${after}`;
+  view.dispatch({ changes: { from, to, insert } });
+  if (!selectedText && placeholder) {
+    view.dispatch({ selection: { anchor: from + before.length } });
+  }
+}
+function insertAtLineStart(view, text) {
+  const { from } = view.state.selection.main;
+  const line = view.state.doc.lineAt(from);
+  view.dispatch({ changes: { from: line.from, to: line.from, insert: text } });
+  view.dispatch({ selection: { anchor: line.from + text.length } });
+}
+async function uploadFileToServer(file, uploadConfig) {
+  var _a;
+  if (uploadConfig.onUploadImage) {
+    return uploadConfig.onUploadImage(file);
+  }
+  if (uploadConfig.uploadUrl) {
+    const formData = new FormData();
+    formData.append("file", file);
+    const response = await fetch(uploadConfig.uploadUrl, {
+      method: "POST",
+      body: formData
+    });
+    if (!response.ok) return null;
+    const result = await response.json();
+    if (uploadConfig.onGetUploadUrl) {
+      return uploadConfig.onGetUploadUrl(result);
+    }
+    return ((_a = result.data) == null ? void 0 : _a.path) || null;
+  }
+  return null;
+}
+function isUploadConfigured(uploadConfig) {
+  return !!((uploadConfig == null ? void 0 : uploadConfig.uploadUrl) || (uploadConfig == null ? void 0 : uploadConfig.onUploadImage));
+}
+function uploadImage(view, uploadConfig) {
+  const input = document.createElement("input");
+  input.type = "file";
+  input.accept = "image/*";
+  input.style.display = "none";
+  input.addEventListener("change", async () => {
+    if (!input.files || input.files.length === 0) return;
+    const file = input.files[0];
+    const { from, to } = view.state.selection.main;
+    const selectedText = view.state.doc.sliceString(from, to) || "\u63CF\u8FF0";
+    const url = await uploadFileToServer(file, uploadConfig);
+    if (url) {
+      const insert = `![${selectedText}](${url})`;
+      view.dispatch({ changes: { from, to, insert } });
+    }
+    input.remove();
+  });
+  document.body.appendChild(input);
+  input.click();
+}
+function wrapSelection(view, prefix, suffix) {
+  const { from, to, empty } = view.state.selection.main;
+  if (empty) return;
+  const selected = view.state.doc.sliceString(from, to);
+  view.dispatch({ changes: { from, to, insert: `${prefix}${selected}${suffix}` } });
+}
+function toggleWrap(view, openTag, closeTag) {
+  const { from, to, empty } = view.state.selection.main;
+  const doc = view.state.doc;
+  if (!empty) {
+    const selected = doc.sliceString(from, to);
+    if (selected.startsWith(openTag) && selected.endsWith(closeTag)) {
+      const inner = selected.slice(openTag.length, -closeTag.length);
+      view.dispatch({ changes: { from, to, insert: inner } });
+      return;
+    }
+  }
+  {
+    const cursorPos = empty ? from : to;
+    const line = doc.lineAt(cursorPos);
+    const lineText = doc.sliceString(line.from, line.to);
+    const openIdx = lineText.indexOf(openTag);
+    const closeIdx = lineText.lastIndexOf(closeTag);
+    if (openIdx >= 0 && closeIdx > openIdx) {
+      const absOpen = line.from + openIdx;
+      const absClose = line.from + closeIdx;
+      if (cursorPos >= absOpen + openTag.length && cursorPos <= absClose) {
+        const inner = doc.sliceString(absOpen + openTag.length, absClose);
+        view.dispatch({
+          changes: {
+            from: absOpen,
+            to: absClose + closeTag.length,
+            insert: inner
+          }
+        });
+        return;
+      }
+    }
+  }
+  wrapSelection(view, openTag, closeTag);
+}
+
 // src/components/Editor/codemirrorExtensions.ts
+var uploadConfigFacet = Facet2.define({
+  combine: (values) => values[values.length - 1]
+});
+var messageFacet = Facet2.define({
+  combine: (values) => values[values.length - 1]
+});
+var pasteHandler = EditorView.domEventHandlers({
+  paste: (event, view) => {
+    var _a;
+    const files = (_a = event.clipboardData) == null ? void 0 : _a.files;
+    if (!files) return false;
+    const imageFiles = Array.from(files).filter((f) => f.type.startsWith("image/"));
+    if (imageFiles.length === 0) return false;
+    event.preventDefault();
+    const uploadConfig = view.state.facet(uploadConfigFacet);
+    const showMessage = view.state.facet(messageFacet);
+    if (!isUploadConfigured(uploadConfig)) {
+      showMessage == null ? void 0 : showMessage();
+      return true;
+    }
+    const { from, to } = view.state.selection.main;
+    let offset = 0;
+    for (const file of imageFiles) {
+      uploadFileToServer(file, uploadConfig).then((url) => {
+        if (url) {
+          const name = file.name.replace(/\.[^.]+$/, "");
+          const insert = `![${name}](${url})`;
+          view.dispatch({ changes: { from: from + offset, to: to + offset, insert } });
+          offset += insert.length;
+        }
+      });
+    }
+    return true;
+  }
+});
 var getCodeMirrorExtensions = (opts) => {
   const extensions = [
     markdown(),
     oneDark,
     keymap.of([...defaultKeymap, indentWithTab]),
     EditorView.lineWrapping,
+    pasteHandler,
     EditorView.baseTheme({
       ".cm-scroller": {
         height: "100%",
@@ -402,19 +466,25 @@ var getCodeMirrorExtensions = (opts) => {
   if (opts == null ? void 0 : opts.onEditContainer) {
     extensions.push(containerEditCallback.of(opts.onEditContainer));
   }
+  if (opts == null ? void 0 : opts.uploadConfig) {
+    extensions.push(uploadConfigFacet.of(opts.uploadConfig));
+  }
+  if (opts == null ? void 0 : opts.onMessageNoUploadConfig) {
+    extensions.push(messageFacet.of(opts.onMessageNoUploadConfig));
+  }
   return extensions;
 };
 
 // src/components/Editor/index.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-function Editor({ value, onChange, onScrollReady, onViewReady, onEditContainer }) {
+import { jsx } from "react/jsx-runtime";
+function Editor({ value, onChange, onScrollReady, onViewReady, onEditContainer, uploadConfig, onMessageNoUploadConfig }) {
   const editorRef = useRef(null);
   const viewRef = useRef(null);
   useEffect(() => {
     if (!editorRef.current) return;
     const extensions = [
       basicSetup,
-      ...getCodeMirrorExtensions({ onEditContainer }),
+      ...getCodeMirrorExtensions({ onEditContainer, uploadConfig, onMessageNoUploadConfig }),
       EditorView2.updateListener.of((update) => {
         if (update.docChanged) {
           onChange(update.state.doc.toString());
@@ -447,14 +517,14 @@ function Editor({ value, onChange, onScrollReady, onViewReady, onEditContainer }
       });
     }
   }, [value]);
-  return /* @__PURE__ */ jsx2("div", { ref: editorRef, className: "editor" });
+  return /* @__PURE__ */ jsx("div", { ref: editorRef, className: "editor" });
 }
 
 // src/components/Preview/index.tsx
 import { forwardRef, useEffect as useEffect2 } from "react";
 import RenderMarkdown, { languagesCommon, initHighlighter } from "remons-render-markdown";
 import "remons-render-markdown/dist/index.css";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var Preview = forwardRef(({ content, previewOptions }, ref) => {
   useEffect2(() => {
     initHighlighter({
@@ -462,18 +532,18 @@ var Preview = forwardRef(({ content, previewOptions }, ref) => {
       ...(previewOptions == null ? void 0 : previewOptions.languages) ? previewOptions == null ? void 0 : previewOptions.languages : {}
     });
   }, [previewOptions == null ? void 0 : previewOptions.languages]);
-  return /* @__PURE__ */ jsx3("div", { ref, className: "preview", children: /* @__PURE__ */ jsx3(RenderMarkdown, { content, ...previewOptions }) });
+  return /* @__PURE__ */ jsx2("div", { ref, className: "preview", children: /* @__PURE__ */ jsx2(RenderMarkdown, { content, ...previewOptions }) });
 });
 Preview.displayName = "Preview";
 var Preview_default = Preview;
 
 // src/components/Panel/SplitPanels.tsx
 import { Splitter } from "antd";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 function SplitPanels({ leftPanel, rightPanel }) {
-  return /* @__PURE__ */ jsxs2(Splitter, { className: "split-panels", children: [
-    /* @__PURE__ */ jsx4(Splitter.Panel, { defaultSize: "50%", min: "20%", max: "80%", children: leftPanel }),
-    /* @__PURE__ */ jsx4(Splitter.Panel, { children: rightPanel })
+  return /* @__PURE__ */ jsxs(Splitter, { className: "split-panels", children: [
+    /* @__PURE__ */ jsx3(Splitter.Panel, { defaultSize: "50%", min: "20%", max: "80%", children: leftPanel }),
+    /* @__PURE__ */ jsx3(Splitter.Panel, { children: rightPanel })
   ] });
 }
 
@@ -499,105 +569,10 @@ import {
   BlockOutlined,
   MinusOutlined,
   FieldStringOutlined,
-  FontSizeOutlined,
-  TagsOutlined
+  FontSizeOutlined
 } from "@ant-design/icons";
-
-// src/components/Toolbar/buttons.tsx
-function insertAtCursor(view, before, after = "", placeholder = "") {
-  const { from, to } = view.state.selection.main;
-  const selectedText = view.state.doc.sliceString(from, to);
-  const insert = selectedText ? `${before}${selectedText}${after}` : `${before}${placeholder}${after}`;
-  view.dispatch({ changes: { from, to, insert } });
-  if (!selectedText && placeholder) {
-    view.dispatch({ selection: { anchor: from + before.length } });
-  }
-}
-function insertAtLineStart(view, text) {
-  const { from } = view.state.selection.main;
-  const line = view.state.doc.lineAt(from);
-  view.dispatch({ changes: { from: line.from, to: line.from, insert: text } });
-  view.dispatch({ selection: { anchor: line.from + text.length } });
-}
-async function uploadFileToServer(file) {
-  var _a;
-  const formData = new FormData();
-  formData.append("file", file);
-  const response = await fetch("https://remons.cn:3008/content/uploadMarkdownImg", {
-    method: "POST",
-    body: formData
-  });
-  if (!response.ok) return null;
-  const result = await response.json();
-  if (result.code === 200 && result.success && ((_a = result.data) == null ? void 0 : _a.path)) {
-    return `https://remons.cn:3008${result.data.path}`;
-  }
-  return null;
-}
-function uploadImage(view) {
-  const input = document.createElement("input");
-  input.type = "file";
-  input.accept = "image/*";
-  input.style.display = "none";
-  input.addEventListener("change", async () => {
-    if (!input.files || input.files.length === 0) return;
-    const file = input.files[0];
-    const { from, to } = view.state.selection.main;
-    const selectedText = view.state.doc.sliceString(from, to) || "\u63CF\u8FF0";
-    const url = await uploadFileToServer(file);
-    if (url) {
-      const insert = `![${selectedText}](${url})`;
-      view.dispatch({ changes: { from, to, insert } });
-    }
-    input.remove();
-  });
-  document.body.appendChild(input);
-  input.click();
-}
-function wrapSelection(view, prefix, suffix) {
-  const { from, to, empty } = view.state.selection.main;
-  if (empty) return;
-  const selected = view.state.doc.sliceString(from, to);
-  view.dispatch({ changes: { from, to, insert: `${prefix}${selected}${suffix}` } });
-}
-function toggleWrap(view, openTag, closeTag) {
-  const { from, to, empty } = view.state.selection.main;
-  const doc = view.state.doc;
-  if (!empty) {
-    const selected = doc.sliceString(from, to);
-    if (selected.startsWith(openTag) && selected.endsWith(closeTag)) {
-      const inner = selected.slice(openTag.length, -closeTag.length);
-      view.dispatch({ changes: { from, to, insert: inner } });
-      return;
-    }
-  }
-  {
-    const cursorPos = empty ? from : to;
-    const line = doc.lineAt(cursorPos);
-    const lineText = doc.sliceString(line.from, line.to);
-    const openIdx = lineText.indexOf(openTag);
-    const closeIdx = lineText.lastIndexOf(closeTag);
-    if (openIdx >= 0 && closeIdx > openIdx) {
-      const absOpen = line.from + openIdx;
-      const absClose = line.from + closeIdx;
-      if (cursorPos >= absOpen + openTag.length && cursorPos <= absClose) {
-        const inner = doc.sliceString(absOpen + openTag.length, absClose);
-        view.dispatch({
-          changes: {
-            from: absOpen,
-            to: absClose + closeTag.length,
-            insert: inner
-          }
-        });
-        return;
-      }
-    }
-  }
-  wrapSelection(view, openTag, closeTag);
-}
-
-// src/components/Toolbar/config.ts
-function createToolbarConfig() {
+function createToolbarConfig(options) {
+  const hasUploadConfig = isUploadConfigured(options);
   return [
     {
       id: "heading",
@@ -622,7 +597,14 @@ function createToolbarConfig() {
     { id: "ol", label: "\u6709\u5E8F\u5217\u8868", icon: OrderedListOutlined, handler: (v) => insertAtLineStart(v, "1. ") },
     { separatorBefore: true },
     { id: "link", label: "\u94FE\u63A5", icon: LinkOutlined, handler: (v) => insertAtCursor(v, "[", "](url)", "\u6587\u672C") },
-    { id: "image", label: "\u56FE\u7247", icon: PictureOutlined, handler: (v) => uploadImage(v) },
+    // 图片按钮：未配置上传时禁用并提示
+    {
+      id: "image",
+      label: hasUploadConfig ? "\u56FE\u7247" : "\u8BF7\u914D\u7F6E\u56FE\u7247\u4E0A\u4F20\u5730\u5740",
+      icon: PictureOutlined,
+      disabled: !hasUploadConfig,
+      handler: hasUploadConfig ? (v) => uploadImage(v, { uploadUrl: options == null ? void 0 : options.uploadUrl, onUploadImage: options == null ? void 0 : options.onUploadImage }) : void 0
+    },
     { separatorBefore: true },
     { id: "code", label: "\u884C\u5185\u4EE3\u7801", icon: FieldStringOutlined, handler: (v) => wrapSelection(v, "`", "`") },
     {
@@ -637,7 +619,6 @@ function createToolbarConfig() {
       }
     },
     { id: "quote", label: "\u5F15\u7528", icon: BlockOutlined, handler: (v) => insertAtLineStart(v, "> ") },
-    { id: "textContainer", label: "\u6587\u5B57\u5BB9\u5668", icon: TagsOutlined, handler: (v) => toggleWrap(v, "<text-container>", "</text-container>") },
     {
       id: "hr",
       label: "\u5206\u5272\u7EBF",
@@ -651,13 +632,20 @@ function createToolbarConfig() {
 }
 
 // src/components/Toolbar/hooks/useToolbar.ts
-function useToolbar(editorView, extraItems) {
+function useToolbar(editorView, options) {
+  const { extraItems, uploadConfig } = options || {};
   const config = useMemo(() => {
-    const base = createToolbarConfig();
-    return extraItems ? [...base, { separatorBefore: true }, ...extraItems] : base;
-  }, [extraItems]);
+    const base = createToolbarConfig(uploadConfig);
+    return extraItems ? [...base, ...extraItems] : base;
+  }, [extraItems, uploadConfig]);
   const handleClick = useCallback((button) => {
-    if (button.handler && editorView) {
+    if (!editorView) return;
+    if (button.wrapTags) {
+      const [openTag, closeTag] = button.wrapTags;
+      toggleWrap(editorView, openTag, closeTag);
+      return;
+    }
+    if (button.handler) {
       editorView.focus();
       button.handler(editorView, editorView.state);
     }
@@ -666,15 +654,15 @@ function useToolbar(editorView, extraItems) {
 }
 
 // src/components/Toolbar/renderers/ToolbarItemRenderer.tsx
-import { Button, Dropdown } from "antd";
+import { Button, Dropdown, Tooltip } from "antd";
 import { DownOutlined } from "@ant-design/icons";
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function ToolbarItemRenderer({ item, onClick }) {
   const Icon = item.icon;
   if (item.children && item.children.length > 0) {
-    return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-      item.separatorBefore && /* @__PURE__ */ jsx5("div", { className: "toolbar-separator" }),
-      /* @__PURE__ */ jsx5("div", { className: "toolbar-group", children: /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsxs2(Fragment, { children: [
+      item.separatorBefore && /* @__PURE__ */ jsx4("div", { className: "toolbar-separator" }),
+      /* @__PURE__ */ jsx4("div", { className: "toolbar-group", children: /* @__PURE__ */ jsx4(Tooltip, { title: item.label, children: /* @__PURE__ */ jsx4(
         Dropdown,
         {
           menu: {
@@ -683,10 +671,10 @@ function ToolbarItemRenderer({ item, onClick }) {
               return {
                 type: "item",
                 key: (_a = child.id) != null ? _a : "",
-                label: /* @__PURE__ */ jsxs3("span", { onClick: () => onClick(child), children: [
+                label: /* @__PURE__ */ jsxs2("span", { onClick: () => onClick(child), children: [
                   child.icon && (() => {
                     const ChildIcon = child.icon;
-                    return /* @__PURE__ */ jsx5(ChildIcon, {});
+                    return /* @__PURE__ */ jsx4(ChildIcon, {});
                   })(),
                   " ",
                   child.label
@@ -695,28 +683,29 @@ function ToolbarItemRenderer({ item, onClick }) {
             })
           },
           placement: "bottomLeft",
-          children: /* @__PURE__ */ jsxs3(Button, { className: "toolbar-button", type: "text", size: "small", title: item.label, children: [
-            /* @__PURE__ */ jsx5(Icon, {}),
-            /* @__PURE__ */ jsx5(DownOutlined, { style: { marginLeft: 2, fontSize: 10 } })
+          children: /* @__PURE__ */ jsxs2(Button, { className: "toolbar-button", type: "text", size: "small", children: [
+            /* @__PURE__ */ jsx4(Icon, {}),
+            /* @__PURE__ */ jsx4(DownOutlined, { style: { marginLeft: 2, fontSize: 10 } })
           ] })
         }
-      ) })
+      ) }) })
     ] });
   }
-  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    item.separatorBefore && /* @__PURE__ */ jsx5("div", { className: "toolbar-separator" }),
-    /* @__PURE__ */ jsx5("div", { className: "toolbar-group", children: /* @__PURE__ */ jsx5(
+  const isDisabled = item.disabled;
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    item.separatorBefore && /* @__PURE__ */ jsx4("div", { className: "toolbar-separator" }),
+    /* @__PURE__ */ jsx4("div", { className: "toolbar-group", children: /* @__PURE__ */ jsx4(Tooltip, { title: item.label, children: /* @__PURE__ */ jsx4(
       Button,
       {
         id: item.id,
         className: "toolbar-button",
         type: "text",
         size: "small",
-        title: item.label,
-        onClick: () => onClick(item),
-        children: /* @__PURE__ */ jsx5(Icon, {})
+        disabled: isDisabled,
+        onClick: () => !isDisabled && onClick(item),
+        children: /* @__PURE__ */ jsx4(Icon, {})
       }
-    ) })
+    ) }) })
   ] });
 }
 
@@ -732,24 +721,27 @@ import { useState, useRef as useRef2, useEffect as useEffect3, useCallback as us
 var index_module_default = {};
 
 // src/components/Toolbar/renderers/TablePicker/index.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-var MAX_ROW = 12;
-var MAX_COL = 12;
-var REFRESH_TIME = 200;
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var MAX_ROW = 8;
+var MAX_COL = 8;
 function TablePicker({ onSelect }) {
   const [hoverSize, setHoverSize] = useState({ row: 0, col: 0 });
-  const [prevHoverSize, setPrevHoverSize] = useState({ row: 0, col: 0 });
   const [confirmedSize, setConfirmedSize] = useState({ row: 0, col: 0 });
   const maxColRef = useRef2(0);
+  const prevRowRef = useRef2(0);
   const timerIdRef = useRef2(null);
   const refreshTimerRef = useRef2(null);
   const commitRef = useRef2(null);
-  const clearTimer = useCallback2((flushFn) => {
+  const clearTimer = useCallback2(() => {
     if (timerIdRef.current) {
+      clearTimeout(timerIdRef.current);
       timerIdRef.current = null;
     }
-    if (flushFn && maxColRef.current > 0) {
-      timerIdRef.current = setTimeout(flushFn, REFRESH_TIME);
+  }, []);
+  const clearFlash = useCallback2(() => {
+    if (refreshTimerRef.current) {
+      clearInterval(refreshTimerRef.current);
+      refreshTimerRef.current = null;
     }
   }, []);
   useEffect3(
@@ -760,25 +752,21 @@ function TablePicker({ onSelect }) {
     []
   );
   function extend(col, row) {
+    if (row < prevRowRef.current || col < maxColRef.current) {
+      maxColRef.current = 0;
+    }
     if (col > maxColRef.current) {
       maxColRef.current = col;
-      setHoverSize({ row, col });
-      setConfirmedSize({ row, col });
-    } else {
-      setHoverSize({ row, col });
-      if (row !== confirmedSize.row) {
-        setConfirmedSize({ row, col: maxColRef.current });
-      }
-      if (row === 1) {
-        commitRef.current = { cols: col, rows: 1 };
-        setConfirmedSize({ row: 1, col });
-      }
+    }
+    setHoverSize({ row, col });
+    setConfirmedSize({ row, col: maxColRef.current });
+    if (row === 1) {
+      commitRef.current = { cols: maxColRef.current, rows: 1 };
     }
   }
   function flash(col, dir, limit, finalCallback) {
     let current = dir === 1 ? 1 : limit;
     const step = dir === 1 ? 1 : -1;
-    let timer = 0;
     refreshTimerRef.current = setInterval(() => {
       setHoverSize({ row: current, col });
       if (current > confirmedSize.row || dir === -1) {
@@ -787,45 +775,43 @@ function TablePicker({ onSelect }) {
       current += step;
       if (dir === 1 && current > limit || dir === -1 && current < 1) {
         clearInterval(refreshTimerRef.current);
-        setHoverSize({ row: current - step, col });
-        finalCallback(col, current - step);
+        refreshTimerRef.current = null;
+        const finalRow = current - step;
+        setHoverSize({ row: finalRow, col });
+        finalCallback(col, finalRow);
       }
     }, 50);
-    clearTimeout(timer);
-    return () => {
-      clearInterval(refreshTimerRef.current);
-    };
   }
   function onCellEnterCheck(index) {
     clearTimer();
+    clearFlash();
     const row = Math.floor(index / MAX_COL) + 1;
     const col = index % MAX_COL + 1;
-    const isDown = row > hoverSize.row;
-    if (Math.abs(row - hoverSize.row) <= 1) {
+    const prevRow = prevRowRef.current;
+    const isJump = Math.abs(row - prevRow) > 1;
+    const isDown = row > prevRow;
+    prevRowRef.current = row;
+    if (!isJump) {
       extend(col, row);
-    } else {
-      if (isDown && (col > maxColRef.current || maxColRef.current >= MAX_COL)) {
+    } else if (isDown) {
+      if (col > maxColRef.current || maxColRef.current >= MAX_COL) {
         const finalRow = Math.min(row, MAX_ROW);
         flash(col, 1, finalRow, (c, r) => {
           setConfirmedSize({ row: r, col: c });
         });
-      } else if (!isDown) {
-        flash(col, -1, row, (c, r) => {
-          setConfirmedSize({ row: r, col: c });
-          if (r === 1) {
-            commitRef.current = { cols: Math.min(MAX_COL, col), rows: 1 };
-            setConfirmedSize({ row: 1, col: Math.min(MAX_COL, col) });
-          }
-        });
-      }
-    }
-    if (col >= MAX_COL && row >= prevHoverSize.row) {
-      if (row !== prevHoverSize.row) {
-        maxColRef.current = 0;
-        setPrevHoverSize({ row: 0, col: 0 });
+      } else {
+        extend(col, row);
       }
+    } else {
+      maxColRef.current = 0;
+      flash(col, -1, row, (c, r) => {
+        setConfirmedSize({ row: r, col: c });
+        if (r === 1) {
+          commitRef.current = { cols: Math.min(MAX_COL, col), rows: 1 };
+          setConfirmedSize({ row: 1, col: Math.min(MAX_COL, col) });
+        }
+      });
     }
-    setPrevHoverSize({ row, col });
   }
   function onMouseDown() {
     const size = commitRef.current || { cols: maxColRef.current, rows: confirmedSize.row };
@@ -833,13 +819,13 @@ function TablePicker({ onSelect }) {
       onSelect(size);
     }
   }
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       className: index_module_default.container,
       onMouseDown,
       children: [
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx5(
           "div",
           {
             className: index_module_default.grid,
@@ -848,7 +834,7 @@ function TablePicker({ onSelect }) {
               const row = Math.floor(i / MAX_COL) + 1;
               const col = i % MAX_COL + 1;
               const isSelected = row <= hoverSize.row && col <= maxColRef.current;
-              return /* @__PURE__ */ jsx6(
+              return /* @__PURE__ */ jsx5(
                 "div",
                 {
                   className: `${index_module_default.cell} ${isSelected ? index_module_default.cellActive : ""}`,
@@ -859,7 +845,7 @@ function TablePicker({ onSelect }) {
             })
           }
         ),
-        /* @__PURE__ */ jsxs4("div", { className: index_module_default.label, children: [
+        /* @__PURE__ */ jsxs3("div", { className: index_module_default.label, children: [
           hoverSize.row,
           " x ",
           maxColRef.current || 1
@@ -870,7 +856,7 @@ function TablePicker({ onSelect }) {
 }
 
 // src/components/Toolbar/renderers/TablePicker/TableDropdown.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function TableDropdown({ editorView }) {
   const [open, setOpen] = React.useState(false);
   const openCountRef = useRef3(0);
@@ -889,7 +875,7 @@ ${dataRows}
     const { from } = editorView.state.selection.main;
     editorView.dispatch({ changes: { from, insert: table } });
   }, [editorView]);
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     Dropdown2,
     {
       trigger: ["click"],
@@ -897,7 +883,7 @@ ${dataRows}
       onOpenChange: setOpen,
       popupRender: () => {
         openCountRef.current++;
-        return /* @__PURE__ */ jsx7("div", { style: { padding: 4 }, onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx7(
+        return /* @__PURE__ */ jsx6("div", { style: { padding: 4 }, onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx6(
           TablePicker,
           {
             onSelect: (size) => {
@@ -909,44 +895,41 @@ ${dataRows}
         ) });
       },
       placement: "bottomLeft",
-      children: /* @__PURE__ */ jsx7(Button2, { className: "toolbar-button", type: "text", size: "small", title: "\u8868\u683C", children: /* @__PURE__ */ jsx7(TableOutlined, {}) })
+      children: /* @__PURE__ */ jsx6(Button2, { className: "toolbar-button", type: "text", size: "small", title: "\u8868\u683C", children: /* @__PURE__ */ jsx6(TableOutlined, {}) })
     }
   );
 }
 
 // src/components/Toolbar/index.tsx
-import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
-function Toolbar({ editorView, fullscreen, onToggleFullscreen, extraItems }) {
-  const { config, handleClick } = useToolbar(editorView, extraItems);
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function Toolbar({ editorView, fullscreen = true, onToggleFullscreen, extraItems, uploadConfig }) {
+  const { config, handleClick } = useToolbar(editorView, { extraItems, uploadConfig });
   const renderFullscreen = useCallback4(() => {
     if (!onToggleFullscreen) return null;
     const Icon = fullscreen ? FullscreenExitOutlined : FullscreenOutlined;
-    return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-      /* @__PURE__ */ jsx8("div", { className: "toolbar-separator" }),
-      /* @__PURE__ */ jsx8(
-        Button3,
-        {
-          className: "toolbar-button",
-          type: "text",
-          size: "small",
-          title: fullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F",
-          onClick: () => {
-            onToggleFullscreen();
-          },
-          children: /* @__PURE__ */ jsx8(Icon, {})
-        }
-      )
-    ] });
+    return /* @__PURE__ */ jsx7(
+      Button3,
+      {
+        className: "toolbar-button",
+        type: "text",
+        size: "small",
+        title: fullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F",
+        onClick: () => {
+          onToggleFullscreen();
+        },
+        children: /* @__PURE__ */ jsx7(Icon, {})
+      }
+    );
   }, [fullscreen, onToggleFullscreen]);
   function isSeparator(item) {
     return !!(!item.id && item.separatorBefore);
   }
-  return /* @__PURE__ */ jsxs5("div", { className: "toolbar", children: [
+  return /* @__PURE__ */ jsxs4("div", { className: "toolbar", children: [
     config.map((item, idx) => {
       if (isSeparator(item)) {
-        return /* @__PURE__ */ jsx8("div", { className: "toolbar-separator" }, `sep-${idx}`);
+        return /* @__PURE__ */ jsx7("div", { className: "toolbar-separator" }, `sep-${idx}`);
       }
-      return /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx7(
         ToolbarItemRenderer,
         {
           item,
@@ -955,8 +938,7 @@ function Toolbar({ editorView, fullscreen, onToggleFullscreen, extraItems }) {
         item.id
       );
     }),
-    /* @__PURE__ */ jsx8("div", { className: "toolbar-separator" }),
-    /* @__PURE__ */ jsx8(TableDropdown, { editorView }),
+    /* @__PURE__ */ jsx7(TableDropdown, { editorView }),
     renderFullscreen()
   ] });
 }
@@ -964,7 +946,7 @@ function Toolbar({ editorView, fullscreen, onToggleFullscreen, extraItems }) {
 // src/components/Dialog/EditDialog.tsx
 import { useState as useState2, useMemo as useMemo2 } from "react";
 import { Modal } from "antd";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function EditDialog({ visible, typeName, currentProps, onSave, onClose }) {
   const schema = componentRegistry_default.get(typeName);
   const [formProps, setFormProps] = useState2({});
@@ -992,7 +974,7 @@ function EditDialog({ visible, typeName, currentProps, onSave, onClose }) {
   if (!schema) {
     return null;
   }
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx8(
     Modal,
     {
       title: `${schema.label} \u5C5E\u6027\u7F16\u8F91`,
@@ -1033,36 +1015,11 @@ ${propsLine}
 
 // src/MarkdownEditor.tsx
 import { ReadOutlined } from "@ant-design/icons";
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
-var MarkdownEditor_default = forwardRef2(function MarkdownEditor({
-  defaultValue = "",
-  value,
-  onChange,
-  showPreview = true,
-  fullscreen: fullscreenProp = false,
-  previewOptions
-}, ref) {
-  const [content, setContent] = useState3(value != null ? value : defaultValue);
-  const [editorView, setEditorView] = useState3(null);
-  const scrollDOMRef = useRef4(null);
-  const previewElRef = useRef4(null);
+
+// src/hooks/useFullscreen.ts
+import { useState as useState3, useEffect as useEffect4, useCallback as useCallback5 } from "react";
+function useFullscreen() {
   const [fullscreen, setFullscreen] = useState3(false);
-  const [dialogVisible, setDialogVisible] = useState3(false);
-  const [dialogTypeName, setDialogTypeName] = useState3("");
-  const [dialogProps, setDialogProps] = useState3({});
-  const [dialogPropsRange, setDialogPropsRange] = useState3([0, 0]);
-  useEffect4(() => {
-    if (value !== void 0) {
-      setContent(value);
-    }
-  }, [value]);
-  const internalSetContent = useCallback5((newContent) => {
-    setContent(newContent);
-    onChange == null ? void 0 : onChange(newContent);
-  }, [onChange]);
-  useImperativeHandle(ref, () => ({
-    getContent: () => content
-  }), [content]);
   const toggleFullscreen = useCallback5(() => {
     if (document.fullscreenElement) {
       document.exitFullscreen().catch((e) => {
@@ -1089,40 +1046,29 @@ var MarkdownEditor_default = forwardRef2(function MarkdownEditor({
       document.removeEventListener("webkitfullscreenchange", handleFullscreenChange);
     };
   }, []);
-  const extraToolbarItems = componentRegistry_default.getAll().map((schema) => {
-    var _a, _b;
-    const defaultProps = {};
-    for (const field of schema.fields) {
-      defaultProps[field.key] = (_a = field.defaultValue) != null ? _a : "";
-    }
-    const iconNode = (_b = schema.icon) != null ? _b : /* @__PURE__ */ jsx10(ReadOutlined, {});
-    return {
-      id: `container-${schema.name}`,
-      label: schema.label,
-      icon: () => iconNode,
-      handler: (view, _state) => insertContainer(view, schema.name, defaultProps)
-    };
-  });
-  const handleScrollReady = useCallback5((scrollDOM) => {
-    scrollDOMRef.current = scrollDOM;
-  }, []);
-  useEffect4(() => {
-    const source = scrollDOMRef.current;
-    const target = previewElRef.current;
+  return { fullscreen, toggleFullscreen };
+}
+
+// src/hooks/useScrollSync.ts
+import { useEffect as useEffect5, useRef as useRef4 } from "react";
+function useScrollSync(sourceRef, targetRef) {
+  const rafIdRef = useRef4(null);
+  useEffect5(() => {
+    const source = sourceRef.current;
+    const target = targetRef.current;
     if (!source || !target) return;
-    let rafId = null;
     const listener = () => {
-      if (rafId) return;
-      rafId = requestAnimationFrame(() => {
-        const s = scrollDOMRef.current;
-        const t = previewElRef.current;
+      if (rafIdRef.current) return;
+      rafIdRef.current = requestAnimationFrame(() => {
+        const s = sourceRef.current;
+        const t = targetRef.current;
         if (!s || !t) {
-          rafId = null;
+          rafIdRef.current = null;
           return;
         }
         const sourceScrollHeight = s.scrollHeight - s.clientHeight;
         if (sourceScrollHeight <= 0) {
-          rafId = null;
+          rafIdRef.current = null;
           return;
         }
         const ratio = s.scrollTop / sourceScrollHeight;
@@ -1130,60 +1076,115 @@ var MarkdownEditor_default = forwardRef2(function MarkdownEditor({
         if (targetScrollHeight > 0) {
           t.scrollTop = ratio * targetScrollHeight;
         }
-        rafId = null;
+        rafIdRef.current = null;
       });
     };
     source.addEventListener("scroll", listener, { passive: true });
     return () => {
       source.removeEventListener("scroll", listener);
-      if (rafId) cancelAnimationFrame(rafId);
+      if (rafIdRef.current) cancelAnimationFrame(rafIdRef.current);
+    };
+  }, [sourceRef, targetRef]);
+}
+
+// src/MarkdownEditor.tsx
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var MarkdownEditor_default = forwardRef2(function MarkdownEditor({
+  defaultValue = "",
+  value,
+  onChange,
+  showPreview = true,
+  fullscreen: fullscreenProp = false,
+  previewOptions,
+  uploadConfig
+}, ref) {
+  const [content, setContent] = useState4(value != null ? value : defaultValue);
+  const [editorView, setEditorView] = useState4(null);
+  const scrollDOMRef = useRef5(null);
+  const previewElRef = useRef5(null);
+  const { fullscreen, toggleFullscreen } = useFullscreen();
+  useScrollSync(scrollDOMRef, previewElRef);
+  const [dialogVisible, setDialogVisible] = useState4(false);
+  const [dialogTypeName, setDialogTypeName] = useState4("");
+  const [dialogProps, setDialogProps] = useState4({});
+  const [dialogPropsRange, setDialogPropsRange] = useState4([0, 0]);
+  useEffect6(() => {
+    if (value !== void 0) {
+      setContent(value);
+    }
+  }, [value]);
+  const internalSetContent = useCallback6((newContent) => {
+    setContent(newContent);
+    onChange == null ? void 0 : onChange(newContent);
+  }, [onChange]);
+  useImperativeHandle(ref, () => ({
+    getContent: () => content
+  }), [content]);
+  const extraToolbarItems = componentRegistry_default.getAll().map((schema) => {
+    var _a, _b, _c;
+    const defaultProps = {};
+    for (const field of (_a = schema == null ? void 0 : schema.fields) != null ? _a : []) {
+      defaultProps[field.key] = (_b = field.defaultValue) != null ? _b : "";
+    }
+    const iconNode = (_c = schema.icon) != null ? _c : /* @__PURE__ */ jsx9(ReadOutlined, {});
+    return {
+      id: `container-${schema.name}`,
+      label: schema.label,
+      icon: () => iconNode,
+      handler: (view, _state) => insertContainer(view, schema.name, defaultProps)
     };
-  }, [previewElRef.current]);
-  const handlePreviewRef = useCallback5((node) => {
+  });
+  const handleScrollReady = useCallback6((scrollDOM) => {
+    scrollDOMRef.current = scrollDOM;
+  }, []);
+  const handlePreviewRef = useCallback6((node) => {
     previewElRef.current = node;
   }, []);
-  const handleViewReady = useCallback5((view) => {
+  const handleViewReady = useCallback6((view) => {
     setEditorView(view);
   }, []);
-  const handleEditContainer = useCallback5((_view, typeName, propsLineFrom, propsLineTo, currentProps) => {
+  const handleEditContainer = useCallback6((_view, typeName, propsLineFrom, propsLineTo, currentProps) => {
     setDialogTypeName(typeName);
     setDialogProps({ ...currentProps });
     setDialogPropsRange([propsLineFrom, propsLineTo]);
     setDialogVisible(true);
   }, []);
-  const handleDialogSave = useCallback5((newProps) => {
+  const handleDialogSave = useCallback6((newProps) => {
     setDialogVisible(false);
     if (editorView) {
       updateContainerProps(editorView, dialogPropsRange[0], dialogPropsRange[1], newProps);
     }
   }, [editorView, dialogPropsRange]);
-  const handleDialogClose = useCallback5(() => {
+  const handleDialogClose = useCallback6(() => {
     setDialogVisible(false);
   }, []);
-  return /* @__PURE__ */ jsxs6("div", { className: fullscreen ? "app fullscreen" : "app", children: [
-    /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs5("div", { className: fullscreen ? "app fullscreen" : "app", children: [
+    /* @__PURE__ */ jsx9(
       Toolbar,
       {
         editorView,
         fullscreen,
         onToggleFullscreen: fullscreenProp ? toggleFullscreen : void 0,
-        extraItems: extraToolbarItems
+        extraItems: extraToolbarItems,
+        uploadConfig
       }
     ),
-    showPreview ? /* @__PURE__ */ jsx10(
+    showPreview ? /* @__PURE__ */ jsx9(
       SplitPanels,
       {
-        leftPanel: /* @__PURE__ */ jsx10(
+        leftPanel: /* @__PURE__ */ jsx9(
           Editor,
           {
             value: content,
             onChange: internalSetContent,
             onScrollReady: handleScrollReady,
             onViewReady: handleViewReady,
-            onEditContainer: handleEditContainer
+            onEditContainer: handleEditContainer,
+            uploadConfig,
+            onMessageNoUploadConfig: () => message.warning("\u8BF7\u5148\u914D\u7F6E\u56FE\u7247\u4E0A\u4F20\u529F\u80FD")
           }
         ),
-        rightPanel: /* @__PURE__ */ jsx10(
+        rightPanel: /* @__PURE__ */ jsx9(
           Preview_default,
           {
             content,
@@ -1192,17 +1193,19 @@ var MarkdownEditor_default = forwardRef2(function MarkdownEditor({
           }
         )
       }
-    ) : /* @__PURE__ */ jsx10(
+    ) : /* @__PURE__ */ jsx9(
       Editor,
       {
         value: content,
         onChange: internalSetContent,
         onScrollReady: handleScrollReady,
         onViewReady: handleViewReady,
-        onEditContainer: handleEditContainer
+        onEditContainer: handleEditContainer,
+        uploadConfig,
+        onMessageNoUploadConfig: () => message.warning("\u8BF7\u5148\u914D\u7F6E\u56FE\u7247\u4E0A\u4F20\u529F\u80FD")
       }
     ),
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx9(
       EditDialog,
       {
         visible: dialogVisible,
@@ -1216,10 +1219,10 @@ var MarkdownEditor_default = forwardRef2(function MarkdownEditor({
 });
 
 // src/hooks/useRegisterToolbar.ts
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect7 } from "react";
 function useRegisterToolbar(schemas) {
   const schemaList = Array.isArray(schemas) ? schemas : [schemas];
-  useEffect5(() => {
+  useEffect7(() => {
     schemaList.forEach((schema) => {
       componentRegistry_default.register(schema.name, schema);
     });