@seafile/sdoc-editor 0.1.106 → 0.1.107

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-list.css

@@ -170,6 +170,7 @@
   margin-bottom: 10px;
   min-height: 40px;
   max-height: 120px;
+  min-width: 240px;
   overflow: auto;
   background: #fff;
   border: 1px solid rgba(0, 0, 0, .12);

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.106",
+  "version": "0.1.107",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",