ds-markdown 0.2.0 β 0.2.1
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 +190 -163
- package/README.md +201 -64
- package/dist/cjs/index.d.ts +6 -1
- package/dist/cjs/index.js +7 -3
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.d.ts +6 -1
- package/dist/esm/index.js +7 -3
- package/dist/esm/index.js.map +1 -1
- package/package.json +4 -3
package/README.en.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
> π High-performance React Markdown typing animation component, perfectly replicating DeepSeek chat interface effects
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
**πΊπΈ English | [π¨π³ δΈζ](./README.md)**
|
|
6
6
|
|
|
7
7
|
A React component designed specifically for modern AI applications, providing smooth real-time typing animations and complete Markdown rendering capabilities.
|
|
8
8
|
|
|
@@ -17,101 +17,126 @@ A React component designed specifically for modern AI applications, providing sm
|
|
|
17
17
|
- [Basic Usage](https://stackblitz.com/edit/vitejs-vite-ddfw8avb?file=src%2FApp.tsx)
|
|
18
18
|
- [Streaming Data Usage](https://stackblitz.com/edit/vitejs-vite-2ri8kex3?file=src%2FApp.tsx)
|
|
19
19
|
- [Mermaid Charts](https://stackblitz.com/edit/vitejs-vite-iqbyta3j?file=index.html)
|
|
20
|
-
- [Math
|
|
21
|
-
- [Math
|
|
20
|
+
- [Math Formulas Demo 1](https://stackblitz.com/edit/vitejs-vite-iqbyta3j?file=index.html)
|
|
21
|
+
- [Math Formulas Demo 2](https://stackblitz.com/edit/vitejs-vite-xk9lxagc?file=src%2FApp.tsx)
|
|
22
22
|
|
|
23
|
-
If you want a
|
|
23
|
+
If you want a clean `react markdown` typing component, you can use [react-markdown-typer](https://github.com/onshinpei/react-markdown-typer)
|
|
24
24
|
|
|
25
25
|
---
|
|
26
26
|
|
|
27
27
|
## β Why use ds-markdown?
|
|
28
28
|
|
|
29
|
-
|
|
30
|
-
1:1 recreation of DeepSeek and other mainstream AI chat interface typing animations and streaming responses, delivering an authentic "AI is thinking/answering" experience that greatly enhances user immersion.
|
|
29
|
+
### π― **Core Problems Solved**
|
|
31
30
|
|
|
32
|
-
- **
|
|
33
|
-
|
|
34
|
-
**ds-markdown automatically splits each chunk into single characters and renders them one by one with smooth animations, ensuring fluent typing regardless of how many characters the backend pushes at once.**
|
|
31
|
+
- **Streaming Data Typing Stuttering Issues**
|
|
32
|
+
Traditional typewriter components experience stuttering and character jumping when processing AI backend streaming data, as each chunk contains multiple characters. ds-markdown intelligently splits each chunk to ensure smooth typing for every character.
|
|
35
33
|
|
|
36
|
-
- **
|
|
34
|
+
- **Markdown Rendering and Typing Animation Disconnection**
|
|
35
|
+
Most typewriter components only support plain text and cannot render Markdown syntax, mathematical formulas, charts, and other rich media content in real-time during typing.
|
|
37
36
|
|
|
38
|
-
|
|
39
|
-
- Support for `Diagram` rendering through the [mermaid-plugin](https://github.com/onshinpei/ds-markdown-mermaid-plugin)
|
|
37
|
+
### π **Value Delivered**
|
|
40
38
|
|
|
41
|
-
- **
|
|
42
|
-
|
|
39
|
+
- **Enhanced User Immersion**
|
|
40
|
+
Provides professional-level AI chat experience, allowing users to feel authentic AI interaction processes, greatly improving product professionalism and user satisfaction.
|
|
43
41
|
|
|
44
|
-
- **
|
|
45
|
-
|
|
42
|
+
- **Out-of-the-box, Reduces Development Complexity**
|
|
43
|
+
Complete solution that requires no additional configuration to support streaming data, Markdown rendering, mathematical formulas, charts, and other complex features.
|
|
46
44
|
|
|
47
|
-
- **
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
- **Rich UI Component System** π
|
|
51
|
-
Built-in UI components: Button, IconButton, ToolTip, Segmented, etc., supporting code block copy, download, and other interactive features.
|
|
52
|
-
|
|
53
|
-
- **Wide Range of Use Cases**
|
|
54
|
-
- AI chatbots/assistants
|
|
55
|
-
- Real-time Q&A/knowledge bases
|
|
56
|
-
- Education/math/programming content display
|
|
57
|
-
- Product demos, interactive documentation
|
|
58
|
-
- Any scenario requiring "typewriter" animation and streaming Markdown rendering
|
|
45
|
+
- **Adapts to Multiple Application Scenarios**
|
|
46
|
+
From AI chatbots to educational content display, from technical documentation to product demos, one component meets multiple needs.
|
|
59
47
|
|
|
60
48
|
---
|
|
61
49
|
|
|
62
|
-
##
|
|
63
|
-
|
|
64
|
-
- [
|
|
65
|
-
- [
|
|
66
|
-
- [
|
|
67
|
-
|
|
68
|
-
- [
|
|
69
|
-
- [
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
- [
|
|
74
|
-
- [
|
|
75
|
-
- [
|
|
76
|
-
- [
|
|
77
|
-
- [
|
|
78
|
-
|
|
79
|
-
|
|
50
|
+
## Table of Contents
|
|
51
|
+
|
|
52
|
+
- [ds-markdown](#ds-markdown)
|
|
53
|
+
- [β Why use ds-markdown?](#-why-use-ds-markdown)
|
|
54
|
+
- [π― **Core Problems Solved**](#-core-problems-solved)
|
|
55
|
+
- [π **Value Delivered**](#-value-delivered)
|
|
56
|
+
- [Table of Contents](#table-of-contents)
|
|
57
|
+
- [β¨ Core Features](#-core-features)
|
|
58
|
+
- [π€ **AI Chat Scenarios**](#-ai-chat-scenarios)
|
|
59
|
+
- [π **Content Display Scenarios**](#-content-display-scenarios)
|
|
60
|
+
- [π¨ **UI Component System π**](#-ui-component-system-)
|
|
61
|
+
- [π§ **Development Experience**](#-development-experience)
|
|
62
|
+
- [π¬ **Smooth Animation**](#-smooth-animation)
|
|
63
|
+
- [β‘ **Performance Optimization**](#-performance-optimization)
|
|
64
|
+
- [π¦ Quick Installation](#-quick-installation)
|
|
65
|
+
- [Using via ESM CDN](#using-via-esm-cdn)
|
|
66
|
+
- [π 5-Minute Quick Start](#-5-minute-quick-start)
|
|
67
|
+
- [Basic Usage](#basic-usage)
|
|
68
|
+
- [Disable Typing Animation](#disable-typing-animation)
|
|
69
|
+
- [Mathematical Formula Support](#mathematical-formula-support)
|
|
70
|
+
- [AI Chat Scenarios](#ai-chat-scenarios)
|
|
71
|
+
- [Code Block Features π](#code-block-features-)
|
|
72
|
+
- [Mermaid Chart Support](#mermaid-chart-support)
|
|
73
|
+
- [π Complete API Documentation](#-complete-api-documentation)
|
|
74
|
+
- [Default export DsMarkdown and MarkdownCMD props](#default-export-dsmarkdown-and-markdowncmd-props)
|
|
75
|
+
- [IBeforeTypedChar](#ibeforetypedchar)
|
|
76
|
+
- [ITypedChar](#itypedchar)
|
|
77
|
+
- [IMarkdownMath](#imarkdownmath)
|
|
78
|
+
- [IMarkdownCode π](#imarkdowncode-)
|
|
79
|
+
- [IMarkdownPlugin](#imarkdownplugin)
|
|
80
|
+
- [Component Exposed Methods](#component-exposed-methods)
|
|
81
|
+
- [Default export DsMarkdown](#default-export-dsmarkdown)
|
|
82
|
+
- [MarkdownCMD Exposed Methods](#markdowncmd-exposed-methods)
|
|
83
|
+
- [π Plugin System](#-plugin-system)
|
|
84
|
+
- [Built-in Plugins](#built-in-plugins)
|
|
85
|
+
- [KaTeX Mathematical Formula Plugin](#katex-mathematical-formula-plugin)
|
|
86
|
+
- [Mermaid Chart Plugin π](#mermaid-chart-plugin-)
|
|
87
|
+
- [Custom Plugins](#custom-plugins)
|
|
88
|
+
- [π¨ UI Component System π](#-ui-component-system--1)
|
|
89
|
+
- [Core Components](#core-components)
|
|
90
|
+
- [Style Customization](#style-customization)
|
|
91
|
+
- [Multi-language Configuration](#multi-language-configuration)
|
|
92
|
+
- [π‘ Practical Examples](#-practical-examples)
|
|
93
|
+
- [π AI Streaming Chat](#-ai-streaming-chat)
|
|
94
|
+
- [π§ Best Practices](#-best-practices)
|
|
95
|
+
- [1. Performance Optimization](#1-performance-optimization)
|
|
96
|
+
- [2. Streaming Data Processing](#2-streaming-data-processing)
|
|
97
|
+
- [3. Mathematical Formula Optimization](#3-mathematical-formula-optimization)
|
|
98
|
+
- [4. Mermaid Chart Best Practices π](#4-mermaid-chart-best-practices-)
|
|
80
99
|
|
|
81
100
|
## β¨ Core Features
|
|
82
101
|
|
|
83
|
-
### π€ **AI
|
|
102
|
+
### π€ **AI Chat Scenarios**
|
|
84
103
|
|
|
85
|
-
-
|
|
86
|
-
-
|
|
87
|
-
- Perfect
|
|
104
|
+
- Professional-level AI chat response effects, comparable to mainstream AI platform experiences
|
|
105
|
+
- Supports thinking process (`thinking`) and answer content `answer`) dual modes
|
|
106
|
+
- Perfect streaming data adaptation with zero-delay response to user input
|
|
88
107
|
|
|
89
108
|
### π **Content Display Scenarios**
|
|
90
109
|
|
|
91
110
|
- Complete Markdown syntax support, including code highlighting, tables, lists, etc.
|
|
92
111
|
- Mathematical formula rendering (KaTeX), supporting `$...$` and `\[...\]` syntax
|
|
93
112
|
- Mermaid chart support, including flowcharts, sequence diagrams, Gantt charts, class diagrams, etc. π
|
|
94
|
-
-
|
|
113
|
+
- Supports light/dark themes, adapting to different product styles
|
|
95
114
|
- Plugin architecture supporting remark/rehype plugin extensions
|
|
96
115
|
|
|
97
|
-
### π¨ **UI Component System
|
|
116
|
+
### π¨ **UI Component System π**
|
|
98
117
|
|
|
118
|
+
- Code block and chart enhancement features: copy, download, language, etc.
|
|
99
119
|
- Built-in rich UI components: Button, IconButton, ToolTip, Segmented, etc.
|
|
100
|
-
- Code block enhancement features: copy, download, language identification
|
|
101
120
|
- Complete interactive experience and accessibility support
|
|
102
121
|
|
|
103
|
-
### π§ **
|
|
122
|
+
### π§ **Development Experience**
|
|
104
123
|
|
|
105
|
-
-
|
|
106
|
-
-
|
|
124
|
+
- Rich imperative API: `start`, `stop`, `resume`, `restart`, etc.
|
|
125
|
+
- Supports typing interruption and continuation, flexible control of animation states
|
|
126
|
+
- Supports typing on/off, meeting different scenario requirements
|
|
107
127
|
- Complete TypeScript type support
|
|
108
128
|
|
|
109
129
|
### π¬ **Smooth Animation**
|
|
110
130
|
|
|
111
|
-
- Dual timer
|
|
112
|
-
- High-frequency typing support (
|
|
113
|
-
- Frame-synchronized rendering, perfectly
|
|
114
|
-
-
|
|
131
|
+
- Dual-mode timer optimization, supporting `requestAnimationFrame` and `setTimeout` modes
|
|
132
|
+
- High-frequency typing support (typing interval can be as low as close to `0ms` in `requestAnimationFrame` mode)
|
|
133
|
+
- Frame-synchronized rendering, perfectly coordinated with browser refresh
|
|
134
|
+
- Intelligent character batch processing for more natural visual effects
|
|
135
|
+
|
|
136
|
+
### β‘ **Performance Optimization**
|
|
137
|
+
|
|
138
|
+
- Lightweight design, small size and excellent performance
|
|
139
|
+
- Core dependency [react-markdown](https://github.com/remarkjs/react-markdown), no heavyweight dependencies
|
|
115
140
|
|
|
116
141
|
---
|
|
117
142
|
|
|
@@ -130,7 +155,7 @@ pnpm add ds-markdown
|
|
|
130
155
|
|
|
131
156
|
### Using via ESM CDN
|
|
132
157
|
|
|
133
|
-
No installation required, use directly in browser:
|
|
158
|
+
No installation required, use directly in the browser:
|
|
134
159
|
|
|
135
160
|
[DEMO](https://stackblitz.com/edit/stackblitz-starters-7vcclcw7?file=index.html)
|
|
136
161
|
|
|
@@ -138,7 +163,7 @@ No installation required, use directly in browser:
|
|
|
138
163
|
<!-- Import styles, required -->
|
|
139
164
|
<link rel="stylesheet" href="https://esm.sh/ds-markdown/dist/style.css" />
|
|
140
165
|
|
|
141
|
-
<!-- Import
|
|
166
|
+
<!-- Import KaTeX math formula styles, only import if needed -->
|
|
142
167
|
<link rel="stylesheet" href="https://esm.sh/ds-markdown/dist/katex.css" />
|
|
143
168
|
|
|
144
169
|
<!-- Import component -->
|
|
@@ -177,11 +202,11 @@ function StaticDemo() {
|
|
|
177
202
|
|
|
178
203
|
return (
|
|
179
204
|
<div>
|
|
180
|
-
<button onClick={() => setDisableTyping(!disableTyping)}>{disableTyping ? 'Enable' : 'Disable'}
|
|
205
|
+
<button onClick={() => setDisableTyping(!disableTyping)}>{disableTyping ? 'Enable' : 'Disable'} Typewriter Effect</button>
|
|
181
206
|
|
|
182
207
|
<DsMarkdown interval={20} answerType="answer" disableTyping={disableTyping}>
|
|
183
|
-
# Static Display Mode When `disableTyping` is `true`, content will be displayed immediately without typing animation. This is very useful in certain scenarios: - π Static document
|
|
184
|
-
π
|
|
208
|
+
# Static Display Mode When `disableTyping` is `true`, content will be displayed immediately without typing animation effects. This is very useful in certain scenarios: - π Static document
|
|
209
|
+
display - π Switching display modes - β‘ Quick content preview
|
|
185
210
|
</DsMarkdown>
|
|
186
211
|
</div>
|
|
187
212
|
);
|
|
@@ -192,23 +217,23 @@ function StaticDemo() {
|
|
|
192
217
|
|
|
193
218
|
```tsx
|
|
194
219
|
import DsMarkdown from 'ds-markdown';
|
|
195
|
-
// If you need to display formulas, import the formula conversion plugin
|
|
220
|
+
// If you need to display formulas, you need to import the formula conversion plugin
|
|
196
221
|
import { katexPlugin } from 'ds-markdown/plugins';
|
|
197
222
|
import 'ds-markdown/style.css';
|
|
198
|
-
// If you need to display formulas, import
|
|
223
|
+
// If you need to display formulas, you need to import math formula styles
|
|
199
224
|
import 'ds-markdown/katex.css';
|
|
200
225
|
|
|
201
226
|
function MathDemo() {
|
|
202
227
|
return (
|
|
203
228
|
<DsMarkdown interval={20} answerType="answer" plugins={[katexPlugin]} math={{ splitSymbol: 'dollar' }}>
|
|
204
|
-
# 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
|
|
205
|
-
the classic "3-4-5
|
|
229
|
+
# Pythagorean Theorem In a right triangle, the square of the hypotenuse equals the sum of the squares of the two legs: $a^2 + b^2 = c^2$ Where: - $a$ and $b$ are the legs - $c$ is the hypotenuse
|
|
230
|
+
For the classic "3-4-5 triangle": $c = \sqrt{3 ^ (2 + 4) ^ 2} = \sqrt{25} = 5$
|
|
206
231
|
</DsMarkdown>
|
|
207
232
|
);
|
|
208
233
|
}
|
|
209
234
|
```
|
|
210
235
|
|
|
211
|
-
### AI
|
|
236
|
+
### AI Chat Scenarios
|
|
212
237
|
|
|
213
238
|
```tsx
|
|
214
239
|
function ChatDemo() {
|
|
@@ -269,7 +294,7 @@ function greet(name) {
|
|
|
269
294
|
greet('ds-markdown');
|
|
270
295
|
\`\`\`
|
|
271
296
|
|
|
272
|
-
Supports code highlighting,
|
|
297
|
+
Supports code highlighting, copying, and downloading!`;
|
|
273
298
|
|
|
274
299
|
return (
|
|
275
300
|
<DsMarkdown
|
|
@@ -285,7 +310,9 @@ Supports code highlighting, copy, and download features!`;
|
|
|
285
310
|
}
|
|
286
311
|
```
|
|
287
312
|
|
|
288
|
-
### Mermaid Chart Support
|
|
313
|
+
### Mermaid Chart Support
|
|
314
|
+
|
|
315
|
+
[DEMO](https://stackblitz.com/edit/vitejs-vite-iqbyta3j?file=README.md)
|
|
289
316
|
|
|
290
317
|
```tsx
|
|
291
318
|
import DsMarkdown from 'ds-markdown';
|
|
@@ -294,32 +321,28 @@ import mermaidPlugin from 'ds-markdown-mermaid-plugin';
|
|
|
294
321
|
import 'ds-markdown/style.css';
|
|
295
322
|
|
|
296
323
|
function MermaidDemo() {
|
|
297
|
-
const chartContent =
|
|
324
|
+
const chartContent = `Here's a simplified learning to drive flowchart, keeping only the **most core steps**, suitable for quickly mastering key nodes:
|
|
298
325
|
|
|
299
326
|
\`\`\`mermaid
|
|
300
|
-
|
|
301
|
-
A[Start] --> B
|
|
302
|
-
B
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
327
|
+
graph TD
|
|
328
|
+
A[Start] --> B[Subject 1: Theory Exam]
|
|
329
|
+
B --> C[Subject 2: Field Five Items]
|
|
330
|
+
C --> D[Subject 3: Road Test]
|
|
331
|
+
D --> E[Subject 4: Safety Written Test]
|
|
332
|
+
E --> F[Get Driver's License]
|
|
333
|
+
F --> G[Actual Driving Practice]
|
|
306
334
|
\`\`\`
|
|
307
335
|
|
|
308
|
-
|
|
336
|
+
### Minimalist Explanation:
|
|
337
|
+
1. **Theory First**: Pass traffic rules written test (Subject 1).
|
|
338
|
+
2. **Field Basics**: Practice reversing, hill starts, etc. (Subject 2).
|
|
339
|
+
3. **Road Combat**: Actual road driving test (Subject 3).
|
|
340
|
+
4. **Safety Finish**: Pass Subject 4 to get license.
|
|
341
|
+
5. **Continuous Proficiency**: Continue practicing after getting license to adapt to real road conditions.
|
|
309
342
|
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
participant System
|
|
314
|
-
participant Database
|
|
315
|
-
|
|
316
|
-
User->>System: Login Request
|
|
317
|
-
System->>Database: Verify User
|
|
318
|
-
Database-->>System: Return Result
|
|
319
|
-
System-->>User: Login Response
|
|
320
|
-
\`\`\`
|
|
321
|
-
|
|
322
|
-
Supports flowcharts, sequence diagrams, Gantt charts, class diagrams, and many other chart types!`;
|
|
343
|
+
### Visualization Suggestions:
|
|
344
|
+
- When sketching with phone memo or white paper, write steps in **arrow order**.
|
|
345
|
+
- Want more intuitive? Use circular sticky notes for each subject, connect them into a flow.`;
|
|
323
346
|
|
|
324
347
|
return (
|
|
325
348
|
<ConfigProvider>
|
|
@@ -331,6 +354,8 @@ Supports flowcharts, sequence diagrams, Gantt charts, class diagrams, and many o
|
|
|
331
354
|
}
|
|
332
355
|
```
|
|
333
356
|
|
|
357
|
+
|
|
358
|
+
|
|
334
359
|
---
|
|
335
360
|
|
|
336
361
|
## π Complete API Documentation
|
|
@@ -341,71 +366,71 @@ Supports flowcharts, sequence diagrams, Gantt charts, class diagrams, and many o
|
|
|
341
366
|
import DsMarkdown, { MarkdownCMD } from 'ds-markdown';
|
|
342
367
|
```
|
|
343
368
|
|
|
344
|
-
| Property | Type | Description
|
|
345
|
-
| ------------------- | ------------------------------------------- |
|
|
346
|
-
| `interval` | `number` | Typing interval (milliseconds)
|
|
347
|
-
| `timerType` | `'setTimeout'` \| `'requestAnimationFrame'` | Timer type,
|
|
348
|
-
| `answerType` | `'thinking'` \| `'answer'` | Content type (affects
|
|
349
|
-
| `theme` | `'light'` \| `'dark'` | Theme type
|
|
350
|
-
| `plugins` | `IMarkdownPlugin[]` | Plugin configuration
|
|
351
|
-
| `math` | [IMarkdownMath](#IMarkdownMath) | Mathematical formula
|
|
352
|
-
| `onEnd` | `(data: EndData) => void` | Typing completion callback
|
|
353
|
-
| `onStart` | `(data: StartData) => void` | Typing start callback
|
|
354
|
-
| `onBeforeTypedChar` | `(data: IBeforeTypedChar) => Promise<void>` |
|
|
355
|
-
| `onTypedChar` | `(data: ITypedChar) => void` |
|
|
356
|
-
| `disableTyping` | `boolean` | Disable typing animation
|
|
357
|
-
| `autoStartTyping` | `boolean` | Whether to
|
|
358
|
-
| `codeBlock` | `IMarkdownCode` | Code block configuration
|
|
359
|
-
|
|
360
|
-
> Note: If `disableTyping` changes from `true` to `false` during typing
|
|
369
|
+
| Property | Type | Description | Default Value |
|
|
370
|
+
| ------------------- | ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
|
|
371
|
+
| `interval` | `number` | Typing interval (milliseconds) | `30` |
|
|
372
|
+
| `timerType` | `'setTimeout'` \| `'requestAnimationFrame'` | Timer type, does not support dynamic modification | Current default is `setTimeout`, will change to `requestAnimationFrame` later |
|
|
373
|
+
| `answerType` | `'thinking'` \| `'answer'` | Content type (affects style theme), does not support dynamic modification | `'answer'` |
|
|
374
|
+
| `theme` | `'light'` \| `'dark'` | Theme type | `'light'` |
|
|
375
|
+
| `plugins` | `IMarkdownPlugin[]` | Plugin configuration | `[]` |
|
|
376
|
+
| `math` | [IMarkdownMath](#IMarkdownMath) | Mathematical formula configuration | `{ splitSymbol: 'dollar' }` |
|
|
377
|
+
| `onEnd` | `(data: EndData) => void` | Typing completion callback | - |
|
|
378
|
+
| `onStart` | `(data: StartData) => void` | Typing start callback | - |
|
|
379
|
+
| `onBeforeTypedChar` | `(data: IBeforeTypedChar) => Promise<void>` | Callback before character typing, supports async operations, blocks subsequent typing | - |
|
|
380
|
+
| `onTypedChar` | `(data: ITypedChar) => void` | Callback after each character typing | - |
|
|
381
|
+
| `disableTyping` | `boolean` | Disable typing animation effects | `false` |
|
|
382
|
+
| `autoStartTyping` | `boolean` | Whether to automatically start typing animation, set to false for manual trigger, does not support dynamic modification | `true` |
|
|
383
|
+
| `codeBlock` | `IMarkdownCode` | Code block configuration | `{headerActions: true}` |
|
|
384
|
+
|
|
385
|
+
> Note: If `disableTyping` changes from `true` to `false` during typing
|
|
361
386
|
|
|
362
387
|
### IBeforeTypedChar
|
|
363
388
|
|
|
364
|
-
| Property | Type | Description | Default |
|
|
365
|
-
| -------------- | ------------ | -------------------------------------------- |
|
|
366
|
-
| `currentIndex` | `number` | Current character index in the entire string | `0`
|
|
367
|
-
| `currentChar` | `string` |
|
|
368
|
-
| `answerType` | `AnswerType` | Content type (thinking/answer) | -
|
|
369
|
-
| `prevStr` | `string` |
|
|
370
|
-
| `percent` | `number` | Typing progress percentage (0-100) | `0`
|
|
389
|
+
| Property | Type | Description | Default Value |
|
|
390
|
+
| -------------- | ------------ | -------------------------------------------- | ------------- |
|
|
391
|
+
| `currentIndex` | `number` | Current character index in the entire string | `0` |
|
|
392
|
+
| `currentChar` | `string` | Current character about to be typed | - |
|
|
393
|
+
| `answerType` | `AnswerType` | Content type (thinking/answer) | - |
|
|
394
|
+
| `prevStr` | `string` | Prefix string of current type content | - |
|
|
395
|
+
| `percent` | `number` | Typing progress percentage (0-100) | `0` |
|
|
371
396
|
|
|
372
397
|
### ITypedChar
|
|
373
398
|
|
|
374
|
-
| Property | Type | Description | Default |
|
|
375
|
-
| -------------- | ------------ | -------------------------------------------- |
|
|
376
|
-
| `currentIndex` | `number` | Current character index in the entire string | `0`
|
|
377
|
-
| `currentChar` | `string` |
|
|
378
|
-
| `answerType` | `AnswerType` | Content type (thinking/answer) | -
|
|
379
|
-
| `prevStr` | `string` |
|
|
380
|
-
| `currentStr` | `string` | Complete string of current type content | -
|
|
381
|
-
| `percent` | `number` | Typing progress percentage (0-100) | `0`
|
|
399
|
+
| Property | Type | Description | Default Value |
|
|
400
|
+
| -------------- | ------------ | -------------------------------------------- | ------------- |
|
|
401
|
+
| `currentIndex` | `number` | Current character index in the entire string | `0` |
|
|
402
|
+
| `currentChar` | `string` | Current typed character | - |
|
|
403
|
+
| `answerType` | `AnswerType` | Content type (thinking/answer) | - |
|
|
404
|
+
| `prevStr` | `string` | Prefix string of current type content | - |
|
|
405
|
+
| `currentStr` | `string` | Complete string of current type content | - |
|
|
406
|
+
| `percent` | `number` | Typing progress percentage (0-100) | `0` |
|
|
382
407
|
|
|
383
408
|
#### IMarkdownMath
|
|
384
409
|
|
|
385
|
-
| Property | Type | Description
|
|
386
|
-
| ------------- | ------------------------- |
|
|
387
|
-
| `splitSymbol` | `'dollar'` \| `'bracket'` |
|
|
410
|
+
| Property | Type | Description | Default Value |
|
|
411
|
+
| ------------- | ------------------------- | --------------------------- | ------------- |
|
|
412
|
+
| `splitSymbol` | `'dollar'` \| `'bracket'` | Math formula delimiter type | `'dollar'` |
|
|
388
413
|
|
|
389
|
-
**Delimiter
|
|
414
|
+
**Delimiter Description:**
|
|
390
415
|
|
|
391
416
|
- `'dollar'`: Uses `$...$` and `$$...$$` syntax
|
|
392
417
|
- `'bracket'`: Uses `\(...\)` and `\[...\]` syntax
|
|
393
418
|
|
|
394
419
|
#### IMarkdownCode π
|
|
395
420
|
|
|
396
|
-
| Property | Type | Description
|
|
397
|
-
| --------------- | --------- |
|
|
398
|
-
| `headerActions` | `boolean` |
|
|
421
|
+
| Property | Type | Description | Default Value |
|
|
422
|
+
| --------------- | --------- | ------------------------------------- | ------------- |
|
|
423
|
+
| `headerActions` | `boolean` | Whether to show header action buttons | `true` |
|
|
399
424
|
|
|
400
425
|
#### IMarkdownPlugin
|
|
401
426
|
|
|
402
|
-
| Property | Type | Description | Default |
|
|
403
|
-
| -------------- | ---------------------------------------------- | --------------------------- |
|
|
404
|
-
| `remarkPlugin` | `Pluggable` | remark plugin | -
|
|
405
|
-
| `rehypePlugin` | `Pluggable` | rehype plugin | -
|
|
406
|
-
| `type` | `'buildIn'` \| `'custom'` | Plugin type | -
|
|
407
|
-
| `id` | `any` | Plugin unique identifier | -
|
|
408
|
-
| `components` | `Record<string, React.ComponentType<unknown>>` | Custom component mapping π | -
|
|
427
|
+
| Property | Type | Description | Default Value |
|
|
428
|
+
| -------------- | ---------------------------------------------- | --------------------------- | ------------- |
|
|
429
|
+
| `remarkPlugin` | `Pluggable` | remark plugin | - |
|
|
430
|
+
| `rehypePlugin` | `Pluggable` | rehype plugin | - |
|
|
431
|
+
| `type` | `'buildIn'` \| `'custom'` | Plugin type | - |
|
|
432
|
+
| `id` | `any` | Plugin unique identifier | - |
|
|
433
|
+
| `components` | `Record<string, React.ComponentType<unknown>>` | Custom component mapping π | - |
|
|
409
434
|
|
|
410
435
|
### Component Exposed Methods
|
|
411
436
|
|
|
@@ -414,8 +439,8 @@ import DsMarkdown, { MarkdownCMD } from 'ds-markdown';
|
|
|
414
439
|
| Method | Parameters | Description |
|
|
415
440
|
| --------- | ---------- | ------------------------------------------------------------- |
|
|
416
441
|
| `start` | - | Start typing animation |
|
|
417
|
-
| `stop` | - | Pause typing
|
|
418
|
-
| `resume` | - | Resume typing
|
|
442
|
+
| `stop` | - | Pause typing animation |
|
|
443
|
+
| `resume` | - | Resume typing animation |
|
|
419
444
|
| `restart` | - | Restart typing animation, play current content from beginning |
|
|
420
445
|
|
|
421
446
|
#### MarkdownCMD Exposed Methods
|
|
@@ -424,13 +449,13 @@ import DsMarkdown, { MarkdownCMD } from 'ds-markdown';
|
|
|
424
449
|
| ----------------- | ------------------------------------------- | ------------------------------------------------------------- |
|
|
425
450
|
| `push` | `(content: string, answerType: AnswerType)` | Add content and start typing |
|
|
426
451
|
| `clear` | - | Clear all content and state |
|
|
427
|
-
| `triggerWholeEnd` | - | Manually trigger
|
|
452
|
+
| `triggerWholeEnd` | - | Manually trigger completion callback |
|
|
428
453
|
| `start` | - | Start typing animation |
|
|
429
|
-
| `stop` | - | Pause typing
|
|
430
|
-
| `resume` | - | Resume typing
|
|
454
|
+
| `stop` | - | Pause typing animation |
|
|
455
|
+
| `resume` | - | Resume typing animation |
|
|
431
456
|
| `restart` | - | Restart typing animation, play current content from beginning |
|
|
432
457
|
|
|
433
|
-
**Usage
|
|
458
|
+
**Usage Examples:**
|
|
434
459
|
|
|
435
460
|
```tsx
|
|
436
461
|
markdownRef.current?.start(); // Start animation
|
|
@@ -453,18 +478,18 @@ markdownRef.current?.restart(); // Restart animation
|
|
|
453
478
|
import { katexPlugin } from 'ds-markdown/plugins';
|
|
454
479
|
|
|
455
480
|
// Enable mathematical formula support
|
|
456
|
-
<DsMarkdown plugins={[katexPlugin]}>
|
|
481
|
+
<DsMarkdown plugins={[katexPlugin]}>Math formula: $E = mc^2$</DsMarkdown>;
|
|
457
482
|
```
|
|
458
483
|
|
|
459
484
|
#### Mermaid Chart Plugin π
|
|
460
485
|
|
|
461
|
-
**Install Mermaid
|
|
486
|
+
**Install Mermaid Plugin:**
|
|
462
487
|
|
|
463
488
|
```bash
|
|
464
489
|
npm install ds-markdown-mermaid-plugin
|
|
465
490
|
```
|
|
466
491
|
|
|
467
|
-
**Basic
|
|
492
|
+
**Basic Usage:**
|
|
468
493
|
|
|
469
494
|
```tsx
|
|
470
495
|
import { ConfigProvider, Markdown } from 'ds-markdown';
|
|
@@ -492,7 +517,7 @@ flowchart TD
|
|
|
492
517
|
}
|
|
493
518
|
```
|
|
494
519
|
|
|
495
|
-
**Supported
|
|
520
|
+
**Supported Chart Types:**
|
|
496
521
|
|
|
497
522
|
- π **Flowchart** - Display processes and decision paths
|
|
498
523
|
- π **Sequence Diagram** - Display interaction timing between objects
|
|
@@ -501,7 +526,7 @@ flowchart TD
|
|
|
501
526
|
- π₯§ **Pie Chart** - Data proportion display
|
|
502
527
|
- π **State Diagram** - State transition processes
|
|
503
528
|
- π **Git Graph** - Code branch history
|
|
504
|
-
- πΊοΈ **User Journey** - User experience
|
|
529
|
+
- πΊοΈ **User Journey** - User experience flow
|
|
505
530
|
|
|
506
531
|
**Configure Mermaid:**
|
|
507
532
|
|
|
@@ -509,7 +534,7 @@ flowchart TD
|
|
|
509
534
|
import { ConfigProvider } from 'ds-markdown';
|
|
510
535
|
|
|
511
536
|
const mermaidConfig = {
|
|
512
|
-
theme: 'default', //
|
|
537
|
+
theme: 'default', // Theme: default, neutral, dark, forest
|
|
513
538
|
flowchart: {
|
|
514
539
|
useMaxWidth: true,
|
|
515
540
|
htmlLabels: true,
|
|
@@ -527,7 +552,7 @@ return (
|
|
|
527
552
|
);
|
|
528
553
|
```
|
|
529
554
|
|
|
530
|
-
**Related
|
|
555
|
+
**Related Links:**
|
|
531
556
|
|
|
532
557
|
- [ds-markdown-mermaid-plugin GitHub](https://github.com/onshinpei/ds-markdown-mermaid-plugin)
|
|
533
558
|
- [Mermaid Official Documentation](https://mermaid.js.org/)
|
|
@@ -556,7 +581,7 @@ const customPlugin = createBuildInPlugin({
|
|
|
556
581
|
|
|
557
582
|
## π¨ UI Component System π
|
|
558
583
|
|
|
559
|
-
ds-markdown provides rich UI components that can be used
|
|
584
|
+
ds-markdown provides rich UI components that can be used individually or in combination with markdown components.
|
|
560
585
|
|
|
561
586
|
### Core Components
|
|
562
587
|
|
|
@@ -582,7 +607,7 @@ import {
|
|
|
582
607
|
|
|
583
608
|
// Segmented controller
|
|
584
609
|
<Segmented
|
|
585
|
-
|
|
610
|
+
options={[
|
|
586
611
|
{ label: 'Chart', value: 'diagram' },
|
|
587
612
|
{ label: 'Code', value: 'code' }
|
|
588
613
|
]}
|
|
@@ -607,7 +632,7 @@ import {
|
|
|
607
632
|
|
|
608
633
|
---
|
|
609
634
|
|
|
610
|
-
##
|
|
635
|
+
## Multi-language Configuration
|
|
611
636
|
|
|
612
637
|
```tsx
|
|
613
638
|
import { ConfigProvider } from 'ds-markdown';
|
|
@@ -629,7 +654,7 @@ import enUS from 'ds-markdown/i18n/en';
|
|
|
629
654
|
|
|
630
655
|
## π‘ Practical Examples
|
|
631
656
|
|
|
632
|
-
### π AI Streaming
|
|
657
|
+
### π AI Streaming Chat
|
|
633
658
|
|
|
634
659
|
[DEMO: π§ StackBlitz Experience](https://stackblitz.com/edit/vitejs-vite-2ri8kex3?file=src%2FApp.tsx)
|
|
635
660
|
|
|
@@ -647,16 +672,16 @@ function StreamingChat() {
|
|
|
647
672
|
// Thinking phase
|
|
648
673
|
markdownRef.current?.push('π€ Analyzing your question...', 'thinking');
|
|
649
674
|
await delay(1000);
|
|
650
|
-
markdownRef.current?.push('\n\nβ
Analysis complete, starting answer', 'thinking');
|
|
675
|
+
markdownRef.current?.push('\n\nβ
Analysis complete, starting to answer', 'thinking');
|
|
651
676
|
|
|
652
677
|
// Streaming answer
|
|
653
678
|
const chunks = [
|
|
654
|
-
'# React 19
|
|
679
|
+
'# React 19 New Features Analysis\n\n',
|
|
655
680
|
'## π React Compiler\n',
|
|
656
681
|
'The biggest highlight of React 19 is the introduction of **React Compiler**:\n\n',
|
|
657
|
-
'- π― **Automatic
|
|
658
|
-
'- β‘ **Performance
|
|
659
|
-
'- π§ **Backward
|
|
682
|
+
'- π― **Automatic Optimization**: No need for manual memo and useMemo\n',
|
|
683
|
+
'- β‘ **Performance Boost**: Compile-time optimization, zero runtime overhead\n',
|
|
684
|
+
'- π§ **Backward Compatible**: Existing code requires no modification\n\n',
|
|
660
685
|
'Hope this answer helps you! π',
|
|
661
686
|
];
|
|
662
687
|
|
|
@@ -670,7 +695,7 @@ function StreamingChat() {
|
|
|
670
695
|
|
|
671
696
|
return (
|
|
672
697
|
<div className="chat-container">
|
|
673
|
-
<button onClick={simulateAIResponse}>π€ Ask about React 19
|
|
698
|
+
<button onClick={simulateAIResponse}>π€ Ask about React 19 New Features</button>
|
|
674
699
|
<MarkdownCMD ref={markdownRef} interval={10} timerType="requestAnimationFrame" />
|
|
675
700
|
</div>
|
|
676
701
|
);
|
|
@@ -715,7 +740,7 @@ import 'ds-markdown/katex.css'; // Only import when needed
|
|
|
715
740
|
// β
Recommended: Install plugin separately
|
|
716
741
|
npm install ds-markdown-mermaid-plugin
|
|
717
742
|
|
|
718
|
-
// β
Recommended: Configure suitable
|
|
743
|
+
// β
Recommended: Configure suitable themes
|
|
719
744
|
const mermaidConfig = {
|
|
720
745
|
theme: 'default', // Choose based on application theme
|
|
721
746
|
flowchart: { useMaxWidth: true },
|
|
@@ -725,3 +750,5 @@ const mermaidConfig = {
|
|
|
725
750
|
<DsMarkdown plugins={[mermaidPlugin]} />
|
|
726
751
|
</ConfigProvider>
|
|
727
752
|
```
|
|
753
|
+
|
|
754
|
+
[](https://visitorbadge.io/status?path=https%3A%2F%2Fgithub.com%2Fonshinpei%2Fds-markdown)
|