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

package/dist/index.cjs

@@ -35,18 +35,20 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/MarkdownEditor.tsx
-var import_react8 = require("react");
+var import_react10 = require("react");
+var import_antd6 = require("antd");
 
 // src/components/Editor/index.tsx
 var import_react = require("react");
 var import_codemirror = require("codemirror");
-var import_state2 = require("@codemirror/state");
+var import_state3 = require("@codemirror/state");
 
 // src/components/Editor/codemirrorExtensions.ts
 var import_view2 = require("@codemirror/view");
 var import_commands = require("@codemirror/commands");
 var import_lang_markdown = require("@codemirror/lang-markdown");
 var import_theme_one_dark = require("@codemirror/theme-one-dark");
+var import_state2 = require("@codemirror/state");
 
 // src/components/Editor/containerWidget.ts
 var import_view = require("@codemirror/view");
@@ -124,8 +126,6 @@ function findContainers(docText) {
 }
 
 // src/registry/componentRegistry.tsx
-var import_antd = require("antd");
-var import_jsx_runtime = require("react/jsx-runtime");
 var ComponentRegistry = class {
   constructor() {
     this.schemas = /* @__PURE__ */ new Map();
@@ -168,80 +168,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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginBottom: 12 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginBottom: 4 }, children: "\u6807\u9898" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Input, { value: props.title, onChange: (e) => onChange("title", e.target.value) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginBottom: 12 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginBottom: 4 }, children: "\u94FE\u63A5" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Input, { value: props.link, onChange: (e) => onChange("link", e.target.value) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginBottom: 12 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginBottom: 4 }, children: "\u63CF\u8FF0" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Input.TextArea, { rows: 3, value: props.description, onChange: (e) => onChange("description", e.target.value) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginBottom: 4 }, children: "\u4E3B\u9898" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_antd.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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginBottom: 12 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginBottom: 4 }, children: "\u7C7B\u578B" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_antd.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__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginBottom: 12 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginBottom: 4 }, children: "\u6807\u9898" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Input, { value: props.title, onChange: (e) => onChange("title", e.target.value) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginBottom: 4 }, children: "\u5185\u5BB9" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Input.TextArea, { rows: 3, value: props.content, onChange: (e) => onChange("content", e.target.value) })
-    ] })
-  ] })
-});
 var componentRegistry_default = componentRegistry;
 
 // src/components/Editor/containerWidget.ts
@@ -387,13 +313,151 @@ var containerWidgetPlugin = import_view.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 = import_state2.Facet.define({
+  combine: (values) => values[values.length - 1]
+});
+var messageFacet = import_state2.Facet.define({
+  combine: (values) => values[values.length - 1]
+});
+var pasteHandler = import_view2.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 = [
     (0, import_lang_markdown.markdown)(),
     import_theme_one_dark.oneDark,
     import_view2.keymap.of([...import_commands.defaultKeymap, import_commands.indentWithTab]),
     import_view2.EditorView.lineWrapping,
+    pasteHandler,
     import_view2.EditorView.baseTheme({
       ".cm-scroller": {
         height: "100%",
@@ -438,26 +502,32 @@ 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
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function Editor({ value, onChange, onScrollReady, onViewReady, onEditContainer }) {
+var import_jsx_runtime = require("react/jsx-runtime");
+function Editor({ value, onChange, onScrollReady, onViewReady, onEditContainer, uploadConfig, onMessageNoUploadConfig }) {
   const editorRef = (0, import_react.useRef)(null);
   const viewRef = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => {
     if (!editorRef.current) return;
     const extensions = [
       import_codemirror.basicSetup,
-      ...getCodeMirrorExtensions({ onEditContainer }),
+      ...getCodeMirrorExtensions({ onEditContainer, uploadConfig, onMessageNoUploadConfig }),
       import_codemirror.EditorView.updateListener.of((update) => {
         if (update.docChanged) {
           onChange(update.state.doc.toString());
         }
       })
     ];
-    const state = import_state2.EditorState.create({
+    const state = import_state3.EditorState.create({
       doc: value,
       extensions
     });
@@ -483,36 +553,39 @@ function Editor({ value, onChange, onScrollReady, onViewReady, onEditContainer }
       });
     }
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: editorRef, className: "editor" });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: editorRef, className: "editor" });
 }
 
 // src/components/Preview/index.tsx
 var import_react2 = require("react");
-var import_remons_markdown_plugins = require("remons-markdown-plugins");
 var import_remons_render_markdown = __toESM(require("remons-render-markdown"), 1);
-var import_style = require("remons-markdown-plugins/style.css");
 var import_dist = require("remons-render-markdown/dist/index.css");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-(0, import_remons_render_markdown.initHighlighter)(import_remons_render_markdown.languagesCommon);
-var Preview = (0, import_react2.forwardRef)(({ content }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref, className: "preview", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_remons_render_markdown.default, { content, isSlotMermaid: true, excludedSelectors: import_remons_markdown_plugins.excludedSelectors, customRenderers: [(md) => md.use(import_remons_markdown_plugins.registerAll)] }) });
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Preview = (0, import_react2.forwardRef)(({ content, previewOptions }, ref) => {
+  (0, import_react2.useEffect)(() => {
+    (0, import_remons_render_markdown.initHighlighter)({
+      ...import_remons_render_markdown.languagesCommon,
+      ...(previewOptions == null ? void 0 : previewOptions.languages) ? previewOptions == null ? void 0 : previewOptions.languages : {}
+    });
+  }, [previewOptions == null ? void 0 : previewOptions.languages]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, className: "preview", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_remons_render_markdown.default, { content, ...previewOptions }) });
 });
 Preview.displayName = "Preview";
 var Preview_default = Preview;
 
 // src/components/Panel/SplitPanels.tsx
-var import_antd2 = require("antd");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_antd = require("antd");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function SplitPanels({ leftPanel, rightPanel }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_antd2.Splitter, { className: "split-panels", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_antd2.Splitter.Panel, { defaultSize: "50%", min: "20%", max: "80%", children: leftPanel }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_antd2.Splitter.Panel, { children: rightPanel })
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_antd.Splitter, { className: "split-panels", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_antd.Splitter.Panel, { defaultSize: "50%", min: "20%", max: "80%", children: leftPanel }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_antd.Splitter.Panel, { children: rightPanel })
   ] });
 }
 
 // src/components/Toolbar/index.tsx
 var import_react6 = require("react");
-var import_antd5 = require("antd");
+var import_antd4 = require("antd");
 var import_icons4 = require("@ant-design/icons");
 
 // src/components/Toolbar/hooks/useToolbar.ts
@@ -520,102 +593,8 @@ var import_react3 = require("react");
 
 // src/components/Toolbar/config.ts
 var import_icons = require("@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",
@@ -640,7 +619,14 @@ function createToolbarConfig() {
     { id: "ol", label: "\u6709\u5E8F\u5217\u8868", icon: import_icons.OrderedListOutlined, handler: (v) => insertAtLineStart(v, "1. ") },
     { separatorBefore: true },
     { id: "link", label: "\u94FE\u63A5", icon: import_icons.LinkOutlined, handler: (v) => insertAtCursor(v, "[", "](url)", "\u6587\u672C") },
-    { id: "image", label: "\u56FE\u7247", icon: import_icons.PictureOutlined, handler: (v) => uploadImage(v) },
+    // 图片按钮：未配置上传时禁用并提示
+    {
+      id: "image",
+      label: hasUploadConfig ? "\u56FE\u7247" : "\u8BF7\u914D\u7F6E\u56FE\u7247\u4E0A\u4F20\u5730\u5740",
+      icon: import_icons.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: import_icons.FieldStringOutlined, handler: (v) => wrapSelection(v, "`", "`") },
     {
@@ -655,7 +641,6 @@ function createToolbarConfig() {
       }
     },
     { id: "quote", label: "\u5F15\u7528", icon: import_icons.BlockOutlined, handler: (v) => insertAtLineStart(v, "> ") },
-    { id: "textContainer", label: "\u6587\u5B57\u5BB9\u5668", icon: import_icons.TagsOutlined, handler: (v) => toggleWrap(v, "<text-container>", "</text-container>") },
     {
       id: "hr",
       label: "\u5206\u5272\u7EBF",
@@ -669,13 +654,20 @@ function createToolbarConfig() {
 }
 
 // src/components/Toolbar/hooks/useToolbar.ts
-function useToolbar(editorView, extraItems) {
+function useToolbar(editorView, options) {
+  const { extraItems, uploadConfig } = options || {};
   const config = (0, import_react3.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 = (0, import_react3.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);
     }
@@ -684,16 +676,16 @@ function useToolbar(editorView, extraItems) {
 }
 
 // src/components/Toolbar/renderers/ToolbarItemRenderer.tsx
-var import_antd3 = require("antd");
+var import_antd2 = require("antd");
 var import_icons2 = require("@ant-design/icons");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function ToolbarItemRenderer({ item, onClick }) {
   const Icon = item.icon;
   if (item.children && item.children.length > 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-      item.separatorBefore && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "toolbar-separator" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "toolbar-group", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        import_antd3.Dropdown,
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      item.separatorBefore && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "toolbar-separator" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "toolbar-group", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_antd2.Tooltip, { title: item.label, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_antd2.Dropdown,
         {
           menu: {
             items: item.children.map((child) => {
@@ -701,10 +693,10 @@ function ToolbarItemRenderer({ item, onClick }) {
               return {
                 type: "item",
                 key: (_a = child.id) != null ? _a : "",
-                label: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { onClick: () => onClick(child), children: [
+                label: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { onClick: () => onClick(child), children: [
                   child.icon && (() => {
                     const ChildIcon = child.icon;
-                    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChildIcon, {});
+                    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChildIcon, {});
                   })(),
                   " ",
                   child.label
@@ -713,34 +705,35 @@ function ToolbarItemRenderer({ item, onClick }) {
             })
           },
           placement: "bottomLeft",
-          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_antd3.Button, { className: "toolbar-button", type: "text", size: "small", title: item.label, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons2.DownOutlined, { style: { marginLeft: 2, fontSize: 10 } })
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_antd2.Button, { className: "toolbar-button", type: "text", size: "small", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons2.DownOutlined, { style: { marginLeft: 2, fontSize: 10 } })
           ] })
         }
-      ) })
+      ) }) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    item.separatorBefore && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "toolbar-separator" }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "toolbar-group", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      import_antd3.Button,
+  const isDisabled = item.disabled;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    item.separatorBefore && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "toolbar-separator" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "toolbar-group", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_antd2.Tooltip, { title: item.label, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_antd2.Button,
       {
         id: item.id,
         className: "toolbar-button",
         type: "text",
         size: "small",
-        title: item.label,
-        onClick: () => onClick(item),
-        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, {})
+        disabled: isDisabled,
+        onClick: () => !isDisabled && onClick(item),
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, {})
       }
-    ) })
+    ) }) })
   ] });
 }
 
 // src/components/Toolbar/renderers/TablePicker/TableDropdown.tsx
 var import_react5 = __toESM(require("react"), 1);
-var import_antd4 = require("antd");
+var import_antd3 = require("antd");
 var import_icons3 = require("@ant-design/icons");
 
 // src/components/Toolbar/renderers/TablePicker/index.tsx
@@ -750,24 +743,27 @@ var import_react4 = require("react");
 var index_module_default = {};
 
 // src/components/Toolbar/renderers/TablePicker/index.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var MAX_ROW = 12;
-var MAX_COL = 12;
-var REFRESH_TIME = 200;
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var MAX_ROW = 8;
+var MAX_COL = 8;
 function TablePicker({ onSelect }) {
   const [hoverSize, setHoverSize] = (0, import_react4.useState)({ row: 0, col: 0 });
-  const [prevHoverSize, setPrevHoverSize] = (0, import_react4.useState)({ row: 0, col: 0 });
   const [confirmedSize, setConfirmedSize] = (0, import_react4.useState)({ row: 0, col: 0 });
   const maxColRef = (0, import_react4.useRef)(0);
+  const prevRowRef = (0, import_react4.useRef)(0);
   const timerIdRef = (0, import_react4.useRef)(null);
   const refreshTimerRef = (0, import_react4.useRef)(null);
   const commitRef = (0, import_react4.useRef)(null);
-  const clearTimer = (0, import_react4.useCallback)((flushFn) => {
+  const clearTimer = (0, import_react4.useCallback)(() => {
     if (timerIdRef.current) {
+      clearTimeout(timerIdRef.current);
       timerIdRef.current = null;
     }
-    if (flushFn && maxColRef.current > 0) {
-      timerIdRef.current = setTimeout(flushFn, REFRESH_TIME);
+  }, []);
+  const clearFlash = (0, import_react4.useCallback)(() => {
+    if (refreshTimerRef.current) {
+      clearInterval(refreshTimerRef.current);
+      refreshTimerRef.current = null;
     }
   }, []);
   (0, import_react4.useEffect)(
@@ -778,25 +774,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) {
@@ -805,45 +797,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 };
@@ -851,13 +841,13 @@ function TablePicker({ onSelect }) {
       onSelect(size);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
       className: index_module_default.container,
       onMouseDown,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "div",
           {
             className: index_module_default.grid,
@@ -866,7 +856,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__ */ (0, import_jsx_runtime6.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "div",
                 {
                   className: `${index_module_default.cell} ${isSelected ? index_module_default.cellActive : ""}`,
@@ -877,7 +867,7 @@ function TablePicker({ onSelect }) {
             })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: index_module_default.label, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: index_module_default.label, children: [
           hoverSize.row,
           " x ",
           maxColRef.current || 1
@@ -888,7 +878,7 @@ function TablePicker({ onSelect }) {
 }
 
 // src/components/Toolbar/renderers/TablePicker/TableDropdown.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function TableDropdown({ editorView }) {
   const [open, setOpen] = import_react5.default.useState(false);
   const openCountRef = (0, import_react5.useRef)(0);
@@ -907,15 +897,15 @@ ${dataRows}
     const { from } = editorView.state.selection.main;
     editorView.dispatch({ changes: { from, insert: table } });
   }, [editorView]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_antd4.Dropdown,
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_antd3.Dropdown,
     {
       trigger: ["click"],
       open,
       onOpenChange: setOpen,
       popupRender: () => {
         openCountRef.current++;
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { padding: 4 }, onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { padding: 4 }, onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           TablePicker,
           {
             onSelect: (size) => {
@@ -927,44 +917,41 @@ ${dataRows}
         ) });
       },
       placement: "bottomLeft",
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_antd4.Button, { className: "toolbar-button", type: "text", size: "small", title: "\u8868\u683C", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_icons3.TableOutlined, {}) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_antd3.Button, { className: "toolbar-button", type: "text", size: "small", title: "\u8868\u683C", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons3.TableOutlined, {}) })
     }
   );
 }
 
 // src/components/Toolbar/index.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-function Toolbar({ editorView, fullscreen, onToggleFullscreen, extraItems }) {
-  const { config, handleClick } = useToolbar(editorView, extraItems);
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Toolbar({ editorView, fullscreen = true, onToggleFullscreen, extraItems, uploadConfig }) {
+  const { config, handleClick } = useToolbar(editorView, { extraItems, uploadConfig });
   const renderFullscreen = (0, import_react6.useCallback)(() => {
     if (!onToggleFullscreen) return null;
     const Icon = fullscreen ? import_icons4.FullscreenExitOutlined : import_icons4.FullscreenOutlined;
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "toolbar-separator" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        import_antd5.Button,
-        {
-          className: "toolbar-button",
-          type: "text",
-          size: "small",
-          title: fullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F",
-          onClick: () => {
-            onToggleFullscreen();
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, {})
-        }
-      )
-    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_antd4.Button,
+      {
+        className: "toolbar-button",
+        type: "text",
+        size: "small",
+        title: fullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F",
+        onClick: () => {
+          onToggleFullscreen();
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, {})
+      }
+    );
   }, [fullscreen, onToggleFullscreen]);
   function isSeparator(item) {
     return !!(!item.id && item.separatorBefore);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "toolbar", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "toolbar", children: [
     config.map((item, idx) => {
       if (isSeparator(item)) {
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "toolbar-separator" }, `sep-${idx}`);
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "toolbar-separator" }, `sep-${idx}`);
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         ToolbarItemRenderer,
         {
           item,
@@ -973,16 +960,15 @@ function Toolbar({ editorView, fullscreen, onToggleFullscreen, extraItems }) {
         item.id
       );
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "toolbar-separator" }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TableDropdown, { editorView }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableDropdown, { editorView }),
     renderFullscreen()
   ] });
 }
 
 // src/components/Dialog/EditDialog.tsx
 var import_react7 = require("react");
-var import_antd6 = require("antd");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_antd5 = require("antd");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function EditDialog({ visible, typeName, currentProps, onSave, onClose }) {
   const schema = componentRegistry_default.get(typeName);
   const [formProps, setFormProps] = (0, import_react7.useState)({});
@@ -1010,8 +996,8 @@ function EditDialog({ visible, typeName, currentProps, onSave, onClose }) {
   if (!schema) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    import_antd6.Modal,
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_antd5.Modal,
     {
       title: `${schema.label} \u5C5E\u6027\u7F16\u8F91`,
       open: visible,
@@ -1051,35 +1037,11 @@ ${propsLine}
 
 // src/MarkdownEditor.tsx
 var import_icons5 = require("@ant-design/icons");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var MarkdownEditor_default = (0, import_react8.forwardRef)(function MarkdownEditor({
-  defaultValue = "",
-  value,
-  onChange,
-  showPreview = true,
-  fullscreen: fullscreenProp = false
-}, ref) {
-  const [content, setContent] = (0, import_react8.useState)(value != null ? value : defaultValue);
-  const [editorView, setEditorView] = (0, import_react8.useState)(null);
-  const scrollDOMRef = (0, import_react8.useRef)(null);
-  const previewElRef = (0, import_react8.useRef)(null);
+
+// src/hooks/useFullscreen.ts
+var import_react8 = require("react");
+function useFullscreen() {
   const [fullscreen, setFullscreen] = (0, import_react8.useState)(false);
-  const [dialogVisible, setDialogVisible] = (0, import_react8.useState)(false);
-  const [dialogTypeName, setDialogTypeName] = (0, import_react8.useState)("");
-  const [dialogProps, setDialogProps] = (0, import_react8.useState)({});
-  const [dialogPropsRange, setDialogPropsRange] = (0, import_react8.useState)([0, 0]);
-  (0, import_react8.useEffect)(() => {
-    if (value !== void 0) {
-      setContent(value);
-    }
-  }, [value]);
-  const internalSetContent = (0, import_react8.useCallback)((newContent) => {
-    setContent(newContent);
-    onChange == null ? void 0 : onChange(newContent);
-  }, [onChange]);
-  (0, import_react8.useImperativeHandle)(ref, () => ({
-    getContent: () => content
-  }), [content]);
   const toggleFullscreen = (0, import_react8.useCallback)(() => {
     if (document.fullscreenElement) {
       document.exitFullscreen().catch((e) => {
@@ -1106,40 +1068,29 @@ var MarkdownEditor_default = (0, import_react8.forwardRef)(function MarkdownEdit
       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__ */ (0, import_jsx_runtime10.jsx)(import_icons5.ReadOutlined, {});
-    return {
-      id: `container-${schema.name}`,
-      label: schema.label,
-      icon: () => iconNode,
-      handler: (view, _state) => insertContainer(view, schema.name, defaultProps)
-    };
-  });
-  const handleScrollReady = (0, import_react8.useCallback)((scrollDOM) => {
-    scrollDOMRef.current = scrollDOM;
-  }, []);
-  (0, import_react8.useEffect)(() => {
-    const source = scrollDOMRef.current;
-    const target = previewElRef.current;
+  return { fullscreen, toggleFullscreen };
+}
+
+// src/hooks/useScrollSync.ts
+var import_react9 = require("react");
+function useScrollSync(sourceRef, targetRef) {
+  const rafIdRef = (0, import_react9.useRef)(null);
+  (0, import_react9.useEffect)(() => {
+    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;
@@ -1147,78 +1098,136 @@ var MarkdownEditor_default = (0, import_react8.forwardRef)(function MarkdownEdit
         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
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var MarkdownEditor_default = (0, import_react10.forwardRef)(function MarkdownEditor({
+  defaultValue = "",
+  value,
+  onChange,
+  showPreview = true,
+  fullscreen: fullscreenProp = false,
+  previewOptions,
+  uploadConfig
+}, ref) {
+  const [content, setContent] = (0, import_react10.useState)(value != null ? value : defaultValue);
+  const [editorView, setEditorView] = (0, import_react10.useState)(null);
+  const scrollDOMRef = (0, import_react10.useRef)(null);
+  const previewElRef = (0, import_react10.useRef)(null);
+  const { fullscreen, toggleFullscreen } = useFullscreen();
+  useScrollSync(scrollDOMRef, previewElRef);
+  const [dialogVisible, setDialogVisible] = (0, import_react10.useState)(false);
+  const [dialogTypeName, setDialogTypeName] = (0, import_react10.useState)("");
+  const [dialogProps, setDialogProps] = (0, import_react10.useState)({});
+  const [dialogPropsRange, setDialogPropsRange] = (0, import_react10.useState)([0, 0]);
+  (0, import_react10.useEffect)(() => {
+    if (value !== void 0) {
+      setContent(value);
+    }
+  }, [value]);
+  const internalSetContent = (0, import_react10.useCallback)((newContent) => {
+    setContent(newContent);
+    onChange == null ? void 0 : onChange(newContent);
+  }, [onChange]);
+  (0, import_react10.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__ */ (0, import_jsx_runtime9.jsx)(import_icons5.ReadOutlined, {});
+    return {
+      id: `container-${schema.name}`,
+      label: schema.label,
+      icon: () => iconNode,
+      handler: (view, _state) => insertContainer(view, schema.name, defaultProps)
     };
-  }, [previewElRef.current]);
-  const handlePreviewRef = (0, import_react8.useCallback)((node) => {
+  });
+  const handleScrollReady = (0, import_react10.useCallback)((scrollDOM) => {
+    scrollDOMRef.current = scrollDOM;
+  }, []);
+  const handlePreviewRef = (0, import_react10.useCallback)((node) => {
     previewElRef.current = node;
   }, []);
-  const handleViewReady = (0, import_react8.useCallback)((view) => {
+  const handleViewReady = (0, import_react10.useCallback)((view) => {
     setEditorView(view);
   }, []);
-  const handleEditContainer = (0, import_react8.useCallback)((_view, typeName, propsLineFrom, propsLineTo, currentProps) => {
+  const handleEditContainer = (0, import_react10.useCallback)((_view, typeName, propsLineFrom, propsLineTo, currentProps) => {
     setDialogTypeName(typeName);
     setDialogProps({ ...currentProps });
     setDialogPropsRange([propsLineFrom, propsLineTo]);
     setDialogVisible(true);
   }, []);
-  const handleDialogSave = (0, import_react8.useCallback)((newProps) => {
+  const handleDialogSave = (0, import_react10.useCallback)((newProps) => {
     setDialogVisible(false);
     if (editorView) {
       updateContainerProps(editorView, dialogPropsRange[0], dialogPropsRange[1], newProps);
     }
   }, [editorView, dialogPropsRange]);
-  const handleDialogClose = (0, import_react8.useCallback)(() => {
+  const handleDialogClose = (0, import_react10.useCallback)(() => {
     setDialogVisible(false);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: fullscreen ? "app fullscreen" : "app", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: fullscreen ? "app fullscreen" : "app", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       Toolbar,
       {
         editorView,
         fullscreen,
         onToggleFullscreen: fullscreenProp ? toggleFullscreen : void 0,
-        extraItems: extraToolbarItems
+        extraItems: extraToolbarItems,
+        uploadConfig
       }
     ),
-    showPreview ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    showPreview ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       SplitPanels,
       {
-        leftPanel: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        leftPanel: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           Editor,
           {
             value: content,
             onChange: internalSetContent,
             onScrollReady: handleScrollReady,
             onViewReady: handleViewReady,
-            onEditContainer: handleEditContainer
+            onEditContainer: handleEditContainer,
+            uploadConfig,
+            onMessageNoUploadConfig: () => import_antd6.message.warning("\u8BF7\u5148\u914D\u7F6E\u56FE\u7247\u4E0A\u4F20\u529F\u80FD")
           }
         ),
-        rightPanel: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        rightPanel: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           Preview_default,
           {
             content,
-            ref: handlePreviewRef
+            ref: handlePreviewRef,
+            previewOptions
           }
         )
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       Editor,
       {
         value: content,
         onChange: internalSetContent,
         onScrollReady: handleScrollReady,
         onViewReady: handleViewReady,
-        onEditContainer: handleEditContainer
+        onEditContainer: handleEditContainer,
+        uploadConfig,
+        onMessageNoUploadConfig: () => import_antd6.message.warning("\u8BF7\u5148\u914D\u7F6E\u56FE\u7247\u4E0A\u4F20\u529F\u80FD")
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       EditDialog,
       {
         visible: dialogVisible,
@@ -1232,10 +1241,10 @@ var MarkdownEditor_default = (0, import_react8.forwardRef)(function MarkdownEdit
 });
 
 // src/hooks/useRegisterToolbar.ts
-var import_react9 = require("react");
+var import_react11 = require("react");
 function useRegisterToolbar(schemas) {
   const schemaList = Array.isArray(schemas) ? schemas : [schemas];
-  (0, import_react9.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     schemaList.forEach((schema) => {
       componentRegistry_default.register(schema.name, schema);
     });