@seafile/sdoc-editor 2.0.82 → 2.0.83

package/dist/comment/components/comment-all-participants/index.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _slateReact = require("@seafile/slate-react");
+var _tooltip = _interopRequireDefault(require("../../../components/tooltip"));
+var _useParticipants = require("../../hooks/use-participants");
+var _commentParticipantsEditor = _interopRequireDefault(require("../comment-participants-editor"));
+var _participantAvatar = _interopRequireDefault(require("./participant-avatar"));
+require("./index.css");
+var CommentAllParticipants = function CommentAllParticipants() {
+  var popoverRef = (0, _react.useRef)();
+  var _useParticipantsConte = (0, _useParticipants.useParticipantsContext)(),
+    participants = _useParticipantsConte.participants;
+  var editor = (0, _slateReact.useSlateStatic)();
+  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
+    t = _useTranslation.t;
+  var addParticipantId = 'sdoc-add-participants';
+  var commentsParticipantsId = 'sdoc-comments-participants';
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isDidMount = _useState2[0],
+    setDidMount = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setDidMount(true);
+  }, []);
+  var toggle = (0, _react.useCallback)(function () {
+    popoverRef.current && popoverRef.current.toggle();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [popoverRef.current]);
+  var participantsCount = participants.length;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "comments-participants-container"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "comments-participants-editor-target",
+    id: commentsParticipantsId
+  }), participants.slice(0, 14).map(function (participant, index) {
+    var username = participant.username;
+    return /*#__PURE__*/_react["default"].createElement(_participantAvatar["default"], {
+      key: username,
+      participant: participant,
+      index: index,
+      showMore: participantsCount > 13 && index === 13
+    });
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "add-comments-participants",
+    id: addParticipantId,
+    onClick: toggle
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont sdoc-add"
+  })), isDidMount && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    target: addParticipantId
+  }, t('Add_participants'))), isDidMount && /*#__PURE__*/_react["default"].createElement(_commentParticipantsEditor["default"], {
+    target: commentsParticipantsId,
+    ref: popoverRef,
+    editor: editor
+  }));
+};
+var _default = exports["default"] = CommentAllParticipants;

package/dist/comment/components/comment-all-participants/participant-avatar.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _tooltip = _interopRequireDefault(require("../../../components/tooltip"));
+var ParticipantAvatar = function ParticipantAvatar(_ref) {
+  var participant = _ref.participant,
+    index = _ref.index,
+    showMore = _ref.showMore;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    showTooltip = _useState2[0],
+    setShowTooltip = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setShowTooltip(true);
+  }, []);
+  var name = participant.name,
+    avatar_url = participant.avatar_url;
+  var id = "comment-participant-avatar-".concat(index, "-").concat(Math.floor(Math.random() * 1000));
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])('comment-participant-avatar', {
+      'position-relative': showMore
+    }),
+    id: id
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    src: avatar_url,
+    alt: ""
+  }), showTooltip && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    target: id
+  }, name), showMore && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "comment-participants-more"
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont sdoc-more"
+  })));
+};
+var _default = exports["default"] = ParticipantAvatar;

package/dist/comment/components/comment-context-menu/index.js

@@ -0,0 +1,36 @@
+"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 _constants = require("../../../constants");
+var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
+var _menuItem = _interopRequireDefault(require("./menu-item"));
+require("./index.css");
+var CommentContextMenu = function CommentContextMenu(_ref) {
+  var isRichEditor = _ref.isRichEditor;
+  var onCommentClick = (0, _react.useCallback)(function (event) {
+    var eventBus = _eventBus["default"].getInstance();
+    eventBus.dispatch(_constants.INTERNAL_EVENT.ADD_CONTEXT_COMMENT);
+  }, []);
+  var commentProps = {
+    id: 'context-toolbar-comment',
+    isRichEditor: isRichEditor,
+    className: 'menu-group-item sdoc-comment-menu-container',
+    disabled: false,
+    isActive: false,
+    onMouseDown: onCommentClick,
+    iconClass: 'sdocfont sdoc-comments',
+    text: 'Comment',
+    ariaLabel: 'Add_Comment',
+    type: 'sdoc-add-comment'
+  };
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-context-menu-divider"
+  }), /*#__PURE__*/_react["default"].createElement(_menuItem["default"], commentProps));
+};
+var _default = exports["default"] = CommentContextMenu;

package/dist/comment/components/comment-context-menu/menu-item.js

@@ -0,0 +1,56 @@
+"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 _classnames = _interopRequireDefault(require("classnames"));
+var _tooltip = _interopRequireDefault(require("../../../components/tooltip"));
+var MenuItem = function MenuItem(_ref) {
+  var _ref$isRichEditor = _ref.isRichEditor,
+    isRichEditor = _ref$isRichEditor === void 0 ? true : _ref$isRichEditor,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? 'menu-group-item' : _ref$className,
+    disabled = _ref.disabled,
+    isActive = _ref.isActive,
+    type = _ref.type,
+    onMouseDown = _ref.onMouseDown,
+    id = _ref.id,
+    text = _ref.text,
+    ariaLabel = _ref.ariaLabel,
+    iconClass = _ref.iconClass;
+  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
+    t = _useTranslation.t;
+  var onClick = (0, _react.useCallback)(function (event) {
+    if (disabled) return;
+    onMouseDown(event, type);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [disabled, type]);
+  var validClassName = (0, _classnames["default"])('', className, {
+    'btn btn-icon btn-secondary btn-active': !isRichEditor,
+    'rich-icon-btn': isRichEditor,
+    'rich-icon-btn-disabled': isRichEditor && disabled,
+    'rich-icon-btn-hover': isRichEditor && !disabled
+  });
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("button", {
+    id: id,
+    type: "button",
+    "aria-label": ariaLabel,
+    className: validClassName,
+    disabled: disabled,
+    "data-active": isActive,
+    onClick: onClick
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "sdoc-comment-menu-item"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: iconClass
+  }), /*#__PURE__*/_react["default"].createElement("span", null, t(text)))), /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    target: id
+  }, t(ariaLabel)));
+};
+var _default = exports["default"] = MenuItem;

package/dist/comment/components/comment-delete-popover.js

@@ -0,0 +1,79 @@
+"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 _isHotkey = _interopRequireDefault(require("is-hotkey"));
+var _utils = require("../utils");
+require("./comment-list.css");
+var CommentDeletePopover = function CommentDeletePopover(_ref) {
+  var type = _ref.type,
+    setIsShowDeletePopover = _ref.setIsShowDeletePopover,
+    deleteConfirm = _ref.deleteConfirm,
+    targetId = _ref.targetId,
+    parentDom = _ref.parentDom;
+  var popoverRef = (0, _react.useRef)(null);
+  var hide = (0, _react.useCallback)(function (event) {
+    if (popoverRef.current && !(0, _utils.getEventClassName)(event).includes('popover') && !popoverRef.current.contains(event.target)) {
+      setIsShowDeletePopover(false);
+      event.preventDefault();
+      event.stopPropagation();
+      return false;
+    }
+  }, [setIsShowDeletePopover]);
+  var onHotKey = (0, _react.useCallback)(function (event) {
+    if ((0, _isHotkey["default"])('esc', event)) {
+      event.preventDefault();
+      setIsShowDeletePopover(false);
+    }
+  }, [setIsShowDeletePopover]);
+  (0, _react.useEffect)(function () {
+    document.addEventListener('click', hide, true);
+    document.addEventListener('keydown', onHotKey);
+    return function () {
+      document.removeEventListener('click', hide, true);
+      document.removeEventListener('keydown', onHotKey);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
+    t = _useTranslation.t;
+  var onDeleteCancel = (0, _react.useCallback)(function (event) {
+    event.stopPropagation();
+    setIsShowDeletePopover(false);
+  }, [setIsShowDeletePopover]);
+  var handleConfirm = (0, _react.useCallback)(function (event) {
+    event.stopPropagation();
+    deleteConfirm();
+  }, [deleteConfirm]);
+  return /*#__PURE__*/_react["default"].createElement(_reactstrap.UncontrolledPopover, {
+    container: parentDom,
+    target: targetId,
+    onClick: function onClick(event) {
+      return event.stopPropagation();
+    },
+    placement: "left",
+    className: "comment-delete-popover",
+    isOpen: true
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "comment-delete-popover-container",
+    ref: popoverRef
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "delete-tip"
+  }, t("Are_you_sure_to_delete_this_".concat(type === 'comment' ? 'comment' : 'reply'))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "delete-control mt-5"
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    className: "btn btn-secondary mr-2",
+    onClick: onDeleteCancel
+  }, t('Cancel')), /*#__PURE__*/_react["default"].createElement("button", {
+    className: "btn btn-primary",
+    onClick: handleConfirm
+  }, t('Confirm')))));
+};
+var _default = exports["default"] = CommentDeletePopover;

package/dist/comment/components/comment-editor.js

@@ -0,0 +1,162 @@
+"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 _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _constants = require("../../constants");
+var _context = _interopRequireDefault(require("../../context"));
+var _sdocCommentEditor = _interopRequireDefault(require("../../editor/sdoc-comment-editor"));
+var _extension = require("../../extension");
+var _constants2 = require("../../extension/constants");
+var _core = require("../../extension/core");
+var _nodeId = _interopRequireDefault(require("../../node-id"));
+var _mdToSlate = _interopRequireDefault(require("../../slate-convert/md-to-slate"));
+var _slateToMd = _interopRequireDefault(require("../../slate-convert/slate-to-md"));
+var _eventBus = _interopRequireDefault(require("../../utils/event-bus"));
+var _useParticipants = require("../hooks/use-participants");
+var getSubmitTip = function getSubmitTip(type, content) {
+  if (content) return 'Save';
+  return type === 'comment' ? 'Comment' : 'Reply';
+};
+var DEFAULT_PLACEHOLDER = 'Enter_comment_shift_enter_for_new_line_Enter_to_send';
+var CommentEditor = function CommentEditor(_ref) {
+  var type = _ref.type,
+    className = _ref.className,
+    content = _ref.content,
+    commentContent = _ref.commentContent,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? DEFAULT_PLACEHOLDER : _ref$placeholder,
+    insertContent = _ref.insertContent,
+    updateContent = _ref.updateContent,
+    setIsEditing = _ref.setIsEditing,
+    hiddenComment = _ref.hiddenComment,
+    hiddenUserInfo = _ref.hiddenUserInfo,
+    onContentChange = _ref.onContentChange,
+    isContextComment = _ref.isContextComment,
+    closeComment = _ref.closeComment;
+  var commentWrapperRef = (0, _react.useRef)();
+  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
+    t = _useTranslation.t;
+  var _useParticipantsConte = (0, _useParticipants.useParticipantsContext)(),
+    addParticipants = _useParticipantsConte.addParticipants;
+  var submitTip = (0, _react.useMemo)(function () {
+    return getSubmitTip(type, content);
+  }, [content, type]);
+  var userInfo = _context["default"].getUserInfo();
+  var document = (0, _react.useMemo)(function () {
+    var cursor = {};
+    var elements = null;
+    elements = [(0, _core.generateEmptyElement)(_constants2.PARAGRAPH, {
+      placeholder: placeholder
+    })];
+    return {
+      elements: elements,
+      cursor: cursor
+    };
+  }, [placeholder]);
+  var editor = (0, _react.useMemo)(function () {
+    var defaultEditor = (0, _extension.createCommentEditor)();
+    var newEditor = (0, _nodeId["default"])(defaultEditor);
+    var cursors = document.cursors;
+    newEditor.cursors = cursors || {};
+    newEditor.width = _constants.COMMENT_EDITOR_EDIT_AREA_WIDTH; // default width
+    newEditor.editorType = _constants.COMMENT_EDITOR;
+    return newEditor;
+  }, [document]);
+  var updateValue = (0, _react.useCallback)(function (value) {
+    if (!value || value.trim() === '') return;
+    if (!content) return insertContent(value);
+    updateContent && updateContent(value);
+  }, [content, insertContent, updateContent]);
+  var onSubmit = (0, _react.useCallback)(function (event) {
+    event && event.stopPropagation();
+    var mdString = (0, _slateToMd["default"])(editor.children);
+    updateValue(mdString);
+    addParticipants(userInfo.username);
+    editor.children = [(0, _core.generateEmptyElement)(_constants2.PARAGRAPH, {
+      placeholder: placeholder
+    })];
+    _slate.Transforms.select(editor, _slate.Editor.start(editor, []));
+    onContentChange && onContentChange(null);
+    closeComment && closeComment();
+  }, [editor, updateValue, addParticipants, userInfo.username, placeholder, onContentChange, closeComment]);
+  var onSubmitByEnterKey = (0, _react.useCallback)(function (event) {
+    if (!_slateReact.ReactEditor.isFocused(editor)) return;
+    onSubmit(event);
+  }, [editor, onSubmit]);
+  (0, _react.useEffect)(function () {
+    var eventBus = _eventBus["default"].getInstance();
+    var unsubscribePostComment = eventBus.subscribe(_constants.INTERNAL_EVENT.COMMENT_EDITOR_POST_COMMENT, onSubmitByEnterKey);
+    return function () {
+      unsubscribePostComment();
+    };
+  }, [onSubmitByEnterKey]);
+  var onCancel = (0, _react.useCallback)(function (event) {
+    event.stopPropagation();
+    var eventType = event.type,
+      keyCode = event.keyCode,
+      target = event.target;
+    if (eventType === 'keydown' && keyCode !== _constants.KeyCodes.Esc) return;
+    if (eventType === 'click') {
+      var isSdocContentWrapper = target.classList.contains('sdoc-content-wrapper');
+      var listContainer = window.document.querySelector('#global-comment-list-container');
+      var resizeContainer = window.document.querySelector('.sdoc-comment-resize-handler');
+      var isClickOnListContainer = listContainer && listContainer.contains(target);
+      var isClickOnCommentEditorContainer = commentWrapperRef.current.contains(target);
+      var isClickResizeContainer = resizeContainer && resizeContainer.contains(target);
+      var isPreventCancel = isClickOnListContainer || isClickOnCommentEditorContainer || isClickResizeContainer || isSdocContentWrapper;
+      if (isPreventCancel) return;
+    }
+    setIsEditing && setIsEditing(false);
+    hiddenComment && hiddenComment(false);
+    if (onContentChange) {
+      if (editor.children.find(function (n) {
+        return _slate.Node.string(n).trim();
+      })) {
+        onContentChange((0, _slateToMd["default"])(editor.children));
+      } else {
+        onContentChange(null);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setIsEditing]);
+  (0, _react.useEffect)(function () {
+    var children = (0, _mdToSlate["default"])(content);
+    if (commentContent) {
+      children = (0, _mdToSlate["default"])(commentContent);
+    }
+    editor.children = children;
+    _slate.Transforms.select(editor, _slate.Editor.end(editor, []));
+  }, [editor, content, commentContent]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])('comment-editor-wrapper', className),
+    ref: commentWrapperRef
+  }, type === 'comment' && !hiddenUserInfo && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "comment-editor-user-info"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "comment-editor-user-img"
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    src: userInfo.avatar_url,
+    alt: "",
+    height: "100%",
+    width: "100%"
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "comment-editor-user-name"
+  }, userInfo.name)), /*#__PURE__*/_react["default"].createElement(_sdocCommentEditor["default"], {
+    editor: editor,
+    type: type,
+    document: document,
+    onSubmit: onSubmit,
+    submitBtnText: t(submitTip),
+    onCancel: onCancel
+  }));
+};
+var _default = exports["default"] = CommentEditor;

package/dist/comment/components/comment-item-collapse-wrapper.js

@@ -0,0 +1,203 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _mdToHtml = _interopRequireDefault(require("../../slate-convert/md-to-html"));
+var _constants = require("../constants");
+var _helper = require("../helper");
+var _notificationHooks = require("../hooks/notification-hooks");
+var CommentItemCollapseWrapper = function CommentItemCollapseWrapper(_ref) {
+  var _topLevelComment$deta;
+  var element = _ref.element,
+    topLevelComment = _ref.topLevelComment,
+    latestReply = _ref.latestReply,
+    editor = _ref.editor,
+    replyCount = _ref.replyCount,
+    setCurrentCommentGroup = _ref.setCurrentCommentGroup,
+    t = _ref.t;
+  var scrollRef = (0, _react.useRef)(document.querySelector('.sdoc-scroll-container'));
+  var _useNotificationConte = (0, _notificationHooks.useNotificationContext)(),
+    notificationsInfo = _useNotificationConte.notificationsInfo;
+  var _useState = (0, _react.useState)(''),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    commentContent = _useState2[0],
+    setCommentContent = _useState2[1];
+  var _useState3 = (0, _react.useState)(''),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    replyContent = _useState4[0],
+    setReplyContent = _useState4[1];
+  var isUnseen = notificationsInfo.notifications_map["sdoc_notification_".concat(topLevelComment.id)] ? true : false;
+  var isReplayUnseen = (0, _react.useMemo)(function () {
+    if (!latestReply) return false;
+    var isUnseen = notificationsInfo.notifications_map["sdoc_notification_".concat(topLevelComment.id, "_").concat(latestReply.id)] ? true : false;
+    return isUnseen;
+  }, [latestReply, notificationsInfo.notifications_map, topLevelComment.id]);
+  (0, _react.useEffect)(function () {
+    var initCommentContent = /*#__PURE__*/function () {
+      var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee() {
+        var htmlString;
+        return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return _mdToHtml["default"].process(topLevelComment.comment);
+            case 2:
+              htmlString = _context.sent;
+              setCommentContent(String(htmlString));
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function initCommentContent() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    initCommentContent();
+  }, [topLevelComment.comment]);
+  (0, _react.useEffect)(function () {
+    var initReplyContent = /*#__PURE__*/function () {
+      var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee2() {
+        var mdString, htmlString;
+        return (0, _regeneratorRuntime2["default"])().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              if (latestReply) {
+                _context2.next = 3;
+                break;
+              }
+              setReplyContent('');
+              return _context2.abrupt("return");
+            case 3:
+              mdString = '';
+              if (latestReply.reply) {
+                mdString = latestReply.reply;
+              } else {
+                mdString = '';
+              }
+              _context2.next = 7;
+              return _mdToHtml["default"].process(mdString);
+            case 7:
+              htmlString = _context2.sent;
+              setReplyContent(String(htmlString));
+            case 9:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function initReplyContent() {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+    initReplyContent();
+  }, [latestReply, t]);
+  var handleScrollToArticle = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
+    var dom = _slateReact.ReactEditor.toDOMNode(editor, element);
+    var headerHeight = 56 + 37;
+    scrollRef.current.scrollTo({
+      top: dom.offsetTop - headerHeight,
+      behavior: 'smooth'
+    });
+  }, [editor, element, scrollRef]);
+  var onItemClick = (0, _react.useCallback)(function (event) {
+    event.stopPropagation();
+    if (event.target.className === _constants.COMMENT_URL_CLASSNAME) return;
+    setCurrentCommentGroup(topLevelComment.id);
+  }, [setCurrentCommentGroup, topLevelComment.id]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    id: "comment-item-wrapper_".concat(topLevelComment.id),
+    className: (0, _classnames["default"])('comment-collapse-wrapper', 'comment-ui-container', {
+      'sdoc-resolved': topLevelComment.resolved,
+      'd-flex flex-column': element
+    }),
+    onClick: onItemClick
+  }, topLevelComment.detail.element_id_list && /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])('comment-item-selected-text-container', {
+      'detail-context-comment': ((_topLevelComment$deta = topLevelComment.detail.element_id_list) === null || _topLevelComment$deta === void 0 ? void 0 : _topLevelComment$deta.length) > 0
+    }),
+    onClick: handleScrollToArticle
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont sdoc-comment-quote mr-2"
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "comment-item-selected-text"
+  }, topLevelComment.detail.element_id_list.map(function (elementId, index) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "context-comment-item-selected-text",
+      key: index
+    }, (0, _helper.getCommentedTextsByElementId)(elementId, topLevelComment.detail.text_comment_id));
+  }))), 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))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "comment-item-list"
+  }, /*#__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: topLevelComment.avatar_url
+  })), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "comment-author__info"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "name"
+  }, topLevelComment.user_name), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "time"
+  }, (0, _dayjs["default"])(topLevelComment.updated_at).format('MM-DD HH:mm'), (topLevelComment === null || topLevelComment === void 0 ? void 0 : topLevelComment.resolved) && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "comment-success-resolved sdocfont sdoc-mark-as-resolved"
+  })))), (isUnseen || isReplayUnseen) && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-unread-message-tip"
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "comment-content"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: commentContent
+    }
+  })), replyCount !== 0 && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "comment-footer"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "comments-count"
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont sdoc-comments"
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "comments-count-number"
+  }, replyCount)), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "comment-author"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "comment-author__avatar"
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    alt: "",
+    src: latestReply.avatar_url
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "comment-author__latest-reply"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: replyContent
+    }
+  })))))));
+};
+var _default = exports["default"] = (0, _reactI18next.withTranslation)('sdoc-editor')(CommentItemCollapseWrapper);