💄 style: Support streaming Markdown animation

Author: canisminor1990

package.json

@@ -116,7 +116,9 @@
     "emoji-mart": "^5.6.0",
     "fast-deep-equal": "^3.1.3",
     "framer-motion": "^12.6.3",
+    "hast": "^1.0.0",
     "immer": "^10.1.1",
+    "katex": "^0.16.9",
     "leva": "^0.10.0",
     "lodash-es": "^4.17.21",
     "lucide-react": "^0.484.0",

src/Highlighter/SyntaxHighlighter/index.tsx

@@ -1,13 +1,18 @@
 'use client';
 
 import { cva } from 'class-variance-authority';
-import { memo, useMemo } from 'react';
+import { memo, useEffect, useMemo, useState } from 'react';
 
 import { useHighlight } from '@/hooks/useHighlight';
 
 import type { SyntaxHighlighterProps } from '../type';
 import { useStyles } from './style';
 
+const Line = memo<{ content: string }>(({ content }) => {
+  return <div dangerouslySetInnerHTML={{ __html: content }} />;
+});
+Line.displayName = 'HighlighterLine';
+
 const SyntaxHighlighter = memo<SyntaxHighlighterProps>(
   ({ ref, children, language, className, style, enableTransformer, variant, theme }) => {
     const { styles, cx } = useStyles();
@@ -18,6 +23,41 @@ const SyntaxHighlighter = memo<SyntaxHighlighterProps>(
       language,
       theme: isDefaultTheme ? undefined : theme,
     });
+    const [contentLines, setContentLines] = useState<string[]>([]);
+
+    useEffect(() => {
+      if (data && typeof data === 'string') {
+        // Extract all lines from the HTML content
+        // We need to handle the structure from shiki which gives us HTML with a <pre><code> structure
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(data, 'text/html');
+        const codeElement = doc.querySelector('pre code');
+
+        if (codeElement) {
+          const spanLines = codeElement.querySelectorAll('.line');
+          const newLines = [...spanLines].map((line) => line.outerHTML);
+
+          // Only update if the lines have changed
+          setContentLines((prevLines) => {
+            if (prevLines.length !== newLines.length) return newLines;
+
+            let hasChanged = false;
+            for (const [i, newLine] of newLines.entries()) {
+              if (prevLines[i] !== newLine) {
+                hasChanged = true;
+                break;
+              }
+            }
+
+            return hasChanged ? newLines : prevLines;
+          });
+        } else {
+          // Fallback if the structure is different
+          const htmlLines = data.split('\n').map((line) => `<span class="line">${line}</span>`);
+          setContentLines(htmlLines);
+        }
+      }
+    }, [data]);
 
     const variants = useMemo(
       () =>
@@ -48,7 +88,7 @@ const SyntaxHighlighter = memo<SyntaxHighlighterProps>(
       [styles],
     );
 
-    if (!data)
+    if (contentLines.length === 0)
       return (
         <div
           className={cx(variants({ shiki: false, showBackground, variant }), className)}
@@ -65,13 +105,18 @@ const SyntaxHighlighter = memo<SyntaxHighlighterProps>(
     return (
       <div
         className={cx(variants({ shiki: true, showBackground, variant }), className)}
-        dangerouslySetInnerHTML={{
-          __html: data as string,
-        }}
         dir="ltr"
         ref={ref}
         style={style}
-      />
+      >
+        <pre className="shiki">
+          <code>
+            {contentLines.map((line, index) => (
+              <Line content={line} key={index} />
+            ))}
+          </code>
+        </pre>
+      </div>
     );
   },
 );

src/Markdown/Markdown.tsx

@@ -1,29 +1,12 @@
 'use client';
 
 import { cva } from 'class-variance-authority';
-import { memo, useCallback, useMemo } from 'react';
-import ReactMarkdown from 'react-markdown';
-import type { Components } from 'react-markdown/lib';
+import { memo, useMemo } from 'react';
 
-import { PreviewGroup } from '@/Image';
-import Image from '@/mdx/mdxComponents/Image';
-import Link from '@/mdx/mdxComponents/Link';
-import Section from '@/mdx/mdxComponents/Section';
-import Video from '@/mdx/mdxComponents/Video';
-
-import { CodeFullFeatured, CodeLite } from './CodeBlock';
+import SyntaxMarkdown from './SyntaxMarkdown';
 import Typography from './Typography';
 import { useStyles } from './style';
 import type { MarkdownProps } from './type';
-import {
-  addToCache,
-  contentCache,
-  createPlugins,
-  escapeBrackets,
-  escapeMhchem,
-  fixMarkdownBold,
-  transformCitations,
-} from './utils';
 
 const Markdown = memo<MarkdownProps>(
   ({
@@ -33,6 +16,7 @@ const Markdown = memo<MarkdownProps>(
     style,
     fullFeaturedCodeBlock,
     onDoubleClick,
+    animated,
     enableLatex = true,
     enableMermaid = true,
     enableImageGallery = true,
@@ -55,12 +39,13 @@ const Markdown = memo<MarkdownProps>(
     ...rest
   }) => {
     const { cx, styles } = useStyles();
-    const isChatMode = variant === 'chat';
 
+    // Style variant handling
     const variants = useMemo(
       () =>
         cva(styles.root, {
           defaultVariants: {
+            animated: false,
             enableLatex: true,
             variant: 'default',
           },
@@ -74,158 +59,19 @@ const Markdown = memo<MarkdownProps>(
               true: styles.latex,
               false: null,
             },
+            animated: {
+              true: styles.animated,
+              false: null,
+            },
           },
           /* eslint-enable sort-keys-fix/sort-keys-fix */
         }),
       [styles],
     );
 
-    // 计算缓存键
-    const cacheKey = useMemo(() => {
-      return `${children}-${enableLatex}-${enableCustomFootnotes}-${citations?.length || 0}`;
-    }, [children, enableLatex, enableCustomFootnotes, citations?.length]);
-
-    // 处理内容并利用缓存避免重复计算
-    const escapedContent = useMemo(() => {
-      // 尝试从缓存获取
-      if (contentCache.has(cacheKey)) {
-        return contentCache.get(cacheKey);
-      }
-
-      // 处理新内容
-      let processedContent;
-      if (enableLatex) {
-        const baseContent = fixMarkdownBold(escapeMhchem(escapeBrackets(children)));
-        processedContent = enableCustomFootnotes
-          ? transformCitations(baseContent, citations?.length)
-          : baseContent;
-      } else {
-        processedContent = fixMarkdownBold(children);
-      }
-
-      // 缓存处理结果
-      addToCache(cacheKey, processedContent);
-      return processedContent;
-    }, [cacheKey, children, enableLatex, enableCustomFootnotes, citations?.length]);
-
-    // 创建插件
-    const { rehypePluginsList, remarkPluginsList } = useMemo(
-      () =>
-        createPlugins({
-          allowHtml,
-          enableCustomFootnotes,
-          enableLatex,
-          isChatMode,
-          rehypePlugins,
-          remarkPlugins,
-          remarkPluginsAhead,
-        }),
-      [
-        allowHtml,
-        enableLatex,
-        enableCustomFootnotes,
-        isChatMode,
-        rehypePlugins,
-        remarkPlugins,
-        remarkPluginsAhead,
-      ],
-    );
-
-    // 使用 useCallback 优化渲染子组件
-    const renderLink = useCallback(
-      (props: any) => <Link citations={citations} {...props} {...componentProps?.a} />,
-      [citations, componentProps?.a],
-    );
-
-    const renderImage = useCallback(
-      (props: any) => <Image {...props} {...componentProps?.img} />,
-      [isChatMode, componentProps?.img],
-    );
-
-    const renderCodeBlock = useCallback(
-      (props: any) =>
-        fullFeaturedCodeBlock ? (
-          <CodeFullFeatured
-            enableMermaid={enableMermaid}
-            highlight={componentProps?.highlight}
-            mermaid={componentProps?.mermaid}
-            {...props}
-            {...componentProps?.pre}
-          />
-        ) : (
-          <CodeLite
-            enableMermaid={enableMermaid}
-            highlight={componentProps?.highlight}
-            mermaid={componentProps?.mermaid}
-            {...props}
-            {...componentProps?.pre}
-          />
-        ),
-      [
-        enableMermaid,
-        fullFeaturedCodeBlock,
-        componentProps?.highlight,
-        componentProps?.mermaid,
-        componentProps?.pre,
-      ],
-    );
-
-    const renderSection = useCallback(
-      (props: any) => <Section showCitations={showFootnotes} {...props} />,
-      [showFootnotes],
-    );
-
-    const renderVideo = useCallback(
-      (props: any) => <Video {...props} {...componentProps?.video} />,
-      [componentProps?.video],
-    );
-
-    // 创建组件映射
-    const memoComponents = useMemo(
-      () => ({
-        a: renderLink,
-        img: enableImageGallery ? renderImage : undefined,
-        pre: renderCodeBlock,
-        section: renderSection,
-        video: renderVideo,
-        ...components,
-      }),
-      [
-        renderLink,
-        renderImage,
-        renderCodeBlock,
-        renderSection,
-        renderVideo,
-        enableImageGallery,
-        components,
-      ],
-    ) as Components;
-
-    // 渲染默认内容
-    const defaultDOM = useMemo(
-      () => (
-        <PreviewGroup enable={enableImageGallery}>
-          <ReactMarkdown
-            {...reactMarkdownProps}
-            components={memoComponents}
-            rehypePlugins={rehypePluginsList}
-            remarkPlugins={remarkPluginsList}
-          >
-            {escapedContent}
-          </ReactMarkdown>
-        </PreviewGroup>
-      ),
-      [escapedContent, memoComponents, rehypePluginsList, remarkPluginsList, enableImageGallery],
-    );
-
-    // 应用自定义渲染
-    const markdownContent = customRender
-      ? customRender(defaultDOM, { text: escapedContent || '' })
-      : defaultDOM;
-
     return (
       <Typography
-        className={cx(variants({ enableLatex, variant }), className)}
+        className={cx(variants({ animated, enableLatex, variant }), className)}
         data-code-type="markdown"
         fontSize={fontSize}
         headerMultiple={headerMultiple}
@@ -236,7 +82,27 @@ const Markdown = memo<MarkdownProps>(
         style={style}
         {...rest}
       >
-        {markdownContent}
+        <SyntaxMarkdown
+          allowHtml={allowHtml}
+          animated={animated}
+          citations={citations}
+          componentProps={componentProps}
+          components={components}
+          customRender={customRender}
+          enableCustomFootnotes={enableCustomFootnotes}
+          enableImageGallery={enableImageGallery}
+          enableLatex={enableLatex}
+          enableMermaid={enableMermaid}
+          fullFeaturedCodeBlock={fullFeaturedCodeBlock}
+          reactMarkdownProps={reactMarkdownProps}
+          rehypePlugins={rehypePlugins}
+          remarkPlugins={remarkPlugins}
+          remarkPluginsAhead={remarkPluginsAhead}
+          showFootnotes={showFootnotes}
+          variant={variant}
+        >
+          {children}
+        </SyntaxMarkdown>
       </Typography>
     );
   },