@seafile/sdoc-editor 0.1.125 → 0.1.127

package/dist/basic-sdk/extension/toolbar/side-toolbar/insert-block-menu.js

@@ -0,0 +1,95 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef, useCallback, useState } from 'react';
+import { withTranslation } from 'react-i18next';
+import { Transforms } from '@seafile/slate';
+import { useSlateStatic } from '@seafile/slate-react';
+import context from '../../../../context';
+import AddLinkDialog from '../../plugins/link/menu/add-link-dialog';
+import { insertImage } from '../../plugins/image/helpers';
+import { insertTable } from '../../plugins/table/helpers';
+import SideMenuItem from './side-menu-item';
+import TableSizePopover from '../../plugins/table/popover/table-size-popover';
+import { changeToCodeBlock } from '../../plugins/code-block/helpers';
+var InsertBlockMenu = function InsertBlockMenu(_ref) {
+  var propsInsertImage = _ref.insertImage,
+    propsInsertLink = _ref.insertLink,
+    propsInsertTable = _ref.insertTable,
+    propsInsertCodeBlock = _ref.insertCodeBlock,
+    t = _ref.t;
+  var inputRef = useRef(null);
+  var editor = useSlateStatic();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isShowLinkDialog = _useState2[0],
+    setShowLinkDialog = _useState2[1];
+  var onInsertImageToggle = useCallback(function () {
+    if (propsInsertImage) {
+      inputRef.current.click();
+      return;
+    }
+    Transforms.select(editor, editor.selection.focus);
+    inputRef.current.click();
+  }, [editor, propsInsertImage]);
+  var onFileChanged = useCallback(function (event) {
+    var file = event.target.files[0];
+    context.uploadLocalImage(file).then(function (fileUrl) {
+      if (propsInsertImage) {
+        propsInsertImage(editor, fileUrl, editor.selection);
+      } else {
+        insertImage(editor, fileUrl, editor.selection);
+      }
+    });
+  }, [editor, propsInsertImage]);
+  var createTable = useCallback(function (size) {
+    if (propsInsertTable) {
+      propsInsertTable(editor, size, editor.selection);
+    } else {
+      insertTable(editor, size, editor.selection);
+    }
+  }, [editor, propsInsertTable]);
+  var onLinkDialogToggle = useCallback(function () {
+    setShowLinkDialog(!isShowLinkDialog);
+  }, [isShowLinkDialog]);
+  var onInsertCodeBlock = useCallback(function () {
+    if (propsInsertCodeBlock) {
+      propsInsertCodeBlock(editor, 'plaintext');
+    } else {
+      changeToCodeBlock(editor, 'plaintext');
+    }
+  }, [editor, propsInsertCodeBlock]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SideMenuItem, {
+    iconClass: "sdocfont sdoc-image",
+    iconName: t('Image'),
+    onClick: onInsertImageToggle
+  }, /*#__PURE__*/React.createElement("input", {
+    ref: inputRef,
+    type: "file",
+    accept: "image/*",
+    className: "sdoc-upload-locale-image",
+    onChange: onFileChanged
+  })), /*#__PURE__*/React.createElement(SideMenuItem, {
+    menuId: "sdoc-side-menu-item-table",
+    iconClass: "sdocfont sdoc-table",
+    iconName: t('Table'),
+    hasRight: true
+  }, /*#__PURE__*/React.createElement(TableSizePopover, {
+    target: "sdoc-side-menu-item-table",
+    trigger: "hover",
+    placement: "right-start",
+    popperClassName: "sdoc-side-menu-table-size",
+    createTable: createTable
+  })), /*#__PURE__*/React.createElement(SideMenuItem, {
+    iconClass: "sdocfont sdoc-link",
+    iconName: t('Link'),
+    onClick: onLinkDialogToggle
+  }, isShowLinkDialog && /*#__PURE__*/React.createElement(AddLinkDialog, {
+    editor: editor,
+    insertLink: propsInsertLink,
+    onLinkDialogToggle: onLinkDialogToggle
+  })), /*#__PURE__*/React.createElement(SideMenuItem, {
+    iconClass: "sdocfont sdoc-code-block",
+    iconName: t('Code_block'),
+    onClick: onInsertCodeBlock
+  }));
+};
+export default withTranslation('sdoc-editor')(InsertBlockMenu);

package/dist/basic-sdk/extension/toolbar/side-toolbar/side-menu-item.js

@@ -0,0 +1,35 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useEffect, useState } from 'react';
+var SideMenuItem = function SideMenuItem(_ref) {
+  var menuId = _ref.menuId,
+    iconClass = _ref.iconClass,
+    iconName = _ref.iconName,
+    _ref$hasRight = _ref.hasRight,
+    hasRight = _ref$hasRight === void 0 ? false : _ref$hasRight,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children,
+    onClick = _ref.onClick;
+  // onMount
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isShowChildren = _useState2[0],
+    setShowChildren = _useState2[1];
+  useEffect(function () {
+    setShowChildren(!isShowChildren);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: menuId,
+    className: "sdoc-side-menu-item",
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "sdoc-side-menu-item__left"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: iconClass
+  }), /*#__PURE__*/React.createElement("span", null, iconName)), hasRight && /*#__PURE__*/React.createElement("span", {
+    className: "sdoc-side-menu-item__right"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "sdocfont sdoc-right-slide"
+  })), isShowChildren && children);
+};
+export default React.memo(SideMenuItem);

package/dist/basic-sdk/extension/toolbar/side-toolbar/side-menu.css

@@ -0,0 +1,64 @@
+.sdoc-side-menu-popover {
+  position: absolute;
+}
+
+.sdoc-side-menu {
+  position: absolute;
+  width: 200px;
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, .12);
+  border-radius: 4px;
+  transform: translateX(-200px);
+  padding: 8px 0px;
+  box-shadow: 0 2px 12px 2px rgba(68, 73, 77, .16);
+  z-index: 999;
+}
+
+.sdoc-side-menu .sdoc-side-menu-item:nth-child(2),
+.sdoc-side-inner-menu .sdoc-side-menu-item:nth-child(2) {
+  border-bottom: 1px solid var(--border-weak,rgba(0,0,0,.04));
+}
+
+.sdoc-side-menu .sdoc-side-menu-item,
+.sdoc-side-inner-menu .sdoc-side-menu-item {
+  padding: 6px 16px;
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+}
+
+.sdoc-side-menu .sdoc-upload-locale-image,
+.sdoc-side-inner-menu .sdoc-upload-locale-image {
+  display: none;
+}
+
+.sdoc-side-menu .sdoc-side-menu-item:hover,
+.sdoc-side-inner-menu .sdoc-side-menu-item:hover {
+  background-color: #F2F2F2;
+  border-radius: 2px;
+}
+
+.sdoc-side-menu .sdoc-side-menu-item :nth-child(2),
+.sdoc-side-inner-menu .sdoc-side-menu-item :nth-child(2) {
+  transform: scale(0.6);
+}
+
+.sdoc-side-menu .sdoc-side-menu-item :first-child,
+.sdoc-side-inner-menu .sdoc-side-menu-item :first-child {
+  padding-right: 5px;
+  font-size: 12px;
+}
+
+.sdoc-side-menu-insert-below-popover .popover {
+  background-color: #fff;
+  min-width: 150px;
+  min-height: 120px;
+  border-radius: 2px;
+  left: -6px !important;
+  cursor: pointer;
+}
+
+.sdoc-side-operation-translate-popover .popover,
+.sdoc-selected-table-size-popover .sdoc-side-menu-table-size {
+  left: -6px !important;
+}

package/dist/basic-sdk/extension/toolbar/side-toolbar/side-menu.js

@@ -0,0 +1,76 @@
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { withTranslation } from 'react-i18next';
+import { useSlateStatic } from '@seafile/slate-react';
+import EventBus from '../../../utils/event-bus';
+import { ElementPopover } from '../../commons';
+import InsertBelowMenu from './insert-below-menu';
+import InsertBlockMenu from './insert-block-menu';
+import SideMenuItem from './side-menu-item';
+import { onCopyNode, onDeleteNode } from './helpers';
+import './side-menu.css';
+import TransformMenus from './transform-menus';
+var SideMenu = function SideMenu(_ref) {
+  var slateNode = _ref.slateNode,
+    isNodeEmpty = _ref.isNodeEmpty,
+    menuPosition = _ref.menuPosition,
+    onReset = _ref.onReset,
+    t = _ref.t;
+  var editor = useSlateStatic();
+  useEffect(function () {
+    var eventBus = EventBus.getInstance();
+    var unsubscribeChange = eventBus.subscribe('change', onReset);
+    return unsubscribeChange;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onCopy = useCallback(function () {
+    onCopyNode(editor);
+    onReset();
+  }, [editor, onReset]);
+  var onCut = useCallback(function () {
+    onCopyNode(editor);
+    onDeleteNode(editor, slateNode);
+    onReset();
+  }, [editor, onReset, slateNode]);
+  var onDelete = useCallback(function () {
+    onDeleteNode(editor, slateNode);
+    onReset();
+  }, [editor, onReset, slateNode]);
+  var menuStyle = useMemo(function () {
+    return "top: ".concat(menuPosition.top, "px; left: ").concat(menuPosition.left, "px");
+  }, [menuPosition]);
+  return /*#__PURE__*/React.createElement(ElementPopover, {
+    className: "sdoc-side-menu-popover",
+    style: menuStyle
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-side-menu"
+  }, /*#__PURE__*/React.createElement(SideMenuItem, {
+    menuId: "sdoc-side-menu-item__transform",
+    iconClass: "sdocfont sdoc-table-of-content",
+    iconName: t('Transform_to'),
+    hasRight: true
+  }, /*#__PURE__*/React.createElement(TransformMenus, {
+    target: "sdoc-side-menu-item__transform",
+    slateNode: slateNode,
+    onReset: onReset
+  })), isNodeEmpty && /*#__PURE__*/React.createElement(InsertBlockMenu, null), !isNodeEmpty && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SideMenuItem, {
+    menuId: "sdoc-side-menu-item__below",
+    iconClass: "sdocfont sdoc-insert",
+    iconName: t('Insert_below'),
+    hasRight: true
+  }, /*#__PURE__*/React.createElement(InsertBelowMenu, {
+    target: "sdoc-side-menu-item__below"
+  })), /*#__PURE__*/React.createElement(SideMenuItem, {
+    iconClass: "sdocfont sdoc-copy",
+    iconName: t('Copy'),
+    onClick: onCopy
+  }), /*#__PURE__*/React.createElement(SideMenuItem, {
+    iconClass: "sdocfont sdoc-cut",
+    iconName: t('Cut'),
+    onClick: onCut
+  }), /*#__PURE__*/React.createElement(SideMenuItem, {
+    iconClass: "sdocfont sdoc-delete",
+    iconName: t('Delete'),
+    onClick: onDelete
+  }))));
+};
+export default withTranslation('sdoc-editor')(SideMenu);

package/dist/basic-sdk/extension/toolbar/side-toolbar/transform-menus.js

@@ -0,0 +1,41 @@
+import React, { useCallback } from 'react';
+import { UncontrolledPopover } from 'reactstrap';
+import { withTranslation } from 'react-i18next';
+import { useSlateStatic } from '@seafile/slate-react';
+import { onSetNodeType } from './helpers';
+import { SIDE_MENUS_CONFIG } from '../../constants';
+var TransformMenus = function TransformMenus(_ref) {
+  var target = _ref.target,
+    slateNode = _ref.slateNode,
+    onReset = _ref.onReset,
+    t = _ref.t;
+  var editor = useSlateStatic();
+  var onSetType = useCallback(function (newType) {
+    onSetNodeType(editor, slateNode, newType);
+    onReset();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement(UncontrolledPopover, {
+    target: target,
+    className: "sdoc-side-operation-translate-popover",
+    trigger: "hover",
+    placement: "right-start",
+    hideArrow: true,
+    fade: false
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-side-inner-menu"
+  }, SIDE_MENUS_CONFIG.map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: item.id,
+      className: "sdoc-side-menu-item",
+      onClick: function onClick() {
+        onSetType(item.type);
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "sdoc-side-menu-item__left"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: item.iconClass
+    }), /*#__PURE__*/React.createElement("span", null, t(item.title))));
+  })));
+};
+export default withTranslation('sdoc-editor')(TransformMenus);

package/dist/basic-sdk/layout/article-container.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useEffect, useRef, useState } from 'react';
 import { useScrollContext } from '../hooks/use-scroll-context';
@@ -39,10 +40,10 @@ export default function ArticleContainer(_ref) {
   }, 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", {
+  }, children), React.Children.count(children) > 1 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "article",
     ref: articleRef
-  }, children[0]), children[1]));
+  }, children[0]), _toConsumableArray(children.slice(1))));
 }
 ArticleContainer.defaultProps = {
   readOnly: false

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

@@ -4,18 +4,18 @@ import { withTranslation } from 'react-i18next';
 import { UncontrolledTooltip } from 'reactstrap';
 import OutlineItem from './outline-item';
 import './style.css';
-var getOutlineSetting = function getOutlineSetting(docUuid) {
-  var currentValue = localStorage.getItem(docUuid);
+var getOutlineSetting = function getOutlineSetting() {
+  var currentValue = localStorage.getItem('sdoc');
   var config = currentValue ? JSON.parse(currentValue) : {};
   var _config$outlineOpen = config.outlineOpen,
     outlineOpen = _config$outlineOpen === void 0 ? false : _config$outlineOpen;
   return outlineOpen;
 };
-var setOutlineSetting = function setOutlineSetting(docUuid, isShown) {
-  var currentValue = localStorage.getItem(docUuid);
+var setOutlineSetting = function setOutlineSetting(isShown) {
+  var currentValue = localStorage.getItem('sdoc');
   var config = currentValue ? JSON.parse(currentValue) : {};
   config['outlineOpen'] = isShown;
-  localStorage.setItem(docUuid, JSON.stringify(config));
+  localStorage.setItem('sdoc', JSON.stringify(config));
 };
 var SDocOutline = function SDocOutline(_ref) {
   var scrollLeft = _ref.scrollLeft,
@@ -27,7 +27,7 @@ var SDocOutline = function SDocOutline(_ref) {
     isShown = _useState2[0],
     setIsShown = _useState2[1];
   useEffect(function () {
-    var outlineOpen = getOutlineSetting(docUuid);
+    var outlineOpen = getOutlineSetting();
     setIsShown(outlineOpen);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

package/dist/basic-sdk/socket/socket-client.js

@@ -49,7 +49,7 @@ var SocketClient = /*#__PURE__*/_createClass(function SocketClient(config) {
     socketManager.dispatchConnectState('reconnect_attempt', attemptNumber);
   };
   this.onReconnectError = function () {
-    debug('reconnect_error. %s');
+    debug('reconnect_error.');
     var socketManager = SocketManager.getInstance();
     socketManager.dispatchConnectState('reconnect_error');
   };

package/dist/basic-sdk/socket/socket-manager.js

@@ -262,10 +262,6 @@ var SocketManager = /*#__PURE__*/_createClass(function SocketManager(editor, doc
         _this._sendingOperations = null;
       }
       _this.state = STATE.DISCONNECT;
-
-      // Update saved state
-      var lastSavedAt = new Date().getTime();
-      _this.dispatchConnectState('saved', lastSavedAt);
     }
     _this.eventBus.dispatch(type, message);
   };

package/package.json

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

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

@@ -350,5 +350,11 @@
   "Select_sdoc_document": "Select sdoc document",
   "Local_file": "Local file",
   "Internal_server_exec_operations_error": "An exception occurred on the server, please refresh the page and try again",
-  "Failed_to_sync_with_server_operations": "Synchronization with the server failed, please refresh the page"
+  "Failed_to_sync_with_server_operations": "Synchronization with the server failed, please refresh the page",
+  "Style": "Style",
+  "Insert": "Insert",
+  "Image": "Image",
+  "Table": "Table",
+  "Link": "Link",
+  "Transform_to": "Transform to"
 }

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

@@ -352,5 +352,12 @@
   "Select_sdoc_document": "选择sdoc文档",
   "Local_file": "本地文件",
   "Internal_server_exec_operations_error": "在服务器执行操作异常，请刷新页面后重试",
-  "Failed_to_sync_with_server_operations": "与服务器同步操作失败，请刷新页面"
+  "Failed_to_sync_with_server_operations": "与服务器同步操作失败，请刷新页面",
+  "Operations_save_error_tip": "操作执行失败，服务器内部错误，请刷新页面",
+  "Style": "样式",
+  "Insert": "插入",
+  "Image": "图片",
+  "Table": "表格",
+  "Link": "链接",
+  "Transform_to": "转化为"
 }

package/dist/basic-sdk/extension/plugins/sdoc-link/menu/local-files.css

@@ -1,98 +0,0 @@
-.sdoc-local-files-library {
-  color: #212529;
-  cursor: pointer;
-  font-size: 14px;
-}
-
-.sdoc-local-files-library .sdoc-local-folder-container .sdoc-local-folder .sdoc-local-folder-info {
-  display: flex;
-}
-
-.sdoc-local-files-library .sdoc-local-folder-container .sdoc-local-folder .sdoc-local-folder-info > span:nth-child(-n+2) {
-  padding-right: 3px;
-}
-
-.sdoc-local-files-library .sdoc-local-folder-container .sdoc-local-folder .sdoc-local-folder-info :first-child {
-  transform: scale(0.6)
-}
-
-.sdoc-local-files-library .sdoc-local-folder-container .sdoc-local-folder .active {
-  background: #ff8000;
-  border-radius: 2px;
-  box-shadow: inset 0 0 1px #999;
-  color: #fff;
-}
-
-.sdoc-local-files-library .sdoc-local-folder-container .sdoc-local-folder .active .sdoc-local-file-icon {
-  color: #fff;
-}
-
-.sdoc-local-files-library .sdoc-local-folder-container .sdoc-local-folder .inactive:hover {
-  background: #fdefb9;
-  border-radius: 2px;
-  box-shadow: inset 0 0 1px #999;
-}
-
-.sdoc-local-files-library .sdoc-local-folder-container .sdoc-local-folder .inactive > span:nth-child(-n+2) {
-  color: #9aa0ac;
-}
-
-.sdoc-local-files-library .sdoc-local-folder-container .sdoc-local-folder .sdoc-local-folder-info .icon-drop-down-scale {
-  transform: scale(1.1) !important;
-}
-
-.sdoc-local-files-library .sdoc-local-folder-container .sdoc-local-folder .sdoc-local-folder-info > span:nth-child(3) {
-  padding-left: 3px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: 24px;
-}
-
-.sdoc-local-files-library .sdoc-local-folder-container .sdoc-local-folder .sdoc-local-folder-files {
-  padding-left: 24px;
-}
-
-.sdoc-local-files-library .sdoc-local-folder-container .sdoc-local-folder .sdoc-local-folder-files .active {
-  background: #ff8000;
-  border-radius: 2px;
-  box-shadow: inset 0 0 1px #999;
-  color: #fff;
-}
-
-.sdoc-local-files-library .sdoc-local-folder-container .sdoc-local-folder .sdoc-local-folder-files .inactive:hover {
-  background: #fdefb9;
-  border-radius: 2px;
-  box-shadow: inset 0 0 1px #999;
-}
-
-.sdoc-local-files-library .sdoc-local-folder-container .sdoc-local-folder .sdoc-local-folder-children {
-  padding-left: 24px
-}
-
-.sdoc-local-files-library .sdoc-local-folder-container .sdoc-local-folder .sdoc-local-folder-children .inactive .sdoc-local-file-icon {
-  color: #ff9800;
-}
-
-.sdoc-local-files-library .sdoc-local-folder-container .inactive:hover {
-  background: #fdefb9;
-  border-radius: 2px;
-  box-shadow: inset 0 0 1px #999;
-}
-
-.sdoc-local-files-library .sdoc-local-folder-container .active {
-  background: #ff8000;
-  border-radius: 2px;
-  box-shadow: inset 0 0 1px #999;
-  color: #fff;
-}
-
-.sdoc-local-files-library .sdoc-local-folder-container .active .sdoc-local-file-icon {
-  color: #fff;
-  padding-right: 5px;
-}
-
-.sdoc-local-files-library .sdoc-local-folder-container .inactive .sdoc-local-file-icon {
-  color: #ff9800;
-  padding-right: 5px;
-}

package/dist/basic-sdk/extension/plugins/sdoc-link/menu/sdoc-link-file-dialog.css

@@ -1,35 +0,0 @@
-.sdoc-file-addition-container {
-  display: flex;
-  flex-direction: row;
-}
-
-.sdoc-file-addition-left {
-  border-right: 1px solid #e9ecef;
-  width: 150px;
-  padding: 12px 8px;
-}
-
-.sdoc-file-addition-left .sdoc-addition-item {
-  padding: 5px 0 5px 8px;
-  border-radius: 3px;
-  display: inline-block;
-  cursor: pointer;
-  width: 100%;
-}
-
-.sdoc-file-addition-left .sdoc-addition-item:hover {
-  background-color: #f5f5f5;
-}
-
-.sdoc-file-addition-container .sdoc-file-addition-left .selected-sdoc-addition-item {
-  background-color: #ff8000;
-  color: #fff;
-}
-
-.sdoc-file-addition-right {
-  height: 440px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 16px 16px;
-  width: 470px;
-}