@seafile/sdoc-editor 0.1.165 → 0.1.166-beta

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

@@ -2,6 +2,16 @@
   height: 100%;
 }
 
+.sdoc-editor-container .sdoc-editor-content.no-outline .sdoc-absolute-wrapper {
+  display: flex;
+  position: relative;
+  min-height: 0;
+}
+
+.sdoc-editor-container .sdoc-editor-content.no-outline .sdoc-article-container {
+  margin-left: 0 !important;
+}
+
 .sdoc-editor-container.mobile .sdoc-editor-content.readonly .sdoc-article-container {
   padding: 0;
   width: auto;

package/dist/basic-sdk/editor/{slate-editor.js → editable-article.js}

@@ -13,12 +13,11 @@ import { getCursorPosition, getDomHeight, getDomMarginTop } from '../utils/dom-u
 import EventBus from '../utils/event-bus';
 import { ArticleContainer } from '../layout';
 import { useScrollContext } from '../hooks/use-scroll-context';
-var SlateEditor = function SlateEditor(_ref) {
-  var editor = _ref.editor,
-    setSlateValue = _ref.setSlateValue,
+var EditableArticle = function EditableArticle(_ref) {
+  var isShowComment = _ref.isShowComment,
+    editor = _ref.editor,
     slateValue = _ref.slateValue,
-    customRenderElement = _ref.renderElement,
-    isShowComment = _ref.isShowComment;
+    updateSlateValue = _ref.updateSlateValue;
   var _useCursors = useCursors(editor),
     cursors = _useCursors.cursors;
   var decorate = usePipDecorate(editor);
@@ -28,10 +27,6 @@ var SlateEditor = function SlateEditor(_ref) {
   var eventProxy = useMemo(function () {
     return new EventProxy(editor);
   }, []);
-  var onChange = useCallback(function (slateValue) {
-    setSlateValue(slateValue);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
   var onMouseDown = useCallback(function (event) {
     if (event.button === 0) {
       editor.reSetTableSelectedRange();
@@ -135,12 +130,12 @@ var SlateEditor = function SlateEditor(_ref) {
   return /*#__PURE__*/React.createElement(Slate, {
     editor: editor,
     value: slateValue,
-    onChange: onChange
+    onChange: updateSlateValue
   }, /*#__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: customRenderElement || renderElement,
+    renderElement: renderElement,
     renderLeaf: renderLeaf,
     onKeyDown: onKeyDown,
     onMouseDown: onMouseDown,
@@ -148,7 +143,7 @@ var SlateEditor = function SlateEditor(_ref) {
     onCut: eventProxy.onCut
   })), /*#__PURE__*/React.createElement(SideToolbar, null), isShowComment && /*#__PURE__*/React.createElement(CommentContextProvider, null, /*#__PURE__*/React.createElement(CommentWrapper, null))));
 };
-SlateEditor.defaultProps = {
+EditableArticle.defaultProps = {
   isShowComment: true
 };
-export default SlateEditor;
+export default EditableArticle;

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

@@ -2,24 +2,19 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useMemo, useEffect, useState, useCallback, useImperativeHandle, forwardRef } from 'react';
 import deepCopy from 'deep-copy';
-import { createDefaultEditor, renderElement } from '../extension';
-import { withSocketIO } from '../socket';
-import withNodeId from '../node-id';
-import { PAGE_EDIT_AREA_WIDTH } from '../constants';
-import { MODE } from '../../constants';
-import DiffViewer from '../views/diff-viewer';
-import SDocEditor from './common-editor';
-import CommonLoading from '../../components/common-loading';
 import context from '../../context';
+import CommonLoading from '../../components/common-loading';
+import { PAGE_EDIT_AREA_WIDTH } from '../constants';
+import { createDefaultEditor } from '../extension';
+import withNodeId from '../node-id';
+import { withSocketIO } from '../socket';
+import SDocEditor from './sdoc-editor';
 import './index.css';
 var Editor = forwardRef(function (_ref, ref) {
-  var mode = _ref.mode,
-    document = _ref.document,
-    setDiffChanges = _ref.setDiffChanges;
+  var document = _ref.document;
   var editor = useMemo(function () {
     var defaultEditor = createDefaultEditor();
     var editorConfig = context.getEditorConfig();
-    defaultEditor.mode = MODE.EDITOR;
     var newEditor = withNodeId(withSocketIO(defaultEditor, {
       document: document,
       config: editorConfig
@@ -31,22 +26,14 @@ var Editor = forwardRef(function (_ref, ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var _useState = useState(document.children),
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    slateValue = _useState2[0],
-    _setSlateValue = _useState2[1];
-  var _useState3 = useState(false),
+    isLoading = _useState2[0],
+    _setLoading = _useState2[1];
+  var _useState3 = useState(document.children),
     _useState4 = _slicedToArray(_useState3, 2),
-    isLoading = _useState4[0],
-    _setLoading = _useState4[1];
-  var _useState5 = useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    diffContent = _useState6[0],
-    _setDiffContent = _useState6[1];
-  var _useState7 = useState(null),
-    _useState8 = _slicedToArray(_useState7, 2),
-    currentContent = _useState8[0],
-    setCurrentContent = _useState8[1];
+    slateValue = _useState4[0],
+    _setSlateValue = _useState4[1];
 
   // useMount: init socket connection
   useEffect(function () {
@@ -70,20 +57,6 @@ var Editor = forwardRef(function (_ref, ref) {
       setLoading: function setLoading(isLoading) {
         _setLoading(isLoading);
       },
-      setDiffContent: function setDiffContent(content) {
-        setCurrentContent(deepCopy(_objectSpread(_objectSpread({}, document), {}, {
-          children: slateValue
-        })));
-        _setDiffContent(content);
-      },
-      setEditorMode: function setEditorMode(mode) {
-        editor.cursors = {};
-        editor.selection = null;
-        if (mode === MODE.EDITOR) {
-          editor.operations = [];
-        }
-        editor.mode = mode;
-      },
       setSlateValue: function setSlateValue(document) {
         _setSlateValue(document.children);
       },
@@ -105,21 +78,10 @@ var Editor = forwardRef(function (_ref, ref) {
       className: "h-100 w-100 d-flex align-items-center justify-content-center"
     }, /*#__PURE__*/React.createElement(CommonLoading, null));
   }
-  if (mode === MODE.DIFF_VIEWER) {
-    return /*#__PURE__*/React.createElement(DiffViewer, {
-      showToolbar: true,
-      showOutline: true,
-      editor: editor,
-      currentContent: currentContent,
-      lastContent: diffContent,
-      didMountCallback: setDiffChanges
-    });
-  }
   return /*#__PURE__*/React.createElement(SDocEditor, {
     slateValue: slateValue,
     editor: editor,
-    updateSlateValue: updateSlateValue,
-    renderElement: renderElement
+    updateSlateValue: updateSlateValue
   });
 });
 export default Editor;

package/dist/basic-sdk/editor/{common-editor.js → sdoc-editor.js}

@@ -3,13 +3,14 @@ import React, { useEffect } from 'react';
 import { Editor } from '@seafile/slate';
 import { focusEditor } from '../extension/core';
 import { EditorContainer, EditorContent } from '../layout';
-import SlateEditor from './slate-editor';
 import InsertElementDialog from '../extension/commons/insert-element-dialog';
-var CommonEditor = function CommonEditor(_ref) {
-  var slateValue = _ref.slateValue,
-    updateSlateValue = _ref.updateSlateValue,
-    editor = _ref.editor,
-    renderElement = _ref.renderElement;
+import EditableArticle from './editable-article';
+import { ColorProvider } from '../hooks/use-color-context';
+import { HeaderToolbar } from '../extension';
+var SdocEditor = function SdocEditor(_ref) {
+  var editor = _ref.editor,
+    slateValue = _ref.slateValue,
+    updateSlateValue = _ref.updateSlateValue;
   // useMount: focus editor
   useEffect(function () {
     var timer = setTimeout(function () {
@@ -35,16 +36,17 @@ var CommonEditor = function CommonEditor(_ref) {
   }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditorContainer, {
     editor: editor
-  }, /*#__PURE__*/React.createElement(EditorContent, {
+  }, /*#__PURE__*/React.createElement(ColorProvider, null, /*#__PURE__*/React.createElement(HeaderToolbar, {
+    editor: editor
+  }), /*#__PURE__*/React.createElement(EditorContent, {
     docValue: slateValue,
     showOutline: true
-  }, /*#__PURE__*/React.createElement(SlateEditor, {
+  }, /*#__PURE__*/React.createElement(EditableArticle, {
     editor: editor,
     slateValue: slateValue,
-    setSlateValue: updateSlateValue,
-    renderElement: renderElement
-  }))), /*#__PURE__*/React.createElement(InsertElementDialog, {
+    updateSlateValue: updateSlateValue
+  })))), /*#__PURE__*/React.createElement(InsertElementDialog, {
     editor: editor
   }));
 };
-export default CommonEditor;
+export default SdocEditor;

package/dist/basic-sdk/extension/index.js

@@ -4,7 +4,7 @@ import { withHistory } from '@seafile/slate-history';
 import Plugins from './plugins';
 import renderElement from './render/render-element';
 import renderLeaf from './render/render-leaf';
-import { Toolbar, ContextToolbar, SideToolbar } from './toolbar';
+import { HeaderToolbar, ContextToolbar, SideToolbar } from './toolbar';
 var baseEditor = withHistory(withReact(createEditor()));
 var defaultEditor = Plugins === null || Plugins === void 0 ? void 0 : Plugins.reduce(function (editor, pluginItem) {
   var withPlugin = pluginItem.editorPlugin;
@@ -24,4 +24,4 @@ export var createDefaultEditor = function createDefaultEditor() {
   return defaultEditor;
 };
 export default defaultEditor;
-export { renderLeaf, renderElement, Toolbar, ContextToolbar, SideToolbar };
+export { renderLeaf, renderElement, HeaderToolbar, ContextToolbar, SideToolbar };

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

@@ -14,6 +14,7 @@ import toaster from '../../../../components/toast';
 import context from '../../../../context';
 import { getErrorMsg } from '../../../../utils';
 import imagePlaceholder from '../../../assets/images/image-placeholder.png';
+import { ADDED_STYLE, DELETED_STYLE } from '../../constants';
 var Image = /*#__PURE__*/function (_React$Component) {
   _inherits(Image, _React$Component);
   var _super = _createSuper(Image);
@@ -195,6 +196,23 @@ var SdocImage = withTranslation('sdoc-editor')(Image);
 function renderImage(props, editor) {
   // eslint-disable-next-line react-hooks/rules-of-hooks
   var isSelected = useSelected();
+
+  // decorate diff-viewer
+  var element = props.element;
+  if (element.ADD || element.DELETE) {
+    var style = element.ADD ? ADDED_STYLE : DELETED_STYLE;
+    return /*#__PURE__*/React.createElement("span", {
+      className: "d-inline-block p-1",
+      style: {
+        backgroundColor: style.computed_background_color,
+        width: 'fit-content',
+        height: 'fit-content'
+      }
+    }, /*#__PURE__*/React.createElement(SdocImage, Object.assign({}, props, {
+      editor: editor,
+      isSelected: isSelected
+    })));
+  }
   return /*#__PURE__*/React.createElement(SdocImage, Object.assign({}, props, {
     editor: editor,
     isSelected: isSelected

package/dist/basic-sdk/extension/toolbar/header-toolbar/index.js

@@ -13,7 +13,7 @@ import HistoryMenu from './redo-undo';
 import Font from '../../plugins/font/menu';
 import InsertToolbar from './insert-toolbar';
 import ActiveTableMenu from '../../plugins/table/menu/active-table-menu';
-var Toolbar = function Toolbar(_ref) {
+var HeaderToolbar = function HeaderToolbar(_ref) {
   var editor = _ref.editor,
     readonly = _ref.readonly;
   useSelectionUpdate();
@@ -59,7 +59,7 @@ var Toolbar = function Toolbar(_ref) {
     readonly: readonly
   }));
 };
-Toolbar.defaultProps = {
+HeaderToolbar.defaultProps = {
   readonly: false
 };
-export default Toolbar;
+export default HeaderToolbar;

package/dist/basic-sdk/extension/toolbar/index.js

@@ -1,4 +1,4 @@
-import Toolbar from './header-toolbar';
+import HeaderToolbar from './header-toolbar';
 import ContextToolbar from './context-toolbar';
 import SideToolbar from './side-toolbar';
-export { Toolbar, ContextToolbar, SideToolbar };
+export { HeaderToolbar, ContextToolbar, SideToolbar };

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

@@ -1,27 +1,19 @@
 import React from 'react';
-import classnames from 'classnames';
-import { ColorProvider } from '../hooks/use-color-context';
-import { Toolbar } from '../extension';
+import classNames from 'classnames';
 import { isMobile } from '../../utils';
 import '../assets/css/default.css';
 import '../assets/css/layout.css';
 import '../assets/css/sdoc-editor-plugins.css';
 import '../assets/css/dropdown-menu.css';
 var EditorContainer = function EditorContainer(_ref) {
-  var editor = _ref.editor,
-    readonly = _ref.readonly,
-    children = _ref.children,
-    showToolbar = _ref.showToolbar;
+  var children = _ref.children,
+    readonly = _ref.readonly;
+  var className = classNames('sdoc-editor-container', {
+    'mobile': isMobile,
+    'readonly': readonly
+  });
   return /*#__PURE__*/React.createElement("div", {
-    className: classnames('sdoc-editor-container', {
-      'mobile': isMobile && readonly
-    })
-  }, /*#__PURE__*/React.createElement(ColorProvider, null, showToolbar && /*#__PURE__*/React.createElement(Toolbar, {
-    editor: editor,
-    readonly: readonly
-  }), children));
-};
-EditorContainer.defaultProps = {
-  showToolbar: true
+    className: className
+  }, children);
 };
 export default EditorContainer;

package/dist/basic-sdk/layout/editor-content.js

@@ -2,6 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useRef, useState, useCallback } from 'react';
 import { ScrollContext } from '../hooks/use-scroll-context';
 import SDocOutline from '../outline';
+import classNames from 'classnames';
 var EditorContent = function EditorContent(_ref) {
   var readonly = _ref.readonly,
     showOutline = _ref.showOutline,
@@ -16,22 +17,13 @@ var EditorContent = function EditorContent(_ref) {
     var scrollLeft = event.target.scrollLeft;
     setScrollLeft(scrollLeft);
   }, []);
-  if (readonly && !showOutline) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "sdoc-editor-content readonly"
-    }, /*#__PURE__*/React.createElement("div", {
-      ref: scrollRef,
-      className: "sdoc-scroll-container",
-      id: "sdoc-scroll-container"
-    }, /*#__PURE__*/React.createElement(ScrollContext.Provider, {
-      value: {
-        scrollRef: scrollRef
-      }
-    }, children)));
-  }
+  var className = classNames('sdoc-editor-content', {
+    'readonly': readonly,
+    'no-outline': !showOutline
+  });
   return /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-editor-content"
-  }, /*#__PURE__*/React.createElement("div", {
+    className: className
+  }, showOutline && /*#__PURE__*/React.createElement("div", {
     className: "sdoc-absolute-wrapper"
   }, /*#__PURE__*/React.createElement(SDocOutline, {
     scrollLeft: scrollLeft,

package/dist/basic-sdk/socket/helpers.js

@@ -4,7 +4,6 @@ import { Editor, Operation } from '@seafile/slate';
 import { getNode } from '../extension/core';
 import * as OPERATION from '../node-id/constants';
 import { setCursor } from '../cursor/helper';
-import { MODE } from '../../constants';
 export var getNodePathById = function getNodePathById(rootNode, nodeId) {
   var path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
   if (rootNode.id === nodeId) return path;
@@ -253,7 +252,6 @@ export var reExecRevertOperationList = function reExecRevertOperationList(editor
   }
 };
 export var syncRemoteOperations = function syncRemoteOperations(editor, remoteOperations) {
-  if (editor.mode !== MODE.EDITOR) return;
   if (remoteOperations.length === 0) return;
   Editor.withoutNormalizing(editor, function () {
     for (var i = 0; i < remoteOperations.length; i++) {

package/dist/basic-sdk/socket/socket-manager.js

@@ -7,7 +7,7 @@ import { syncRemoteOperations, reExecRevertOperationList, revertOperationList, s
 import SocketClient from './socket-client';
 import { clientDebug, conflictDebug, serverDebug, stateDebug } from '../utils/debug';
 import { deleteCursor } from '../cursor/helper';
-import { EXTERNAL_EVENT, MODE } from '../../constants';
+import { EXTERNAL_EVENT } from '../../constants';
 
 //  idle --> sending --> conflict --> idle
 //       --> conflict --> idle
@@ -56,7 +56,6 @@ var SocketManager = /*#__PURE__*/_createClass(function SocketManager(editor, _do
     _this.sendOperations();
   };
   this.sendOperations = function () {
-    if (_this.editor.mode !== MODE.EDITOR) return;
     if (_this.state !== STATE.IDLE) return;
     stateDebug("State changed: ".concat(_this.state, " -> ").concat(STATE.SENDING));
     _this.state = STATE.SENDING;

package/dist/basic-sdk/socket/with-socket-io.js

@@ -1,4 +1,3 @@
-import { MODE } from '../../constants';
 import { generateCursorData } from '../cursor/helper';
 import EventBus from '../utils/event-bus';
 import SocketManager from './socket-manager';
@@ -22,7 +21,6 @@ var withSocketIO = function withSocketIO(editor, options) {
   newEditor.onChange = function () {
     var document = options.document,
       config = options.config;
-    if (newEditor.mode === MODE.DIFF_VIEWER) return;
     var operations = newEditor.operations;
     if (!newEditor.isRemote && operations.length > 0) {
       var isAllSetSelection = operations.every(function (operation) {
@@ -30,23 +28,18 @@ var withSocketIO = function withSocketIO(editor, options) {
       });
       var _socketManager = SocketManager.getInstance(newEditor, document, config);
       if (!isAllSetSelection) {
-        if (newEditor.mode === MODE.EDITOR) {
-          // get update content value operations
-          var updateOperations = operations.filter(function (operation) {
-            return operation.type !== 'set_selection';
-          });
-          _socketManager.onReceiveLocalOperations(updateOperations);
-        }
+        // get update content value operations
+        var updateOperations = operations.filter(function (operation) {
+          return operation.type !== 'set_selection';
+        });
+        _socketManager.onReceiveLocalOperations(updateOperations);
       }
-      if (newEditor.mode === MODE.EDITOR) {
-        _socketManager.sendCursorLocation(editor.selection);
-      }
-    }
-    if (newEditor.mode === MODE.EDITOR) {
-      // dispatch editor change event
-      var eventBus = EventBus.getInstance(newEditor, document, config);
-      eventBus.dispatch('change');
+      _socketManager.sendCursorLocation(editor.selection);
     }
+
+    // dispatch editor change event
+    var eventBus = EventBus.getInstance(newEditor, document, config);
+    eventBus.dispatch('change');
     onChange();
   };
   newEditor.rebaseContent = function (document, originFileVersion) {

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

@@ -1,3 +1,4 @@
-import DiffViewer from './diff-viewer';
-import SDocViewer from './viewer';
-export { DiffViewer, SDocViewer };
+import SDocViewer from './sdoc-viewer';
+import DiffViewer from './sdoc-diff-viewer';
+import RevisionDiffViewer from './revision-diff-viewer';
+export { SDocViewer, DiffViewer, RevisionDiffViewer };

package/dist/basic-sdk/views/readonly-article.js

@@ -0,0 +1,24 @@
+import React, { Fragment } from 'react';
+import { Editable, Slate } from '@seafile/slate-react';
+import { ArticleContainer } from '../layout';
+import { SetNodeToDecorations } from '../highlight-decorate/setNodeToDecorations';
+import { renderElement, renderLeaf } from '../extension';
+import { usePipDecorate } from '../decorates';
+export default function ReadOnlyArticle(_ref) {
+  var editor = _ref.editor,
+    slateValue = _ref.slateValue;
+  var decorate = usePipDecorate(editor);
+  return /*#__PURE__*/React.createElement(Slate, {
+    editor: editor,
+    value: slateValue
+  }, /*#__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: renderElement,
+    renderLeaf: renderLeaf,
+    decorate: decorate
+  }))));
+}

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

@@ -0,0 +1,44 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useEffect, useState } from 'react';
+import context from '../../context';
+import { getDiff } from '../utils/diff';
+import SDocViewer from './sdoc-viewer';
+import Loading from '../../components/loading';
+import '../../assets/css/diff-viewer.css';
+var RevisionDiffViewer = function RevisionDiffViewer(_ref) {
+  var revisionContent = _ref.revisionContent,
+    didMountCallback = _ref.didMountCallback;
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    diff = _useState4[0],
+    setDiff = _useState4[1];
+  useEffect(function () {
+    setIsLoading(true);
+    context.getSeadocOriginFileContent().then(function (res) {
+      var originContentString = res.data.content;
+      var originContent = JSON.parse(originContentString);
+      var diff = getDiff(revisionContent, originContent);
+      setDiff(diff);
+      didMountCallback && didMountCallback(diff);
+      setIsLoading(false);
+    }).catch(function (error) {
+      console.log('error');
+      setIsLoading(false);
+    });
+  }, [revisionContent, didMountCallback]);
+  if (isLoading) {
+    return /*#__PURE__*/React.createElement(Loading, null);
+  }
+  return /*#__PURE__*/React.createElement(SDocViewer, {
+    showToolbar: true,
+    showOutline: true,
+    document: {
+      children: diff.value
+    }
+  });
+};
+export default RevisionDiffViewer;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { getDiff } from '../utils/diff';
+import SDocViewer from './sdoc-viewer';
+import '../../assets/css/diff-viewer.css';
+var DiffViewer = function DiffViewer(_ref) {
+  var currentContent = _ref.currentContent,
+    lastContent = _ref.lastContent;
+  var diff = getDiff(currentContent, lastContent);
+  return /*#__PURE__*/React.createElement(SDocViewer, {
+    showToolbar: false,
+    showOutline: false,
+    document: {
+      children: diff.value
+    }
+  });
+};
+export default DiffViewer;

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { HeaderToolbar, createDefaultEditor } from '../extension';
+import withNodeId from '../node-id';
+import { generateDefaultDocContent } from '../../utils';
+import { EditorContainer, EditorContent } from '../layout';
+import ReadOnlyArticle from './readonly-article';
+import { ColorProvider } from '../hooks/use-color-context';
+import '../assets/css/simple-viewer.css';
+var SDocViewer = function SDocViewer(_ref) {
+  var editor = _ref.editor,
+    document = _ref.document,
+    showToolbar = _ref.showToolbar,
+    showOutline = _ref.showOutline;
+  var validEditor = editor || withNodeId(createDefaultEditor());
+  var slateValue = (document || generateDefaultDocContent()).children;
+  return /*#__PURE__*/React.createElement(EditorContainer, {
+    editor: validEditor,
+    readonly: true
+  }, /*#__PURE__*/React.createElement(ColorProvider, null, showToolbar && /*#__PURE__*/React.createElement(HeaderToolbar, {
+    editor: validEditor,
+    readonly: true
+  }), /*#__PURE__*/React.createElement(EditorContent, {
+    docValue: slateValue,
+    readonly: true,
+    showOutline: showOutline
+  }, /*#__PURE__*/React.createElement(ReadOnlyArticle, {
+    editor: validEditor,
+    slateValue: slateValue
+  }))));
+};
+SDocViewer.defaultProps = {
+  showToolbar: false,
+  showOutline: false
+};
+export default SDocViewer;

package/dist/constants/index.js

@@ -14,11 +14,6 @@ export var EXTERNAL_EVENT = {
   REMOVE_DOCUMENT: 'remove_document',
   REMOVE_DOCUMENT_ERROR: 'remove_document_error'
 };
-export var MODE = {
-  DIFF_VIEWER: 'diff_viewer',
-  VIEWER: 'viewer',
-  EDITOR: 'editor'
-};
 export var TIP_TYPE = {
   DELETE_NO_CHANGES_REVISION: 'delete_no_changes_revision',
   MERGE: 'merge',

package/dist/pages/simple-editor.js

@@ -11,10 +11,11 @@ import { generateDefaultDocContent } from '../utils';
 import context from '../context';
 import ErrorBoundary from './error-boundary';
 import TipDialog from '../components/tip-dialog';
-import { EXTERNAL_EVENT, MODE, TIP_TYPE, REVISION_FIRST_LOAD_KEY, REVISION_FIRST_LOAD_VALUE } from '../constants';
+import { EXTERNAL_EVENT, TIP_TYPE, REVISION_FIRST_LOAD_KEY, REVISION_FIRST_LOAD_VALUE } from '../constants';
 import { getRebase, hasConflict } from '../basic-sdk/utils/rebase';
 import toaster from '../components/toast';
 import { EventBus, SDocEditor } from '../basic-sdk';
+import { RevisionDiffViewer } from '../basic-sdk/views';
 import '../assets/css/simple-editor.css';
 var SimpleEditor = function SimpleEditor(_ref) {
   var isStarred = _ref.isStarred,
@@ -36,12 +37,12 @@ var SimpleEditor = function SimpleEditor(_ref) {
     setShowChanges = _useState6[1];
   var _useState7 = useState(null),
     _useState8 = _slicedToArray(_useState7, 2),
-    document = _useState8[0],
-    setDocument = _useState8[1];
-  var _useState9 = useState(MODE.EDITOR),
+    revisionContent = _useState8[0],
+    setRevisionContent = _useState8[1];
+  var _useState9 = useState(null),
     _useState10 = _slicedToArray(_useState9, 2),
-    mode = _useState10[0],
-    setMode = _useState10[1];
+    document = _useState10[0],
+    setDocument = _useState10[1];
   var _useState11 = useState([]),
     _useState12 = _slicedToArray(_useState11, 2),
     changes = _useState12[0],
@@ -166,32 +167,11 @@ var SimpleEditor = function SimpleEditor(_ref) {
       errorCallback && errorCallback(errorMessage);
     });
   }, []);
-  var setDiffContent = useCallback(function () {
-    context.getSeadocOriginFileContent().then(function (res) {
-      var originContentString = res.data.content;
-      var originContent = JSON.parse(originContentString);
-      editorRef.current.setDiffContent(originContent);
-      editorRef.current.setLoading(false);
-    }).catch(function (error) {
-      console.log('error');
-    });
-  }, []);
   var toggleViewChanges = useCallback(function (isShowChanges) {
-    var revisionContent = editorRef.current.getSlateValue();
-    if (isShowChanges && hasConflict(revisionContent.children)) {
-      setTipType(TIP_TYPE.HAS_CONFLICT_BEFORE_VIEW_CHANGES);
-      setShowTip(true);
-      return;
-    }
-    editorRef.current.setLoading(true);
-    setShowChanges(isShowChanges);
-    var mode = isShowChanges ? MODE.DIFF_VIEWER : MODE.EDITOR;
-    setMode(mode);
-    editorRef.current.setEditorMode(mode);
     if (!isShowChanges) {
       loadDocument(function (document) {
         setDocument(document);
-        editorRef.current.setSlateValue(document);
+        setShowChanges(isShowChanges);
         editorRef.current.setLoading(false);
       }, function (errorMessage) {
         setErrorMessage(errorMessage);
@@ -199,10 +179,26 @@ var SimpleEditor = function SimpleEditor(_ref) {
       });
       return;
     }
-    setDiffContent();
 
+    // Get the contents of the current revision
+    var revisionContent = editorRef.current.getSlateValue();
+
+    // Prevent users from switching if document contains conflicting content
+    if (hasConflict(revisionContent.children)) {
+      setTipType(TIP_TYPE.HAS_CONFLICT_BEFORE_VIEW_CHANGES);
+      setShowTip(true);
+      return;
+    }
+
+    // Record the contents of the current revision
+    setRevisionContent(revisionContent);
+    setShowChanges(isShowChanges);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [document, editorRef.current]);
+  var setDiffChanges = useCallback(function (diff) {
+    setChanges(diff.changes);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowChanges]);
   var publishRevision = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
@@ -260,12 +256,7 @@ var SimpleEditor = function SimpleEditor(_ref) {
           return _context.stop();
       }
     }, _callee);
-  })), [isShowChanges, mode]);
-  var setDiffChanges = useCallback(function (diff) {
-    setChanges(diff.changes);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isShowChanges]);
+  })), [isShowChanges]);
   var jumpToURL = useCallback(function (url) {
     window.location.href = url;
   }, []);
@@ -305,11 +296,13 @@ var SimpleEditor = function SimpleEditor(_ref) {
         context.updateSettings({
           'originFileVersion': origin_file_version
         });
+        // if revision diff view change to sdoc editor
+        if (isShowChanges) {
+          setShowChanges(false);
+        }
         editorRef.current.setLoading(true);
         editorRef.current.setSlateValue(mergeValue);
         editorRef.current.updateDocumentVersion(mergeValue);
-        setMode(MODE.EDITOR);
-        editorRef.current.setEditorMode(MODE.EDITOR);
         editorRef.current.setLoading(false);
         setShowTip(false);
       }).catch(function (error) {
@@ -341,11 +334,12 @@ var SimpleEditor = function SimpleEditor(_ref) {
     changes: changes,
     toggleViewChanges: toggleViewChanges,
     publishRevision: publishRevision
-  })), /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(SDocEditor, {
+  })), /*#__PURE__*/React.createElement(Content, null, !isShowChanges && /*#__PURE__*/React.createElement(SDocEditor, {
     ref: editorRef,
-    document: document,
-    mode: mode,
-    setDiffChanges: setDiffChanges
+    document: document
+  }), isShowChanges && /*#__PURE__*/React.createElement(RevisionDiffViewer, {
+    revisionContent: revisionContent,
+    componentDidCallback: setDiffChanges
   }))), showTip && /*#__PURE__*/React.createElement(TipDialog, {
     toggle: closeTip,
     submit: tipSubmit,

package/package.json

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

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

@@ -367,7 +367,7 @@
   "Link_file": "Link file",
   "Keep_my_modification": "Keep my modification",
   "Keep_other_modification": "Keep other's modification",
-  "Keep_both_modification": "Keep my modification",
+  "Keep_both_modification": "Keep both modification",
   "Tip": "Tip",
   "Rebase_delete_no_change_revision_tip": "Revision has not made any change compared to original document. Do you want to delete this revision?",
   "Has_been_replaced_tip": "Document content has been replaced. Please refresh the page.",

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

@@ -367,7 +367,7 @@
   "Link_file": "Link file",
   "Keep_my_modification": "Keep my modification",
   "Keep_other_modification": "Keep other's modification",
-  "Keep_both_modification": "Keep my modification",
+  "Keep_both_modification": "Keep both modification",
   "Tip": "Tip",
   "Rebase_delete_no_change_revision_tip": "Revision has not made any change compared to original document. Do you want to delete this revision?",
   "Has_been_replaced_tip": "Document content has been replaced. Please refresh the page.",

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

@@ -367,7 +367,7 @@
   "Link_file": "Link file",
   "Keep_my_modification": "Keep my modification",
   "Keep_other_modification": "Keep other's modification",
-  "Keep_both_modification": "Keep my modification",
+  "Keep_both_modification": "Keep both modification",
   "Tip": "Tip",
   "Rebase_delete_no_change_revision_tip": "Revision has not made any change compared to original document. Do you want to delete this revision?",
   "Has_been_replaced_tip": "Document content has been replaced. Please refresh the page.",

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

@@ -367,7 +367,7 @@
   "Link_file": "Link file",
   "Keep_my_modification": "Keep my modification",
   "Keep_other_modification": "Keep other's modification",
-  "Keep_both_modification": "Keep my modification",
+  "Keep_both_modification": "Keep both modification",
   "Tip": "Tip",
   "Rebase_delete_no_change_revision_tip": "Revision has not made any change compared to original document. Do you want to delete this revision?",
   "Has_been_replaced_tip": "Document content has been replaced. Please refresh the page.",

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

@@ -367,7 +367,7 @@
   "Link_file": "Link file",
   "Keep_my_modification": "Keep my modification",
   "Keep_other_modification": "Keep other's modification",
-  "Keep_both_modification": "Keep my modification",
+  "Keep_both_modification": "Keep both modification",
   "Tip": "Tip",
   "Rebase_delete_no_change_revision_tip": "Revision has not made any change compared to original document. Do you want to delete this revision?",
   "Has_been_replaced_tip": "Document content has been replaced. Please refresh the page.",

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

@@ -367,7 +367,7 @@
   "Link_file": "Link file",
   "Keep_my_modification": "Keep my modification",
   "Keep_other_modification": "Keep other's modification",
-  "Keep_both_modification": "Keep my modification",
+  "Keep_both_modification": "Keep both modification",
   "Tip": "Tip",
   "Rebase_delete_no_change_revision_tip": "Revision has not made any change compared to original document. Do you want to delete this revision?",
   "Has_been_replaced_tip": "Document content has been replaced. Please refresh the page.",

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

@@ -367,7 +367,7 @@
   "Link_file": "Ссылка на файл",
   "Keep_my_modification": "Сохранить мою модификацию",
   "Keep_other_modification": "Сохранить чужую модификацию",
-  "Keep_both_modification": "Сохранить мою модификацию",
+  "Keep_both_modification": "Keep both modification",
   "Tip": "Совет",
   "Rebase_delete_no_change_revision_tip": "Редакция не внесла никаких изменений по сравнению с исходным документом. Вы хотите удалить эту редакцию?",
   "Has_been_replaced_tip": "Содержимое документа было заменено. Обновите страницу.",
@@ -376,7 +376,7 @@
   "Merge_tip": "В документах есть конфликты. Вы хотите объединить их?",
   "Has_conflict_before_view_changes_tip": "В документе есть конфликты. Разрешите конфликт перед просмотром изменений!",
   "Has_been_removed_tip": "Документ удален, посмотрите другие документы.",
-  "Revision_created": "Revision {{id}} created",
-  "Checking": "Checking...",
-  "Publishing": "Publishing..."
+  "Revision_created": "Версия {{id}} создана",
+  "Checking": "Проверка...",
+  "Publishing": "Публикация..."
 }

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

@@ -367,7 +367,7 @@
   "Link_file": "文件链接",
   "Keep_my_modification": "保留我的更改",
   "Keep_other_modification": "保留其他的更改",
-  "Keep_both_modification": "保留我的更改",
+  "Keep_both_modification": "保留两者更改",
   "Tip": "提示",
   "Rebase_delete_no_change_revision_tip": "修订改没有更改，是否删除修订稿？",
   "Has_been_replaced_tip": "文档内容已经被替换，请刷新页面。",

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

@@ -1,56 +0,0 @@
-import React, { useCallback, useEffect } from 'react';
-import { renderLeaf, renderElement } from '../extension';
-import { getDiff } from '../utils/diff';
-import context from '../../context';
-import { ELEMENT_TYPE, ADDED_STYLE, DELETED_STYLE } from '../extension/constants';
-import SDocViewer from './viewer';
-import '../../assets/css/diff-viewer.css';
-var DiffViewer = function DiffViewer(_ref) {
-  var editor = _ref.editor,
-    currentContent = _ref.currentContent,
-    lastContent = _ref.lastContent,
-    didMountCallback = _ref.didMountCallback,
-    showToolbar = _ref.showToolbar,
-    showOutline = _ref.showOutline;
-  var diff = getDiff(currentContent, lastContent);
-  context.initSettings();
-  useEffect(function () {
-    didMountCallback && didMountCallback(diff);
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  var customRenderLeaf = useCallback(function (props, editor) {
-    return renderLeaf(props, editor);
-  }, []);
-  var customRenderElement = useCallback(function (props, editor) {
-    var element = props.element;
-    var type = element.type;
-    if (type === ELEMENT_TYPE.IMAGE && (element.ADD || element.DELETE)) {
-      var style = element.ADD ? ADDED_STYLE : DELETED_STYLE;
-      return /*#__PURE__*/React.createElement("span", {
-        className: "d-inline-block p-1",
-        style: {
-          backgroundColor: style.computed_background_color,
-          width: 'fit-content',
-          height: 'fit-content'
-        }
-      }, renderElement(props, editor));
-    }
-    return renderElement(props, editor);
-  }, []);
-  return /*#__PURE__*/React.createElement(SDocViewer, {
-    editor: editor,
-    showToolbar: showToolbar,
-    showOutline: showOutline,
-    document: {
-      children: diff.value
-    },
-    renderLeaf: customRenderLeaf,
-    renderElement: customRenderElement
-  });
-};
-DiffViewer.defaultProps = {
-  showToolbar: false,
-  showOutline: false
-};
-export default DiffViewer;

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

@@ -1,51 +0,0 @@
-import React, { Fragment } from 'react';
-import { Editable, Slate } from '@seafile/slate-react';
-import { renderLeaf as _renderLeaf, renderElement as _renderElement, createDefaultEditor } from '../extension';
-import withNodeId from '../node-id';
-import { generateDefaultDocContent } from '../../utils';
-import { SetNodeToDecorations } from '../highlight-decorate/setNodeToDecorations';
-import { usePipDecorate } from '../decorates';
-import { ArticleContainer, EditorContainer, EditorContent } from '../layout';
-import '../assets/css/simple-viewer.css';
-var SDocViewer = function SDocViewer(_ref) {
-  var editor = _ref.editor,
-    document = _ref.document,
-    customRenderLeaf = _ref.renderLeaf,
-    customRenderElement = _ref.renderElement,
-    showToolbar = _ref.showToolbar,
-    showOutline = _ref.showOutline;
-  var validEditor = editor || withNodeId(createDefaultEditor());
-  var slateValue = (document || generateDefaultDocContent()).children;
-  var decorate = usePipDecorate(validEditor);
-  return /*#__PURE__*/React.createElement(EditorContainer, {
-    editor: validEditor,
-    showToolbar: showToolbar,
-    readonly: true
-  }, /*#__PURE__*/React.createElement(EditorContent, {
-    docValue: slateValue,
-    readonly: true,
-    showOutline: showOutline
-  }, /*#__PURE__*/React.createElement(Slate, {
-    editor: validEditor,
-    value: slateValue
-  }, /*#__PURE__*/React.createElement(ArticleContainer, {
-    editor: validEditor,
-    readOnly: true
-  }, /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(SetNodeToDecorations, null), /*#__PURE__*/React.createElement(Editable, {
-    readOnly: true,
-    placeholder: "",
-    renderElement: function renderElement(props) {
-      return (customRenderElement || _renderElement)(props, validEditor);
-    },
-    renderLeaf: function renderLeaf(props) {
-      return (customRenderLeaf || _renderLeaf)(props, validEditor);
-    },
-    onDOMBeforeInput: function onDOMBeforeInput(event) {},
-    decorate: decorate
-  }))))));
-};
-SDocViewer.defaultProps = {
-  showToolbar: false,
-  showOutline: false
-};
-export default SDocViewer;