@seafile/sdoc-editor 0.1.105 → 0.1.106

package/dist/basic-sdk/comment/comment/comment-editor.js

@@ -1,20 +1,33 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useCallback, useRef, useState } from 'react';
+import classNames from 'classnames';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { withTranslation } from 'react-i18next';
+import { Button } from 'reactstrap';
+var getSubmitTip = function getSubmitTip(type, content) {
+  if (content) return 'Save';
+  return type === 'comment' ? 'Comment' : 'Reply';
+};
 var CommentEditor = function CommentEditor(_ref) {
-  var content = _ref.content,
+  var type = _ref.type,
+    className = _ref.className,
+    content = _ref.content,
     placeholder = _ref.placeholder,
     insertContent = _ref.insertContent,
     updateContent = _ref.updateContent,
     setIsEditing = _ref.setIsEditing,
     t = _ref.t;
-  var inputRef = useRef();
-  var _useState = useState(content || ''),
+  var commentRef = useRef();
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    value = _useState2[0],
-    setValue = _useState2[1];
-  var onChange = useCallback(function (event) {
-    setValue(event.target.value);
+    isFocus = _useState2[0],
+    setIsFocus = _useState2[1];
+
+  // onMount
+  useEffect(function () {
+    if (content) {
+      commentRef.current.innerHTML = content;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   var updateValue = useCallback(function (value) {
     if (!value || value.trim() === '') return;
@@ -24,30 +37,53 @@ var CommentEditor = function CommentEditor(_ref) {
     }
     updateContent(value);
   }, [content, insertContent, updateContent]);
-  var onBlur = useCallback(function () {
+  var onSubmit = useCallback(function (event) {
+    event && event.stopPropagation();
+    var value = commentRef.current.innerHTML;
     updateValue(value);
-    setValue('');
-  }, [updateValue, value]);
+    commentRef.current.innerHTML = '';
+  }, [updateValue]);
+  var onCancel = useCallback(function (event) {
+    event.stopPropagation();
+    setIsFocus(false);
+    commentRef.current.innerHTML = '';
+    setIsEditing && setIsEditing(false);
+  }, [setIsEditing]);
   var onKeyDown = useCallback(function (event) {
     // enter
     if (event.keyCode === 13) {
-      inputRef.current.blur();
+      event.preventDefault();
+      onSubmit();
     }
     if (event.keyCode === 27) {
-      setValue('');
-      setIsEditing && setIsEditing(false);
+      event.preventDefault();
+      onCancel();
     }
-  }, [setIsEditing]);
+  }, [onCancel, onSubmit]);
   placeholder = t(placeholder);
-  return /*#__PURE__*/React.createElement("input", {
-    ref: inputRef,
+  var submitTip = useMemo(function () {
+    return getSubmitTip(type, content);
+  }, [content, type]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('comment-editor-wrapper', className)
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: commentRef,
+    contentEditable: "true",
     className: "comment-editor",
-    value: value,
     placeholder: placeholder,
-    onChange: onChange,
     onKeyDown: onKeyDown,
-    onBlur: onBlur
-  });
+    onFocus: function onFocus() {
+      return setIsFocus(true);
+    }
+  }), isFocus && /*#__PURE__*/React.createElement("div", {
+    className: "editor-operations"
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: "mr-2",
+    onClick: onCancel
+  }, t('Cancel')), /*#__PURE__*/React.createElement(Button, {
+    color: "primary",
+    onClick: onSubmit
+  }, t(submitTip))));
 };
 CommentEditor.defaultProps = {
   placeholder: 'Enter_a_comment'

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

@@ -1,6 +1,6 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { withTranslation } from 'react-i18next';
 import { Dropdown, DropdownItem, DropdownMenu, DropdownToggle, UncontrolledTooltip } from 'reactstrap';
 import dayjs from 'dayjs';
@@ -121,10 +121,11 @@ var CommentItem = function CommentItem(_ref) {
     onClick: resubmit
   }, t('Resubmit')))))), /*#__PURE__*/React.createElement("div", {
     className: "comment-content"
-  }, isEditing && /*#__PURE__*/React.createElement(CommentEditor, {
+  }, !isEditing && /*#__PURE__*/React.createElement(React.Fragment, null, comment.comment)), isEditing && /*#__PURE__*/React.createElement(CommentEditor, {
+    className: 'pb-3',
     content: comment.comment,
     updateContent: updateContent,
     setIsEditing: setIsEditing
-  }), !isEditing && /*#__PURE__*/React.createElement(React.Fragment, null, comment.comment)));
+  }));
 };
 export default withTranslation('sdoc-editor')(CommentItem);

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

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { withTranslation } from 'react-i18next';
-import { Dropdown, DropdownItem, DropdownMenu, DropdownToggle, PopoverBody, UncontrolledPopover } from 'reactstrap';
+import { Dropdown, DropdownItem, DropdownMenu, DropdownToggle } from 'reactstrap';
 import dayjs from 'dayjs';
 import context from '../../../context';
 import CommentEditor from './comment-editor';
@@ -86,11 +86,13 @@ var CommentItemReply = function CommentItemReply(_ref) {
     onClick: onDeleteToggle
   }, t('Delete')))))), /*#__PURE__*/React.createElement("div", {
     className: "comment-content"
-  }, isEditing && /*#__PURE__*/React.createElement(CommentEditor, {
+  }, !isEditing && /*#__PURE__*/React.createElement(React.Fragment, null, reply.reply)), isEditing && /*#__PURE__*/React.createElement(CommentEditor, {
+    className: 'pb-3',
+    type: "reply",
     content: reply.reply,
     updateContent: updateContent,
     setIsEditing: setIsEditing
-  }), !isEditing && /*#__PURE__*/React.createElement(React.Fragment, null, reply.reply)), isShowDeleteDialog && isActive && /*#__PURE__*/React.createElement(CommentDeleteShadow, {
+  }), isShowDeleteDialog && isActive && /*#__PURE__*/React.createElement(CommentDeleteShadow, {
     type: "reply",
     deleteConfirm: _deleteReply,
     setIsShowDeleteModal: setIsShowDeleteDialog

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

@@ -198,7 +198,11 @@ export default function CommentItemWrapper(_ref) {
             });
           case 18:
             setTimeout(function () {
-              listRef.current.scrollTop = 10000;
+              var options = {
+                top: 10000,
+                behavior: 'smooth'
+              };
+              listRef.current.scrollTo(options);
             }, 0);
           case 19:
           case "end":
@@ -352,12 +356,12 @@ export default function CommentItemWrapper(_ref) {
       key: reply.id,
       reply: reply
     });
-  })), isActive && /*#__PURE__*/React.createElement("div", {
-    className: "comment-editor-wrapper mt-4"
-  }, /*#__PURE__*/React.createElement(CommentEditor, {
+  })), isActive && /*#__PURE__*/React.createElement(CommentEditor, {
+    className: "mt-4",
+    type: "reply",
     placeholder: tip,
     insertContent: insertContent
-  })), isShowDeleteDialog && isActive && /*#__PURE__*/React.createElement(CommentDeleteShadow, {
+  }), isShowDeleteDialog && isActive && /*#__PURE__*/React.createElement(CommentDeleteShadow, {
     type: 'comment',
     deleteConfirm: _deleteComment,
     setIsShowDeleteModal: setIsShowDeleteDialog

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

@@ -63,6 +63,8 @@
   padding-bottom: 10px;
   margin-top: 10px;
   margin-left: 30px;
+  width: 222px;
+  word-break: break-all;
 }
 
 .sdoc-comment-list-container .comment-header .comment-author__avatar {
@@ -158,18 +160,22 @@
 
 .sdoc-comment-list-container .comment-editor-wrapper {
   display: flex;
-  align-items: center;
+  flex-direction: column;
   justify-content: center;
   padding: 0 16px;
+  cursor: text;
 }
 
 .sdoc-comment-list-container .comment-editor-wrapper .comment-editor {
-  height: 40px;
-  width: 248px;
+  margin-bottom: 10px;
+  min-height: 40px;
+  max-height: 120px;
+  overflow: auto;
   background: #fff;
   border: 1px solid rgba(0, 0, 0, .12);
   border-radius: 4px;
   padding: 8px;
+  word-break: break-all;
 }
 
 .sdoc-comment-list-container .comment-editor-wrapper .comment-editor:focus-visible {

package/dist/basic-sdk/comment/comment/comment-list.js

@@ -107,11 +107,10 @@ var CommentList = function CommentList(_ref) {
     return /*#__PURE__*/React.createElement(CommentItemWrapper, props);
   })), comments.length === 0 && /*#__PURE__*/React.createElement("div", {
     className: "comment-ui-container active"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "comment-editor-wrapper"
   }, /*#__PURE__*/React.createElement(CommentEditor, {
+    type: "comment",
     insertContent: insertContent,
     selectionElement: selectionElement
-  }))));
+  })));
 };
 export default CommentList;

package/package.json

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

package/public/locales/en/sdoc-editor.json

@@ -94,6 +94,8 @@
   "Publish": "Publish",
   "This_file_has_a_draft": "This file has a draft.", 
   "Delete": "Delete",
+  "Reply": "Reply",
+  "Comment": "Comment",
   "Comments": "Comments",
   "All_comments": "All comments",
   "Resolved_comments": "Resolved comments",

package/public/locales/zh-CN/sdoc-editor.json

@@ -94,6 +94,8 @@
   "Publish": "发布",
   "This_file_has_a_draft": "这个文件有一个草稿.", 
   "Delete": "删除",
+  "Reply": "回复",
+  "Comment": "评论",
   "Comments": "评论",
   "All_comments": "所有评论",
   "Resolved_comments": "已解决评论",