ds-markdown 0.1.9-beta.3 → 0.1.9-beta.5

package/dist/cjs/i18n/en/index.d.ts

@@ -4,6 +4,13 @@ declare const enUS: {
         readonly copied: "Copied";
         readonly download: "Download";
     };
+    readonly mermaid: {
+        readonly diagram: "Diagram";
+        readonly code: "Code";
+        readonly zoomOut: "Zoom Out";
+        readonly zoomIn: "Zoom In";
+        readonly download: "Download";
+    };
 };
 type EnUS = typeof enUS;
 

package/dist/cjs/i18n/en/index.js

@@ -8,6 +8,13 @@ const enUS = {
         copied: 'Copied',
         download: 'Download',
     },
+    mermaid: {
+        diagram: 'Diagram',
+        code: 'Code',
+        zoomOut: 'Zoom Out',
+        zoomIn: 'Zoom In',
+        download: 'Download',
+    },
 };
 
 exports.default = enUS;

package/dist/cjs/i18n/en/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/i18n/en/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAAa,MAAA,IAAI,GAAG;AAClB,IAAA,SAAS,EAAE;AACT,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,MAAM,EAAE,QAAQ;AAChB,QAAA,QAAQ,EAAE,UAAU;AACrB,KAAA;;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/i18n/en/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAAa,MAAA,IAAI,GAAG;AAClB,IAAA,SAAS,EAAE;AACT,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,MAAM,EAAE,QAAQ;AAChB,QAAA,QAAQ,EAAE,UAAU;AACrB,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,OAAO,EAAE,UAAU;AACnB,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,QAAQ,EAAE,UAAU;AACrB,KAAA;;;;;;"}

package/dist/cjs/i18n/zh/index.d.ts

@@ -4,6 +4,13 @@ declare const zhCN: {
         readonly copied: "已复制";
         readonly download: "下载";
     };
+    readonly mermaid: {
+        readonly diagram: "图表";
+        readonly code: "代码";
+        readonly zoomOut: "缩小";
+        readonly zoomIn: "放大";
+        readonly download: "下载";
+    };
 };
 type ZhCN = typeof zhCN;
 

package/dist/cjs/i18n/zh/index.js

@@ -8,6 +8,13 @@ const zhCN = {
         copied: '已复制',
         download: '下载',
     },
+    mermaid: {
+        diagram: '图表',
+        code: '代码',
+        zoomOut: '缩小',
+        zoomIn: '放大',
+        download: '下载',
+    },
 };
 
 exports.default = zhCN;

package/dist/cjs/i18n/zh/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/i18n/zh/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAAa,MAAA,IAAI,GAAG;AAClB,IAAA,SAAS,EAAE;AACT,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,MAAM,EAAE,KAAK;AACb,QAAA,QAAQ,EAAE,IAAI;AACf,KAAA;;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/i18n/zh/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAAa,MAAA,IAAI,GAAG;AAClB,IAAA,SAAS,EAAE;AACT,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,MAAM,EAAE,KAAK;AACb,QAAA,QAAQ,EAAE,IAAI;AACf,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,OAAO,EAAE,IAAI;AACb,QAAA,MAAM,EAAE,IAAI;AACZ,QAAA,QAAQ,EAAE,IAAI;AACf,KAAA;;;;;;"}

package/dist/cjs/index.d.ts

@@ -123,6 +123,26 @@ interface ButtonProps {
 }
 declare const Button: React__default.FC<ButtonProps>;
 
+interface IconButtonProps {
+    icon: React__default.ReactNode;
+    style?: React__default.CSSProperties;
+    className?: string;
+    onClick?: () => void;
+}
+declare const IconButton: React__default.FC<IconButtonProps>;
+
+type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+interface ToolTipProps {
+    title: React__default.ReactNode;
+    children: React__default.ReactElement;
+    position?: TooltipPosition;
+    className?: string;
+    style?: React__default.CSSProperties;
+    showArrow?: boolean;
+    delay?: number;
+}
+declare const ToolTip: React__default.ForwardRefExoticComponent<ToolTipProps & React__default.RefAttributes<HTMLElement>>;
+
 interface CopyButtonProps {
     codeContent?: string;
     style?: React__default.CSSProperties;
@@ -150,6 +170,12 @@ interface CodeBlockWrapProps {
 }
 declare const CodeBlockWrap: React__default.FC<CodeBlockWrapProps>;
 
+interface HighlightCodeProps {
+    code: string;
+    language: string;
+}
+declare const HighlightCode: React__default.FC<HighlightCodeProps>;
+
 declare namespace Mermaid {
     /**
      * The font size to use
@@ -1671,6 +1697,13 @@ interface Locale {
         download: string;
         [key: string]: string;
     };
+    mermaid: {
+        diagram: string;
+        code: string;
+        zoomOut: string;
+        zoomIn: string;
+        download: string;
+    };
     [key: string]: unknown;
 }
 interface ConfigProviderProps {
@@ -1688,5 +1721,5 @@ declare const useLocale: () => Locale;
 
 declare const useThemeState: () => IMarkdownThemeStateProps;
 
-export { Button, CodeBlockActions, CodeBlockWrap, ConfigProvider, CopyButton, DownloadButton, _default as Markdown, MarkdownCMD, _default as default, useConfig, useLocale, useThemeState };
+export { Button, CodeBlockActions, CodeBlockWrap, ConfigProvider, CopyButton, DownloadButton, HighlightCode, IconButton, _default as Markdown, MarkdownCMD, ToolTip, _default as default, useConfig, useLocale, useThemeState };
 export type { ConfigContextType, ConfigProviderProps, IMarkdownMath, ITypedChar, Locale, MarkdownCMDProps, MarkdownCMDRef, MarkdownProps, MarkdownRef };

package/dist/cjs/index.js

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var React = require('react');
 var Markdown$2 = require('react-markdown');
-var reactSyntaxHighlighter = require('react-syntax-highlighter');
 var gfmPlugin = require('remark-gfm');
 var classNames = require('classnames');
+var reactSyntaxHighlighter = require('react-syntax-highlighter');
+var reactDom = require('react-dom');
 
 const replaceMathBracket = (value) => {
     // 1. 提取所有块级公式内容，临时替换为占位符, [...]
@@ -35,7 +36,7 @@ const replaceMathBracket = (value) => {
 const DEFAULT_THEME = 'light';
 const DEFAULT_ANSWER_TYPE = 'answer';
 const DEFAULT_PLUGINS = [];
-const MarkdownThemeContext = react.createContext({
+const MarkdownThemeContext = React.createContext({
     state: {
         theme: DEFAULT_THEME,
         answerType: DEFAULT_ANSWER_TYPE,
@@ -43,7 +44,7 @@ const MarkdownThemeContext = react.createContext({
     methods: {},
 });
 const MarkdownThemeProvider = ({ value = {}, children }) => {
-    const contextValue = react.useMemo(() => ({
+    const contextValue = React.useMemo(() => ({
         state: {
             theme: DEFAULT_THEME,
             answerType: DEFAULT_ANSWER_TYPE,
@@ -55,9 +56,9 @@ const MarkdownThemeProvider = ({ value = {}, children }) => {
     }), [value]);
     return jsxRuntime.jsx(MarkdownThemeContext.Provider, { value: contextValue, children: children });
 };
-const useMarkdownThemeContext = () => react.useContext(MarkdownThemeContext);
+const useMarkdownThemeContext = () => React.useContext(MarkdownThemeContext);
 const useThemeState = () => {
-    return react.useContext(MarkdownThemeContext).state;
+    return React.useContext(MarkdownThemeContext).state;
 };
 
 const CodeBlockWrap = ({ children, title }) => {
@@ -65,11 +66,11 @@ const CodeBlockWrap = ({ children, title }) => {
     return (jsxRuntime.jsxs("div", { className: `md-code-block md-code-block-${theme}`, children: [jsxRuntime.jsx("div", { className: "md-code-block-banner-wrap", children: jsxRuntime.jsx("div", { className: "md-code-block-banner md-code-block-banner-lite", children: title }) }), jsxRuntime.jsx("div", { className: "md-code-block-content", children: children })] }));
 };
 
-const Button = ({ className = '', children, icon, onClick, style }) => {
+const Button = ({ className = '', children, icon, onClick, style, ...restProps }) => {
     return (jsxRuntime.jsxs("div", { role: "button", className: classNames({
             'ds-button': true,
             [className]: !!className,
-        }), onClick: onClick, style: style, children: [icon && jsxRuntime.jsx("div", { className: "ds-button__icon", children: icon }), children] }));
+        }), onClick: onClick, style: style, ...restProps, children: [icon && jsxRuntime.jsx("div", { className: "ds-button__icon", children: icon }), children] }));
 };
 
 const CheckMarkIcon = ({ size }) => {
@@ -88,13 +89,20 @@ const zhCN = {
         copied: '已复制',
         download: '下载',
     },
+    mermaid: {
+        diagram: '图表',
+        code: '代码',
+        zoomOut: '缩小',
+        zoomIn: '放大',
+        download: '下载',
+    },
 };
 
-const ConfigContext = react.createContext({
+const ConfigContext = React.createContext({
     locale: zhCN,
 });
 const ConfigProvider = ({ locale, children, mermaidConfig }) => {
-    const contextValue = react.useMemo(() => {
+    const contextValue = React.useMemo(() => {
         const contextValue = {
             locale: locale || zhCN,
         };
@@ -107,7 +115,7 @@ const ConfigProvider = ({ locale, children, mermaidConfig }) => {
 };
 // Hook 用于在组件中使用配置
 const useConfig = () => {
-    const context = react.useContext(ConfigContext);
+    const context = React.useContext(ConfigContext);
     return context;
 };
 // Hook 用于获取当前语言包
@@ -119,9 +127,9 @@ const useLocale = () => {
 const TIMEOUT = 3000;
 const CopyButton = ({ codeContent, style, className }) => {
     const { locale } = useConfig();
-    const [copyText, setCopyText] = react.useState(locale.codeBlock.copy);
-    const [showCheckmark, setShowCheckmark] = react.useState(false);
-    const [isCopying, setIsCopying] = react.useState(false);
+    const [copyText, setCopyText] = React.useState(locale.codeBlock.copy);
+    const [showCheckmark, setShowCheckmark] = React.useState(false);
+    const [isCopying, setIsCopying] = React.useState(false);
     // 下载文件
     // 复制到剪贴板
     const handleCopy = async () => {
@@ -242,11 +250,14 @@ const ID_PREFIX__ = '__ds-markdown__';
 /** 数学公式插件id */
 const katexId = `${ID_PREFIX__}katex`;
 
-const CodeComponent = ({ className, children }) => {
+const HighlightCode = ({ code, language }) => {
+    return (jsxRuntime.jsx(reactSyntaxHighlighter.Prism, { useInlineStyles: false, language: language, style: {}, children: code }));
+};
+
+const CodeComponent = ({ className, children = '' }) => {
     const match = /language-(\w+)/.exec(className || '');
     const codeContent = String(children).replace(/\n$/, '');
-    const { state: themeState } = useMarkdownThemeContext();
-    return match ? (jsxRuntime.jsx(BlockWrap, { language: match[1], codeContent: codeContent, children: jsxRuntime.jsx(reactSyntaxHighlighter.Prism, { useInlineStyles: false, language: match[1], style: {}, children: codeContent }) })) : (jsxRuntime.jsx("code", { className: className, children: children }));
+    return match ? (jsxRuntime.jsx(BlockWrap, { language: match[1], codeContent: codeContent, children: jsxRuntime.jsx(HighlightCode, { code: codeContent, language: match[1] }) })) : (jsxRuntime.jsx("code", { className: className, children: children }));
 };
 const HighReactMarkdown = ({ children: _children, ...props }) => {
     const { state: themeState } = useMarkdownThemeContext();
@@ -254,7 +265,7 @@ const HighReactMarkdown = ({ children: _children, ...props }) => {
     const currentMath = themeState.math;
     const currentPlugins = themeState.plugins;
     const mathSplitSymbol = currentMath?.splitSymbol ?? 'dollar';
-    const { remarkPlugins, rehypePlugins, hasKatexPlugin, components } = react.useMemo(() => {
+    const { remarkPlugins, rehypePlugins, hasKatexPlugin, components } = React.useMemo(() => {
         let hasKatexPlugin = false;
         const components = {};
         const remarkPlugins = [gfmPlugin];
@@ -290,7 +301,7 @@ const HighReactMarkdown = ({ children: _children, ...props }) => {
             components,
         };
     }, [currentPlugins]);
-    const children = react.useMemo(() => {
+    const children = React.useMemo(() => {
         /** 如果存在数学公式插件，并且数学公式分隔符为括号，则替换成 $ 符号 */
         if (hasKatexPlugin && mathSplitSymbol === 'bracket') {
             return replaceMathBracket(_children);
@@ -305,30 +316,30 @@ const HighReactMarkdown = ({ children: _children, ...props }) => {
             ...components,
         }, ...props, children: children }));
 };
-var HighReactMarkdown$1 = react.memo(HighReactMarkdown);
+var HighReactMarkdown$1 = React.memo(HighReactMarkdown);
 
 const useTypingTask = (options) => {
     const { timerType = 'setTimeout', interval, charsRef, onEnd, onStart, onBeforeTypedChar, onTypedChar, processCharDisplay, wholeContentRef, disableTyping, triggerUpdate, resetWholeContent, } = options;
     /** 是否卸载 */
-    const isUnmountRef = react.useRef(false);
+    const isUnmountRef = React.useRef(false);
     /** 是否正在打字 */
-    const isTypingRef = react.useRef(false);
+    const isTypingRef = React.useRef(false);
     /** 动画帧ID */
-    const animationFrameRef = react.useRef(null);
+    const animationFrameRef = React.useRef(null);
     /** 传统定时器（兼容模式） */
-    const timerRef = react.useRef(null);
+    const timerRef = React.useRef(null);
     // 已经打过的字记录
-    const typedCharsRef = react.useRef(undefined);
+    const typedCharsRef = React.useRef(undefined);
     // 是否主动调用 stop 方法
-    const typedIsManualStopRef = react.useRef(false);
-    const disableTypingRef = react.useRef(disableTyping);
+    const typedIsManualStopRef = React.useRef(false);
+    const disableTypingRef = React.useRef(disableTyping);
     disableTypingRef.current = disableTyping;
-    const intervalRef = react.useRef(interval);
+    const intervalRef = React.useRef(interval);
     intervalRef.current = interval;
     const getChars = () => {
         return charsRef.current;
     };
-    react.useEffect(() => {
+    React.useEffect(() => {
         isUnmountRef.current = false;
         return () => {
             isUnmountRef.current = true;
@@ -641,30 +652,30 @@ const useTypingTask = (options) => {
     };
 };
 
-const MarkdownContext = react.createContext({});
+const MarkdownContext = React.createContext({});
 const MarkdownProvider = ({ value, children }) => {
-    const contextValue = react.useMemo(() => value, [value]);
+    const contextValue = React.useMemo(() => value, [value]);
     return jsxRuntime.jsx(MarkdownContext.Provider, { value: contextValue, children: children });
 };
 
-const MarkdownCMDInner = react.forwardRef(({ interval = 30, onEnd, onStart, onTypedChar, onBeforeTypedChar, timerType = 'setTimeout', disableTyping = false, autoStartTyping = true }, ref) => {
+const MarkdownCMDInner = React.forwardRef(({ interval = 30, onEnd, onStart, onTypedChar, onBeforeTypedChar, timerType = 'setTimeout', disableTyping = false, autoStartTyping = true }, ref) => {
     const { state: themeState } = useMarkdownThemeContext();
     // 从 context 中获取主题配置
     const currentTheme = themeState.theme;
     /** 是否自动开启打字动画, 后面发生变化将不会生效 */
-    const autoStartTypingRef = react.useRef(autoStartTyping);
+    const autoStartTypingRef = React.useRef(autoStartTyping);
     /** 是否打过字 */
-    const isStartedTypingRef = react.useRef(false);
+    const isStartedTypingRef = React.useRef(false);
     /** 当前需要打字的内容 */
-    const charsRef = react.useRef([]);
+    const charsRef = React.useRef([]);
     /**
      * 打字是否已经完全结束
      * 如果打字已经完全结束，则不会再触发打字效果
      */
-    const isWholeTypedEndRef = react.useRef(false);
-    const charIndexRef = react.useRef(0);
+    const isWholeTypedEndRef = React.useRef(false);
+    const charIndexRef = React.useRef(0);
     /** 整个内容引用 */
-    const wholeContentRef = react.useRef({
+    const wholeContentRef = React.useRef({
         thinking: {
             content: '',
             length: 0,
@@ -677,7 +688,7 @@ const MarkdownCMDInner = react.forwardRef(({ interval = 30, onEnd, onStart, onTy
         },
         allLength: 0,
     });
-    const [, setUpdate] = react.useState(0);
+    const [, setUpdate] = React.useState(0);
     const triggerUpdate = () => {
         setUpdate((prev) => prev + 1);
     };
@@ -761,7 +772,7 @@ const MarkdownCMDInner = react.forwardRef(({ interval = 30, onEnd, onStart, onTy
             manual: false,
         });
     };
-    react.useImperativeHandle(ref, () => ({
+    React.useImperativeHandle(ref, () => ({
         /**
          * 添加内容
          * @param content 内容 {string}
@@ -834,7 +845,7 @@ const MarkdownCMDInner = react.forwardRef(({ interval = 30, onEnd, onStart, onTy
 if (__DEV__) {
     MarkdownCMDInner.displayName = 'MarkdownCMD';
 }
-const MarkdownCMD = react.forwardRef((props, ref) => {
+const MarkdownCMD = React.forwardRef((props, ref) => {
     const { children = '', answerType = 'answer', isInnerRender, ...reset } = props;
     if (__DEV__) {
         if (!['thinking', 'answer'].includes(answerType)) {
@@ -844,9 +855,9 @@ const MarkdownCMD = react.forwardRef((props, ref) => {
             throw new Error('Markdown组件的子元素必须是一个字符串');
         }
     }
-    const contextValue = react.useMemo(() => ({ ...reset, answerType }), [reset, answerType]);
+    const contextValue = React.useMemo(() => ({ ...reset, answerType }), [reset, answerType]);
     // 分离主题相关的 props
-    const themeProps = react.useMemo(() => ({
+    const themeProps = React.useMemo(() => ({
         theme: props.theme || DEFAULT_THEME,
         math: props.math,
         codeBlock: props.codeBlock,
@@ -861,9 +872,9 @@ const MarkdownCMD = react.forwardRef((props, ref) => {
 });
 
 const MarkdownInner = ({ children: _children = '', answerType, markdownRef, ...rest }) => {
-    const cmdRef = react.useRef(null);
-    const prefixRef = react.useRef('');
-    const content = react.useMemo(() => {
+    const cmdRef = React.useRef(null);
+    const prefixRef = React.useRef('');
+    const content = React.useMemo(() => {
         if (typeof _children === 'string') {
             return _children;
         }
@@ -872,7 +883,7 @@ const MarkdownInner = ({ children: _children = '', answerType, markdownRef, ...r
         }
         return '';
     }, [_children]);
-    react.useEffect(() => {
+    React.useEffect(() => {
         if (prefixRef.current !== content) {
             let newContent = '';
             if (prefixRef.current === '') {
@@ -891,7 +902,7 @@ const MarkdownInner = ({ children: _children = '', answerType, markdownRef, ...r
             prefixRef.current = content;
         }
     }, [answerType, content]);
-    react.useImperativeHandle(markdownRef, () => ({
+    React.useImperativeHandle(markdownRef, () => ({
         stop: () => {
             cmdRef.current.stop();
         },
@@ -909,7 +920,7 @@ const MarkdownInner = ({ children: _children = '', answerType, markdownRef, ...r
     const { theme, math, plugins, codeBlock, ...baseProps } = rest;
     return jsxRuntime.jsx(MarkdownCMD, { ref: cmdRef, ...baseProps, isInnerRender: true });
 };
-const Markdown = react.forwardRef((props, ref) => {
+const Markdown = React.forwardRef((props, ref) => {
     const { children = '', answerType = 'answer', ...reset } = props;
     if (__DEV__) {
         if (!['thinking', 'answer'].includes(answerType)) {
@@ -919,9 +930,9 @@ const Markdown = react.forwardRef((props, ref) => {
             throw new Error('Markdown组件的子元素必须是一个字符串');
         }
     }
-    const contextValue = react.useMemo(() => ({ ...reset, answerType }), [reset, answerType]);
+    const contextValue = React.useMemo(() => ({ ...reset, answerType }), [reset, answerType]);
     // 分离主题相关的 props
-    const themeProps = react.useMemo(() => ({
+    const themeProps = React.useMemo(() => ({
         theme: props.theme || DEFAULT_THEME,
         math: props.math,
         codeBlock: props.codeBlock,
@@ -930,7 +941,168 @@ const Markdown = react.forwardRef((props, ref) => {
     }), [props.theme, props.math, props.codeBlock, props.plugins, props.answerType]);
     return (jsxRuntime.jsx(MarkdownProvider, { value: contextValue, children: jsxRuntime.jsx(MarkdownThemeProvider, { value: themeProps, children: jsxRuntime.jsx(MarkdownInner, { ...props, answerType: answerType, markdownRef: ref }) }) }));
 });
-var Markdown$1 = react.memo(Markdown);
+var Markdown$1 = React.memo(Markdown);
+
+const IconButton = ({ icon, style, className = '', onClick, ...restProps }) => {
+    return jsxRuntime.jsx(Button, { icon: icon, className: `ds-icon-button ${className}`, style: style, onClick: onClick, ...restProps });
+};
+
+const ToolTip = React.forwardRef(({ title, children, position = 'top', className = '', style, showArrow = true, delay = 200 }, ref) => {
+    const [isVisible, setIsVisible] = React.useState(false);
+    const [tooltipStyle, setTooltipStyle] = React.useState({});
+    const triggerRef = React.useRef(null);
+    const tooltipRef = React.useRef(null);
+    const timeoutRef = React.useRef(undefined);
+    // 转发ref到trigger元素
+    React.useImperativeHandle(ref, () => triggerRef.current, []);
+    const showTooltip = React.useCallback(() => {
+        timeoutRef.current = window.setTimeout(() => {
+            setIsVisible(true);
+        }, delay);
+    }, [delay]);
+    const hideTooltip = React.useCallback(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        setIsVisible(false);
+    }, []);
+    const updatePosition = React.useCallback(() => {
+        if (!triggerRef.current || !tooltipRef.current)
+            return;
+        const triggerRect = triggerRef.current.getBoundingClientRect();
+        const tooltipRect = tooltipRef.current.getBoundingClientRect();
+        let top = 0;
+        let left = 0;
+        switch (position) {
+            case 'top':
+                top = triggerRect.top - tooltipRect.height - 8;
+                left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+                break;
+            case 'bottom':
+                top = triggerRect.bottom + 8;
+                left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+                break;
+            case 'left':
+                top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+                left = triggerRect.left - tooltipRect.width - 8;
+                break;
+            case 'right':
+                top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+                left = triggerRect.right + 8;
+                break;
+        }
+        setTooltipStyle({
+            position: 'fixed',
+            top: `${top}px`,
+            left: `${left}px`,
+            zIndex: 1000,
+        });
+    }, [position]);
+    React.useEffect(() => {
+        if (isVisible) {
+            updatePosition();
+        }
+    }, [isVisible, position, updatePosition]);
+    React.useEffect(() => {
+        const handleScroll = () => {
+            if (isVisible) {
+                updatePosition();
+            }
+        };
+        const handleResize = () => {
+            if (isVisible) {
+                updatePosition();
+            }
+        };
+        window.addEventListener('scroll', handleScroll, true);
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('scroll', handleScroll, true);
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [isVisible, updatePosition]);
+    React.useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    const renderTooltip = () => {
+        if (!isVisible)
+            return null;
+        const tooltipElement = (jsxRuntime.jsxs("div", { ref: tooltipRef, className: classNames('ds-tooltip', `ds-tooltip--${position}`), style: tooltipStyle, children: [jsxRuntime.jsx("div", { className: "ds-tooltip__title", children: title }), showArrow && jsxRuntime.jsx("div", { className: classNames('ds-tooltip__arrow', `ds-tooltip__arrow--${position}`) })] }));
+        return reactDom.createPortal(tooltipElement, document.body);
+    };
+    // 合并原有的事件处理器
+    const handleMouseEnter = React.useCallback((e) => {
+        e.stopPropagation(); // 阻止事件冒泡
+        showTooltip();
+        // 只在子元素有onMouseEnter时才调用
+        const props = children.props;
+        if (props.onMouseEnter) {
+            props.onMouseEnter(e);
+        }
+    }, [children.props, showTooltip]);
+    const handleMouseLeave = React.useCallback((e) => {
+        e.stopPropagation(); // 阻止事件冒泡
+        hideTooltip();
+        // 只在子元素有onMouseLeave时才调用
+        const props = children.props;
+        if (props.onMouseLeave) {
+            props.onMouseLeave(e);
+        }
+    }, [children.props, hideTooltip]);
+    const handleFocus = React.useCallback((e) => {
+        e.stopPropagation(); // 阻止事件冒泡
+        showTooltip();
+        // 只在子元素有onFocus时才调用
+        const props = children.props;
+        if (props.onFocus) {
+            props.onFocus(e);
+        }
+    }, [children.props, showTooltip]);
+    const handleBlur = React.useCallback((e) => {
+        e.stopPropagation(); // 阻止事件冒泡
+        hideTooltip();
+        // 只在子元素有onBlur时才调用
+        const props = children.props;
+        if (props.onBlur) {
+            props.onBlur(e);
+        }
+    }, [children.props, hideTooltip]);
+    // 处理onClick事件
+    const handleClick = React.useCallback((e) => {
+        // 调用原有的onClick
+        const props = children.props;
+        if (props.onClick) {
+            props.onClick(e);
+        }
+    }, [children.props]);
+    // 检查组件是否支持ref
+    const isForwardRef = React.isValidElement(children) &&
+        typeof children.type === 'function' &&
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        children.type.$$typeof === Symbol.for('react.forward_ref');
+    // 如果组件不支持ref，使用包装div的方式
+    if (!isForwardRef && typeof children.type === 'function') {
+        return (jsxRuntime.jsxs("div", { ref: triggerRef, className: classNames('ds-tooltip-trigger', className), style: style, onMouseEnter: showTooltip, onMouseLeave: hideTooltip, onFocus: showTooltip, onBlur: hideTooltip, children: [children, renderTooltip()] }));
+    }
+    // 使用 cloneElement 直接给子元素添加事件监听器和ref
+    const enhancedChild = React.cloneElement(children, {
+        ref: triggerRef,
+        className: classNames(children.props.className, className),
+        style: { ...children.props.style, ...style },
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onClick: handleClick,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    });
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [enhancedChild, renderTooltip()] }));
+});
+ToolTip.displayName = 'ToolTip';
 
 /* eslint-disable react-refresh/only-export-components */
 
@@ -940,8 +1112,11 @@ exports.CodeBlockWrap = CodeBlockWrap;
 exports.ConfigProvider = ConfigProvider;
 exports.CopyButton = CopyButton;
 exports.DownloadButton = DownloadButton;
+exports.HighlightCode = HighlightCode;
+exports.IconButton = IconButton;
 exports.Markdown = Markdown$1;
 exports.MarkdownCMD = MarkdownCMD;
+exports.ToolTip = ToolTip;
 exports.default = Markdown$1;
 exports.useConfig = useConfig;
 exports.useLocale = useLocale;