@seafile/sdoc-editor 0.1.78-beta → 0.1.78-beta2

package/dist/basic-sdk/editor.js

@@ -61,7 +61,6 @@ var SDocEditor = function SDocEditor(_ref) {
   // useMount: init socket connection
   useEffect(function () {
     editor.openConnection();
-    editor.width = articleRef.current.children[0].clientWidth;
     return function () {
       editor.closeConnection && editor.closeConnection();
     };
@@ -71,6 +70,7 @@ var SDocEditor = function SDocEditor(_ref) {
   // useMount: focus editor
   useEffect(function () {
     var timer = setTimeout(function () {
+      editor.width = articleRef.current.children[0].clientWidth;
       focusEditor(editor);
     }, 300);
     return function () {

package/dist/components/doc-info/index.js

@@ -7,7 +7,8 @@ import { EXTERNAL_EVENT } from '../../constants';
 import { DateUtils } from '../../utils';
 var DocInfo = function DocInfo(_ref) {
   var t = _ref.t,
-    isStarred = _ref.isStarred;
+    isStarred = _ref.isStarred,
+    isEditMode = _ref.isEditMode;
   var onInternalLinkClick = useCallback(function () {
     var eventBus = EventBus.getInstance();
     eventBus.dispatch(EXTERNAL_EVENT.INTERNAL_LINK_CLICK);
@@ -32,7 +33,9 @@ var DocInfo = function DocInfo(_ref) {
     className: "internal-link sdocfont sdoc-link",
     title: t('Internal_link'),
     onClick: onInternalLinkClick
-  })), /*#__PURE__*/React.createElement(TipMessage, null));
+  })), /*#__PURE__*/React.createElement(TipMessage, {
+    isEditMode: isEditMode
+  }));
   if (!isSdocRevision) {
     return /*#__PURE__*/React.createElement("div", {
       className: "doc-info"
@@ -48,7 +51,9 @@ var DocInfo = function DocInfo(_ref) {
     className: "doc-name-container d-flex align-items-center justify-content-start w-100"
   }, /*#__PURE__*/React.createElement("div", {
     className: "doc-name"
-  }, oldDocName), /*#__PURE__*/React.createElement(TipMessage, null)), /*#__PURE__*/React.createElement("div", {
+  }, oldDocName), /*#__PURE__*/React.createElement(TipMessage, {
+    isEditMode: isEditMode
+  })), /*#__PURE__*/React.createElement("div", {
     className: "doc-state"
   }, /*#__PURE__*/React.createElement("span", {
     className: "mr-2"

package/dist/components/doc-operations/revision-operations/index.js

@@ -1,13 +1,16 @@
 import React from 'react';
+import context from '../../../context';
 import PublishRevision from './publish-button';
 import ViewChanges from './view-changes';
 import MoreRevisionOperations from './more-revision-operations';
 var RevisionOperations = function RevisionOperations(_ref) {
   var isShowChanges = _ref.isShowChanges,
     toggleViewChanges = _ref.toggleViewChanges;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MoreRevisionOperations, null), /*#__PURE__*/React.createElement(ViewChanges, {
+  var isSdocRevision = context.getSetting('isSdocRevision');
+  var isPublished = context.getSetting('isPublished');
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !isSdocRevision && /*#__PURE__*/React.createElement(MoreRevisionOperations, null), isSdocRevision && /*#__PURE__*/React.createElement(ViewChanges, {
     isShowChanges: isShowChanges,
     toggleViewChanges: toggleViewChanges
-  }), /*#__PURE__*/React.createElement(PublishRevision, null));
+  }), isSdocRevision && !isPublished && /*#__PURE__*/React.createElement(PublishRevision, null));
 };
 export default RevisionOperations;

package/dist/components/doc-operations/revision-operations/more-revision-operations/index.css

@@ -0,0 +1,58 @@
+.sdoc-more-revision-operations-dropdown .sdoc-more-revision-operations-toggle {
+  width: 66px;
+  height: 30px;
+  border-radius: 15px;
+  background-color: #F0F0F0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #666;
+}
+
+.sdoc-more-revision-operations-dropdown .sdoc-more-revision-operations-toggle:hover {
+  cursor: pointer;
+  color: #333;
+}
+
+.sdoc-more-revision-operations-dropdown .sdoc-more-revision-operations-toggle .sdoc-revise {
+  margin-right: 10px;
+}
+
+.sdoc-more-revision-operations-dropdown .sdoc-more-revision-operations-toggle .sdocfont {
+  font-size: 14px;
+}
+
+.sdoc-more-revision-operations-dropdown .dropdown-item {
+  padding: 12px;
+  min-height: 32px;
+}
+
+.sdoc-more-revision-operations-dropdown .sdoc-more-revision-operation {
+  width: 373px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.sdoc-more-revision-operations-dropdown .sdoc-more-revision-operation-title .sdocfont {
+  font-size: 14px;
+  margin-right: 6px;
+}
+
+.sdoc-more-revision-operations-dropdown .sdoc-more-revision-operation-title-name {
+  color: #212529;
+  font-size: 14px;
+}
+
+.sdoc-more-revision-operations-dropdown .sdoc-more-revision-operation-describe {
+  padding-left: 20px;
+  color: #999;
+  font-size: 13px;
+  width: 100%;
+  white-space: break-spaces;
+}
+
+.sdoc-more-revision-operations-dropdown .dropdown-item:hover .sdoc-more-revision-operation-title-name,
+.sdoc-more-revision-operations-dropdown .dropdown-item:hover .sdoc-more-revision-operation-describe {
+  color: #fff;
+}

package/dist/components/doc-operations/revision-operations/more-revision-operations/index.js

@@ -0,0 +1,56 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useCallback, useState } from 'react';
+import { withTranslation } from 'react-i18next';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+import context from '../../../../context';
+import toaster from '../../../toast';
+import './index.css';
+var MoreRevisionOperations = function MoreRevisionOperations(_ref) {
+  var t = _ref.t;
+  var repoID = context.getSetting('repoID');
+  var siteRoot = context.getSetting('siteRoot');
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDropdownOpen = _useState2[0],
+    setIsDropdownOpen = _useState2[1];
+  var toggleDropdown = useCallback(function (isDropdownOpen) {
+    setIsDropdownOpen(!isDropdownOpen);
+  }, []);
+  var startRevise = useCallback(function () {
+    context.startRevise().then(function (res) {
+      window.location.href = "".concat(siteRoot, "lib/").concat(repoID, "/file").concat(res.data.file_path);
+    }).catch(function (error) {
+      toaster.danger(t('Error'));
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement(Dropdown, {
+    isOpen: isDropdownOpen,
+    toggle: function toggle() {
+      return toggleDropdown(isDropdownOpen);
+    },
+    className: "sdoc-more-revision-operations-dropdown"
+  }, /*#__PURE__*/React.createElement(DropdownToggle, {
+    className: "ml-4 sdoc-more-revision-operations-toggle",
+    tag: "div"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-revise"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "sdocfont sdoc-".concat(isDropdownOpen ? 'caret-up' : 'drop-down')
+  })), /*#__PURE__*/React.createElement(DropdownMenu, {
+    right: true
+  }, /*#__PURE__*/React.createElement(DropdownItem, {
+    onClick: startRevise
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-more-revision-operation"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-more-revision-operation-title"
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-revise"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "sdoc-more-revision-operation-title-name"
+  }, t('Revise'))), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-more-revision-operation-describe"
+  }, t('Start_revise_tip'))))));
+};
+export default withTranslation('sdoc-editor')(MoreRevisionOperations);

package/dist/components/doc-operations/revision-operations/publish-button.js

@@ -5,8 +5,6 @@ import context from '../../../context';
 import toaster from '../../../components/toast';
 var PublishRevision = function PublishRevision(_ref) {
   var t = _ref.t;
-  var isSdocRevision = context.getSetting('isSdocRevision');
-  var isPublished = context.getSetting('isPublished');
   var repoID = context.getSetting('repoID');
   var siteRoot = context.getSetting('siteRoot');
   var publish = useCallback(function (event) {
@@ -21,11 +19,10 @@ var PublishRevision = function PublishRevision(_ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  if (!isSdocRevision) return null;
-  if (isPublished) return null;
   return /*#__PURE__*/React.createElement(Button, {
     color: "success",
-    onClick: publish
+    onClick: publish,
+    className: "ml-4"
   }, t('Publish'));
 };
 export default withTranslation('sdoc-editor')(PublishRevision);

package/dist/components/doc-operations/revision-operations/view-changes/index.css

@@ -0,0 +1,3 @@
+.sdoc-toggle-revision-changes .custom-switch {
+  padding-left: 0;
+}

package/dist/components/doc-operations/revision-operations/view-changes/index.js

@@ -0,0 +1,26 @@
+import React, { useCallback } from 'react';
+import { withTranslation } from 'react-i18next';
+import { UncontrolledTooltip } from 'reactstrap';
+import Switch from '../../../switch';
+import './index.css';
+var ViewChanges = function ViewChanges(_ref) {
+  var isShowChanges = _ref.isShowChanges,
+    t = _ref.t,
+    toggleViewChanges = _ref.toggleViewChanges;
+  var onToggleViewCHanges = useCallback(function () {
+    toggleViewChanges(!isShowChanges);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowChanges]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    id: "sdoc-toggle-revision-changes-container",
+    className: "h-100 ml-4 d-flex align-items-center "
+  }, /*#__PURE__*/React.createElement(Switch, {
+    checked: isShowChanges,
+    onChange: onToggleViewCHanges,
+    className: "sdoc-toggle-revision-changes d-flex align-items-center"
+  })), /*#__PURE__*/React.createElement(UncontrolledTooltip, {
+    target: "sdoc-toggle-revision-changes-container"
+  }, t('View_changes')));
+};
+export default withTranslation('sdoc-editor')(ViewChanges);

package/dist/components/switch/index.js

@@ -19,7 +19,7 @@ function Switch(props) {
     onChange: onChange,
     name: "custom-switch-checkbox",
     disabled: disabled
-  }), /*#__PURE__*/React.createElement("span", {
+  }), placeholder && /*#__PURE__*/React.createElement("span", {
     className: "custom-switch-description text-truncate"
   }, placeholder), /*#__PURE__*/React.createElement("span", {
     className: "custom-switch-indicator"

package/dist/components/tip-message/index.js

@@ -23,7 +23,10 @@ var TipMessage = /*#__PURE__*/function (_React$Component) {
       });
     };
     _this.onDisconnect = function () {
-      var t = _this.props.t;
+      var _this$props = _this.props,
+        t = _this$props.t,
+        isEditMode = _this$props.isEditMode;
+      if (!isEditMode) return;
       var message = t('Server_is_not_connected_Operation_will_be_sent_to_server_later');
       toaster.warning(message, {
         hasCloseButton: true,

package/dist/pages/simple-editor.js

@@ -11,32 +11,42 @@ import DiffViewer from './diff-viewer';
 import '../assets/css/simple-editor.css';
 var SimpleEditor = function SimpleEditor(_ref) {
   var isStarred = _ref.isStarred;
-  var _useState = useState(false),
+  var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
-    isContextInit = _useState2[0],
-    setContextInit = _useState2[1];
+    isFirstLoad = _useState2[0],
+    setFirstLoad = _useState2[1];
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    isShowChanges = _useState4[0],
-    setShowChanges = _useState4[1];
+    isContextInit = _useState4[0],
+    setContextInit = _useState4[1];
   var _useState5 = useState(''),
     _useState6 = _slicedToArray(_useState5, 2),
     errorMessage = _useState6[0],
     setErrorMessage = _useState6[1];
-  var _useState7 = useState(null),
+  var _useState7 = useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    document = _useState8[0],
-    setDocument = _useState8[1];
+    isShowChanges = _useState8[0],
+    setShowChanges = _useState8[1];
   var _useState9 = useState(null),
     _useState10 = _slicedToArray(_useState9, 2),
-    currentContent = _useState10[0],
-    setCurrentContent = _useState10[1];
+    document = _useState10[0],
+    setDocument = _useState10[1];
   var _useState11 = useState(null),
     _useState12 = _slicedToArray(_useState11, 2),
-    lastContent = _useState12[0],
-    setLastContent = _useState12[1];
+    currentContent = _useState12[0],
+    setCurrentContent = _useState12[1];
+  var _useState13 = useState(null),
+    _useState14 = _slicedToArray(_useState13, 2),
+    lastContent = _useState14[0],
+    setLastContent = _useState14[1];
   useEffect(function () {
     context.initApi();
+    initDocumentData(true);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var initDocumentData = useCallback(function (isFirstLoad) {
+    setShowChanges(false);
     context.getFileContent().then(function (res) {
       var result = res.data || generateDefaultDocContent();
       if (result && !result.children) {
@@ -48,90 +58,84 @@ var SimpleEditor = function SimpleEditor(_ref) {
       }
       setDocument(result);
       setContextInit(true);
+      isFirstLoad && setFirstLoad(false);
     }).catch(function (error) {
       // eslint-disable-next-line
       console.log(error);
       setErrorMessage('load doc content error');
       setDocument(null);
       setContextInit(true);
+      isFirstLoad && setFirstLoad(false);
     });
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var toggleViewChanges = useCallback(function (isShowChanges) {
-    setContextInit(false);
-    if (isShowChanges) {
-      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) {
+  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 (revisionContent) {
-          fetch(originFileDownloadLink).then(function (res) {
-            return res.json();
-          }).then(function (originContent) {
-            setCurrentContent(revisionContent);
-            setLastContent(originContent);
-            setErrorMessage(null);
-            setContextInit(true);
-            setShowChanges(true);
-          }).catch(function (error) {
-            setErrorMessage('load doc content error');
-            setContextInit(true);
-            setShowChanges(true);
-          });
+        }).then(function (originContent) {
+          setCurrentContent(revisionContent);
+          setLastContent(originContent);
+          setErrorMessage(null);
+          setContextInit(true);
         }).catch(function (error) {
           setErrorMessage('load doc content error');
           setContextInit(true);
-          setShowChanges(true);
         });
       }).catch(function (error) {
         setErrorMessage('load doc content error');
         setContextInit(true);
-        setShowChanges(true);
-      });
-    } else {
-      context.getFileContent().then(function (res) {
-        var result = res.data || generateDefaultDocContent();
-        if (result && !result.children) {
-          result = {
-            version: 0,
-            children: result.content,
-            cursors: result.cursors || {}
-          };
-        }
-        setDocument(result);
-        setShowChanges(false);
-        setContextInit(true);
-      }).catch(function (error) {
-        // eslint-disable-next-line
-        console.log(error);
-        setErrorMessage('load doc content error');
-        setDocument(null);
-        setShowChanges(false);
-        setContextInit(true);
       });
+    }).catch(function (error) {
+      setErrorMessage('load doc content error');
+      setContextInit(true);
+    });
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var toggleViewChanges = useCallback(function (isShowChanges) {
+    setContextInit(false);
+    if (isShowChanges) {
+      initChangesData();
+      return;
     }
+    initDocumentData(false);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  if (!isContextInit) {
+  if (isFirstLoad && !isContextInit) {
     return /*#__PURE__*/React.createElement(Loading, null);
   }
-  if (errorMessage) {
+  if (isFirstLoad && errorMessage) {
     return /*#__PURE__*/React.createElement("div", {
       className: "d-flex justify-content-center"
     }, errorMessage);
   }
   return /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(DocInfo, {
-    isStarred: isStarred
+    isStarred: isStarred,
+    isEditMode: !isShowChanges
   }), /*#__PURE__*/React.createElement(DocOperations, {
     isShowChanges: isShowChanges,
     toggleViewChanges: toggleViewChanges
-  })), /*#__PURE__*/React.createElement(Content, null, isShowChanges ? /*#__PURE__*/React.createElement(DiffViewer, {
+  })), /*#__PURE__*/React.createElement(Content, null, !isContextInit && /*#__PURE__*/React.createElement("div", {
+    className: "w-100 h-100 d-flex align-items-center justify-content-center"
+  }, /*#__PURE__*/React.createElement(Loading, null)), !isContextInit && errorMessage && /*#__PURE__*/React.createElement("div", {
+    className: "w-100 h-100 d-flex justify-content-center align-items-center"
+  }, errorMessage), isContextInit && /*#__PURE__*/React.createElement(React.Fragment, null, isShowChanges ? /*#__PURE__*/React.createElement(DiffViewer, {
     currentContent: currentContent,
     lastContent: lastContent
   }) : /*#__PURE__*/React.createElement(SDocEditor, {
     config: context.getEditorConfig(),
     document: document,
     isOpenSocket: context.getSetting('isOpenSocket')
-  })));
+  }))));
 };
 export default SimpleEditor;

package/package.json

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

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

@@ -258,5 +258,6 @@
   "Revision": "Revision",
   "Error": "Error",
   "Start_revise": "Start revise",
-  "Failed_to_execute_operation_on_server": "Failed to execute operation on server"
+  "Failed_to_execute_operation_on_server": "Failed to execute operation on server",
+  "Start_revise_tip": "Create a temporary document and modify on it, merge it back after reviewing changes"
 }

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

@@ -258,5 +258,6 @@
   "Revision": "修订",
   "Error": "错误",
   "Start_revise": "开始修订",
-  "Failed_to_execute_operation_on_server": "无法在服务器上执行操作"
+  "Failed_to_execute_operation_on_server": "无法在服务器上执行操作",
+  "Start_revise_tip": "Create a temporary document and modify on it, merge it back after reviewing changes"
 }

package/dist/components/doc-operations/revision-operations/more-revision-operations.js

@@ -1,41 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { Component, useCallback, useState } from 'react';
-import { withTranslation } from 'react-i18next';
-import { UncontrolledPopover } from 'reactstrap';
-var MoreRevisionOperations = function MoreRevisionOperations(_ref) {
-  var t = _ref.t;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isShowMenu = _useState2[0],
-    setShowMenu = _useState2[1];
-  var id = 'more-revision-operation';
-  var setRef = useCallback(function (ref, isShowMenu) {
-    if (!ref) return;
-    var toggle = ref.toggle;
-    ref.toggle = function () {
-      toggle && toggle();
-      setShowMenu(!isShowMenu);
-    };
-  }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    id: id,
-    type: "button",
-    className: ""
-  }, /*#__PURE__*/React.createElement("i", {
-    className: "mr-2 sdocfont sdoc-revise"
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "sdocfont sdoc-".concat(isShowMenu ? 'caret-up' : 'drop-down')
-  })), /*#__PURE__*/React.createElement(UncontrolledPopover, {
-    target: id,
-    className: "sdoc-common-menu-popover",
-    trigger: "legacy",
-    placement: "bottom-start",
-    hideArrow: true,
-    ref: function ref(_ref2) {
-      return setRef(_ref2, isShowMenu);
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-common-menu-popover-container"
-  }, "123")));
-};
-export default withTranslation('sdoc-editor')(MoreRevisionOperations);

package/dist/components/doc-operations/revision-operations/view-changes.js

@@ -1,20 +0,0 @@
-import React, { useCallback } from 'react';
-import { withTranslation } from 'react-i18next';
-import Switch from '../../switch';
-var ViewChanges = function ViewChanges(_ref) {
-  var isShowChanges = _ref.isShowChanges,
-    t = _ref.t,
-    toggleViewChanges = _ref.toggleViewChanges;
-  var onToggleViewCHanges = useCallback(function () {
-    toggleViewChanges(!isShowChanges);
-  }, [isShowChanges]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "toggle-revision-changes-container"
-  }, /*#__PURE__*/React.createElement(Switch, {
-    checked: isShowChanges,
-    placeholder: t('View_changes'),
-    onChange: onToggleViewCHanges,
-    className: "toggle-revision-changes"
-  }));
-};
-export default withTranslation('sdoc-editor')(ViewChanges);