@ant-design/agentic-ui 2.27.6 → 2.27.8

package/dist/MarkdownEditor/editor/elements/Image/index.js

@@ -247,92 +247,62 @@ function _ts_generator(thisArg, body) {
         };
     }
 }
-import { BlockOutlined, DeleteFilled, ExclamationCircleOutlined, LoadingOutlined } from "@ant-design/icons";
+import { BlockOutlined, DeleteFilled, LoadingOutlined } from "@ant-design/icons";
 import { Image, Modal, Popover, Skeleton, Space } from "antd";
-import React, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import React, { useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useRefFunction } from "../../../../Hooks/useRefFunction";
 import { useDebounceFn } from "@ant-design/pro-components";
-import { SquareArrowUpRight } from "@sofa-design/icons";
 import { Rnd } from "react-rnd";
 import { Path, Transforms } from "slate";
 import { ActionIconBox } from "../../../../Components/ActionIconBox";
 import { I18nContext } from "../../../../I18n";
 import { useSelStatus } from "../../../hooks/editor";
+import { MediaErrorLink } from "../../components/MediaErrorLink";
 import { useEditorStore } from "../../store";
 import { useGetSetState } from "../../utils";
 import { getMediaType } from "../../utils/dom";
-/**
- * 图片组件，带有错误处理功能
- * 如果图片加载失败，将显示可点击的链接
- *
- * @component
- * @param props - 图片属性，继承自 ImageProps 接口
- * @param props.src - 图片的源地址
- * @returns 返回一个图片组件，如果加载失败则返回一个链接
- *
- * @example
- * ```tsx
- * <ImageAndError src="https://example.com/image.jpg" alt="示例图片" />
- * ```
- */ export var ImageAndError = function(props) {
+export var ReadonlyImage = function(param) {
+    var src = param.src, alt = param.alt, width = param.width, height = param.height, crossOrigin = param.crossOrigin;
     var _editorProps_image;
     var editorProps = useEditorStore().editorProps;
     var _React_useState = _sliced_to_array(React.useState(false), 2), error = _React_useState[0], setError = _React_useState[1];
-    console.log(editorProps);
     // 图片加载失败时显示为链接
     if (error) {
-        return /*#__PURE__*/ React.createElement("span", {
-            onClick: function(e) {
-                var _editorProps_linkConfig, _editorProps_linkConfig1;
-                e.stopPropagation();
-                e.preventDefault();
-                if ((_editorProps_linkConfig = editorProps.linkConfig) === null || _editorProps_linkConfig === void 0 ? void 0 : _editorProps_linkConfig.onClick) {
-                    if (editorProps.linkConfig.onClick(props.src || '') === false) {
-                        return;
-                    }
-                }
-                window.open(props.src, (editorProps === null || editorProps === void 0 ? void 0 : (_editorProps_linkConfig1 = editorProps.linkConfig) === null || _editorProps_linkConfig1 === void 0 ? void 0 : _editorProps_linkConfig1.openInNewTab) ? '_blank' : '_self');
-            },
-            style: {
-                color: '#1890ff',
-                textDecoration: 'underline',
-                wordBreak: 'break-all',
-                display: 'inline-flex',
-                alignItems: 'center',
-                gap: '8px',
-                maxWidth: '100%',
-                padding: '8px 12px',
-                border: '1px dashed #d9d9d9',
-                borderRadius: '6px',
-                backgroundColor: '#fafafa'
-            }
-        }, /*#__PURE__*/ React.createElement(ExclamationCircleOutlined, {
-            style: {
-                color: '#faad14'
-            }
-        }), props.alt || props.src || '图片链接', /*#__PURE__*/ React.createElement(SquareArrowUpRight, null));
+        return /*#__PURE__*/ React.createElement(MediaErrorLink, {
+            url: src,
+            displayText: alt || src || '图片链接'
+        });
     }
+    var imageProps = {
+        src: src,
+        alt: alt || 'image',
+        width: width ? Number(width) || width : 400,
+        height: height,
+        preview: {
+            getContainer: function() {
+                return document.body;
+            }
+        },
+        referrerPolicy: 'no-referrer',
+        crossOrigin: crossOrigin,
+        draggable: false,
+        style: {
+            maxWidth: '100%',
+            height: 'auto',
+            display: 'block'
+        },
+        onError: function() {
+            setError(true);
+        }
+    };
     if (editorProps === null || editorProps === void 0 ? void 0 : (_editorProps_image = editorProps.image) === null || _editorProps_image === void 0 ? void 0 : _editorProps_image.render) {
         var _editorProps_image_render, _editorProps_image1;
-        return (_editorProps_image_render = (_editorProps_image1 = editorProps.image).render) === null || _editorProps_image_render === void 0 ? void 0 : _editorProps_image_render.call(_editorProps_image1, _object_spread_props(_object_spread({}, props), {
-            onError: function() {
-                setError(true);
-            }
-        }), /*#__PURE__*/ React.createElement(Image, _object_spread_props(_object_spread({}, props), {
-            width: Number(props.width) || props.width || 400,
-            onError: function() {
-                setError(true);
-            }
-        })));
+        return (_editorProps_image_render = (_editorProps_image1 = editorProps.image).render) === null || _editorProps_image_render === void 0 ? void 0 : _editorProps_image_render.call(_editorProps_image1, imageProps, /*#__PURE__*/ React.createElement(Image, imageProps));
     }
     return /*#__PURE__*/ React.createElement("div", {
         "data-testid": "image-container",
         "data-be": "image-container"
-    }, /*#__PURE__*/ React.createElement(Image, _object_spread_props(_object_spread({}, props), {
-        width: Number(props.width) || props.width || 400,
-        onError: function() {
-            setError(true);
-        }
-    })));
+    }, /*#__PURE__*/ React.createElement(Image, imageProps));
 };
 /**
  * 修复图片大小的问题
@@ -345,7 +315,6 @@ import { getMediaType } from "../../utils/dom";
         "selected",
         "defaultSize"
     ]);
-    var editorProps = useEditorStore().editorProps;
     var _React_useState = _sliced_to_array(React.useState(true), 2), loading = _React_useState[0], setLoading = _React_useState[1];
     var _React_useState1 = _sliced_to_array(React.useState(false), 2), error = _React_useState1[0], setError = _React_useState1[1];
     var radio = useRef(1);
@@ -366,38 +335,14 @@ import { getMediaType } from "../../utils/dom";
     }, 160);
     // 如果图片加载失败，显示为链接
     if (error) {
-        return /*#__PURE__*/ React.createElement("span", {
-            onClick: function(e) {
-                var _editorProps_linkConfig, _editorProps_linkConfig1;
-                e.stopPropagation();
-                e.preventDefault();
-                if ((_editorProps_linkConfig = editorProps.linkConfig) === null || _editorProps_linkConfig === void 0 ? void 0 : _editorProps_linkConfig.onClick) {
-                    if (editorProps.linkConfig.onClick(props.src || '') === false) {
-                        return;
-                    }
-                }
-                window.open(props.src, (editorProps === null || editorProps === void 0 ? void 0 : (_editorProps_linkConfig1 = editorProps.linkConfig) === null || _editorProps_linkConfig1 === void 0 ? void 0 : _editorProps_linkConfig1.openInNewTab) ? '_blank' : '_self');
-            },
+        return /*#__PURE__*/ React.createElement(MediaErrorLink, {
+            url: props.src,
+            displayText: props.alt || props.src || '图片链接',
             style: {
-                color: '#1890ff',
-                textDecoration: 'underline',
-                wordBreak: 'break-all',
-                display: 'inline-flex',
-                alignItems: 'center',
-                gap: '8px',
-                maxWidth: '100%',
-                padding: '8px 12px',
-                border: '1px dashed #d9d9d9',
-                borderRadius: '6px',
-                backgroundColor: '#fafafa',
                 fontSize: '13px',
                 lineHeight: '1.5'
             }
-        }, /*#__PURE__*/ React.createElement(ExclamationCircleOutlined, {
-            style: {
-                color: '#faad14'
-            }
-        }), props.alt || props.src, /*#__PURE__*/ React.createElement(SquareArrowUpRight, null));
+        });
     }
     return /*#__PURE__*/ React.createElement("div", {
         "data-testid": "resize-image-container",
@@ -500,7 +445,7 @@ export function EditorImage(param) {
     var _state;
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     var _useSelStatus = _sliced_to_array(useSelStatus(element), 2), _ = _useSelStatus[0], path = _useSelStatus[1];
-    var _useEditorStore = useEditorStore(), markdownEditorRef = _useEditorStore.markdownEditorRef, readonly = _useEditorStore.readonly, editorProps = _useEditorStore.editorProps;
+    var _useEditorStore = useEditorStore(), markdownEditorRef = _useEditorStore.markdownEditorRef, readonly = _useEditorStore.readonly;
     var htmlRef = React.useRef(null);
     var _useState = _sliced_to_array(useState(false), 2), showAsText = _useState[0], setShowAsText = _useState[1];
     var _useGetSetState = _sliced_to_array(useGetSetState({
@@ -511,16 +456,14 @@ export function EditorImage(param) {
         selected: false,
         type: getMediaType(element === null || element === void 0 ? void 0 : element.url, element.alt)
     }), 2), state = _useGetSetState[0], setState = _useGetSetState[1];
-    var updateElement = useCallback(function(attr) {
-        if (!markdownEditorRef.current) return;
+    var updateElement = useRefFunction(function(attr) {
+        if (!(markdownEditorRef === null || markdownEditorRef === void 0 ? void 0 : markdownEditorRef.current)) return;
         Transforms.setNodes(markdownEditorRef.current, attr, {
             at: path
         });
-    }, [
-        path
-    ]);
+    });
     var locale = useContext(I18nContext).locale;
-    var initial = useCallback(/*#__PURE__*/ _async_to_generator(function() {
+    var initial = useRefFunction(/*#__PURE__*/ _async_to_generator(function() {
         var type, realUrl, img;
         return _ts_generator(this, function(_state) {
             type = getMediaType(element === null || element === void 0 ? void 0 : element.url, element.alt);
@@ -562,9 +505,7 @@ export function EditorImage(param) {
                 2
             ];
         });
-    }), [
-        element
-    ]);
+    }));
     useLayoutEffect(function() {
         initial();
     }, [
@@ -609,41 +550,16 @@ export function EditorImage(param) {
         }
         // 如果图片加载失败，显示为链接
         if (!state().loadSuccess) {
-            var _state2;
-            return /*#__PURE__*/ React.createElement("span", {
+            var _state2, _state3;
+            return /*#__PURE__*/ React.createElement(MediaErrorLink, {
+                url: (_state2 = state()) === null || _state2 === void 0 ? void 0 : _state2.url,
+                fallbackUrl: element === null || element === void 0 ? void 0 : element.url,
+                displayText: (element === null || element === void 0 ? void 0 : element.alt) || ((_state3 = state()) === null || _state3 === void 0 ? void 0 : _state3.url) || (element === null || element === void 0 ? void 0 : element.url) || '图片链接',
                 style: {
-                    color: '#1890ff',
-                    textDecoration: 'underline',
-                    wordBreak: 'break-all',
-                    display: 'inline-flex',
-                    alignItems: 'center',
-                    gap: '8px',
-                    maxWidth: '100%',
-                    padding: '8px 12px',
-                    border: '1px dashed #d9d9d9',
-                    borderRadius: '6px',
-                    backgroundColor: '#fafafa',
                     fontSize: '13px',
                     lineHeight: '1.5'
-                },
-                onClick: function(e) {
-                    var _state, _editorProps_linkConfig, _state1, _editorProps_linkConfig1;
-                    if (!(((_state = state()) === null || _state === void 0 ? void 0 : _state.url) || (element === null || element === void 0 ? void 0 : element.url))) return;
-                    e.stopPropagation();
-                    e.preventDefault();
-                    if ((_editorProps_linkConfig = editorProps.linkConfig) === null || _editorProps_linkConfig === void 0 ? void 0 : _editorProps_linkConfig.onClick) {
-                        var _state2;
-                        if (editorProps.linkConfig.onClick(((_state2 = state()) === null || _state2 === void 0 ? void 0 : _state2.url) || (element === null || element === void 0 ? void 0 : element.url) || '') === false) {
-                            return;
-                        }
-                    }
-                    window.open(((_state1 = state()) === null || _state1 === void 0 ? void 0 : _state1.url) || (element === null || element === void 0 ? void 0 : element.url), (editorProps === null || editorProps === void 0 ? void 0 : (_editorProps_linkConfig1 = editorProps.linkConfig) === null || _editorProps_linkConfig1 === void 0 ? void 0 : _editorProps_linkConfig1.openInNewTab) ? '_blank' : '_self');
-                }
-            }, /*#__PURE__*/ React.createElement(ExclamationCircleOutlined, {
-                style: {
-                    color: '#faad14'
                 }
-            }), (element === null || element === void 0 ? void 0 : element.alt) || ((_state2 = state()) === null || _state2 === void 0 ? void 0 : _state2.url) || (element === null || element === void 0 ? void 0 : element.url) || '图片链接', /*#__PURE__*/ React.createElement(SquareArrowUpRight, null));
+            });
         }
         return !readonly ? /*#__PURE__*/ React.createElement(ResizeImage, {
             defaultSize: {
@@ -658,6 +574,7 @@ export function EditorImage(param) {
                 });
             },
             onResizeStop: function(size) {
+                if (!(markdownEditorRef === null || markdownEditorRef === void 0 ? void 0 : markdownEditorRef.current)) return;
                 Transforms.setNodes(markdownEditorRef.current, size, {
                     at: path
                 });
@@ -665,21 +582,9 @@ export function EditorImage(param) {
                     selected: false
                 });
             }
-        }) : /*#__PURE__*/ React.createElement(ImageAndError, {
+        }) : /*#__PURE__*/ React.createElement(ReadonlyImage, {
             src: ((_state1 = state()) === null || _state1 === void 0 ? void 0 : _state1.url) || (element === null || element === void 0 ? void 0 : element.url),
-            alt: 'image',
-            preview: {
-                getContainer: function() {
-                    return document.body;
-                }
-            },
-            referrerPolicy: 'no-referrer',
-            draggable: false,
-            style: {
-                maxWidth: '100%',
-                height: 'auto',
-                display: 'block'
-            },
+            alt: (element === null || element === void 0 ? void 0 : element.alt) || 'image',
             width: element.width,
             height: element.height
         });
@@ -737,6 +642,7 @@ export function EditorImage(param) {
                     title: (locale === null || locale === void 0 ? void 0 : locale.deleteMedia) || '删除媒体',
                     content: (locale === null || locale === void 0 ? void 0 : locale.confirmDelete) || '确定删除该媒体吗？',
                     onOk: function() {
+                        if (!(markdownEditorRef === null || markdownEditorRef === void 0 ? void 0 : markdownEditorRef.current)) return;
                         Transforms.removeNodes(markdownEditorRef.current, {
                             at: path
                         });
@@ -747,6 +653,7 @@ export function EditorImage(param) {
             title: (element === null || element === void 0 ? void 0 : element.block) ? locale === null || locale === void 0 ? void 0 : locale.blockImage : locale === null || locale === void 0 ? void 0 : locale.inlineImage,
             onClick: function(e) {
                 e.stopPropagation();
+                if (!(markdownEditorRef === null || markdownEditorRef === void 0 ? void 0 : markdownEditorRef.current)) return;
                 Transforms.setNodes(markdownEditorRef.current, {
                     block: !element.block
                 }, {

package/dist/MarkdownEditor/editor/elements/{Media.d.ts → Media/index.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ElementProps, MediaNode } from '../../el';
+import { ElementProps, MediaNode } from '../../../el';
 /**
  * 可调整大小的图片组件的属性接口
  */

package/dist/MarkdownEditor/editor/elements/{Media.js → Media/index.js}

@@ -223,21 +223,22 @@ function _ts_generator(thisArg, body) {
         };
     }
 }
-import { DeleteFilled, ExclamationCircleOutlined, EyeOutlined, LoadingOutlined } from "@ant-design/icons";
+import { DeleteFilled, EyeOutlined, LoadingOutlined } from "@ant-design/icons";
 import { Modal, Popover, Skeleton } from "antd";
-import React, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import React, { useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useRefFunction } from "../../../../Hooks/useRefFunction";
 import { useDebounceFn } from "@ant-design/pro-components";
-import { SquareArrowUpRight } from "@sofa-design/icons";
 import { Rnd } from "react-rnd";
 import { Transforms } from "slate";
-import { ActionIconBox } from "../../../Components/ActionIconBox";
-import { I18nContext } from "../../../I18n";
-import { useSelStatus } from "../../hooks/editor";
-import { AvatarList } from "../components/ContributorAvatar";
-import { useEditorStore } from "../store";
-import { useGetSetState } from "../utils";
-import { getMediaType } from "../utils/dom";
-import { ImageAndError } from "./Image";
+import { ActionIconBox } from "../../../../Components/ActionIconBox";
+import { I18nContext } from "../../../../I18n";
+import { useSelStatus } from "../../../hooks/editor";
+import { AvatarList } from "../../components/ContributorAvatar";
+import { MediaErrorLink } from "../../components/MediaErrorLink";
+import { useEditorStore } from "../../store";
+import { useGetSetState } from "../../utils";
+import { getMediaType } from "../../utils/dom";
+import { ReadonlyImage } from "../Image";
 /**
  * 可调整大小的图片组件
  *
@@ -383,12 +384,10 @@ export function Media(param) {
     var _state, _state1;
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     var _useSelStatus = _sliced_to_array(useSelStatus(element), 2), _ = _useSelStatus[0], path = _useSelStatus[1];
-    var editorProps = useEditorStore().editorProps;
     var _useEditorStore = useEditorStore(), markdownEditorRef = _useEditorStore.markdownEditorRef, readonly = _useEditorStore.readonly;
     var locale = useContext(I18nContext).locale;
     var htmlRef = React.useRef(null);
     var _useState = _sliced_to_array(useState(false), 2), showAsText = _useState[0], setShowAsText = _useState[1];
-    console.log(editorProps);
     var _useGetSetState = _sliced_to_array(useGetSetState({
         height: element.height,
         dragging: false,
@@ -397,14 +396,12 @@ export function Media(param) {
         selected: false,
         type: getMediaType(element === null || element === void 0 ? void 0 : element.url, element.alt)
     }), 2), state = _useGetSetState[0], setState = _useGetSetState[1];
-    var updateElement = useCallback(function(attr) {
+    var updateElement = useRefFunction(function(attr) {
         if (!markdownEditorRef.current) return;
         Transforms.setNodes(markdownEditorRef.current, attr, {
             at: path
         });
-    }, [
-        path
-    ]);
+    });
     // 如果 finished 为 false，设置 5 秒超时，超时后显示为文本
     useEffect(function() {
         if (element.finished === false) {
@@ -421,7 +418,7 @@ export function Media(param) {
     }, [
         element.finished
     ]);
-    var initial = useCallback(/*#__PURE__*/ _async_to_generator(function() {
+    var initial = useRefFunction(/*#__PURE__*/ _async_to_generator(function() {
         var type, finalType, realUrl, img, video, audio;
         return _ts_generator(this, function(_state) {
             type = getMediaType(element === null || element === void 0 ? void 0 : element.url, element.alt);
@@ -494,9 +491,7 @@ export function Media(param) {
                 2
             ];
         });
-    }), [
-        element
-    ]);
+    }));
     useLayoutEffect(function() {
         initial();
     }, [
@@ -544,24 +539,12 @@ export function Media(param) {
                     selected: false
                 });
             }
-        }) : /*#__PURE__*/ React.createElement(ImageAndError, {
+        }) : /*#__PURE__*/ React.createElement(ReadonlyImage, {
             src: ((_state1 = state()) === null || _state1 === void 0 ? void 0 : _state1.url) || (element === null || element === void 0 ? void 0 : element.url),
-            alt: 'image',
-            preview: {
-                getContainer: function() {
-                    return document.body;
-                }
-            },
-            referrerPolicy: 'no-referrer',
-            crossOrigin: 'anonymous',
-            draggable: false,
-            style: {
-                maxWidth: '100%',
-                height: 'auto',
-                display: 'block'
-            },
+            alt: (element === null || element === void 0 ? void 0 : element.alt) || 'image',
             width: element.width,
-            height: element.height
+            height: element.height,
+            crossOrigin: "anonymous"
         });
     }, [
         state().type,
@@ -597,39 +580,12 @@ export function Media(param) {
                 });
             }
             if (!state().loadSuccess) {
-                var _state1;
-                return /*#__PURE__*/ React.createElement("span", {
-                    onClick: function(e) {
-                        var _state, _editorProps_linkConfig, _state1, _editorProps_linkConfig1;
-                        if (!((_state = state()) === null || _state === void 0 ? void 0 : _state.url)) return;
-                        e.stopPropagation();
-                        e.preventDefault();
-                        if ((_editorProps_linkConfig = editorProps.linkConfig) === null || _editorProps_linkConfig === void 0 ? void 0 : _editorProps_linkConfig.onClick) {
-                            var _state2;
-                            if (editorProps.linkConfig.onClick(((_state2 = state()) === null || _state2 === void 0 ? void 0 : _state2.url) || '') === false) {
-                                return;
-                            }
-                        }
-                        window.open((_state1 = state()) === null || _state1 === void 0 ? void 0 : _state1.url, (editorProps === null || editorProps === void 0 ? void 0 : (_editorProps_linkConfig1 = editorProps.linkConfig) === null || _editorProps_linkConfig1 === void 0 ? void 0 : _editorProps_linkConfig1.openInNewTab) ? '_blank' : '_self');
-                    },
-                    style: {
-                        color: '#1890ff',
-                        textDecoration: 'underline',
-                        wordBreak: 'break-all',
-                        display: 'inline-flex',
-                        alignItems: 'center',
-                        gap: '8px',
-                        maxWidth: '100%',
-                        padding: '8px 12px',
-                        border: '1px dashed #d9d9d9',
-                        borderRadius: '6px',
-                        backgroundColor: '#fafafa'
-                    }
-                }, /*#__PURE__*/ React.createElement(ExclamationCircleOutlined, {
-                    style: {
-                        color: '#faad14'
-                    }
-                }), element.alt || ((_state1 = state()) === null || _state1 === void 0 ? void 0 : _state1.url) || (element === null || element === void 0 ? void 0 : element.url) || '视频链接', /*#__PURE__*/ React.createElement(SquareArrowUpRight, null));
+                var _state1, _state2;
+                return /*#__PURE__*/ React.createElement(MediaErrorLink, {
+                    url: (_state1 = state()) === null || _state1 === void 0 ? void 0 : _state1.url,
+                    fallbackUrl: element === null || element === void 0 ? void 0 : element.url,
+                    displayText: element.alt || ((_state2 = state()) === null || _state2 === void 0 ? void 0 : _state2.url) || (element === null || element === void 0 ? void 0 : element.url) || '视频链接'
+                });
             }
             return /*#__PURE__*/ React.createElement("video", {
                 "data-testid": "video-element",
@@ -658,7 +614,7 @@ export function Media(param) {
             });
         }
         if (state().type === 'audio') {
-            var _state2;
+            var _state3;
             // 如果是不完整状态
             if (element.finished === false) {
                 // 如果 5 秒后仍未完成，显示为文本
@@ -701,39 +657,12 @@ export function Media(param) {
                 }, rawMarkdown || (element === null || element === void 0 ? void 0 : element.alt) || '音频加载中...'));
             }
             if (!state().loadSuccess) {
-                var _state3;
-                return /*#__PURE__*/ React.createElement("span", {
-                    onClick: function(e) {
-                        var _state, _editorProps_linkConfig, _state1, _editorProps_linkConfig1;
-                        if (!(((_state = state()) === null || _state === void 0 ? void 0 : _state.url) || (element === null || element === void 0 ? void 0 : element.url))) return;
-                        e.stopPropagation();
-                        e.preventDefault();
-                        if ((_editorProps_linkConfig = editorProps.linkConfig) === null || _editorProps_linkConfig === void 0 ? void 0 : _editorProps_linkConfig.onClick) {
-                            var _state2;
-                            if (editorProps.linkConfig.onClick(((_state2 = state()) === null || _state2 === void 0 ? void 0 : _state2.url) || (element === null || element === void 0 ? void 0 : element.url) || '') === false) {
-                                return;
-                            }
-                        }
-                        window.open(((_state1 = state()) === null || _state1 === void 0 ? void 0 : _state1.url) || (element === null || element === void 0 ? void 0 : element.url), (editorProps === null || editorProps === void 0 ? void 0 : (_editorProps_linkConfig1 = editorProps.linkConfig) === null || _editorProps_linkConfig1 === void 0 ? void 0 : _editorProps_linkConfig1.openInNewTab) ? '_blank' : '_self');
-                    },
-                    style: {
-                        color: '#1890ff',
-                        textDecoration: 'underline',
-                        wordBreak: 'break-all',
-                        display: 'inline-flex',
-                        alignItems: 'center',
-                        gap: '8px',
-                        maxWidth: '100%',
-                        padding: '8px 12px',
-                        border: '1px dashed #d9d9d9',
-                        borderRadius: '6px',
-                        backgroundColor: '#fafafa'
-                    }
-                }, /*#__PURE__*/ React.createElement(ExclamationCircleOutlined, {
-                    style: {
-                        color: '#faad14'
-                    }
-                }), element.alt || ((_state3 = state()) === null || _state3 === void 0 ? void 0 : _state3.url) || (element === null || element === void 0 ? void 0 : element.url) || '音频链接', /*#__PURE__*/ React.createElement(SquareArrowUpRight, null));
+                var _state4, _state5;
+                return /*#__PURE__*/ React.createElement(MediaErrorLink, {
+                    url: (_state4 = state()) === null || _state4 === void 0 ? void 0 : _state4.url,
+                    fallbackUrl: element === null || element === void 0 ? void 0 : element.url,
+                    displayText: element.alt || ((_state5 = state()) === null || _state5 === void 0 ? void 0 : _state5.url) || (element === null || element === void 0 ? void 0 : element.url) || '音频链接'
+                });
             }
             return /*#__PURE__*/ React.createElement("audio", {
                 "data-testid": "audio-element",
@@ -742,7 +671,7 @@ export function Media(param) {
                     width: '100%',
                     height: 'auto'
                 },
-                src: ((_state2 = state()) === null || _state2 === void 0 ? void 0 : _state2.url) || '',
+                src: ((_state3 = state()) === null || _state3 === void 0 ? void 0 : _state3.url) || '',
                 onError: function() {
                     var _state;
                     console.warn('Audio failed to load:', (_state = state()) === null || _state === void 0 ? void 0 : _state.url);
@@ -753,7 +682,7 @@ export function Media(param) {
             }, "Your browser does not support the", /*#__PURE__*/ React.createElement("code", null, "audio"), " element.");
         }
         if (state().type === 'attachment') {
-            var _state4, _element_alt, _element_alt1, _element_otherProps1, _element_otherProps_collaborators, _element_otherProps2, _element_otherProps3;
+            var _state6, _element_alt, _element_alt1, _element_otherProps1, _element_otherProps_collaborators, _element_otherProps2, _element_otherProps3;
             return /*#__PURE__*/ React.createElement("div", {
                 style: {
                     padding: 12,
@@ -785,7 +714,7 @@ export function Media(param) {
                     minWidth: 0
                 }
             }, /*#__PURE__*/ React.createElement("a", {
-                href: (_state4 = state()) === null || _state4 === void 0 ? void 0 : _state4.url,
+                href: (_state6 = state()) === null || _state6 === void 0 ? void 0 : _state6.url,
                 style: {
                     overflow: 'ellipsis',
                     textOverflow: 'ellipsis',

package/dist/MarkdownEditor/editor/elements/Mermaid/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { RenderElementProps } from 'slate-react';
+export declare const Mermaid: ({ attributes, children, element, }: RenderElementProps) => React.JSX.Element;

package/dist/MarkdownEditor/editor/elements/{Mermaid.js → Mermaid/index.js}

@@ -50,33 +50,18 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import React from "react";
+import { ConfigProvider } from "antd";
+import classNames from "classnames";
+import React, { useContext } from "react";
+import { useStyle } from "./style";
 export var Mermaid = function(param) {
-    var attributes = param.attributes, children = param.children;
-    return /*#__PURE__*/ React.createElement("pre", _object_spread_props(_object_spread({}, attributes), {
-        style: {
-            height: '240px',
-            minWidth: '398px',
-            maxWidth: '800px',
-            minHeight: '240px',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            alignSelf: 'stretch',
-            zIndex: 5,
-            color: 'rgb(27, 27, 27)',
-            padding: '1em',
-            margin: '1em 0',
-            fontSize: '0.8em',
-            lineHeight: '1.5',
-            overflowX: 'auto',
-            whiteSpace: 'pre-wrap',
-            wordBreak: 'break-all',
-            fontFamily: "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",
-            wordWrap: 'break-word',
-            borderRadius: '12px',
-            background: '#FFFFFF',
-            boxShadow: 'var(--shadow-control-base)'
-        }
-    }), /*#__PURE__*/ React.createElement("code", null, children));
+    var attributes = param.attributes, children = param.children, element = param.element;
+    var _element_otherProps;
+    var context = useContext(ConfigProvider.ConfigContext);
+    var baseCls = context === null || context === void 0 ? void 0 : context.getPrefixCls('agentic-md-editor-mermaid');
+    var _useStyle = useStyle(baseCls), wrapSSR = _useStyle.wrapSSR, hashId = _useStyle.hashId;
+    var hasError = (element === null || element === void 0 ? void 0 : (_element_otherProps = element.otherProps) === null || _element_otherProps === void 0 ? void 0 : _element_otherProps.error) === true;
+    return wrapSSR(/*#__PURE__*/ React.createElement("pre", _object_spread_props(_object_spread({}, attributes), {
+        className: classNames(baseCls, hashId, _define_property({}, "".concat(baseCls, "-error"), hasError))
+    }), /*#__PURE__*/ React.createElement("code", null, children)));
 };

package/dist/MarkdownEditor/editor/elements/Mermaid/style.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+/**
+ * Mermaid 组件样式 Hook
+ * @param prefixCls - 样式类名前缀
+ * @returns 样式相关的 className 和 hashId
+ */
+export declare function useStyle(prefixCls?: string): {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};