@ant-design/agentic-ui 2.8.0 → 2.9.0

package/dist/MarkdownEditor/editor/components/CommentList/index.js

@@ -1,31 +1,128 @@
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+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 _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/components/CommentList/index.tsx
-import {
-  CloseOutlined,
-  DeleteFilled,
-  EditOutlined,
-  ExportOutlined
-} from "@ant-design/icons";
+    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 { CloseOutlined, DeleteFilled, EditOutlined, ExportOutlined } from "@ant-design/icons";
 import { Avatar, ConfigProvider, Popconfirm, Tooltip } from "antd";
 import classNames from "classnames";
 import dayjs from "dayjs";
@@ -34,229 +131,300 @@ import React, { useContext } from "react";
 import { Transforms } from "slate";
 import { EditorStoreContext, useEditorStore } from "../../store";
 import { useStyle } from "./style";
-var navVariants = {
-  open: {
-    transition: { staggerChildren: 0.07, delayChildren: 0.2 }
-  },
-  closed: {
-    transition: { staggerChildren: 0.05, staggerDirection: -1 }
-  }
-};
-var itemVariants = {
-  open: {
-    y: 0,
-    opacity: 1,
-    transition: {
-      y: { stiffness: 1e3, velocity: -100 }
+/**
+ * 导航动画变体配置
+ * 定义评论列表的展开和收起动画效果
+ */ var navVariants = {
+    open: {
+        transition: {
+            staggerChildren: 0.07,
+            delayChildren: 0.2
+        }
+    },
+    closed: {
+        transition: {
+            staggerChildren: 0.05,
+            staggerDirection: -1
+        }
     }
-  },
-  closed: {
-    y: 50,
-    opacity: 0,
-    transition: {
-      y: { stiffness: 1e3 }
+};
+/**
+ * 项目动画变体配置
+ * 定义单个评论项的动画效果
+ */ var itemVariants = {
+    open: {
+        y: 0,
+        opacity: 1,
+        transition: {
+            y: {
+                stiffness: 1000,
+                velocity: -100
+            }
+        }
+    },
+    closed: {
+        y: 50,
+        opacity: 0,
+        transition: {
+            y: {
+                stiffness: 1000
+            }
+        }
     }
-  }
 };
-var CommentList = (props) => {
-  var _a, _b;
-  const { markdownEditorRef } = useEditorStore();
-  const context = useContext(ConfigProvider.ConfigContext);
-  const { setShowComment } = useContext(EditorStoreContext) || {};
-  const baseCls = context == null ? void 0 : context.getPrefixCls("agentic-md-editor-comment-view");
-  const { wrapSSR, hashId } = useStyle(baseCls);
-  return wrapSSR(
-    /* @__PURE__ */ React.createElement(React.Fragment, null, !props.pure ? /* @__PURE__ */ React.createElement(
-      "div",
-      {
+/**
+ * CommentList 组件 - 评论列表组件
+ *
+ * 该组件用于显示文档中的评论列表，支持评论的查看、编辑、删除和跳转功能。
+ * 使用 Framer Motion 提供流畅的动画效果，集成 Ant Design 组件。
+ *
+ * @component
+ * @description 评论列表组件，显示文档评论并提供交互功能
+ * @param {Object} props - 组件属性
+ * @param {CommentDataType[]} props.commentList - 评论数据列表
+ * @param {MarkdownEditorProps['comment']} props.comment - 评论配置对象
+ * @param {React.CSSProperties} [props.style] - 自定义样式
+ * @param {string} [props.className] - 自定义CSS类名
+ *
+ * @example
+ * ```tsx
+ * <CommentList
+ *   commentList={comments}
+ *   comment={{
+ *     onClick: (id, comment) => console.log('点击评论', id),
+ *     onEdit: (id, comment) => console.log('编辑评论', id),
+ *     onDelete: (id, comment) => console.log('删除评论', id)
+ *   }}
+ * />
+ * ```
+ *
+ * @returns {React.ReactElement} 渲染的评论列表组件
+ *
+ * @remarks
+ * - 支持评论的查看、编辑、删除操作
+ * - 提供评论位置跳转功能
+ * - 使用 Framer Motion 实现动画效果
+ * - 集成 Ant Design 组件（Avatar、Tooltip、Popconfirm）
+ * - 支持用户头像和名称显示
+ * - 显示评论时间戳
+ * - 响应式布局设计
+ * - 支持自定义样式和类名
+ */ export var CommentList = function(props) {
+    var _props_commentList, _props_commentList1;
+    var markdownEditorRef = useEditorStore().markdownEditorRef;
+    var context = useContext(ConfigProvider.ConfigContext);
+    var setShowComment = (useContext(EditorStoreContext) || {}).setShowComment;
+    var baseCls = context === null || context === void 0 ? void 0 : context.getPrefixCls('agentic-md-editor-comment-view');
+    var _useStyle = useStyle(baseCls), wrapSSR = _useStyle.wrapSSR, hashId = _useStyle.hashId;
+    return wrapSSR(/*#__PURE__*/ React.createElement(React.Fragment, null, !props.pure ? /*#__PURE__*/ React.createElement("div", {
         style: {
-          width: "300px"
+            width: '300px'
         }
-      }
-    ) : null, /* @__PURE__ */ React.createElement(
-      motion.div,
-      {
+    }) : null, /*#__PURE__*/ React.createElement(motion.div, {
         style: props.style,
         className: classNames(hashId, props.className, baseCls),
-        initial: { transform: "translateX(100%)", opacity: 0 },
-        animate: { transform: "translateX(0)", opacity: 1 },
-        exit: { transform: "translateX(100%)", opacity: 0 }
-      },
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          style: {
-            display: "flex",
-            justifyContent: "space-between",
-            padding: "8px 12px",
-            cursor: "pointer"
-          }
+        initial: {
+            transform: 'translateX(100%)',
+            opacity: 0
         },
-        "划词评论 (",
-        (_a = props.commentList) == null ? void 0 : _a.length,
-        ")",
-        /* @__PURE__ */ React.createElement(
-          CloseOutlined,
-          {
-            onClick: () => {
-              setShowComment == null ? void 0 : setShowComment([]);
-            }
-          }
-        )
-      ),
-      /* @__PURE__ */ React.createElement(
-        motion.div,
-        {
-          variants: navVariants,
-          style: {
-            display: "flex",
-            flexDirection: "column",
+        animate: {
+            transform: 'translateX(0)',
+            opacity: 1
+        },
+        exit: {
+            transform: 'translateX(100%)',
+            opacity: 0
+        }
+    }, /*#__PURE__*/ React.createElement("div", {
+        style: {
+            display: 'flex',
+            justifyContent: 'space-between',
+            padding: '8px 12px',
+            cursor: 'pointer'
+        }
+    }, "划词评论 (", (_props_commentList = props.commentList) === null || _props_commentList === void 0 ? void 0 : _props_commentList.length, ")", /*#__PURE__*/ React.createElement(CloseOutlined, {
+        onClick: function() {
+            setShowComment === null || setShowComment === void 0 ? void 0 : setShowComment([]);
+        }
+    })), /*#__PURE__*/ React.createElement(motion.div, {
+        variants: navVariants,
+        style: {
+            display: 'flex',
+            flexDirection: 'column',
             gap: 8
-          },
-          initial: "closed",
-          whileInView: "open"
         },
-        (_b = props.commentList) == null ? void 0 : _b.map((item, index) => {
-          var _a2, _b2, _c, _d, _e, _f, _g, _h, _i;
-          return /* @__PURE__ */ React.createElement(
-            motion.div,
-            {
-              key: index,
-              whileHover: { scale: 1.04 },
-              variants: itemVariants,
-              onClick: (e) => __async(void 0, null, function* () {
-                var _a3, _b3;
-                e.stopPropagation();
-                e.preventDefault();
-                yield (_b3 = (_a3 = props.comment) == null ? void 0 : _a3.onClick) == null ? void 0 : _b3.call(_a3, item.id, item);
-              }),
-              className: classNames(`${baseCls}-item`, hashId)
+        initial: "closed",
+        whileInView: "open"
+    }, (_props_commentList1 = props.commentList) === null || _props_commentList1 === void 0 ? void 0 : _props_commentList1.map(function(item, index) {
+        var _item_user, _item_user_name_split_map, _item_user_name_split, _item_user_name, _item_user1, _item_user2, _props_comment, _props_comment1, _props_comment2;
+        return /*#__PURE__*/ React.createElement(motion.div, {
+            key: index,
+            whileHover: {
+                scale: 1.04
             },
-            /* @__PURE__ */ React.createElement("div", { className: classNames(`${baseCls}-item-header`, hashId) }, /* @__PURE__ */ React.createElement(
-              "div",
-              {
-                className: classNames(
-                  `${baseCls}-item-header-title`,
-                  hashId
-                )
-              },
-              /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
-                "div",
-                {
-                  className: classNames(
-                    `${baseCls}-item-header-name`,
-                    hashId
-                  )
-                },
-                /* @__PURE__ */ React.createElement(Avatar, { src: (_a2 = item.user) == null ? void 0 : _a2.avatar, size: 14 }, ((_e = (_d = (_c = (_b2 = item.user) == null ? void 0 : _b2.name) == null ? void 0 : _c.split(" ")) == null ? void 0 : _d.map(
-                  (item2) => {
-                    var _a3;
-                    return (_a3 = item2 == null ? void 0 : item2.split("").at(0)) == null ? void 0 : _a3.toUpperCase();
-                  }
-                )) == null ? void 0 : _e.join("")) || ""),
-                (_f = item.user) == null ? void 0 : _f.name
-              ), /* @__PURE__ */ React.createElement(
-                "div",
-                {
-                  className: classNames(
-                    `${baseCls}-item-header-time`,
-                    hashId
-                  )
-                },
-                dayjs(item.time).format("YYYY-MM-DD HH:mm:ss")
-              ))
-            ), /* @__PURE__ */ React.createElement(
-              "div",
-              {
-                className: classNames(
-                  `${baseCls}-item-header-action`,
-                  hashId
-                )
-              },
-              ((_g = props.comment) == null ? void 0 : _g.onDelete) ? /* @__PURE__ */ React.createElement(
-                Popconfirm,
-                {
-                  title: ((_h = props.comment) == null ? void 0 : _h.deleteConfirmText) || "Are you sure to delete this comment?",
-                  onConfirm: (e) => __async(void 0, null, function* () {
-                    var _a3, _b3;
-                    e == null ? void 0 : e.stopPropagation();
-                    e == null ? void 0 : e.preventDefault();
-                    try {
-                      yield (_b3 = (_a3 = props.comment) == null ? void 0 : _a3.onDelete) == null ? void 0 : _b3.call(_a3, item.id, item);
-                      Transforms.setNodes(
-                        markdownEditorRef.current,
-                        {
-                          updateTimestamp: Date.now()
-                        },
-                        {
-                          at: item.path
+            variants: itemVariants,
+            onClick: /*#__PURE__*/ function() {
+                var _ref = _async_to_generator(function(e) {
+                    var _props_comment_onClick, _props_comment;
+                    return _ts_generator(this, function(_state) {
+                        switch(_state.label){
+                            case 0:
+                                e.stopPropagation();
+                                e.preventDefault();
+                                return [
+                                    4,
+                                    (_props_comment = props.comment) === null || _props_comment === void 0 ? void 0 : (_props_comment_onClick = _props_comment.onClick) === null || _props_comment_onClick === void 0 ? void 0 : _props_comment_onClick.call(_props_comment, item.id, item)
+                                ];
+                            case 1:
+                                _state.sent();
+                                return [
+                                    2
+                                ];
                         }
-                      );
-                    } catch (error) {
-                    }
-                  })
-                },
-                /* @__PURE__ */ React.createElement(Tooltip, { title: "删除评论" }, /* @__PURE__ */ React.createElement(
-                  "span",
-                  {
-                    className: classNames(
-                      `${baseCls}-item-header-action-item`,
-                      hashId
-                    )
-                  },
-                  /* @__PURE__ */ React.createElement(DeleteFilled, null)
-                ))
-              ) : null,
-              ((_i = props.comment) == null ? void 0 : _i.onEdit) ? /* @__PURE__ */ React.createElement(Tooltip, { title: "编辑评论" }, /* @__PURE__ */ React.createElement(
-                "span",
-                {
-                  className: classNames(
-                    `${baseCls}-item-header-action-item`,
-                    hashId
-                  ),
-                  onClick: (e) => __async(void 0, null, function* () {
-                    var _a3, _b3;
-                    e.stopPropagation();
-                    e.preventDefault();
-                    yield (_b3 = (_a3 = props.comment) == null ? void 0 : _a3.onEdit) == null ? void 0 : _b3.call(_a3, item.id, item);
-                  })
-                },
-                /* @__PURE__ */ React.createElement(EditOutlined, null)
-              )) : null,
-              /* @__PURE__ */ React.createElement(Tooltip, { title: "跳转到评论位置" }, /* @__PURE__ */ React.createElement(
-                "span",
-                {
-                  className: classNames(
-                    `${baseCls}-item-header-action-item`,
-                    hashId
-                  ),
-                  onClick: (e) => __async(void 0, null, function* () {
-                    var _a3, _b3;
-                    e.stopPropagation();
-                    e.preventDefault();
-                    const element = document.getElementById(
-                      `comment-${item.id}`
-                    );
-                    if (element) {
-                      element.scrollIntoView({
-                        behavior: "smooth",
-                        block: "start"
-                      });
-                      window.scrollBy(0, -40);
-                    }
-                    yield (_b3 = (_a3 = props.comment) == null ? void 0 : _a3.onClick) == null ? void 0 : _b3.call(_a3, item.id, item);
-                  })
-                },
-                /* @__PURE__ */ React.createElement(ExportOutlined, null)
-              ))
-            )),
-            /* @__PURE__ */ React.createElement("div", { className: classNames(`${baseCls}-item-content`, hashId) }, item.content)
-          );
-        })
-      )
-    ))
-  );
-};
-export {
-  CommentList
+                    });
+                });
+                return function(e) {
+                    return _ref.apply(this, arguments);
+                };
+            }(),
+            className: classNames("".concat(baseCls, "-item"), hashId)
+        }, /*#__PURE__*/ React.createElement("div", {
+            className: classNames("".concat(baseCls, "-item-header"), hashId)
+        }, /*#__PURE__*/ React.createElement("div", {
+            className: classNames("".concat(baseCls, "-item-header-title"), hashId)
+        }, /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("div", {
+            className: classNames("".concat(baseCls, "-item-header-name"), hashId)
+        }, /*#__PURE__*/ React.createElement(Avatar, {
+            src: (_item_user = item.user) === null || _item_user === void 0 ? void 0 : _item_user.avatar,
+            size: 14
+        }, ((_item_user1 = item.user) === null || _item_user1 === void 0 ? void 0 : (_item_user_name = _item_user1.name) === null || _item_user_name === void 0 ? void 0 : (_item_user_name_split = _item_user_name.split(' ')) === null || _item_user_name_split === void 0 ? void 0 : (_item_user_name_split_map = _item_user_name_split.map(function(item) {
+            var _item_split_at;
+            return item === null || item === void 0 ? void 0 : (_item_split_at = item.split('').at(0)) === null || _item_split_at === void 0 ? void 0 : _item_split_at.toUpperCase();
+        })) === null || _item_user_name_split_map === void 0 ? void 0 : _item_user_name_split_map.join('')) || ''), (_item_user2 = item.user) === null || _item_user2 === void 0 ? void 0 : _item_user2.name), /*#__PURE__*/ React.createElement("div", {
+            className: classNames("".concat(baseCls, "-item-header-time"), hashId)
+        }, dayjs(item.time).format('YYYY-MM-DD HH:mm:ss')))), /*#__PURE__*/ React.createElement("div", {
+            className: classNames("".concat(baseCls, "-item-header-action"), hashId)
+        }, ((_props_comment = props.comment) === null || _props_comment === void 0 ? void 0 : _props_comment.onDelete) ? /*#__PURE__*/ React.createElement(Popconfirm, {
+            title: ((_props_comment1 = props.comment) === null || _props_comment1 === void 0 ? void 0 : _props_comment1.deleteConfirmText) || 'Are you sure to delete this comment?',
+            onConfirm: /*#__PURE__*/ function() {
+                var _ref = _async_to_generator(function(e) {
+                    var _props_comment_onDelete, _props_comment, error;
+                    return _ts_generator(this, function(_state) {
+                        switch(_state.label){
+                            case 0:
+                                e === null || e === void 0 ? void 0 : e.stopPropagation();
+                                e === null || e === void 0 ? void 0 : e.preventDefault();
+                                _state.label = 1;
+                            case 1:
+                                _state.trys.push([
+                                    1,
+                                    3,
+                                    ,
+                                    4
+                                ]);
+                                return [
+                                    4,
+                                    (_props_comment = props.comment) === null || _props_comment === void 0 ? void 0 : (_props_comment_onDelete = _props_comment.onDelete) === null || _props_comment_onDelete === void 0 ? void 0 : _props_comment_onDelete.call(_props_comment, item.id, item)
+                                ];
+                            case 2:
+                                _state.sent();
+                                // 更新时间戳,触发一下dom的rerender，不然不给我更新
+                                Transforms.setNodes(markdownEditorRef.current, {
+                                    updateTimestamp: Date.now()
+                                }, {
+                                    at: item.path
+                                });
+                                return [
+                                    3,
+                                    4
+                                ];
+                            case 3:
+                                error = _state.sent();
+                                return [
+                                    3,
+                                    4
+                                ];
+                            case 4:
+                                return [
+                                    2
+                                ];
+                        }
+                    });
+                });
+                return function(e) {
+                    return _ref.apply(this, arguments);
+                };
+            }()
+        }, /*#__PURE__*/ React.createElement(Tooltip, {
+            title: "删除评论"
+        }, /*#__PURE__*/ React.createElement("span", {
+            className: classNames("".concat(baseCls, "-item-header-action-item"), hashId)
+        }, /*#__PURE__*/ React.createElement(DeleteFilled, null)))) : null, ((_props_comment2 = props.comment) === null || _props_comment2 === void 0 ? void 0 : _props_comment2.onEdit) ? /*#__PURE__*/ React.createElement(Tooltip, {
+            title: "编辑评论"
+        }, /*#__PURE__*/ React.createElement("span", {
+            className: classNames("".concat(baseCls, "-item-header-action-item"), hashId),
+            onClick: /*#__PURE__*/ function() {
+                var _ref = _async_to_generator(function(e) {
+                    var _props_comment_onEdit, _props_comment;
+                    return _ts_generator(this, function(_state) {
+                        switch(_state.label){
+                            case 0:
+                                e.stopPropagation();
+                                e.preventDefault();
+                                return [
+                                    4,
+                                    (_props_comment = props.comment) === null || _props_comment === void 0 ? void 0 : (_props_comment_onEdit = _props_comment.onEdit) === null || _props_comment_onEdit === void 0 ? void 0 : _props_comment_onEdit.call(_props_comment, item.id, item)
+                                ];
+                            case 1:
+                                _state.sent();
+                                return [
+                                    2
+                                ];
+                        }
+                    });
+                });
+                return function(e) {
+                    return _ref.apply(this, arguments);
+                };
+            }()
+        }, /*#__PURE__*/ React.createElement(EditOutlined, null))) : null, /*#__PURE__*/ React.createElement(Tooltip, {
+            title: "跳转到评论位置"
+        }, /*#__PURE__*/ React.createElement("span", {
+            className: classNames("".concat(baseCls, "-item-header-action-item"), hashId),
+            onClick: /*#__PURE__*/ function() {
+                var _ref = _async_to_generator(function(e) {
+                    var _props_comment_onClick, _props_comment, element;
+                    return _ts_generator(this, function(_state) {
+                        switch(_state.label){
+                            case 0:
+                                e.stopPropagation();
+                                e.preventDefault();
+                                element = document.getElementById("comment-".concat(item.id));
+                                if (element) {
+                                    element.scrollIntoView({
+                                        behavior: 'smooth',
+                                        block: 'start'
+                                    });
+                                    window.scrollBy(0, -40);
+                                }
+                                return [
+                                    4,
+                                    (_props_comment = props.comment) === null || _props_comment === void 0 ? void 0 : (_props_comment_onClick = _props_comment.onClick) === null || _props_comment_onClick === void 0 ? void 0 : _props_comment_onClick.call(_props_comment, item.id, item)
+                                ];
+                            case 1:
+                                _state.sent();
+                                return [
+                                    2
+                                ];
+                        }
+                    });
+                });
+                return function(e) {
+                    return _ref.apply(this, arguments);
+                };
+            }()
+        }, /*#__PURE__*/ React.createElement(ExportOutlined, null))))), /*#__PURE__*/ React.createElement("div", {
+            className: classNames("".concat(baseCls, "-item-content"), hashId)
+        }, item.content));
+    })))));
 };