ds-markdown 0.1.10-beta.4 β†’ 0.2.1-beta.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.
Files changed (9) hide show
  1. package/README.en.md +190 -163
  2. package/README.md +201 -64
  3. package/dist/cjs/index.d.ts +6 -2
  4. package/dist/cjs/index.js +7 -3
  5. package/dist/cjs/index.js.map +1 -1
  6. package/dist/esm/index.d.ts +6 -2
  7. package/dist/esm/index.js +7 -3
  8. package/dist/esm/index.js.map +1 -1
  9. 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
- **[πŸ‡¨πŸ‡³ δΈ­ζ–‡](./README.md) | πŸ‡ΊπŸ‡Έ English**
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 Formula Demo 1](https://stackblitz.com/edit/vitejs-vite-iqbyta3j?file=index.html)
21
- - [Math Formula Demo 2](https://stackblitz.com/edit/vitejs-vite-xk9lxagc?file=src%2FApp.tsx)
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 pure `react markdown` typing component, you can use [react-markdown-typer](https://github.com/onshinpei/react-markdown-typer)
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
- - **Ultimate AI Chat Experience**
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
- - **Perfect for Streaming Backend Data**
33
- Many AI/LLM backend interfaces (like OpenAI, DeepSeek, etc.) push data chunks containing multiple characters at once, which can cause stuttering and character jumping issues with ordinary typewriter implementations.
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
- - **Complete Markdown & Math Formula, Diagram Support**
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
- - Built-in KaTeX, supporting all mainstream Markdown syntax and math formulas, suitable for technical Q&A, education, knowledge bases, and other content-rich applications.
39
- - Support for `Diagram` rendering through the [mermaid-plugin](https://github.com/onshinpei/ds-markdown-mermaid-plugin)
37
+ ### πŸš€ **Value Delivered**
40
38
 
41
- - **Excellent Developer Experience**
42
- Rich imperative API, supporting streaming data, async callbacks, and plugin extensions, allowing developers to flexibly control animations and content.
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
- - **Lightweight & High Performance**
45
- Small size, excellent performance, compatible with mobile and desktop. Core dependency is [react-markdown](https://github.com/remarkjs/react-markdown) (industry mainstream, mature Markdown rendering library), with no other heavyweight dependencies - works out of the box.
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
- - **Multi-theme & Plugin Architecture**
48
- Support for light/dark theme switching, compatible with remark/rehype plugins, meeting personalized and advanced extension needs.
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
- ## πŸ“‹ Table of Contents
63
-
64
- - [✨ Core Features](#-core-features)
65
- - [πŸ“¦ Quick Installation](#-quick-installation)
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 Conversation Scenario](#ai-conversation-scenario)
71
- - [Code Block Features](#code-block-features) πŸ†•
72
- - [Mermaid Chart Support](#mermaid-chart-support) πŸ†•
73
- - [πŸ“š Complete API Documentation](#-complete-api-documentation)
74
- - [πŸ”Œ Plugin System](#-plugin-system)
75
- - [🎨 UI Component System](#-ui-component-system) πŸ†•
76
- - [πŸ’‘ Practical Examples](#-practical-examples)
77
- - [πŸ”§ Best Practices](#-best-practices)
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 Conversation Scenarios**
102
+ ### πŸ€– **AI Chat Scenarios**
84
103
 
85
- - 1:1 recreation of [DeepSeek website](https://chat.deepseek.com/) chat response effects
86
- - Support for both thinking process (`thinking`) and answer content (`answer`) modes
87
- - Perfect adaptation to streaming data with zero-delay response to user input
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
- - Support for light/dark themes, adapting to different product styles
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
- ### πŸ”§ **Developer Experience**
122
+ ### πŸ”§ **Development Experience**
104
123
 
105
- - Support for typing interruption `stop` and resume `resume`
106
- - Support for enabling and disabling typing
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 mode optimization, supporting `requestAnimationFrame` and `setTimeout` modes
112
- - High-frequency typing support (`requestAnimationFrame` mode supports typing intervals as low as `0ms`)
113
- - Frame-synchronized rendering, perfectly matching browser refresh rate
114
- - Smart character batch processing for more natural visual effects
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 katex math formula styles, only if needed -->
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'} Typing Effect</button>
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 display -
184
- πŸ”„ Toggle display modes - ⚑ Quick content preview
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 mathematical formula styles
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 For
205
- the classic "3-4-5" triangle: $c = \sqrt{3 ^ (2 + 4) ^ 2} = \sqrt{25} = 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 Conversation Scenario
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, copy, and download features!`;
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 = `# Flowchart Example
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
- flowchart TD
301
- A[Start] --> B{Decision}
302
- B -->|Yes| C[Process A]
303
- B -->|No| D[Process B]
304
- C --> E[End]
305
- D --> E
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
- ## Sequence Diagram Example
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
- \`\`\`mermaid
311
- sequenceDiagram
312
- participant User
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
+ ![Effect Preview](./assets/images/mermaid.gif)
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 | Default |
345
- | ------------------- | ------------------------------------------- | ---------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
346
- | `interval` | `number` | Typing interval (milliseconds) | `30` |
347
- | `timerType` | `'setTimeout'` \| `'requestAnimationFrame'` | Timer type, cannot be modified dynamically | Current default is `setTimeout`, will change to `requestAnimationFrame` later |
348
- | `answerType` | `'thinking'` \| `'answer'` | Content type (affects styling), cannot be modified dynamically | `'answer'` |
349
- | `theme` | `'light'` \| `'dark'` | Theme type | `'light'` |
350
- | `plugins` | `IMarkdownPlugin[]` | Plugin configuration | `[]` |
351
- | `math` | [IMarkdownMath](#IMarkdownMath) | Mathematical formula config | `{ splitSymbol: 'dollar' }` |
352
- | `onEnd` | `(data: EndData) => void` | Typing completion callback | - |
353
- | `onStart` | `(data: StartData) => void` | Typing start callback | - |
354
- | `onBeforeTypedChar` | `(data: IBeforeTypedChar) => Promise<void>` | Character typing pre-callback, supports async operations, blocks subsequent typing | - |
355
- | `onTypedChar` | `(data: ITypedChar) => void` | Character typing post-callback | - |
356
- | `disableTyping` | `boolean` | Disable typing animation | `false` |
357
- | `autoStartTyping` | `boolean` | Whether to auto-start typing animation, set to false for manual trigger | `true` |
358
- | `codeBlock` | `IMarkdownCode` | Code block configuration | `{headerActions: true}` |
359
-
360
- > Note: If `disableTyping` changes from `true` to `false` during typing, all remaining characters will be displayed at once on the next typing trigger.
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` | Character about to be typed | - |
368
- | `answerType` | `AnswerType` | Content type (thinking/answer) | - |
369
- | `prevStr` | `string` | Previous string of current type content | - |
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` | Character that was just typed | - |
378
- | `answerType` | `AnswerType` | Content type (thinking/answer) | - |
379
- | `prevStr` | `string` | Previous string of current type content | - |
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 | Default |
386
- | ------------- | ------------------------- | ------------------------------ | ---------- |
387
- | `splitSymbol` | `'dollar'` \| `'bracket'` | Mathematical formula delimiter | `'dollar'` |
410
+ | Property | Type | Description | Default Value |
411
+ | ------------- | ------------------------- | --------------------------- | ------------- |
412
+ | `splitSymbol` | `'dollar'` \| `'bracket'` | Math formula delimiter type | `'dollar'` |
388
413
 
389
- **Delimiter explanation:**
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 | Default |
397
- | --------------- | --------- | -------------------------- | ------- |
398
- | `headerActions` | `boolean` | Show header action buttons | `true` |
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 end callback |
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 example:**
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]}>Mathematical formula: $E = mc^2$</DsMarkdown>;
481
+ <DsMarkdown plugins={[katexPlugin]}>Math formula: $E = mc^2$</DsMarkdown>;
457
482
  ```
458
483
 
459
484
  #### Mermaid Chart Plugin πŸ†•
460
485
 
461
- **Install Mermaid plugin:**
486
+ **Install Mermaid Plugin:**
462
487
 
463
488
  ```bash
464
489
  npm install ds-markdown-mermaid-plugin
465
490
  ```
466
491
 
467
- **Basic usage:**
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 chart types:**
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 processes
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', // Themes: default, neutral, dark, forest
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 links:**
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 independently or in combination with markdown components.
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
- Segmented={[
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
- ## Internationalization Configuration
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 Conversation
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 Feature Analysis\n\n',
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 optimization**: No need for manual memo and useMemo\n',
658
- '- ⚑ **Performance boost**: Compile-time optimization, zero runtime overhead\n',
659
- '- πŸ”§ **Backward compatible**: Existing code needs no modification\n\n',
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 features</button>
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 theme
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
+ [![Visitors](https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Fgithub.com%2Fonshinpei%2Fds-markdown&label=Visitors&countColor=%23263759&style=flat)](https://visitorbadge.io/status?path=https%3A%2F%2Fgithub.com%2Fonshinpei%2Fds-markdown)