@seafile/sdoc-editor 0.4.32 → 0.4.34

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

@@ -0,0 +1,47 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PopoverBody, UncontrolledPopover } from 'reactstrap';
+import './comment-list.css';
+const CommentDeletePopover = _ref => {
+  let {
+    type,
+    setIsShowDeleteModal,
+    deleteConfirm,
+    targetId,
+    parentDom
+  } = _ref;
+  const {
+    t
+  } = useTranslation();
+  const onDeleteCancel = useCallback(event => {
+    event.stopPropagation();
+    setIsShowDeleteModal(false);
+  }, [setIsShowDeleteModal]);
+  const handleConfirm = useCallback(event => {
+    event.stopPropagation();
+    deleteConfirm();
+  }, [deleteConfirm]);
+  const message = type === 'comment' ? 'comment' : 'reply';
+  const content = t("Are_you_sure_to_delete_this_".concat(message));
+  return /*#__PURE__*/React.createElement(UncontrolledPopover, {
+    container: parentDom,
+    target: targetId,
+    onClick: event => event.stopPropagation(),
+    placement: "bottom",
+    className: "comment-delete-popover",
+    isOpen: true
+  }, /*#__PURE__*/React.createElement(PopoverBody, {
+    className: "comment-delete-popover-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "delete-tip"
+  }, content), /*#__PURE__*/React.createElement("div", {
+    className: "delete-control mt-5"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "btn btn-secondary mr-2",
+    onClick: onDeleteCancel
+  }, t('Cancel')), /*#__PURE__*/React.createElement("button", {
+    className: "btn btn-primary",
+    onClick: handleConfirm
+  }, t('Confirm')))));
+};
+export default CommentDeletePopover;

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

@@ -15,7 +15,8 @@ const CommentItem = _ref => {
     updateComment,
     updateCommentState,
     onDeleteComment,
-    t
+    t,
+    targetId
   } = _ref;
   const [isDropdownOpen, setDropdownOpen] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
@@ -94,6 +95,7 @@ const CommentItem = _ref => {
   })), /*#__PURE__*/React.createElement(Tooltip, {
     target: "tooltip_".concat(menuId)
   }, t('Resolved_tip'))), /*#__PURE__*/React.createElement(Dropdown, {
+    id: targetId,
     isOpen: isDropdownOpen,
     toggle: () => setDropdownOpen(!isDropdownOpen)
   }, /*#__PURE__*/React.createElement(DropdownToggle, {

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

@@ -1,12 +1,12 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useRef } from 'react';
 import { withTranslation } from 'react-i18next';
 import { Dropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
 import dayjs from 'dayjs';
 import context from '../../../context';
 import CommentEditor from './comment-editor';
-import CommentDeleteShadow from './comment-delete-shadow';
 import { textToHtml } from '../utils';
 import { useNotificationContext } from '../hooks/notification-hooks';
+import CommentDeletePopover from './comment-delete-popover';
 const CommentItemReply = _ref => {
   let {
     isActive,
@@ -20,8 +20,10 @@ const CommentItemReply = _ref => {
   const {
     notificationsInfo
   } = useNotificationContext();
+  const liRef = useRef(null);
   const isUnseen = notificationsInfo.notifications_map["sdoc_notification_".concat(reply.comment_id, "_").concat(reply.id)] ? true : false;
   const [isEditing, setIsEditing] = useState(false);
+  const replyOpToolsId = "replyOpTools_".concat(reply.id);
   const onEditToggle = useCallback(event => {
     event.stopPropagation();
     setIsEditing(true);
@@ -48,7 +50,8 @@ const CommentItemReply = _ref => {
   }, [reply, updateReply]);
   const user = context.getUserInfo();
   return /*#__PURE__*/React.createElement("li", {
-    className: "comment-item"
+    className: "comment-item",
+    ref: liRef
   }, /*#__PURE__*/React.createElement("div", {
     className: "comment-header"
   }, /*#__PURE__*/React.createElement("div", {
@@ -69,6 +72,7 @@ const CommentItemReply = _ref => {
   }), /*#__PURE__*/React.createElement("span", {
     className: "sdoc-unread-message-text-tip"
   }, t('New')))))), isActive && user.username === reply.author && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, {
+    id: replyOpToolsId,
     isOpen: isDropdownOpen,
     toggle: () => setDropdownOpen(!isDropdownOpen)
   }, /*#__PURE__*/React.createElement(DropdownToggle, {
@@ -99,10 +103,12 @@ const CommentItemReply = _ref => {
     content: reply.reply,
     updateContent: updateContent,
     setIsEditing: setIsEditing
-  }), isShowDeleteDialog && isActive && /*#__PURE__*/React.createElement(CommentDeleteShadow, {
+  }), isShowDeleteDialog && isActive && /*#__PURE__*/React.createElement(CommentDeletePopover, {
+    parentDom: liRef.current,
     type: "reply",
     deleteConfirm: _deleteReply,
-    setIsShowDeleteModal: setIsShowDeleteDialog
+    setIsShowDeleteModal: setIsShowDeleteDialog,
+    targetId: replyOpToolsId
   }));
 };
 export default withTranslation('sdoc-editor')(CommentItemReply);

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

@@ -9,8 +9,8 @@ import CommentItemContent from './comment-item-content';
 import CommentItemReply from './comment-item-reply';
 import CommentEditor from './comment-editor';
 import CommentItemResolvedReply from './comment-item-resolved-reply';
-import CommentDeleteShadow from './comment-delete-shadow';
 import { COMMENT_URL_CLASSNAME } from '../constants';
+import CommentDeletePopover from './comment-delete-popover';
 const CommentItemWrapper = _ref => {
   let {
     container,
@@ -25,6 +25,7 @@ const CommentItemWrapper = _ref => {
   const {
     dispatch
   } = useCommentContext();
+  const commentOpToolsId = "commentOpTools_".concat(comment.id);
   const deleteComment = useCallback(async commentId => {
     await context.deleteComment(commentId);
     const {
@@ -253,7 +254,8 @@ const CommentItemWrapper = _ref => {
     comment: comment,
     updateComment: updateComment,
     updateCommentState: updateCommentState,
-    onDeleteComment: onDeleteComment
+    onDeleteComment: onDeleteComment,
+    targetId: commentOpToolsId
   }), comment.replies && comment.replies.length > 0 && comment.replies.map(reply => {
     const {
       type
@@ -281,10 +283,13 @@ const CommentItemWrapper = _ref => {
     placeholder: tip,
     insertContent: insertContent,
     hiddenComment: hiddenComment
-  }), isShowDeleteDialog && isActive && /*#__PURE__*/React.createElement(CommentDeleteShadow, {
-    type: 'comment',
+  }), isShowDeleteDialog && isActive && /*#__PURE__*/React.createElement(CommentDeletePopover, {
+    type: "comment",
+    setIsShowDeleteDialog: setIsShowDeleteDialog,
+    targetId: commentOpToolsId,
     deleteConfirm: _deleteComment,
-    setIsShowDeleteModal: setIsShowDeleteDialog
+    setIsShowDeleteModal: setIsShowDeleteDialog,
+    parentDom: listRef.current
   }));
 };
 CommentItemWrapper.defaultProps = {

package/dist/basic-sdk/comment/components/comment-list.css

@@ -5,7 +5,7 @@
 .sdoc-comment-list-container .comment-ui-container {
   background-color: #edf2fa;
   border-radius: 8px;
-  box-shadow: 0 0 2px rgba(0,0,0,.04);
+  box-shadow: 0 0 2px rgba(0, 0, 0, .04);
   padding: 16px 0;
   margin-bottom: 10px;
   cursor: pointer;
@@ -15,7 +15,7 @@
   position: relative;
   left: -24px;
   background: rgba(255, 255, 255, .92);
-  box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 8px 3px rgba(0,0,0,.15);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 8px 3px rgba(0, 0, 0, .15);
 }
 
 .sdoc-comment-list-container .comment-item-selected-text-container {
@@ -55,20 +55,14 @@
   cursor: pointer;
 }
 
-.sdoc-comment-list-container .comment-delete-shadow {
-  position: absolute;
-  inset: 0;
-  background-color: rgba(0, 0, 0, .7);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-top: 10px;
-  color: #fff;
-  z-index: 1;
+.comment-delete-popover .comment-delete-popover-container {
+  padding: 16px;
 }
 
-.sdoc-comment-list-container .comment-delete-shadow .delete-tip {
-  margin-bottom: 10px;
+.comment-delete-popover-container .delete-control {
+  display: flex;
+  justify-content: end;
+  width: 100%;
 }
 
 .sdoc-comment-list-container .comment-ui-container.active .comment-item:hover {

package/dist/basic-sdk/extension/plugins/callout/render-elem/index.css

@@ -30,6 +30,9 @@
   width: 24px;
   line-height: 24px;
   font-size: 21px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .sdoc-emoji.wraning {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "0.4.32",
+  "version": "0.4.34",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",

package/dist/basic-sdk/comment/components/comment-delete-shadow.js

@@ -1,39 +0,0 @@
-import React, { useCallback } from 'react';
-import { withTranslation } from 'react-i18next';
-import { Button } from 'reactstrap';
-const CommentDeleteShadow = _ref => {
-  let {
-    type,
-    setIsShowDeleteModal,
-    deleteConfirm,
-    t
-  } = _ref;
-  const onDeleteCancel = useCallback(event => {
-    event.stopPropagation();
-    setIsShowDeleteModal(false);
-  }, [setIsShowDeleteModal]);
-  const onDeleteConfirm = useCallback(event => {
-    event.stopPropagation();
-    deleteConfirm();
-  }, [deleteConfirm]);
-  const message = type === 'comment' ? 'comment' : 'reply';
-  const content = t("Are_you_sure_to_delete_this_".concat(message));
-  return /*#__PURE__*/React.createElement("div", {
-    className: "comment-delete-shadow"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "delete-tip"
-  }, content), /*#__PURE__*/React.createElement("div", {
-    className: "delete-control"
-  }, /*#__PURE__*/React.createElement(Button, {
-    color: "secondary",
-    className: "mr-2",
-    onClick: onDeleteCancel
-  }, t('Cancel')), /*#__PURE__*/React.createElement(Button, {
-    color: "primary",
-    onClick: onDeleteConfirm
-  }, t('Confirm'))));
-};
-CommentDeleteShadow.defaultProps = {
-  type: 'comment'
-};
-export default withTranslation('sdoc-editor')(CommentDeleteShadow);