@pactor-app/markdown 1.58.0 → 1.60.0

package/README.md

@@ -1,6 +1,6 @@
 # @pactor-app/markdown
 
-[Pactor](https://github.com/innospots/pactor) 的 Markdown 模块：安全的 Markdown 渲染器（`MarkdownRenderer`）与 DSL Markdown 组件适配（`type: Markdown`）。Chat 消息与 Page/Overlay DSL 共用同一渲染器。
+[Pactor](https://github.com/innospots/pactor) 的 Markdown 模块：安全的 Markdown 渲染器（`MarkdownRenderer`）、Markdown 富文本编辑器（`MarkdownEditor`，基于 [@mdxeditor/editor](https://github.com/mdx-editor/editor)）与 DSL Markdown 组件适配（`type: Markdown`）。Chat 消息与 Page/Overlay DSL 共用同一渲染器。
 
 ## 安装
 
@@ -38,6 +38,28 @@ import '@pactor-app/markdown/styles.css';
 
 样式全部作用域在 `.pactor-markdown` 容器内：颜色 / 圆角经 `--pactor-markdown-*` 令牌解析，优先跟随 shadcn 语义令牌（`--foreground` / `--border` / `--primary` 等，暗色主题自动适配），无宿主主题时回退 GitHub 风格配色（跟随系统明暗）。宿主可重定义令牌或以更高优先级规则覆盖（如 `@pactor-app/chat` 的消息流主题）。启用 `math` 时仍需自行引入 `katex/dist/katex.min.css`。
 
+## 编辑器（MarkdownEditor）
+
+受控 Markdown 富文本编辑器，基于 `@mdxeditor/editor`（Lexical 内核），默认带标题 / 列表 / 引用 / 链接 / 表格 / 代码块（CodeMirror）插件与工具栏：
+
+```tsx
+import { useState } from 'react';
+import { MarkdownEditor } from '@pactor-app/markdown';
+import '@mdxeditor/editor/style.css'; // 编辑器自身样式（必需）
+import '@pactor-app/markdown/styles.css'; // 容器边框 / 圆角等令牌化样式（可选）
+
+function Demo() {
+  const [value, setValue] = useState('# 标题\n\n开始编辑……');
+  return <MarkdownEditor value={value} onChange={setValue} />;
+}
+```
+
+常用 props：`readOnly`（隐藏工具栏）、`toolbar={false}`、`placeholder`、`theme`（`'light' | 'dark'`）、`renderToolbar`（自定义工具栏内容）、`plugins`（追加 MDXEditor 插件）、`editorProps`（透传底层 props）。容器带基础 class `pactor-markdown-editor`。注意：编辑器体积较大且依赖浏览器 DOM API，SSR 场景请动态导入（如 `next/dynamic` 的 `ssr: false`）。
+
+`value` 为受控语义：用户输入经 `onChange` 回流不重复导入（光标不跳动）；外部变更（如 DSL state 回写）经 `setMarkdown` 同步进编辑器。
+
+明暗模式：`theme` 缺省跟随 `documentElement` 上的 `data-pactor-theme`（pactor 换肤约定）并监听其变化自动切换，也可显式传 `'light' | 'dark'` 固定。主题 class 会同时应用到编辑根节点与 portal 弹层的 `.mdxeditor-popup-container`（工具栏下拉、链接弹层），且原地切换、不重建弹层容器——打开中的下拉不会因换肤丢失；容器上还带 `data-theme` 属性便于宿主样式覆盖。
+
 ## DSL 使用
 
 ```tsx
@@ -59,6 +81,21 @@ props:
 
 `props.content` 中的表达式（`${data.xxx}` 等）由 Renderer 在下发前解析，组件拿到的已是最终文本。Chat 的 Safe Registry 场景可复用同一 `registerMarkdownComponents`。
 
+`registerMarkdownComponents` 同时注册 `MarkdownEditor`（编辑器 DSL 类型）。`props.value` 支持表达式，`events.onChange` 的事件对象为新的 Markdown 字符串（`${event}`），典型写法是写回同一 state 形成受控回路：
+
+```yaml
+type: MarkdownEditor
+props:
+  value: '${state.draft}'
+events:
+  onChange:
+    - action: setState
+      params:
+        draft: '${event}'
+```
+
+支持 props：`value` / `placeholder` / `readOnly` / `toolbar` / `autoFocus` / `theme` / `className` / `style`。`theme` 与组件用法一致：缺省跟随 `data-pactor-theme`，也可在 YAML 中写 `theme: dark` 固定。注意：编辑器依赖浏览器 DOM API 与 `@mdxeditor/editor/style.css`，仅适合 Page DSL（浏览器页面），不要注册进 Chat 的 Safe Registry。
+
 ## 文档
 
 完整文档见 <https://github.com/innospots/pactor/tree/main/docs>（`pnpm docs:dev` 本地启动文档站）。

package/dist/index.cjs

@@ -32,7 +32,10 @@ var index_exports = {};
 __export(index_exports, {
   CodeBlock: () => CodeBlock,
   MARKDOWN_DSL_TYPE: () => MARKDOWN_DSL_TYPE,
+  MARKDOWN_EDITOR_DSL_TYPE: () => MARKDOWN_EDITOR_DSL_TYPE,
   MarkdownDslComponent: () => MarkdownDslComponent,
+  MarkdownEditor: () => MarkdownEditor,
+  MarkdownEditorDslComponent: () => MarkdownEditorDslComponent,
   MarkdownRenderer: () => MarkdownRenderer,
   isSafeUrl: () => isSafeUrl,
   registerCodeLanguages: () => registerCodeLanguages,
@@ -233,16 +236,199 @@ function MarkdownDslComponent({
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MarkdownRenderer, { content: content ?? "", className, style });
 }
 
+// src/editor.tsx
+var import_react3 = require("react");
+var import_editor = require("@mdxeditor/editor");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function usePactorTheme() {
+  const read = () => typeof document !== "undefined" && document.documentElement.getAttribute("data-pactor-theme") === "dark" ? "dark" : "light";
+  const [theme, setTheme] = (0, import_react3.useState)(read);
+  (0, import_react3.useEffect)(() => {
+    if (typeof document === "undefined") return;
+    const observer = new MutationObserver(() => setTheme(read()));
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-pactor-theme"]
+    });
+    return () => observer.disconnect();
+  }, []);
+  return theme;
+}
+var defaultToolbarContents = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_editor.UndoRedo, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_editor.Separator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_editor.BoldItalicUnderlineToggles, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_editor.CodeToggle, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_editor.Separator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_editor.ListsToggle, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_editor.Separator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_editor.BlockTypeSelect, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_editor.Separator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_editor.CreateLink, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_editor.InsertTable, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_editor.InsertThematicBreak, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_editor.InsertCodeBlock, {})
+] });
+var MarkdownEditor = (0, import_react3.forwardRef)(
+  function MarkdownEditor2({
+    value = "",
+    onChange,
+    onBlur,
+    placeholder,
+    readOnly = false,
+    autoFocus,
+    className,
+    style,
+    theme,
+    toolbar = true,
+    renderToolbar,
+    plugins,
+    editorProps
+  }, ref) {
+    const showToolbar = toolbar && !readOnly;
+    const containerClass = className ? `pactor-markdown-editor ${className}` : "pactor-markdown-editor";
+    const pactorTheme = usePactorTheme();
+    const resolvedTheme = theme ?? pactorTheme;
+    const instanceId = (0, import_react3.useId)().replace(/[^a-zA-Z0-9_-]/g, "");
+    const instanceClass = `pactor-markdown-editor-instance-${instanceId}`;
+    const mdxEditorClassName = [
+      "pactor-markdown-editor-root",
+      instanceClass,
+      editorProps?.className
+    ].filter(Boolean).join(" ");
+    (0, import_react3.useEffect)(() => {
+      if (typeof document === "undefined") return;
+      const selector = `.${instanceClass}`;
+      const applyTheme = () => {
+        document.querySelectorAll(selector).forEach((element) => {
+          element.classList.toggle("dark", resolvedTheme === "dark");
+          element.classList.toggle("light", resolvedTheme === "light");
+        });
+      };
+      applyTheme();
+      const observer = new MutationObserver((records) => {
+        for (const record of records) {
+          for (const node of record.addedNodes) {
+            if (node instanceof Element && (node.matches(selector) || node.querySelector(selector))) {
+              applyTheme();
+              return;
+            }
+          }
+        }
+      });
+      observer.observe(document.body, { childList: true, subtree: true });
+      return () => observer.disconnect();
+    }, [instanceClass, resolvedTheme]);
+    const innerRef = (0, import_react3.useRef)(null);
+    (0, import_react3.useImperativeHandle)(ref, () => innerRef.current, []);
+    const lastEmittedRef = (0, import_react3.useRef)(value);
+    (0, import_react3.useEffect)(() => {
+      if (value !== lastEmittedRef.current) {
+        lastEmittedRef.current = value;
+        innerRef.current?.setMarkdown(value);
+      }
+    }, [value]);
+    const handleChange = (next) => {
+      lastEmittedRef.current = next;
+      onChange?.(next);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: containerClass, style, "data-theme": resolvedTheme, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_editor.MDXEditor,
+      {
+        ref: innerRef,
+        markdown: value,
+        onChange: handleChange,
+        onBlur,
+        readOnly,
+        autoFocus,
+        placeholder,
+        contentEditableClassName: "pactor-markdown-editor-content",
+        plugins: [
+          (0, import_editor.headingsPlugin)(),
+          (0, import_editor.listsPlugin)(),
+          (0, import_editor.quotePlugin)(),
+          (0, import_editor.thematicBreakPlugin)(),
+          (0, import_editor.linkPlugin)(),
+          (0, import_editor.linkDialogPlugin)(),
+          (0, import_editor.tablePlugin)(),
+          (0, import_editor.codeBlockPlugin)({ defaultCodeBlockLanguage: "" }),
+          (0, import_editor.codeMirrorPlugin)({
+            codeBlockLanguages: {
+              "": "Plain text",
+              js: "JavaScript",
+              ts: "TypeScript",
+              tsx: "TSX",
+              css: "CSS",
+              html: "HTML",
+              json: "JSON",
+              yaml: "YAML",
+              bash: "Bash",
+              python: "Python",
+              go: "Go",
+              rust: "Rust",
+              sql: "SQL"
+            }
+          }),
+          (0, import_editor.markdownShortcutPlugin)(),
+          ...showToolbar ? [
+            (0, import_editor.toolbarPlugin)({
+              toolbarClassName: "pactor-markdown-editor-toolbar",
+              toolbarContents: () => renderToolbar ? renderToolbar(defaultToolbarContents) : defaultToolbarContents
+            })
+          ] : [],
+          ...plugins ?? []
+        ],
+        ...editorProps,
+        className: mdxEditorClassName
+      }
+    ) });
+  }
+);
+
+// src/dsl-editor-component.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function MarkdownEditorDslComponent({
+  value,
+  placeholder,
+  readOnly,
+  toolbar,
+  autoFocus,
+  onChange,
+  className,
+  style,
+  theme
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    MarkdownEditor,
+    {
+      value,
+      placeholder,
+      readOnly,
+      toolbar,
+      autoFocus,
+      onChange,
+      className,
+      style,
+      theme
+    }
+  );
+}
+
 // src/register.ts
 var MARKDOWN_DSL_TYPE = "Markdown";
+var MARKDOWN_EDITOR_DSL_TYPE = "MarkdownEditor";
 function registerMarkdownComponents(registry) {
   registry.register(MARKDOWN_DSL_TYPE, MarkdownDslComponent);
+  registry.register(MARKDOWN_EDITOR_DSL_TYPE, MarkdownEditorDslComponent);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CodeBlock,
   MARKDOWN_DSL_TYPE,
+  MARKDOWN_EDITOR_DSL_TYPE,
   MarkdownDslComponent,
+  MarkdownEditor,
+  MarkdownEditorDslComponent,
   MarkdownRenderer,
   isSafeUrl,
   registerCodeLanguages,

package/dist/index.d.cts

@@ -1,6 +1,7 @@
 import * as react from 'react';
-import { CSSProperties } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import { Registry } from '@pactor-app/core';
+import { MDXEditorProps, MDXEditorMethods } from '@mdxeditor/editor';
 
 /**
  * 协议白名单检查：相对路径（无协议）放行；
@@ -52,10 +53,13 @@ declare function MarkdownDslComponent({ content, className, style, }: MarkdownDs
 
 /** Markdown 组件的 DSL 类型名 */
 declare const MARKDOWN_DSL_TYPE = "Markdown";
+/** MarkdownEditor 组件的 DSL 类型名 */
+declare const MARKDOWN_EDITOR_DSL_TYPE = "MarkdownEditor";
 /**
- * 把 Markdown DSL 组件注册到给定的 Component Registry
+ * 把 Markdown / MarkdownEditor DSL 组件注册到给定的 Component Registry
  * （@pactor-app/runtime 的 `ComponentRegistry` 即 `Registry<unknown>`，
- * @pactor-app/chat 的 Safe Registry 场景亦可复用）。
+ * @pactor-app/chat 的 Safe Registry 场景亦可复用——注意 Safe Registry
+ * 场景通常只需只读渲染，可不注册 MarkdownEditor）。
  */
 declare function registerMarkdownComponents(registry: Registry<unknown>): void;
 
@@ -68,4 +72,85 @@ interface CodeBlockProps {
 /** fenced 代码块高亮渲染（Prism Light + one-light / one-dark 随深浅模式切换） */
 declare function CodeBlock({ language, children }: CodeBlockProps): react.JSX.Element;
 
-export { CodeBlock, type CodeBlockProps, MARKDOWN_DSL_TYPE, MarkdownDslComponent, type MarkdownDslComponentProps, MarkdownRenderer, type MarkdownRendererProps, isSafeUrl, registerCodeLanguages, registerMarkdownComponents };
+/** 工具栏自定义渲染：拿到默认工具栏内容，可包裹 / 替换 */
+type MarkdownEditorToolbarRender = (defaultContents: ReactNode) => ReactNode;
+interface MarkdownEditorProps {
+    /** Markdown 源文本（受控） */
+    value?: string;
+    /** 内容变化回调（编辑器内部每次变更后触发） */
+    onChange?: (value: string) => void;
+    /** 失焦回调 */
+    onBlur?: (event: FocusEvent) => void;
+    /** 占位文本 */
+    placeholder?: ReactNode;
+    /** 只读模式（隐藏工具栏） */
+    readOnly?: boolean;
+    /** 自动聚焦 */
+    autoFocus?: boolean;
+    /** 附加 className，与基础 class `pactor-markdown-editor` 并存 */
+    className?: string;
+    /** 通用：根节点内联样式 */
+    style?: CSSProperties;
+    /** 主题：缺省跟随 documentElement 的 data-pactor-theme（与库换肤机制一致），可显式覆盖 */
+    theme?: 'light' | 'dark';
+    /** 是否渲染工具栏，默认 true（readOnly 时强制隐藏） */
+    toolbar?: boolean;
+    /** 自定义工具栏内容：参数为默认工具栏节点 */
+    renderToolbar?: MarkdownEditorToolbarRender;
+    /**
+     * 追加的 MDXEditor 插件（插在默认插件集之后）。
+     * 默认插件集：headings / lists / quote / thematicBreak / link(+dialog) /
+     * table / codeBlock(+codeMirror) / markdownShortcut，以及工具栏。
+     */
+    plugins?: MDXEditorProps['plugins'];
+    /** 透传给底层 MDXEditor 的其余 props（会被上述显式 props 覆盖） */
+    editorProps?: Omit<MDXEditorProps, 'markdown' | 'onChange' | 'onBlur' | 'readOnly' | 'autoFocus' | 'placeholder' | 'plugins'>;
+}
+/**
+ * Markdown 富文本编辑器：基于 @mdxeditor/editor（Lexical 内核）封装，
+ * 受控 `value` / `onChange`，默认带 GFM 常用插件与工具栏。
+ *
+ * 样式：使用方需引入 `@mdxeditor/editor/style.css`（编辑器自身样式），
+ * 容器外观令牌化样式见包根 `styles.css`
+ * （`import '@pactor-app/markdown/styles.css'`），可被宿主主题覆盖。
+ *
+ * 注意：编辑器体积较大且依赖浏览器 DOM API，SSR 场景请动态导入
+ * （如 next/dynamic 的 `ssr: false`）。
+ */
+declare const MarkdownEditor: react.ForwardRefExoticComponent<MarkdownEditorProps & react.RefAttributes<MDXEditorMethods>>;
+
+interface MarkdownEditorDslComponentProps {
+    /**
+     * Markdown 内容（DSL props.value）。
+     * `${state.xxx}` 等表达式由 Renderer 在 props 下发前解析；
+     * 外部 value 变化经 setMarkdown 同步进编辑器（见 MarkdownEditor）。
+     */
+    value?: string;
+    /** 占位文本 */
+    placeholder?: string;
+    /** 只读模式（隐藏工具栏；权限 denied 策略 readonly 注入同名字段） */
+    readOnly?: boolean;
+    /** 是否渲染工具栏，默认 true */
+    toolbar?: boolean;
+    /** 自动聚焦 */
+    autoFocus?: boolean;
+    /**
+     * 内容变化回调（由 DSL events.onChange 绑定注入）：
+     * 事件对象为新的 Markdown 字符串，action 中以 `${event}` 引用。
+     */
+    onChange?: (value: string) => void;
+    /** 通用：根节点 class（与基础 class 并存） */
+    className?: string;
+    /** 通用：根节点内联样式 */
+    style?: CSSProperties;
+    /** 主题：缺省跟随 data-pactor-theme，可显式覆盖 */
+    theme?: 'light' | 'dark';
+}
+/**
+ * DSL 组件适配：`{ type: 'MarkdownEditor', props: { value }, events: { onChange } }`。
+ * 仅做 props 透传，编辑能力全部委托给 MarkdownEditor。
+ * 典型用法：value 绑定 state 表达式，onChange action 把 `${event}` 写回同一 state。
+ */
+declare function MarkdownEditorDslComponent({ value, placeholder, readOnly, toolbar, autoFocus, onChange, className, style, theme, }: MarkdownEditorDslComponentProps): react.JSX.Element;
+
+export { CodeBlock, type CodeBlockProps, MARKDOWN_DSL_TYPE, MARKDOWN_EDITOR_DSL_TYPE, MarkdownDslComponent, type MarkdownDslComponentProps, MarkdownEditor, MarkdownEditorDslComponent, type MarkdownEditorDslComponentProps, type MarkdownEditorProps, type MarkdownEditorToolbarRender, MarkdownRenderer, type MarkdownRendererProps, isSafeUrl, registerCodeLanguages, registerMarkdownComponents };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
-import { CSSProperties } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import { Registry } from '@pactor-app/core';
+import { MDXEditorProps, MDXEditorMethods } from '@mdxeditor/editor';
 
 /**
  * 协议白名单检查：相对路径（无协议）放行；
@@ -52,10 +53,13 @@ declare function MarkdownDslComponent({ content, className, style, }: MarkdownDs
 
 /** Markdown 组件的 DSL 类型名 */
 declare const MARKDOWN_DSL_TYPE = "Markdown";
+/** MarkdownEditor 组件的 DSL 类型名 */
+declare const MARKDOWN_EDITOR_DSL_TYPE = "MarkdownEditor";
 /**
- * 把 Markdown DSL 组件注册到给定的 Component Registry
+ * 把 Markdown / MarkdownEditor DSL 组件注册到给定的 Component Registry
  * （@pactor-app/runtime 的 `ComponentRegistry` 即 `Registry<unknown>`，
- * @pactor-app/chat 的 Safe Registry 场景亦可复用）。
+ * @pactor-app/chat 的 Safe Registry 场景亦可复用——注意 Safe Registry
+ * 场景通常只需只读渲染，可不注册 MarkdownEditor）。
  */
 declare function registerMarkdownComponents(registry: Registry<unknown>): void;
 
@@ -68,4 +72,85 @@ interface CodeBlockProps {
 /** fenced 代码块高亮渲染（Prism Light + one-light / one-dark 随深浅模式切换） */
 declare function CodeBlock({ language, children }: CodeBlockProps): react.JSX.Element;
 
-export { CodeBlock, type CodeBlockProps, MARKDOWN_DSL_TYPE, MarkdownDslComponent, type MarkdownDslComponentProps, MarkdownRenderer, type MarkdownRendererProps, isSafeUrl, registerCodeLanguages, registerMarkdownComponents };
+/** 工具栏自定义渲染：拿到默认工具栏内容，可包裹 / 替换 */
+type MarkdownEditorToolbarRender = (defaultContents: ReactNode) => ReactNode;
+interface MarkdownEditorProps {
+    /** Markdown 源文本（受控） */
+    value?: string;
+    /** 内容变化回调（编辑器内部每次变更后触发） */
+    onChange?: (value: string) => void;
+    /** 失焦回调 */
+    onBlur?: (event: FocusEvent) => void;
+    /** 占位文本 */
+    placeholder?: ReactNode;
+    /** 只读模式（隐藏工具栏） */
+    readOnly?: boolean;
+    /** 自动聚焦 */
+    autoFocus?: boolean;
+    /** 附加 className，与基础 class `pactor-markdown-editor` 并存 */
+    className?: string;
+    /** 通用：根节点内联样式 */
+    style?: CSSProperties;
+    /** 主题：缺省跟随 documentElement 的 data-pactor-theme（与库换肤机制一致），可显式覆盖 */
+    theme?: 'light' | 'dark';
+    /** 是否渲染工具栏，默认 true（readOnly 时强制隐藏） */
+    toolbar?: boolean;
+    /** 自定义工具栏内容：参数为默认工具栏节点 */
+    renderToolbar?: MarkdownEditorToolbarRender;
+    /**
+     * 追加的 MDXEditor 插件（插在默认插件集之后）。
+     * 默认插件集：headings / lists / quote / thematicBreak / link(+dialog) /
+     * table / codeBlock(+codeMirror) / markdownShortcut，以及工具栏。
+     */
+    plugins?: MDXEditorProps['plugins'];
+    /** 透传给底层 MDXEditor 的其余 props（会被上述显式 props 覆盖） */
+    editorProps?: Omit<MDXEditorProps, 'markdown' | 'onChange' | 'onBlur' | 'readOnly' | 'autoFocus' | 'placeholder' | 'plugins'>;
+}
+/**
+ * Markdown 富文本编辑器：基于 @mdxeditor/editor（Lexical 内核）封装，
+ * 受控 `value` / `onChange`，默认带 GFM 常用插件与工具栏。
+ *
+ * 样式：使用方需引入 `@mdxeditor/editor/style.css`（编辑器自身样式），
+ * 容器外观令牌化样式见包根 `styles.css`
+ * （`import '@pactor-app/markdown/styles.css'`），可被宿主主题覆盖。
+ *
+ * 注意：编辑器体积较大且依赖浏览器 DOM API，SSR 场景请动态导入
+ * （如 next/dynamic 的 `ssr: false`）。
+ */
+declare const MarkdownEditor: react.ForwardRefExoticComponent<MarkdownEditorProps & react.RefAttributes<MDXEditorMethods>>;
+
+interface MarkdownEditorDslComponentProps {
+    /**
+     * Markdown 内容（DSL props.value）。
+     * `${state.xxx}` 等表达式由 Renderer 在 props 下发前解析；
+     * 外部 value 变化经 setMarkdown 同步进编辑器（见 MarkdownEditor）。
+     */
+    value?: string;
+    /** 占位文本 */
+    placeholder?: string;
+    /** 只读模式（隐藏工具栏；权限 denied 策略 readonly 注入同名字段） */
+    readOnly?: boolean;
+    /** 是否渲染工具栏，默认 true */
+    toolbar?: boolean;
+    /** 自动聚焦 */
+    autoFocus?: boolean;
+    /**
+     * 内容变化回调（由 DSL events.onChange 绑定注入）：
+     * 事件对象为新的 Markdown 字符串，action 中以 `${event}` 引用。
+     */
+    onChange?: (value: string) => void;
+    /** 通用：根节点 class（与基础 class 并存） */
+    className?: string;
+    /** 通用：根节点内联样式 */
+    style?: CSSProperties;
+    /** 主题：缺省跟随 data-pactor-theme，可显式覆盖 */
+    theme?: 'light' | 'dark';
+}
+/**
+ * DSL 组件适配：`{ type: 'MarkdownEditor', props: { value }, events: { onChange } }`。
+ * 仅做 props 透传，编辑能力全部委托给 MarkdownEditor。
+ * 典型用法：value 绑定 state 表达式，onChange action 把 `${event}` 写回同一 state。
+ */
+declare function MarkdownEditorDslComponent({ value, placeholder, readOnly, toolbar, autoFocus, onChange, className, style, theme, }: MarkdownEditorDslComponentProps): react.JSX.Element;
+
+export { CodeBlock, type CodeBlockProps, MARKDOWN_DSL_TYPE, MARKDOWN_EDITOR_DSL_TYPE, MarkdownDslComponent, type MarkdownDslComponentProps, MarkdownEditor, MarkdownEditorDslComponent, type MarkdownEditorDslComponentProps, type MarkdownEditorProps, type MarkdownEditorToolbarRender, MarkdownRenderer, type MarkdownRendererProps, isSafeUrl, registerCodeLanguages, registerMarkdownComponents };

package/dist/index.js

@@ -191,15 +191,221 @@ function MarkdownDslComponent({
   return /* @__PURE__ */ jsx4(MarkdownRenderer, { content: content ?? "", className, style });
 }
 
+// src/editor.tsx
+import { forwardRef, useEffect as useEffect2, useId, useImperativeHandle, useRef, useState as useState2 } from "react";
+import {
+  BlockTypeSelect,
+  BoldItalicUnderlineToggles,
+  codeBlockPlugin,
+  codeMirrorPlugin,
+  CodeToggle,
+  CreateLink,
+  headingsPlugin,
+  InsertCodeBlock,
+  InsertTable,
+  InsertThematicBreak,
+  linkDialogPlugin,
+  linkPlugin,
+  listsPlugin,
+  ListsToggle,
+  markdownShortcutPlugin,
+  MDXEditor,
+  quotePlugin,
+  Separator,
+  tablePlugin,
+  thematicBreakPlugin,
+  toolbarPlugin,
+  UndoRedo
+} from "@mdxeditor/editor";
+import { Fragment as Fragment2, jsx as jsx5, jsxs } from "react/jsx-runtime";
+function usePactorTheme() {
+  const read = () => typeof document !== "undefined" && document.documentElement.getAttribute("data-pactor-theme") === "dark" ? "dark" : "light";
+  const [theme, setTheme] = useState2(read);
+  useEffect2(() => {
+    if (typeof document === "undefined") return;
+    const observer = new MutationObserver(() => setTheme(read()));
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-pactor-theme"]
+    });
+    return () => observer.disconnect();
+  }, []);
+  return theme;
+}
+var defaultToolbarContents = /* @__PURE__ */ jsxs(Fragment2, { children: [
+  /* @__PURE__ */ jsx5(UndoRedo, {}),
+  /* @__PURE__ */ jsx5(Separator, {}),
+  /* @__PURE__ */ jsx5(BoldItalicUnderlineToggles, {}),
+  /* @__PURE__ */ jsx5(CodeToggle, {}),
+  /* @__PURE__ */ jsx5(Separator, {}),
+  /* @__PURE__ */ jsx5(ListsToggle, {}),
+  /* @__PURE__ */ jsx5(Separator, {}),
+  /* @__PURE__ */ jsx5(BlockTypeSelect, {}),
+  /* @__PURE__ */ jsx5(Separator, {}),
+  /* @__PURE__ */ jsx5(CreateLink, {}),
+  /* @__PURE__ */ jsx5(InsertTable, {}),
+  /* @__PURE__ */ jsx5(InsertThematicBreak, {}),
+  /* @__PURE__ */ jsx5(InsertCodeBlock, {})
+] });
+var MarkdownEditor = forwardRef(
+  function MarkdownEditor2({
+    value = "",
+    onChange,
+    onBlur,
+    placeholder,
+    readOnly = false,
+    autoFocus,
+    className,
+    style,
+    theme,
+    toolbar = true,
+    renderToolbar,
+    plugins,
+    editorProps
+  }, ref) {
+    const showToolbar = toolbar && !readOnly;
+    const containerClass = className ? `pactor-markdown-editor ${className}` : "pactor-markdown-editor";
+    const pactorTheme = usePactorTheme();
+    const resolvedTheme = theme ?? pactorTheme;
+    const instanceId = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+    const instanceClass = `pactor-markdown-editor-instance-${instanceId}`;
+    const mdxEditorClassName = [
+      "pactor-markdown-editor-root",
+      instanceClass,
+      editorProps?.className
+    ].filter(Boolean).join(" ");
+    useEffect2(() => {
+      if (typeof document === "undefined") return;
+      const selector = `.${instanceClass}`;
+      const applyTheme = () => {
+        document.querySelectorAll(selector).forEach((element) => {
+          element.classList.toggle("dark", resolvedTheme === "dark");
+          element.classList.toggle("light", resolvedTheme === "light");
+        });
+      };
+      applyTheme();
+      const observer = new MutationObserver((records) => {
+        for (const record of records) {
+          for (const node of record.addedNodes) {
+            if (node instanceof Element && (node.matches(selector) || node.querySelector(selector))) {
+              applyTheme();
+              return;
+            }
+          }
+        }
+      });
+      observer.observe(document.body, { childList: true, subtree: true });
+      return () => observer.disconnect();
+    }, [instanceClass, resolvedTheme]);
+    const innerRef = useRef(null);
+    useImperativeHandle(ref, () => innerRef.current, []);
+    const lastEmittedRef = useRef(value);
+    useEffect2(() => {
+      if (value !== lastEmittedRef.current) {
+        lastEmittedRef.current = value;
+        innerRef.current?.setMarkdown(value);
+      }
+    }, [value]);
+    const handleChange = (next) => {
+      lastEmittedRef.current = next;
+      onChange?.(next);
+    };
+    return /* @__PURE__ */ jsx5("div", { className: containerClass, style, "data-theme": resolvedTheme, children: /* @__PURE__ */ jsx5(
+      MDXEditor,
+      {
+        ref: innerRef,
+        markdown: value,
+        onChange: handleChange,
+        onBlur,
+        readOnly,
+        autoFocus,
+        placeholder,
+        contentEditableClassName: "pactor-markdown-editor-content",
+        plugins: [
+          headingsPlugin(),
+          listsPlugin(),
+          quotePlugin(),
+          thematicBreakPlugin(),
+          linkPlugin(),
+          linkDialogPlugin(),
+          tablePlugin(),
+          codeBlockPlugin({ defaultCodeBlockLanguage: "" }),
+          codeMirrorPlugin({
+            codeBlockLanguages: {
+              "": "Plain text",
+              js: "JavaScript",
+              ts: "TypeScript",
+              tsx: "TSX",
+              css: "CSS",
+              html: "HTML",
+              json: "JSON",
+              yaml: "YAML",
+              bash: "Bash",
+              python: "Python",
+              go: "Go",
+              rust: "Rust",
+              sql: "SQL"
+            }
+          }),
+          markdownShortcutPlugin(),
+          ...showToolbar ? [
+            toolbarPlugin({
+              toolbarClassName: "pactor-markdown-editor-toolbar",
+              toolbarContents: () => renderToolbar ? renderToolbar(defaultToolbarContents) : defaultToolbarContents
+            })
+          ] : [],
+          ...plugins ?? []
+        ],
+        ...editorProps,
+        className: mdxEditorClassName
+      }
+    ) });
+  }
+);
+
+// src/dsl-editor-component.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function MarkdownEditorDslComponent({
+  value,
+  placeholder,
+  readOnly,
+  toolbar,
+  autoFocus,
+  onChange,
+  className,
+  style,
+  theme
+}) {
+  return /* @__PURE__ */ jsx6(
+    MarkdownEditor,
+    {
+      value,
+      placeholder,
+      readOnly,
+      toolbar,
+      autoFocus,
+      onChange,
+      className,
+      style,
+      theme
+    }
+  );
+}
+
 // src/register.ts
 var MARKDOWN_DSL_TYPE = "Markdown";
+var MARKDOWN_EDITOR_DSL_TYPE = "MarkdownEditor";
 function registerMarkdownComponents(registry) {
   registry.register(MARKDOWN_DSL_TYPE, MarkdownDslComponent);
+  registry.register(MARKDOWN_EDITOR_DSL_TYPE, MarkdownEditorDslComponent);
 }
 export {
   CodeBlock,
   MARKDOWN_DSL_TYPE,
+  MARKDOWN_EDITOR_DSL_TYPE,
   MarkdownDslComponent,
+  MarkdownEditor,
+  MarkdownEditorDslComponent,
   MarkdownRenderer,
   isSafeUrl,
   registerCodeLanguages,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pactor-app/markdown",
-  "version": "1.58.0",
+  "version": "1.60.0",
   "description": "Pactor Markdown module: safe Markdown renderer (react-markdown AST, no raw HTML) and DSL Markdown component adapter",
   "keywords": [
     "pactor",
@@ -48,13 +48,14 @@
     "access": "public"
   },
   "dependencies": {
+    "@mdxeditor/editor": "^4.3.4",
     "katex": "^0.18.4",
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^16.1.1",
     "rehype-katex": "^7.0.1",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
-    "@pactor-app/core": "1.58.0"
+    "@pactor-app/core": "1.60.0"
   },
   "peerDependencies": {
     "react": ">=18"
@@ -68,7 +69,7 @@
     "jsdom": "^30.0.1",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "@pactor-app/runtime": "1.58.0"
+    "@pactor-app/runtime": "1.60.0"
   },
   "scripts": {
     "build": "tsup",

package/styles.css

@@ -259,3 +259,73 @@
   overflow-x: auto;
   overflow-y: hidden;
 }
+
+/* ---------- MarkdownEditor（@mdxeditor/editor 容器外观） ---------- */
+
+/**
+ * 编辑器自身排版样式来自 `@mdxeditor/editor/style.css`（需使用方引入），
+ * 这里只定义容器边框 / 圆角 / 内边距，令牌与 .pactor-markdown 保持一致。
+ */
+.pactor-markdown-editor {
+  --pactor-markdown-fg: var(--foreground, light-dark(#1f2328, #e6edf3));
+  --pactor-markdown-border: var(--border, light-dark(#d1d9e0, #3d444d));
+  --pactor-markdown-radius: var(--radius, 6px);
+
+  border: 1px solid var(--pactor-markdown-border);
+  border-radius: var(--pactor-markdown-radius);
+  color: var(--pactor-markdown-fg);
+  overflow: hidden;
+}
+
+.pactor-markdown-editor:focus-within {
+  border-color: var(--primary, light-dark(#0969da, #4493f8));
+}
+
+.pactor-markdown-editor .pactor-markdown-editor-toolbar {
+  border-bottom: 1px solid var(--pactor-markdown-border);
+}
+
+.pactor-markdown-editor .pactor-markdown-editor-content {
+  padding: 8px 12px;
+  min-height: 8em;
+  outline: none;
+}
+
+/**
+ * 明暗主题：`pactor-markdown-editor-root` 由组件同时挂到 MDXEditor 的编辑
+ * 根节点与 portal 的 `.mdxeditor-popup-container`（下拉 / 链接弹层）。
+ * 组件按 data-pactor-theme（或显式 theme）追加 `.light` / `.dark`，
+ * 激活 MDXEditor 内置的 Radix 令牌组；这里再把其基础令牌接到宿主语义令牌，
+ * 使画布 / 工具栏 / 弹层与宿主主题同色（无宿主令牌时回退 Radix 色阶）。
+ * 选择器带元素名提升优先级，确保覆盖 MDXEditor 自身的 ._editorRoot_* 声明。
+ */
+div.pactor-markdown-editor-root.mdxeditor,
+div.pactor-markdown-editor-root.mdxeditor-popup-container {
+  --basePageBg: var(--card, var(--slate-1));
+  --baseBase: var(--card, var(--slate-1));
+  --baseBgSubtle: color-mix(in srgb, var(--foreground, var(--slate-12)) 5%, var(--card, var(--slate-1)));
+  --baseBg: color-mix(in srgb, var(--foreground, var(--slate-12)) 8%, var(--card, var(--slate-1)));
+  --baseBgHover: color-mix(in srgb, var(--foreground, var(--slate-12)) 11%, var(--card, var(--slate-1)));
+  --baseBgActive: color-mix(in srgb, var(--foreground, var(--slate-12)) 15%, var(--card, var(--slate-1)));
+  --baseLine: var(--border, var(--slate-6));
+  --baseBorder: var(--border, var(--slate-7));
+  --baseBorderHover: color-mix(in srgb, var(--foreground, var(--slate-12)) 24%, var(--border, var(--slate-7)));
+  --baseSolid: var(--muted-foreground, var(--slate-9));
+  --baseSolidHover: var(--foreground, var(--slate-10));
+  --baseText: var(--muted-foreground, var(--slate-11));
+  --baseTextContrast: var(--foreground, var(--slate-12));
+
+  /* 弹层脱离编辑根节点，需自带强调色令牌（与 MDXEditor 默认同一色阶） */
+  --accentBase: var(--blue-1);
+  --accentBgSubtle: var(--blue-2);
+  --accentBg: var(--blue-3);
+  --accentBgHover: var(--blue-4);
+  --accentBgActive: var(--blue-5);
+  --accentLine: var(--blue-6);
+  --accentBorder: var(--blue-7);
+  --accentBorderHover: var(--blue-8);
+  --accentSolid: var(--blue-9);
+  --accentSolidHover: var(--blue-10);
+  --accentText: var(--blue-11);
+  --accentTextContrast: var(--blue-12);
+}