@pactor-app/markdown 1.21.0 → 1.22.0

package/dist/index.cjs

@@ -48,6 +48,7 @@ var import_remark_math = __toESM(require("remark-math"), 1);
 
 // src/code-block.tsx
 var import_react = require("react");
+var import_react2 = require("react");
 var import_react_syntax_highlighter = require("react-syntax-highlighter");
 var import_bash = __toESM(require("react-syntax-highlighter/dist/esm/languages/prism/bash"), 1);
 var import_css = __toESM(require("react-syntax-highlighter/dist/esm/languages/prism/css"), 1);
@@ -59,6 +60,7 @@ var import_python = __toESM(require("react-syntax-highlighter/dist/esm/languages
 var import_tsx = __toESM(require("react-syntax-highlighter/dist/esm/languages/prism/tsx"), 1);
 var import_typescript = __toESM(require("react-syntax-highlighter/dist/esm/languages/prism/typescript"), 1);
 var import_yaml = __toESM(require("react-syntax-highlighter/dist/esm/languages/prism/yaml"), 1);
+var import_one_dark = __toESM(require("react-syntax-highlighter/dist/esm/styles/prism/one-dark"), 1);
 var import_one_light = __toESM(require("react-syntax-highlighter/dist/esm/styles/prism/one-light"), 1);
 var import_jsx_runtime = require("react/jsx-runtime");
 var LANGUAGES = {
@@ -91,12 +93,47 @@ function registerCodeLanguages() {
 function isCodeLanguageRegistered(language) {
   return language.toLowerCase() in LANGUAGES;
 }
+function resolveDarkMode() {
+  if (typeof document === "undefined") {
+    return false;
+  }
+  const theme = document.documentElement.getAttribute("data-pactor-theme");
+  if (theme === "dark") {
+    return true;
+  }
+  if (theme === "light") {
+    return false;
+  }
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function useDarkMode() {
+  const [dark, setDark] = (0, import_react.useState)(resolveDarkMode);
+  (0, import_react.useEffect)(() => {
+    if (typeof document === "undefined") {
+      return;
+    }
+    const update = () => setDark(resolveDarkMode());
+    const observer = new MutationObserver(update);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-pactor-theme"]
+    });
+    const media = window.matchMedia?.("(prefers-color-scheme: dark)");
+    media?.addEventListener?.("change", update);
+    return () => {
+      observer.disconnect();
+      media?.removeEventListener?.("change", update);
+    };
+  }, []);
+  return dark;
+}
 function CodeBlock({ language, children }) {
+  const dark = useDarkMode();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_react_syntax_highlighter.PrismLight,
     {
       language: language.toLowerCase(),
-      style: import_one_light.default,
+      style: dark ? import_one_dark.default : import_one_light.default,
       customStyle: { margin: 0, background: "transparent", fontSize: "0.85em" },
       codeTagProps: { className: `language-${language.toLowerCase()}` },
       children: children.replace(/\n$/, "")
@@ -104,7 +141,7 @@ function CodeBlock({ language, children }) {
   );
 }
 function extractFencedCode(preChildren) {
-  if (!(0, import_react.isValidElement)(preChildren)) {
+  if (!(0, import_react2.isValidElement)(preChildren)) {
     return null;
   }
   const { className, children } = preChildren.props;

package/dist/index.d.cts

@@ -65,7 +65,7 @@ interface CodeBlockProps {
     language: string;
     children: string;
 }
-/** fenced 代码块高亮渲染（Prism Light + one-light 主题） */
+/** 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 };

package/dist/index.d.ts

@@ -65,7 +65,7 @@ interface CodeBlockProps {
     language: string;
     children: string;
 }
-/** fenced 代码块高亮渲染（Prism Light + one-light 主题） */
+/** 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 };

package/dist/index.js

@@ -5,6 +5,7 @@ import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 
 // src/code-block.tsx
+import { useEffect, useState } from "react";
 import { isValidElement } from "react";
 import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
 import bash from "react-syntax-highlighter/dist/esm/languages/prism/bash";
@@ -17,6 +18,7 @@ import python from "react-syntax-highlighter/dist/esm/languages/prism/python";
 import tsx from "react-syntax-highlighter/dist/esm/languages/prism/tsx";
 import typescript from "react-syntax-highlighter/dist/esm/languages/prism/typescript";
 import yaml from "react-syntax-highlighter/dist/esm/languages/prism/yaml";
+import oneDark from "react-syntax-highlighter/dist/esm/styles/prism/one-dark";
 import oneLight from "react-syntax-highlighter/dist/esm/styles/prism/one-light";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var LANGUAGES = {
@@ -49,12 +51,47 @@ function registerCodeLanguages() {
 function isCodeLanguageRegistered(language) {
   return language.toLowerCase() in LANGUAGES;
 }
+function resolveDarkMode() {
+  if (typeof document === "undefined") {
+    return false;
+  }
+  const theme = document.documentElement.getAttribute("data-pactor-theme");
+  if (theme === "dark") {
+    return true;
+  }
+  if (theme === "light") {
+    return false;
+  }
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function useDarkMode() {
+  const [dark, setDark] = useState(resolveDarkMode);
+  useEffect(() => {
+    if (typeof document === "undefined") {
+      return;
+    }
+    const update = () => setDark(resolveDarkMode());
+    const observer = new MutationObserver(update);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-pactor-theme"]
+    });
+    const media = window.matchMedia?.("(prefers-color-scheme: dark)");
+    media?.addEventListener?.("change", update);
+    return () => {
+      observer.disconnect();
+      media?.removeEventListener?.("change", update);
+    };
+  }, []);
+  return dark;
+}
 function CodeBlock({ language, children }) {
+  const dark = useDarkMode();
   return /* @__PURE__ */ jsx2(
     SyntaxHighlighter,
     {
       language: language.toLowerCase(),
-      style: oneLight,
+      style: dark ? oneDark : oneLight,
       customStyle: { margin: 0, background: "transparent", fontSize: "0.85em" },
       codeTagProps: { className: `language-${language.toLowerCase()}` },
       children: children.replace(/\n$/, "")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pactor-app/markdown",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "description": "Pactor Markdown module: safe Markdown renderer (react-markdown AST, no raw HTML) and DSL Markdown component adapter",
   "keywords": [
     "pactor",
@@ -54,7 +54,7 @@
     "rehype-katex": "^7.0.1",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
-    "@pactor-app/core": "1.21.0"
+    "@pactor-app/core": "1.22.0"
   },
   "peerDependencies": {
     "react": ">=18"
@@ -68,7 +68,7 @@
     "jsdom": "^30.0.1",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "@pactor-app/runtime": "1.21.0"
+    "@pactor-app/runtime": "1.22.0"
   },
   "scripts": {
     "build": "tsup",