@seafile/sdoc-editor 0.1.106 → 0.1.109

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/extension/plugins/code-block/plugin.js

@@ -97,6 +97,13 @@ var withCodeBlock = function withCodeBlock(editor) {
       node = _ref2[0],
       path = _ref2[1];
     var type = getNodeType(node);
+    if (type === 'code-line' && path.length <= 1) {
+      Transforms.setNodes(newEditor, {
+        type: 'paragraph'
+      }, {
+        at: path
+      });
+    }
     if (type === CODE_BLOCK) {
       // code-block is the last node in the editor and needs to be followed by a p node
       var isLast = isLastNode(newEditor, node);
@@ -116,6 +123,17 @@ var withCodeBlock = function withCodeBlock(editor) {
           mode: 'highest'
         });
       }
+      if (node.children.length > 1) {
+        node.children.forEach(function (child, index) {
+          if (child.type !== 'code-line') {
+            Transforms.setNodes(newEditor, {
+              type: 'code-line'
+            }, {
+              at: [].concat(_toConsumableArray(path), [index])
+            });
+          }
+        });
+      }
     }
 
     // Perform default behavior

package/dist/basic-sdk/extension/plugins/table/dialog/custom-table-size-dialog/index.js

@@ -4,7 +4,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Component } from 'react';
 import { withTranslation } from 'react-i18next';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Label } from 'reactstrap';
+import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Label, Alert } from 'reactstrap';
 import { TABLE_MAX_ROWS, TABLE_MAX_COLUMNS } from '../../constants';
 import NumberInput from './number-input';
 import './index.css';
@@ -22,25 +22,33 @@ var CustomTableSizeDialog = /*#__PURE__*/function (_Component) {
       var _this$state = _this.state,
         rows = _this$state.rows,
         cols = _this$state.cols;
+      if (!rows || !cols || parseInt(rows) < 1 || parseInt(rows) > 50 || parseInt(cols) < 1 || parseInt(cols) > 50) {
+        _this.setState({
+          errorMessage: 'Valid_values_for_rows_and_columns'
+        });
+        return;
+      }
       _this.props.submit([parseInt(rows), parseInt(cols)]);
     };
     _this.rowsChange = function (event) {
       var value = event.target.value;
       if (value === _this.state.rows) return;
       _this.setState({
-        rows: value
+        rows: value,
+        errorMessage: ''
       });
     };
     _this.colsChange = function (event) {
       var value = event.target.value;
       if (value === _this.state.cols) return;
       _this.setState({
-        cols: value
+        cols: value,
+        errorMessage: ''
       });
     };
     _this.state = {
-      rows: '0',
-      cols: '0'
+      rows: '1',
+      cols: '5'
     };
     return _this;
   }
@@ -50,7 +58,8 @@ var CustomTableSizeDialog = /*#__PURE__*/function (_Component) {
       var t = this.props.t;
       var _this$state2 = this.state,
         rows = _this$state2.rows,
-        cols = _this$state2.cols;
+        cols = _this$state2.cols,
+        errorMessage = _this$state2.errorMessage;
       return /*#__PURE__*/React.createElement(Modal, {
         isOpen: true,
         toggle: this.toggle,
@@ -66,6 +75,7 @@ var CustomTableSizeDialog = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.createElement(Label, {
         className: "mb-2"
       }, t('Rows')), /*#__PURE__*/React.createElement(NumberInput, {
+        min: 1,
         max: TABLE_MAX_ROWS,
         value: rows,
         onChange: this.rowsChange
@@ -74,10 +84,14 @@ var CustomTableSizeDialog = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.createElement(Label, {
         className: "mb-2"
       }, t('Columns')), /*#__PURE__*/React.createElement(NumberInput, {
+        min: 1,
         max: TABLE_MAX_COLUMNS,
         value: cols,
         onChange: this.colsChange
-      })))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+      }))), errorMessage && /*#__PURE__*/React.createElement(Alert, {
+        className: "mt-2 mb-0",
+        color: "danger"
+      }, t(errorMessage))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
         color: "secondary",
         onClick: this.toggle
       }, t('Cancel')), /*#__PURE__*/React.createElement(Button, {

package/dist/basic-sdk/extension/plugins/table/dialog/custom-table-size-dialog/number-input.js

@@ -11,7 +11,7 @@ function NumberInput(props) {
   return /*#__PURE__*/React.createElement(Input, {
     type: "number",
     className: className,
-    value: value || '0',
+    value: value,
     min: min,
     step: step,
     max: max,

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/components/doc-operations/index.js

@@ -6,6 +6,7 @@ import HistoryOperation from './history-operation';
 import CollaboratorsOperation from './collaborators-operation';
 import MoreOperations from './more-operations';
 import CommentsOperation from './comments-operation';
+import ShareOperation from './share-operation';
 import './style.css';
 var DocOperations = function DocOperations(_ref) {
   var isShowChanges = _ref.isShowChanges,
@@ -16,10 +17,6 @@ var DocOperations = function DocOperations(_ref) {
   }, /*#__PURE__*/React.createElement(RevisionOperations, {
     isShowChanges: isShowChanges,
     toggleViewChanges: toggleViewChanges
-  }), /*#__PURE__*/React.createElement(CommentsOperation, null), !isSdocRevision && /*#__PURE__*/React.createElement("span", {
-    className: "op-item"
-  }, /*#__PURE__*/React.createElement("i", {
-    className: "sdocfont sdoc-share"
-  })), /*#__PURE__*/React.createElement(HistoryOperation, null), /*#__PURE__*/React.createElement(CollaboratorsOperation, null), !isSdocRevision && /*#__PURE__*/React.createElement(MoreOperations, null));
+  }), /*#__PURE__*/React.createElement(CommentsOperation, null), !isSdocRevision && /*#__PURE__*/React.createElement(ShareOperation, null), /*#__PURE__*/React.createElement(HistoryOperation, null), /*#__PURE__*/React.createElement(CollaboratorsOperation, null), !isSdocRevision && /*#__PURE__*/React.createElement(MoreOperations, null));
 };
 export default withTranslation('sdoc-editor')(DocOperations);

package/dist/components/doc-operations/share-operation/index.js

@@ -0,0 +1,15 @@
+import React, { useCallback } from 'react';
+import { EventBus } from '../../../basic-sdk';
+import { EXTERNAL_EVENT } from '../../../constants';
+export default function ShareOperation() {
+  var onShareToggle = useCallback(function () {
+    var eventBus = EventBus.getInstance();
+    eventBus.dispatch(EXTERNAL_EVENT.SHARE_SDOC);
+  }, []);
+  return /*#__PURE__*/React.createElement("span", {
+    className: "op-item",
+    onClick: onShareToggle
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-share"
+  }));
+}

package/dist/constants/index.js

@@ -2,6 +2,7 @@ export var EXTERNAL_EVENT = {
   INTERNAL_LINK_CLICK: 'internal_link_click',
   TOGGLE_STAR: 'toggle_star',
   UNMARK_AS_DRAFT: 'unmark_as_draft',
+  SHARE_SDOC: 'share_sdoc',
   CANCEL_TABLE_SELECT_RANGE: 'cancel_table_select_range',
   SET_TABLE_SELECT_RANGE: 'set_table_select_range'
 };

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

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

@@ -25,6 +25,7 @@
   "Code_block": "Code block",
   "Insert_link": "Insert link",
   "Insert_table": "Insert table",
+  "Valid_values_for_rows_and_columns": "Valid values for the number of rows and columns are 0 to 50",
   "Save": "Save",
   "More": "More",
   "Invalid_url": "Invalid URL",

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

@@ -25,6 +25,7 @@
   "Code_block": "代码块",
   "Insert_link": "添加链接",
   "Insert_table": "添加表格",
+  "Valid_values_for_rows_and_columns": "行数和列数的有效值为 0 到 50",
   "Save": "保存",
   "More": "更多",
   "Invalid_url": "无效链接",