@seafile/sdoc-editor 1.0.157 → 1.0.158

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

@@ -4,7 +4,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PAGE_EDIT_AREA_WIDTH = exports.MODIFY_TYPE = exports.LEFT_OUTLINE_WIDTH = exports.INTERNAL_EVENT = exports.HEADER_OUTLINE_WIDTH_MAPPING = exports.FULL_WIDTH_MODE = exports.DOCUMENT_PLUGIN_EDITOR = exports.DIFF_VIEWER = exports.COMMENT_EDITOR_EDIT_AREA_WIDTH = exports.COMMENT_EDITOR = exports.ARTICLE_MIN_WIDTH = exports.ARTICLE_FULL_WIDTH = void 0;
+exports.PAGE_EDIT_AREA_WIDTH = exports.MODIFY_TYPE = exports.LEFT_OUTLINE_WIDTH = exports.INTERNAL_EVENT = exports.HEADER_OUTLINE_WIDTH_MAPPING = exports.FULL_WIDTH_MODE = exports.DOCUMENT_PLUGIN_EDITOR = exports.DIFF_VIEWER = exports.COMMENT_EDITOR_EDIT_AREA_WIDTH = exports.COMMENT_EDITOR = exports.ARTICLE_FULL_WIDTH = exports.ARTICLE_FULL_MIN_WIDTH = exports.ARTICLE_DEFAULT_WIDTH = void 0;
 Object.defineProperty(exports, "PLUGIN_BTN_POSITION", {
   enumerable: true,
   get: function () {
@@ -93,6 +93,8 @@ const SDOC_STORAGE = exports.SDOC_STORAGE = 'sdoc';
 const LEFT_OUTLINE_WIDTH = exports.LEFT_OUTLINE_WIDTH = 280;
 const RIGHT_COMMENT_WIDTH = exports.RIGHT_COMMENT_WIDTH = 314;
 
-// min width and full width
-const ARTICLE_MIN_WIDTH = exports.ARTICLE_MIN_WIDTH = '794px';
-const ARTICLE_FULL_WIDTH = exports.ARTICLE_FULL_WIDTH = 'calc(100% - 50px - 50px)'; // The left and right sides are 50
+// Default mode width
+const ARTICLE_DEFAULT_WIDTH = exports.ARTICLE_DEFAULT_WIDTH = '794px';
+// Width in full width mode
+const ARTICLE_FULL_WIDTH = exports.ARTICLE_FULL_WIDTH = 'calc(100% - 50px - 50px)'; // The left and right sides are 50
+const ARTICLE_FULL_MIN_WIDTH = exports.ARTICLE_FULL_MIN_WIDTH = '400px';

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

@@ -12,6 +12,9 @@ var _outline = _interopRequireDefault(require("../outline"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _provider = _interopRequireDefault(require("../comment/provider"));
 var _rightPanel = _interopRequireDefault(require("../right-panel"));
+var _localStorageUtils = _interopRequireDefault(require("../../utils/local-storage-utils"));
+var _fullWidthMode = require("../utils/full-width-mode");
+var _constants = require("../../basic-sdk/constants");
 const EditorContent = _ref => {
   let {
     readonly,
@@ -29,6 +32,20 @@ const EditorContent = _ref => {
     } = event.target;
     setScrollLeft(scrollLeft);
   }, []);
+  const onBodyScroll = (0, _react.useCallback)(() => {
+    const scrollLeft = window.scrollX;
+    setScrollLeft(scrollLeft);
+  }, []);
+  (0, _react.useEffect)(() => {
+    // Modify the outline position even when scrolling the window
+    if (_localStorageUtils.default.getItem(_constants.FULL_WIDTH_MODE)) {
+      document.addEventListener('scroll', onBodyScroll);
+    }
+    return () => {
+      document.removeEventListener('scroll', onBodyScroll);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   const className = (0, _classnames.default)('sdoc-editor-content', {
     'readonly': readonly,
     'no-outline': !showOutline
@@ -50,7 +67,8 @@ const EditorContent = _ref => {
       scrollRef
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: className
+    className: className,
+    style: (0, _fullWidthMode.getContentStyleByFullModeStyle)()
   }, showOutline && /*#__PURE__*/_react.default.createElement(_outline.default, {
     scrollLeft: scrollLeft,
     doc: docValue

package/dist/basic-sdk/utils/default-mode.js

@@ -14,20 +14,20 @@ const getStyleByDefaultMode = (scrollRef, editor) => {
     isShowComments
   } = sdocStorage;
   const containerStyle = {
-    width: _constants.ARTICLE_MIN_WIDTH
+    width: _constants.ARTICLE_DEFAULT_WIDTH
   };
 
   // Has outline
   if (isShowOutline && editor.editorType !== _constants.WIKI_EDITOR) {
     const rect = scrollRef.current.getBoundingClientRect();
     if (isShowComments) {
-      const outlineRightWidth = Number(_constants.ARTICLE_MIN_WIDTH.slice(0, 3)) + _constants.RIGHT_COMMENT_WIDTH;
+      const outlineRightWidth = Number(_constants.ARTICLE_DEFAULT_WIDTH.slice(0, 3)) + _constants.RIGHT_COMMENT_WIDTH;
       if (rect.width - outlineRightWidth < 280) {
         containerStyle['marginLeft'] = `${_constants.LEFT_OUTLINE_WIDTH}px`;
         return containerStyle;
       }
     }
-    if ((rect.width - Number(_constants.ARTICLE_MIN_WIDTH.slice(0, 3))) / 2 < 280) {
+    if ((rect.width - Number(_constants.ARTICLE_DEFAULT_WIDTH.slice(0, 3))) / 2 < 280) {
       containerStyle['marginLeft'] = `${_constants.LEFT_OUTLINE_WIDTH}px`;
     }
   }

package/dist/basic-sdk/utils/full-width-mode.js

@@ -4,9 +4,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getStyleByFullWidthMode = void 0;
+exports.getStyleByFullWidthMode = exports.getContentStyleByFullModeStyle = void 0;
 var _localStorageUtils = _interopRequireDefault(require("../../utils/local-storage-utils"));
-var _defaultMode = require("./default-mode");
 var _constants = require("../constants");
 const getStyleByFullWidthMode = (scrollRef, editor) => {
   const sdocStorage = _localStorageUtils.default.getItem(_constants.SDOC_STORAGE) || {};
@@ -16,23 +15,7 @@ const getStyleByFullWidthMode = (scrollRef, editor) => {
   } = sdocStorage;
   let containerStyle = {};
   containerStyle['width'] = _constants.ARTICLE_FULL_WIDTH;
-
-  // Has outline and comments
-  if (isShowOutline && editor.editorType !== _constants.WIKI_EDITOR && isHasComments) {
-    const rect = scrollRef.current.getBoundingClientRect();
-    const currentMaxWidth = rect.width - 100;
-    const leftWidth = _constants.LEFT_OUTLINE_WIDTH - 50;
-    const rightWidth = _constants.RIGHT_COMMENT_WIDTH - 50;
-    // Enough width to enable widescreen mode
-    if (currentMaxWidth - leftWidth - rightWidth > _constants.ARTICLE_MIN_WIDTH.slice(0, -2)) {
-      containerStyle['marginLeft'] = `${_constants.LEFT_OUTLINE_WIDTH}px`;
-      containerStyle['width'] = containerStyle['width'].slice(0, -1) + ` - ${leftWidth + rightWidth}px`;
-    } else {
-      _localStorageUtils.default.setItem(_constants.FULL_WIDTH_MODE, false);
-      containerStyle = (0, _defaultMode.getStyleByDefaultMode)(scrollRef, editor);
-    }
-    return containerStyle;
-  }
+  containerStyle['minWidth'] = _constants.ARTICLE_FULL_MIN_WIDTH;
 
   // Has outline
   if (isShowOutline && editor.editorType !== _constants.WIKI_EDITOR) {
@@ -40,7 +23,7 @@ const getStyleByFullWidthMode = (scrollRef, editor) => {
     const adjustWidth = ` - ${_constants.LEFT_OUTLINE_WIDTH - 50}px`; // One side is 50
     containerStyle['width'] = containerStyle['width'].slice(0, -1) + adjustWidth;
   }
-  // Has comments
+  // Has comments right list
   if (isHasComments) {
     containerStyle['marginRight'] = `${_constants.RIGHT_COMMENT_WIDTH}px`;
     const adjustWidth = ` - ${_constants.RIGHT_COMMENT_WIDTH - 50}px`; // One side is 50
@@ -48,4 +31,13 @@ const getStyleByFullWidthMode = (scrollRef, editor) => {
   }
   return containerStyle;
 };
-exports.getStyleByFullWidthMode = getStyleByFullWidthMode;
+exports.getStyleByFullWidthMode = getStyleByFullWidthMode;
+const getContentStyleByFullModeStyle = () => {
+  if (_localStorageUtils.default.getItem(_constants.FULL_WIDTH_MODE)) {
+    return {
+      'minWidth': `${Number(_constants.ARTICLE_FULL_MIN_WIDTH.slice(0, -2)) + _constants.RIGHT_COMMENT_WIDTH}px`
+    };
+  }
+  return {};
+};
+exports.getContentStyleByFullModeStyle = getContentStyleByFullModeStyle;

package/package.json

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