@pactor-app/markdown 1.18.1 → 1.21.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -1
- package/dist/index.d.cts +3 -1
- package/dist/index.d.ts +3 -1
- package/package.json +10 -6
- package/styles.css +261 -0
package/README.md
CHANGED
|
@@ -26,7 +26,17 @@ import { MarkdownRenderer } from '@pactor-app/markdown';
|
|
|
26
26
|
<MarkdownRenderer content={'### 标题\n\n- 列表项\n\n| 表 | 格 |\n| - | - |\n| 1 | 2 |'} />;
|
|
27
27
|
```
|
|
28
28
|
|
|
29
|
-
支持：标题 / 段落 / 粗体 / 斜体 / 有序与无序列表 / GFM 表格与删除线 / 围栏代码块（`<pre><code class="language-xxx">`，供后续语法高亮扩展）与行内代码 / 引用 / 链接 / 图片。容器带基础 class
|
|
29
|
+
支持：标题 / 段落 / 粗体 / 斜体 / 有序与无序列表 / GFM 表格与删除线 / 围栏代码块（`<pre><code class="language-xxx">`，供后续语法高亮扩展）与行内代码 / 引用 / 链接 / 图片。容器带基础 class `pactor-markdown`。
|
|
30
|
+
|
|
31
|
+
## 内置样式
|
|
32
|
+
|
|
33
|
+
包内置一套可读性优先的排版样式（标题层级、表格斑马纹、代码块、引用、任务列表、KaTeX 溢出动滚等），引入即可生效：
|
|
34
|
+
|
|
35
|
+
```ts
|
|
36
|
+
import '@pactor-app/markdown/styles.css';
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
样式全部作用域在 `.pactor-markdown` 容器内：颜色 / 圆角经 `--pactor-markdown-*` 令牌解析，优先跟随 shadcn 语义令牌（`--foreground` / `--border` / `--primary` 等，暗色主题自动适配），无宿主主题时回退 GitHub 风格配色（跟随系统明暗）。宿主可重定义令牌或以更高优先级规则覆盖（如 `@pactor-app/chat` 的消息流主题）。启用 `math` 时仍需自行引入 `katex/dist/katex.min.css`。
|
|
30
40
|
|
|
31
41
|
## DSL 使用
|
|
32
42
|
|
package/dist/index.d.cts
CHANGED
|
@@ -23,7 +23,9 @@ interface MarkdownRendererProps {
|
|
|
23
23
|
}
|
|
24
24
|
/**
|
|
25
25
|
* Markdown 渲染器：标题 / 列表 / 表格（GFM）/ 代码块 / 引用 / 链接 / 图片 /
|
|
26
|
-
* 数学公式（KaTeX）。容器带基础 class
|
|
26
|
+
* 数学公式（KaTeX）。容器带基础 class `pactor-markdown`；内置排版样式见
|
|
27
|
+
* 包根 `styles.css`（`import '@pactor-app/markdown/styles.css'`），令牌化
|
|
28
|
+
* 设计可被宿主主题覆盖。
|
|
27
29
|
* 技术选型参考 DeepTutor web：react-markdown + remark-gfm + remark-math +
|
|
28
30
|
* rehype-katex + react-syntax-highlighter（Light 构建）。
|
|
29
31
|
*
|
package/dist/index.d.ts
CHANGED
|
@@ -23,7 +23,9 @@ interface MarkdownRendererProps {
|
|
|
23
23
|
}
|
|
24
24
|
/**
|
|
25
25
|
* Markdown 渲染器：标题 / 列表 / 表格（GFM）/ 代码块 / 引用 / 链接 / 图片 /
|
|
26
|
-
* 数学公式（KaTeX）。容器带基础 class
|
|
26
|
+
* 数学公式（KaTeX）。容器带基础 class `pactor-markdown`；内置排版样式见
|
|
27
|
+
* 包根 `styles.css`（`import '@pactor-app/markdown/styles.css'`），令牌化
|
|
28
|
+
* 设计可被宿主主题覆盖。
|
|
27
29
|
* 技术选型参考 DeepTutor web：react-markdown + remark-gfm + remark-math +
|
|
28
30
|
* rehype-katex + react-syntax-highlighter（Light 构建）。
|
|
29
31
|
*
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pactor-app/markdown",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.21.0",
|
|
4
4
|
"description": "Pactor Markdown module: safe Markdown renderer (react-markdown AST, no raw HTML) and DSL Markdown component adapter",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"pactor",
|
|
@@ -31,14 +31,18 @@
|
|
|
31
31
|
"types": "./dist/index.d.cts",
|
|
32
32
|
"default": "./dist/index.cjs"
|
|
33
33
|
}
|
|
34
|
-
}
|
|
34
|
+
},
|
|
35
|
+
"./styles.css": "./styles.css"
|
|
35
36
|
},
|
|
36
|
-
"sideEffects":
|
|
37
|
+
"sideEffects": [
|
|
38
|
+
"./styles.css"
|
|
39
|
+
],
|
|
37
40
|
"engines": {
|
|
38
41
|
"node": ">=18"
|
|
39
42
|
},
|
|
40
43
|
"files": [
|
|
41
|
-
"dist"
|
|
44
|
+
"dist",
|
|
45
|
+
"styles.css"
|
|
42
46
|
],
|
|
43
47
|
"publishConfig": {
|
|
44
48
|
"access": "public"
|
|
@@ -50,7 +54,7 @@
|
|
|
50
54
|
"rehype-katex": "^7.0.1",
|
|
51
55
|
"remark-gfm": "^4.0.1",
|
|
52
56
|
"remark-math": "^6.0.0",
|
|
53
|
-
"@pactor-app/core": "1.
|
|
57
|
+
"@pactor-app/core": "1.21.0"
|
|
54
58
|
},
|
|
55
59
|
"peerDependencies": {
|
|
56
60
|
"react": ">=18"
|
|
@@ -64,7 +68,7 @@
|
|
|
64
68
|
"jsdom": "^30.0.1",
|
|
65
69
|
"react": "^19.2.8",
|
|
66
70
|
"react-dom": "^19.2.8",
|
|
67
|
-
"@pactor-app/runtime": "1.
|
|
71
|
+
"@pactor-app/runtime": "1.21.0"
|
|
68
72
|
},
|
|
69
73
|
"scripts": {
|
|
70
74
|
"build": "tsup",
|
package/styles.css
ADDED
|
@@ -0,0 +1,261 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @pactor-app/markdown 内置排版样式：可读性优先的 Markdown 主题。
|
|
3
|
+
*
|
|
4
|
+
* 使用：import '@pactor-app/markdown/styles.css';
|
|
5
|
+
*
|
|
6
|
+
* 主题约定：
|
|
7
|
+
* - 全部规则作用域在 .pactor-markdown 容器内，不污染全局；
|
|
8
|
+
* - 颜色 / 圆角经 --pactor-markdown-* 令牌解析，优先引用 shadcn 语义
|
|
9
|
+
* 令牌（--foreground / --muted-foreground / --border / --muted /
|
|
10
|
+
* --primary / --radius），宿主（如 @pactor-app/ui 主题、暗色
|
|
11
|
+
* [data-pactor-theme='dark']）接入后自动跟随；
|
|
12
|
+
* - 无宿主主题时回退到 GitHub 风格浅色 / 暗色（light-dark() 跟随系统）；
|
|
13
|
+
* - 宿主可用更高优先级规则或重定义 --pactor-markdown-* 令牌覆盖
|
|
14
|
+
* （如 @pactor-app/chat 的 .pactor-chat-view .pactor-markdown 主题）。
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
.pactor-markdown {
|
|
18
|
+
--pactor-markdown-fg: var(--foreground, light-dark(#1f2328, #e6edf3));
|
|
19
|
+
--pactor-markdown-muted-fg: var(--muted-foreground, light-dark(#59636e, #9198a1));
|
|
20
|
+
--pactor-markdown-border: var(--border, light-dark(#d1d9e0, #3d444d));
|
|
21
|
+
--pactor-markdown-muted-bg: var(--muted, light-dark(#f6f8fa, #262c36));
|
|
22
|
+
--pactor-markdown-code-bg: var(--muted, light-dark(#eff1f3, #2a3139));
|
|
23
|
+
--pactor-markdown-link: var(--primary, light-dark(#0969da, #4493f8));
|
|
24
|
+
--pactor-markdown-quote-border: var(--border, light-dark(#d1d9e0, #3d444d));
|
|
25
|
+
--pactor-markdown-radius: var(--radius, 6px);
|
|
26
|
+
|
|
27
|
+
color: var(--pactor-markdown-fg);
|
|
28
|
+
line-height: 1.75;
|
|
29
|
+
overflow-wrap: break-word;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* 首尾元素去外边距，便于嵌入气泡 / 卡片等容器 */
|
|
33
|
+
.pactor-markdown > :first-child {
|
|
34
|
+
margin-top: 0;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.pactor-markdown > :last-child {
|
|
38
|
+
margin-bottom: 0;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* ---------- 标题 ---------- */
|
|
42
|
+
|
|
43
|
+
.pactor-markdown h1,
|
|
44
|
+
.pactor-markdown h2,
|
|
45
|
+
.pactor-markdown h3,
|
|
46
|
+
.pactor-markdown h4,
|
|
47
|
+
.pactor-markdown h5,
|
|
48
|
+
.pactor-markdown h6 {
|
|
49
|
+
margin: 1.4em 0 0.6em;
|
|
50
|
+
font-weight: 600;
|
|
51
|
+
line-height: 1.35;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.pactor-markdown h1 {
|
|
55
|
+
font-size: 1.5em;
|
|
56
|
+
padding-bottom: 0.3em;
|
|
57
|
+
border-bottom: 1px solid var(--pactor-markdown-border);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.pactor-markdown h2 {
|
|
61
|
+
font-size: 1.3em;
|
|
62
|
+
padding-bottom: 0.25em;
|
|
63
|
+
border-bottom: 1px solid var(--pactor-markdown-border);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.pactor-markdown h3 {
|
|
67
|
+
font-size: 1.15em;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.pactor-markdown h4 {
|
|
71
|
+
font-size: 1.05em;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.pactor-markdown h5,
|
|
75
|
+
.pactor-markdown h6 {
|
|
76
|
+
font-size: 1em;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.pactor-markdown h6 {
|
|
80
|
+
color: var(--pactor-markdown-muted-fg);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/* ---------- 段落与列表 ---------- */
|
|
84
|
+
|
|
85
|
+
.pactor-markdown p {
|
|
86
|
+
margin: 0.75em 0;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.pactor-markdown ul,
|
|
90
|
+
.pactor-markdown ol {
|
|
91
|
+
margin: 0.75em 0;
|
|
92
|
+
padding-left: 1.6em;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/* 显式声明项目符号：宿主带 Tailwind preflight 等 reset（list-style: none）时
|
|
96
|
+
* 依然保持列表语义可读 */
|
|
97
|
+
.pactor-markdown ul {
|
|
98
|
+
list-style: disc;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.pactor-markdown ul ul {
|
|
102
|
+
list-style: circle;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.pactor-markdown ul ul ul {
|
|
106
|
+
list-style: square;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.pactor-markdown ol {
|
|
110
|
+
list-style: decimal;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.pactor-markdown li::marker {
|
|
114
|
+
color: var(--pactor-markdown-muted-fg);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.pactor-markdown li + li {
|
|
118
|
+
margin-top: 0.3em;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.pactor-markdown li > ul,
|
|
122
|
+
.pactor-markdown li > ol {
|
|
123
|
+
margin: 0.3em 0;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
/* GFM 任务列表 */
|
|
127
|
+
.pactor-markdown li input[type='checkbox'] {
|
|
128
|
+
margin: 0 0.45em 0 0;
|
|
129
|
+
vertical-align: -0.1em;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.pactor-markdown li:has(> input[type='checkbox']:first-child) {
|
|
133
|
+
list-style: none;
|
|
134
|
+
margin-left: -1.6em;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
/* ---------- 引用 / 分割线 ---------- */
|
|
138
|
+
|
|
139
|
+
.pactor-markdown blockquote {
|
|
140
|
+
margin: 0.75em 0;
|
|
141
|
+
padding: 0.4em 1em;
|
|
142
|
+
border-left: 3px solid var(--pactor-markdown-quote-border);
|
|
143
|
+
border-radius: 0 var(--pactor-markdown-radius) var(--pactor-markdown-radius) 0;
|
|
144
|
+
background: var(--pactor-markdown-muted-bg);
|
|
145
|
+
color: var(--pactor-markdown-muted-fg);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.pactor-markdown blockquote > :first-child {
|
|
149
|
+
margin-top: 0;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.pactor-markdown blockquote > :last-child {
|
|
153
|
+
margin-bottom: 0;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.pactor-markdown hr {
|
|
157
|
+
margin: 1.5em 0;
|
|
158
|
+
border: 0;
|
|
159
|
+
border-top: 1px solid var(--pactor-markdown-border);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
/* ---------- 链接 / 强调 ---------- */
|
|
163
|
+
|
|
164
|
+
.pactor-markdown a {
|
|
165
|
+
color: var(--pactor-markdown-link);
|
|
166
|
+
text-decoration: none;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.pactor-markdown a:hover {
|
|
170
|
+
text-decoration: underline;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.pactor-markdown strong {
|
|
174
|
+
font-weight: 600;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.pactor-markdown mark {
|
|
178
|
+
padding: 0 0.2em;
|
|
179
|
+
border-radius: 3px;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
/* ---------- 代码 ---------- */
|
|
183
|
+
|
|
184
|
+
.pactor-markdown code,
|
|
185
|
+
.pactor-markdown pre {
|
|
186
|
+
font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas,
|
|
187
|
+
'Liberation Mono', monospace;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
/* 行内代码 */
|
|
191
|
+
.pactor-markdown :not(pre) > code {
|
|
192
|
+
padding: 0.15em 0.4em;
|
|
193
|
+
border-radius: 4px;
|
|
194
|
+
background: var(--pactor-markdown-code-bg);
|
|
195
|
+
font-size: 0.875em;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
/* 围栏代码块（含高亮后的 pre） */
|
|
199
|
+
.pactor-markdown pre {
|
|
200
|
+
margin: 0.85em 0;
|
|
201
|
+
padding: 12px 14px;
|
|
202
|
+
border: 1px solid var(--pactor-markdown-border);
|
|
203
|
+
border-radius: var(--pactor-markdown-radius);
|
|
204
|
+
background: var(--pactor-markdown-muted-bg);
|
|
205
|
+
font-size: 0.875em;
|
|
206
|
+
line-height: 1.6;
|
|
207
|
+
overflow-x: auto;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.pactor-markdown pre > code {
|
|
211
|
+
padding: 0;
|
|
212
|
+
border: 0;
|
|
213
|
+
background: transparent;
|
|
214
|
+
font-size: inherit;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
/* ---------- 表格（GFM） ---------- */
|
|
218
|
+
|
|
219
|
+
.pactor-markdown table {
|
|
220
|
+
display: block;
|
|
221
|
+
width: max-content;
|
|
222
|
+
max-width: 100%;
|
|
223
|
+
margin: 0.85em 0;
|
|
224
|
+
border-collapse: collapse;
|
|
225
|
+
overflow-x: auto;
|
|
226
|
+
font-size: 0.925em;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.pactor-markdown th,
|
|
230
|
+
.pactor-markdown td {
|
|
231
|
+
padding: 6px 14px;
|
|
232
|
+
border: 1px solid var(--pactor-markdown-border);
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.pactor-markdown th {
|
|
236
|
+
background: var(--pactor-markdown-muted-bg);
|
|
237
|
+
font-weight: 600;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.pactor-markdown tr:nth-child(even) td {
|
|
241
|
+
background: var(--pactor-markdown-muted-bg);
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
/* ---------- 图片 / 数学公式 ---------- */
|
|
245
|
+
|
|
246
|
+
.pactor-markdown img {
|
|
247
|
+
max-width: 100%;
|
|
248
|
+
border-radius: var(--pactor-markdown-radius);
|
|
249
|
+
box-sizing: border-box;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.pactor-markdown .katex {
|
|
253
|
+
font-size: 1.05em;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.pactor-markdown .katex-display {
|
|
257
|
+
margin: 0.85em 0;
|
|
258
|
+
padding: 4px 0;
|
|
259
|
+
overflow-x: auto;
|
|
260
|
+
overflow-y: hidden;
|
|
261
|
+
}
|