ds-markdown 0.0.15-beta.0 → 0.0.15-beta.2
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 +78 -113
- 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 +11 -1
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,13 @@ function App() {
|
|
|
108
111
|
|
|
109
112
|
```tsx
|
|
110
113
|
import DsMarkdown from 'ds-markdown';
|
|
114
|
+
import { katexPlugin } from 'ds-markdown/plugins';
|
|
111
115
|
import 'ds-markdown/style.css';
|
|
112
116
|
import 'ds-markdown/katex.css'; // 引入数学公式样式
|
|
113
117
|
|
|
114
118
|
function MathDemo() {
|
|
115
119
|
return (
|
|
116
|
-
<DsMarkdown interval={20} answerType="answer" math={{
|
|
120
|
+
<DsMarkdown interval={20} answerType="answer" plugins={[katexPlugin]} math={{ splitSymbol: 'dollar' }}>
|
|
117
121
|
# 勾股定理 在直角三角形中,斜边的平方等于两条直角边的平方和: $a^2 + b^2 = c^2$ 其中: - $a$ 和 $b$ 是直角边 - $c$ 是斜边 对于经典的"勾三股四弦五": $c = \sqrt{3 ^ (2 + 4) ^ 2} = \sqrt{25} = 5$
|
|
118
122
|
</DsMarkdown>
|
|
119
123
|
);
|
|
@@ -176,23 +180,40 @@ React 19 带来了许多激动人心的新特性:
|
|
|
176
180
|
| `timerType` | `'setTimeout'` \| `'requestAnimationFrame'` | 定时器类型 | 当前默认值是`setTimeout`,后期会改为`requestAnimationFrame` |
|
|
177
181
|
| `answerType` | `'thinking'` \| `'answer'` | 内容类型 (影响样式主题) | `'answer'` |
|
|
178
182
|
| `theme` | `'light'` \| `'dark'` | 主题类型 | `'light'` |
|
|
179
|
-
| `
|
|
183
|
+
| `plugins` | `IMarkdownPlugin[]` | 插件配置 | `[]` |
|
|
184
|
+
| `math` | [IMarkdownMath](#IMarkdownMath) | 数学公式配置 | `{ splitSymbol: 'dollar' }` |
|
|
180
185
|
| `onEnd` | `(data: EndData) => void` | 打字结束回调 | - |
|
|
181
186
|
| `onStart` | `(data: StartData) => void` | 打字开始回调 | - |
|
|
182
|
-
| `onTypedChar` | `(data:
|
|
187
|
+
| `onTypedChar` | `(data: [ITypedChar](#ITypedChar)) => void` | 每字符打字回调 | - |
|
|
188
|
+
|
|
189
|
+
### ITypedChar
|
|
190
|
+
|
|
191
|
+
| 属性 | 类型 | 说明 | 默认值 |
|
|
192
|
+
| -------------- | -------- | ---------------------------- | ------ |
|
|
193
|
+
| `percent` | `number` | 打字进度百分比 | `0` |
|
|
194
|
+
| `currentChar` | `string` | 当前打字的字符 | - |
|
|
195
|
+
| `currentIndex` | `number` | 当前打字在整个字符串中的索引 | `0` |
|
|
183
196
|
|
|
184
|
-
|
|
197
|
+
#### IMarkdownMath
|
|
185
198
|
|
|
186
|
-
| 属性 | 类型 | 说明
|
|
187
|
-
| ------------- | ------------------------- |
|
|
188
|
-
| `
|
|
189
|
-
| `splitSymbol` | `'dollar'` \| `'bracket'` | 数学公式分隔符类型 | `'dollar'` |
|
|
199
|
+
| 属性 | 类型 | 说明 | 默认值 |
|
|
200
|
+
| ------------- | ------------------------- | ------------------ | ---------- |
|
|
201
|
+
| `splitSymbol` | `'dollar'` \| `'bracket'` | 数学公式分隔符类型 | `'dollar'` |
|
|
190
202
|
|
|
191
203
|
**分隔符说明:**
|
|
192
204
|
|
|
193
205
|
- `'dollar'`:使用 `$...$` 和 `$$...$$` 语法
|
|
194
206
|
- `'bracket'`:使用 `\(...\)` 和 `\[...\]` 语法
|
|
195
207
|
|
|
208
|
+
#### IMarkdownPlugin
|
|
209
|
+
|
|
210
|
+
| 属性 | 类型 | 说明 | 默认值 |
|
|
211
|
+
| -------------- | ------------------------- | ------------ | ------ |
|
|
212
|
+
| `remarkPlugin` | `unknown` | remark 插件 | - |
|
|
213
|
+
| `rehypePlugin` | `unknown` | rehype 插件 | - |
|
|
214
|
+
| `type` | `'buildIn'` \| `'custom'` | 插件类型 | - |
|
|
215
|
+
| `id` | `any` | 插件唯一标识 | - |
|
|
216
|
+
|
|
196
217
|
### 命令式 API (推荐流式场景)
|
|
197
218
|
|
|
198
219
|
| 方法 | 参数 | 说明 |
|
|
@@ -219,8 +240,10 @@ markdownRef.current?.resume(); // 恢复动画
|
|
|
219
240
|
### 基本语法
|
|
220
241
|
|
|
221
242
|
```tsx
|
|
243
|
+
import { katexPlugin } from 'ds-markdown/plugins';
|
|
244
|
+
|
|
222
245
|
// 1. 启用数学公式支持
|
|
223
|
-
<DsMarkdown
|
|
246
|
+
<DsMarkdown plugins={[katexPlugin]}>
|
|
224
247
|
# 数学公式示例
|
|
225
248
|
|
|
226
249
|
// 行内公式
|
|
@@ -235,13 +258,19 @@ markdownRef.current?.resume(); // 恢复动画
|
|
|
235
258
|
|
|
236
259
|
```tsx
|
|
237
260
|
// 使用美元符号分隔符(默认)
|
|
238
|
-
<DsMarkdown
|
|
261
|
+
<DsMarkdown
|
|
262
|
+
plugins={[katexPlugin]}
|
|
263
|
+
math={{ splitSymbol: 'dollar' }}
|
|
264
|
+
>
|
|
239
265
|
行内:$a + b = c$
|
|
240
266
|
块级:$$\sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n$$
|
|
241
267
|
</DsMarkdown>
|
|
242
268
|
|
|
243
269
|
// 使用括号分隔符
|
|
244
|
-
<DsMarkdown
|
|
270
|
+
<DsMarkdown
|
|
271
|
+
plugins={[katexPlugin]}
|
|
272
|
+
math={{ splitSymbol: 'bracket' }}
|
|
273
|
+
>
|
|
245
274
|
行内:\(a + b = c\)
|
|
246
275
|
块级:\[\sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n\]
|
|
247
276
|
</DsMarkdown>
|
|
@@ -289,6 +318,37 @@ mathContent.forEach((chunk) => {
|
|
|
289
318
|
|
|
290
319
|
---
|
|
291
320
|
|
|
321
|
+
## 🔌 插件系统
|
|
322
|
+
|
|
323
|
+
### 内置插件
|
|
324
|
+
|
|
325
|
+
#### KaTeX 数学公式插件
|
|
326
|
+
|
|
327
|
+
```tsx
|
|
328
|
+
import { katexPlugin } from 'ds-markdown/plugins';
|
|
329
|
+
|
|
330
|
+
// 启用数学公式支持
|
|
331
|
+
<DsMarkdown plugins={[katexPlugin]}>数学公式:$E = mc^2$</DsMarkdown>;
|
|
332
|
+
```
|
|
333
|
+
|
|
334
|
+
### 自定义插件
|
|
335
|
+
|
|
336
|
+
```tsx
|
|
337
|
+
import { createBuildInPlugin } from 'ds-markdown/plugins';
|
|
338
|
+
|
|
339
|
+
// 创建自定义插件
|
|
340
|
+
const customPlugin = createBuildInPlugin({
|
|
341
|
+
remarkPlugin: yourRemarkPlugin,
|
|
342
|
+
rehypePlugin: yourRehypePlugin,
|
|
343
|
+
id: Symbol('custom-plugin'),
|
|
344
|
+
});
|
|
345
|
+
|
|
346
|
+
// 使用自定义插件
|
|
347
|
+
<DsMarkdown plugins={[katexPlugin, customPlugin]}>内容</DsMarkdown>;
|
|
348
|
+
```
|
|
349
|
+
|
|
350
|
+
---
|
|
351
|
+
|
|
292
352
|
## 🎛️ 定时器模式详解
|
|
293
353
|
|
|
294
354
|
### `requestAnimationFrame` 模式 🌟 (推荐)
|
|
@@ -403,6 +463,8 @@ const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
|
|
|
403
463
|
### 🧮 数学公式流式渲染
|
|
404
464
|
|
|
405
465
|
```tsx
|
|
466
|
+
import { katexPlugin } from 'ds-markdown/plugins';
|
|
467
|
+
|
|
406
468
|
function MathStreamingDemo() {
|
|
407
469
|
const markdownRef = useRef<MarkdownCMDRef>(null);
|
|
408
470
|
|
|
@@ -431,7 +493,7 @@ function MathStreamingDemo() {
|
|
|
431
493
|
<div>
|
|
432
494
|
<button onClick={simulateMathResponse}>📐 讲解勾股定理</button>
|
|
433
495
|
|
|
434
|
-
<MarkdownCMD ref={markdownRef} interval={20} timerType="requestAnimationFrame" math={{
|
|
496
|
+
<MarkdownCMD ref={markdownRef} interval={20} timerType="requestAnimationFrame" plugins={[katexPlugin]} math={{ splitSymbol: 'dollar' }} />
|
|
435
497
|
</div>
|
|
436
498
|
);
|
|
437
499
|
}
|
|
@@ -535,8 +597,9 @@ import 'ds-markdown/katex.css'; // 仅在需要时引入
|
|
|
535
597
|
// 对于简单公式,使用 $...$ 更简洁
|
|
536
598
|
// 对于复杂公式,使用 $$...$$ 更清晰
|
|
537
599
|
|
|
538
|
-
//
|
|
539
|
-
|
|
600
|
+
// ✅ 推荐:插件化配置
|
|
601
|
+
import { katexPlugin } from 'ds-markdown/plugins';
|
|
602
|
+
<DsMarkdown plugins={[katexPlugin]}>数学公式内容</DsMarkdown>;
|
|
540
603
|
```
|
|
541
604
|
|
|
542
605
|
### 4. 类型安全
|
|
@@ -547,101 +610,3 @@ import { MarkdownCMDRef } from 'ds-markdown';
|
|
|
547
610
|
const ref = useRef<MarkdownCMDRef>(null);
|
|
548
611
|
// 完整的 TypeScript 类型提示
|
|
549
612
|
```
|
|
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.15-beta.
|
|
4
|
+
"version": "0.0.15-beta.2",
|
|
5
5
|
"main": "./dist/cjs/index.js",
|
|
6
6
|
"types": "./dist/cjs/index.d.ts",
|
|
7
7
|
"module": "./dist/esm/index.js",
|
|
@@ -27,10 +27,20 @@
|
|
|
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",
|
|
33
38
|
"default": "./dist/style.css"
|
|
39
|
+
},
|
|
40
|
+
"./katex.css": {
|
|
41
|
+
"import": "./dist/katex.css",
|
|
42
|
+
"require": "./dist/katex.css",
|
|
43
|
+
"default": "./dist/katex.css"
|
|
34
44
|
}
|
|
35
45
|
},
|
|
36
46
|
"files": [
|