@ant-design/agentic-ui 2.8.0 → 2.10.0

package/dist/MarkdownEditor/editor/elements/Media.js

@@ -1,62 +1,231 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
     }
-  return a;
-};
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
     }
-  return target;
-};
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
     };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+function _ts_generator(thisArg, body) {
+    var f, y, t, g, _ = {
+        label: 0,
+        sent: function() {
+            if (t[0] & 1) throw t[1];
+            return t[1];
+        },
+        trys: [],
+        ops: []
     };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-
-// src/MarkdownEditor/editor/elements/Media.tsx
+    return g = {
+        next: verb(0),
+        "throw": verb(1),
+        "return": verb(2)
+    }, typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+        return this;
+    }), g;
+    function verb(n) {
+        return function(v) {
+            return step([
+                n,
+                v
+            ]);
+        };
+    }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while(_)try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [
+                op[0] & 2,
+                t.value
+            ];
+            switch(op[0]){
+                case 0:
+                case 1:
+                    t = op;
+                    break;
+                case 4:
+                    _.label++;
+                    return {
+                        value: op[1],
+                        done: false
+                    };
+                case 5:
+                    _.label++;
+                    y = op[1];
+                    op = [
+                        0
+                    ];
+                    continue;
+                case 7:
+                    op = _.ops.pop();
+                    _.trys.pop();
+                    continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                        _ = 0;
+                        continue;
+                    }
+                    if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                        _.label = op[1];
+                        break;
+                    }
+                    if (op[0] === 6 && _.label < t[1]) {
+                        _.label = t[1];
+                        t = op;
+                        break;
+                    }
+                    if (t && _.label < t[2]) {
+                        _.label = t[2];
+                        _.ops.push(op);
+                        break;
+                    }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop();
+                    continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) {
+            op = [
+                6,
+                e
+            ];
+            y = 0;
+        } finally{
+            f = t = 0;
+        }
+        if (op[0] & 5) throw op[1];
+        return {
+            value: op[0] ? op[1] : void 0,
+            done: true
+        };
+    }
+}
 import { DeleteFilled, EyeOutlined, LoadingOutlined } from "@ant-design/icons";
 import { Modal, Popover } from "antd";
-import React, {
-  useCallback,
-  useContext,
-  useLayoutEffect,
-  useMemo,
-  useRef
-} from "react";
+import React, { useCallback, useContext, useLayoutEffect, useMemo, useRef } from "react";
 import { useDebounceFn } from "@ant-design/pro-components";
 import { Rnd } from "react-rnd";
 import { Transforms } from "slate";
@@ -68,507 +237,456 @@ import { useEditorStore } from "../store";
 import { useGetSetState } from "../utils";
 import { getMediaType } from "../utils/dom";
 import { ImageAndError } from "./Image";
-var ResizeImage = (_a) => {
-  var _b = _a, {
-    onResizeStart,
-    onResizeStop,
-    selected,
-    defaultSize
-  } = _b, props = __objRest(_b, [
-    "onResizeStart",
-    "onResizeStop",
-    "selected",
-    "defaultSize"
-  ]);
-  const [loading, setLoading] = React.useState(true);
-  const radio = useRef(1);
-  const [size, setSize] = React.useState({
-    width: (defaultSize == null ? void 0 : defaultSize.width) || 400,
-    height: (defaultSize == null ? void 0 : defaultSize.height) || 0
-  });
-  const imgRef = useRef(null);
-  const resize = useDebounceFn((size2) => {
-    var _a2, _b2;
-    setSize({
-      width: size2.width,
-      height: size2.width / radio.current
-    });
-    (_a2 = imgRef.current) == null ? void 0 : _a2.style.setProperty("width", `${size2.width}px`);
-    (_b2 = imgRef.current) == null ? void 0 : _b2.style.setProperty(
-      "height",
-      `${(size2.width || 0) / radio.current}px`
-    );
-  }, 160);
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      "data-testid": "resize-image-container",
-      style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        borderRadius: 4,
-        overflow: "hidden",
-        width: size.width,
-        height: size.height
-      }
-    },
-    loading ? /* @__PURE__ */ React.createElement(
-      "div",
-      {
+/**
+ * 可调整大小的图片组件
+ *
+ * 功能特性：
+ * - 支持拖拽调整图片尺寸
+ * - 保持图片宽高比
+ * - 加载状态处理
+ * - 选中状态视觉反馈
+ * - 响应式尺寸调整
+ *
+ * @param props - 组件属性
+ * @returns 可调整大小的图片元素
+ *
+ * @example
+ * ```tsx
+ * <ResizeImage
+ *   src="image.jpg"
+ *   selected={true}
+ *   defaultSize={{ width: 300, height: 200 }}
+ *   onResizeStop={(size) => console.log('新尺寸:', size)}
+ * />
+ * ```
+ */ export var ResizeImage = function(_param) {
+    var onResizeStart = _param.onResizeStart, onResizeStop = _param.onResizeStop, selected = _param.selected, defaultSize = _param.defaultSize, props = _object_without_properties(_param, [
+        "onResizeStart",
+        "onResizeStop",
+        "selected",
+        "defaultSize"
+    ]);
+    var _React_useState = _sliced_to_array(React.useState(true), 2), loading = _React_useState[0], setLoading = _React_useState[1];
+    var radio = useRef(1);
+    var _React_useState1 = _sliced_to_array(React.useState({
+        width: (defaultSize === null || defaultSize === void 0 ? void 0 : defaultSize.width) || 400,
+        height: (defaultSize === null || defaultSize === void 0 ? void 0 : defaultSize.height) || 0
+    }), 2), size = _React_useState1[0], setSize = _React_useState1[1];
+    var imgRef = useRef(null);
+    //@ts-expect-error
+    var resize = useDebounceFn(function(size) {
+        var _imgRef_current, _imgRef_current1;
+        setSize({
+            width: size.width,
+            height: size.width / radio.current
+        });
+        (_imgRef_current = imgRef.current) === null || _imgRef_current === void 0 ? void 0 : _imgRef_current.style.setProperty('width', "".concat(size.width, "px"));
+        (_imgRef_current1 = imgRef.current) === null || _imgRef_current1 === void 0 ? void 0 : _imgRef_current1.style.setProperty('height', "".concat((size.width || 0) / radio.current, "px"));
+    }, 160);
+    return /*#__PURE__*/ React.createElement("div", {
+        "data-testid": "resize-image-container",
         style: {
-          width: "100px",
-          height: "100px",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          background: "rgba(0,0,0,0.05)",
-          borderRadius: 12
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: 4,
+            overflow: 'hidden',
+            width: size.width,
+            height: size.height
         }
-      },
-      /* @__PURE__ */ React.createElement(
-        LoadingOutlined,
-        {
-          style: {
+    }, loading ? /*#__PURE__*/ React.createElement("div", {
+        style: {
+            width: '100px',
+            height: '100px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: 'rgba(0,0,0,0.05)',
+            borderRadius: 12
+        }
+    }, /*#__PURE__*/ React.createElement(LoadingOutlined, {
+        style: {
             fontSize: 24,
-            color: "#1890ff"
-          }
+            color: '#1890ff'
         }
-      )
-    ) : null,
-    /* @__PURE__ */ React.createElement(
-      Rnd,
-      {
-        onResizeStart,
-        onResizeStop: () => {
-          onResizeStop == null ? void 0 : onResizeStop(size);
+    })) : null, /*#__PURE__*/ React.createElement(Rnd, {
+        onResizeStart: onResizeStart,
+        onResizeStop: function() {
+            onResizeStop === null || onResizeStop === void 0 ? void 0 : onResizeStop(size);
         },
         default: {
-          x: 0,
-          y: 0,
-          width: "100%",
-          height: "100%"
+            x: 0,
+            y: 0,
+            width: '100%',
+            height: '100%'
         },
-        size,
+        size: size,
         disableDragging: true,
         style: {
-          userSelect: "none",
-          WebkitUserSelect: "none",
-          MozUserSelect: "none",
-          msUserSelect: "none"
+            userSelect: 'none',
+            WebkitUserSelect: 'none',
+            MozUserSelect: 'none',
+            msUserSelect: 'none'
         },
-        onResize: (_, dir, ele) => {
-          var _a2, _b2;
-          (_a2 = imgRef.current) == null ? void 0 : _a2.style.setProperty("width", `${ele.clientWidth}px`);
-          (_b2 = imgRef.current) == null ? void 0 : _b2.style.setProperty(
-            "height",
-            `${(ele.clientWidth || 0) / radio.current}px`
-          );
-          resize.cancel();
-          resize.run({
-            width: ele.clientWidth,
-            height: (ele.clientWidth || 0) / radio.current
-          });
+        onResize: function(_, dir, ele) {
+            var _imgRef_current, _imgRef_current1;
+            (_imgRef_current = imgRef.current) === null || _imgRef_current === void 0 ? void 0 : _imgRef_current.style.setProperty('width', "".concat(ele.clientWidth, "px"));
+            (_imgRef_current1 = imgRef.current) === null || _imgRef_current1 === void 0 ? void 0 : _imgRef_current1.style.setProperty('height', "".concat((ele.clientWidth || 0) / radio.current, "px"));
+            resize.cancel();
+            resize.run({
+                width: ele.clientWidth,
+                height: (ele.clientWidth || 0) / radio.current
+            });
         }
-      },
-      /* @__PURE__ */ React.createElement(
-        "img",
-        __spreadValues({
-          "data-testid": "resize-image",
-          draggable: false,
-          onLoad: (e) => {
+    }, /*#__PURE__*/ React.createElement("img", _object_spread({
+        "data-testid": "resize-image",
+        draggable: false,
+        onLoad: function(e) {
             setLoading(false);
-            let width = e.target.naturalWidth;
-            const height = e.target.naturalHeight;
+            var width = e.target.naturalWidth;
+            var height = e.target.naturalHeight;
             radio.current = width / height;
-            width = Math.min(
-              width,
-              600,
-              document.documentElement.clientWidth * 0.8 || 600
-            );
+            width = Math.min(width, 600, document.documentElement.clientWidth * 0.8 || 600);
             setSize({
-              width,
-              height: width / radio.current
+                width: width,
+                height: width / radio.current
             });
-          },
-          alt: "image",
-          referrerPolicy: "no-referrer",
-          width: `min(${size.width}px, 100%)`,
-          ref: imgRef,
-          style: {
-            width: "100%",
-            height: "auto",
-            position: "relative",
-            zIndex: 99,
-            outline: selected ? "2px solid #1890ff" : "none",
-            boxShadow: selected ? "0 0 0 2px #1890ff" : "none",
-            minHeight: 20,
-            display: loading ? "none" : "block",
-            userSelect: "none",
-            WebkitUserSelect: "none",
-            MozUserSelect: "none",
-            msUserSelect: "none",
-            pointerEvents: "none"
-          }
-        }, props)
-      )
-    )
-  );
-};
-function Media({
-  element,
-  attributes,
-  children
-}) {
-  var _a, _b;
-  const [_, path] = useSelStatus(element);
-  const { markdownEditorRef, readonly } = useEditorStore();
-  const { locale } = useContext(I18nContext);
-  const htmlRef = React.useRef(null);
-  const [state, setState] = useGetSetState({
-    height: element.height,
-    dragging: false,
-    loadSuccess: true,
-    url: "",
-    selected: false,
-    type: getMediaType(element == null ? void 0 : element.url, element.alt)
-  });
-  const updateElement = useCallback(
-    (attr) => {
-      if (!markdownEditorRef.current)
-        return;
-      Transforms.setNodes(markdownEditorRef.current, attr, { at: path });
-    },
-    [path]
-  );
-  const initial = useCallback(() => __async(this, null, function* () {
-    let type = getMediaType(element == null ? void 0 : element.url, element.alt);
-    type = !type ? "image" : type;
-    setState({
-      type: ["image", "video", "autio", "attachment"].includes(type) ? type : "other"
-    });
-    let realUrl = element == null ? void 0 : element.url;
-    setState({ url: realUrl });
-    if (state().type === "image" || state().type === "other") {
-      const img = document.createElement("img");
-      img.referrerPolicy = "no-referrer";
-      img.crossOrigin = "anonymous";
-      img.src = realUrl;
-      img.onerror = () => {
-        setState({ loadSuccess: false });
-      };
-      img.onload = () => setState({ loadSuccess: true });
-    }
-    if (!element.mediaType) {
-      updateElement({
-        mediaType: state().type
-      });
-    }
-  }), [element]);
-  useLayoutEffect(() => {
-    initial();
-  }, [element == null ? void 0 : element.url]);
-  const imageDom = useMemo(() => {
-    var _a2, _b2;
-    if (state().type !== "image" && state().type !== "other")
-      return null;
-    return !readonly ? /* @__PURE__ */ React.createElement(
-      ResizeImage,
-      {
-        defaultSize: {
-          width: element.width,
-          height: element.height
-        },
-        selected: state().selected,
-        src: (_a2 = state()) == null ? void 0 : _a2.url,
-        onResizeStart: () => {
-          setState({ selected: true });
-        },
-        onResizeStop: (size) => {
-          Transforms.setNodes(markdownEditorRef.current, size, { at: path });
-          setState({ selected: false });
-        }
-      }
-    ) : /* @__PURE__ */ React.createElement(
-      ImageAndError,
-      {
-        src: ((_b2 = state()) == null ? void 0 : _b2.url) || (element == null ? void 0 : element.url),
-        alt: "image",
-        preview: {
-          getContainer: () => document.body
         },
-        referrerPolicy: "no-referrer",
-        crossOrigin: "anonymous",
-        draggable: false,
+        alt: 'image',
+        referrerPolicy: 'no-referrer',
+        width: "min(".concat(size.width, "px, 100%)"),
+        ref: imgRef,
         style: {
-          maxWidth: 800
-        },
-        width: element.width,
-        height: element.height
-      }
-    );
-  }, [state().type, (_a = state()) == null ? void 0 : _a.url, readonly, state().selected]);
-  const mediaElement = useMemo(() => {
-    var _a2, _b2, _c, _d, _e, _f, _g, _h, _i;
-    if (state().type === "video")
-      return /* @__PURE__ */ React.createElement(
-        "video",
-        {
-          "data-testid": "video-element",
-          controls: element.controls !== false,
-          autoPlay: element.autoplay,
-          loop: element.loop,
-          muted: element.muted,
-          poster: element.poster,
-          style: {
-            width: element.width ? `${element.width}px` : "100%",
-            height: element.height ? `${element.height}px` : "auto",
-            maxWidth: 600,
-            borderRadius: "6px",
-            boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)"
-          },
-          src: ((_a2 = state()) == null ? void 0 : _a2.url) || "",
-          preload: "metadata",
-          onError: () => {
-            var _a3;
-            console.warn("Video failed to load:", (_a3 = state()) == null ? void 0 : _a3.url);
-          }
+            width: '100%',
+            height: 'auto',
+            position: 'relative',
+            zIndex: 99,
+            outline: selected ? '2px solid #1890ff' : 'none',
+            boxShadow: selected ? '0 0 0 2px #1890ff' : 'none',
+            minHeight: 20,
+            display: loading ? 'none' : 'block',
+            userSelect: 'none',
+            WebkitUserSelect: 'none',
+            MozUserSelect: 'none',
+            msUserSelect: 'none',
+            pointerEvents: 'none'
         }
-      );
-    if (state().type === "audio") {
-      return /* @__PURE__ */ React.createElement(
-        "audio",
-        {
-          "data-testid": "audio-element",
-          controls: true,
-          style: {
-            width: "100%",
-            height: "auto"
-          },
-          src: ((_b2 = state()) == null ? void 0 : _b2.url) || ""
-        },
-        "Your browser does not support the",
-        /* @__PURE__ */ React.createElement("code", null, "audio"),
-        " element."
-      );
-    }
-    if (state().type === "attachment") {
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          style: {
-            padding: 12,
-            boxSizing: "border-box",
-            border: "1px solid #f0f0f0",
-            borderRadius: "0.5em",
-            width: "100%",
-            backgroundImage: "linear-gradient(rgb(249, 251, 255) 0%, rgb(243, 248, 255) 100%)",
-            flex: 1,
-            display: "flex",
-            alignItems: "center",
-            gap: 12,
-            color: "#262626",
-            justifyContent: "space-between"
-          }
-        },
-        /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              gap: 12,
-              color: "#262626",
-              fontSize: 16,
-              flex: 1,
-              minWidth: 0
+    }, props))));
+};
+export function Media(param) {
+    var element = param.element, attributes = param.attributes, children = param.children;
+    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 _useEditorStore = useEditorStore(), markdownEditorRef = _useEditorStore.markdownEditorRef, readonly = _useEditorStore.readonly;
+    var locale = useContext(I18nContext).locale;
+    var htmlRef = React.useRef(null);
+    var _useGetSetState = _sliced_to_array(useGetSetState({
+        height: element.height,
+        dragging: false,
+        loadSuccess: true,
+        url: '',
+        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;
+        Transforms.setNodes(markdownEditorRef.current, attr, {
+            at: path
+        });
+    }, [
+        path
+    ]);
+    var initial = useCallback(/*#__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);
+            type = !type ? 'image' : type;
+            setState({
+                type: [
+                    'image',
+                    'video',
+                    'autio',
+                    'attachment'
+                ].includes(type) ? type : 'other'
+            });
+            realUrl = element === null || element === void 0 ? void 0 : element.url;
+            setState({
+                url: realUrl
+            });
+            if (state().type === 'image' || state().type === 'other') {
+                img = document.createElement('img');
+                img.referrerPolicy = 'no-referrer';
+                img.crossOrigin = 'anonymous';
+                img.src = realUrl;
+                img.onerror = function() {
+                    setState({
+                        loadSuccess: false
+                    });
+                };
+                img.onload = function() {
+                    return setState({
+                        loadSuccess: true
+                    });
+                };
+            }
+            if (!element.mediaType) {
+                updateElement({
+                    mediaType: state().type
+                });
+            }
+            return [
+                2
+            ];
+        });
+    }), [
+        element
+    ]);
+    useLayoutEffect(function() {
+        initial();
+    }, [
+        element === null || element === void 0 ? void 0 : element.url
+    ]);
+    var imageDom = useMemo(function() {
+        var _state, _state1;
+        if (state().type !== 'image' && state().type !== 'other') return null;
+        return !readonly ? /*#__PURE__*/ React.createElement(ResizeImage, {
+            defaultSize: {
+                width: element.width,
+                height: element.height
+            },
+            selected: state().selected,
+            src: (_state = state()) === null || _state === void 0 ? void 0 : _state.url,
+            onResizeStart: function() {
+                setState({
+                    selected: true
+                });
+            },
+            onResizeStop: function(size) {
+                Transforms.setNodes(markdownEditorRef.current, size, {
+                    at: path
+                });
+                setState({
+                    selected: false
+                });
             }
-          },
-          /* @__PURE__ */ React.createElement(
-            "div",
-            {
-              style: {
-                flex: 1,
-                minWidth: 0
-              }
+        }) : /*#__PURE__*/ React.createElement(ImageAndError, {
+            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;
+                }
             },
-            /* @__PURE__ */ React.createElement(
-              "a",
-              {
-                href: (_c = state()) == null ? void 0 : _c.url,
+            referrerPolicy: 'no-referrer',
+            crossOrigin: 'anonymous',
+            draggable: false,
+            style: {
+                maxWidth: 800
+            },
+            width: element.width,
+            height: element.height
+        });
+    }, [
+        state().type,
+        (_state = state()) === null || _state === void 0 ? void 0 : _state.url,
+        readonly,
+        state().selected
+    ]);
+    var mediaElement = useMemo(function() {
+        var _state;
+        if (state().type === 'video') return /*#__PURE__*/ React.createElement("video", {
+            "data-testid": "video-element",
+            controls: element.controls !== false,
+            autoPlay: element.autoplay,
+            loop: element.loop,
+            muted: element.muted,
+            poster: element.poster,
+            style: {
+                width: element.width ? "".concat(element.width, "px") : '100%',
+                height: element.height ? "".concat(element.height, "px") : 'auto',
+                maxWidth: 600,
+                borderRadius: '6px',
+                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)'
+            },
+            src: ((_state = state()) === null || _state === void 0 ? void 0 : _state.url) || '',
+            preload: "metadata",
+            onError: function() {
+                var _state;
+                console.warn('Video failed to load:', (_state = state()) === null || _state === void 0 ? void 0 : _state.url);
+            }
+        });
+        if (state().type === 'audio') {
+            var _state1;
+            return /*#__PURE__*/ React.createElement("audio", {
+                "data-testid": "audio-element",
+                controls: true,
                 style: {
-                  overflow: "ellipsis",
-                  textOverflow: "ellipsis",
-                  textWrap: "nowrap",
-                  textDecoration: "none",
-                  display: "block",
-                  color: "#262626"
+                    width: '100%',
+                    height: 'auto'
                 },
-                download: ((_d = element.alt) == null ? void 0 : _d.replace("attachment:", "")) || "attachment"
-              },
-              ((_e = element.alt) == null ? void 0 : _e.replace("attachment:", "")) || "attachment"
-            ),
-            /* @__PURE__ */ React.createElement(
-              "div",
-              {
+                src: ((_state1 = state()) === null || _state1 === void 0 ? void 0 : _state1.url) || ''
+            }, "Your browser does not support the", /*#__PURE__*/ React.createElement("code", null, "audio"), " element.");
+        }
+        if (state().type === 'attachment') {
+            var _state2, _element_alt, _element_alt1, _element_otherProps, _element_otherProps_collaborators, _element_otherProps1, _element_otherProps2;
+            return /*#__PURE__*/ React.createElement("div", {
+                style: {
+                    padding: 12,
+                    boxSizing: 'border-box',
+                    border: '1px solid #f0f0f0',
+                    borderRadius: '0.5em',
+                    width: '100%',
+                    backgroundImage: 'linear-gradient(rgb(249, 251, 255) 0%, rgb(243, 248, 255) 100%)',
+                    flex: 1,
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 12,
+                    color: '#262626',
+                    justifyContent: 'space-between'
+                }
+            }, /*#__PURE__*/ React.createElement("div", {
+                style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 12,
+                    color: '#262626',
+                    fontSize: 16,
+                    flex: 1,
+                    minWidth: 0
+                }
+            }, /*#__PURE__*/ React.createElement("div", {
                 style: {
-                  flex: 1,
-                  minWidth: 0,
-                  display: "flex",
-                  justifyContent: "space-between"
+                    flex: 1,
+                    minWidth: 0
                 }
-              },
-              ((_f = element.otherProps) == null ? void 0 : _f.collaborators) ? /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
-                AvatarList,
-                {
-                  displayList: ((_h = (_g = element.otherProps) == null ? void 0 : _g.collaborators) == null ? void 0 : _h.map((item) => {
-                    var _a3, _b3;
+            }, /*#__PURE__*/ React.createElement("a", {
+                href: (_state2 = state()) === null || _state2 === void 0 ? void 0 : _state2.url,
+                style: {
+                    overflow: 'ellipsis',
+                    textOverflow: 'ellipsis',
+                    textWrap: 'nowrap',
+                    textDecoration: 'none',
+                    display: 'block',
+                    color: '#262626'
+                },
+                download: ((_element_alt = element.alt) === null || _element_alt === void 0 ? void 0 : _element_alt.replace('attachment:', '')) || 'attachment'
+            }, ((_element_alt1 = element.alt) === null || _element_alt1 === void 0 ? void 0 : _element_alt1.replace('attachment:', '')) || 'attachment'), /*#__PURE__*/ React.createElement("div", {
+                style: {
+                    flex: 1,
+                    minWidth: 0,
+                    display: 'flex',
+                    justifyContent: 'space-between'
+                }
+            }, ((_element_otherProps = element.otherProps) === null || _element_otherProps === void 0 ? void 0 : _element_otherProps.collaborators) ? /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement(AvatarList, {
+                displayList: ((_element_otherProps1 = element.otherProps) === null || _element_otherProps1 === void 0 ? void 0 : (_element_otherProps_collaborators = _element_otherProps1.collaborators) === null || _element_otherProps_collaborators === void 0 ? void 0 : _element_otherProps_collaborators.map(function(item) {
+                    var _Object_keys, _Object_values;
                     return {
-                      name: (_a3 = Object.keys(item)) == null ? void 0 : _a3.at(0),
-                      collaboratorNumber: ((_b3 = Object.values(item)) == null ? void 0 : _b3.at(0)) || 0
+                        name: (_Object_keys = Object.keys(item)) === null || _Object_keys === void 0 ? void 0 : _Object_keys.at(0),
+                        collaboratorNumber: ((_Object_values = Object.values(item)) === null || _Object_values === void 0 ? void 0 : _Object_values.at(0)) || 0
                     };
-                  }).slice(0, 5)) || []
-                }
-              )) : /* @__PURE__ */ React.createElement("div", null),
-              ((_i = element.otherProps) == null ? void 0 : _i.updateTime) ? /* @__PURE__ */ React.createElement(
-                "div",
-                {
-                  style: {
-                    color: "rgba(0,0,0,0.45)",
+                }).slice(0, 5)) || []
+            })) : /*#__PURE__*/ React.createElement("div", null), ((_element_otherProps2 = element.otherProps) === null || _element_otherProps2 === void 0 ? void 0 : _element_otherProps2.updateTime) ? /*#__PURE__*/ React.createElement("div", {
+                style: {
+                    color: 'rgba(0,0,0,0.45)',
                     fontSize: 12
-                  }
+                }
+            }, element.otherProps.updateTime) : null))), /*#__PURE__*/ React.createElement("div", {
+                className: "editor-icon-box",
+                style: {
+                    padding: '0 18px'
+                }
+            }, /*#__PURE__*/ React.createElement(EyeOutlined, {
+                onClick: function() {
+                    var _state;
+                    if (typeof window === 'undefined') return;
+                    window.open((_state = state()) === null || _state === void 0 ? void 0 : _state.url);
                 },
-                element.otherProps.updateTime
-              ) : null
-            )
-          )
-        ),
-        /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: "editor-icon-box",
-            style: {
-              padding: "0 18px"
-            }
-          },
-          /* @__PURE__ */ React.createElement(
-            EyeOutlined,
-            {
-              onClick: () => {
-                var _a3;
-                if (typeof window === "undefined")
-                  return;
-                window.open((_a3 = state()) == null ? void 0 : _a3.url);
-              },
-              style: {
-                fontSize: 16,
-                cursor: "pointer"
-              }
-            }
-          )
-        )
-      );
-    }
-    return null;
-  }, [state().type, (_b = state()) == null ? void 0 : _b.url]);
-  return /* @__PURE__ */ React.createElement("div", __spreadValues({}, attributes), /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: "ant-agentic-md-editor-drag-el",
-      "data-be": "media",
-      "data-testid": "media-container",
-      style: {
-        cursor: "pointer",
-        position: "relative",
-        display: "flex",
-        alignItems: "flex-end",
-        userSelect: "none",
-        WebkitUserSelect: "none",
-        MozUserSelect: "none",
-        msUserSelect: "none"
-      },
-      draggable: false,
-      onContextMenu: (e) => {
-        e.stopPropagation();
-      },
-      onMouseDown: (e) => {
-        e.stopPropagation();
-      },
-      onDragStart: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      Popover,
-      {
+                style: {
+                    fontSize: 16,
+                    cursor: 'pointer'
+                }
+            })));
+        }
+        return null;
+    }, [
+        state().type,
+        (_state1 = state()) === null || _state1 === void 0 ? void 0 : _state1.url
+    ]);
+    return /*#__PURE__*/ React.createElement("div", attributes, /*#__PURE__*/ React.createElement("div", {
+        className: 'ant-agentic-md-editor-drag-el',
+        "data-be": "media",
+        "data-testid": "media-container",
+        style: {
+            cursor: 'pointer',
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'flex-end',
+            userSelect: 'none',
+            WebkitUserSelect: 'none',
+            MozUserSelect: 'none',
+            msUserSelect: 'none'
+        },
+        draggable: false,
+        onContextMenu: function(e) {
+            e.stopPropagation();
+        },
+        onMouseDown: function(e) {
+            e.stopPropagation();
+        },
+        onDragStart: function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    }, /*#__PURE__*/ React.createElement(Popover, {
         arrow: false,
         styles: {
-          body: {
-            padding: 8
-          }
+            body: {
+                padding: 8
+            }
         },
         trigger: "click",
-        open: state().selected && !readonly ? void 0 : false,
-        content: /* @__PURE__ */ React.createElement(
-          ActionIconBox,
-          {
-            title: (locale == null ? void 0 : locale.delete) || "删除",
+        open: state().selected && !readonly ? undefined : false,
+        content: /*#__PURE__*/ React.createElement(ActionIconBox, {
+            title: (locale === null || locale === void 0 ? void 0 : locale.delete) || '删除',
             type: "danger",
-            onClick: (e) => {
-              e.stopPropagation();
-              Modal.confirm({
-                title: (locale == null ? void 0 : locale.deleteMedia) || "删除媒体",
-                content: (locale == null ? void 0 : locale.confirmDelete) || "确定删除该媒体吗？",
-                onOk: () => {
-                  Transforms.removeNodes(markdownEditorRef.current, {
-                    at: path
-                  });
-                }
-              });
+            onClick: function(e) {
+                e.stopPropagation();
+                Modal.confirm({
+                    title: (locale === null || locale === void 0 ? void 0 : locale.deleteMedia) || '删除媒体',
+                    content: (locale === null || locale === void 0 ? void 0 : locale.confirmDelete) || '确定删除该媒体吗？',
+                    onOk: function() {
+                        Transforms.removeNodes(markdownEditorRef.current, {
+                            at: path
+                        });
+                    }
+                });
             }
-          },
-          /* @__PURE__ */ React.createElement(DeleteFilled, null)
-        )
-      },
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          onClick: () => {
-            setTimeout(() => {
-              setState({ selected: true });
+        }, /*#__PURE__*/ React.createElement(DeleteFilled, null))
+    }, /*#__PURE__*/ React.createElement("div", {
+        onClick: function() {
+            setTimeout(function() {
+                setState({
+                    selected: true
+                });
             }, 16);
-          },
-          tabIndex: -1,
-          style: {
-            color: "transparent",
+        },
+        tabIndex: -1,
+        style: {
+            color: 'transparent',
             padding: 4,
-            userSelect: "none",
-            display: "flex",
-            flexDirection: "column",
-            width: mediaElement ? "100%" : void 0
-          },
-          ref: htmlRef,
-          draggable: false,
-          contentEditable: false,
-          className: "md-editor-media"
+            userSelect: 'none',
+            display: 'flex',
+            flexDirection: 'column',
+            width: mediaElement ? '100%' : undefined
         },
-        mediaElement,
-        imageDom,
-        /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            style: {
-              display: "none"
-            }
-          },
-          children
-        )
-      )
-    )
-  ));
+        ref: htmlRef,
+        draggable: false,
+        contentEditable: false,
+        className: "md-editor-media"
+    }, mediaElement, imageDom, /*#__PURE__*/ React.createElement("div", {
+        style: {
+            display: 'none'
+        }
+    }, children)))));
 }
-export {
-  Media,
-  ResizeImage
-};