@ant-design/agentic-ui 2.29.7 → 2.29.8

package/dist/MarkdownEditor/editor/elements/List/ReadonlyListItem.js

@@ -0,0 +1,138 @@
+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 _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;
+}
+import { Checkbox, ConfigProvider } from "antd";
+import classNames from "classnames";
+import React, { useContext, useMemo } from "react";
+import { debugInfo } from "../../../../Utils/debugUtils";
+import { ListContext } from "./List";
+/**
+ * ReadonlyListItem 组件 - 只读列表项预览组件
+ *
+ * 专门针对 readonly 模式优化的列表项组件，移除了编辑相关功能。
+ * 简化渲染逻辑，提升预览模式性能。
+ *
+ * @component
+ * @description 只读列表项预览组件，用于预览模式下的列表项渲染
+ * @param {ElementProps<ListItemNode>} props - 组件属性
+ * @param {ListItemNode} props.element - 列表项节点元素
+ * @param {React.ReactNode} props.children - 子组件内容
+ * @param {Object} props.attributes - 元素属性
+ *
+ * @example
+ * ```tsx
+ * <ReadonlyListItem
+ *   element={listItemNode}
+ *   attributes={attributes}
+ * >
+ *   列表项内容
+ * </ReadonlyListItem>
+ * ```
+ *
+ * @returns {React.ReactElement} 渲染的只读列表项组件
+ *
+ * @remarks
+ * - 移除拖拽相关事件处理
+ * - 任务列表的复选框在预览模式下只读
+ * - 移除提及用户编辑功能
+ * - 使用 React.memo 优化性能
+ * - 保持预览模式的视觉效果
+ */ export var ReadonlyListItem = /*#__PURE__*/ React.memo(function(param) {
+    var element = param.element, children = param.children, attributes = param.attributes;
+    var _element_mentions, _element_children;
+    debugInfo('ReadonlyListItem - 渲染只读列表项', {
+        checked: element.checked,
+        isTask: typeof element.checked === 'boolean',
+        mentionsCount: (_element_mentions = element.mentions) === null || _element_mentions === void 0 ? void 0 : _element_mentions.length,
+        childrenCount: (_element_children = element.children) === null || _element_children === void 0 ? void 0 : _element_children.length
+    });
+    var isTask = typeof element.checked === 'boolean';
+    var context = useContext(ConfigProvider.ConfigContext);
+    var _ref = useContext(ListContext) || {}, _ref_hashId = _ref.hashId, hashId = _ref_hashId === void 0 ? '' : _ref_hashId;
+    var baseCls = context.getPrefixCls('agentic-md-editor-list');
+    // 任务列表的复选框（只读模式）
+    var checkbox = useMemo(function() {
+        if (!isTask) return null;
+        return /*#__PURE__*/ React.createElement("span", {
+            contentEditable: false,
+            "data-check-item": true,
+            className: classNames("".concat(baseCls, "-check-item"), hashId)
+        }, /*#__PURE__*/ React.createElement(Checkbox, {
+            checked: element.checked,
+            disabled: true
+        }));
+    }, [
+        element.checked,
+        isTask,
+        baseCls,
+        hashId
+    ]);
+    // 提及用户显示（只读模式，只显示不编辑）
+    var mentionsUser = useMemo(function() {
+        var _element_mentions;
+        if (!isTask || !((_element_mentions = element.mentions) === null || _element_mentions === void 0 ? void 0 : _element_mentions.length)) return null;
+        return /*#__PURE__*/ React.createElement("div", {
+            style: {
+                display: 'inline-block',
+                marginLeft: 8
+            }
+        }, element.mentions.map(function(u) {
+            var _u_avatar;
+            return /*#__PURE__*/ React.createElement("div", {
+                key: u.name || u.id,
+                style: {
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    backgroundColor: '#f5f5f5',
+                    padding: '0 4px',
+                    borderRadius: 4,
+                    fontSize: '1em',
+                    lineHeight: '24px',
+                    color: '#1677ff',
+                    marginRight: 4
+                }
+            }, "@", ((_u_avatar = u.avatar) === null || _u_avatar === void 0 ? void 0 : _u_avatar.startsWith('http')) ? /*#__PURE__*/ React.createElement("img", {
+                width: 16,
+                height: 16,
+                src: u.avatar,
+                alt: u.name,
+                style: {
+                    marginLeft: 4
+                }
+            }) : null, /*#__PURE__*/ React.createElement("span", null, u.name));
+        }));
+    }, [
+        element.mentions,
+        isTask
+    ]);
+    return /*#__PURE__*/ React.createElement("li", _object_spread({
+        className: classNames("".concat(baseCls, "-item"), hashId, _define_property({}, "".concat(baseCls, "-task"), isTask)),
+        "data-be": 'list-item'
+    }, attributes), checkbox, mentionsUser, children);
+});
+ReadonlyListItem.displayName = 'ReadonlyListItem';

package/dist/MarkdownEditor/editor/elements/Media/ReadonlyMedia.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { ElementProps, MediaNode } from '../../../el';
+/**
+ * ReadonlyMedia 组件 - 只读媒体预览组件
+ *
+ * 专门针对 readonly 模式优化的媒体组件，移除了编辑相关功能（调整大小、删除等）。
+ * 简化渲染逻辑，提升预览模式性能。
+ *
+ * @component
+ * @description 只读媒体预览组件，用于预览模式下的媒体渲染
+ * @param {ElementProps<MediaNode>} props - 组件属性
+ * @param {MediaNode} props.element - 媒体节点元素
+ * @param {React.ReactNode} props.children - 子组件内容
+ * @param {Object} props.attributes - 元素属性
+ *
+ * @example
+ * ```tsx
+ * <ReadonlyMedia
+ *   element={mediaNode}
+ *   attributes={attributes}
+ * >
+ *   媒体内容
+ * </ReadonlyMedia>
+ * ```
+ *
+ * @returns {React.ReactElement} 渲染的只读媒体组件
+ *
+ * @remarks
+ * - 移除调整大小功能
+ * - 移除删除功能
+ * - 移除选择状态管理
+ * - 简化状态管理逻辑
+ * - 使用 React.memo 优化性能
+ * - 保持预览模式的视觉效果
+ */
+export declare const ReadonlyMedia: React.FC<ElementProps<MediaNode>>;