@seafile/sdoc-editor 2.0.89 → 2.0.92

package/dist/assets/css/layout.css

@@ -158,3 +158,24 @@
   border-right: none;
   padding-left: 0 !important;
 }
+
+.sdoc-editor-container.mobile .sdoc-editor-toolbar {
+  justify-content: space-evenly;
+}
+
+.sdoc-editor-container.mobile .sdoc-editor-toolbar .sdoc-editor-toolbar-right-menu {
+  bottom: 1px;
+}
+
+.sdoc-editor-container.mobile .sdoc-editor-content {
+  min-width: 100%;
+}
+
+.mobile .sdoc-article-container {
+  width: 100% !important;
+}
+
+.sdoc-editor-container.mobile .sdoc-article-container {
+  padding-top: 0;
+  padding-bottom: 0;
+}

package/dist/assets/css/sdoc-editor-article.css

@@ -8,6 +8,11 @@
   font-size: 11pt;
 }
 
+.mobile .sdoc-editor__article {
+  padding: 1rem;
+  border: 0px solid #e5e6e8;
+}
+
 .sdoc-editor__article>div {
   caret-color: blue;
 }

package/dist/editor/editable-article.js

@@ -23,6 +23,7 @@ var _highlight = require("../highlight");
 var _useForceUpdate = _interopRequireDefault(require("../hooks/use-force-update"));
 var _useScrollContext = require("../hooks/use-scroll-context");
 var _layout = require("../layout");
+var _commonUtils = require("../utils/common-utils");
 var _domUtils = require("../utils/dom-utils");
 var _eventBus = _interopRequireDefault(require("../utils/event-bus"));
 var _eventHandler = _interopRequireDefault(require("../utils/event-handler"));
@@ -195,6 +196,11 @@ var EditableArticle = function EditableArticle(_ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [scrollRef]);
+  var onCompositionEnd = (0, _react.useCallback)(function (event) {
+    if (event.data && _commonUtils.isMobile) {
+      editor.insertText(event.data);
+    }
+  }, []);
   var handleScrollIntoView = (0, _react.useCallback)(function (editor, domRange) {
     try {
       var selection = editor.selection;
@@ -224,7 +230,7 @@ var EditableArticle = function EditableArticle(_ref) {
     onChange: updateSlateValue
   }, /*#__PURE__*/_react["default"].createElement(_layout.ArticleContainer, {
     editor: editor
-  }, /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement(_extension.ContextToolbar, null), /*#__PURE__*/_react["default"].createElement(_highlight.SetNodeToDecorations, null), /*#__PURE__*/_react["default"].createElement(_slateReact.Editable, {
+  }, /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, !_commonUtils.isMobile && /*#__PURE__*/_react["default"].createElement(_extension.ContextToolbar, null), /*#__PURE__*/_react["default"].createElement(_highlight.SetNodeToDecorations, null), /*#__PURE__*/_react["default"].createElement(_slateReact.Editable, {
     scrollSelectionIntoView: handleScrollIntoView,
     cursors: cursors,
     renderElement: _extension.renderElement,
@@ -235,6 +241,7 @@ var EditableArticle = function EditableArticle(_ref) {
     onCut: eventProxy.onCut,
     onCopy: eventProxy.onCopy,
     onCompositionStart: eventProxy.onCompositionStart,
+    onCompositionEnd: onCompositionEnd,
     id: "sdoc-editor",
     "aria-label": "textbox"
   })), /*#__PURE__*/_react["default"].createElement(_extension.SideToolbar, null), showComment && /*#__PURE__*/_react["default"].createElement(_comment["default"], {

package/dist/editor/sdoc-editor.js

@@ -62,6 +62,10 @@ var SdocEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     slateValue = _useState4[0],
     _setSlateValue = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    isEdit = _useState6[0],
+    setIsEdit = _useState6[1];
 
   // Fix: The editor's children are not updated when the document is updated in revision
   // In revision mode, the document is updated, but the editor's children are not updated,as onValueChange override the new document.elements. This unexpected action cause the editor to display the old content
@@ -159,6 +163,17 @@ var SdocEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       unsubscribePresentationFullScreen();
     };
   }, [handleFullScreenPresentation]);
+  var handleEditToggle = (0, _react.useCallback)(function (_ref3) {
+    var isEdit = _ref3.isEdit;
+    setIsEdit(isEdit);
+  }, []);
+  (0, _react.useEffect)(function () {
+    var eventBus = _eventBus["default"].getInstance();
+    var unsubscribeViewOrEdit = eventBus.subscribe('ViewOrEdit', handleEditToggle);
+    return function () {
+      unsubscribeViewOrEdit();
+    };
+  }, [handleEditToggle]);
   (0, _react.useEffect)(function () {
     var handleExit = function handleExit(e) {
       if ((0, _isHotkey["default"])('esc', e)) {
@@ -220,7 +235,7 @@ var SdocEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       className: "h-100 w-100 d-flex align-items-center justify-content-center"
     }, /*#__PURE__*/_react["default"].createElement(_fileLoading["default"], null));
   }
-  if (_commonUtils.isMobile || showFullScreen) {
+  if (_commonUtils.isMobile && !isEdit || showFullScreen) {
     return /*#__PURE__*/_react["default"].createElement(_layout.EditorContainer, {
       editor: validEditor,
       readonly: true,
@@ -257,6 +272,25 @@ var SdocEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }))));
   }
   var isShowComment = typeof showComment === 'boolean' ? showComment : true;
+  if (_commonUtils.isMobile && isEdit) {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_layout.EditorContainer, {
+      editor: validEditor
+    }, /*#__PURE__*/_react["default"].createElement(_useColorContext.ColorProvider, null, /*#__PURE__*/_react["default"].createElement(_layout.EditorContent, {
+      docValue: slateValue,
+      showOutline: false,
+      editor: validEditor,
+      showComment: false
+    }, /*#__PURE__*/_react["default"].createElement(_editableArticle["default"], {
+      editor: validEditor,
+      slateValue: slateValue,
+      updateSlateValue: onValueChange,
+      showComment: false
+    })), isShowHeaderToolbar && /*#__PURE__*/_react["default"].createElement(_extension.HeaderToolbar, {
+      editor: validEditor
+    }))), /*#__PURE__*/_react["default"].createElement(_insertElementDialog["default"], {
+      editor: validEditor
+    }));
+  }
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_layout.EditorContainer, {
     editor: validEditor
   }, /*#__PURE__*/_react["default"].createElement(_useColorContext.ColorProvider, null, isShowHeaderToolbar && /*#__PURE__*/_react["default"].createElement(_extension.HeaderToolbar, {

package/dist/extension/commons/menu/menu.css

@@ -80,3 +80,7 @@
   font-size: 12px;
   color: #999;
 }
+
+.menu-group:last-child {
+  border-right: none;
+}

package/dist/extension/plugins/header/menu/index.js

@@ -122,7 +122,9 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
         className: headerIconClass
       })), isShowHeaderPopover && /*#__PURE__*/_react["default"].createElement("div", {
         ref: this.setMenuRef,
-        className: "header-popover sdoc-dropdown-menu"
+        className: (0, _classnames["default"])('header-popover sdoc-dropdown-menu', {
+          'sdoc-dropdown-menu-mobile': _commonUtils.isMobile
+        })
       }, itemList.map(function (item, index) {
         if (item === 'divider') {
           return /*#__PURE__*/_react["default"].createElement("div", {

package/dist/extension/plugins/header/menu/style.css

@@ -65,6 +65,11 @@
   z-index: 101;
 }
 
+.header-menu .sdoc-dropdown-menu-mobile {
+  top: auto;
+  bottom: 100%;
+}
+
 .header-menu .header-popover .sdoc-dropdown-menu-item {
   font-size: 14px;
   height: auto;

package/dist/extension/plugins/table/plugin.js

@@ -77,7 +77,7 @@ var withTable = function withTable(editor) {
   newEditor.insertBreak = function () {
     var selectedNode = (0, _core.getSelectedNodeByType)(newEditor, _constants2.ELEMENT_TYPE.TABLE);
     if (selectedNode != null) {
-      newEditor.insertText('\n'); // If table is selected, wrap in cell
+      newEditor.insertText("\n\uFEFF"); // If table is selected, wrap in cell
       return;
     }
     insertBreak();

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _useSelectionUpdate = _interopRequireDefault(require("../../../hooks/use-selection-update"));
+var _commonUtils = require("../../../utils/common-utils");
 var _commons = require("../../commons");
 var _constants = require("../../constants");
 var _core = require("../../core");
@@ -28,6 +29,30 @@ var HeaderToolbar = function HeaderToolbar(_ref) {
     readonly = _ref$readonly === void 0 ? false : _ref$readonly;
   (0, _useSelectionUpdate["default"])();
   var isSelectTableCell = (0, _core.getSelectedNodeByType)(editor, _constants.TABLE_CELL);
+  if (_commonUtils.isMobile) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "sdoc-editor-toolbar"
+    }, /*#__PURE__*/_react["default"].createElement(_commons.MenuGroup, null, /*#__PURE__*/_react["default"].createElement(_historyMenu["default"], {
+      editor: editor,
+      readonly: readonly
+    })), /*#__PURE__*/_react["default"].createElement(_menu6["default"], {
+      editor: editor,
+      readonly: readonly
+    }), !isSelectTableCell && /*#__PURE__*/_react["default"].createElement(_commons.MenuGroup, null, /*#__PURE__*/_react["default"].createElement(_menu7["default"], {
+      editor: editor,
+      type: _constants.UNORDERED_LIST,
+      readonly: readonly,
+      ariaLabel: "unordered list"
+    }), /*#__PURE__*/_react["default"].createElement(_menu7["default"], {
+      editor: editor,
+      type: _constants.ORDERED_LIST,
+      readonly: readonly,
+      ariaLabel: "ordered list"
+    }), /*#__PURE__*/_react["default"].createElement(_menu3["default"], {
+      editor: editor,
+      readonly: readonly
+    })));
+  }
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-editor-toolbar"
   }, /*#__PURE__*/_react["default"].createElement(_commons.MenuGroup, null, /*#__PURE__*/_react["default"].createElement(_historyMenu["default"], {

package/dist/extension/toolbar/insert-element-toolbar/index.js

@@ -15,6 +15,7 @@ var _reactstrap = require("reactstrap");
 var _slate = require("@seafile/slate");
 var _slateReact = require("@seafile/slate-react");
 var _constants = require("../../../constants");
+var _commonUtils = require("../../../utils/common-utils");
 var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
 var _dropdownMenuItem = _interopRequireDefault(require("../../commons/dropdown-menu-item"));
 var _constants2 = require("../../constants");
@@ -263,6 +264,36 @@ var QuickInsertBlockMenu = function QuickInsertBlockMenu(_ref) {
         return onInsert(_constants2.ELEMENT_TYPE.PARAGRAPH);
       }
     }));
+    if (_commonUtils.isMobile) {
+      items = (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _constants2.UNORDERED_LIST, /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
+        isHidden: !quickInsertMenuSearchMap[_constants2.UNORDERED_LIST],
+        key: "sdoc-insert-menu-unorder-list",
+        menuConfig: (0, _objectSpread2["default"])({}, _constants2.SIDE_INSERT_MENUS_CONFIG[_constants2.ELEMENT_TYPE.UNORDERED_LIST]),
+        onClick: function onClick() {
+          onInsertList(_constants2.ELEMENT_TYPE.UNORDERED_LIST);
+        }
+      })), _constants2.ORDERED_LIST, /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
+        isHidden: !quickInsertMenuSearchMap[_constants2.ORDERED_LIST],
+        key: "sdoc-insert-menu-order-list",
+        menuConfig: (0, _objectSpread2["default"])({}, _constants2.SIDE_INSERT_MENUS_CONFIG[_constants2.ELEMENT_TYPE.ORDERED_LIST]),
+        onClick: function onClick() {
+          onInsertList(_constants2.ELEMENT_TYPE.ORDERED_LIST);
+        }
+      })), _constants2.CHECK_LIST_ITEM, /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
+        isHidden: !quickInsertMenuSearchMap[_constants2.CHECK_LIST_ITEM],
+        key: "sdoc-insert-menu-check-list",
+        menuConfig: (0, _objectSpread2["default"])({}, _constants2.SIDE_INSERT_MENUS_CONFIG[_constants2.ELEMENT_TYPE.CHECK_LIST_ITEM]),
+        onClick: onInsertCheckList
+      })), _constants2.PARAGRAPH, /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
+        isHidden: !quickInsertMenuSearchMap[_constants2.PARAGRAPH],
+        disabled: isEmptyNode,
+        key: "sdoc-insert-menu-paragraph",
+        menuConfig: (0, _objectSpread2["default"])({}, _constants2.SIDE_INSERT_MENUS_CONFIG[_constants2.ELEMENT_TYPE.PARAGRAPH]),
+        onClick: function onClick() {
+          return onInsert(_constants2.ELEMENT_TYPE.PARAGRAPH);
+        }
+      }));
+    }
     _constants2.SIDE_INSERT_MENUS_CONFIG[_constants2.ELEMENT_TYPE.HEADER].forEach(function (item) {
       items[item.id.toLowerCase()] = /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
         isHidden: !quickInsertMenuSearchMap[item.type],
@@ -273,7 +304,7 @@ var QuickInsertBlockMenu = function QuickInsertBlockMenu(_ref) {
         }
       });
     });
-    _constants2.SIDE_INSERT_MENUS_CONFIG[_constants2.ELEMENT_TYPE.MULTI_COLUMN].forEach(function (item) {
+    !_commonUtils.isMobile && _constants2.SIDE_INSERT_MENUS_CONFIG[_constants2.ELEMENT_TYPE.MULTI_COLUMN].forEach(function (item) {
       items[item.id.toLowerCase()] = /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
         isHidden: !quickInsertMenuSearchMap[item.type],
         disabled: isDisableMultiColumn,

package/dist/extension/toolbar/side-toolbar/index.js

@@ -15,6 +15,7 @@ var _slateReact = require("@seafile/slate-react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _constants = require("../../../constants");
 var _useScrollContext = require("../../../hooks/use-scroll-context");
+var _commonUtils = require("../../../utils/common-utils");
 var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
 var _constants2 = require("../../constants");
 var _core = require("../../core");
@@ -578,7 +579,7 @@ var SideToolbar = function SideToolbar() {
   var onMouseLeave = (0, _react.useCallback)(function () {
     setIsEnterMoreVertical(false);
   }, []);
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !_commonUtils.isMobile && /*#__PURE__*/_react["default"].createElement("div", {
     onAnimationEnd: function onAnimationEnd() {
       return setIsMoving(false);
     },
@@ -607,6 +608,6 @@ var SideToolbar = function SideToolbar() {
     menuPosition: menuPosition,
     onReset: onReset,
     ref: sideMenuRef
-  }));
+  })));
 };
 var _default = exports["default"] = SideToolbar;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "2.0.89",
+  "version": "2.0.92",
   "main": "dist/index.js",
   "scripts": {
     "test": "jest",
@@ -70,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e9eb8bd2f2c9b1ba5219ae8f7a1af64907040f73"
+  "gitHead": "e0c4a3fff287103bb06ee2917670277fdcaee406"
 }