@pactor-app/markdown 1.59.0 → 1.60.0

package/README.md

@@ -54,10 +54,12 @@ function Demo() {
 }
 ```
 
-常用 props：`readOnly`（隐藏工具栏）、`toolbar={false}`、`placeholder`、`renderToolbar`（自定义工具栏内容）、`plugins`（追加 MDXEditor 插件）、`editorProps`（透传底层 props）。容器带基础 class `pactor-markdown-editor`。注意：编辑器体积较大且依赖浏览器 DOM API，SSR 场景请动态导入（如 `next/dynamic` 的 `ssr: false`）。
+常用 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
@@ -92,7 +94,7 @@ events:
         draft: '${event}'
 ```
 
-支持 props：`value` / `placeholder` / `readOnly` / `toolbar` / `autoFocus` / `className` / `style`。注意：编辑器依赖浏览器 DOM API 与 `@mdxeditor/editor/style.css`，仅适合 Page DSL（浏览器页面），不要注册进 Chat 的 Safe Registry。
+支持 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。
 
 ## 文档
 

package/dist/index.cjs

@@ -240,6 +240,20 @@ function MarkdownDslComponent({
 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, {}),
@@ -265,6 +279,7 @@ var MarkdownEditor = (0, import_react3.forwardRef)(
     autoFocus,
     className,
     style,
+    theme,
     toolbar = true,
     renderToolbar,
     plugins,
@@ -272,6 +287,38 @@ var MarkdownEditor = (0, import_react3.forwardRef)(
   }, 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);
@@ -285,7 +332,7 @@ var MarkdownEditor = (0, import_react3.forwardRef)(
       lastEmittedRef.current = next;
       onChange?.(next);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: containerClass, style, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    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,
@@ -331,7 +378,8 @@ var MarkdownEditor = (0, import_react3.forwardRef)(
           ] : [],
           ...plugins ?? []
         ],
-        ...editorProps
+        ...editorProps,
+        className: mdxEditorClassName
       }
     ) });
   }
@@ -347,7 +395,8 @@ function MarkdownEditorDslComponent({
   autoFocus,
   onChange,
   className,
-  style
+  style,
+  theme
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     MarkdownEditor,
@@ -359,7 +408,8 @@ function MarkdownEditorDslComponent({
       autoFocus,
       onChange,
       className,
-      style
+      style,
+      theme
     }
   );
 }

package/dist/index.d.cts

@@ -91,6 +91,8 @@ interface MarkdownEditorProps {
     className?: string;
     /** 通用：根节点内联样式 */
     style?: CSSProperties;
+    /** 主题：缺省跟随 documentElement 的 data-pactor-theme（与库换肤机制一致），可显式覆盖 */
+    theme?: 'light' | 'dark';
     /** 是否渲染工具栏，默认 true（readOnly 时强制隐藏） */
     toolbar?: boolean;
     /** 自定义工具栏内容：参数为默认工具栏节点 */
@@ -141,12 +143,14 @@ interface MarkdownEditorDslComponentProps {
     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, }: MarkdownEditorDslComponentProps): react.JSX.Element;
+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

@@ -91,6 +91,8 @@ interface MarkdownEditorProps {
     className?: string;
     /** 通用：根节点内联样式 */
     style?: CSSProperties;
+    /** 主题：缺省跟随 documentElement 的 data-pactor-theme（与库换肤机制一致），可显式覆盖 */
+    theme?: 'light' | 'dark';
     /** 是否渲染工具栏，默认 true（readOnly 时强制隐藏） */
     toolbar?: boolean;
     /** 自定义工具栏内容：参数为默认工具栏节点 */
@@ -141,12 +143,14 @@ interface MarkdownEditorDslComponentProps {
     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, }: MarkdownEditorDslComponentProps): react.JSX.Element;
+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

@@ -192,7 +192,7 @@ function MarkdownDslComponent({
 }
 
 // src/editor.tsx
-import { forwardRef, useEffect as useEffect2, useImperativeHandle, useRef } from "react";
+import { forwardRef, useEffect as useEffect2, useId, useImperativeHandle, useRef, useState as useState2 } from "react";
 import {
   BlockTypeSelect,
   BoldItalicUnderlineToggles,
@@ -218,6 +218,20 @@ import {
   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, {}),
@@ -243,6 +257,7 @@ var MarkdownEditor = forwardRef(
     autoFocus,
     className,
     style,
+    theme,
     toolbar = true,
     renderToolbar,
     plugins,
@@ -250,6 +265,38 @@ var MarkdownEditor = forwardRef(
   }, 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);
@@ -263,7 +310,7 @@ var MarkdownEditor = forwardRef(
       lastEmittedRef.current = next;
       onChange?.(next);
     };
-    return /* @__PURE__ */ jsx5("div", { className: containerClass, style, children: /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx5("div", { className: containerClass, style, "data-theme": resolvedTheme, children: /* @__PURE__ */ jsx5(
       MDXEditor,
       {
         ref: innerRef,
@@ -309,7 +356,8 @@ var MarkdownEditor = forwardRef(
           ] : [],
           ...plugins ?? []
         ],
-        ...editorProps
+        ...editorProps,
+        className: mdxEditorClassName
       }
     ) });
   }
@@ -325,7 +373,8 @@ function MarkdownEditorDslComponent({
   autoFocus,
   onChange,
   className,
-  style
+  style,
+  theme
 }) {
   return /* @__PURE__ */ jsx6(
     MarkdownEditor,
@@ -337,7 +386,8 @@ function MarkdownEditorDslComponent({
       autoFocus,
       onChange,
       className,
-      style
+      style,
+      theme
     }
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pactor-app/markdown",
-  "version": "1.59.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",
@@ -55,7 +55,7 @@
     "rehype-katex": "^7.0.1",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
-    "@pactor-app/core": "1.59.0"
+    "@pactor-app/core": "1.60.0"
   },
   "peerDependencies": {
     "react": ">=18"
@@ -69,7 +69,7 @@
     "jsdom": "^30.0.1",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "@pactor-app/runtime": "1.59.0"
+    "@pactor-app/runtime": "1.60.0"
   },
   "scripts": {
     "build": "tsup",

package/styles.css

@@ -290,3 +290,42 @@
   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);
+}