ds-markdown 0.2.3 → 0.2.4-beta.0

package/README.md

@@ -353,7 +353,7 @@ import DsMarkdown, { MarkdownCMD } from 'ds-markdown';
 | `autoStartTyping`   | `boolean`                                   | 是否自动开始打字动画，设为 false 时需手动触发，不支持动态修改 | `true`                                                      |
 | `codeBlock`         | `IMarkdownCode`                             | 代码块配置                                                    | `{headerActions: true}`                                     |
 
-> 注意： 如果当在打字中 `disableTyping`从 `true` 变为 `false`
+> 注意：打字进行中将 `disableTyping` 从 `true` 改为 `false` 只会从当前位置继续，不会回放已跳过的动画；若需从头播放，请调用实例方法 `restart()`。
 
 ### IBeforeTypedChar
 
@@ -851,16 +851,19 @@ import { MarkdownCMD, MarkdownCMDRef } from 'ds-markdown';
 
 function StreamingChat() {
   const markdownRef = useRef<MarkdownCMDRef>(null);
+  const answerRef = useRef<MarkdownCMDRef>(null);
+  const [isShowAnswer, setIsShowAnswer] = useState(false);
 
   // 模拟 AI 流式响应
   const simulateAIResponse = async () => {
     markdownRef.current?.clear();
+    answerRef.current?.clear();
 
     // 思考阶段
     markdownRef.current?.push('🤔 正在分析您的问题...', 'thinking');
     await delay(1000);
     markdownRef.current?.push('\n\n✅ 分析完成，开始回答', 'thinking');
-
+    setIsShowAnswer(true);
     // 流式回答
     const chunks = [
       '# React 19 新特性解析\n\n',
@@ -874,7 +877,7 @@ function StreamingChat() {
 
     for (const chunk of chunks) {
       await delay(100);
-      markdownRef.current?.push(chunk, 'answer');
+      answerRef.current?.push(chunk, 'answer');
     }
   };
 
@@ -883,7 +886,8 @@ function StreamingChat() {
   return (
     <div className="chat-container">
       <button onClick={simulateAIResponse}>🤖 询问 React 19 新特性</button>
-      <MarkdownCMD ref={markdownRef} interval={10} timerType="requestAnimationFrame" />
+      <MarkdownCMD answerType="thinking" ref={markdownRef} interval={10} timerType="requestAnimationFrame" />
+      {isShowAnswer && <MarkdownCMD answerType="answer" ref={answerRef} interval={10} timerType="requestAnimationFrame" />}
     </div>
   );
 }

package/dist/cjs/index.d.ts

@@ -2,6 +2,10 @@ import * as React$1 from 'react';
 import React__default from 'react';
 import { Pluggable } from 'unified';
 import { KatexOptions } from 'katex';
+import * as react_markdown_typer_es_defined from 'react-markdown-typer/es/defined';
+import { MarkdownTyperBaseProps, MarkdownBaseRef } from 'react-markdown-typer/es/defined';
+import { MarkdownTyperCMDProps } from 'react-markdown-typer';
+export { ITypedChar } from 'react-markdown-typer';
 
 declare namespace Mermaid {
     /**
@@ -1521,32 +1525,7 @@ declare namespace Mermaid {
  * 回答类型，思考和回答
  */
 type AnswerType = 'answer' | 'thinking';
-type IntervalType = number | {
-    /** 最大间隔 */
-    max: number;
-    /** 最小间隔 */
-    min: number;
-    /** 曲线函数自定义 */
-    curveFn?: (x: number) => number;
-    /** 曲线函数，如果配置了curveFn，则curve无效 */
-    curve?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear' | 'step-start' | 'step-end';
-};
 type Theme = 'light' | 'dark';
-interface IOnTypedCharData {
-    currentIndex: number;
-    currentChar: string;
-    answerType: AnswerType;
-    prevStr: string;
-}
-interface IStartData extends IOnTypedCharData {
-}
-interface ITypedChar extends IOnTypedCharData {
-    percent: number;
-    currentStr: string;
-}
-interface IBeforeTypedChar extends IOnTypedCharData {
-    percent: number;
-}
 interface IMarkdownThemeProps {
     /** 主题 */
     theme?: Theme;
@@ -1563,28 +1542,6 @@ interface IMarkdownThemeStateProps extends IMarkdownThemeProps {
     theme: Theme;
     answerType: AnswerType;
 }
-interface MarkdownBaseProps {
-    /** 计时类型： 支持setTimeout和requestAnimationFrame */
-    timerType?: 'setTimeout' | 'requestAnimationFrame';
-    /** 打字机效果间隔时间 */
-    interval: IntervalType;
-    /** 是否关闭打字机效果 */
-    disableTyping?: boolean;
-    /** 打字完成后回调,  */
-    onEnd?: (data?: IEndData) => void;
-    /** 开始打字回调 */
-    onStart?: (data?: IStartData) => void;
-    /** 打字前回调 */
-    onBeforeTypedChar?: (data?: IBeforeTypedChar) => Promise<void>;
-    /**
-     * 打字机打完一个字符回调
-     * @param char 字符
-     * @param index 字符索引
-     */
-    onTypedChar?: (data?: ITypedChar) => void;
-    /** 是否自动开启打字动画 */
-    autoStartTyping?: boolean;
-}
 interface IMarkdownCode {
     /** 是否显示头部操作按钮
      * 如果为true，则显示头部操作按钮
@@ -1592,11 +1549,11 @@ interface IMarkdownCode {
      */
     headerActions?: boolean | React.ReactNode;
 }
-interface MarkdownProps extends MarkdownBaseProps, IMarkdownThemeProps {
+interface MarkdownProps extends MarkdownTyperBaseProps, IMarkdownThemeProps {
     children: string | undefined;
 }
 /**  MarkdownCMD 组件不需要 children */
-interface MarkdownCMDProps extends MarkdownBaseProps, IMarkdownThemeProps {
+interface MarkdownCMDProps extends MarkdownTyperBaseProps, IMarkdownThemeProps {
     children?: undefined;
     isInnerRender?: boolean;
 }
@@ -1613,12 +1570,6 @@ interface IMarkdownMath {
     /** 数学公式替换函数 */
     replaceMathBracket?: (value: string) => string;
 }
-interface MarkdownBaseRef {
-    stop: () => void;
-    resume: () => void;
-    start: () => void;
-    restart: () => void;
-}
 /** Markdown 组件的ref 类型 */
 type MarkdownRef = MarkdownBaseRef;
 /** MarkdownCMD 组件的 ref 类型 */
@@ -1627,15 +1578,6 @@ interface MarkdownCMDRef extends MarkdownBaseRef {
     clear: () => void;
     triggerWholeEnd: () => void;
 }
-interface IEndData {
-    manual: boolean;
-    /** 回答字符串 */
-    answerStr: string;
-    /** 思考字符串 */
-    thinkingStr: string;
-    /** 打字机打过的字符串, 和answerStr 相同 */
-    str: string;
-}
 interface IMarkdownMermaidConfig extends Mermaid.MermaidConfig {
     /** 是否显示头部操作按钮
      * 如果为true，则显示头部操作按钮
@@ -1648,9 +1590,17 @@ interface IMarkdownMermaidConfig extends Mermaid.MermaidConfig {
 interface IMarkdownKatexConfig extends KatexOptions {
 }
 
-declare const MarkdownCMD: React$1.ForwardRefExoticComponent<MarkdownCMDProps & React$1.RefAttributes<MarkdownCMDRef>>;
+interface IMarkdownCustom {
+    answerType?: AnswerType;
+    theme?: Theme;
+    codeBlock?: IMarkdownCode;
+    plugins?: IMarkdownPlugin[];
+    math?: IMarkdownMath;
+    isInnerRender?: boolean;
+}
+declare const MarkdownCMD: React$1.ForwardRefExoticComponent<MarkdownTyperCMDProps & IMarkdownCustom & React$1.RefAttributes<MarkdownCMDRef>>;
 
-declare const _default: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<MarkdownProps & React__default.RefAttributes<MarkdownBaseRef>>>;
+declare const _default: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<MarkdownProps & React__default.RefAttributes<react_markdown_typer_es_defined.MarkdownBaseRef>>>;
 
 interface ButtonProps$1 {
     className?: string;
@@ -1794,4 +1744,4 @@ declare const useLocale: () => {
 declare const useThemeState: () => IMarkdownThemeStateProps;
 
 export { Button, CheckMarkIcon, CodeBlockActions, CodeBlockWrap, ConfigProvider, CopyButton, CopyIcon, DownloadButton, DownloadIcon, HighlightCode, IconButton, _default as Markdown, MarkdownCMD, Segmented, SuccessButton, _default as default, useConfig, useLocale, useThemeState };
-export type { ConfigContextType, ConfigProviderProps, IMarkdownMath, IMarkdownMermaidConfig, IMarkdownPlugin, ITypedChar, Locale, MarkdownCMDProps, MarkdownCMDRef, MarkdownProps, MarkdownRef };
+export type { ConfigContextType, ConfigProviderProps, IMarkdownMath, IMarkdownMermaidConfig, IMarkdownPlugin, Locale, MarkdownCMDProps, MarkdownCMDRef, MarkdownProps, MarkdownRef };