react-markdown-typer 0.0.2 → 1.0.0-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.md +8 -9
- package/README.zh.md +6 -9
- package/es/Markdown/index.d.ts +5 -0
- package/es/Markdown/index.d.ts.map +1 -0
- package/es/Markdown/index.js +65 -0
- package/es/Markdown/index.js.map +1 -0
- package/es/MarkdownCMD/index.d.ts +4 -0
- package/es/MarkdownCMD/index.d.ts.map +1 -0
- package/es/MarkdownCMD/index.js +162 -0
- package/es/MarkdownCMD/index.js.map +1 -0
- package/es/components/HighReactMarkdown/index.d.ts +9 -0
- package/es/components/HighReactMarkdown/index.d.ts.map +1 -0
- package/es/components/HighReactMarkdown/index.js +7 -0
- package/es/components/HighReactMarkdown/index.js.map +1 -0
- package/es/constant.d.ts +4 -0
- package/es/constant.d.ts.map +1 -0
- package/es/constant.js +4 -0
- package/es/constant.js.map +1 -0
- package/es/defined.d.ts +113 -0
- package/es/defined.d.ts.map +1 -0
- package/es/defined.js +2 -0
- package/es/defined.js.map +1 -0
- package/es/hooks/useTypingTask.d.ts +32 -0
- package/es/hooks/useTypingTask.d.ts.map +1 -0
- package/{dist/esm/index.js → es/hooks/useTypingTask.js} +63 -267
- package/es/hooks/useTypingTask.js.map +1 -0
- package/es/index.d.ts +7 -0
- package/es/index.d.ts.map +1 -0
- package/es/index.js +5 -0
- package/es/index.js.map +1 -0
- package/es/utils/grapheme.d.ts +2 -0
- package/es/utils/grapheme.d.ts.map +1 -0
- package/es/utils/grapheme.js +4 -0
- package/es/utils/grapheme.js.map +1 -0
- package/package.json +11 -15
- package/dist/cjs/index.d.ts +0 -77
- package/dist/cjs/index.js +0 -570
- package/dist/cjs/index.js.map +0 -1
- package/dist/esm/index.d.ts +0 -77
- package/dist/esm/index.js.map +0 -1
package/README.md
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
# react-markdown-typer
|
|
2
2
|
|
|
3
|
-
> 🚀
|
|
3
|
+
> 🚀 React Markdown typing animation component
|
|
4
|
+
|
|
5
|
+
**if you need styling, support for mathematical formulas, and mermaid chart rendering, we recommend using [ds-markdown](https://github.com/onshinpei/ds-markdown)**
|
|
4
6
|
|
|
5
7
|
**[🇨🇳 中文](./README.zh.md) | 🇺🇸 English**
|
|
6
8
|
|
|
@@ -14,7 +16,7 @@ A React component designed for modern AI applications, providing smooth real-tim
|
|
|
14
16
|
|
|
15
17
|
[📖 Online Demo](https://onshinpei.github.io/react-markdown-typer/)
|
|
16
18
|
|
|
17
|
-
[DEMO: 🔧 Try on StackBlitz](https://stackblitz.com/edit/vitejs-vite-
|
|
19
|
+
[DEMO: 🔧 Try on StackBlitz](https://stackblitz.com/edit/vitejs-vite-zbrdonvx?file=src%2FApp.tsx)
|
|
18
20
|
|
|
19
21
|
---
|
|
20
22
|
|
|
@@ -31,7 +33,7 @@ A React component designed for modern AI applications, providing smooth real-tim
|
|
|
31
33
|
Small bundle size, high performance, works on both mobile and desktop. Core dependency is [react-markdown](https://github.com/remarkjs/react-markdown) (industry-standard, mature Markdown renderer), no heavy dependencies, ready to use out of the box.
|
|
32
34
|
|
|
33
35
|
- **Multi-theme & plugin architecture**
|
|
34
|
-
|
|
36
|
+
compatible with [react-markdown](https://github.com/remarkjs/react-markdown) remark/rehype plugins for advanced customization and extension.
|
|
35
37
|
|
|
36
38
|
- **Wide range of use cases**
|
|
37
39
|
- AI chatbots/assistants
|
|
@@ -134,7 +136,7 @@ pnpm add react-markdown-typer
|
|
|
134
136
|
|
|
135
137
|
No installation needed, use directly in the browser:
|
|
136
138
|
|
|
137
|
-
<!-- [DEMO](https://stackblitz.com/edit/
|
|
139
|
+
<!-- [DEMO](https://stackblitz.com/edit/vitejs-vite-zbrdonvx?file=src%2FApp.tsx) -->
|
|
138
140
|
|
|
139
141
|
```html
|
|
140
142
|
<!-- Import the component -->
|
|
@@ -147,7 +149,7 @@ No installation needed, use directly in the browser:
|
|
|
147
149
|
|
|
148
150
|
### Basic Usage
|
|
149
151
|
|
|
150
|
-
|
|
152
|
+
[DEMO](https://stackblitz.com/edit/vitejs-vite-z94syu8j?file=src%2FApp.tsx)
|
|
151
153
|
|
|
152
154
|
```tsx
|
|
153
155
|
import MarkdownTyper from 'react-markdown-typer';
|
|
@@ -155,7 +157,7 @@ import 'react-markdown-typer/style.css';
|
|
|
155
157
|
|
|
156
158
|
function App() {
|
|
157
159
|
return (
|
|
158
|
-
<MarkdownTyper interval={20}
|
|
160
|
+
<MarkdownTyper interval={20}>
|
|
159
161
|
# Hello react-markdown-typer This is a **high-performance** typing animation component! ## Features - ⚡ Zero-latency streaming - 🎬 Smooth typing animation - 🎯 Perfect syntax support
|
|
160
162
|
</MarkdownTyper>
|
|
161
163
|
);
|
|
@@ -467,7 +469,6 @@ import MarkdownTyper, { MarkdownCMD } from 'react-markdown-typer';
|
|
|
467
469
|
| `interval` | `number` | Typing interval (ms) | `30` |
|
|
468
470
|
| `timerType` | `'setTimeout'` \| `'requestAnimationFrame'` | Timer type, not dynamically changeable | Default is `setTimeout`, will switch to `requestAnimationFrame` in the future |
|
|
469
471
|
| `theme` | `'light'` \| `'dark'` | Theme type | `'light'` |
|
|
470
|
-
| `plugins` | `IMarkdownPlugin[]` | Plugin config | `[]` |
|
|
471
472
|
| `math` | [IMarkdownMath](#IMarkdownMath) | Math formula config | `{ splitSymbol: 'dollar' }` |
|
|
472
473
|
| `onEnd` | `(data: EndData) => void` | Typing end callback | - |
|
|
473
474
|
| `onStart` | `(data: StartData) => void` | Typing start callback | - |
|
|
@@ -872,5 +873,3 @@ function AdvancedCallbackDemo() {
|
|
|
872
873
|
);
|
|
873
874
|
}
|
|
874
875
|
```
|
|
875
|
-
|
|
876
|
-
</rewritten_file>
|
package/README.zh.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
> 🚀 React Markdown 打字动画组件
|
|
4
4
|
|
|
5
|
+
**如果您需要带有样式,支持数据公式、mermaid图表渲染,推荐您用 [ds-markdown](https://github.com/onshinpei/ds-markdown)**
|
|
6
|
+
|
|
5
7
|
**🇨🇳 中文 | [🇺🇸 English](./README.md) **
|
|
6
8
|
|
|
7
9
|
一个专为现代 AI 应用设计的 React 组件,提供流畅的实时打字动画和完整的 Markdown 渲染能力。
|
|
@@ -14,7 +16,7 @@
|
|
|
14
16
|
|
|
15
17
|
[📖 在线演示](https://onshinpei.github.io/react-markdown-typer/)
|
|
16
18
|
|
|
17
|
-
[DEMO:🔧 StackBlitz 体验](https://stackblitz.com/edit/vitejs-vite-
|
|
19
|
+
[DEMO:🔧 StackBlitz 体验](https://stackblitz.com/edit/vitejs-vite-ndgqzcbp?file=README.md)
|
|
18
20
|
|
|
19
21
|
---
|
|
20
22
|
|
|
@@ -31,7 +33,7 @@
|
|
|
31
33
|
体积小、性能优,适配移动端和桌面端。核心依赖 [react-markdown](https://github.com/remarkjs/react-markdown)(业界主流、成熟的 Markdown 渲染库),无其它重量级依赖,开箱即用。
|
|
32
34
|
|
|
33
35
|
- **多主题与插件化架构**
|
|
34
|
-
|
|
36
|
+
兼容 [react-markdown](https://github.com/remarkjs/react-markdown) remark/rehype 插件,满足个性化和高级扩展需求。
|
|
35
37
|
|
|
36
38
|
- **适用场景广泛**
|
|
37
39
|
- AI 聊天机器人/助手
|
|
@@ -121,18 +123,14 @@ pnpm add react-markdown-typer
|
|
|
121
123
|
|
|
122
124
|
### 基础用法
|
|
123
125
|
|
|
124
|
-
|
|
126
|
+
[DEMO](https://stackblitz.com/edit/vitejs-vite-ndgqzcbp?file=src%2FApp.tsx)
|
|
125
127
|
|
|
126
128
|
```tsx
|
|
127
129
|
import MarkdownTyper from 'react-markdown-typer';
|
|
128
130
|
import 'react-markdown-typer/style.css';
|
|
129
131
|
|
|
130
132
|
function App() {
|
|
131
|
-
return
|
|
132
|
-
<MarkdownTyper interval={20} answerType="answer">
|
|
133
|
-
# Hello react-markdown-typer 这是一个**高性能**的打字动画组件! ## 特性 - ⚡ 零延迟流式处理 - 🎬 流畅打字动画 - 🎯 完美语法支持
|
|
134
|
-
</MarkdownTyper>
|
|
135
|
-
);
|
|
133
|
+
return <MarkdownTyper interval={20}># Hello react-markdown-typer 这是一个**高性能**的打字动画组件! ## 特性 - ⚡ 零延迟流式处理 - 🎬 流畅打字动画 - 🎯 完美语法支持</MarkdownTyper>;
|
|
136
134
|
}
|
|
137
135
|
```
|
|
138
136
|
|
|
@@ -439,7 +437,6 @@ import MarkdownTyper, { MarkdownCMD } from 'react-markdown-typer';
|
|
|
439
437
|
| `interval` | `number` | 打字间隔 (毫秒) | `30` |
|
|
440
438
|
| `timerType` | `'setTimeout'` \| `'requestAnimationFrame'` | 定时器类型,不支持动态修改 | 当前默认值是`setTimeout`,后期会改为`requestAnimationFrame` |
|
|
441
439
|
| `theme` | `'light'` \| `'dark'` | 主题类型 | `'light'` |
|
|
442
|
-
| `plugins` | `IMarkdownPlugin[]` | 插件配置 | `[]` |
|
|
443
440
|
| `math` | [IMarkdownMath](#IMarkdownMath) | 数学公式配置 | `{ splitSymbol: 'dollar' }` |
|
|
444
441
|
| `onEnd` | `(data: EndData) => void` | 打字结束回调 | - |
|
|
445
442
|
| `onStart` | `(data: StartData) => void` | 打字开始回调 | - |
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Markdown/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4E,MAAM,OAAO,CAAC;AAEjG,OAAO,EAAkB,aAAa,EAAe,MAAM,YAAY,CAAC;;AAuExE,wBAA8B"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
|
|
3
|
+
import { __DEV__ } from '../constant.js';
|
|
4
|
+
import MarkdownCMD from '../MarkdownCMD/index.js';
|
|
5
|
+
const MarkdownInner = ({ children: _children = '', markdownRef, ...rest }) => {
|
|
6
|
+
const cmdRef = useRef(null);
|
|
7
|
+
const prefixRef = useRef('');
|
|
8
|
+
const content = useMemo(() => {
|
|
9
|
+
if (typeof _children === 'string') {
|
|
10
|
+
return _children;
|
|
11
|
+
}
|
|
12
|
+
if (__DEV__) {
|
|
13
|
+
console.error('Markdown component must have a string child');
|
|
14
|
+
}
|
|
15
|
+
return '';
|
|
16
|
+
}, [_children]);
|
|
17
|
+
useEffect(() => {
|
|
18
|
+
if (prefixRef.current !== content) {
|
|
19
|
+
let newContent = '';
|
|
20
|
+
if (prefixRef.current === '') {
|
|
21
|
+
newContent = content;
|
|
22
|
+
}
|
|
23
|
+
else {
|
|
24
|
+
if (content.startsWith(prefixRef.current)) {
|
|
25
|
+
newContent = content.slice(prefixRef.current.length);
|
|
26
|
+
}
|
|
27
|
+
else {
|
|
28
|
+
newContent = content;
|
|
29
|
+
cmdRef.current.clear();
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
cmdRef.current.push(newContent);
|
|
33
|
+
prefixRef.current = content;
|
|
34
|
+
}
|
|
35
|
+
return () => {
|
|
36
|
+
console.log('unmount');
|
|
37
|
+
};
|
|
38
|
+
}, [content]);
|
|
39
|
+
useImperativeHandle(markdownRef, () => ({
|
|
40
|
+
stop: () => {
|
|
41
|
+
cmdRef.current.stop();
|
|
42
|
+
},
|
|
43
|
+
resume: () => {
|
|
44
|
+
cmdRef.current.resume();
|
|
45
|
+
},
|
|
46
|
+
start: () => {
|
|
47
|
+
cmdRef.current.start();
|
|
48
|
+
},
|
|
49
|
+
restart: () => {
|
|
50
|
+
cmdRef.current.restart();
|
|
51
|
+
},
|
|
52
|
+
}));
|
|
53
|
+
return _jsx(MarkdownCMD, { ref: cmdRef, ...rest });
|
|
54
|
+
};
|
|
55
|
+
const Markdown = forwardRef((props, ref) => {
|
|
56
|
+
const { children = '' } = props;
|
|
57
|
+
if (__DEV__) {
|
|
58
|
+
if (typeof children !== 'string') {
|
|
59
|
+
throw new Error('Markdown component must have a string child');
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
return _jsx(MarkdownInner, { ...props, markdownRef: ref });
|
|
63
|
+
});
|
|
64
|
+
export default memo(Markdown);
|
|
65
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Markdown/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MarkdownCMD/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAwB,cAAc,EAAE,MAAM,YAAY,CAAC;AAOpF,QAAA,MAAM,WAAW,6GA2KhB,CAAC;AAMF,eAAe,WAAW,CAAC"}
|
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
|
|
3
|
+
import { __DEV__ } from '../constant.js';
|
|
4
|
+
import { useTypingTask } from '../hooks/useTypingTask.js';
|
|
5
|
+
import HighReactMarkdown from '../components/HighReactMarkdown/index.js';
|
|
6
|
+
import { splitGraphemes } from '../utils/grapheme.js';
|
|
7
|
+
const MarkdownCMD = forwardRef(({ interval = 30, onEnd, onStart, onTypedChar, onBeforeTypedChar, timerType = 'setTimeout', math, reactMarkdownProps, disableTyping = false, autoStartTyping = true }, ref) => {
|
|
8
|
+
/** 是否自动开启打字动画, 后面发生变化将不会生效 */
|
|
9
|
+
const autoStartTypingRef = useRef(autoStartTyping);
|
|
10
|
+
/** 是否打过字 */
|
|
11
|
+
const isStartedTypingRef = useRef(false);
|
|
12
|
+
/** 当前需要打字的内容 */
|
|
13
|
+
const charsRef = useRef([]);
|
|
14
|
+
/**
|
|
15
|
+
* 打字是否已经完全结束
|
|
16
|
+
* 如果打字已经完全结束,则不会再触发打字效果
|
|
17
|
+
*/
|
|
18
|
+
const isWholeTypedEndRef = useRef(false);
|
|
19
|
+
const charIndexRef = useRef(0);
|
|
20
|
+
/** 整个内容引用 */
|
|
21
|
+
const wholeContentRef = useRef({
|
|
22
|
+
content: '',
|
|
23
|
+
length: 0,
|
|
24
|
+
prevLength: 0,
|
|
25
|
+
});
|
|
26
|
+
const [, setUpdate] = useState(0);
|
|
27
|
+
const triggerUpdate = () => {
|
|
28
|
+
setUpdate((prev) => prev + 1);
|
|
29
|
+
};
|
|
30
|
+
/**
|
|
31
|
+
* 处理字符显示逻辑
|
|
32
|
+
*/
|
|
33
|
+
const processCharDisplay = (char) => {
|
|
34
|
+
if (!isStartedTypingRef.current) {
|
|
35
|
+
isStartedTypingRef.current = true;
|
|
36
|
+
}
|
|
37
|
+
wholeContentRef.current.prevLength = wholeContentRef.current.length;
|
|
38
|
+
wholeContentRef.current.content += char.content;
|
|
39
|
+
wholeContentRef.current.length += char.content.length;
|
|
40
|
+
triggerUpdate();
|
|
41
|
+
};
|
|
42
|
+
const resetWholeContent = () => {
|
|
43
|
+
wholeContentRef.current.content = '';
|
|
44
|
+
wholeContentRef.current.length = 0;
|
|
45
|
+
wholeContentRef.current.prevLength = 0;
|
|
46
|
+
};
|
|
47
|
+
// 使用新的打字任务 hook
|
|
48
|
+
const typingTask = useTypingTask({
|
|
49
|
+
timerType,
|
|
50
|
+
interval,
|
|
51
|
+
charsRef,
|
|
52
|
+
onEnd,
|
|
53
|
+
onStart,
|
|
54
|
+
onTypedChar,
|
|
55
|
+
onBeforeTypedChar,
|
|
56
|
+
processCharDisplay,
|
|
57
|
+
wholeContentRef,
|
|
58
|
+
disableTyping,
|
|
59
|
+
triggerUpdate,
|
|
60
|
+
resetWholeContent,
|
|
61
|
+
});
|
|
62
|
+
/**
|
|
63
|
+
* 内部推送处理逻辑
|
|
64
|
+
*/
|
|
65
|
+
const processHasTypingPush = (content) => {
|
|
66
|
+
if (content.length === 0) {
|
|
67
|
+
return;
|
|
68
|
+
}
|
|
69
|
+
const segments = splitGraphemes(content);
|
|
70
|
+
charsRef.current.push(...segments.map((chatStr) => {
|
|
71
|
+
const index = charIndexRef.current++;
|
|
72
|
+
const charObj = {
|
|
73
|
+
content: chatStr,
|
|
74
|
+
tokenId: 0,
|
|
75
|
+
index,
|
|
76
|
+
};
|
|
77
|
+
return charObj;
|
|
78
|
+
}));
|
|
79
|
+
// 如果关闭了自动打字, 并且没有打过字, 则不开启打字动画
|
|
80
|
+
if (!autoStartTypingRef.current && !isStartedTypingRef.current) {
|
|
81
|
+
return;
|
|
82
|
+
}
|
|
83
|
+
if (!typingTask.isTyping()) {
|
|
84
|
+
typingTask.start();
|
|
85
|
+
}
|
|
86
|
+
};
|
|
87
|
+
const processNoTypingPush = (content) => {
|
|
88
|
+
wholeContentRef.current.content += content;
|
|
89
|
+
// 记录打字前的长度
|
|
90
|
+
wholeContentRef.current.prevLength = wholeContentRef.current.length;
|
|
91
|
+
wholeContentRef.current.length += content.length;
|
|
92
|
+
triggerUpdate();
|
|
93
|
+
onEnd === null || onEnd === void 0 ? void 0 : onEnd({
|
|
94
|
+
str: content,
|
|
95
|
+
manual: false,
|
|
96
|
+
});
|
|
97
|
+
};
|
|
98
|
+
useImperativeHandle(ref, () => ({
|
|
99
|
+
/**
|
|
100
|
+
* 添加内容
|
|
101
|
+
* @param content 内容 {string}
|
|
102
|
+
* @param answerType 回答类型 {AnswerType}
|
|
103
|
+
*/
|
|
104
|
+
push: (content) => {
|
|
105
|
+
if (disableTyping) {
|
|
106
|
+
processNoTypingPush(content);
|
|
107
|
+
return;
|
|
108
|
+
}
|
|
109
|
+
processHasTypingPush(content);
|
|
110
|
+
},
|
|
111
|
+
/**
|
|
112
|
+
* 清除打字任务
|
|
113
|
+
*/
|
|
114
|
+
clear: () => {
|
|
115
|
+
typingTask.stop();
|
|
116
|
+
typingTask.typedIsManualStopRef.current = false;
|
|
117
|
+
charsRef.current = [];
|
|
118
|
+
resetWholeContent();
|
|
119
|
+
isWholeTypedEndRef.current = false;
|
|
120
|
+
charIndexRef.current = 0;
|
|
121
|
+
isStartedTypingRef.current = false;
|
|
122
|
+
triggerUpdate();
|
|
123
|
+
},
|
|
124
|
+
/** 开启打字,只有在关闭了自动打字才生效 */
|
|
125
|
+
start: () => {
|
|
126
|
+
if (!autoStartTypingRef.current) {
|
|
127
|
+
typingTask.start();
|
|
128
|
+
}
|
|
129
|
+
},
|
|
130
|
+
/** 停止打字任务 */
|
|
131
|
+
stop: () => {
|
|
132
|
+
typingTask.stop();
|
|
133
|
+
},
|
|
134
|
+
/** 重新开始打字任务 */
|
|
135
|
+
resume: () => {
|
|
136
|
+
typingTask.resume();
|
|
137
|
+
},
|
|
138
|
+
/**
|
|
139
|
+
* 主动触发打字结束
|
|
140
|
+
*/
|
|
141
|
+
triggerWholeEnd: () => {
|
|
142
|
+
isWholeTypedEndRef.current = true;
|
|
143
|
+
if (!typingTask.isTyping()) {
|
|
144
|
+
// 这里需要手动触发结束回调,因为 hook 中的 triggerOnEnd 不能直接调用
|
|
145
|
+
onEnd === null || onEnd === void 0 ? void 0 : onEnd({
|
|
146
|
+
str: wholeContentRef.current.content,
|
|
147
|
+
manual: true,
|
|
148
|
+
});
|
|
149
|
+
}
|
|
150
|
+
},
|
|
151
|
+
/** 重新开始打字任务 */
|
|
152
|
+
restart: () => {
|
|
153
|
+
typingTask.restart();
|
|
154
|
+
},
|
|
155
|
+
}));
|
|
156
|
+
return _jsx(HighReactMarkdown, { reactMarkdownProps: reactMarkdownProps, children: wholeContentRef.current.content });
|
|
157
|
+
});
|
|
158
|
+
if (__DEV__) {
|
|
159
|
+
MarkdownCMD.displayName = 'MarkdownCMD';
|
|
160
|
+
}
|
|
161
|
+
export default MarkdownCMD;
|
|
162
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/MarkdownCMD/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Options } from 'react-markdown';
|
|
3
|
+
interface HighReactMarkdownProps {
|
|
4
|
+
reactMarkdownProps?: Options;
|
|
5
|
+
children: string;
|
|
6
|
+
}
|
|
7
|
+
declare const HighReactMarkdown: React.FC<HighReactMarkdownProps>;
|
|
8
|
+
export default HighReactMarkdown;
|
|
9
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/HighReactMarkdown/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAsB,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAExD,UAAU,sBAAsB;IAC9B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAEvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import ReactMarkdown from 'react-markdown';
|
|
3
|
+
const HighReactMarkdown = ({ reactMarkdownProps, children }) => {
|
|
4
|
+
return _jsx(ReactMarkdown, { ...reactMarkdownProps, children: children });
|
|
5
|
+
};
|
|
6
|
+
export default HighReactMarkdown;
|
|
7
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/HighReactMarkdown/index.tsx"],"names":[],"mappings":";AACA,OAAO,aAA0B,MAAM,gBAAgB,CAAC;AAOxD,MAAM,iBAAiB,GAAqC,CAAC,EAAE,kBAAkB,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC/F,OAAO,KAAC,aAAa,OAAK,kBAAkB,YAAG,QAAQ,GAAiB,CAAC;AAC3E,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
package/es/constant.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"constant.d.ts","sourceRoot":"","sources":["../src/constant.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO,SAAyC,CAAC;AAE9D,eAAe;AACf,eAAO,MAAM,OAAO,eAAkB,CAAC"}
|
package/es/constant.js
ADDED
|
@@ -0,0 +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;AAE9D,eAAe;AACf,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC"}
|
package/es/defined.d.ts
ADDED
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import { Options } from 'react-markdown';
|
|
2
|
+
export type IntervalType = number | {
|
|
3
|
+
/** 最大间隔 */
|
|
4
|
+
max: number;
|
|
5
|
+
/** 最小间隔 */
|
|
6
|
+
min: number;
|
|
7
|
+
/** 曲线函数自定义 */
|
|
8
|
+
curveFn?: (x: number) => number;
|
|
9
|
+
/** 曲线函数,如果配置了curveFn,则curve无效 */
|
|
10
|
+
curve?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear' | 'step-start' | 'step-end';
|
|
11
|
+
};
|
|
12
|
+
/**
|
|
13
|
+
* 字符接口
|
|
14
|
+
*/
|
|
15
|
+
export interface IChar {
|
|
16
|
+
content: string;
|
|
17
|
+
tokenId: number;
|
|
18
|
+
/** 字符索引 */
|
|
19
|
+
index: number;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* 段落类型
|
|
23
|
+
* 段落类型为br时,表示换行
|
|
24
|
+
* 段落类型为text时,表示文本
|
|
25
|
+
*/
|
|
26
|
+
export interface IParagraph {
|
|
27
|
+
/** 段落内容 */
|
|
28
|
+
content?: string;
|
|
29
|
+
/** 是否已打字 */
|
|
30
|
+
isTyped: boolean;
|
|
31
|
+
}
|
|
32
|
+
export interface ITokensReference {
|
|
33
|
+
startIndex: number;
|
|
34
|
+
raw: string;
|
|
35
|
+
}
|
|
36
|
+
export interface IOnTypedCharData {
|
|
37
|
+
currentIndex: number;
|
|
38
|
+
currentChar: string;
|
|
39
|
+
prevStr: string;
|
|
40
|
+
}
|
|
41
|
+
export interface ITypedChar extends IOnTypedCharData {
|
|
42
|
+
percent: number;
|
|
43
|
+
currentStr: string;
|
|
44
|
+
}
|
|
45
|
+
export interface IBeforeTypedChar extends IOnTypedCharData {
|
|
46
|
+
percent: number;
|
|
47
|
+
}
|
|
48
|
+
export interface MarkdownBaseProps {
|
|
49
|
+
reactMarkdownProps?: Options;
|
|
50
|
+
/** 计时类型: 支持setTimeout和requestAnimationFrame */
|
|
51
|
+
timerType?: 'setTimeout' | 'requestAnimationFrame';
|
|
52
|
+
/** 打字机效果间隔时间 */
|
|
53
|
+
interval: IntervalType;
|
|
54
|
+
/** 是否关闭打字机效果 */
|
|
55
|
+
disableTyping?: boolean;
|
|
56
|
+
/** 打字完成后回调, */
|
|
57
|
+
onEnd?: (data?: IEndData) => void;
|
|
58
|
+
/** 开始打字回调 */
|
|
59
|
+
onStart?: (data?: IOnTypedCharData) => void;
|
|
60
|
+
/** 打字前回调 */
|
|
61
|
+
onBeforeTypedChar?: (data?: IBeforeTypedChar) => Promise<void>;
|
|
62
|
+
/**
|
|
63
|
+
* 打字机打完一个字符回调
|
|
64
|
+
* @param char 字符
|
|
65
|
+
* @param index 字符索引
|
|
66
|
+
*/
|
|
67
|
+
onTypedChar?: (data?: ITypedChar) => void;
|
|
68
|
+
/** 是否自动开启打字动画 */
|
|
69
|
+
autoStartTyping?: boolean;
|
|
70
|
+
math?: IMarkdownMath;
|
|
71
|
+
}
|
|
72
|
+
export interface MarkdownProps extends MarkdownBaseProps {
|
|
73
|
+
children: string | undefined;
|
|
74
|
+
}
|
|
75
|
+
/** MarkdownCMD 组件不需要 children */
|
|
76
|
+
export interface MarkdownCMDProps extends MarkdownBaseProps {
|
|
77
|
+
children?: undefined;
|
|
78
|
+
}
|
|
79
|
+
export interface IMarkdownPlugin {
|
|
80
|
+
remarkPlugin?: unknown;
|
|
81
|
+
rehypePlugin?: unknown;
|
|
82
|
+
type: 'buildIn' | 'custom';
|
|
83
|
+
id?: any;
|
|
84
|
+
}
|
|
85
|
+
export interface IMarkdownMath {
|
|
86
|
+
/** 是括号还是$作为分隔符, 默认是$ */
|
|
87
|
+
splitSymbol: 'bracket' | 'dollar';
|
|
88
|
+
}
|
|
89
|
+
export interface IWholeContent {
|
|
90
|
+
content: string;
|
|
91
|
+
length: number;
|
|
92
|
+
prevLength: number;
|
|
93
|
+
}
|
|
94
|
+
export interface MarkdownBaseRef {
|
|
95
|
+
stop: () => void;
|
|
96
|
+
resume: () => void;
|
|
97
|
+
start: () => void;
|
|
98
|
+
restart: () => void;
|
|
99
|
+
}
|
|
100
|
+
/** Markdown 组件的ref 类型 */
|
|
101
|
+
export type MarkdownRef = MarkdownBaseRef;
|
|
102
|
+
/** MarkdownCMD 组件的 ref 类型 */
|
|
103
|
+
export interface MarkdownCMDRef extends MarkdownBaseRef {
|
|
104
|
+
push: (content: string) => void;
|
|
105
|
+
clear: () => void;
|
|
106
|
+
triggerWholeEnd: () => void;
|
|
107
|
+
}
|
|
108
|
+
export interface IEndData {
|
|
109
|
+
manual: boolean;
|
|
110
|
+
/** 打字机打过的字符串, 和answerStr 相同 */
|
|
111
|
+
str: string;
|
|
112
|
+
}
|
|
113
|
+
//# sourceMappingURL=defined.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"defined.d.ts","sourceRoot":"","sources":["../src/defined.ts"],"names":[],"mappings":"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"}
|
package/es/defined.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"defined.js","sourceRoot":"","sources":["../src/defined.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { IChar, ITypedChar, IWholeContent, MarkdownProps, IEndData, IBeforeTypedChar, IntervalType } from '../defined';
|
|
2
|
+
interface UseTypingTaskOptions {
|
|
3
|
+
timerType: MarkdownProps['timerType'];
|
|
4
|
+
interval: IntervalType;
|
|
5
|
+
charsRef: React.RefObject<IChar[]>;
|
|
6
|
+
onEnd?: (data?: IEndData) => void;
|
|
7
|
+
onStart?: (data?: {
|
|
8
|
+
currentIndex: number;
|
|
9
|
+
currentChar: string;
|
|
10
|
+
prevStr: string;
|
|
11
|
+
}) => void;
|
|
12
|
+
onBeforeTypedChar?: (data?: IBeforeTypedChar) => Promise<void>;
|
|
13
|
+
onTypedChar?: (data?: ITypedChar) => void;
|
|
14
|
+
processCharDisplay: (char: IChar) => void;
|
|
15
|
+
wholeContentRef: React.RefObject<IWholeContent>;
|
|
16
|
+
disableTyping: boolean;
|
|
17
|
+
triggerUpdate: () => void;
|
|
18
|
+
resetWholeContent: () => void;
|
|
19
|
+
}
|
|
20
|
+
export interface TypingTaskController {
|
|
21
|
+
start: () => void;
|
|
22
|
+
stop: () => void;
|
|
23
|
+
clear: () => void;
|
|
24
|
+
isTyping: () => boolean;
|
|
25
|
+
/** 是否主动调用 stop 方法 */
|
|
26
|
+
typedIsManualStopRef: React.RefObject<boolean>;
|
|
27
|
+
resume: () => void;
|
|
28
|
+
restart: () => void;
|
|
29
|
+
}
|
|
30
|
+
export declare const useTypingTask: (options: UseTypingTaskOptions) => TypingTaskController;
|
|
31
|
+
export {};
|
|
32
|
+
//# sourceMappingURL=useTypingTask.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTypingTask.d.ts","sourceRoot":"","sources":["../../src/hooks/useTypingTask.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAEvH,UAAU,oBAAoB;IAC5B,SAAS,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACtC,QAAQ,EAAE,YAAY,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,QAAQ,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE;QAAE,YAAY,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1F,iBAAiB,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,gBAAgB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/D,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC1C,kBAAkB,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC;IAC1C,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;IAChD,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,iBAAiB,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,QAAQ,EAAE,MAAM,OAAO,CAAC;IACxB,qBAAqB;IACrB,oBAAoB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IAC/C,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,aAAa,GAAI,SAAS,oBAAoB,KAAG,oBAsa7D,CAAC"}
|