@alifd/chat 0.3.39 → 0.3.40-beta.0

package/es/html-render/index.js

@@ -98,7 +98,7 @@ const HTMLRenderer = memo(function HTMLRenderer({ className, children, imagePrev
         })));
     };
     // 已替换
-    const parserOptions = {
+    const parserOptionsOld = {
         // @ts-ignore
         replace: domNode => {
             var _a, _b, _c, _d, _e, _f, _g;
@@ -192,6 +192,99 @@ const HTMLRenderer = memo(function HTMLRenderer({ className, children, imagePrev
     };
     const element = useMemo(() => {
         indexRef.current = 0;
+        // 已替换
+        const parserOptions = {
+            // @ts-ignore
+            replace: domNode => {
+                var _a, _b, _c, _d, _e, _f, _g;
+                // 处理文本节点
+                if ((domNode.type === 'text' || domNode.nodeType === 3) && typewriterEffect) {
+                    return processTextNode(domNode);
+                }
+                if (domNode instanceof Element && domNode.attribs) {
+                    const { name } = domNode;
+                    if (name === 'link-reference') {
+                        const element = (domToReact([domNode]));
+                        // link-reference 的子元素一定是 a 标签
+                        const aElement = (_a = element.props) === null || _a === void 0 ? void 0 : _a.children;
+                        // a 标签的子元素一定是 span 节点
+                        const spanElement = (_b = aElement === null || aElement === void 0 ? void 0 : aElement.props) === null || _b === void 0 ? void 0 : _b.children;
+                        const handleUrlClick = () => {
+                            var _a;
+                            if (!((_a = aElement === null || aElement === void 0 ? void 0 : aElement.props) === null || _a === void 0 ? void 0 : _a.href)) {
+                                return;
+                            }
+                            if (handleOpenLink) {
+                                handleOpenLink === null || handleOpenLink === void 0 ? void 0 : handleOpenLink(aElement.props.href);
+                            }
+                            else {
+                                defaultOpenLink(aElement.props.href);
+                            }
+                        };
+                        return (React.createElement(Balloon, { v2: true, align: "b", className: "link-reference-balloon", closable: false, offset: [0, -8], triggerType: ['hover'], trigger: React.createElement("span", { className: "link-reference-index", onClick: handleUrlClick }, (_c = spanElement === null || spanElement === void 0 ? void 0 : spanElement.props) === null || _c === void 0 ? void 0 : _c.children) },
+                            React.createElement("div", { className: "link-reference-content" },
+                                React.createElement("img", { className: "link-reference-source-icon", src: ((_d = element.props) === null || _d === void 0 ? void 0 : _d['data-source-icon']) || '' }),
+                                React.createElement("a", { className: "link-reference-title", onClick: handleUrlClick, title: ((_e = element.props) === null || _e === void 0 ? void 0 : _e['data-title']) || '' }, ((_f = element.props) === null || _f === void 0 ? void 0 : _f['data-title']) || ''))));
+                    }
+                    if (name === 'a') {
+                        const element = (domToReact([domNode]));
+                        const { props } = element;
+                        if (props.href && props.href.startsWith('message://')) {
+                            const msgValue = decodeURIComponent(props.href.slice(10));
+                            return React.cloneElement(element, {
+                                onClick: () => {
+                                    if (sendTextMessage) {
+                                        sendTextMessage(msgValue);
+                                        return;
+                                    }
+                                    defaultSendMessage();
+                                },
+                                href: undefined
+                            });
+                        }
+                        if (props.href && props.href.startsWith('copy://')) {
+                            const copyValue = decodeURIComponent(props.href.slice(7));
+                            return React.cloneElement(element, {
+                                onClick: () => {
+                                    if (copyText) {
+                                        copyText(copyValue);
+                                        return;
+                                    }
+                                    defaultCopyText(copyValue);
+                                },
+                                href: undefined
+                            });
+                        }
+                        // H5场景和钉协议场景都需要代理Click事件
+                        if (props.href && (/^dtmd:\/\/dingtalkclient|^dingtalk:\/\/dingtalkclient\/action\/jumprobot|^(https?:)?\/\/qr.dingtalk.com\/action\/jumprobot|^https:\/\/applink\.dingtalk\.com\/page\/link/.test(props.href) || isMobile)) {
+                            return React.cloneElement(element, {
+                                onClick: () => {
+                                    if (handleOpenLink) {
+                                        handleOpenLink === null || handleOpenLink === void 0 ? void 0 : handleOpenLink(props.href);
+                                        return;
+                                    }
+                                    defaultOpenLink(props.href);
+                                },
+                                href: undefined
+                            });
+                        }
+                        return React.cloneElement(element, {
+                            target: '_blank',
+                        });
+                    }
+                    if (name === 'img') {
+                        const element = (domToReact([domNode]));
+                        if (renderImage) {
+                            return renderImage(element.props);
+                        }
+                        // 换成统一的图片渲染
+                        return React.createElement(Img, Object.assign({}, element.props, { imageClassName: (_g = element.props) === null || _g === void 0 ? void 0 : _g.className, enablePreview: imagePreview, onImageClick: () => {
+                                handleImageClick === null || handleImageClick === void 0 ? void 0 : handleImageClick(element.props.src);
+                            } }));
+                    }
+                }
+            }
+        };
         return parse(sanitizeHtml(children || '', sanitizeHtmlOptions), parserOptions);
     }, [children, typewriterEffect]);
     return (React.createElement("div", { className: classnames(`markdown-body ${PREFIX_DEFAULT}html`, className, {

package/es/index.js

@@ -32,4 +32,4 @@ export { default as CheckboxGroup } from './checkbox-group';
 export { default as Select } from './select';
 export { default as Flip } from './flip';
 export { default as ToolStatus } from './tool-status';
-export const version = '0.3.39';
+export const version = '0.3.40-beta.0';

package/es/text/index.js

@@ -1,4 +1,4 @@
-import React, { useRef, useLayoutEffect, useCallback, useEffect, useState, useMemo, } from 'react';
+import React, { useRef, useLayoutEffect, useCallback, useEffect, useState, } from 'react';
 import { ConfigProvider } from '@alifd/next';
 import cs from 'classnames';
 import { PREFIX_DEFAULT, useControlable, useDebounce } from '../utils';
@@ -24,13 +24,19 @@ function useCollapseText({ enable, boxRef, textRef, maxLine, placeholder = '...'
         if (lineHeight === 'normal') {
             // 向容器里添加一段文本来测试行高
             const span = document.createElement('span');
-            span.style.whiteSpace = 'nowrap';
-            span.innerText = 'test';
-            span.style.visibility = 'hidden';
-            dom.appendChild(span);
-            const height = span.offsetHeight;
-            dom.removeChild(span);
-            return height;
+            try {
+                span.style.whiteSpace = 'nowrap';
+                span.innerText = 'test';
+                span.style.visibility = 'hidden';
+                dom.appendChild(span);
+                return span.offsetHeight;
+            }
+            finally {
+                // 确保无论是否发生错误，都会尝试移除子节点
+                if (span.parentNode === dom) {
+                    dom.removeChild(span);
+                }
+            }
         }
         return parseFloat(lineHeight);
     }, []);
@@ -183,16 +189,22 @@ function useEnsureBoxFullLine({ enableRef, boxRef, modifierRef, before, after, }
         ensureTriggerEnd(box, modifier);
     });
 }
+// 修改 useResize Hook
 function useResize(domRef, onResize, shouldTriggerRef) {
     const sizeRef = useRef();
     const debounceOnResize = useDebounce(onResize, 50);
-    const observer = useMemo(() => {
-        return new ResizeObserver(() => {
-            const dom = domRef.current;
-            if (!dom || !shouldTriggerRef.current) {
+    // observer 不再使用 useMemo，而是在 useEffect 中创建和销毁
+    useEffect(() => {
+        const dom = domRef.current;
+        if (!dom) {
+            return;
+        }
+        const observer = new ResizeObserver(() => {
+            // 回调函数逻辑不变
+            if (!domRef.current || !shouldTriggerRef.current) {
                 return;
             }
-            const { offsetWidth, offsetHeight } = dom;
+            const { offsetWidth, offsetHeight } = domRef.current;
             const lastSize = sizeRef.current;
             const newSize = { width: offsetWidth, height: offsetHeight };
             if (!lastSize ||
@@ -202,18 +214,51 @@ function useResize(domRef, onResize, shouldTriggerRef) {
             }
             sizeRef.current = newSize;
         });
-    }, []);
-    useEffect(() => {
-        const dom = domRef.current;
-        if (!dom) {
-            return;
-        }
         observer.observe(dom);
+        // 清理函数现在负责销毁 observer 实例
         return () => {
-            observer.unobserve(dom);
+            // unobserve 不是必须的，因为 disconnect 会停止所有观察
+            observer.disconnect();
         };
-    }, [domRef.current, observer]);
+    }, [domRef, debounceOnResize, shouldTriggerRef]); // 依赖项也需要更新
 }
+// function useResizeOld(
+//     domRef: RefObject<HTMLElement>,
+//     onResize: () => void,
+//     shouldTriggerRef: MutableRefObject<boolean>
+// ) {
+//     const sizeRef = useRef<{ width: number; height: number }>();
+//     const debounceOnResize = useDebounce(onResize, 50);
+//     const observer = useMemo(() => {
+//         return new ResizeObserver(() => {
+//             const dom = domRef.current;
+//             if (!dom || !shouldTriggerRef.current) {
+//                 return;
+//             }
+//             const { offsetWidth, offsetHeight } = dom;
+//             const lastSize = sizeRef.current;
+//             const newSize = { width: offsetWidth, height: offsetHeight };
+//             if (
+//                 !lastSize ||
+//                 newSize.width !== lastSize.width ||
+//                 newSize.height !== lastSize.height
+//             ) {
+//                 debounceOnResize();
+//             }
+//             sizeRef.current = newSize;
+//         });
+//     }, []);
+//     useEffect(() => {
+//         const dom = domRef.current;
+//         if (!dom) {
+//             return;
+//         }
+//         observer?.observe(dom);
+//         return () => {
+//             observer?.unobserve(dom);
+//         };
+//     }, [domRef.current, observer]);
+// }
 function TextComp(props) {
     const { className, maxLine, renderTrigger, triggerType = 'click', locale, showTrigger = true, children, } = props;
     const collapsable = typeof maxLine === 'number' && maxLine > 0;

package/lib/html-render/index.js

@@ -101,7 +101,7 @@ const HTMLRenderer = (0, react_1.memo)(function HTMLRenderer({ className, childr
         })));
     };
     // 已替换
-    const parserOptions = {
+    const parserOptionsOld = {
         // @ts-ignore
         replace: domNode => {
             var _a, _b, _c, _d, _e, _f, _g;
@@ -195,6 +195,99 @@ const HTMLRenderer = (0, react_1.memo)(function HTMLRenderer({ className, childr
     };
     const element = (0, react_1.useMemo)(() => {
         indexRef.current = 0;
+        // 已替换
+        const parserOptions = {
+            // @ts-ignore
+            replace: domNode => {
+                var _a, _b, _c, _d, _e, _f, _g;
+                // 处理文本节点
+                if ((domNode.type === 'text' || domNode.nodeType === 3) && typewriterEffect) {
+                    return processTextNode(domNode);
+                }
+                if (domNode instanceof html_react_parser_1.Element && domNode.attribs) {
+                    const { name } = domNode;
+                    if (name === 'link-reference') {
+                        const element = ((0, html_react_parser_1.domToReact)([domNode]));
+                        // link-reference 的子元素一定是 a 标签
+                        const aElement = (_a = element.props) === null || _a === void 0 ? void 0 : _a.children;
+                        // a 标签的子元素一定是 span 节点
+                        const spanElement = (_b = aElement === null || aElement === void 0 ? void 0 : aElement.props) === null || _b === void 0 ? void 0 : _b.children;
+                        const handleUrlClick = () => {
+                            var _a;
+                            if (!((_a = aElement === null || aElement === void 0 ? void 0 : aElement.props) === null || _a === void 0 ? void 0 : _a.href)) {
+                                return;
+                            }
+                            if (handleOpenLink) {
+                                handleOpenLink === null || handleOpenLink === void 0 ? void 0 : handleOpenLink(aElement.props.href);
+                            }
+                            else {
+                                defaultOpenLink(aElement.props.href);
+                            }
+                        };
+                        return (react_1.default.createElement(balloon_1.default, { v2: true, align: "b", className: "link-reference-balloon", closable: false, offset: [0, -8], triggerType: ['hover'], trigger: react_1.default.createElement("span", { className: "link-reference-index", onClick: handleUrlClick }, (_c = spanElement === null || spanElement === void 0 ? void 0 : spanElement.props) === null || _c === void 0 ? void 0 : _c.children) },
+                            react_1.default.createElement("div", { className: "link-reference-content" },
+                                react_1.default.createElement("img", { className: "link-reference-source-icon", src: ((_d = element.props) === null || _d === void 0 ? void 0 : _d['data-source-icon']) || '' }),
+                                react_1.default.createElement("a", { className: "link-reference-title", onClick: handleUrlClick, title: ((_e = element.props) === null || _e === void 0 ? void 0 : _e['data-title']) || '' }, ((_f = element.props) === null || _f === void 0 ? void 0 : _f['data-title']) || ''))));
+                    }
+                    if (name === 'a') {
+                        const element = ((0, html_react_parser_1.domToReact)([domNode]));
+                        const { props } = element;
+                        if (props.href && props.href.startsWith('message://')) {
+                            const msgValue = decodeURIComponent(props.href.slice(10));
+                            return react_1.default.cloneElement(element, {
+                                onClick: () => {
+                                    if (sendTextMessage) {
+                                        sendTextMessage(msgValue);
+                                        return;
+                                    }
+                                    defaultSendMessage();
+                                },
+                                href: undefined
+                            });
+                        }
+                        if (props.href && props.href.startsWith('copy://')) {
+                            const copyValue = decodeURIComponent(props.href.slice(7));
+                            return react_1.default.cloneElement(element, {
+                                onClick: () => {
+                                    if (copyText) {
+                                        copyText(copyValue);
+                                        return;
+                                    }
+                                    defaultCopyText(copyValue);
+                                },
+                                href: undefined
+                            });
+                        }
+                        // H5场景和钉协议场景都需要代理Click事件
+                        if (props.href && (/^dtmd:\/\/dingtalkclient|^dingtalk:\/\/dingtalkclient\/action\/jumprobot|^(https?:)?\/\/qr.dingtalk.com\/action\/jumprobot|^https:\/\/applink\.dingtalk\.com\/page\/link/.test(props.href) || isMobile)) {
+                            return react_1.default.cloneElement(element, {
+                                onClick: () => {
+                                    if (handleOpenLink) {
+                                        handleOpenLink === null || handleOpenLink === void 0 ? void 0 : handleOpenLink(props.href);
+                                        return;
+                                    }
+                                    defaultOpenLink(props.href);
+                                },
+                                href: undefined
+                            });
+                        }
+                        return react_1.default.cloneElement(element, {
+                            target: '_blank',
+                        });
+                    }
+                    if (name === 'img') {
+                        const element = ((0, html_react_parser_1.domToReact)([domNode]));
+                        if (renderImage) {
+                            return renderImage(element.props);
+                        }
+                        // 换成统一的图片渲染
+                        return react_1.default.createElement(img_1.default, Object.assign({}, element.props, { imageClassName: (_g = element.props) === null || _g === void 0 ? void 0 : _g.className, enablePreview: imagePreview, onImageClick: () => {
+                                handleImageClick === null || handleImageClick === void 0 ? void 0 : handleImageClick(element.props.src);
+                            } }));
+                    }
+                }
+            }
+        };
         return (0, html_react_parser_1.default)((0, sanitize_html_1.default)(children || '', sanitizeHtmlOptions), parserOptions);
     }, [children, typewriterEffect]);
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)(`markdown-body ${utils_1.PREFIX_DEFAULT}html`, className, {

package/lib/index.js

@@ -70,4 +70,4 @@ var flip_1 = require("./flip");
 Object.defineProperty(exports, "Flip", { enumerable: true, get: function () { return tslib_1.__importDefault(flip_1).default; } });
 var tool_status_1 = require("./tool-status");
 Object.defineProperty(exports, "ToolStatus", { enumerable: true, get: function () { return tslib_1.__importDefault(tool_status_1).default; } });
-exports.version = '0.3.39';
+exports.version = '0.3.40-beta.0';

package/lib/text/index.js

@@ -27,13 +27,19 @@ function useCollapseText({ enable, boxRef, textRef, maxLine, placeholder = '...'
         if (lineHeight === 'normal') {
             // 向容器里添加一段文本来测试行高
             const span = document.createElement('span');
-            span.style.whiteSpace = 'nowrap';
-            span.innerText = 'test';
-            span.style.visibility = 'hidden';
-            dom.appendChild(span);
-            const height = span.offsetHeight;
-            dom.removeChild(span);
-            return height;
+            try {
+                span.style.whiteSpace = 'nowrap';
+                span.innerText = 'test';
+                span.style.visibility = 'hidden';
+                dom.appendChild(span);
+                return span.offsetHeight;
+            }
+            finally {
+                // 确保无论是否发生错误，都会尝试移除子节点
+                if (span.parentNode === dom) {
+                    dom.removeChild(span);
+                }
+            }
         }
         return parseFloat(lineHeight);
     }, []);
@@ -186,16 +192,22 @@ function useEnsureBoxFullLine({ enableRef, boxRef, modifierRef, before, after, }
         ensureTriggerEnd(box, modifier);
     });
 }
+// 修改 useResize Hook
 function useResize(domRef, onResize, shouldTriggerRef) {
     const sizeRef = (0, react_1.useRef)();
     const debounceOnResize = (0, utils_1.useDebounce)(onResize, 50);
-    const observer = (0, react_1.useMemo)(() => {
-        return new ResizeObserver(() => {
-            const dom = domRef.current;
-            if (!dom || !shouldTriggerRef.current) {
+    // observer 不再使用 useMemo，而是在 useEffect 中创建和销毁
+    (0, react_1.useEffect)(() => {
+        const dom = domRef.current;
+        if (!dom) {
+            return;
+        }
+        const observer = new ResizeObserver(() => {
+            // 回调函数逻辑不变
+            if (!domRef.current || !shouldTriggerRef.current) {
                 return;
             }
-            const { offsetWidth, offsetHeight } = dom;
+            const { offsetWidth, offsetHeight } = domRef.current;
             const lastSize = sizeRef.current;
             const newSize = { width: offsetWidth, height: offsetHeight };
             if (!lastSize ||
@@ -205,18 +217,51 @@ function useResize(domRef, onResize, shouldTriggerRef) {
             }
             sizeRef.current = newSize;
         });
-    }, []);
-    (0, react_1.useEffect)(() => {
-        const dom = domRef.current;
-        if (!dom) {
-            return;
-        }
         observer.observe(dom);
+        // 清理函数现在负责销毁 observer 实例
         return () => {
-            observer.unobserve(dom);
+            // unobserve 不是必须的，因为 disconnect 会停止所有观察
+            observer.disconnect();
         };
-    }, [domRef.current, observer]);
+    }, [domRef, debounceOnResize, shouldTriggerRef]); // 依赖项也需要更新
 }
+// function useResizeOld(
+//     domRef: RefObject<HTMLElement>,
+//     onResize: () => void,
+//     shouldTriggerRef: MutableRefObject<boolean>
+// ) {
+//     const sizeRef = useRef<{ width: number; height: number }>();
+//     const debounceOnResize = useDebounce(onResize, 50);
+//     const observer = useMemo(() => {
+//         return new ResizeObserver(() => {
+//             const dom = domRef.current;
+//             if (!dom || !shouldTriggerRef.current) {
+//                 return;
+//             }
+//             const { offsetWidth, offsetHeight } = dom;
+//             const lastSize = sizeRef.current;
+//             const newSize = { width: offsetWidth, height: offsetHeight };
+//             if (
+//                 !lastSize ||
+//                 newSize.width !== lastSize.width ||
+//                 newSize.height !== lastSize.height
+//             ) {
+//                 debounceOnResize();
+//             }
+//             sizeRef.current = newSize;
+//         });
+//     }, []);
+//     useEffect(() => {
+//         const dom = domRef.current;
+//         if (!dom) {
+//             return;
+//         }
+//         observer?.observe(dom);
+//         return () => {
+//             observer?.unobserve(dom);
+//         };
+//     }, [domRef.current, observer]);
+// }
 function TextComp(props) {
     const { className, maxLine, renderTrigger, triggerType = 'click', locale, showTrigger = true, children, } = props;
     const collapsable = typeof maxLine === 'number' && maxLine > 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alifd/chat",
-  "version": "0.3.39",
+  "version": "0.3.40-beta.0",
   "description": "A configurable component library for chat built on React.",
   "main": "lib/index.js",
   "module": "es/index.js",