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

package/dist/index.js

@@ -1,1237 +1,1351 @@
-// src/MarkdownEditor.tsx
-import { useState as useState3, useRef as useRef4, useCallback as useCallback5, useEffect as useEffect4, forwardRef as forwardRef2, useImperativeHandle } from "react";
-
-// src/components/Editor/index.tsx
-import { useEffect, useRef } from "react";
-import { EditorView as EditorView2, basicSetup } from "codemirror";
-import { EditorState as EditorState2 } from "@codemirror/state";
-
-// src/components/Editor/codemirrorExtensions.ts
-import { EditorView, keymap } from "@codemirror/view";
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Button, Dropdown, Modal, Splitter, Tooltip, message } from "antd";
+import { EditorView, basicSetup } from "codemirror";
+import { EditorState, Facet } from "@codemirror/state";
+import { Decoration, EditorView as EditorView$1, ViewPlugin, WidgetType, keymap } from "@codemirror/view";
 import { defaultKeymap, indentWithTab } from "@codemirror/commands";
 import { markdown } from "@codemirror/lang-markdown";
 import { oneDark } from "@codemirror/theme-one-dark";
-
-// src/components/Editor/containerWidget.ts
-import { ViewPlugin, Decoration, WidgetType } from "@codemirror/view";
-import { Facet } from "@codemirror/state";
-
-// src/utils/parseContainer.ts
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import RenderMarkdown, { initHighlighter, languagesCommon } from "remons-render-markdown";
+import "remons-render-markdown/dist/index.css";
+import { BlockOutlined, BoldOutlined, CodeOutlined, DownOutlined, FieldStringOutlined, FontSizeOutlined, FullscreenExitOutlined, FullscreenOutlined, ItalicOutlined, LinkOutlined, MinusOutlined, OrderedListOutlined, PictureOutlined, ReadOutlined, StrikethroughOutlined, TableOutlined, UnderlineOutlined, UnorderedListOutlined } from "@ant-design/icons";
+//#region src/utils/parseContainer.ts
+/**
+* 解析容器属性 JSON 字符串。
+* 支持标准 JSON 和宽松格式: { key: 'value', key2: 'value2' }
+*/
 function parseContainerProps(jsonStr) {
-  var _a, _b, _c;
-  try {
-    const props = {};
-    const trimmed = jsonStr.trim();
-    if (trimmed.startsWith("{") && trimmed.endsWith("}")) {
-      const inner = trimmed.slice(1, -1).trim();
-      if (!inner) return props;
-      const matches = inner.matchAll(/(?:["']?)(\w+)(?:["']?)\s*:\s*(?:"([^"]*)"|'([^']*)'|(\d+))/g);
-      for (const m of matches) {
-        props[m[1]] = (_c = (_b = (_a = m[2]) != null ? _a : m[3]) != null ? _b : m[4]) != null ? _c : "";
-      }
-    }
-    return props;
-  } catch (e) {
-    return {};
-  }
+	try {
+		const props = {};
+		const trimmed = jsonStr.trim();
+		if (trimmed.startsWith("{") && trimmed.endsWith("}")) {
+			const inner = trimmed.slice(1, -1).trim();
+			if (!inner) return props;
+			const matches = inner.matchAll(/(?:["']?)(\w+)(?:["']?)\s*:\s*(?:"([^"]*)"|'([^']*)'|(\d+))/g);
+			for (const m of matches) props[m[1]] = m[2] ?? m[3] ?? m[4] ?? "";
+		}
+		return props;
+	} catch {
+		return {};
+	}
 }
 function findContainers(docText) {
-  const containers = [];
-  const lines = docText.split("\n");
-  let i = 0;
-  while (i < lines.length) {
-    const line = lines[i];
-    const match = line.match(/^:::(\w+)$/);
-    if (match) {
-      const typeName = match[1];
-      let charPos = 0;
-      for (let l = 0; l < i; l++) {
-        charPos += lines[l].length + 1;
-      }
-      let props = {};
-      let propsLineFrom = 0;
-      let propsLineTo = 0;
-      let propsLineIndex = i + 1;
-      if (propsLineIndex < lines.length) {
-        const propsLine = lines[propsLineIndex].trim();
-        const propsMatch = propsLine.match(/^\{[\s\S]*\}$/);
-        if (propsMatch) {
-          props = parseContainerProps(propsLine);
-          propsLineFrom = charPos + line.length + 1;
-          propsLineTo = propsLineFrom + lines[propsLineIndex].length;
-        }
-      }
-      let endPos = 0;
-      for (let j = i + 1; j < lines.length; j++) {
-        if (lines[j].trim() === ":::") {
-          let endCharPos = 0;
-          for (let l = 0; l < j; l++) {
-            endCharPos += lines[l].length + 1;
-          }
-          endPos = endCharPos;
-          i = j + 1;
-          break;
-        }
-      }
-      containers.push({
-        startPos: charPos,
-        typeName,
-        propsLineFrom,
-        propsLineTo,
-        props,
-        endPos
-      });
-    }
-    i++;
-  }
-  return containers;
+	const containers = [];
+	const lines = docText.split("\n");
+	let i = 0;
+	while (i < lines.length) {
+		const line = lines[i];
+		const match = line.match(/^:::(\w+)$/);
+		if (match) {
+			const typeName = match[1];
+			let charPos = 0;
+			for (let l = 0; l < i; l++) charPos += lines[l].length + 1;
+			let props = {};
+			let propsLineFrom = 0;
+			let propsLineTo = 0;
+			let propsLineIndex = i + 1;
+			if (propsLineIndex < lines.length) {
+				const propsLine = lines[propsLineIndex].trim();
+				if (propsLine.match(/^\{[\s\S]*\}$/)) {
+					props = parseContainerProps(propsLine);
+					propsLineFrom = charPos + line.length + 1;
+					propsLineTo = propsLineFrom + lines[propsLineIndex].length;
+				}
+			}
+			let endPos = 0;
+			for (let j = i + 1; j < lines.length; j++) if (lines[j].trim() === ":::") {
+				let endCharPos = 0;
+				for (let l = 0; l < j; l++) endCharPos += lines[l].length + 1;
+				endPos = endCharPos;
+				i = j + 1;
+				break;
+			}
+			containers.push({
+				startPos: charPos,
+				typeName,
+				propsLineFrom,
+				propsLineTo,
+				props,
+				endPos
+			});
+		}
+		i++;
+	}
+	return containers;
 }
-
-// src/registry/componentRegistry.tsx
-import { Input, Select } from "antd";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#endregion
+//#region src/registry/componentRegistry.tsx
+/**
+* 组件注册中心，用于管理自定义组件的 schema。
+* 每个容器组件（如 :::linkCard）在此注册其可编辑字段。
+*/
 var ComponentRegistry = class {
-  constructor() {
-    this.schemas = /* @__PURE__ */ new Map();
-  }
-  /**
-   * 注册组件 schema
-   */
-  register(name, schema) {
-    this.schemas.set(name, schema);
-  }
-  /**
-   * 根据组件名获取已注册的 schema
-   */
-  get(name) {
-    return this.schemas.get(name);
-  }
-  /**
-   * 检查组件类型是否已注册
-   */
-  has(name) {
-    return this.schemas.has(name);
-  }
-  /**
-   * 获取所有已注册的组件名
-   */
-  getAllNames() {
-    return Array.from(this.schemas.keys());
-  }
-  /**
-   * 获取所有已注册的 schema
-   */
-  getAll() {
-    return Array.from(this.schemas.values());
-  }
-  /**
-   * 移除组件注册
-   */
-  unregister(name) {
-    this.schemas.delete(name);
-  }
+	schemas = /* @__PURE__ */ new Map();
+	/**
+	* 注册组件 schema
+	*/
+	register(name, schema) {
+		this.schemas.set(name, schema);
+	}
+	/**
+	* 根据组件名获取已注册的 schema
+	*/
+	get(name) {
+		return this.schemas.get(name);
+	}
+	/**
+	* 检查组件类型是否已注册
+	*/
+	has(name) {
+		return this.schemas.has(name);
+	}
+	/**
+	* 获取所有已注册的组件名
+	*/
+	getAllNames() {
+		return Array.from(this.schemas.keys());
+	}
+	/**
+	* 获取所有已注册的 schema
+	*/
+	getAll() {
+		return Array.from(this.schemas.values());
+	}
+	/**
+	* 移除组件注册
+	*/
+	unregister(name) {
+		this.schemas.delete(name);
+	}
 };
 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
-var containerEditCallback = Facet.define({
-  combine: (values) => values[0]
-});
+//#endregion
+//#region src/components/Editor/containerWidget.ts
+/**
+* 自定义 facet 用于传递编辑回调
+*/
+var containerEditCallback = Facet.define({ combine: (values) => values[0] });
+/**
+* 只读的容器头行 Widget（显示 :::typeName + 编辑按钮）
+* 使用 Decoration.replace 替换原始文本，使其不可直接编辑
+*/
 var ContainerHeaderWidget = class extends WidgetType {
-  constructor(typeName) {
-    super();
-    this.typeName = typeName;
-  }
-  toDOM() {
-    var _a, _b;
-    const container = document.createElement("span");
-    container.className = "container-widget-header";
-    const text = document.createElement("span");
-    text.className = "container-widget-text";
-    text.textContent = `:::${this.typeName}`;
-    const button = document.createElement("button");
-    button.className = "container-edit-btn";
-    button.title = `\u7F16\u8F91 ${(_b = (_a = componentRegistry_default.get(this.typeName)) == null ? void 0 : _a.label) != null ? _b : this.typeName}`;
-    button.textContent = "\u270E";
-    button.__typeName = this.typeName;
-    container.appendChild(text);
-    container.appendChild(button);
-    return container;
-  }
-  eq(other) {
-    return this.typeName === other.typeName;
-  }
-  ignoreEvent() {
-    return false;
-  }
+	typeName;
+	constructor(typeName) {
+		super();
+		this.typeName = typeName;
+	}
+	toDOM() {
+		const container = document.createElement("span");
+		container.className = "container-widget-header";
+		const text = document.createElement("span");
+		text.className = "container-widget-text";
+		text.textContent = `:::${this.typeName}`;
+		const button = document.createElement("button");
+		button.className = "container-edit-btn";
+		button.title = `编辑 ${componentRegistry.get(this.typeName)?.label ?? this.typeName}`;
+		button.textContent = "✎";
+		button.__typeName = this.typeName;
+		container.appendChild(text);
+		container.appendChild(button);
+		return container;
+	}
+	eq(other) {
+		return this.typeName === other.typeName;
+	}
+	ignoreEvent() {
+		return false;
+	}
 };
+/**
+* 只读的容器属性行 Widget（显示 { key: value, ... }）
+* 使用 Decoration.replace 替换原始文本，使其不可直接编辑
+*/
 var ContainerPropsWidget = class extends WidgetType {
-  constructor(propsText) {
-    super();
-    this.propsText = propsText;
-  }
-  toDOM() {
-    const span = document.createElement("span");
-    span.className = "container-widget-props";
-    span.textContent = this.propsText;
-    return span;
-  }
-  eq(other) {
-    return this.propsText === other.propsText;
-  }
-  ignoreEvent() {
-    return false;
-  }
+	propsText;
+	constructor(propsText) {
+		super();
+		this.propsText = propsText;
+	}
+	toDOM() {
+		const span = document.createElement("span");
+		span.className = "container-widget-props";
+		span.textContent = this.propsText;
+		return span;
+	}
+	eq(other) {
+		return this.propsText === other.propsText;
+	}
+	ignoreEvent() {
+		return false;
+	}
 };
+/**
+* 只读的容器结束行 Widget（显示 :::）
+* 使用 Decoration.replace 替换原始文本，使其不可直接编辑
+*/
 var ContainerCloseWidget = class extends WidgetType {
-  toDOM() {
-    const span = document.createElement("span");
-    span.className = "container-widget-text";
-    span.textContent = ":::";
-    return span;
-  }
-  eq() {
-    return true;
-  }
-  ignoreEvent() {
-    return false;
-  }
+	toDOM() {
+		const span = document.createElement("span");
+		span.className = "container-widget-text";
+		span.textContent = ":::";
+		return span;
+	}
+	eq() {
+		return true;
+	}
+	ignoreEvent() {
+		return false;
+	}
 };
+/**
+* 查找文档中的容器，创建 Decoration 装饰物
+* 将 ::: 头行、{} 属性行和 ::: 结束行替换为只读 widget，使其无法在编辑器中直接编辑
+*/
 function findContainerDecorations(state) {
-  const docText = state.doc.toString();
-  const containers = findContainers(docText);
-  const decorations = [];
-  for (const container of containers) {
-    const headerLine = state.doc.lineAt(container.startPos);
-    decorations.push({
-      from: headerLine.from,
-      to: headerLine.to,
-      value: Decoration.replace({
-        widget: new ContainerHeaderWidget(container.typeName)
-      })
-    });
-    if (container.propsLineFrom > 0 && container.propsLineTo > 0) {
-      const propsLine = state.doc.lineAt(container.propsLineFrom);
-      const propsText = propsLine.text;
-      decorations.push({
-        from: propsLine.from,
-        to: propsLine.to,
-        value: Decoration.replace({
-          widget: new ContainerPropsWidget(propsText)
-        })
-      });
-    }
-    if (container.endPos > 0) {
-      const endLine = state.doc.lineAt(container.endPos);
-      decorations.push({
-        from: endLine.from,
-        to: endLine.to,
-        value: Decoration.replace({
-          widget: new ContainerCloseWidget()
-        })
-      });
-    }
-  }
-  return decorations;
-}
-var containerWidgetPlugin = ViewPlugin.fromClass(
-  class {
-    constructor(view) {
-      this.decorations = Decoration.set(findContainerDecorations(view.state), true);
-    }
-    update(update) {
-      if (update.docChanged || update.selectionSet) {
-        this.decorations = Decoration.set(findContainerDecorations(update.state), true);
-      }
-    }
-  },
-  {
-    decorations: (value) => value.decorations,
-    eventHandlers: {
-      // 点击编辑按钮时触发回调
-      click: (event, view) => {
-        const target = event.target;
-        if (target.classList.contains("container-edit-btn")) {
-          const typeName = target.__typeName;
-          if (typeName) {
-            const docText = view.state.doc.toString();
-            const containers = findContainers(docText);
-            const buttonPos = view.posAtDOM(target);
-            for (const container of containers) {
-              const headerLine = view.state.doc.lineAt(container.startPos);
-              if (buttonPos >= headerLine.from - 5 && buttonPos <= headerLine.to + 5) {
-                const callback = view.state.facet(containerEditCallback);
-                if (callback) {
-                  callback(view, container.typeName, container.propsLineFrom, container.propsLineTo, { ...container.props });
-                }
-                return true;
-              }
-            }
-          }
-          return false;
-        }
-        return false;
-      }
-    }
-  }
-);
-
-// src/components/Editor/codemirrorExtensions.ts
-var getCodeMirrorExtensions = (opts) => {
-  const extensions = [
-    markdown(),
-    oneDark,
-    keymap.of([...defaultKeymap, indentWithTab]),
-    EditorView.lineWrapping,
-    EditorView.baseTheme({
-      ".cm-scroller": {
-        height: "100%",
-        overflow: "auto"
-      },
-      // 容器头行 Widget 样式
-      ".container-widget-header": {
-        display: "inline",
-        fontSize: "inherit",
-        fontFamily: "inherit"
-      },
-      ".container-widget-text": {
-        fontWeight: "bold",
-        color: "#79c0ff"
-      },
-      // 容器属性行 Widget 样式
-      ".container-widget-props": {
-        display: "inline",
-        fontSize: "inherit",
-        fontFamily: "inherit",
-        color: "#a5d6ff"
-      },
-      // 容器编辑按钮样式
-      ".container-edit-btn": {
-        display: "inline-block",
-        padding: "0 4px",
-        fontSize: "12px",
-        color: "#58a6ff",
-        background: "transparent",
-        border: "none",
-        borderRadius: "4px",
-        cursor: "pointer",
-        marginRight: "4px",
-        verticalAlign: "middle"
-      },
-      ".container-edit-btn:hover": {
-        background: "rgba(88, 166, 255, 0.16)"
-      }
-    })
-  ];
-  extensions.push(containerWidgetPlugin);
-  if (opts == null ? void 0 : opts.onEditContainer) {
-    extensions.push(containerEditCallback.of(opts.onEditContainer));
-  }
-  return extensions;
-};
-
-// src/components/Editor/index.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-function Editor({ value, onChange, onScrollReady, onViewReady, onEditContainer }) {
-  const editorRef = useRef(null);
-  const viewRef = useRef(null);
-  useEffect(() => {
-    if (!editorRef.current) return;
-    const extensions = [
-      basicSetup,
-      ...getCodeMirrorExtensions({ onEditContainer }),
-      EditorView2.updateListener.of((update) => {
-        if (update.docChanged) {
-          onChange(update.state.doc.toString());
-        }
-      })
-    ];
-    const state = EditorState2.create({
-      doc: value,
-      extensions
-    });
-    viewRef.current = new EditorView2({
-      state,
-      parent: editorRef.current
-    });
-    if (onScrollReady && viewRef.current) {
-      onScrollReady(viewRef.current.scrollDOM);
-    }
-    if (onViewReady) {
-      onViewReady(viewRef.current);
-    }
-    return () => {
-      var _a;
-      (_a = viewRef.current) == null ? void 0 : _a.destroy();
-    };
-  }, []);
-  useEffect(() => {
-    if (viewRef.current && viewRef.current.state.doc.toString() !== value) {
-      viewRef.current.dispatch({
-        changes: { from: 0, to: viewRef.current.state.doc.length, insert: value }
-      });
-    }
-  }, [value]);
-  return /* @__PURE__ */ jsx2("div", { ref: editorRef, className: "editor" });
+	const containers = findContainers(state.doc.toString());
+	const decorations = [];
+	for (const container of containers) {
+		const headerLine = state.doc.lineAt(container.startPos);
+		decorations.push({
+			from: headerLine.from,
+			to: headerLine.to,
+			value: Decoration.replace({ widget: new ContainerHeaderWidget(container.typeName) })
+		});
+		if (container.propsLineFrom > 0 && container.propsLineTo > 0) {
+			const propsLine = state.doc.lineAt(container.propsLineFrom);
+			const propsText = propsLine.text;
+			decorations.push({
+				from: propsLine.from,
+				to: propsLine.to,
+				value: Decoration.replace({ widget: new ContainerPropsWidget(propsText) })
+			});
+		}
+		if (container.endPos > 0) {
+			const endLine = state.doc.lineAt(container.endPos);
+			decorations.push({
+				from: endLine.from,
+				to: endLine.to,
+				value: Decoration.replace({ widget: new ContainerCloseWidget() })
+			});
+		}
+	}
+	return decorations;
 }
-
-// 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";
-var Preview = forwardRef(({ content, previewOptions }, ref) => {
-  useEffect2(() => {
-    initHighlighter({
-      ...languagesCommon,
-      ...(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 }) });
+/**
+* 容器编辑 ViewPlugin
+* 将容器的 ::: 头行和 {} 属性行替换为只读 widget，使其无法在编辑器中直接编辑
+*/
+var containerWidgetPlugin = ViewPlugin.fromClass(class {
+	decorations;
+	constructor(view) {
+		this.decorations = Decoration.set(findContainerDecorations(view.state), true);
+	}
+	update(update) {
+		if (update.docChanged || update.selectionSet) this.decorations = Decoration.set(findContainerDecorations(update.state), true);
+	}
+}, {
+	decorations: (value) => value.decorations,
+	eventHandlers: { click: (event, view) => {
+		const target = event.target;
+		if (target.classList.contains("container-edit-btn")) {
+			if (target.__typeName) {
+				const containers = findContainers(view.state.doc.toString());
+				const buttonPos = view.posAtDOM(target);
+				for (const container of containers) {
+					const headerLine = view.state.doc.lineAt(container.startPos);
+					if (buttonPos >= headerLine.from - 5 && buttonPos <= headerLine.to + 5) {
+						const callback = view.state.facet(containerEditCallback);
+						if (callback) callback(view, container.typeName, container.propsLineFrom, container.propsLineTo, { ...container.props });
+						return true;
+					}
+				}
+			}
+			return false;
+		}
+		return false;
+	} }
 });
-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";
-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 })
-  ] });
-}
-
-// src/components/Toolbar/index.tsx
-import { useCallback as useCallback4 } from "react";
-import { Button as Button3 } from "antd";
-import { FullscreenOutlined, FullscreenExitOutlined } from "@ant-design/icons";
-
-// src/components/Toolbar/hooks/useToolbar.ts
-import { useCallback, useMemo } from "react";
-
-// src/components/Toolbar/config.ts
-import {
-  BoldOutlined,
-  ItalicOutlined,
-  StrikethroughOutlined,
-  UnderlineOutlined,
-  UnorderedListOutlined,
-  OrderedListOutlined,
-  LinkOutlined,
-  PictureOutlined,
-  CodeOutlined,
-  BlockOutlined,
-  MinusOutlined,
-  FieldStringOutlined,
-  FontSizeOutlined,
-  TagsOutlined
-} from "@ant-design/icons";
-
-// src/components/Toolbar/buttons.tsx
+//#endregion
+//#region 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 } });
-  }
+	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 } });
+	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;
+/**
+* 上传图片
+* @param file - 要上传的文件
+* @param uploadConfig - 上传配置
+*/
+async function uploadFileToServer(file, uploadConfig) {
+	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 result.data?.path || null;
+	}
+	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 isUploadConfigured(uploadConfig) {
+	return !!(uploadConfig?.uploadUrl || uploadConfig?.onUploadImage);
 }
+/**
+* 图片上传：创建隐藏的 file input 触发选择，上传后插入 markdown 图片语法
+* @param view - CodeMirror 编辑器实例
+* @param uploadConfig - 上传配置（包含 uploadUrl 或 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) || "描述";
+		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}` } });
+	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);
+	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() {
-  return [
-    {
-      id: "heading",
-      icon: FontSizeOutlined,
-      label: "\u6807\u9898",
-      children: [
-        { id: "heading1", label: "\u6807\u9898 1", icon: FontSizeOutlined, handler: (v) => insertAtLineStart(v, "# ") },
-        { id: "heading2", label: "\u6807\u9898 2", icon: FontSizeOutlined, handler: (v) => insertAtLineStart(v, "## ") },
-        { id: "heading3", label: "\u6807\u9898 3", icon: FontSizeOutlined, handler: (v) => insertAtLineStart(v, "### ") },
-        { id: "heading4", label: "\u6807\u9898 4", icon: FontSizeOutlined, handler: (v) => insertAtLineStart(v, "#### ") },
-        { id: "heading5", label: "\u6807\u9898 5", icon: FontSizeOutlined, handler: (v) => insertAtLineStart(v, "##### ") },
-        { id: "heading6", label: "\u6807\u9898 6", icon: FontSizeOutlined, handler: (v) => insertAtLineStart(v, "###### ") }
-      ]
-    },
-    { separatorBefore: true },
-    { id: "bold", label: "\u52A0\u7C97", icon: BoldOutlined, handler: (v) => wrapSelection(v, "**", "**") },
-    { id: "italic", label: "\u659C\u4F53", icon: ItalicOutlined, handler: (v) => wrapSelection(v, "*", "*") },
-    { id: "strikethrough", label: "\u5220\u9664\u7EBF", icon: StrikethroughOutlined, handler: (v) => wrapSelection(v, "~~", "~~") },
-    { id: "underline", label: "\u4E0B\u5212\u7EBF", icon: UnderlineOutlined, handler: (v) => wrapSelection(v, "<u>", "</u>") },
-    { separatorBefore: true },
-    { id: "ul", label: "\u65E0\u5E8F\u5217\u8868", icon: UnorderedListOutlined, handler: (v) => insertAtLineStart(v, "- ") },
-    { 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) },
-    { separatorBefore: true },
-    { id: "code", label: "\u884C\u5185\u4EE3\u7801", icon: FieldStringOutlined, handler: (v) => wrapSelection(v, "`", "`") },
-    {
-      id: "codeblock",
-      label: "\u4EE3\u7801\u5757",
-      icon: CodeOutlined,
-      handler: (v) => {
-        const { from, to } = v.state.selection.main;
-        const selected = v.state.doc.sliceString(from, to);
-        const insert = selected ? "```\n" + selected + "\n```" : "```\n\n```";
-        v.dispatch({ changes: { from, to, insert } });
-      }
-    },
-    { 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",
-      icon: MinusOutlined,
-      handler: (v) => {
-        const { from } = v.state.selection.main;
-        v.dispatch({ changes: { from, insert: "\n---\n" } });
-      }
-    }
-  ];
+//#endregion
+//#region src/components/Editor/codemirrorExtensions.ts
+/** 图片上传配置 facet */
+var uploadConfigFacet = Facet.define({ combine: (values) => values[values.length - 1] });
+/** 未配置上传时的提示回调 facet */
+var messageFacet = Facet.define({ combine: (values) => values[values.length - 1] });
+/** 粘贴事件处理：拦截图片并上传 */
+var pasteHandler = EditorView$1.domEventHandlers({ paste: (event, view) => {
+	const files = event.clipboardData?.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?.();
+		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 insert = `![${file.name.replace(/\.[^.]+$/, "")}](${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$1.lineWrapping,
+		pasteHandler,
+		EditorView$1.baseTheme({
+			".cm-scroller": {
+				height: "100%",
+				overflow: "auto"
+			},
+			".container-widget-header": {
+				display: "inline",
+				fontSize: "inherit",
+				fontFamily: "inherit"
+			},
+			".container-widget-text": {
+				fontWeight: "bold",
+				color: "#79c0ff"
+			},
+			".container-widget-props": {
+				display: "inline",
+				fontSize: "inherit",
+				fontFamily: "inherit",
+				color: "#a5d6ff"
+			},
+			".container-edit-btn": {
+				display: "inline-block",
+				padding: "0 4px",
+				fontSize: "12px",
+				color: "#58a6ff",
+				background: "transparent",
+				border: "none",
+				borderRadius: "4px",
+				cursor: "pointer",
+				marginRight: "4px",
+				verticalAlign: "middle"
+			},
+			".container-edit-btn:hover": { background: "rgba(88, 166, 255, 0.16)" }
+		})
+	];
+	extensions.push(containerWidgetPlugin);
+	if (opts?.onEditContainer) extensions.push(containerEditCallback.of(opts.onEditContainer));
+	if (opts?.uploadConfig) extensions.push(uploadConfigFacet.of(opts.uploadConfig));
+	if (opts?.onMessageNoUploadConfig) extensions.push(messageFacet.of(opts.onMessageNoUploadConfig));
+	return extensions;
+};
+//#endregion
+//#region src/components/Editor/index.tsx
+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,
+				uploadConfig,
+				onMessageNoUploadConfig
+			}),
+			EditorView.updateListener.of((update) => {
+				if (update.docChanged) onChange(update.state.doc.toString());
+			})
+		];
+		const state = EditorState.create({
+			doc: value,
+			extensions
+		});
+		viewRef.current = new EditorView({
+			state,
+			parent: editorRef.current
+		});
+		if (onScrollReady && viewRef.current) onScrollReady(viewRef.current.scrollDOM);
+		if (onViewReady) onViewReady(viewRef.current);
+		return () => {
+			viewRef.current?.destroy();
+		};
+	}, []);
+	useEffect(() => {
+		if (viewRef.current && viewRef.current.state.doc.toString() !== value) viewRef.current.dispatch({ changes: {
+			from: 0,
+			to: viewRef.current.state.doc.length,
+			insert: value
+		} });
+	}, [value]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: editorRef,
+		className: "editor"
+	});
 }
-
-// src/components/Toolbar/hooks/useToolbar.ts
-function useToolbar(editorView, extraItems) {
-  const config = useMemo(() => {
-    const base = createToolbarConfig();
-    return extraItems ? [...base, { separatorBefore: true }, ...extraItems] : base;
-  }, [extraItems]);
-  const handleClick = useCallback((button) => {
-    if (button.handler && editorView) {
-      editorView.focus();
-      button.handler(editorView, editorView.state);
-    }
-  }, [editorView]);
-  return { config, handleClick };
+//#endregion
+//#region src/components/Preview/index.tsx
+var Preview = forwardRef(({ content, previewOptions }, ref) => {
+	useEffect(() => {
+		initHighlighter({
+			...languagesCommon,
+			...previewOptions?.languages ? previewOptions?.languages : {}
+		});
+	}, [previewOptions?.languages]);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: "preview",
+		children: /* @__PURE__ */ jsx(RenderMarkdown, {
+			content,
+			...previewOptions
+		})
+	});
+});
+Preview.displayName = "Preview";
+//#endregion
+//#region src/components/Panel/SplitPanels.tsx
+function SplitPanels({ leftPanel, rightPanel }) {
+	return /* @__PURE__ */ jsxs(Splitter, {
+		className: "split-panels",
+		children: [/* @__PURE__ */ jsx(Splitter.Panel, {
+			defaultSize: "50%",
+			min: "20%",
+			max: "80%",
+			children: leftPanel
+		}), /* @__PURE__ */ jsx(Splitter.Panel, { children: rightPanel })]
+	});
 }
-
-// src/components/Toolbar/renderers/ToolbarItemRenderer.tsx
-import { Button, Dropdown } from "antd";
-import { DownOutlined } from "@ant-design/icons";
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+//#endregion
+//#region src/components/Toolbar/config.ts
+/**
+* 创建工具栏配置
+* @param options - 配置选项
+*/
+function createToolbarConfig(options) {
+	const hasUploadConfig = isUploadConfigured(options);
+	return [
+		{
+			id: "heading",
+			icon: FontSizeOutlined,
+			label: "标题",
+			children: [
+				{
+					id: "heading1",
+					label: "标题 1",
+					icon: FontSizeOutlined,
+					handler: (v) => insertAtLineStart(v, "# ")
+				},
+				{
+					id: "heading2",
+					label: "标题 2",
+					icon: FontSizeOutlined,
+					handler: (v) => insertAtLineStart(v, "## ")
+				},
+				{
+					id: "heading3",
+					label: "标题 3",
+					icon: FontSizeOutlined,
+					handler: (v) => insertAtLineStart(v, "### ")
+				},
+				{
+					id: "heading4",
+					label: "标题 4",
+					icon: FontSizeOutlined,
+					handler: (v) => insertAtLineStart(v, "#### ")
+				},
+				{
+					id: "heading5",
+					label: "标题 5",
+					icon: FontSizeOutlined,
+					handler: (v) => insertAtLineStart(v, "##### ")
+				},
+				{
+					id: "heading6",
+					label: "标题 6",
+					icon: FontSizeOutlined,
+					handler: (v) => insertAtLineStart(v, "###### ")
+				}
+			]
+		},
+		{ separatorBefore: true },
+		{
+			id: "bold",
+			label: "加粗",
+			icon: BoldOutlined,
+			handler: (v) => wrapSelection(v, "**", "**")
+		},
+		{
+			id: "italic",
+			label: "斜体",
+			icon: ItalicOutlined,
+			handler: (v) => wrapSelection(v, "*", "*")
+		},
+		{
+			id: "strikethrough",
+			label: "删除线",
+			icon: StrikethroughOutlined,
+			handler: (v) => wrapSelection(v, "~~", "~~")
+		},
+		{
+			id: "underline",
+			label: "下划线",
+			icon: UnderlineOutlined,
+			handler: (v) => wrapSelection(v, "<u>", "</u>")
+		},
+		{ separatorBefore: true },
+		{
+			id: "ul",
+			label: "无序列表",
+			icon: UnorderedListOutlined,
+			handler: (v) => insertAtLineStart(v, "- ")
+		},
+		{
+			id: "ol",
+			label: "有序列表",
+			icon: OrderedListOutlined,
+			handler: (v) => insertAtLineStart(v, "1. ")
+		},
+		{ separatorBefore: true },
+		{
+			id: "link",
+			label: "链接",
+			icon: LinkOutlined,
+			handler: (v) => insertAtCursor(v, "[", "](url)", "文本")
+		},
+		{
+			id: "image",
+			label: hasUploadConfig ? "图片" : "请配置图片上传地址",
+			icon: PictureOutlined,
+			disabled: !hasUploadConfig,
+			handler: hasUploadConfig ? (v) => uploadImage(v, {
+				uploadUrl: options?.uploadUrl,
+				onUploadImage: options?.onUploadImage
+			}) : void 0
+		},
+		{ separatorBefore: true },
+		{
+			id: "code",
+			label: "行内代码",
+			icon: FieldStringOutlined,
+			handler: (v) => wrapSelection(v, "`", "`")
+		},
+		{
+			id: "codeblock",
+			label: "代码块",
+			icon: CodeOutlined,
+			handler: (v) => {
+				const { from, to } = v.state.selection.main;
+				const selected = v.state.doc.sliceString(from, to);
+				const insert = selected ? "```\n" + selected + "\n```" : "```\n\n```";
+				v.dispatch({ changes: {
+					from,
+					to,
+					insert
+				} });
+			}
+		},
+		{
+			id: "quote",
+			label: "引用",
+			icon: BlockOutlined,
+			handler: (v) => insertAtLineStart(v, "> ")
+		},
+		{
+			id: "hr",
+			label: "分割线",
+			icon: MinusOutlined,
+			handler: (v) => {
+				const { from } = v.state.selection.main;
+				v.dispatch({ changes: {
+					from,
+					insert: "\n---\n"
+				} });
+			}
+		}
+	];
+}
+//#endregion
+//#region src/components/Toolbar/hooks/useToolbar.ts
+function useToolbar(editorView, options) {
+	const { extraItems, uploadConfig } = options || {};
+	return {
+		config: useMemo(() => {
+			const base = createToolbarConfig(uploadConfig);
+			return extraItems ? [...base, ...extraItems] : base;
+		}, [extraItems, uploadConfig]),
+		handleClick: useCallback((button) => {
+			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);
+			}
+		}, [editorView])
+	};
+}
+//#endregion
+//#region src/components/Toolbar/renderers/ToolbarItemRenderer.tsx
 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(
-        Dropdown,
-        {
-          menu: {
-            items: item.children.map((child) => {
-              var _a;
-              return {
-                type: "item",
-                key: (_a = child.id) != null ? _a : "",
-                label: /* @__PURE__ */ jsxs3("span", { onClick: () => onClick(child), children: [
-                  child.icon && (() => {
-                    const ChildIcon = child.icon;
-                    return /* @__PURE__ */ jsx5(ChildIcon, {});
-                  })(),
-                  " ",
-                  child.label
-                ] })
-              };
-            })
-          },
-          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 } })
-          ] })
-        }
-      ) })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    item.separatorBefore && /* @__PURE__ */ jsx5("div", { className: "toolbar-separator" }),
-    /* @__PURE__ */ jsx5("div", { className: "toolbar-group", children: /* @__PURE__ */ jsx5(
-      Button,
-      {
-        id: item.id,
-        className: "toolbar-button",
-        type: "text",
-        size: "small",
-        title: item.label,
-        onClick: () => onClick(item),
-        children: /* @__PURE__ */ jsx5(Icon, {})
-      }
-    ) })
-  ] });
+	const Icon = item.icon;
+	if (item.children && item.children.length > 0) return /* @__PURE__ */ jsxs(Fragment, { children: [item.separatorBefore && /* @__PURE__ */ jsx("div", { className: "toolbar-separator" }), /* @__PURE__ */ jsx("div", {
+		className: "toolbar-group",
+		children: /* @__PURE__ */ jsx(Tooltip, {
+			title: item.label,
+			children: /* @__PURE__ */ jsx(Dropdown, {
+				menu: { items: item.children.map((child) => ({
+					type: "item",
+					key: child.id ?? "",
+					label: /* @__PURE__ */ jsxs("span", {
+						onClick: () => onClick(child),
+						children: [
+							child.icon && (() => {
+								const ChildIcon = child.icon;
+								return /* @__PURE__ */ jsx(ChildIcon, {});
+							})(),
+							" ",
+							child.label
+						]
+					})
+				})) },
+				placement: "bottomLeft",
+				children: /* @__PURE__ */ jsxs(Button, {
+					className: "toolbar-button",
+					type: "text",
+					size: "small",
+					children: [/* @__PURE__ */ jsx(Icon, {}), /* @__PURE__ */ jsx(DownOutlined, { style: {
+						marginLeft: 2,
+						fontSize: 10
+					} })]
+				})
+			})
+		})
+	})] });
+	const isDisabled = item.disabled;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [item.separatorBefore && /* @__PURE__ */ jsx("div", { className: "toolbar-separator" }), /* @__PURE__ */ jsx("div", {
+		className: "toolbar-group",
+		children: /* @__PURE__ */ jsx(Tooltip, {
+			title: item.label,
+			children: /* @__PURE__ */ jsx(Button, {
+				id: item.id,
+				className: "toolbar-button",
+				type: "text",
+				size: "small",
+				disabled: isDisabled,
+				onClick: () => !isDisabled && onClick(item),
+				children: /* @__PURE__ */ jsx(Icon, {})
+			})
+		})
+	})] });
 }
-
-// src/components/Toolbar/renderers/TablePicker/TableDropdown.tsx
-import React, { useCallback as useCallback3, useRef as useRef3 } from "react";
-import { Button as Button2, Dropdown as Dropdown2 } from "antd";
-import { TableOutlined } from "@ant-design/icons";
-
-// src/components/Toolbar/renderers/TablePicker/index.tsx
-import { useState, useRef as useRef2, useEffect as useEffect3, useCallback as useCallback2 } from "react";
-
-// src/components/Toolbar/renderers/TablePicker/index.module.less
-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;
+var index_module_default = {
+	container: "index-module__container___l6BT-",
+	grid: "index-module__grid___tCZ-r",
+	cell: "index-module__cell___vTDQz",
+	cellActive: "index-module__cellActive___0EYvU",
+	hint: "index-module__hint___dTObk",
+	label: "index-module__label___2CmK1"
+};
+//#endregion
+//#region src/components/Toolbar/renderers/TablePicker/index.tsx
+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 timerIdRef = useRef2(null);
-  const refreshTimerRef = useRef2(null);
-  const commitRef = useRef2(null);
-  const clearTimer = useCallback2((flushFn) => {
-    if (timerIdRef.current) {
-      timerIdRef.current = null;
-    }
-    if (flushFn && maxColRef.current > 0) {
-      timerIdRef.current = setTimeout(flushFn, REFRESH_TIME);
-    }
-  }, []);
-  useEffect3(
-    () => () => {
-      if (timerIdRef.current) clearTimeout(timerIdRef.current);
-      if (refreshTimerRef.current) clearInterval(refreshTimerRef.current);
-    },
-    []
-  );
-  function extend(col, row) {
-    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 });
-      }
-    }
-  }
-  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) {
-        maxColRef.current = Math.min(MAX_COL, col);
-      }
-      current += step;
-      if (dir === 1 && current > limit || dir === -1 && current < 1) {
-        clearInterval(refreshTimerRef.current);
-        setHoverSize({ row: current - step, col });
-        finalCallback(col, current - step);
-      }
-    }, 50);
-    clearTimeout(timer);
-    return () => {
-      clearInterval(refreshTimerRef.current);
-    };
-  }
-  function onCellEnterCheck(index) {
-    clearTimer();
-    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) {
-      extend(col, row);
-    } else {
-      if (isDown && (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 });
-      }
-    }
-    setPrevHoverSize({ row, col });
-  }
-  function onMouseDown() {
-    const size = commitRef.current || { cols: maxColRef.current, rows: confirmedSize.row };
-    if (size.rows > 0 && size.cols > 0) {
-      onSelect(size);
-    }
-  }
-  return /* @__PURE__ */ jsxs4(
-    "div",
-    {
-      className: index_module_default.container,
-      onMouseDown,
-      children: [
-        /* @__PURE__ */ jsx6(
-          "div",
-          {
-            className: index_module_default.grid,
-            style: { gridTemplateColumns: `repeat(${MAX_COL}, 24px)` },
-            children: Array.from({ length: MAX_ROW * MAX_COL }).map((_, i) => {
-              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(
-                "div",
-                {
-                  className: `${index_module_default.cell} ${isSelected ? index_module_default.cellActive : ""}`,
-                  onMouseEnter: () => onCellEnterCheck(i)
-                },
-                i
-              );
-            })
-          }
-        ),
-        /* @__PURE__ */ jsxs4("div", { className: index_module_default.label, children: [
-          hoverSize.row,
-          " x ",
-          maxColRef.current || 1
-        ] })
-      ]
-    }
-  );
+	const [hoverSize, setHoverSize] = useState({
+		row: 0,
+		col: 0
+	});
+	const [confirmedSize, setConfirmedSize] = useState({
+		row: 0,
+		col: 0
+	});
+	const maxColRef = useRef(0);
+	const prevRowRef = useRef(0);
+	const timerIdRef = useRef(null);
+	const refreshTimerRef = useRef(null);
+	const commitRef = useRef(null);
+	const clearTimer = useCallback(() => {
+		if (timerIdRef.current) {
+			clearTimeout(timerIdRef.current);
+			timerIdRef.current = null;
+		}
+	}, []);
+	const clearFlash = useCallback(() => {
+		if (refreshTimerRef.current) {
+			clearInterval(refreshTimerRef.current);
+			refreshTimerRef.current = null;
+		}
+	}, []);
+	useEffect(() => () => {
+		if (timerIdRef.current) clearTimeout(timerIdRef.current);
+		if (refreshTimerRef.current) clearInterval(refreshTimerRef.current);
+	}, []);
+	/**
+	* 扩展选中区域至 (col, row)
+	*/
+	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: 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;
+		refreshTimerRef.current = setInterval(() => {
+			setHoverSize({
+				row: current,
+				col
+			});
+			if (current > confirmedSize.row || dir === -1) maxColRef.current = Math.min(MAX_COL, col);
+			current += step;
+			if (dir === 1 && current > limit || dir === -1 && current < 1) {
+				clearInterval(refreshTimerRef.current);
+				refreshTimerRef.current = null;
+				const finalRow = current - step;
+				setHoverSize({
+					row: finalRow,
+					col
+				});
+				finalCallback(col, finalRow);
+			}
+		}, 50);
+	}
+	/**
+	* 核心逻辑：鼠标进入格子
+	*/
+	function onCellEnterCheck(index) {
+		clearTimer();
+		clearFlash();
+		const row = Math.floor(index / MAX_COL) + 1;
+		const col = index % MAX_COL + 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) {
+			if (col > maxColRef.current || maxColRef.current >= MAX_COL) flash(col, 1, Math.min(row, MAX_ROW), (c, r) => {
+				setConfirmedSize({
+					row: r,
+					col: c
+				});
+			});
+			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)
+					});
+				}
+			});
+		}
+	}
+	function onMouseDown() {
+		const size = commitRef.current || {
+			cols: maxColRef.current,
+			rows: confirmedSize.row
+		};
+		if (size.rows > 0 && size.cols > 0) onSelect(size);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: index_module_default.container,
+		onMouseDown,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: index_module_default.grid,
+			style: { gridTemplateColumns: `repeat(${MAX_COL}, 24px)` },
+			children: Array.from({ length: 64 }).map((_, i) => {
+				const row = Math.floor(i / MAX_COL) + 1;
+				const col = i % MAX_COL + 1;
+				const isSelected = row <= hoverSize.row && col <= maxColRef.current;
+				return /* @__PURE__ */ jsx("div", {
+					className: `${index_module_default.cell} ${isSelected ? index_module_default.cellActive : ""}`,
+					onMouseEnter: () => onCellEnterCheck(i)
+				}, i);
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: index_module_default.label,
+			children: [
+				hoverSize.row,
+				" x ",
+				maxColRef.current || 1
+			]
+		})]
+	});
 }
-
-// src/components/Toolbar/renderers/TablePicker/TableDropdown.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+//#endregion
+//#region src/components/Toolbar/renderers/TablePicker/TableDropdown.tsx
 function TableDropdown({ editorView }) {
-  const [open, setOpen] = React.useState(false);
-  const openCountRef = useRef3(0);
-  const handleTableSelect = useCallback3((rows, cols) => {
-    if (!editorView || rows <= 0 || cols <= 0) return;
-    editorView.focus();
-    const headerCells = Array(cols).fill(null).map((_, i) => ` \u5217${i + 1} `).join("|");
-    const separator = Array(cols).fill(" --- ").join("|");
-    const dataCell = Array(cols).fill(" \u5185\u5BB9 ").join("|");
-    const dataRows = Array(rows).fill(`|${dataCell}|`).join("\n");
-    const table = `
-|${headerCells}|
-|${separator}|
-${dataRows}
-`;
-    const { from } = editorView.state.selection.main;
-    editorView.dispatch({ changes: { from, insert: table } });
-  }, [editorView]);
-  return /* @__PURE__ */ jsx7(
-    Dropdown2,
-    {
-      trigger: ["click"],
-      open,
-      onOpenChange: setOpen,
-      popupRender: () => {
-        openCountRef.current++;
-        return /* @__PURE__ */ jsx7("div", { style: { padding: 4 }, onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx7(
-          TablePicker,
-          {
-            onSelect: (size) => {
-              handleTableSelect(size.rows, size.cols);
-              setOpen(false);
-            }
-          },
-          openCountRef.current
-        ) });
-      },
-      placement: "bottomLeft",
-      children: /* @__PURE__ */ jsx7(Button2, { className: "toolbar-button", type: "text", size: "small", title: "\u8868\u683C", children: /* @__PURE__ */ jsx7(TableOutlined, {}) })
-    }
-  );
+	const [open, setOpen] = React.useState(false);
+	const openCountRef = useRef(0);
+	const handleTableSelect = useCallback((rows, cols) => {
+		if (!editorView || rows <= 0 || cols <= 0) return;
+		editorView.focus();
+		const headerCells = Array(cols).fill(null).map((_, i) => ` 列${i + 1} `).join("|");
+		const separator = Array(cols).fill(" --- ").join("|");
+		const dataCell = Array(cols).fill(" 内容 ").join("|");
+		const table = `\n|${headerCells}|\n|${separator}|\n${Array(rows).fill(`|${dataCell}|`).join("\n")}\n`;
+		const { from } = editorView.state.selection.main;
+		editorView.dispatch({ changes: {
+			from,
+			insert: table
+		} });
+	}, [editorView]);
+	return /* @__PURE__ */ jsx(Dropdown, {
+		trigger: ["click"],
+		open,
+		onOpenChange: setOpen,
+		popupRender: () => {
+			openCountRef.current++;
+			return /* @__PURE__ */ jsx("div", {
+				style: { padding: 4 },
+				onClick: (e) => e.stopPropagation(),
+				children: /* @__PURE__ */ jsx(TablePicker, { onSelect: (size) => {
+					handleTableSelect(size.rows, size.cols);
+					setOpen(false);
+				} }, openCountRef.current)
+			});
+		},
+		placement: "bottomLeft",
+		children: /* @__PURE__ */ jsx(Button, {
+			className: "toolbar-button",
+			type: "text",
+			size: "small",
+			title: "表格",
+			children: /* @__PURE__ */ jsx(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);
-  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, {})
-        }
-      )
-    ] });
-  }, [fullscreen, onToggleFullscreen]);
-  function isSeparator(item) {
-    return !!(!item.id && item.separatorBefore);
-  }
-  return /* @__PURE__ */ jsxs5("div", { className: "toolbar", children: [
-    config.map((item, idx) => {
-      if (isSeparator(item)) {
-        return /* @__PURE__ */ jsx8("div", { className: "toolbar-separator" }, `sep-${idx}`);
-      }
-      return /* @__PURE__ */ jsx8(
-        ToolbarItemRenderer,
-        {
-          item,
-          onClick: handleClick
-        },
-        item.id
-      );
-    }),
-    /* @__PURE__ */ jsx8("div", { className: "toolbar-separator" }),
-    /* @__PURE__ */ jsx8(TableDropdown, { editorView }),
-    renderFullscreen()
-  ] });
+//#endregion
+//#region src/components/Toolbar/index.tsx
+function Toolbar({ editorView, fullscreen = true, onToggleFullscreen, extraItems, uploadConfig }) {
+	const { config, handleClick } = useToolbar(editorView, {
+		extraItems,
+		uploadConfig
+	});
+	const renderFullscreen = useCallback(() => {
+		if (!onToggleFullscreen) return null;
+		return /* @__PURE__ */ jsx(Button, {
+			className: "toolbar-button",
+			type: "text",
+			size: "small",
+			title: fullscreen ? "退出全屏" : "全屏",
+			onClick: () => {
+				onToggleFullscreen();
+			},
+			children: /* @__PURE__ */ jsx(fullscreen ? FullscreenExitOutlined : FullscreenOutlined, {})
+		});
+	}, [fullscreen, onToggleFullscreen]);
+	function isSeparator(item) {
+		return !!(!item.id && item.separatorBefore);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "toolbar",
+		children: [
+			config.map((item, idx) => {
+				if (isSeparator(item)) return /* @__PURE__ */ jsx("div", { className: "toolbar-separator" }, `sep-${idx}`);
+				return /* @__PURE__ */ jsx(ToolbarItemRenderer, {
+					item,
+					onClick: handleClick
+				}, item.id);
+			}),
+			/* @__PURE__ */ jsx(TableDropdown, { editorView }),
+			renderFullscreen()
+		]
+	});
 }
-
-// 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";
+//#endregion
+//#region src/components/Dialog/EditDialog.tsx
+/**
+* 属性编辑弹窗组件
+* 根据组件 schema 的 renderDialog 函数渲染弹窗内容
+*/
 function EditDialog({ visible, typeName, currentProps, onSave, onClose }) {
-  const schema = componentRegistry_default.get(typeName);
-  const [formProps, setFormProps] = useState2({});
-  const mergedProps = useMemo2(() => {
-    var _a;
-    if (!schema) return currentProps;
-    const defaults = {};
-    for (const field of schema.fields) {
-      defaults[field.key] = (_a = field.defaultValue) != null ? _a : "";
-    }
-    return { ...defaults, ...currentProps };
-  }, [schema, currentProps]);
-  const handleDialogChange = (key, value) => {
-    setFormProps((prev) => ({ ...prev, [key]: value }));
-  };
-  const handleOk = () => {
-    const finalProps = visible ? { ...mergedProps, ...formProps } : mergedProps;
-    onSave(finalProps);
-    setFormProps({});
-  };
-  const handleClose = () => {
-    setFormProps({});
-    onClose();
-  };
-  if (!schema) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx9(
-    Modal,
-    {
-      title: `${schema.label} \u5C5E\u6027\u7F16\u8F91`,
-      open: visible,
-      onOk: handleOk,
-      onCancel: handleClose,
-      okText: "\u4FDD\u5B58",
-      cancelText: "\u53D6\u6D88",
-      children: schema.renderDialog(visible ? { ...mergedProps, ...formProps } : mergedProps, handleDialogChange)
-    }
-  );
+	const schema = componentRegistry.get(typeName);
+	const [formProps, setFormProps] = useState({});
+	const mergedProps = useMemo(() => {
+		if (!schema) return currentProps;
+		const defaults = {};
+		for (const field of schema.fields || []) defaults[field.key] = field.defaultValue ?? "";
+		return {
+			...defaults,
+			...currentProps
+		};
+	}, [schema, currentProps]);
+	const handleDialogChange = (key, value) => {
+		setFormProps((prev) => ({
+			...prev,
+			[key]: value
+		}));
+	};
+	const handleOk = () => {
+		onSave(visible ? {
+			...mergedProps,
+			...formProps
+		} : mergedProps);
+		setFormProps({});
+	};
+	const handleClose = () => {
+		setFormProps({});
+		onClose();
+	};
+	if (!schema || !schema.renderDialog) return null;
+	return /* @__PURE__ */ jsx(Modal, {
+		title: `${schema.label} 属性编辑`,
+		open: visible,
+		onOk: handleOk,
+		onCancel: handleClose,
+		okText: "保存",
+		cancelText: "取消",
+		children: schema.renderDialog(visible ? {
+			...mergedProps,
+			...formProps
+		} : mergedProps, handleDialogChange)
+	});
 }
-
-// src/utils/writeContainer.ts
+//#endregion
+//#region src/utils/writeContainer.ts
+/**
+* 从属性对象生成 JSON 属性行。
+* 格式: { key: 'value', key2: 'value2' }
+*/
 function writeContainerProps(props) {
-  const entries = Object.entries(props).map(([k, v]) => `${k}: '${v}'`).join(", ");
-  return entries ? `{ ${entries} }` : "{}";
+	const entries = Object.entries(props).map(([k, v]) => `${k}: '${v}'`).join(", ");
+	return entries ? `{ ${entries} }` : "{}";
 }
+/**
+* 更新编辑器文档中的容器属性。
+* 替换 JSON 属性行（::: 打开行之后的一行）为新属性。
+*/
 function updateContainerProps(view, propsLineFrom, propsLineTo, newProps) {
-  const newPropsLine = writeContainerProps(newProps);
-  view.dispatch({
-    changes: {
-      from: propsLineFrom,
-      to: propsLineTo,
-      insert: newPropsLine
-    }
-  });
+	const newPropsLine = writeContainerProps(newProps);
+	view.dispatch({ changes: {
+		from: propsLineFrom,
+		to: propsLineTo,
+		insert: newPropsLine
+	} });
 }
+/**
+* 在当前光标位置插入新容器。
+* 创建 :::type 打开行 + JSON 属性 + ::: 关闭行的结构。
+*/
 function insertContainer(view, typeName, defaultProps) {
-  const { from } = view.state.selection.main;
-  const propsLine = writeContainerProps(defaultProps);
-  const container = `:::${typeName}
-${propsLine}
-:::
-`;
-  view.dispatch({ changes: { from, insert: container } });
+	const { from } = view.state.selection.main;
+	const container = `:::${typeName}\n${writeContainerProps(defaultProps)}\n:::\n`;
+	view.dispatch({ changes: {
+		from,
+		insert: container
+	} });
 }
-
-// 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);
-  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) => {
-        console.error("\u9000\u51FA\u5168\u5C4F\u5931\u8D25:", e);
-      });
-    } else {
-      const el = document.documentElement;
-      const requestMethod = el.requestFullscreen || el.webkitRequestFullscreen || el.mozRequestFullScreen || el.msRequestFullscreen;
-      if (requestMethod) {
-        requestMethod.call(el).catch((e) => {
-          console.error("\u8FDB\u5165\u5168\u5C4F\u5931\u8D25:", e);
-        });
-      }
-    }
-  }, []);
-  useEffect4(() => {
-    const handleFullscreenChange = () => {
-      setFullscreen(!!document.fullscreenElement);
-    };
-    document.addEventListener("fullscreenchange", handleFullscreenChange);
-    document.addEventListener("webkitfullscreenchange", handleFullscreenChange);
-    return () => {
-      document.removeEventListener("fullscreenchange", handleFullscreenChange);
-      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;
-    if (!source || !target) return;
-    let rafId = null;
-    const listener = () => {
-      if (rafId) return;
-      rafId = requestAnimationFrame(() => {
-        const s = scrollDOMRef.current;
-        const t = previewElRef.current;
-        if (!s || !t) {
-          rafId = null;
-          return;
-        }
-        const sourceScrollHeight = s.scrollHeight - s.clientHeight;
-        if (sourceScrollHeight <= 0) {
-          rafId = null;
-          return;
-        }
-        const ratio = s.scrollTop / sourceScrollHeight;
-        const targetScrollHeight = t.scrollHeight - t.clientHeight;
-        if (targetScrollHeight > 0) {
-          t.scrollTop = ratio * targetScrollHeight;
-        }
-        rafId = null;
-      });
-    };
-    source.addEventListener("scroll", listener, { passive: true });
-    return () => {
-      source.removeEventListener("scroll", listener);
-      if (rafId) cancelAnimationFrame(rafId);
-    };
-  }, [previewElRef.current]);
-  const handlePreviewRef = useCallback5((node) => {
-    previewElRef.current = node;
-  }, []);
-  const handleViewReady = useCallback5((view) => {
-    setEditorView(view);
-  }, []);
-  const handleEditContainer = useCallback5((_view, typeName, propsLineFrom, propsLineTo, currentProps) => {
-    setDialogTypeName(typeName);
-    setDialogProps({ ...currentProps });
-    setDialogPropsRange([propsLineFrom, propsLineTo]);
-    setDialogVisible(true);
-  }, []);
-  const handleDialogSave = useCallback5((newProps) => {
-    setDialogVisible(false);
-    if (editorView) {
-      updateContainerProps(editorView, dialogPropsRange[0], dialogPropsRange[1], newProps);
-    }
-  }, [editorView, dialogPropsRange]);
-  const handleDialogClose = useCallback5(() => {
-    setDialogVisible(false);
-  }, []);
-  return /* @__PURE__ */ jsxs6("div", { className: fullscreen ? "app fullscreen" : "app", children: [
-    /* @__PURE__ */ jsx10(
-      Toolbar,
-      {
-        editorView,
-        fullscreen,
-        onToggleFullscreen: fullscreenProp ? toggleFullscreen : void 0,
-        extraItems: extraToolbarItems
-      }
-    ),
-    showPreview ? /* @__PURE__ */ jsx10(
-      SplitPanels,
-      {
-        leftPanel: /* @__PURE__ */ jsx10(
-          Editor,
-          {
-            value: content,
-            onChange: internalSetContent,
-            onScrollReady: handleScrollReady,
-            onViewReady: handleViewReady,
-            onEditContainer: handleEditContainer
-          }
-        ),
-        rightPanel: /* @__PURE__ */ jsx10(
-          Preview_default,
-          {
-            content,
-            ref: handlePreviewRef,
-            previewOptions
-          }
-        )
-      }
-    ) : /* @__PURE__ */ jsx10(
-      Editor,
-      {
-        value: content,
-        onChange: internalSetContent,
-        onScrollReady: handleScrollReady,
-        onViewReady: handleViewReady,
-        onEditContainer: handleEditContainer
-      }
-    ),
-    /* @__PURE__ */ jsx10(
-      EditDialog,
-      {
-        visible: dialogVisible,
-        typeName: dialogTypeName,
-        currentProps: dialogProps,
-        onSave: handleDialogSave,
-        onClose: handleDialogClose
-      }
-    )
-  ] });
+//#endregion
+//#region src/hooks/useFullscreen.ts
+function useFullscreen() {
+	const [fullscreen, setFullscreen] = useState(false);
+	const toggleFullscreen = useCallback(() => {
+		if (document.fullscreenElement) document.exitFullscreen().catch((e) => {
+			console.error("退出全屏失败:", e);
+		});
+		else {
+			const el = document.documentElement;
+			const requestMethod = el.requestFullscreen || el.webkitRequestFullscreen || el.mozRequestFullScreen || el.msRequestFullscreen;
+			if (requestMethod) requestMethod.call(el).catch((e) => {
+				console.error("进入全屏失败:", e);
+			});
+		}
+	}, []);
+	useEffect(() => {
+		const handleFullscreenChange = () => {
+			setFullscreen(!!document.fullscreenElement);
+		};
+		document.addEventListener("fullscreenchange", handleFullscreenChange);
+		document.addEventListener("webkitfullscreenchange", handleFullscreenChange);
+		return () => {
+			document.removeEventListener("fullscreenchange", handleFullscreenChange);
+			document.removeEventListener("webkitfullscreenchange", handleFullscreenChange);
+		};
+	}, []);
+	return {
+		fullscreen,
+		toggleFullscreen
+	};
+}
+//#endregion
+//#region src/hooks/useScrollSync.ts
+/**
+* 滚动同步 Hook
+* 将源滚动容器的滚动位置同步到目标预览容器
+*/
+function useScrollSync(sourceRef, targetRef) {
+	const rafIdRef = useRef(null);
+	useEffect(() => {
+		const source = sourceRef.current;
+		const target = targetRef.current;
+		if (!source || !target) return;
+		const listener = () => {
+			if (rafIdRef.current) return;
+			rafIdRef.current = requestAnimationFrame(() => {
+				const s = sourceRef.current;
+				const t = targetRef.current;
+				if (!s || !t) {
+					rafIdRef.current = null;
+					return;
+				}
+				const sourceScrollHeight = s.scrollHeight - s.clientHeight;
+				if (sourceScrollHeight <= 0) {
+					rafIdRef.current = null;
+					return;
+				}
+				const ratio = s.scrollTop / sourceScrollHeight;
+				const targetScrollHeight = t.scrollHeight - t.clientHeight;
+				if (targetScrollHeight > 0) t.scrollTop = ratio * targetScrollHeight;
+				rafIdRef.current = null;
+			});
+		};
+		source.addEventListener("scroll", listener, { passive: true });
+		return () => {
+			source.removeEventListener("scroll", listener);
+			if (rafIdRef.current) cancelAnimationFrame(rafIdRef.current);
+		};
+	}, [sourceRef, targetRef]);
+}
+//#endregion
+//#region src/MarkdownEditor.tsx
+var MarkdownEditor_default = forwardRef(function MarkdownEditor({ defaultValue = "", value, onChange, showPreview = true, fullscreen: fullscreenProp = false, previewOptions, uploadConfig }, ref) {
+	const [content, setContent] = useState(value ?? defaultValue);
+	const [editorView, setEditorView] = useState(null);
+	const scrollDOMRef = useRef(null);
+	const previewElRef = useRef(null);
+	const { fullscreen, toggleFullscreen } = useFullscreen();
+	useScrollSync(scrollDOMRef, previewElRef);
+	const [dialogVisible, setDialogVisible] = useState(false);
+	const [dialogTypeName, setDialogTypeName] = useState("");
+	const [dialogProps, setDialogProps] = useState({});
+	const [dialogPropsRange, setDialogPropsRange] = useState([0, 0]);
+	useEffect(() => {
+		if (value !== void 0) setContent(value);
+	}, [value]);
+	const internalSetContent = useCallback((newContent) => {
+		setContent(newContent);
+		onChange?.(newContent);
+	}, [onChange]);
+	useImperativeHandle(ref, () => ({ getContent: () => content }), [content]);
+	const extraToolbarItems = componentRegistry.getAll().map((schema) => {
+		const defaultProps = {};
+		for (const field of schema?.fields ?? []) defaultProps[field.key] = field.defaultValue ?? "";
+		const iconNode = schema.icon ?? /* @__PURE__ */ jsx(ReadOutlined, {});
+		return {
+			id: `container-${schema.name}`,
+			label: schema.label,
+			icon: () => iconNode,
+			handler: (view, _state) => insertContainer(view, schema.name, defaultProps)
+		};
+	});
+	const handleScrollReady = useCallback((scrollDOM) => {
+		scrollDOMRef.current = scrollDOM;
+	}, []);
+	const handlePreviewRef = useCallback((node) => {
+		previewElRef.current = node;
+	}, []);
+	const handleViewReady = useCallback((view) => {
+		setEditorView(view);
+	}, []);
+	const handleEditContainer = useCallback((_view, typeName, propsLineFrom, propsLineTo, currentProps) => {
+		setDialogTypeName(typeName);
+		setDialogProps({ ...currentProps });
+		setDialogPropsRange([propsLineFrom, propsLineTo]);
+		setDialogVisible(true);
+	}, []);
+	const handleDialogSave = useCallback((newProps) => {
+		setDialogVisible(false);
+		if (editorView) updateContainerProps(editorView, dialogPropsRange[0], dialogPropsRange[1], newProps);
+	}, [editorView, dialogPropsRange]);
+	const handleDialogClose = useCallback(() => {
+		setDialogVisible(false);
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		className: fullscreen ? "app fullscreen" : "app",
+		children: [
+			/* @__PURE__ */ jsx(Toolbar, {
+				editorView,
+				fullscreen,
+				onToggleFullscreen: fullscreenProp ? toggleFullscreen : void 0,
+				extraItems: extraToolbarItems,
+				uploadConfig
+			}),
+			showPreview ? /* @__PURE__ */ jsx(SplitPanels, {
+				leftPanel: /* @__PURE__ */ jsx(Editor, {
+					value: content,
+					onChange: internalSetContent,
+					onScrollReady: handleScrollReady,
+					onViewReady: handleViewReady,
+					onEditContainer: handleEditContainer,
+					uploadConfig,
+					onMessageNoUploadConfig: () => message.warning("请先配置图片上传功能")
+				}),
+				rightPanel: /* @__PURE__ */ jsx(Preview, {
+					content,
+					ref: handlePreviewRef,
+					previewOptions
+				})
+			}) : /* @__PURE__ */ jsx(Editor, {
+				value: content,
+				onChange: internalSetContent,
+				onScrollReady: handleScrollReady,
+				onViewReady: handleViewReady,
+				onEditContainer: handleEditContainer,
+				uploadConfig,
+				onMessageNoUploadConfig: () => message.warning("请先配置图片上传功能")
+			}),
+			/* @__PURE__ */ jsx(EditDialog, {
+				visible: dialogVisible,
+				typeName: dialogTypeName,
+				currentProps: dialogProps,
+				onSave: handleDialogSave,
+				onClose: handleDialogClose
+			})
+		]
+	});
 });
-
-// src/hooks/useRegisterToolbar.ts
-import { useEffect as useEffect5 } from "react";
+//#endregion
+//#region src/hooks/useRegisterToolbar.ts
+/**
+* 注册自定义容器组件到工具栏。支持单个或批量注册。
+* 支持两种模式：
+* 
+* 1. 容器模式（linkCard）：name + fields + renderDialog
+*    插入 :::name 格式的容器，支持弹窗编辑属性
+* 
+* 2. 标签包裹模式：name + wrapTags
+*    插入简单的标签包裹文本，如 <plugin-container>...</plugin-container>
+* 
+* @example 容器模式
+* ```tsx
+* const schema: ComponentSchema = {
+*   name: 'alert',
+*   label: '警告框',
+*   icon: <AlertOutlined />,
+*   fields: [{ key: 'level', defaultValue: 'info' }],
+*   renderDialog: (props, onChange) => (
+*     <Input value={props.level} onChange={e => onChange('level', e.target.value)} />
+*   ),
+* }
+* 
+* function MyPage() {
+*   useRegisterToolbar(schema)
+*   return <MarkdownEditor />
+* }
+* ```
+* 
+* @example 标签包裹模式
+* ```tsx
+* function MyPage() {
+*   useRegisterToolbar({
+*     name: 'plugin-container',
+*     label: '自定义容器',
+*     icon: <AlertOutlined />,
+*     wrapTags: ['<plugin-container>', '</plugin-container>'],
+*   })
+*   return <MarkdownEditor />
+* }
+* ```
+* 
+* @example 批量注册
+* ```tsx
+* function MyPage() {
+*   useRegisterToolbar([schema1, schema2, schema3])
+*   return <MarkdownEditor />
+* }
+* ```
+*/
 function useRegisterToolbar(schemas) {
-  const schemaList = Array.isArray(schemas) ? schemas : [schemas];
-  useEffect5(() => {
-    schemaList.forEach((schema) => {
-      componentRegistry_default.register(schema.name, schema);
-    });
-    return () => {
-      schemaList.forEach((schema) => {
-        componentRegistry_default.unregister(schema.name);
-      });
-    };
-  }, [schemaList]);
+	const schemaList = Array.isArray(schemas) ? schemas : [schemas];
+	useEffect(() => {
+		schemaList.forEach((schema) => {
+			componentRegistry.register(schema.name, schema);
+		});
+		return () => {
+			schemaList.forEach((schema) => {
+				componentRegistry.unregister(schema.name);
+			});
+		};
+	}, [schemaList]);
 }
-export {
-  MarkdownEditor_default as MarkdownEditor,
-  useRegisterToolbar
-};
+//#endregion
+export { MarkdownEditor_default as MarkdownEditor, useRegisterToolbar };
+
 //# sourceMappingURL=index.js.map