@seafile/sdoc-editor 0.1.105 → 0.1.106-beta

package/dist/basic-sdk/assets/css/layout.css

@@ -26,10 +26,6 @@
   position: relative;
 }
 
-.sdoc-editor-container .sdoc-editor-content.readonly {
-  height: 100%;
-}
-
 .sdoc-editor-container .sdoc-absolute-wrapper {
   position: absolute;
   left: 0;
@@ -40,7 +36,7 @@
   width: 100%;
 }
 
-.sdoc-editor-container .sdoc-article-wrapper {
+.sdoc-editor-container .sdoc-scroll-container {
   position: absolute;
   left: 0;
   right: 0;

package/dist/basic-sdk/assets/css/simple-viewer.css

@@ -0,0 +1,13 @@
+.sdoc-editor-container .sdoc-editor-content.readonly {
+  height: 100%;
+}
+
+.sdoc-editor-container.mobile .sdoc-editor-content.readonly .sdoc-article-container {
+  padding: 0;
+  width: auto;
+}
+
+.sdoc-editor-container.mobile .sdoc-editor-content.readonly .article {
+  width: 100% !important;
+  padding: 1rem;
+}

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,23 @@
 
 .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;
+  min-width: 240px;
+  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, forwardRef, useImperativeHandle } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState, forwardRef, useImperativeHandle, Fragment } 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';
@@ -17,6 +17,7 @@ import { usePipDecorate } from './decorates';
 import { getCursorPosition, getDomHeight, getDomMarginTop } from './utils/dom-utils';
 import EventBus from './utils/event-bus';
 import { ColorProvider } from './hooks/use-color-context';
+import ArticleContainer from './layout/article-container';
 import './assets/css/layout.css';
 import './assets/css/sdoc-editor-plugins.css';
 import './assets/css/dropdown-menu.css';
@@ -42,7 +43,6 @@ var SDocEditor = forwardRef(function (_ref, ref) {
   var _useCursors = useCursors(editor),
     cursors = _useCursors.cursors;
   var scrollRef = useRef(null);
-  var articleRef = useRef(null);
   var decorate = usePipDecorate(editor);
 
   // init eventHandler
@@ -73,8 +73,6 @@ var SDocEditor = forwardRef(function (_ref, ref) {
   // useMount: focus editor
   useEffect(function () {
     var timer = setTimeout(function () {
-      // real width
-      editor.width = articleRef.current.children[0].clientWidth;
       focusEditor(editor);
     }, 300);
     return function () {
@@ -185,32 +183,10 @@ var SDocEditor = forwardRef(function (_ref, ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var _useState3 = useState({}),
+  var _useState3 = useState(0),
     _useState4 = _slicedToArray(_useState3, 2),
-    containerStyle = _useState4[0],
-    setContainerStyle = _useState4[1];
-  var handleWindowResize = useCallback(function () {
-    var rect = scrollRef.current.getBoundingClientRect();
-    var articleRect = articleRef.current.getBoundingClientRect();
-    if ((rect.width - articleRect.width) / 2 < 280) {
-      setContainerStyle({
-        marginLeft: '280px'
-      });
-    } else {
-      setContainerStyle({});
-    }
-  }, []);
-  useEffect(function () {
-    handleWindowResize();
-    window.addEventListener('resize', handleWindowResize);
-    return function () {
-      window.removeEventListener('resize', handleWindowResize);
-    };
-  }, [handleWindowResize]);
-  var _useState5 = useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    scrollLeft = _useState6[0],
-    setScrollLeft = _useState6[1];
+    scrollLeft = _useState4[0],
+    setScrollLeft = _useState4[1];
   var onWrapperScroll = useCallback(function (event) {
     var scrollLeft = event.target.scrollLeft;
     setScrollLeft(scrollLeft);
@@ -231,11 +207,8 @@ var SDocEditor = forwardRef(function (_ref, ref) {
     className: "sdoc-absolute-wrapper"
   }, /*#__PURE__*/React.createElement("div", {
     ref: scrollRef,
-    className: "sdoc-article-wrapper",
+    className: "sdoc-scroll-container",
     onScroll: onWrapperScroll
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-article-container",
-    style: containerStyle
   }, /*#__PURE__*/React.createElement(ScrollContext.Provider, {
     value: {
       scrollRef: scrollRef
@@ -244,10 +217,9 @@ var SDocEditor = forwardRef(function (_ref, ref) {
     editor: editor,
     value: slateValue,
     onChange: onChange
-  }, /*#__PURE__*/React.createElement(ContextToolbar, null), /*#__PURE__*/React.createElement(CommentContextProvider, null, /*#__PURE__*/React.createElement("div", {
-    className: "article",
-    ref: articleRef
-  }, /*#__PURE__*/React.createElement(SetNodeToDecorations, null), /*#__PURE__*/React.createElement(Editable, {
+  }, /*#__PURE__*/React.createElement(ArticleContainer, {
+    editor: editor
+  }, /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ContextToolbar, null), /*#__PURE__*/React.createElement(SetNodeToDecorations, null), /*#__PURE__*/React.createElement(Editable, {
     cursors: cursors,
     renderElement: renderElement,
     renderLeaf: renderLeaf,
@@ -255,6 +227,6 @@ var SDocEditor = forwardRef(function (_ref, ref) {
     onMouseDown: onMouseDown,
     decorate: decorate,
     onCut: eventProxy.onCut
-  })), /*#__PURE__*/React.createElement(CommentWrapper, null)))))))))));
+  })), /*#__PURE__*/React.createElement(CommentContextProvider, null, /*#__PURE__*/React.createElement(CommentWrapper, null)))))))))));
 });
 export default SDocEditor;

package/dist/basic-sdk/layout/article-container.js

@@ -0,0 +1,49 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useEffect, useRef, useState } from 'react';
+import { useScrollContext } from '../hooks/use-scroll-context';
+export default function ArticleContainer(_ref) {
+  var editor = _ref.editor,
+    readOnly = _ref.readOnly,
+    children = _ref.children;
+  var articleRef = useRef(null);
+  useEffect(function () {
+    editor.width = articleRef.current.children[0].clientWidth;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var scrollRef = useScrollContext();
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    containerStyle = _useState2[0],
+    setContainerStyle = _useState2[1];
+  useEffect(function () {
+    if (readOnly) return;
+    var handleWindowResize = function handleWindowResize() {
+      var rect = scrollRef.current.getBoundingClientRect();
+      var articleRect = articleRef.current.getBoundingClientRect();
+      if ((rect.width - articleRect.width) / 2 < 280) {
+        setContainerStyle({
+          marginLeft: '280px'
+        });
+      } else {
+        setContainerStyle({});
+      }
+    };
+    window.addEventListener('resize', handleWindowResize);
+    return function () {
+      window.removeEventListener('resize', handleWindowResize);
+    };
+  }, [readOnly, scrollRef]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-article-container",
+    style: containerStyle
+  }, React.Children.count(children) === 1 && /*#__PURE__*/React.createElement("div", {
+    className: "article",
+    ref: articleRef
+  }, children), React.Children.count(children) === 2 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "article",
+    ref: articleRef
+  }, children[0]), children[1]));
+}
+ArticleContainer.defaultProps = {
+  readOnly: false
+};

package/dist/basic-sdk/views/viewer.js

@@ -1,36 +1,31 @@
-import React, { useRef, useEffect } from 'react';
+import React, { Fragment, useRef } from 'react';
 import { Editable, Slate } from '@seafile/slate-react';
 import defaultEditor, { renderLeaf as _renderLeaf, renderElement as _renderElement } from '../extension';
 import withNodeId from '../node-id';
 import { ScrollContext } from '../hooks/use-scroll-context';
-import { generateDefaultDocContent } from '../../utils';
+import { generateDefaultDocContent, isMobile } from '../../utils';
 import { SetNodeToDecorations } from '../highlight-decorate/setNodeToDecorations';
 import { usePipDecorate } from '../decorates';
+import ArticleContainer from '../layout/article-container';
 import '../assets/css/layout.css';
 import '../assets/css/sdoc-editor-plugins.css';
 import '../assets/css/dropdown-menu.css';
+import '../assets/css/simple-viewer.css';
 var SDocViewer = function SDocViewer(_ref) {
   var document = _ref.document,
     customRenderLeaf = _ref.renderLeaf,
     customRenderElement = _ref.renderElement;
   var editor = withNodeId(defaultEditor);
   var slateValue = (document || generateDefaultDocContent()).children;
-  var articleRef = useRef(null);
   var scrollRef = useRef(null);
   var decorate = usePipDecorate(editor);
-  useEffect(function () {
-    editor.width = articleRef.current.children[0].clientWidth;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-editor-container"
+    className: "sdoc-editor-container ".concat(isMobile ? 'mobile' : '')
   }, /*#__PURE__*/React.createElement("div", {
     className: "sdoc-editor-content readonly"
   }, /*#__PURE__*/React.createElement("div", {
     ref: scrollRef,
-    className: "sdoc-article-wrapper"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-article-container"
+    className: "sdoc-scroll-container"
   }, /*#__PURE__*/React.createElement(ScrollContext.Provider, {
     value: {
       scrollRef: scrollRef
@@ -38,10 +33,10 @@ var SDocViewer = function SDocViewer(_ref) {
   }, /*#__PURE__*/React.createElement(Slate, {
     editor: editor,
     value: slateValue
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "article",
-    ref: articleRef
-  }, /*#__PURE__*/React.createElement(SetNodeToDecorations, null), /*#__PURE__*/React.createElement(Editable, {
+  }, /*#__PURE__*/React.createElement(ArticleContainer, {
+    editor: editor,
+    readOnly: true
+  }, /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(SetNodeToDecorations, null), /*#__PURE__*/React.createElement(Editable, {
     readOnly: true,
     placeholder: "",
     renderElement: function renderElement(props) {

package/dist/utils/index.js

@@ -44,4 +44,5 @@ export var isMac = function isMac() {
   var platform = navigator.platform;
   return platform === 'Mac68K' || platform === 'MacPPC' || platform === 'Macintosh' || platform === 'MacIntel';
 };
+export var isMobile = typeof window !== 'undefined' && (window.innerWidth < 768 || navigator.userAgent.toLowerCase().match(/(ipod|ipad|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) != null);
 export { DateUtils, LocalStorage };

package/package.json

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