@seafile/seafile-editor 1.0.123 → 1.0.124

package/dist/containers/outline/index.js

@@ -72,7 +72,8 @@ const Outline = _ref => {
     };
     scrollRef.current.addEventListener('scroll', updateScrollLeft);
     return () => {
-      scrollRef.current.removeEventListener('scroll', updateScrollLeft);
+      var _scrollRef$current;
+      (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.removeEventListener('scroll', updateScrollLeft);
     };
   }, [scrollRef]);
   (0, _react.useEffect)(() => {

package/dist/editors/slate-editor/index.js

@@ -18,8 +18,8 @@ var _core = require("../../extension/core");
 var _useScrollContext = require("../../hooks/use-scroll-context");
 var _useInsertImage = _interopRequireDefault(require("../../hooks/use-insert-image"));
 var _common = require("../../utils/common");
-var _outline = _interopRequireWildcard(require("../../containers/outline"));
-var _eventTypes = require("../../constants/event-types");
+var _outline = _interopRequireDefault(require("../../containers/outline"));
+var _useContainerStyle = _interopRequireDefault(require("../../hooks/use-container-style"));
 require("./style.css");
 const isMacOS = (0, _common.isMac)();
 function SlateEditor(_ref) {
@@ -32,9 +32,11 @@ function SlateEditor(_ref) {
     isSupportInsertSeafileImage,
     children
   } = _ref;
-  const [slateValue, setSlateValue] = (0, _react.useState)(value);
-  const [containerStyle, setContainerStyle] = (0, _react.useState)({});
   const scrollRef = (0, _react.useRef)(null);
+  const [slateValue, setSlateValue] = (0, _react.useState)(value);
+  const {
+    containerStyle
+  } = (0, _useContainerStyle.default)(scrollRef);
   const editor = (0, _react.useMemo)(() => (0, _withPropsEditor.default)(_extension.baseEditor, {
     editorApi,
     onSave
@@ -44,34 +46,6 @@ function SlateEditor(_ref) {
   }, [editor]);
   (0, _useInsertImage.default)(editor);
   const decorate = (0, _extension.useHighlight)(editor);
-
-  // Adjust article container margin-left value according to isShown of the outline and width of window
-  const handleWindowResize = (0, _react.useCallback)(() => {
-    const rect = scrollRef.current.getBoundingClientRect();
-    const articleElement = document.querySelector('.article');
-    const articleRect = articleElement ? articleElement.getBoundingClientRect() : null;
-    const isOutlineShow = (0, _outline.getOutlineSetting)();
-    if (isOutlineShow && articleRect && (rect.width - articleRect.width) / 2 < 280) {
-      setContainerStyle({
-        marginLeft: 280
-      });
-    } else {
-      setContainerStyle({});
-    }
-  }, []);
-  (0, _react.useEffect)(() => {
-    handleWindowResize();
-    window.addEventListener('resize', handleWindowResize);
-    const eventBus = _eventBus.default.getInstance();
-    const unsubscribeOutline = eventBus.subscribe(_eventTypes.INTERNAL_EVENTS.OUTLINE_STATE_CHANGED, handleWindowResize);
-    const unsubscribeResizeArticle = eventBus.subscribe(_eventTypes.INTERNAL_EVENTS.RESIZE_ARTICLE, handleWindowResize);
-    return () => {
-      window.removeEventListener('resize', handleWindowResize);
-      unsubscribeOutline();
-      unsubscribeResizeArticle();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
   const onChange = (0, _react.useCallback)(value => {
     setSlateValue(value);
     if (editor.forceNormalize) return;
@@ -134,7 +108,7 @@ function SlateEditor(_ref) {
     }
   }, [editor, focusFirstNode]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "sf-slate-editor-container"
+    className: "sf-slate-editor-container ".concat(_common.isMobile && 'mobile')
   }, /*#__PURE__*/_react.default.createElement(_extension.Toolbar, {
     editor: editor,
     isRichEditor: true,
@@ -156,7 +130,7 @@ function SlateEditor(_ref) {
     className: "sf-slate-scroll-container ".concat(isMacOS ? '' : 'isWin')
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "sf-slate-article-content"
-  }, /*#__PURE__*/_react.default.createElement(_outline.default, {
+  }, !_common.isMobile && /*#__PURE__*/_react.default.createElement(_outline.default, {
     editor: editor
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "sf-slate-article-container",

package/dist/editors/slate-editor/style.css

@@ -4,7 +4,7 @@
   flex-direction: column;
   min-height: 0;
   min-width: 0;
-  position:relative;
+  position: relative;
 }
 
 .sf-slate-editor-container .sf-slate-editor-toolbar {
@@ -18,6 +18,11 @@
   border-bottom: 1px solid #e5e6e8;
   position: relative;
   z-index: 102;
+  overflow-x: auto;
+}
+
+.sf-slate-editor-container .sf-slate-editor-toolbar::-webkit-scrollbar {
+  display: none;
 }
 
 .sf-slate-editor-container .sf-slate-editor-content {
@@ -42,7 +47,7 @@
   position: relative;
 }
 
-.sf-slate-editor-container .sf-slate-scroll-container.isWin::-webkit-scrollbar{
+.sf-slate-editor-container .sf-slate-scroll-container.isWin::-webkit-scrollbar {
   width: 8px;
   height: 8px;
 }
@@ -56,7 +61,7 @@
   border-radius: 10px;
 }
 
-.sf-slate-scroll-container .sf-slate-article-content{
+.sf-slate-scroll-container .sf-slate-article-content {
   display: flex;
   position: absolute;
   min-width: 1100px;
@@ -98,51 +103,19 @@
   outline: none;
 }
 
-@media (max-width: 991.8px) {
-  .sf-slate-editor-toolbar {
-    overflow-x: auto;
-    padding-right: 40px !important;
-    justify-content: flex-start !important;
-  }
-
-  .sf-slate-editor-toolbar::-webkit-scrollbar{
-    display: none;
-  }
-
-  .sf-slate-editor-toolbar .sf-slate-article-info-control,
-  .sf-slate-editor-toolbar .sf-slate-help-info-control {
-    right: 0;
-    padding: 0 20px;
-    height: 43px;
-    align-items: center;
-    background-color: #fcfcfc;
-    position: fixed;
-  }
-
-  .sf-slate-article-container {
-    width: 100%;
-  }
-
-  .sf-slate-article-container .article {
-    margin: 20px !important;
-    padding: 20px 30px;
-  }
+.sf-slate-editor-container.mobile .sf-slate-scroll-container .sf-slate-article-content {
+  min-width: 0;
+  min-height: 0;
 }
 
-@media (max-width: 768px) {
-  .sf-slate-editor-container .sf-slate-article-container {
-    flex: 1;
-    position: relative;
-    max-width: 950px;
-    min-width: auto;
-    margin: 0 auto;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
+.sf-slate-editor-container.mobile .sf-slate-article-container {
+  min-width: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
 
-  .sf-slate-article-container .article {
-    margin: 0 !important;
-    padding: 10px 15px !important;
-    border: 0 !important;
-  }
+.sf-slate-editor-container.mobile .sf-slate-article-container .article {
+  margin: 0 !important;
+  padding: 10px 15px !important;
+  border: 0 !important;
 }

package/dist/editors/slate-viewer/index.js

@@ -13,6 +13,7 @@ var _outline = _interopRequireDefault(require("../../containers/outline"));
 var _useScrollContext = require("../../hooks/use-scroll-context");
 var _userLinkClick = _interopRequireDefault(require("../../hooks/user-link-click"));
 var _common = require("../../utils/common");
+var _useContainerStyle = _interopRequireDefault(require("../../hooks/use-container-style"));
 require("./style.css");
 const isMacOS = (0, _common.isMac)();
 function SlateViewer(_ref) {
@@ -23,6 +24,9 @@ function SlateViewer(_ref) {
     onLinkClick
   } = _ref;
   const scrollRef = (0, _react.useRef)(null);
+  const {
+    containerStyle
+  } = (0, _useContainerStyle.default)(scrollRef);
   const editor = (0, _react.useMemo)(() => {
     return (0, _extension.createSlateEditor)();
   }, []);
@@ -41,7 +45,9 @@ function SlateViewer(_ref) {
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/_react.default.createElement(_slateReact.Slate, {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-slate-viewer-container ".concat(_common.isMobile && 'mobile')
+  }, /*#__PURE__*/_react.default.createElement(_slateReact.Slate, {
     editor: editor,
     initialValue: value
   }, /*#__PURE__*/_react.default.createElement(_useScrollContext.ScrollContext.Provider, {
@@ -52,7 +58,12 @@ function SlateViewer(_ref) {
     ref: scrollRef,
     className: "sf-slate-viewer-scroll-container ".concat(isMacOS ? '' : 'isWin', " ").concat(isShowOutline ? 'outline' : '')
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "sf-slate-viewer-article-container"
+    className: "sf-slate-article-content"
+  }, isShowOutline && !_common.isMobile && /*#__PURE__*/_react.default.createElement(_outline.default, {
+    editor: editor
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sf-slate-viewer-article-container",
+    style: containerStyle
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "article"
   }, /*#__PURE__*/_react.default.createElement(_extension.SetNodeToDecorations, null), /*#__PURE__*/_react.default.createElement(_slateReact.Editable, {
@@ -60,9 +71,5 @@ function SlateViewer(_ref) {
     decorate: decorate,
     renderElement: _extension.renderElement,
     renderLeaf: _extension.renderLeaf
-  }))), isShowOutline && /*#__PURE__*/_react.default.createElement("div", {
-    className: "sf-slate-viewer-outline"
-  }, /*#__PURE__*/_react.default.createElement(_outline.default, {
-    editor: editor
-  })))));
+  }))))))));
 }

package/dist/editors/slate-viewer/style.css

@@ -1,3 +1,12 @@
+.sf-slate-viewer-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  position: relative;
+}
+
 .sf-slate-viewer-scroll-container {
   flex: 1;
   display: flex;
@@ -8,7 +17,7 @@
   padding: 30px 0 15px;
 }
 
-.sf-slate-viewer-scroll-container.isWin::-webkit-scrollbar{
+.sf-slate-viewer-scroll-container.isWin::-webkit-scrollbar {
   width: 8px;
   height: 8px;
 }
@@ -22,27 +31,19 @@
   border-radius: 10px;
 }
 
-.sf-slate-viewer-scroll-container .sf-slate-viewer-article-container {
+.sf-slate-viewer-scroll-container .sf-slate-article-content {
   flex: 1;
-  margin: 0 auto 15px;
+  display: flex;
 }
 
 .sf-slate-viewer-scroll-container.outline .sf-slate-viewer-article-container {
-  margin: 0 340px 15px 40px;
-}
-
-.sf-slate-viewer-scroll-container .sf-slate-viewer-outline {
-  height: 80%;
-  overflow-y: hidden;
-  padding-right: 1rem;
-  position: fixed;
-  right: 0;
-  top: 97px;
-  width: 300px;
-}
-
-.sf-slate-viewer-scroll-container .sf-slate-viewer-outline:hover {
-  overflow-y: auto;
+  flex: 1;
+  position: relative;
+  max-width: 950px;
+  min-width: 400px;
+  margin: 0 auto;
+  width: 794px;
+  top: 0px;
 }
 
 .sf-slate-viewer-scroll-container .article {
@@ -64,23 +65,24 @@
   color: #212529;
 }
 
-@media (max-width: 991.98px) {
-  .sf-slate-viewer-article-container {
-    padding: 0 10px;
-    width: 100%;
-    margin: 0 !important;
-  }
-  
-  .sf-slate-viewer-outline {
-    display: none !important;
-  }
+.sf-slate-viewer-container.mobile .sf-slate-article-content {
+  min-width: 0;
+  min-height: 0;
+  width: 100%;
 }
 
-@media (max-width: 768px) {
-  .sf-slate-viewer-article-container .article {
-    margin: 0 !important;
-    padding: 20px !important;
-  }
+.sf-slate-viewer-container.mobile .sf-slate-viewer-article-container {
+  min-width: 0;
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
+.sf-slate-viewer-container.mobile .sf-slate-viewer-article-container .article {
+  margin: 0 !important;
+  padding: 10px 15px !important;
+  border: 0 !important;
+}
 
+.sf-slate-viewer-container .sf-editor-outline-wrapper {
+  top: 130px;
+}

package/dist/hooks/use-container-style.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _outline = require("../containers/outline");
+var _common = require("../utils/common");
+var _eventBus = _interopRequireDefault(require("../utils/event-bus"));
+var _eventTypes = require("../constants/event-types");
+const useContainerStyle = scrollRef => {
+  const [containerStyle, setContainerStyle] = (0, _react.useState)({});
+
+  // Adjust article container margin-left value according to isShown of the outline and width of window
+  const handleWindowResize = (0, _react.useCallback)(() => {
+    const rect = scrollRef.current.getBoundingClientRect();
+    const articleElement = document.querySelector('.article');
+    const articleRect = articleElement ? articleElement.getBoundingClientRect() : null;
+    const isOutlineShow = (0, _outline.getOutlineSetting)();
+    if (isOutlineShow && articleRect && (rect.width - articleRect.width) / 2 < 280) {
+      setContainerStyle({
+        marginLeft: 280
+      });
+    } else {
+      setContainerStyle({});
+    }
+  }, [scrollRef]);
+  (0, _react.useEffect)(() => {
+    if (_common.isMobile) return;
+    handleWindowResize();
+    window.addEventListener('resize', handleWindowResize);
+    const eventBus = _eventBus.default.getInstance();
+    const unsubscribeOutline = eventBus.subscribe(_eventTypes.INTERNAL_EVENTS.OUTLINE_STATE_CHANGED, handleWindowResize);
+    const unsubscribeResizeArticle = eventBus.subscribe(_eventTypes.INTERNAL_EVENTS.RESIZE_ARTICLE, handleWindowResize);
+    return () => {
+      window.removeEventListener('resize', handleWindowResize);
+      unsubscribeOutline();
+      unsubscribeResizeArticle();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return {
+    containerStyle
+  };
+};
+var _default = exports.default = useContainerStyle;

package/dist/utils/common.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isUrl = exports.isMac = exports.isImage = exports.isDocumentEmpty = exports.IMAGE_TYPES = void 0;
+exports.isUrl = exports.isMobile = exports.isMac = exports.isImage = exports.isDocumentEmpty = exports.IMAGE_TYPES = void 0;
 var _isUrl = _interopRequireDefault(require("is-url"));
 var _slate = require("slate");
 const isMac = () => {
@@ -42,4 +42,5 @@ const isDocumentEmpty = editor => {
   if (hasVoidNode) return false;
   return true;
 };
-exports.isDocumentEmpty = isDocumentEmpty;
+exports.isDocumentEmpty = isDocumentEmpty;
+const isMobile = exports.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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/seafile-editor",
-  "version": "1.0.123",
+  "version": "1.0.124",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -86,7 +86,7 @@
     ]
   },
   "dependencies": {
-    "@seafile/react-image-lightbox": "2.0.5",
+    "@seafile/react-image-lightbox": "3.0.1",
     "classnames": "2.3.2",
     "deep-copy": "1.4.2",
     "deepmerge": "4.3.1",

package/public/media/seafile-editor-font/iconfont.svg

@@ -14,7 +14,7 @@
     />
       <missing-glyph />
       
-      <glyph glyph-name="outline" unicode="&#59015;" d="M64 800h512c35.2 0 64-28.8 64-64s-28.8-64-64-64H64c-35.2 0-64 28.8-64 64s28.8 64 64 64z m934.4-444.8l-12.8-12.8-172.8-172.8c-25.6-25.6-64-25.6-89.6 0-25.6 25.6-25.6 64 0 89.6l134.4 134.4L723.2 528c-25.6 25.6-25.6 64 0 89.6 25.6 25.6 64 25.6 89.6 0l172.8-172.8 9.6-9.6c12.8-12.8 19.2-25.6 19.2-41.6v-3.2c0-12.8-9.6-28.8-16-35.2zM64 448h800c35.2 0 64-28.8 64-64s-28.8-64-64-64H64c-35.2 0-64 28.8-64 64s28.8 64 64 64z m0-352h512c35.2 0 64-28.8 64-64s-28.8-64-64-64H64c-35.2 0-64 28.8-64 64s28.8 64 64 64z"  horiz-adv-x="1024" />
+      <glyph glyph-name="outline" unicode="&#58921;" d="M0 800h128v-96H0z m192-368h128v-96H192z m320 0h512v-96H512zM320 800h704v-96H320zM0 64h128v-96H0z m320 0h704v-96H320z"  horiz-adv-x="1024" />
       
       <glyph glyph-name="description" unicode="&#58919;" d="M512 864C249.6 864 32 649.6 32 384s217.6-480 480-480 480 214.4 480 480S777.6 864 512 864z m-32-755.2c-19.2 0-35.2 16-35.2 35.2V419.2c0 19.2 16 35.2 35.2 35.2h67.2c19.2 0 35.2-16 35.2-35.2V144c0-19.2-16-35.2-35.2-35.2H480z m0 412.8c-19.2 0-35.2 16-35.2 35.2V624c0 19.2 16 35.2 35.2 35.2h67.2c19.2 0 35.2-16 35.2-35.2v-67.2c0-19.2-16-35.2-35.2-35.2H480z"  horiz-adv-x="1024" />
       

package/public/media/seafile-editor-font.css

@@ -1,14 +1,14 @@
 @font-face {
   font-family: "iconfont";
   /* Project id 4375832 */
-  src: url('./seafile-editor-font/iconfont.eot?t=1726105923189');
+  src: url('./seafile-editor-font/iconfont.eot?t=1728893172756');
   /* IE9 */
-  src: url('./seafile-editor-font/iconfont.eot?t=1726105923189#iefix') format('embedded-opentype'),
+  src: url('./seafile-editor-font/iconfont.eot?t=1728893172756#iefix') format('embedded-opentype'),
     /* IE6-IE8 */
-    url('./seafile-editor-font/iconfont.woff2?t=1726105923189') format('woff2'),
-    url('./seafile-editor-font/iconfont.woff?t=1726105923189') format('woff'),
-    url('./seafile-editor-font/iconfont.ttf?t=1726105923189') format('truetype'),
-    url('./seafile-editor-font/iconfont.svg?t=1726105923189#iconfont') format('svg');
+    url('./seafile-editor-font/iconfont.woff2?t=1728893172756') format('woff2'),
+    url('./seafile-editor-font/iconfont.woff?t=1728893172756') format('woff'),
+    url('./seafile-editor-font/iconfont.ttf?t=1728893172756') format('truetype'),
+    url('./seafile-editor-font/iconfont.svg?t=1728893172756#iconfont') format('svg');
 }
 
 .iconfont {
@@ -20,7 +20,7 @@
 }
 
 .icon-outline:before {
-  content: "\e687";
+  content: "\e629";
 }
 
 .icon-description:before {