@pactor-app/markdown 1.20.0 → 1.22.0

package/README.md

@@ -26,7 +26,17 @@ import { MarkdownRenderer } from '@pactor-app/markdown';
 <MarkdownRenderer content={'### 标题\n\n- 列表项\n\n| 表 | 格 |\n| - | - |\n| 1 | 2 |'} />;
 ```
 
-支持：标题 / 段落 / 粗体 / 斜体 / 有序与无序列表 / GFM 表格与删除线 / 围栏代码块（`<pre><code class="language-xxx">`，供后续语法高亮扩展）与行内代码 / 引用 / 链接 / 图片。容器带基础 class `@pactor-app/markdown`，样式由宿主主题决定。
+支持：标题 / 段落 / 粗体 / 斜体 / 有序与无序列表 / GFM 表格与删除线 / 围栏代码块（`<pre><code class="language-xxx">`，供后续语法高亮扩展）与行内代码 / 引用 / 链接 / 图片。容器带基础 class `pactor-markdown`。
+
+## 内置样式
+
+包内置一套可读性优先的排版样式（标题层级、表格斑马纹、代码块、引用、任务列表、KaTeX 溢出动滚等），引入即可生效：
+
+```ts
+import '@pactor-app/markdown/styles.css';
+```
+
+样式全部作用域在 `.pactor-markdown` 容器内：颜色 / 圆角经 `--pactor-markdown-*` 令牌解析，优先跟随 shadcn 语义令牌（`--foreground` / `--border` / `--primary` 等，暗色主题自动适配），无宿主主题时回退 GitHub 风格配色（跟随系统明暗）。宿主可重定义令牌或以更高优先级规则覆盖（如 `@pactor-app/chat` 的消息流主题）。启用 `math` 时仍需自行引入 `katex/dist/katex.min.css`。
 
 ## DSL 使用
 

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

@@ -23,7 +23,9 @@ interface MarkdownRendererProps {
 }
 /**
  * Markdown 渲染器：标题 / 列表 / 表格（GFM）/ 代码块 / 引用 / 链接 / 图片 /
- * 数学公式（KaTeX）。容器带基础 class `@pactor-app/markdown`，样式由宿主主题决定。
+ * 数学公式（KaTeX）。容器带基础 class `pactor-markdown`；内置排版样式见
+ * 包根 `styles.css`（`import '@pactor-app/markdown/styles.css'`），令牌化
+ * 设计可被宿主主题覆盖。
  * 技术选型参考 DeepTutor web：react-markdown + remark-gfm + remark-math +
  * rehype-katex + react-syntax-highlighter（Light 构建）。
  *
@@ -63,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

@@ -23,7 +23,9 @@ interface MarkdownRendererProps {
 }
 /**
  * Markdown 渲染器：标题 / 列表 / 表格（GFM）/ 代码块 / 引用 / 链接 / 图片 /
- * 数学公式（KaTeX）。容器带基础 class `@pactor-app/markdown`，样式由宿主主题决定。
+ * 数学公式（KaTeX）。容器带基础 class `pactor-markdown`；内置排版样式见
+ * 包根 `styles.css`（`import '@pactor-app/markdown/styles.css'`），令牌化
+ * 设计可被宿主主题覆盖。
  * 技术选型参考 DeepTutor web：react-markdown + remark-gfm + remark-math +
  * rehype-katex + react-syntax-highlighter（Light 构建）。
  *
@@ -63,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.20.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",
@@ -31,14 +31,18 @@
         "types": "./dist/index.d.cts",
         "default": "./dist/index.cjs"
       }
-    }
+    },
+    "./styles.css": "./styles.css"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "./styles.css"
+  ],
   "engines": {
     "node": ">=18"
   },
   "files": [
-    "dist"
+    "dist",
+    "styles.css"
   ],
   "publishConfig": {
     "access": "public"
@@ -50,7 +54,7 @@
     "rehype-katex": "^7.0.1",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
-    "@pactor-app/core": "1.20.0"
+    "@pactor-app/core": "1.22.0"
   },
   "peerDependencies": {
     "react": ">=18"
@@ -64,7 +68,7 @@
     "jsdom": "^30.0.1",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "@pactor-app/runtime": "1.20.0"
+    "@pactor-app/runtime": "1.22.0"
   },
   "scripts": {
     "build": "tsup",

package/styles.css

@@ -0,0 +1,261 @@
+/**
+ * @pactor-app/markdown 内置排版样式：可读性优先的 Markdown 主题。
+ *
+ * 使用：import '@pactor-app/markdown/styles.css';
+ *
+ * 主题约定：
+ * - 全部规则作用域在 .pactor-markdown 容器内，不污染全局；
+ * - 颜色 / 圆角经 --pactor-markdown-* 令牌解析，优先引用 shadcn 语义
+ *   令牌（--foreground / --muted-foreground / --border / --muted /
+ *   --primary / --radius），宿主（如 @pactor-app/ui 主题、暗色
+ *   [data-pactor-theme='dark']）接入后自动跟随；
+ * - 无宿主主题时回退到 GitHub 风格浅色 / 暗色（light-dark() 跟随系统）；
+ * - 宿主可用更高优先级规则或重定义 --pactor-markdown-* 令牌覆盖
+ *   （如 @pactor-app/chat 的 .pactor-chat-view .pactor-markdown 主题）。
+ */
+
+.pactor-markdown {
+  --pactor-markdown-fg: var(--foreground, light-dark(#1f2328, #e6edf3));
+  --pactor-markdown-muted-fg: var(--muted-foreground, light-dark(#59636e, #9198a1));
+  --pactor-markdown-border: var(--border, light-dark(#d1d9e0, #3d444d));
+  --pactor-markdown-muted-bg: var(--muted, light-dark(#f6f8fa, #262c36));
+  --pactor-markdown-code-bg: var(--muted, light-dark(#eff1f3, #2a3139));
+  --pactor-markdown-link: var(--primary, light-dark(#0969da, #4493f8));
+  --pactor-markdown-quote-border: var(--border, light-dark(#d1d9e0, #3d444d));
+  --pactor-markdown-radius: var(--radius, 6px);
+
+  color: var(--pactor-markdown-fg);
+  line-height: 1.75;
+  overflow-wrap: break-word;
+}
+
+/* 首尾元素去外边距，便于嵌入气泡 / 卡片等容器 */
+.pactor-markdown > :first-child {
+  margin-top: 0;
+}
+
+.pactor-markdown > :last-child {
+  margin-bottom: 0;
+}
+
+/* ---------- 标题 ---------- */
+
+.pactor-markdown h1,
+.pactor-markdown h2,
+.pactor-markdown h3,
+.pactor-markdown h4,
+.pactor-markdown h5,
+.pactor-markdown h6 {
+  margin: 1.4em 0 0.6em;
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+.pactor-markdown h1 {
+  font-size: 1.5em;
+  padding-bottom: 0.3em;
+  border-bottom: 1px solid var(--pactor-markdown-border);
+}
+
+.pactor-markdown h2 {
+  font-size: 1.3em;
+  padding-bottom: 0.25em;
+  border-bottom: 1px solid var(--pactor-markdown-border);
+}
+
+.pactor-markdown h3 {
+  font-size: 1.15em;
+}
+
+.pactor-markdown h4 {
+  font-size: 1.05em;
+}
+
+.pactor-markdown h5,
+.pactor-markdown h6 {
+  font-size: 1em;
+}
+
+.pactor-markdown h6 {
+  color: var(--pactor-markdown-muted-fg);
+}
+
+/* ---------- 段落与列表 ---------- */
+
+.pactor-markdown p {
+  margin: 0.75em 0;
+}
+
+.pactor-markdown ul,
+.pactor-markdown ol {
+  margin: 0.75em 0;
+  padding-left: 1.6em;
+}
+
+/* 显式声明项目符号：宿主带 Tailwind preflight 等 reset（list-style: none）时
+ * 依然保持列表语义可读 */
+.pactor-markdown ul {
+  list-style: disc;
+}
+
+.pactor-markdown ul ul {
+  list-style: circle;
+}
+
+.pactor-markdown ul ul ul {
+  list-style: square;
+}
+
+.pactor-markdown ol {
+  list-style: decimal;
+}
+
+.pactor-markdown li::marker {
+  color: var(--pactor-markdown-muted-fg);
+}
+
+.pactor-markdown li + li {
+  margin-top: 0.3em;
+}
+
+.pactor-markdown li > ul,
+.pactor-markdown li > ol {
+  margin: 0.3em 0;
+}
+
+/* GFM 任务列表 */
+.pactor-markdown li input[type='checkbox'] {
+  margin: 0 0.45em 0 0;
+  vertical-align: -0.1em;
+}
+
+.pactor-markdown li:has(> input[type='checkbox']:first-child) {
+  list-style: none;
+  margin-left: -1.6em;
+}
+
+/* ---------- 引用 / 分割线 ---------- */
+
+.pactor-markdown blockquote {
+  margin: 0.75em 0;
+  padding: 0.4em 1em;
+  border-left: 3px solid var(--pactor-markdown-quote-border);
+  border-radius: 0 var(--pactor-markdown-radius) var(--pactor-markdown-radius) 0;
+  background: var(--pactor-markdown-muted-bg);
+  color: var(--pactor-markdown-muted-fg);
+}
+
+.pactor-markdown blockquote > :first-child {
+  margin-top: 0;
+}
+
+.pactor-markdown blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+.pactor-markdown hr {
+  margin: 1.5em 0;
+  border: 0;
+  border-top: 1px solid var(--pactor-markdown-border);
+}
+
+/* ---------- 链接 / 强调 ---------- */
+
+.pactor-markdown a {
+  color: var(--pactor-markdown-link);
+  text-decoration: none;
+}
+
+.pactor-markdown a:hover {
+  text-decoration: underline;
+}
+
+.pactor-markdown strong {
+  font-weight: 600;
+}
+
+.pactor-markdown mark {
+  padding: 0 0.2em;
+  border-radius: 3px;
+}
+
+/* ---------- 代码 ---------- */
+
+.pactor-markdown code,
+.pactor-markdown pre {
+  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas,
+    'Liberation Mono', monospace;
+}
+
+/* 行内代码 */
+.pactor-markdown :not(pre) > code {
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+  background: var(--pactor-markdown-code-bg);
+  font-size: 0.875em;
+}
+
+/* 围栏代码块（含高亮后的 pre） */
+.pactor-markdown pre {
+  margin: 0.85em 0;
+  padding: 12px 14px;
+  border: 1px solid var(--pactor-markdown-border);
+  border-radius: var(--pactor-markdown-radius);
+  background: var(--pactor-markdown-muted-bg);
+  font-size: 0.875em;
+  line-height: 1.6;
+  overflow-x: auto;
+}
+
+.pactor-markdown pre > code {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  font-size: inherit;
+}
+
+/* ---------- 表格（GFM） ---------- */
+
+.pactor-markdown table {
+  display: block;
+  width: max-content;
+  max-width: 100%;
+  margin: 0.85em 0;
+  border-collapse: collapse;
+  overflow-x: auto;
+  font-size: 0.925em;
+}
+
+.pactor-markdown th,
+.pactor-markdown td {
+  padding: 6px 14px;
+  border: 1px solid var(--pactor-markdown-border);
+}
+
+.pactor-markdown th {
+  background: var(--pactor-markdown-muted-bg);
+  font-weight: 600;
+}
+
+.pactor-markdown tr:nth-child(even) td {
+  background: var(--pactor-markdown-muted-bg);
+}
+
+/* ---------- 图片 / 数学公式 ---------- */
+
+.pactor-markdown img {
+  max-width: 100%;
+  border-radius: var(--pactor-markdown-radius);
+  box-sizing: border-box;
+}
+
+.pactor-markdown .katex {
+  font-size: 1.05em;
+}
+
+.pactor-markdown .katex-display {
+  margin: 0.85em 0;
+  padding: 4px 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+}