@seafile/sdoc-editor 0.1.104 → 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/dist/basic-sdk/editor.js

@@ -1,5 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState, forwardRef, useImperativeHandle } from 'react';
 import { Editable, ReactEditor, Slate } from '@seafile/slate-react';
 import defaultEditor, { renderLeaf, renderElement, Toolbar, ContextToolbar } from './extension';
 import { focusEditor, getAboveBlockNode, getNextNode, getPrevNode, isSelectionAtBlockEnd, isSelectionAtBlockStart } from './extension/core';
@@ -20,7 +20,7 @@ import { ColorProvider } from './hooks/use-color-context';
 import './assets/css/layout.css';
 import './assets/css/sdoc-editor-plugins.css';
 import './assets/css/dropdown-menu.css';
-var SDocEditor = function SDocEditor(_ref) {
+var SDocEditor = forwardRef(function (_ref, ref) {
   var document = _ref.document,
     config = _ref.config;
   // init editor
@@ -51,6 +51,16 @@ var SDocEditor = function SDocEditor(_ref) {
     return new EventProxy(editor);
   }, []);
 
+  // The parent component can call the method of this component through ref
+  useImperativeHandle(ref, function () {
+    return {
+      // get latest value
+      getValue: function getValue() {
+        return slateValue;
+      }
+    };
+  }, [slateValue]);
+
   // useMount: init socket connection
   useEffect(function () {
     editor.openConnection();
@@ -246,5 +256,5 @@ var SDocEditor = function SDocEditor(_ref) {
     decorate: decorate,
     onCut: eventProxy.onCut
   })), /*#__PURE__*/React.createElement(CommentWrapper, null)))))))))));
-};
+});
 export default SDocEditor;

package/dist/basic-sdk/extension/plugins/code-block/render-elem.js

@@ -89,6 +89,7 @@ var CodeBlock = function CodeBlock(_ref) {
   }, []);
   var onScroll = useCallback(function (e) {
     if (readOnly) return;
+    if (!showHoverMenu) return;
     if (e.currentTarget.scrollTop) {
       var _codeBlockRef$current2 = codeBlockRef.current.getBoundingClientRect(),
         top = _codeBlockRef$current2.top,
@@ -101,17 +102,18 @@ var CodeBlock = function CodeBlock(_ref) {
 
       setMenuPosition(newMenuPosition);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [readOnly, showHoverMenu]);
   useEffect(function () {
     if (readOnly) return;
-    if (showHoverMenu) {
-      scrollRef.current && scrollRef.current.addEventListener('scroll', onScroll);
-    } else {
-      scrollRef.current && scrollRef.current.removeEventListener('scroll', onScroll);
+    var observerRefValue = null;
+    if (scrollRef.current) {
+      scrollRef.current.addEventListener('scroll', onScroll);
+      observerRefValue = scrollRef.current;
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [showHoverMenu]);
+    return function () {
+      observerRefValue.removeEventListener('scroll', onScroll);
+    };
+  }, [onScroll, readOnly, scrollRef]);
   var isEntering = useCallback(function (e) {
     return !editor.operations.every(function (operation) {
       return operation.type === 'set_selection';

package/dist/pages/simple-editor.js

@@ -1,6 +1,8 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { withTranslation } from 'react-i18next';
+import deepCopy from 'deep-copy';
 import { SDocEditor } from '../basic-sdk';
 import Loading from '../components/loading';
 import DocInfo from '../components/doc-info';
@@ -15,6 +17,7 @@ var SimpleEditor = function SimpleEditor(_ref) {
   var isStarred = _ref.isStarred,
     isDraft = _ref.isDraft,
     t = _ref.t;
+  var editorRef = useRef(null);
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
     isFirstLoad = _useState2[0],
@@ -77,35 +80,28 @@ var SimpleEditor = function SimpleEditor(_ref) {
   var initChangesData = useCallback(function () {
     setShowChanges(true);
     context.getSeadocRevisionDownloadLinks().then(function (res) {
-      var _res$data = res.data,
-        fileDownloadLink = _res$data.file_download_link,
-        originFileDownloadLink = _res$data.origin_file_download_link;
-      fetch(fileDownloadLink).then(function (res) {
-        return res.json();
-      }).then(function (revisionContent) {
-        fetch(originFileDownloadLink).then(function (res) {
-          return res.json();
-        }).then(function (originContent) {
-          setCurrentContent(revisionContent);
-          setLastContent(originContent);
-          setErrorMessage(null);
-          setContextInit(true);
-        }).catch(function (error) {
-          setErrorMessage('Load_doc_content_error');
-          setContextInit(true);
-        });
-      }).catch(function (error) {
-        setErrorMessage('Load_doc_content_error');
-        setContextInit(true);
-      });
+      var originFileDownloadLink = res.data.origin_file_download_link;
+      return fetch(originFileDownloadLink);
+    }).then(function (res) {
+      return res.json();
+    }).then(function (originContent) {
+      setLastContent(originContent);
+      setErrorMessage(null);
+      setContextInit(true);
     }).catch(function (error) {
       setErrorMessage('Load_doc_content_error');
       setContextInit(true);
     });
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [document]);
   var toggleViewChanges = useCallback(function (isShowChanges) {
+    if (isShowChanges) {
+      var newestValue = editorRef.current.getValue();
+      setCurrentContent(deepCopy(_objectSpread(_objectSpread({}, document), {}, {
+        children: newestValue
+      })));
+    }
     setContextInit(false);
     if (isShowChanges) {
       initChangesData();
@@ -114,7 +110,7 @@ var SimpleEditor = function SimpleEditor(_ref) {
     initDocumentData(false);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [document]);
   if (isFirstLoad && !isContextInit) {
     return /*#__PURE__*/React.createElement(Loading, null);
   }
@@ -140,6 +136,7 @@ var SimpleEditor = function SimpleEditor(_ref) {
   }) : /*#__PURE__*/React.createElement(SDocEditor, {
     config: context.getEditorConfig(),
     document: document,
+    ref: editorRef,
     isOpenSocket: context.getSetting('isOpenSocket')
   })))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "0.1.104",
+  "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": "已解决评论",