ds-markdown 0.0.15-beta.1 → 0.1.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.en.md +65 -12
- package/README.ja.md +3 -1
- package/README.ko.md +1 -0
- package/README.md +82 -173
- package/dist/cjs/MarkdownCMD/index.js +2 -2
- package/dist/cjs/MarkdownCMD/index.js.map +1 -1
- package/dist/cjs/components/HighReactMarkdown/index.d.ts +2 -1
- package/dist/cjs/components/HighReactMarkdown/index.js +31 -18
- package/dist/cjs/components/HighReactMarkdown/index.js.map +1 -1
- package/dist/cjs/constant.d.ts +2 -0
- package/dist/cjs/constant.js +3 -1
- package/dist/cjs/constant.js.map +1 -1
- package/dist/cjs/defined.d.ts +9 -4
- package/dist/cjs/hooks/useTypingTask.d.ts +2 -2
- package/dist/cjs/index.d.ts +2 -2
- package/dist/cjs/plugins/index.d.ts +4 -0
- package/dist/cjs/plugins/index.js +24 -0
- package/dist/cjs/plugins/index.js.map +1 -0
- package/dist/esm/MarkdownCMD/index.js +2 -2
- package/dist/esm/MarkdownCMD/index.js.map +1 -1
- package/dist/esm/components/HighReactMarkdown/index.d.ts +2 -1
- package/dist/esm/components/HighReactMarkdown/index.js +31 -18
- package/dist/esm/components/HighReactMarkdown/index.js.map +1 -1
- package/dist/esm/constant.d.ts +2 -0
- package/dist/esm/constant.js +2 -0
- package/dist/esm/constant.js.map +1 -1
- package/dist/esm/defined.d.ts +9 -4
- package/dist/esm/hooks/useTypingTask.d.ts +2 -2
- package/dist/esm/index.d.ts +2 -2
- package/dist/esm/plugins/index.d.ts +4 -0
- package/dist/esm/plugins/index.js +17 -0
- package/dist/esm/plugins/index.js.map +1 -0
- package/package.json +7 -2
package/README.en.md
CHANGED
|
@@ -49,6 +49,7 @@ A React component designed specifically for modern AI applications, providing sm
|
|
|
49
49
|
### 🧮 **Mathematical Formula Support**
|
|
50
50
|
|
|
51
51
|
- **KaTeX Integration**: High-performance mathematical formula rendering
|
|
52
|
+
- **Plugin Architecture**: Flexible configuration through plugin system
|
|
52
53
|
- **Dual Syntax Support**: `$...$` and `\[...\]` delimiters
|
|
53
54
|
- **Streaming Compatible**: Perfect support for mathematical formulas in typing animations
|
|
54
55
|
- **Theme Adaptation**: Automatic adaptation to light/dark themes
|
|
@@ -108,12 +109,13 @@ function App() {
|
|
|
108
109
|
|
|
109
110
|
```tsx
|
|
110
111
|
import DsMarkdown from 'ds-markdown';
|
|
112
|
+
import { katexPlugin } from 'ds-markdown/plugins';
|
|
111
113
|
import 'ds-markdown/style.css';
|
|
112
114
|
import 'ds-markdown/katex.css'; // Import mathematical formula styles
|
|
113
115
|
|
|
114
116
|
function MathDemo() {
|
|
115
117
|
return (
|
|
116
|
-
<DsMarkdown interval={20} answerType="answer" math={{
|
|
118
|
+
<DsMarkdown interval={20} answerType="answer" plugins={[katexPlugin]} math={{ splitSymbol: 'dollar' }}>
|
|
117
119
|
# Pythagorean Theorem In a right triangle, the square of the hypotenuse equals the sum of squares of the two legs: $a^2 + b^2 = c^2$ Where: - $a$ and $b$ are the legs - $c$ is the hypotenuse For
|
|
118
120
|
the classic "3-4-5" triangle: $c = \sqrt{3 ^ (2 + 4) ^ 2} = \sqrt{25} = 5$
|
|
119
121
|
</DsMarkdown>
|
|
@@ -177,23 +179,32 @@ Let's explore these new features together!`);
|
|
|
177
179
|
| `timerType` | `'setTimeout'` \| `'requestAnimationFrame'` | Timer type | Current default is `setTimeout`, will change to `requestAnimationFrame` later |
|
|
178
180
|
| `answerType` | `'thinking'` \| `'answer'` | Content type (affects style theme) | `'answer'` |
|
|
179
181
|
| `theme` | `'light'` \| `'dark'` | Theme type | `'light'` |
|
|
180
|
-
| `
|
|
182
|
+
| `plugins` | `IMarkdownPlugin[]` | Plugin configuration | `[]` |
|
|
183
|
+
| `math` | `IMarkdownMath` | Mathematical formula configuration | `{ splitSymbol: 'dollar' }` |
|
|
181
184
|
| `onEnd` | `(data: EndData) => void` | Typing completion callback | - |
|
|
182
185
|
| `onStart` | `(data: StartData) => void` | Typing start callback | - |
|
|
183
186
|
| `onTypedChar` | `(data: CharData) => void` | Per-character typing callback | - |
|
|
184
187
|
|
|
185
188
|
### Mathematical Formula Configuration
|
|
186
189
|
|
|
187
|
-
| Property | Type | Description
|
|
188
|
-
| ------------- | ------------------------- |
|
|
189
|
-
| `
|
|
190
|
-
| `splitSymbol` | `'dollar'` \| `'bracket'` | Mathematical formula delimiter type | `'dollar'` |
|
|
190
|
+
| Property | Type | Description | Default |
|
|
191
|
+
| ------------- | ------------------------- | ----------------------------------- | --------- |
|
|
192
|
+
| `splitSymbol` | `'dollar'` \| `'bracket'` | Mathematical formula delimiter type | `'dollar' |
|
|
191
193
|
|
|
192
194
|
**Delimiter Description:**
|
|
193
195
|
|
|
194
196
|
- `'dollar'`: Use `$...$` and `$$...$$` syntax
|
|
195
197
|
- `'bracket'`: Use `\(...\)` and `\[...\]` syntax
|
|
196
198
|
|
|
199
|
+
### Plugin Configuration
|
|
200
|
+
|
|
201
|
+
| Property | Type | Description | Default |
|
|
202
|
+
| -------------- | ------------------------- | ---------------- | ------- |
|
|
203
|
+
| `remarkPlugin` | `unknown` | remark plugin | - |
|
|
204
|
+
| `rehypePlugin` | `unknown` | rehype plugin | - |
|
|
205
|
+
| `type` | `'buildIn'` \| `'custom'` | Plugin type | - |
|
|
206
|
+
| `id` | `any` | Plugin unique ID | - |
|
|
207
|
+
|
|
197
208
|
### Imperative API (Recommended for Streaming Scenarios)
|
|
198
209
|
|
|
199
210
|
| Method | Parameters | Description |
|
|
@@ -218,8 +229,10 @@ markdownRef.current?.resume(); // Resume animation
|
|
|
218
229
|
### Basic Syntax
|
|
219
230
|
|
|
220
231
|
```tsx
|
|
232
|
+
import { katexPlugin } from 'ds-markdown/plugins';
|
|
233
|
+
|
|
221
234
|
// 1. Enable mathematical formula support
|
|
222
|
-
<DsMarkdown
|
|
235
|
+
<DsMarkdown plugins={[katexPlugin]}>
|
|
223
236
|
# Mathematical Formula Example
|
|
224
237
|
|
|
225
238
|
// Inline formula
|
|
@@ -234,13 +247,19 @@ markdownRef.current?.resume(); // Resume animation
|
|
|
234
247
|
|
|
235
248
|
```tsx
|
|
236
249
|
// Use dollar symbol delimiters (default)
|
|
237
|
-
<DsMarkdown
|
|
250
|
+
<DsMarkdown
|
|
251
|
+
plugins={[katexPlugin]}
|
|
252
|
+
math={{ splitSymbol: 'dollar' }}
|
|
253
|
+
>
|
|
238
254
|
Inline: $a + b = c$
|
|
239
255
|
Block: $$\sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n$$
|
|
240
256
|
</DsMarkdown>
|
|
241
257
|
|
|
242
258
|
// Use bracket delimiters
|
|
243
|
-
<DsMarkdown
|
|
259
|
+
<DsMarkdown
|
|
260
|
+
plugins={[katexPlugin]}
|
|
261
|
+
math={{ splitSymbol: 'bracket' }}
|
|
262
|
+
>
|
|
244
263
|
Inline: \(a + b = c\)
|
|
245
264
|
Block: \[\sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n\]
|
|
246
265
|
</DsMarkdown>
|
|
@@ -288,6 +307,37 @@ mathContent.forEach((chunk) => {
|
|
|
288
307
|
|
|
289
308
|
---
|
|
290
309
|
|
|
310
|
+
## 🔌 Plugin System
|
|
311
|
+
|
|
312
|
+
### Built-in Plugins
|
|
313
|
+
|
|
314
|
+
#### KaTeX Mathematical Formula Plugin
|
|
315
|
+
|
|
316
|
+
```tsx
|
|
317
|
+
import { katexPlugin } from 'ds-markdown/plugins';
|
|
318
|
+
|
|
319
|
+
// Enable mathematical formula support
|
|
320
|
+
<DsMarkdown plugins={[katexPlugin]}>Mathematical formula: $E = mc^2$</DsMarkdown>;
|
|
321
|
+
```
|
|
322
|
+
|
|
323
|
+
### Custom Plugins
|
|
324
|
+
|
|
325
|
+
```tsx
|
|
326
|
+
import { createBuildInPlugin } from 'ds-markdown/plugins';
|
|
327
|
+
|
|
328
|
+
// Create custom plugin
|
|
329
|
+
const customPlugin = createBuildInPlugin({
|
|
330
|
+
remarkPlugin: yourRemarkPlugin,
|
|
331
|
+
rehypePlugin: yourRehypePlugin,
|
|
332
|
+
id: Symbol('custom-plugin'),
|
|
333
|
+
});
|
|
334
|
+
|
|
335
|
+
// Use custom plugin
|
|
336
|
+
<DsMarkdown plugins={[katexPlugin, customPlugin]}>Content</DsMarkdown>;
|
|
337
|
+
```
|
|
338
|
+
|
|
339
|
+
---
|
|
340
|
+
|
|
291
341
|
## 🎛️ Timer Mode Details
|
|
292
342
|
|
|
293
343
|
### `requestAnimationFrame` Mode 🌟 (Recommended)
|
|
@@ -402,6 +452,8 @@ const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
|
|
|
402
452
|
### 🧮 Mathematical Formula Streaming Rendering
|
|
403
453
|
|
|
404
454
|
```tsx
|
|
455
|
+
import { katexPlugin } from 'ds-markdown/plugins';
|
|
456
|
+
|
|
405
457
|
function MathStreamingDemo() {
|
|
406
458
|
const markdownRef = useRef<MarkdownCMDRef>(null);
|
|
407
459
|
|
|
@@ -430,7 +482,7 @@ function MathStreamingDemo() {
|
|
|
430
482
|
<div>
|
|
431
483
|
<button onClick={simulateMathResponse}>📐 Explain Pythagorean Theorem</button>
|
|
432
484
|
|
|
433
|
-
<MarkdownCMD ref={markdownRef} interval={20} timerType="requestAnimationFrame" math={{
|
|
485
|
+
<MarkdownCMD ref={markdownRef} interval={20} timerType="requestAnimationFrame" plugins={[katexPlugin]} math={{ splitSymbol: 'dollar' }} />
|
|
434
486
|
</div>
|
|
435
487
|
);
|
|
436
488
|
}
|
|
@@ -534,8 +586,9 @@ import 'ds-markdown/katex.css'; // Only import when needed
|
|
|
534
586
|
// For simple formulas, use $...$ for conciseness
|
|
535
587
|
// For complex formulas, use $$...$$ for clarity
|
|
536
588
|
|
|
537
|
-
//
|
|
538
|
-
|
|
589
|
+
// ✅ Recommended: Plugin-based configuration
|
|
590
|
+
import { katexPlugin } from 'ds-markdown/plugins';
|
|
591
|
+
<DsMarkdown plugins={[katexPlugin]}>Mathematical formula content</DsMarkdown>;
|
|
539
592
|
```
|
|
540
593
|
|
|
541
594
|
### 4. Type Safety
|
package/README.ja.md
CHANGED
|
@@ -49,6 +49,7 @@
|
|
|
49
49
|
### 🧮 **数式サポート**
|
|
50
50
|
|
|
51
51
|
- **KaTeX 統合**:高性能な数式レンダリング
|
|
52
|
+
- **プラグインアーキテクチャ**:プラグインシステムによる柔軟な設定
|
|
52
53
|
- **デュアル構文サポート**:`$...$` と `\[...\]` の2つの区切り文字
|
|
53
54
|
- **ストリーミング対応**:タイピングアニメーションでの数式の完璧なサポート
|
|
54
55
|
- **テーマ適応**:ライト/ダークテーマへの自動適応
|
|
@@ -108,12 +109,13 @@ function App() {
|
|
|
108
109
|
|
|
109
110
|
```tsx
|
|
110
111
|
import DsMarkdown from 'ds-markdown';
|
|
112
|
+
import { katexPlugin } from 'ds-markdown/plugins';
|
|
111
113
|
import 'ds-markdown/style.css';
|
|
112
114
|
import 'ds-markdown/katex.css'; // 数式スタイルのインポート
|
|
113
115
|
|
|
114
116
|
function MathDemo() {
|
|
115
117
|
return (
|
|
116
|
-
<DsMarkdown interval={20} answerType="answer" math={{
|
|
118
|
+
<DsMarkdown interval={20} answerType="answer" plugins={[katexPlugin]} math={{ splitSymbol: 'dollar' }}>
|
|
117
119
|
# ピタゴラスの定理 直角三角形では、斜辺の二乗は二つの直角辺の二乗の和に等しい: $a^2 + b^2 = c^2$ ここで: - $a$ と $b$ は直角辺 - $c$ は斜辺 古典的な「3-4-5」三角形の場合: $c = \sqrt
|
|
118
120
|
{3 ^ (2 + 4) ^ 2} = \sqrt{25} = 5$
|
|
119
121
|
</DsMarkdown>
|
package/README.ko.md
CHANGED
package/README.md
CHANGED
|
@@ -49,6 +49,7 @@
|
|
|
49
49
|
### 🧮 **数学公式支持**
|
|
50
50
|
|
|
51
51
|
- **KaTeX 集成**:高性能数学公式渲染
|
|
52
|
+
- **插件化架构**:通过插件系统灵活配置
|
|
52
53
|
- **双语法支持**:`$...$` 和 `\[...\]` 两种分隔符
|
|
53
54
|
- **流式兼容**:完美支持打字动画中的数学公式
|
|
54
55
|
- **主题适配**:自动适配亮色/暗色主题
|
|
@@ -75,8 +76,10 @@ pnpm add ds-markdown
|
|
|
75
76
|
[DEMO](https://stackblitz.com/edit/stackblitz-starters-7vcclcw7?file=index.html)
|
|
76
77
|
|
|
77
78
|
```html
|
|
78
|
-
<!--
|
|
79
|
+
<!-- 导入样式, 必须 -->
|
|
79
80
|
<link rel="stylesheet" href="https://esm.sh/ds-markdown/dist/style.css" />
|
|
81
|
+
|
|
82
|
+
<!-- 导入katex数学公式样式, 非不要不引入 -->
|
|
80
83
|
<link rel="stylesheet" href="https://esm.sh/ds-markdown/dist/katex.css" />
|
|
81
84
|
|
|
82
85
|
<!-- 导入组件 -->
|
|
@@ -108,12 +111,15 @@ function App() {
|
|
|
108
111
|
|
|
109
112
|
```tsx
|
|
110
113
|
import DsMarkdown from 'ds-markdown';
|
|
114
|
+
// 如果需要展示公式,则需要引入公式转换插件
|
|
115
|
+
import { katexPlugin } from 'ds-markdown/plugins';
|
|
111
116
|
import 'ds-markdown/style.css';
|
|
112
|
-
|
|
117
|
+
// 如果需要展示公式,则需要引入数学公式样式
|
|
118
|
+
import 'ds-markdown/katex.css';
|
|
113
119
|
|
|
114
120
|
function MathDemo() {
|
|
115
121
|
return (
|
|
116
|
-
<DsMarkdown interval={20} answerType="answer" math={{
|
|
122
|
+
<DsMarkdown interval={20} answerType="answer" plugins={[katexPlugin]} math={{ splitSymbol: 'dollar' }}>
|
|
117
123
|
# 勾股定理 在直角三角形中,斜边的平方等于两条直角边的平方和: $a^2 + b^2 = c^2$ 其中: - $a$ 和 $b$ 是直角边 - $c$ 是斜边 对于经典的"勾三股四弦五": $c = \sqrt{3 ^ (2 + 4) ^ 2} = \sqrt{25} = 5$
|
|
118
124
|
</DsMarkdown>
|
|
119
125
|
);
|
|
@@ -176,23 +182,40 @@ React 19 带来了许多激动人心的新特性:
|
|
|
176
182
|
| `timerType` | `'setTimeout'` \| `'requestAnimationFrame'` | 定时器类型 | 当前默认值是`setTimeout`,后期会改为`requestAnimationFrame` |
|
|
177
183
|
| `answerType` | `'thinking'` \| `'answer'` | 内容类型 (影响样式主题) | `'answer'` |
|
|
178
184
|
| `theme` | `'light'` \| `'dark'` | 主题类型 | `'light'` |
|
|
179
|
-
| `
|
|
185
|
+
| `plugins` | `IMarkdownPlugin[]` | 插件配置 | `[]` |
|
|
186
|
+
| `math` | [IMarkdownMath](#IMarkdownMath) | 数学公式配置 | `{ splitSymbol: 'dollar' }` |
|
|
180
187
|
| `onEnd` | `(data: EndData) => void` | 打字结束回调 | - |
|
|
181
188
|
| `onStart` | `(data: StartData) => void` | 打字开始回调 | - |
|
|
182
|
-
| `onTypedChar` | `(data:
|
|
189
|
+
| `onTypedChar` | `(data: [ITypedChar](#ITypedChar)) => void` | 每字符打字回调 | - |
|
|
190
|
+
|
|
191
|
+
### ITypedChar
|
|
192
|
+
|
|
193
|
+
| 属性 | 类型 | 说明 | 默认值 |
|
|
194
|
+
| -------------- | -------- | ---------------------------- | ------ |
|
|
195
|
+
| `percent` | `number` | 打字进度百分比 | `0` |
|
|
196
|
+
| `currentChar` | `string` | 当前打字的字符 | - |
|
|
197
|
+
| `currentIndex` | `number` | 当前打字在整个字符串中的索引 | `0` |
|
|
183
198
|
|
|
184
|
-
|
|
199
|
+
#### IMarkdownMath
|
|
185
200
|
|
|
186
|
-
| 属性 | 类型 | 说明
|
|
187
|
-
| ------------- | ------------------------- |
|
|
188
|
-
| `
|
|
189
|
-
| `splitSymbol` | `'dollar'` \| `'bracket'` | 数学公式分隔符类型 | `'dollar'` |
|
|
201
|
+
| 属性 | 类型 | 说明 | 默认值 |
|
|
202
|
+
| ------------- | ------------------------- | ------------------ | ---------- |
|
|
203
|
+
| `splitSymbol` | `'dollar'` \| `'bracket'` | 数学公式分隔符类型 | `'dollar'` |
|
|
190
204
|
|
|
191
205
|
**分隔符说明:**
|
|
192
206
|
|
|
193
207
|
- `'dollar'`:使用 `$...$` 和 `$$...$$` 语法
|
|
194
208
|
- `'bracket'`:使用 `\(...\)` 和 `\[...\]` 语法
|
|
195
209
|
|
|
210
|
+
#### IMarkdownPlugin
|
|
211
|
+
|
|
212
|
+
| 属性 | 类型 | 说明 | 默认值 |
|
|
213
|
+
| -------------- | ------------------------- | ------------ | ------ |
|
|
214
|
+
| `remarkPlugin` | `unknown` | remark 插件 | - |
|
|
215
|
+
| `rehypePlugin` | `unknown` | rehype 插件 | - |
|
|
216
|
+
| `type` | `'buildIn'` \| `'custom'` | 插件类型 | - |
|
|
217
|
+
| `id` | `any` | 插件唯一标识 | - |
|
|
218
|
+
|
|
196
219
|
### 命令式 API (推荐流式场景)
|
|
197
220
|
|
|
198
221
|
| 方法 | 参数 | 说明 |
|
|
@@ -214,13 +237,15 @@ markdownRef.current?.resume(); // 恢复动画
|
|
|
214
237
|
|
|
215
238
|
## 🧮 数学公式使用指南
|
|
216
239
|
|
|
217
|
-
[DEMO](https://stackblitz.com/edit/vitejs-vite-
|
|
240
|
+
[DEMO](https://stackblitz.com/edit/vitejs-vite-z94syu8j?file=src%2FApp.tsx)
|
|
218
241
|
|
|
219
242
|
### 基本语法
|
|
220
243
|
|
|
221
244
|
```tsx
|
|
245
|
+
import { katexPlugin } from 'ds-markdown/plugins';
|
|
246
|
+
|
|
222
247
|
// 1. 启用数学公式支持
|
|
223
|
-
<DsMarkdown
|
|
248
|
+
<DsMarkdown plugins={[katexPlugin]}>
|
|
224
249
|
# 数学公式示例
|
|
225
250
|
|
|
226
251
|
// 行内公式
|
|
@@ -235,13 +260,19 @@ markdownRef.current?.resume(); // 恢复动画
|
|
|
235
260
|
|
|
236
261
|
```tsx
|
|
237
262
|
// 使用美元符号分隔符(默认)
|
|
238
|
-
<DsMarkdown
|
|
263
|
+
<DsMarkdown
|
|
264
|
+
plugins={[katexPlugin]}
|
|
265
|
+
math={{ splitSymbol: 'dollar' }}
|
|
266
|
+
>
|
|
239
267
|
行内:$a + b = c$
|
|
240
268
|
块级:$$\sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n$$
|
|
241
269
|
</DsMarkdown>
|
|
242
270
|
|
|
243
271
|
// 使用括号分隔符
|
|
244
|
-
<DsMarkdown
|
|
272
|
+
<DsMarkdown
|
|
273
|
+
plugins={[katexPlugin]}
|
|
274
|
+
math={{ splitSymbol: 'bracket' }}
|
|
275
|
+
>
|
|
245
276
|
行内:\(a + b = c\)
|
|
246
277
|
块级:\[\sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n\]
|
|
247
278
|
</DsMarkdown>
|
|
@@ -289,6 +320,37 @@ mathContent.forEach((chunk) => {
|
|
|
289
320
|
|
|
290
321
|
---
|
|
291
322
|
|
|
323
|
+
## 🔌 插件系统
|
|
324
|
+
|
|
325
|
+
### 内置插件
|
|
326
|
+
|
|
327
|
+
#### KaTeX 数学公式插件
|
|
328
|
+
|
|
329
|
+
```tsx
|
|
330
|
+
import { katexPlugin } from 'ds-markdown/plugins';
|
|
331
|
+
|
|
332
|
+
// 启用数学公式支持
|
|
333
|
+
<DsMarkdown plugins={[katexPlugin]}>数学公式:$E = mc^2$</DsMarkdown>;
|
|
334
|
+
```
|
|
335
|
+
|
|
336
|
+
### 自定义插件
|
|
337
|
+
|
|
338
|
+
```tsx
|
|
339
|
+
import { createBuildInPlugin } from 'ds-markdown/plugins';
|
|
340
|
+
|
|
341
|
+
// 创建自定义插件
|
|
342
|
+
const customPlugin = createBuildInPlugin({
|
|
343
|
+
remarkPlugin: yourRemarkPlugin,
|
|
344
|
+
rehypePlugin: yourRehypePlugin,
|
|
345
|
+
id: Symbol('custom-plugin'),
|
|
346
|
+
});
|
|
347
|
+
|
|
348
|
+
// 使用自定义插件
|
|
349
|
+
<DsMarkdown plugins={[katexPlugin, customPlugin]}>内容</DsMarkdown>;
|
|
350
|
+
```
|
|
351
|
+
|
|
352
|
+
---
|
|
353
|
+
|
|
292
354
|
## 🎛️ 定时器模式详解
|
|
293
355
|
|
|
294
356
|
### `requestAnimationFrame` 模式 🌟 (推荐)
|
|
@@ -403,6 +465,8 @@ const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
|
|
|
403
465
|
### 🧮 数学公式流式渲染
|
|
404
466
|
|
|
405
467
|
```tsx
|
|
468
|
+
import { katexPlugin } from 'ds-markdown/plugins';
|
|
469
|
+
|
|
406
470
|
function MathStreamingDemo() {
|
|
407
471
|
const markdownRef = useRef<MarkdownCMDRef>(null);
|
|
408
472
|
|
|
@@ -431,70 +495,12 @@ function MathStreamingDemo() {
|
|
|
431
495
|
<div>
|
|
432
496
|
<button onClick={simulateMathResponse}>📐 讲解勾股定理</button>
|
|
433
497
|
|
|
434
|
-
<MarkdownCMD ref={markdownRef} interval={20} timerType="requestAnimationFrame" math={{
|
|
498
|
+
<MarkdownCMD ref={markdownRef} interval={20} timerType="requestAnimationFrame" plugins={[katexPlugin]} math={{ splitSymbol: 'dollar' }} />
|
|
435
499
|
</div>
|
|
436
500
|
);
|
|
437
501
|
}
|
|
438
502
|
```
|
|
439
503
|
|
|
440
|
-
### 🔄 流式 Markdown 语法处理
|
|
441
|
-
|
|
442
|
-
**核心问题**:流式输出时,不完整的 Markdown 语法会导致渲染错误
|
|
443
|
-
|
|
444
|
-
```tsx
|
|
445
|
-
// 🚨 问题场景
|
|
446
|
-
push('#'); // "# "
|
|
447
|
-
push(' '); // "# "
|
|
448
|
-
push('标题'); // "# 标题"
|
|
449
|
-
push('\n'); // "# 标题\n"
|
|
450
|
-
push('1'); // "# 标题\n1" ← 这里会被误解析为段落
|
|
451
|
-
push('.'); // "# 标题\n1." ← 形成正确的列表
|
|
452
|
-
push(' 项目'); // "# 标题\n1. 项目"
|
|
453
|
-
```
|
|
454
|
-
|
|
455
|
-
**✅ 智能解决方案**:组件内置同步缓冲机制
|
|
456
|
-
|
|
457
|
-
```tsx
|
|
458
|
-
// 组件会智能处理语法边界
|
|
459
|
-
const handleStreamingMarkdown = () => {
|
|
460
|
-
const chunks = ['#', ' ', '使用', '技能', '\n', '1', '.', ' ', '技能1', '\n', '2', '.', ' 技能2'];
|
|
461
|
-
|
|
462
|
-
chunks.forEach((chunk) => {
|
|
463
|
-
markdownRef.current?.push(chunk, 'answer');
|
|
464
|
-
// 无需延迟,组件内部智能缓冲
|
|
465
|
-
});
|
|
466
|
-
};
|
|
467
|
-
|
|
468
|
-
// 🧠 智能处理流程:
|
|
469
|
-
// 1. 实时检测 "# 使用技能\n1" 语法不完整
|
|
470
|
-
// 2. 智能缓冲,等待更多字符
|
|
471
|
-
// 3. 收到 "." 形成 "1." 后立即处理
|
|
472
|
-
// 4. 零延迟,纯同步处理
|
|
473
|
-
```
|
|
474
|
-
|
|
475
|
-
**支持的语法检测**:
|
|
476
|
-
|
|
477
|
-
````typescript
|
|
478
|
-
// ✅ 完整语法 (立即处理)
|
|
479
|
-
'## 标题'; // 完整标题
|
|
480
|
-
'1. 列表项'; // 完整列表项
|
|
481
|
-
'- 项目'; // 完整无序列表
|
|
482
|
-
'> 引用内容'; // 完整引用
|
|
483
|
-
'```javascript'; // 代码块开始
|
|
484
|
-
'```'; // 代码块结束
|
|
485
|
-
'内容以换行结尾\n'; // 换行边界
|
|
486
|
-
'$a + b$'; // 完整数学公式
|
|
487
|
-
'$$\\sum x$$'; // 完整块级数学公式
|
|
488
|
-
|
|
489
|
-
// 🔄 不完整语法 (智能缓冲)
|
|
490
|
-
'##'; // 只有标题符号
|
|
491
|
-
'1'; // 只有数字
|
|
492
|
-
'```java'; // 可能的代码块开始
|
|
493
|
-
'$a +'; // 不完整的数学公式
|
|
494
|
-
````
|
|
495
|
-
|
|
496
|
-
---
|
|
497
|
-
|
|
498
504
|
## 🔧 最佳实践
|
|
499
505
|
|
|
500
506
|
### 1. 性能优化
|
|
@@ -535,8 +541,9 @@ import 'ds-markdown/katex.css'; // 仅在需要时引入
|
|
|
535
541
|
// 对于简单公式,使用 $...$ 更简洁
|
|
536
542
|
// 对于复杂公式,使用 $$...$$ 更清晰
|
|
537
543
|
|
|
538
|
-
//
|
|
539
|
-
|
|
544
|
+
// ✅ 推荐:插件化配置
|
|
545
|
+
import { katexPlugin } from 'ds-markdown/plugins';
|
|
546
|
+
<DsMarkdown plugins={[katexPlugin]}>数学公式内容</DsMarkdown>;
|
|
540
547
|
```
|
|
541
548
|
|
|
542
549
|
### 4. 类型安全
|
|
@@ -547,101 +554,3 @@ import { MarkdownCMDRef } from 'ds-markdown';
|
|
|
547
554
|
const ref = useRef<MarkdownCMDRef>(null);
|
|
548
555
|
// 完整的 TypeScript 类型提示
|
|
549
556
|
```
|
|
550
|
-
|
|
551
|
-
### 5. 样式定制
|
|
552
|
-
|
|
553
|
-
```css
|
|
554
|
-
/* 思考区域样式 */
|
|
555
|
-
.ds-markdown-thinking {
|
|
556
|
-
background: rgba(255, 193, 7, 0.1);
|
|
557
|
-
border-left: 3px solid #ffc107;
|
|
558
|
-
padding: 12px;
|
|
559
|
-
border-radius: 6px;
|
|
560
|
-
margin: 8px 0;
|
|
561
|
-
}
|
|
562
|
-
|
|
563
|
-
/* 回答区域样式 */
|
|
564
|
-
.ds-markdown-answer {
|
|
565
|
-
color: #333;
|
|
566
|
-
line-height: 1.6;
|
|
567
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
568
|
-
}
|
|
569
|
-
|
|
570
|
-
/* 代码块样式 */
|
|
571
|
-
.ds-markdown pre {
|
|
572
|
-
background: #f8f9fa;
|
|
573
|
-
border-radius: 8px;
|
|
574
|
-
padding: 16px;
|
|
575
|
-
overflow-x: auto;
|
|
576
|
-
}
|
|
577
|
-
|
|
578
|
-
/* 表格样式 */
|
|
579
|
-
.ds-markdown-table {
|
|
580
|
-
border-collapse: collapse;
|
|
581
|
-
width: 100%;
|
|
582
|
-
margin: 16px 0;
|
|
583
|
-
}
|
|
584
|
-
|
|
585
|
-
.ds-markdown-table th,
|
|
586
|
-
.ds-markdown-table td {
|
|
587
|
-
border: 1px solid #ddd;
|
|
588
|
-
padding: 8px 12px;
|
|
589
|
-
text-align: left;
|
|
590
|
-
}
|
|
591
|
-
|
|
592
|
-
/* 数学公式样式 */
|
|
593
|
-
.katex {
|
|
594
|
-
font-size: 1.1em;
|
|
595
|
-
}
|
|
596
|
-
|
|
597
|
-
.katex-display {
|
|
598
|
-
margin: 1em 0;
|
|
599
|
-
text-align: center;
|
|
600
|
-
}
|
|
601
|
-
|
|
602
|
-
/* 暗色主题数学公式 */
|
|
603
|
-
[data-theme='dark'] .katex {
|
|
604
|
-
color: #e1e1e1;
|
|
605
|
-
}
|
|
606
|
-
```
|
|
607
|
-
|
|
608
|
-
---
|
|
609
|
-
|
|
610
|
-
## 🌐 兼容性
|
|
611
|
-
|
|
612
|
-
| 环境 | 版本要求 | 说明 |
|
|
613
|
-
| -------------- | ----------------------------------- | --------------- |
|
|
614
|
-
| **React** | 16.8.0+ | 需要 Hooks 支持 |
|
|
615
|
-
| **TypeScript** | 4.0+ | 可选,但推荐 |
|
|
616
|
-
| **浏览器** | Chrome 60+, Firefox 55+, Safari 12+ | 现代浏览器 |
|
|
617
|
-
| **Node.js** | 14.0+ | 构建环境 |
|
|
618
|
-
|
|
619
|
-
---
|
|
620
|
-
|
|
621
|
-
## 🤝 贡献指南
|
|
622
|
-
|
|
623
|
-
欢迎提交 Issue 和 Pull Request!
|
|
624
|
-
|
|
625
|
-
1. Fork 本仓库
|
|
626
|
-
2. 创建特性分支:`git checkout -b feature/amazing-feature`
|
|
627
|
-
3. 提交更改:`git commit -m 'Add amazing feature'`
|
|
628
|
-
4. 推送分支:`git push origin feature/amazing-feature`
|
|
629
|
-
5. 提交 Pull Request
|
|
630
|
-
|
|
631
|
-
---
|
|
632
|
-
|
|
633
|
-
## 📄 开源协议
|
|
634
|
-
|
|
635
|
-
MIT © [onshinpei](https://github.com/onshinpei)
|
|
636
|
-
|
|
637
|
-
---
|
|
638
|
-
|
|
639
|
-
<div align="center">
|
|
640
|
-
<strong>如果这个项目对你有帮助,请给个 ⭐️ Star 支持一下!</strong>
|
|
641
|
-
|
|
642
|
-
<br><br>
|
|
643
|
-
|
|
644
|
-
[🐛 报告问题](https://github.com/onshinpei/ds-markdown/issues) |
|
|
645
|
-
[💡 功能建议](https://github.com/onshinpei/ds-markdown/issues) |
|
|
646
|
-
[📖 查看文档](https://onshinpei.github.io/ds-markdown/)
|
|
647
|
-
</div>
|
|
@@ -9,7 +9,7 @@ const index_js_1 = __importDefault(require("../components/HighReactMarkdown/inde
|
|
|
9
9
|
const classnames_1 = __importDefault(require("classnames"));
|
|
10
10
|
const constant_js_1 = require("../constant.js");
|
|
11
11
|
const useTypingTask_js_1 = require("../hooks/useTypingTask.js");
|
|
12
|
-
const MarkdownCMD = (0, react_1.forwardRef)(({ interval = 30, onEnd, onStart, onTypedChar, timerType = 'setTimeout', theme = 'light', math }, ref) => {
|
|
12
|
+
const MarkdownCMD = (0, react_1.forwardRef)(({ interval = 30, onEnd, onStart, onTypedChar, timerType = 'setTimeout', theme = 'light', math, plugins }, ref) => {
|
|
13
13
|
/** 当前需要打字的内容 */
|
|
14
14
|
const charsRef = (0, react_1.useRef)([]);
|
|
15
15
|
/**
|
|
@@ -139,7 +139,7 @@ const MarkdownCMD = (0, react_1.forwardRef)(({ interval = 30, onEnd, onStart, on
|
|
|
139
139
|
*/
|
|
140
140
|
}));
|
|
141
141
|
const getParagraphs = (answerType) => {
|
|
142
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: `ds-markdown-paragraph ds-typed-${answerType}`, children: (0, jsx_runtime_1.jsx)(index_js_1.default, { theme: theme, math: math, children: wholeContentRef.current[answerType].content || '' }) }));
|
|
142
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: `ds-markdown-paragraph ds-typed-${answerType}`, children: (0, jsx_runtime_1.jsx)(index_js_1.default, { theme: theme, math: math, plugins: plugins, children: wholeContentRef.current[answerType].content || '' }) }));
|
|
143
143
|
};
|
|
144
144
|
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)({
|
|
145
145
|
'ds-markdown': true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/MarkdownCMD/index.tsx"],"names":[],"mappings":";;;;;;AAAA,iCAA0E;AAE1E,wFAAyE;AACzE,4DAAoC;AAEpC,gDAAyC;AACzC,gEAA0D;AAI1D,MAAM,WAAW,GAAG,IAAA,kBAAU,EAAmC,CAAC,EAAE,QAAQ,GAAG,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,GAAG,YAAY,EAAE,KAAK,GAAG,OAAO,EAAE,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/MarkdownCMD/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { Options } from 'react-markdown';
|
|
3
|
-
import { IMarkdownMath, Theme } from '../../defined.js';
|
|
3
|
+
import { IMarkdownMath, IMarkdownPlugin, Theme } from '../../defined.js';
|
|
4
4
|
interface HighReactMarkdownProps extends Options {
|
|
5
5
|
theme?: Theme;
|
|
6
6
|
children: string;
|
|
7
7
|
math?: IMarkdownMath;
|
|
8
|
+
plugins?: IMarkdownPlugin[];
|
|
8
9
|
}
|
|
9
10
|
declare const _default: React.NamedExoticComponent<HighReactMarkdownProps>;
|
|
10
11
|
export default _default;
|
|
@@ -4,33 +4,46 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
7
8
|
const react_1 = require("react");
|
|
8
9
|
const react_markdown_1 = __importDefault(require("react-markdown"));
|
|
9
10
|
const react_syntax_highlighter_1 = require("react-syntax-highlighter");
|
|
10
11
|
const remark_gfm_1 = __importDefault(require("remark-gfm"));
|
|
11
|
-
const rehype_katex_1 = __importDefault(require("rehype-katex"));
|
|
12
|
-
const remark_math_1 = __importDefault(require("remark-math"));
|
|
13
12
|
const remarkMathBracket_js_1 = require("../../utils/remarkMathBracket.js");
|
|
14
13
|
const index_js_1 = __importDefault(require("../BlockWrap/index.js"));
|
|
15
|
-
const
|
|
16
|
-
|
|
17
|
-
const mathOpen = math?.isOpen ?? false;
|
|
14
|
+
const constant_js_1 = require("../../constant.js");
|
|
15
|
+
const HighReactMarkdown = ({ theme = 'light', children: _children, math, plugins, ...props }) => {
|
|
18
16
|
const mathSplitSymbol = math?.splitSymbol ?? 'dollar';
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
if (
|
|
24
|
-
return
|
|
17
|
+
const { remarkPlugins, rehypePlugins, hasKatexPlugin } = (0, react_1.useMemo)(() => {
|
|
18
|
+
let hasKatexPlugin = false;
|
|
19
|
+
const remarkPlugins = [remark_gfm_1.default];
|
|
20
|
+
const rehypePlugins = [];
|
|
21
|
+
if (!plugins) {
|
|
22
|
+
return {
|
|
23
|
+
remarkPlugins,
|
|
24
|
+
rehypePlugins,
|
|
25
|
+
};
|
|
25
26
|
}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
27
|
+
plugins.forEach((plugin) => {
|
|
28
|
+
if (plugin.id === constant_js_1.katexId) {
|
|
29
|
+
hasKatexPlugin = true;
|
|
30
|
+
remarkPlugins.push(plugin.remarkPlugin);
|
|
31
|
+
rehypePlugins.push(plugin.rehypePlugin);
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
return {
|
|
35
|
+
remarkPlugins,
|
|
36
|
+
rehypePlugins,
|
|
37
|
+
hasKatexPlugin,
|
|
38
|
+
};
|
|
39
|
+
}, [plugins]);
|
|
40
|
+
const children = (0, react_1.useMemo)(() => {
|
|
41
|
+
/** 如果存在数学公式插件,并且数学公式分隔符为括号,则替换成 $ 符号 */
|
|
42
|
+
if (hasKatexPlugin && mathSplitSymbol === 'bracket') {
|
|
43
|
+
return (0, remarkMathBracket_js_1.replaceMathBracket)(_children);
|
|
31
44
|
}
|
|
32
|
-
return
|
|
33
|
-
}, [
|
|
45
|
+
return _children;
|
|
46
|
+
}, [hasKatexPlugin, mathSplitSymbol, _children]);
|
|
34
47
|
return ((0, jsx_runtime_1.jsx)(react_markdown_1.default, { remarkPlugins: remarkPlugins, rehypePlugins: rehypePlugins, components: {
|
|
35
48
|
code: ({ className, children, ...props }) => {
|
|
36
49
|
const match = /language-(\w+)/.exec(className || '');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/HighReactMarkdown/index.tsx"],"names":[],"mappings":";;;;;;AAAA,iCAA6C;AAC7C,oEAAsC;AAEtC,uEAAsE;AACtE,4DAAmC;AACnC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/HighReactMarkdown/index.tsx"],"names":[],"mappings":";;;;;;AAAA,uDAAuD;AACvD,iCAA6C;AAC7C,oEAAsC;AAEtC,uEAAsE;AACtE,4DAAmC;AACnC,2EAAsE;AACtE,qEAA8C;AAE9C,mDAA4C;AAS5C,MAAM,iBAAiB,GAAqC,CAAC,EAAE,KAAK,GAAG,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAChI,MAAM,eAAe,GAAG,IAAI,EAAE,WAAW,IAAI,QAAQ,CAAC;IAEtD,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,cAAc,EAAE,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACpE,IAAI,cAAc,GAAG,KAAK,CAAC;QAC3B,MAAM,aAAa,GAAU,CAAC,oBAAS,CAAC,CAAC;QACzC,MAAM,aAAa,GAAU,EAAE,CAAC;QAChC,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO;gBACL,aAAa;gBACb,aAAa;aACd,CAAC;QACJ,CAAC;QACD,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;YACzB,IAAI,MAAM,CAAC,EAAE,KAAK,qBAAO,EAAE,CAAC;gBAC1B,cAAc,GAAG,IAAI,CAAC;gBACtB,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;gBACxC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;YAC1C,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,OAAO;YACL,aAAa;YACb,aAAa;YACb,cAAc;SACf,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,QAAQ,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC5B,wCAAwC;QACxC,IAAI,cAAc,IAAI,eAAe,KAAK,SAAS,EAAE,CAAC;YACpD,OAAO,IAAA,yCAAkB,EAAC,SAAS,CAAC,CAAC;QACvC,CAAC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,cAAc,EAAE,eAAe,EAAE,SAAS,CAAC,CAAC,CAAC;IAEjD,OAAO,CACL,uBAAC,wBAAQ,IACP,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE;YACV,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;gBAC1C,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC;gBACrD,OAAO,KAAK,CAAC,CAAC,CAAC,CACb,uBAAC,kBAAS,IAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,YACzC,uBAAC,gCAAiB,IAAC,eAAe,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,YACrE,MAAM,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,GAClB,GACV,CACb,CAAC,CAAC,CAAC,CACF,iCAAM,SAAS,EAAE,SAAS,KAAM,KAAK,YAClC,QAAQ,GACJ,CACR,CAAC;YACJ,CAAC;YACD,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;gBAChC,OAAO,CACL,gCAAK,SAAS,EAAC,wBAAwB,YACrC,kCAAO,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAS,GACnD,CACP,CAAC;YACJ,CAAC;SACF,KACG,KAAK,YAER,QAAQ,GACA,CACZ,CAAC;AACJ,CAAC,CAAC;AACF,kBAAe,IAAA,YAAI,EAAC,iBAAiB,CAAC,CAAC"}
|
package/dist/cjs/constant.d.ts
CHANGED
package/dist/cjs/constant.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.__DEV__ = void 0;
|
|
3
|
+
exports.katexId = exports.__DEV__ = void 0;
|
|
4
4
|
exports.__DEV__ = process.env.NODE_ENV === 'development';
|
|
5
|
+
/** 数学公式插件id */
|
|
6
|
+
exports.katexId = Symbol('katex');
|
|
5
7
|
//# sourceMappingURL=constant.js.map
|
package/dist/cjs/constant.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constant.js","sourceRoot":"","sources":["../../src/constant.ts"],"names":[],"mappings":";;;AAAa,QAAA,OAAO,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,CAAC"}
|
|
1
|
+
{"version":3,"file":"constant.js","sourceRoot":"","sources":["../../src/constant.ts"],"names":[],"mappings":";;;AAAa,QAAA,OAAO,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,CAAC;AAE9D,eAAe;AACF,QAAA,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC"}
|
package/dist/cjs/defined.d.ts
CHANGED
|
@@ -44,7 +44,7 @@ export interface IOnTypedCharData {
|
|
|
44
44
|
answerType: AnswerType;
|
|
45
45
|
prevStr: string;
|
|
46
46
|
}
|
|
47
|
-
export interface
|
|
47
|
+
export interface ITypedChar extends IOnTypedCharData {
|
|
48
48
|
percent: number;
|
|
49
49
|
}
|
|
50
50
|
export interface MarkdownProps {
|
|
@@ -66,17 +66,22 @@ export interface MarkdownProps {
|
|
|
66
66
|
* @param char 字符
|
|
67
67
|
* @param index 字符索引
|
|
68
68
|
*/
|
|
69
|
-
onTypedChar?: (data?:
|
|
69
|
+
onTypedChar?: (data?: ITypedChar) => void;
|
|
70
70
|
/** 主题 */
|
|
71
71
|
theme?: Theme;
|
|
72
72
|
/** 数学公式配置 */
|
|
73
73
|
math?: IMarkdownMath;
|
|
74
|
+
plugins?: IMarkdownPlugin[];
|
|
75
|
+
}
|
|
76
|
+
export interface IMarkdownPlugin {
|
|
77
|
+
remarkPlugin?: unknown;
|
|
78
|
+
rehypePlugin?: unknown;
|
|
79
|
+
type: 'buildIn' | 'custom';
|
|
80
|
+
id?: any;
|
|
74
81
|
}
|
|
75
82
|
export interface IMarkdownMath {
|
|
76
83
|
/** 是括号还是$作为分隔符, 默认是$ */
|
|
77
84
|
splitSymbol: 'bracket' | 'dollar';
|
|
78
|
-
/** 是否开启数学公式 */
|
|
79
|
-
isOpen?: boolean;
|
|
80
85
|
}
|
|
81
86
|
export interface IWholeContent {
|
|
82
87
|
thinking: {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AnswerType, IChar,
|
|
1
|
+
import { AnswerType, IChar, ITypedChar, IWholeContent, MarkdownProps } from '../defined.js';
|
|
2
2
|
interface UseTypingTaskOptions {
|
|
3
3
|
timerType: MarkdownProps['timerType'];
|
|
4
4
|
interval: number;
|
|
@@ -14,7 +14,7 @@ interface UseTypingTaskOptions {
|
|
|
14
14
|
answerType: AnswerType;
|
|
15
15
|
prevStr: string;
|
|
16
16
|
}) => void;
|
|
17
|
-
onTypedChar?: (data?:
|
|
17
|
+
onTypedChar?: (data?: ITypedChar) => void;
|
|
18
18
|
processCharDisplay: (char: IChar) => void;
|
|
19
19
|
wholeContentRef: React.RefObject<IWholeContent>;
|
|
20
20
|
}
|
package/dist/cjs/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import MarkdownCMD from './MarkdownCMD/index.js';
|
|
2
2
|
import Markdown from './Markdown/index.js';
|
|
3
|
-
import type { MarkdownCMDRef, MarkdownRef } from './defined.js';
|
|
3
|
+
import type { MarkdownCMDRef, MarkdownRef, IMarkdownMath, ITypedChar } from './defined.js';
|
|
4
4
|
export default Markdown;
|
|
5
|
-
export type { MarkdownCMDRef, MarkdownRef };
|
|
5
|
+
export type { MarkdownCMDRef, MarkdownRef, IMarkdownMath, ITypedChar };
|
|
6
6
|
export { Markdown, MarkdownCMD };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.katexPlugin = void 0;
|
|
7
|
+
exports.createBuildInPlugin = createBuildInPlugin;
|
|
8
|
+
const remark_math_1 = __importDefault(require("remark-math"));
|
|
9
|
+
const rehype_katex_1 = __importDefault(require("rehype-katex"));
|
|
10
|
+
const constant_js_1 = require("../constant.js");
|
|
11
|
+
function createBuildInPlugin(partialPlugin) {
|
|
12
|
+
const plugin = {
|
|
13
|
+
...partialPlugin,
|
|
14
|
+
type: 'buildIn',
|
|
15
|
+
};
|
|
16
|
+
return plugin;
|
|
17
|
+
}
|
|
18
|
+
const katexPlugin = createBuildInPlugin({
|
|
19
|
+
remarkPlugin: remark_math_1.default,
|
|
20
|
+
rehypePlugin: rehype_katex_1.default,
|
|
21
|
+
id: constant_js_1.katexId,
|
|
22
|
+
});
|
|
23
|
+
exports.katexPlugin = katexPlugin;
|
|
24
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/plugins/index.tsx"],"names":[],"mappings":";;;;;;AAoBS,kDAAmB;AApB5B,8DAAqC;AAErC,gEAAuC;AACvC,gDAAyC;AAEzC,SAAS,mBAAmB,CAAC,aAAuC;IAClE,MAAM,MAAM,GAAoB;QAC9B,GAAG,aAAa;QAChB,IAAI,EAAE,SAAS;KAChB,CAAC;IAEF,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,MAAM,WAAW,GAAG,mBAAmB,CAAC;IACtC,YAAY,EAAE,qBAAU;IACxB,YAAY,EAAE,sBAAW;IACzB,EAAE,EAAE,qBAAO;CACZ,CAAC,CAAC;AAE2B,kCAAW"}
|
|
@@ -4,7 +4,7 @@ import HighReactMarkdown from '../components/HighReactMarkdown/index.js';
|
|
|
4
4
|
import classNames from 'classnames';
|
|
5
5
|
import { __DEV__ } from '../constant.js';
|
|
6
6
|
import { useTypingTask } from '../hooks/useTypingTask.js';
|
|
7
|
-
const MarkdownCMD = forwardRef(({ interval = 30, onEnd, onStart, onTypedChar, timerType = 'setTimeout', theme = 'light', math }, ref) => {
|
|
7
|
+
const MarkdownCMD = forwardRef(({ interval = 30, onEnd, onStart, onTypedChar, timerType = 'setTimeout', theme = 'light', math, plugins }, ref) => {
|
|
8
8
|
/** 当前需要打字的内容 */
|
|
9
9
|
const charsRef = useRef([]);
|
|
10
10
|
/**
|
|
@@ -134,7 +134,7 @@ const MarkdownCMD = forwardRef(({ interval = 30, onEnd, onStart, onTypedChar, ti
|
|
|
134
134
|
*/
|
|
135
135
|
}));
|
|
136
136
|
const getParagraphs = (answerType) => {
|
|
137
|
-
return (_jsx("div", { className: `ds-markdown-paragraph ds-typed-${answerType}`, children: _jsx(HighReactMarkdown, { theme: theme, math: math, children: wholeContentRef.current[answerType].content || '' }) }));
|
|
137
|
+
return (_jsx("div", { className: `ds-markdown-paragraph ds-typed-${answerType}`, children: _jsx(HighReactMarkdown, { theme: theme, math: math, plugins: plugins, children: wholeContentRef.current[answerType].content || '' }) }));
|
|
138
138
|
};
|
|
139
139
|
return (_jsxs("div", { className: classNames({
|
|
140
140
|
'ds-markdown': true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/MarkdownCMD/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE1E,OAAO,iBAAiB,MAAM,0CAA0C,CAAC;AACzE,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAI1D,MAAM,WAAW,GAAG,UAAU,CAAmC,CAAC,EAAE,QAAQ,GAAG,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,SAAS,GAAG,YAAY,EAAE,KAAK,GAAG,OAAO,EAAE,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/MarkdownCMD/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { Options } from 'react-markdown';
|
|
3
|
-
import { IMarkdownMath, Theme } from '../../defined.js';
|
|
3
|
+
import { IMarkdownMath, IMarkdownPlugin, Theme } from '../../defined.js';
|
|
4
4
|
interface HighReactMarkdownProps extends Options {
|
|
5
5
|
theme?: Theme;
|
|
6
6
|
children: string;
|
|
7
7
|
math?: IMarkdownMath;
|
|
8
|
+
plugins?: IMarkdownPlugin[];
|
|
8
9
|
}
|
|
9
10
|
declare const _default: React.NamedExoticComponent<HighReactMarkdownProps>;
|
|
10
11
|
export default _default;
|
|
@@ -1,31 +1,44 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
2
3
|
import { memo, useMemo } from 'react';
|
|
3
4
|
import Markdown from 'react-markdown';
|
|
4
5
|
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
|
5
6
|
import gfmPlugin from 'remark-gfm';
|
|
6
|
-
import rehypeKatex from 'rehype-katex';
|
|
7
|
-
import remarkMath from 'remark-math';
|
|
8
7
|
import { replaceMathBracket } from '../../utils/remarkMathBracket.js';
|
|
9
8
|
import BlockWrap from '../BlockWrap/index.js';
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
const mathOpen = math?.isOpen ?? false;
|
|
9
|
+
import { katexId } from '../../constant.js';
|
|
10
|
+
const HighReactMarkdown = ({ theme = 'light', children: _children, math, plugins, ...props }) => {
|
|
13
11
|
const mathSplitSymbol = math?.splitSymbol ?? 'dollar';
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
if (
|
|
19
|
-
return
|
|
12
|
+
const { remarkPlugins, rehypePlugins, hasKatexPlugin } = useMemo(() => {
|
|
13
|
+
let hasKatexPlugin = false;
|
|
14
|
+
const remarkPlugins = [gfmPlugin];
|
|
15
|
+
const rehypePlugins = [];
|
|
16
|
+
if (!plugins) {
|
|
17
|
+
return {
|
|
18
|
+
remarkPlugins,
|
|
19
|
+
rehypePlugins,
|
|
20
|
+
};
|
|
20
21
|
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
plugins.forEach((plugin) => {
|
|
23
|
+
if (plugin.id === katexId) {
|
|
24
|
+
hasKatexPlugin = true;
|
|
25
|
+
remarkPlugins.push(plugin.remarkPlugin);
|
|
26
|
+
rehypePlugins.push(plugin.rehypePlugin);
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
return {
|
|
30
|
+
remarkPlugins,
|
|
31
|
+
rehypePlugins,
|
|
32
|
+
hasKatexPlugin,
|
|
33
|
+
};
|
|
34
|
+
}, [plugins]);
|
|
35
|
+
const children = useMemo(() => {
|
|
36
|
+
/** 如果存在数学公式插件,并且数学公式分隔符为括号,则替换成 $ 符号 */
|
|
37
|
+
if (hasKatexPlugin && mathSplitSymbol === 'bracket') {
|
|
38
|
+
return replaceMathBracket(_children);
|
|
26
39
|
}
|
|
27
|
-
return
|
|
28
|
-
}, [
|
|
40
|
+
return _children;
|
|
41
|
+
}, [hasKatexPlugin, mathSplitSymbol, _children]);
|
|
29
42
|
return (_jsx(Markdown, { remarkPlugins: remarkPlugins, rehypePlugins: rehypePlugins, components: {
|
|
30
43
|
code: ({ className, children, ...props }) => {
|
|
31
44
|
const match = /language-(\w+)/.exec(className || '');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/HighReactMarkdown/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AAEtC,OAAO,EAAE,KAAK,IAAI,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/HighReactMarkdown/index.tsx"],"names":[],"mappings":"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"}
|
package/dist/esm/constant.d.ts
CHANGED
package/dist/esm/constant.js
CHANGED
package/dist/esm/constant.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constant.js","sourceRoot":"","sources":["../../src/constant.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,CAAC"}
|
|
1
|
+
{"version":3,"file":"constant.js","sourceRoot":"","sources":["../../src/constant.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,CAAC;AAE9D,eAAe;AACf,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC"}
|
package/dist/esm/defined.d.ts
CHANGED
|
@@ -44,7 +44,7 @@ export interface IOnTypedCharData {
|
|
|
44
44
|
answerType: AnswerType;
|
|
45
45
|
prevStr: string;
|
|
46
46
|
}
|
|
47
|
-
export interface
|
|
47
|
+
export interface ITypedChar extends IOnTypedCharData {
|
|
48
48
|
percent: number;
|
|
49
49
|
}
|
|
50
50
|
export interface MarkdownProps {
|
|
@@ -66,17 +66,22 @@ export interface MarkdownProps {
|
|
|
66
66
|
* @param char 字符
|
|
67
67
|
* @param index 字符索引
|
|
68
68
|
*/
|
|
69
|
-
onTypedChar?: (data?:
|
|
69
|
+
onTypedChar?: (data?: ITypedChar) => void;
|
|
70
70
|
/** 主题 */
|
|
71
71
|
theme?: Theme;
|
|
72
72
|
/** 数学公式配置 */
|
|
73
73
|
math?: IMarkdownMath;
|
|
74
|
+
plugins?: IMarkdownPlugin[];
|
|
75
|
+
}
|
|
76
|
+
export interface IMarkdownPlugin {
|
|
77
|
+
remarkPlugin?: unknown;
|
|
78
|
+
rehypePlugin?: unknown;
|
|
79
|
+
type: 'buildIn' | 'custom';
|
|
80
|
+
id?: any;
|
|
74
81
|
}
|
|
75
82
|
export interface IMarkdownMath {
|
|
76
83
|
/** 是括号还是$作为分隔符, 默认是$ */
|
|
77
84
|
splitSymbol: 'bracket' | 'dollar';
|
|
78
|
-
/** 是否开启数学公式 */
|
|
79
|
-
isOpen?: boolean;
|
|
80
85
|
}
|
|
81
86
|
export interface IWholeContent {
|
|
82
87
|
thinking: {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AnswerType, IChar,
|
|
1
|
+
import { AnswerType, IChar, ITypedChar, IWholeContent, MarkdownProps } from '../defined.js';
|
|
2
2
|
interface UseTypingTaskOptions {
|
|
3
3
|
timerType: MarkdownProps['timerType'];
|
|
4
4
|
interval: number;
|
|
@@ -14,7 +14,7 @@ interface UseTypingTaskOptions {
|
|
|
14
14
|
answerType: AnswerType;
|
|
15
15
|
prevStr: string;
|
|
16
16
|
}) => void;
|
|
17
|
-
onTypedChar?: (data?:
|
|
17
|
+
onTypedChar?: (data?: ITypedChar) => void;
|
|
18
18
|
processCharDisplay: (char: IChar) => void;
|
|
19
19
|
wholeContentRef: React.RefObject<IWholeContent>;
|
|
20
20
|
}
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import MarkdownCMD from './MarkdownCMD/index.js';
|
|
2
2
|
import Markdown from './Markdown/index.js';
|
|
3
|
-
import type { MarkdownCMDRef, MarkdownRef } from './defined.js';
|
|
3
|
+
import type { MarkdownCMDRef, MarkdownRef, IMarkdownMath, ITypedChar } from './defined.js';
|
|
4
4
|
export default Markdown;
|
|
5
|
-
export type { MarkdownCMDRef, MarkdownRef };
|
|
5
|
+
export type { MarkdownCMDRef, MarkdownRef, IMarkdownMath, ITypedChar };
|
|
6
6
|
export { Markdown, MarkdownCMD };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import remarkMath from 'remark-math';
|
|
2
|
+
import rehypeKatex from 'rehype-katex';
|
|
3
|
+
import { katexId } from '../constant.js';
|
|
4
|
+
function createBuildInPlugin(partialPlugin) {
|
|
5
|
+
const plugin = {
|
|
6
|
+
...partialPlugin,
|
|
7
|
+
type: 'buildIn',
|
|
8
|
+
};
|
|
9
|
+
return plugin;
|
|
10
|
+
}
|
|
11
|
+
const katexPlugin = createBuildInPlugin({
|
|
12
|
+
remarkPlugin: remarkMath,
|
|
13
|
+
rehypePlugin: rehypeKatex,
|
|
14
|
+
id: katexId,
|
|
15
|
+
});
|
|
16
|
+
export { createBuildInPlugin, katexPlugin };
|
|
17
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/plugins/index.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,aAAa,CAAC;AAErC,OAAO,WAAW,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC,SAAS,mBAAmB,CAAC,aAAuC;IAClE,MAAM,MAAM,GAAoB;QAC9B,GAAG,aAAa;QAChB,IAAI,EAAE,SAAS;KAChB,CAAC;IAEF,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,MAAM,WAAW,GAAG,mBAAmB,CAAC;IACtC,YAAY,EAAE,UAAU;IACxB,YAAY,EAAE,WAAW;IACzB,EAAE,EAAE,OAAO;CACZ,CAAC,CAAC;AAEH,OAAO,EAAE,mBAAmB,EAAE,WAAW,EAAE,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ds-markdown",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.0
|
|
4
|
+
"version": "0.1.0",
|
|
5
5
|
"main": "./dist/cjs/index.js",
|
|
6
6
|
"types": "./dist/cjs/index.d.ts",
|
|
7
7
|
"module": "./dist/esm/index.js",
|
|
@@ -27,6 +27,11 @@
|
|
|
27
27
|
"default": "./dist/cjs/index.js"
|
|
28
28
|
}
|
|
29
29
|
},
|
|
30
|
+
"./plugins": {
|
|
31
|
+
"import": "./dist/esm/plugins/index.js",
|
|
32
|
+
"require": "./dist/cjs/plugins/index.js",
|
|
33
|
+
"default": "./dist/esm/plugins/index.js"
|
|
34
|
+
},
|
|
30
35
|
"./style.css": {
|
|
31
36
|
"import": "./dist/style.css",
|
|
32
37
|
"require": "./dist/style.css",
|
|
@@ -120,6 +125,6 @@
|
|
|
120
125
|
"react-markdown"
|
|
121
126
|
],
|
|
122
127
|
"publishConfig": {
|
|
123
|
-
"tag": "
|
|
128
|
+
"tag": "latest"
|
|
124
129
|
}
|
|
125
130
|
}
|