remons-markdown-editor 1.0.0-beta.1

package/dist/index.js

@@ -0,0 +1,1227 @@
+// src/MarkdownEditor.tsx
+import { useState as useState3, useRef as useRef4, useCallback as useCallback5, useEffect as useEffect3, 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 { 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
+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 {};
+  }
+}
+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;
+}
+
+// src/registry/componentRegistry.tsx
+import { Input, Select } from "antd";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ComponentRegistry = class {
+  constructor() {
+    this.schemas = /* @__PURE__ */ new Map();
+  }
+  /**
+   * 注册组件 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]
+});
+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;
+  }
+};
+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;
+  }
+};
+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;
+  }
+};
+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" });
+}
+
+// src/components/Preview/index.tsx
+import { forwardRef } from "react";
+import { registerAll, excludedSelectors } from "remons-markdown-plugins";
+import RenderMarkdown, { languagesCommon, initHighlighter } from "remons-render-markdown";
+import "remons-markdown-plugins/style.css";
+import "remons-render-markdown/dist/index.css";
+import { jsx as jsx3 } from "react/jsx-runtime";
+initHighlighter(languagesCommon);
+var Preview = forwardRef(({ content }, ref) => {
+  return /* @__PURE__ */ jsx3("div", { ref, className: "preview", children: /* @__PURE__ */ jsx3(RenderMarkdown, { content, isSlotMermaid: true, excludedSelectors, customRenderers: [(md) => md.use(registerAll)] }) });
+});
+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
+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() {
+  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" } });
+      }
+    }
+  ];
+}
+
+// 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 };
+}
+
+// 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";
+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, {})
+      }
+    ) })
+  ] });
+}
+
+// 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 useEffect2, 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;
+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);
+    }
+  }, []);
+  useEffect2(
+    () => () => {
+      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
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/Toolbar/renderers/TablePicker/TableDropdown.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+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, {}) })
+    }
+  );
+}
+
+// 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()
+  ] });
+}
+
+// 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";
+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)
+    }
+  );
+}
+
+// src/utils/writeContainer.ts
+function writeContainerProps(props) {
+  const entries = Object.entries(props).map(([k, v]) => `${k}: '${v}'`).join(", ");
+  return entries ? `{ ${entries} }` : "{}";
+}
+function updateContainerProps(view, propsLineFrom, propsLineTo, newProps) {
+  const newPropsLine = writeContainerProps(newProps);
+  view.dispatch({
+    changes: {
+      from: propsLineFrom,
+      to: propsLineTo,
+      insert: newPropsLine
+    }
+  });
+}
+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 } });
+}
+
+// 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
+}, 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]);
+  useEffect3(() => {
+    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);
+        });
+      }
+    }
+  }, []);
+  useEffect3(() => {
+    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;
+  }, []);
+  useEffect3(() => {
+    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
+          }
+        )
+      }
+    ) : /* @__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
+      }
+    )
+  ] });
+});
+
+// src/hooks/useRegisterToolbar.ts
+import { useEffect as useEffect4 } from "react";
+function useRegisterToolbar(schema) {
+  useEffect4(() => {
+    componentRegistry_default.register(schema.name, schema);
+    return () => {
+      componentRegistry_default.unregister(schema.name);
+    };
+  }, [schema]);
+}
+export {
+  MarkdownEditor_default as MarkdownEditor,
+  useRegisterToolbar
+};
+//# sourceMappingURL=index.js.map