@seafile/sdoc-editor 2.0.82 → 2.0.83

package/dist/basic-sdk/comment/components/comment-item-content.js

@@ -1,156 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactI18next = require("react-i18next");
-var _reactstrap = require("reactstrap");
-var _dayjs = _interopRequireDefault(require("dayjs"));
-var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
-var _context = _interopRequireDefault(require("../../context"));
-var _mdToHtml = _interopRequireDefault(require("../../slate-convert/md-to-html"));
-var _notificationHooks = require("../hooks/notification-hooks");
-var _commentEditor = _interopRequireDefault(require("./comment-editor"));
-const CommentItemContent = _ref => {
-  let {
-    isActive,
-    container,
-    comment,
-    updateComment,
-    updateCommentState,
-    onDeleteComment,
-    t,
-    targetId
-  } = _ref;
-  const [isDropdownOpen, setDropdownOpen] = (0, _react.useState)(false);
-  const [isEditing, setIsEditing] = (0, _react.useState)(false);
-  const {
-    notificationsInfo
-  } = (0, _notificationHooks.useNotificationContext)();
-  const [editorContent, setEditorContent] = (0, _react.useState)('');
-  const onEditToggle = (0, _react.useCallback)(event => {
-    event.stopPropagation();
-    setIsEditing(true);
-  }, []);
-  const isUnseen = notificationsInfo.notifications_map[`sdoc_notification_${comment.id}`] ? true : false;
-  (0, _react.useEffect)(() => {
-    transferHtml(comment.comment);
-  }, [comment.comment]);
-  const transferHtml = async mdString => {
-    const htmlString = await _mdToHtml.default.process(mdString);
-    setEditorContent(String(htmlString));
-  };
-  const onDeleteToggle = (0, _react.useCallback)(event => {
-    event.stopPropagation();
-    onDeleteComment(true);
-  }, [onDeleteComment]);
-  const updateContent = (0, _react.useCallback)(content => {
-    const commentId = comment.id;
-    if (comment.comment !== content) {
-      const time = (0, _dayjs.default)().format('YYYY-MM-DD HH:mm:ss');
-      const newComment = {
-        comment: content,
-        detail: {
-          ...comment.detail,
-          comment: content
-        },
-        updated_at: time
-      };
-      updateComment(commentId, newComment);
-    }
-    setIsEditing(false);
-  }, [comment, updateComment]);
-  const updateCommentResolved = (0, _react.useCallback)(state => {
-    const commentId = comment.id;
-    const newComment = {
-      resolved: state
-    };
-    updateCommentState(commentId, newComment);
-  }, [comment.id, updateCommentState]);
-  const markAsResolved = (0, _react.useCallback)(event => {
-    event.stopPropagation();
-    updateCommentResolved(true);
-  }, [updateCommentResolved]);
-  const resubmit = (0, _react.useCallback)(event => {
-    event.stopPropagation();
-    updateCommentResolved(false);
-  }, [updateCommentResolved]);
-  const menuId = (0, _react.useMemo)(() => `comment_${comment.id}`, [comment]);
-  const user = _context.default.getUserInfo();
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "comment-item"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "comment-header"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "comment-author"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "comment-author__avatar"
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    alt: "",
-    src: comment.avatar_url
-  })), /*#__PURE__*/_react.default.createElement("span", {
-    className: "comment-author__info"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "name"
-  }, comment.user_name), /*#__PURE__*/_react.default.createElement("span", {
-    className: "time"
-  }, (0, _dayjs.default)(comment.updated_at).format('MM-DD HH:mm'), (comment === null || comment === void 0 ? void 0 : comment.resolved) && /*#__PURE__*/_react.default.createElement("span", {
-    className: "comment-success-resolved sdocfont sdoc-mark-as-resolved"
-  })))), isUnseen && !isActive && /*#__PURE__*/_react.default.createElement("span", {
-    className: "sdoc-unread-message-tip"
-  }), isActive && comment.user_email === user.username && /*#__PURE__*/_react.default.createElement("div", {
-    className: "d-flex comment-item-operation-wrapper"
-  }, !comment.resolved && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    id: `tooltip_${menuId}`,
-    className: "comment-operation mr-2",
-    onClick: markAsResolved
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "sdocfont sdoc-confirm"
-  })), /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-    target: `tooltip_${menuId}`
-  }, t('Resolved_tip'))), /*#__PURE__*/_react.default.createElement(_reactstrap.Dropdown, {
-    id: targetId,
-    isOpen: isDropdownOpen,
-    toggle: () => setDropdownOpen(!isDropdownOpen)
-  }, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownToggle, {
-    tag: "div",
-    className: "comment-operation"
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "sdocfont sdoc-more"
-  })), /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownMenu, {
-    className: "sdoc-dropdown-menu",
-    container: container
-  }, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
-    className: "sdoc-dropdown-menu-item",
-    tag: "div",
-    onClick: onEditToggle
-  }, t('Edit')), /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
-    className: "sdoc-dropdown-menu-item",
-    tag: "div",
-    onClick: onDeleteToggle
-  }, t('Delete')), !comment.resolved && /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
-    className: "sdoc-dropdown-menu-item",
-    tag: "div",
-    onClick: markAsResolved
-  }, t('Mark_as_Resolved')), comment.resolved && /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
-    className: "sdoc-dropdown-menu-item",
-    tag: "div",
-    onClick: resubmit
-  }, t('Resubmit')))))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "comment-content"
-  }, !isEditing && /*#__PURE__*/_react.default.createElement("div", {
-    dangerouslySetInnerHTML: {
-      __html: editorContent
-    }
-  })), isEditing && /*#__PURE__*/_react.default.createElement(_commentEditor.default, {
-    className: "pb-3",
-    content: comment.comment,
-    updateContent: updateContent,
-    setIsEditing: setIsEditing
-  }));
-};
-var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(CommentItemContent);

package/dist/basic-sdk/comment/components/comment-item-reply.js

@@ -1,124 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactI18next = require("react-i18next");
-var _reactstrap = require("reactstrap");
-var _dayjs = _interopRequireDefault(require("dayjs"));
-var _context = _interopRequireDefault(require("../../context"));
-var _mdToHtml = _interopRequireDefault(require("../../slate-convert/md-to-html"));
-var _commentDeletePopover = _interopRequireDefault(require("./comment-delete-popover"));
-var _commentEditor = _interopRequireDefault(require("./comment-editor"));
-const CommentItemReply = _ref => {
-  let {
-    isActive,
-    container,
-    reply,
-    deleteReply,
-    updateReply,
-    t
-  } = _ref;
-  const [isDropdownOpen, setDropdownOpen] = (0, _react.useState)(false);
-  const itemRef = (0, _react.useRef)(null);
-  const [isEditing, setIsEditing] = (0, _react.useState)(false);
-  const [editorContent, setEditorContent] = (0, _react.useState)('');
-  const replyOpToolsId = `replyOpTools_${reply.id}`;
-  const onEditToggle = (0, _react.useCallback)(event => {
-    event.stopPropagation();
-    setIsEditing(true);
-  }, []);
-  const [isShowDeletePopover, setIsShowDeletePopover] = (0, _react.useState)(false);
-  const onDeleteToggle = (0, _react.useCallback)(event => {
-    event.stopPropagation();
-    setIsShowDeletePopover(true);
-  }, []);
-  const transferHtml = async mdString => {
-    const htmlString = await _mdToHtml.default.process(mdString);
-    const formatHtml = String(htmlString).replace(/\n */g, '');
-    setEditorContent(formatHtml);
-  };
-  (0, _react.useEffect)(() => {
-    transferHtml(reply.reply);
-  }, [reply.reply]);
-  const _deleteReply = (0, _react.useCallback)(() => {
-    deleteReply(reply.id);
-    setIsShowDeletePopover(false);
-  }, [reply.id, deleteReply]);
-  const updateContent = (0, _react.useCallback)(content => {
-    if (reply.reply !== content) {
-      const time = (0, _dayjs.default)().format('YYYY-MM-DD HH:mm:ss');
-      const newReply = {
-        reply: content,
-        updated_at: time
-      };
-      updateReply(reply.id, newReply);
-    }
-    setIsEditing(false);
-  }, [reply, updateReply]);
-  const user = _context.default.getUserInfo();
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "comment-item",
-    ref: itemRef
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "comment-header"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "comment-author"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "comment-author__avatar"
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    alt: "",
-    src: reply.avatar_url
-  })), /*#__PURE__*/_react.default.createElement("span", {
-    className: "comment-author__info"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "name"
-  }, reply.user_name), /*#__PURE__*/_react.default.createElement("span", {
-    className: "time"
-  }, (0, _dayjs.default)(reply.updated_at).format('MM-DD HH:mm')))), isActive && user.username === reply.author && /*#__PURE__*/_react.default.createElement("div", {
-    className: "comment-item-operation-wrapper"
-  }, /*#__PURE__*/_react.default.createElement(_reactstrap.Dropdown, {
-    id: replyOpToolsId,
-    isOpen: isDropdownOpen,
-    toggle: () => setDropdownOpen(!isDropdownOpen)
-  }, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownToggle, {
-    tag: "div",
-    className: "comment-operation"
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "sdocfont sdoc-more"
-  })), /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownMenu, {
-    className: "sdoc-dropdown-menu",
-    container: container
-  }, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
-    className: "sdoc-dropdown-menu-item",
-    tag: "div",
-    onClick: onEditToggle
-  }, t('Edit')), /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
-    className: "sdoc-dropdown-menu-item",
-    tag: "div",
-    onClick: onDeleteToggle
-  }, t('Delete')))))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "comment-content"
-  }, !isEditing && /*#__PURE__*/_react.default.createElement("div", {
-    dangerouslySetInnerHTML: {
-      __html: editorContent
-    }
-  })), isEditing && /*#__PURE__*/_react.default.createElement(_commentEditor.default, {
-    className: "pb-3",
-    type: "reply",
-    content: editorContent,
-    updateContent: updateContent,
-    setIsEditing: setIsEditing
-  }), isShowDeletePopover && isActive && /*#__PURE__*/_react.default.createElement(_commentDeletePopover.default, {
-    parentDom: itemRef.current,
-    type: "reply",
-    deleteConfirm: _deleteReply,
-    setIsShowDeletePopover: setIsShowDeletePopover,
-    targetId: replyOpToolsId
-  }));
-};
-var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(CommentItemReply);

package/dist/basic-sdk/comment/components/comment-item-resolved-reply.js

@@ -1,38 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactI18next = require("react-i18next");
-var _dayjs = _interopRequireDefault(require("dayjs"));
-const CommentItemResolvedReply = _ref => {
-  let {
-    reply,
-    t
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "comment-item"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "comment-header"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "comment-author"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "comment-author__avatar"
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    alt: "",
-    src: reply.avatar_url
-  })), /*#__PURE__*/_react.default.createElement("span", {
-    className: "comment-author__info"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "name"
-  }, reply.user_name), /*#__PURE__*/_react.default.createElement("span", {
-    className: "time"
-  }, (0, _dayjs.default)(reply.updated_at).format('MM-DD HH:mm'))))), /*#__PURE__*/_react.default.createElement("p", {
-    className: "comment-content"
-  }, reply.reply === 'True' && /*#__PURE__*/_react.default.createElement("span", null, t('Mark_as_Resolved')), reply.reply === 'False' && /*#__PURE__*/_react.default.createElement("span", null, t('Resubmitted')))));
-};
-var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(CommentItemResolvedReply);

package/dist/basic-sdk/comment/components/comment-item-wrapper.js

@@ -1,368 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _slate = require("@seafile/slate");
-var _slateReact = require("@seafile/slate-react");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _dayjs = _interopRequireDefault(require("dayjs"));
-var _context = _interopRequireDefault(require("../../context"));
-var _constants = require("../constants");
-var _helper = require("../helper");
-var _useCommentContext = require("../hooks/comment-hooks/use-comment-context");
-var _commentDeletePopover = _interopRequireDefault(require("./comment-delete-popover"));
-var _commentItemContent = _interopRequireDefault(require("./comment-item-content"));
-var _commentItemReply = _interopRequireDefault(require("./comment-item-reply"));
-const CommentItemWrapper = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    container = 'sdoc-comment-list-container',
-    editor,
-    element,
-    isActive,
-    comment,
-    commentsDetail,
-    setIsClickedContextComment,
-    setIsCommentPanelVisible,
-    onSelectElement,
-    isGlobalComment,
-    commentDetailRef,
-    updateScrollPosition,
-    setCurrentCommentGroup,
-    onCommentClick,
-    isEmptyComment,
-    isCollapseCommentEditor,
-    isClickedContextComment = false,
-    closeComment
-  } = _ref;
-  const listRef = (0, _react.useRef)(null);
-  const {
-    dispatch
-  } = (0, _useCommentContext.useCommentContext)();
-  const scrollRef = (0, _react.useRef)(document.querySelector('.sdoc-scroll-container'));
-  const [isShowDeletePopover, setIsShowDeletePopover] = (0, _react.useState)(false);
-  const commentOpToolsId = `commentOpTools_${comment === null || comment === void 0 ? void 0 : comment.id}`;
-  const style = !isGlobalComment && isCollapseCommentEditor ? {
-    maxHeight: '341px'
-  } : {};
-  const deleteComment = (0, _react.useCallback)(async commentId => {
-    await _context.default.deleteComment(commentId);
-    let {
-      element_id: elementId,
-      element_id_list
-    } = comment.detail;
-    if (element_id_list) {
-      var _comment$detail;
-      elementId = element_id_list[0];
-      (0, _helper.updateCommentedElementsAttrs)(element_id_list, editor, (_comment$detail = comment.detail) === null || _comment$detail === void 0 ? void 0 : _comment$detail.text_comment_id, false, true);
-    }
-    dispatch({
-      type: 'DELETE_COMMENT',
-      payload: {
-        element_id: elementId,
-        comment_id: commentId
-      }
-    });
-    closeComment && closeComment();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [comment.detail, dispatch, editor]);
-  const updateComment = (0, _react.useCallback)(async (commentId, newComment) => {
-    await _context.default.updateComment(commentId, newComment);
-    const elementId = (0, _helper.getPrimaryElementId)(comment.detail);
-    dispatch({
-      type: 'UPDATE_COMMENT',
-      payload: {
-        element_id: elementId,
-        comment_id: commentId,
-        comment: newComment
-      }
-    });
-  }, [comment.detail, dispatch]);
-  const updateCommentState = (0, _react.useCallback)(async (commentId, newComment) => {
-    const time = (0, _dayjs.default)().format('YYYY-MM-DD HH:mm:ss');
-    const user = _context.default.getUserInfo();
-    const reply = {
-      type: 'comment',
-      reply: newComment.resolved,
-      updated_at: time,
-      author: user.username
-    };
-
-    // When updating comment status, add a new reply
-    const res = await _context.default.insertReply(commentId, reply);
-    const {
-      reply: returnReply
-    } = res.data;
-    const newReply = {
-      ...reply,
-      id: returnReply.id,
-      reply: returnReply.reply,
-      user_name: returnReply.user_name,
-      avatar_url: returnReply.avatar_url
-    };
-    const elementId = (0, _helper.getPrimaryElementId)(comment.detail);
-    if (newComment.resolved === true) {
-      const resolvedComment = commentsDetail ? Object.values(commentsDetail).find(comments => comments.id === commentId) : comment;
-      if (resolvedComment.detail.element_id_list) {
-        var _resolvedComment$deta;
-        (0, _helper.updateCommentedElementsAttrs)(resolvedComment.detail.element_id_list, editor, (_resolvedComment$deta = resolvedComment.detail) === null || _resolvedComment$deta === void 0 ? void 0 : _resolvedComment$deta.text_comment_id, !newComment.resolved);
-        closeComment && closeComment();
-      }
-      if (commentsDetail && Object.values(commentsDetail).length === 1) {
-        setIsClickedContextComment(false);
-        setIsCommentPanelVisible(false);
-      }
-    }
-    if (newComment.resolved === false && comment.detail.element_id_list) {
-      const unresolvedComment = commentsDetail ? Object.values(commentsDetail).find(comments => comments.id === commentId) : comment;
-      if (unresolvedComment.detail.element_id_list) {
-        var _unresolvedComment$de;
-        (0, _helper.updateCommentedElementsAttrs)(unresolvedComment.detail.element_id_list, editor, (_unresolvedComment$de = unresolvedComment.detail) === null || _unresolvedComment$de === void 0 ? void 0 : _unresolvedComment$de.text_comment_id, !newComment.resolved);
-      }
-    }
-    dispatch({
-      type: 'INSERT_REPLY',
-      payload: {
-        element_id: elementId,
-        comment_id: commentId,
-        reply: newReply
-      }
-    });
-
-    // Modify comment status
-    await _context.default.updateComment(commentId, newComment);
-    dispatch({
-      type: 'UPDATE_COMMENT_STATE',
-      payload: {
-        element_id: elementId,
-        comment_id: commentId,
-        comment: newComment
-      }
-    });
-
-    // If the status of the comment is set to resolved, the page jumps to the position of the comment
-    if (!isClickedContextComment && newComment.resolved === true) {
-      setTimeout(() => {
-        updateScrollPosition && updateScrollPosition();
-      }, 100);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [comment, commentsDetail, dispatch, editor, isClickedContextComment, setIsClickedContextComment, setIsCommentPanelVisible, updateScrollPosition]);
-  const insertReply = (0, _react.useCallback)(async (commentId, replies) => {
-    const elementId = (0, _helper.getPrimaryElementId)(comment.detail);
-    for (let i = 0; i < replies.length; i++) {
-      const reply = replies[i];
-      const res = await _context.default.insertReply(commentId, reply);
-      const {
-        reply: returnReply
-      } = res.data;
-      const newReply = {
-        ...reply,
-        id: returnReply.id,
-        comment_id: commentId,
-        reply: returnReply.reply,
-        user_name: returnReply.user_name,
-        avatar_url: returnReply.avatar_url
-      };
-      dispatch({
-        type: 'INSERT_REPLY',
-        payload: {
-          element_id: elementId,
-          comment_id: commentId,
-          reply: newReply
-        }
-      });
-    }
-
-    // If the number of replies is greater than one, it means that the comment needs to be resubmitted and the status of the comment should be modified
-    if (replies.length > 1) {
-      const newComment = {
-        resolved: false
-      };
-      await _context.default.updateComment(commentId, newComment);
-      dispatch({
-        type: 'UPDATE_COMMENT_STATE',
-        payload: {
-          element_id: elementId,
-          comment_id: commentId,
-          comment: newComment
-        }
-      });
-    }
-    setTimeout(() => {
-      const options = {
-        top: 10000,
-        behavior: 'smooth'
-      };
-      listRef.current.scrollTo(options);
-    }, 0);
-  }, [comment.detail, dispatch]);
-  const insertContent = (0, _react.useCallback)(content => {
-    const user = _context.default.getUserInfo();
-    const replies = [];
-
-    // The comment has already been resolved, when adding a new reply, resubmit the comment
-    if (comment.resolved) {
-      const time = (0, _dayjs.default)().format('YYYY-MM-DD HH:mm:ss');
-      const stateChangeReply = {
-        type: 'comment',
-        reply: false,
-        updated_at: time,
-        author: user.username
-      };
-      replies.push(stateChangeReply);
-    }
-
-    // User added reply
-    const time = (0, _dayjs.default)().format('YYYY-MM-DD HH:mm:ss');
-    const reply = {
-      type: 'reply',
-      reply: content,
-      updated_at: time,
-      author: user.username
-    };
-    replies.push(reply);
-    insertReply(comment.id, replies);
-  }, [comment.id, comment.resolved, insertReply]);
-  (0, _react.useImperativeHandle)(ref ? ref : commentDetailRef, () => ({
-    insertContent
-  }));
-  const deleteReply = (0, _react.useCallback)(async replyId => {
-    const commentId = comment.id;
-    const elementId = (0, _helper.getPrimaryElementId)(comment.detail);
-    await _context.default.deleteReply(commentId, replyId);
-    dispatch({
-      type: 'DELETE_REPLY',
-      payload: {
-        element_id: elementId,
-        comment_id: commentId,
-        reply_id: replyId
-      }
-    });
-  }, [comment.detail, comment.id, dispatch]);
-  const updateReply = (0, _react.useCallback)(async (replyId, newReply) => {
-    const commentId = comment.id;
-    const elementId = (0, _helper.getPrimaryElementId)(comment.detail);
-    await _context.default.updateReply(commentId, replyId, newReply);
-    dispatch({
-      type: 'UPDATE_REPLY',
-      payload: {
-        element_id: elementId,
-        comment_id: commentId,
-        reply_id: replyId,
-        reply: newReply
-      }
-    });
-  }, [comment.detail, comment.id, dispatch]);
-  const onItemClick = (0, _react.useCallback)(event => {
-    if (event.target.className === _constants.COMMENT_URL_CLASSNAME) return;
-    onCommentClick && onCommentClick(comment);
-  }, [comment, onCommentClick]);
-  const onDeleteComment = (0, _react.useCallback)(() => {
-    setIsShowDeletePopover(true);
-  }, []);
-  const _deleteComment = (0, _react.useCallback)(() => {
-    deleteComment(comment.id);
-    setIsShowDeletePopover(false);
-    setCurrentCommentGroup && setCurrentCommentGroup(null);
-    if (isClickedContextComment) {
-      if (Object.values(commentsDetail).length === 1) {
-        setIsClickedContextComment(false);
-        setIsCommentPanelVisible(false);
-      } else {
-        const newCommentIdArray = Object.values(commentsDetail).filter(item => item.id !== comment.id).map(item => item.detail.text_comment_id);
-        onSelectElement(newCommentIdArray, true);
-      }
-    }
-  }, [comment.id, commentsDetail, deleteComment, isClickedContextComment, onSelectElement, setCurrentCommentGroup, setIsClickedContextComment, setIsCommentPanelVisible]);
-  (0, _react.useEffect)(() => {
-    if (!isActive) {
-      setIsShowDeletePopover(false);
-    }
-  }, [isActive]);
-  const className = (0, _classnames.default)('comment-ui-container', {
-    'active': isActive,
-    'sdoc-resolved': comment === null || comment === void 0 ? void 0 : comment.resolved,
-    'd-flex flex-column': element,
-    'global-comment-item-detail-wrapper': isGlobalComment,
-    'comment-item-detail-wrapper': !isGlobalComment
-  });
-  const handleScrollToArticle = (0, _react.useCallback)(e => {
-    e.stopPropagation();
-    const dom = _slateReact.ReactEditor.toDOMNode(editor, element);
-    const headerHeight = 56 + 37;
-    scrollRef.current.scrollTo({
-      top: dom.offsetTop - headerHeight,
-      behavior: 'smooth'
-    });
-  }, [editor, element, scrollRef]);
-  const newCommentId = isClickedContextComment && comment !== null && comment !== void 0 && comment.detail.element_id_list ? comment === null || comment === void 0 ? void 0 : comment.detail.element_id_list[0] : comment === null || comment === void 0 ? void 0 : comment.id;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    id: `comment-item-wrapper_${newCommentId}`,
-    className: className,
-    onClick: onItemClick
-  }, element && /*#__PURE__*/_react.default.createElement("div", {
-    className: "comment-item-selected-text-container",
-    onClick: handleScrollToArticle
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "sdocfont sdoc-comment-quote mr-2"
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "comment-item-selected-text"
-  }, _slate.Node.string(element))), !isEmptyComment && /*#__PURE__*/_react.default.createElement("div", {
-    ref: listRef,
-    className: "comment-item-list",
-    style: style
-  }, comment.detail.element_id_list && !isGlobalComment && /*#__PURE__*/_react.default.createElement("div", {
-    className: "context-comment-item-selected-text-container"
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "sdocfont sdoc-comment-quote mr-2"
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "context-comment-items"
-  }, comment.detail.element_id_list.map((elementId, index) => {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "context-comment-item-selected-text",
-      key: index
-    }, (0, _helper.getCommentedTextsByElementId)(elementId, comment.detail.text_comment_id));
-  }))), /*#__PURE__*/_react.default.createElement(_commentItemContent.default, {
-    key: newCommentId,
-    container: container,
-    isActive: isActive,
-    comment: comment,
-    updateComment: updateComment,
-    updateCommentState: updateCommentState,
-    onDeleteComment: onDeleteComment,
-    targetId: commentOpToolsId,
-    isClickedContextComment: isClickedContextComment
-  }), isClickedContextComment && comment.replies && comment.replies.length > 0 && comment.replies.filter(item => item.type === 'reply').map(reply => {
-    const props = {
-      key: reply.id,
-      isActive,
-      container,
-      reply,
-      deleteReply,
-      updateReply
-    };
-    return /*#__PURE__*/_react.default.createElement(_commentItemReply.default, props);
-  }), !isClickedContextComment && comment.replies && comment.replies.length > 0 && comment.replies.filter(item => item.type === 'reply').map(reply => {
-    const props = {
-      key: reply.id,
-      isActive,
-      container,
-      reply,
-      deleteReply,
-      updateReply
-    };
-    return /*#__PURE__*/_react.default.createElement(_commentItemReply.default, props);
-  })), isShowDeletePopover && isActive && /*#__PURE__*/_react.default.createElement(_commentDeletePopover.default, {
-    type: "comment",
-    targetId: commentOpToolsId,
-    deleteConfirm: _deleteComment,
-    setIsShowDeletePopover: setIsShowDeletePopover,
-    parentDom: listRef.current
-  }));
-});
-var _default = exports.default = CommentItemWrapper;