@seafile/sdoc-editor 0.1.81 → 0.1.83

package/dist/basic-sdk/assets/css/layout.css

@@ -17,23 +17,50 @@
 }
 
 .sdoc-editor-container .sdoc-editor-content {
-  flex: 1;
+  width: 100%;
+  height: calc(100% - 44px);
   display: flex;
   background: #f5f5f5;
-  overflow: auto;
+  position: relative;
 }
 
-.sdoc-editor-container .sdoc-editor-article-container {
-  flex: 1 1 auto;
+.sdoc-editor-container .sdoc-editor-content.readonly {
+  height: 100%;
+}
+
+.sdoc-editor-container .sdoc-absolute-wrapper {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.sdoc-editor-container .sdoc-article-wrapper {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 100;
   overflow: auto;
+}
+
+.sdoc-editor-container .sdoc-article-container {
   position: relative;
+  top: 0;
+  width: 794px;
+  margin: 0 auto;
+  padding-top: 20px;
+  padding-bottom: 20px;
 }
 
 .sdoc-editor-container .sdoc-editor-content .article {
   width: 794px;
-  min-height: calc(100% - 40px);
+  min-height: 100%;
   padding: 40px 60px;
-  margin: 20px 0;
   background-color: #fff;
   border: 1px solid #e5e6e8;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);
@@ -43,7 +70,6 @@
   caret-color: blue;
 }
 
-
 .sdoc-editor-container .seafile-block-container {
   position: relative;
 }

package/dist/basic-sdk/assets/css/sdoc-editor-plugins.css

@@ -57,10 +57,12 @@
 .sdoc-editor-container .article .image-size {
   display: inline-block;
   padding: 5px;
+  white-space: nowrap;
   height: 22px;
   position: absolute;
   bottom: -25px;
   left: 100%;
+  z-index: 1;
   transform: translateX(5px);
   border-radius: 3px;
   line-height: 12px;

package/dist/basic-sdk/comment/style.css

@@ -14,6 +14,7 @@
 .sdoc-comment-container .comment-container-right {
   position: absolute;
   left: 100%;
+  width: 320px;
 }
 
 .sdoc-comment-container .comment-container-right .comment-add-wrapper {

package/dist/basic-sdk/editor.js

@@ -194,18 +194,57 @@ var SDocEditor = function SDocEditor(_ref) {
     eventProxy.onKeyDown(event);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  var _useState7 = useState({}),
+    _useState8 = _slicedToArray(_useState7, 2),
+    containerStyle = _useState8[0],
+    setContainerStyle = _useState8[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 _useState9 = useState(0),
+    _useState10 = _slicedToArray(_useState9, 2),
+    scrollLeft = _useState10[0],
+    setScrollLeft = _useState10[1];
+  var onWrapperScroll = useCallback(function (event) {
+    var scrollLeft = event.target.scrollLeft;
+    setScrollLeft(scrollLeft);
+  }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "sdoc-editor-container"
   }, /*#__PURE__*/React.createElement(Toolbar, {
     editor: editor
   }), /*#__PURE__*/React.createElement("div", {
     className: "sdoc-editor-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-absolute-wrapper"
   }, /*#__PURE__*/React.createElement(SDocOutline, {
+    scrollLeft: scrollLeft,
     doc: slateValue,
     docUuid: config.docUuid
-  }), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-absolute-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
     ref: scrollRef,
-    className: "sdoc-editor-article-container"
+    className: "sdoc-article-wrapper",
+    onScroll: onWrapperScroll
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-article-container",
+    style: containerStyle
   }, /*#__PURE__*/React.createElement(ScrollContext.Provider, {
     value: {
       scrollRef: scrollRef
@@ -225,7 +264,7 @@ var SDocEditor = function SDocEditor(_ref) {
     onContextMenu: onContextMenu,
     onMouseDown: onMouseDown,
     decorate: decorate
-  })), /*#__PURE__*/React.createElement(CommentWrapper, null))))))), isShowContextMenu && /*#__PURE__*/React.createElement(ContextMenu, {
+  })), /*#__PURE__*/React.createElement(CommentWrapper, null))))))))), isShowContextMenu && /*#__PURE__*/React.createElement(ContextMenu, {
     editor: editor,
     contextMenuPosition: menuPosition
   }));

package/dist/basic-sdk/extension/constants/index.js

@@ -120,4 +120,6 @@ export var ADDED_STYLE = {
   computed_bg_color: '#e6ffed',
   color: 'rgb(137, 181, 66)'
 };
+export var HEADER_TYPE_ARRAY = ['header1', 'header2', 'header3', 'header4', 'header5', 'header6'];
+export var LIST_TYPE_ARRAY = ['unordered_list', 'ordered_list'];
 export { BLOCKQUOTE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, SUPERSCRIPT, SUBSCRIPT, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, LIST_LIC, CHECK_LIST, CHECK_LIST_ITEM, LINK, HTML, CODE_BLOCK, CODE_LINE, IMAGE, TABLE, TABLE_CELL, TABLE_ROW, FORMULA, COLUMN, TEXT_STYLE, TEXT_STYLE_MORE, BOLD_ITALIC, TEXT_ALIGN, ALIGN_LEFT, ALIGN_RIGHT, ALIGN_CENTER, ELEMENT_TYPE, KEYBOARD };

package/dist/basic-sdk/extension/core/queries/index.js

@@ -84,16 +84,28 @@ export var getSelectedNodeByType = function getSelectedNodeByType(editor, type)
     nodeEntry = _Editor$nodes2[0];
   return nodeEntry ? nodeEntry[0] : null;
 };
-export var getSelectedNodeEntryByType = function getSelectedNodeEntryByType(editor, type) {
+export var getSelectedNodeByTypes = function getSelectedNodeByTypes(editor, types) {
   var match = function match(n) {
-    return getNodeType(n) === type;
+    return types.includes(getNodeType(n));
   };
   var _Editor$nodes3 = Editor.nodes(editor, {
       match: match,
-      universal: false
+      universal: true
     }),
     _Editor$nodes4 = _slicedToArray(_Editor$nodes3, 1),
     nodeEntry = _Editor$nodes4[0];
+  return nodeEntry ? nodeEntry[0] : null;
+};
+export var getSelectedNodeEntryByType = function getSelectedNodeEntryByType(editor, type) {
+  var match = function match(n) {
+    return getNodeType(n) === type;
+  };
+  var _Editor$nodes5 = Editor.nodes(editor, {
+      match: match,
+      universal: false
+    }),
+    _Editor$nodes6 = _slicedToArray(_Editor$nodes5, 1),
+    nodeEntry = _Editor$nodes6[0];
   return nodeEntry ? nodeEntry : null;
 };
 export var getNodeEntries = function getNodeEntries(editor, options) {

package/dist/basic-sdk/extension/plugins/check-list/plugin.js

@@ -1,9 +1,9 @@
 import { Node, Range, Transforms } from '@seafile/slate';
 import { CHECK_LIST_ITEM, PARAGRAPH } from '../../constants';
-import { getSelectedNodeByType } from '../../core';
+import { generateDefaultText, getSelectedNodeByType } from '../../core';
 var withCheckList = function withCheckList(editor) {
   var insertBreak = editor.insertBreak,
-    deleteBackWord = editor.deleteBackWord;
+    deleteBackward = editor.deleteBackward;
   var newEditor = editor;
   newEditor.insertBreak = function () {
     var selection = newEditor.selection;
@@ -18,16 +18,25 @@ var withCheckList = function withCheckList(editor) {
     }
     if (Node.string(node).length === 0) {
       Transforms.setNodes(editor, {
-        type: PARAGRAPH
+        type: PARAGRAPH,
+        children: [generateDefaultText()]
       }, {
-        mode: 'highest'
+        at: node[1]
+      });
+      return;
+    }
+
+    // If it is check-list-item, handle your own business logic
+    if (Node.string(node).length > 0) {
+      Transforms.splitNodes(editor, {
+        always: true
       });
       return;
     }
     insertBreak();
     return;
   };
-  newEditor.deleteBackWord = function (unit) {
+  newEditor.deleteBackward = function (unit) {
     var selection = newEditor.selection;
     if (selection && Range.isCollapsed(selection)) {
       var selectedTodo = getSelectedNodeByType(editor, CHECK_LIST_ITEM);
@@ -35,15 +44,16 @@ var withCheckList = function withCheckList(editor) {
         // If the current todo has no text, it will be converted to a paragraph
         if (Node.string(selectedTodo).length === 0) {
           Transforms.setNodes(editor, {
-            type: PARAGRAPH
+            type: PARAGRAPH,
+            children: [generateDefaultText()]
           }, {
-            mode: 'highest'
+            at: selectedTodo[1]
           });
           return;
         }
       }
     }
-    deleteBackWord(unit);
+    deleteBackward(unit);
   };
   return newEditor;
 };

package/dist/basic-sdk/extension/plugins/header/menu/index.js

@@ -16,12 +16,15 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, HeaderMenu);
     _this = _super.call(this, props);
     _this.registerEventHandler = function () {
-      document.addEventListener('click', _this.onHideHeaderMenu);
+      document.addEventListener('click', _this.onHideHeaderMenu, true);
     };
     _this.unregisterEventHandler = function () {
-      document.removeEventListener('click', _this.onHideHeaderMenu);
+      document.removeEventListener('click', _this.onHideHeaderMenu, true);
     };
-    _this.onHideHeaderMenu = function () {
+    _this.onHideHeaderMenu = function (e) {
+      var menu = _this.menu;
+      var clickIsInMenu = menu && menu.contains(e.target) && menu !== e.target;
+      if (clickIsInMenu) return;
       _this.setState({
         isShowHeaderPopover: false
       }, function () {
@@ -65,8 +68,16 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
 
         // 执行命令
         setHeaderType(editor, newType);
+        _this.setState({
+          isShowHeaderPopover: false
+        }, function () {
+          _this.unregisterEventHandler();
+        });
       };
     };
+    _this.setMenuRef = function (ref) {
+      _this.menu = ref;
+    };
     _this.state = {
       isShowHeaderPopover: false
     };
@@ -92,6 +103,7 @@ var HeaderMenu = /*#__PURE__*/function (_React$Component) {
       }, t(HEADER_TITLE_MAP[headerType])), !disabled && /*#__PURE__*/React.createElement("span", {
         className: headerIconClass
       })), isShowHeaderPopover && /*#__PURE__*/React.createElement("div", {
+        ref: this.setMenuRef,
         className: "header-popover sdoc-dropdown-menu"
       }, /*#__PURE__*/React.createElement("div", {
         className: "sdoc-dropdown-menu-item",

package/dist/basic-sdk/extension/plugins/header/menu/style.css

@@ -48,5 +48,5 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  z-index: 10;
+  z-index: 101;
 }

package/dist/basic-sdk/extension/plugins/header/plugin.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { Editor, Element, Transforms } from '@seafile/slate';
-import { PARAGRAPH } from '../../constants';
-import { generateEmptyElement } from '../../core';
+import { Editor, Element, Transforms, Node } from '@seafile/slate';
+import { PARAGRAPH, HEADER_TYPE_ARRAY, LIST_TYPE_ARRAY } from '../../constants';
+import { generateEmptyElement, getSelectedNodeByTypes } from '../../core';
 var isSelectionAtLineEnd = function isSelectionAtLineEnd(editor, path) {
   var selection = editor.selection;
   if (!selection) return false;
@@ -9,7 +9,9 @@ var isSelectionAtLineEnd = function isSelectionAtLineEnd(editor, path) {
   return isAtLineEnd;
 };
 var withHeader = function withHeader(editor) {
-  var insertBreak = editor.insertBreak;
+  var insertBreak = editor.insertBreak,
+    insertFragment = editor.insertFragment,
+    insertText = editor.insertText;
   var newEditor = editor;
 
   // Rewrite insertBreak - insert paragraph when carriage return at the end of header
@@ -51,6 +53,20 @@ var withHeader = function withHeader(editor) {
       insertBreak();
     }
   };
+  newEditor.insertFragment = function (data) {
+    var headerNode = getSelectedNodeByTypes(editor, HEADER_TYPE_ARRAY);
+    var headerText = Node.string(headerNode || {
+      children: []
+    });
+    var isSingleListItem = data.length === 1 && data[0].children.length === 1 && LIST_TYPE_ARRAY.includes(data[0].type);
+    // Insert a list item when the header is empty, insert only the text
+    if (headerNode && headerText.length === 0 && isSingleListItem) {
+      var text = Node.string(data[0]);
+      insertText(text);
+      return;
+    }
+    return insertFragment(data);
+  };
   return newEditor;
 };
 export default withHeader;

package/dist/basic-sdk/extension/plugins/image/helpers.js

@@ -2,7 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import urlJoin from 'url-join';
 import { Editor, Range, Transforms } from '@seafile/slate';
-import { CODE_BLOCK, IMAGE, ORDERED_LIST, UNORDERED_LIST } from '../../constants';
+import { CODE_BLOCK, IMAGE } from '../../constants';
 import { generateEmptyElement, getNodeType, isTextNode, getParentNode } from '../../core';
 import context from '../../../../context';
 export var isInsertImageMenuDisabled = function isInsertImageMenuDisabled(editor) {
@@ -17,8 +17,6 @@ export var isInsertImageMenuDisabled = function isInsertImageMenuDisabled(editor
           type = getNodeType(parentNode);
         }
         if (type === CODE_BLOCK) return true;
-        if (type === ORDERED_LIST) return true;
-        if (type === UNORDERED_LIST) return true;
         if (type.startsWith('header')) return true;
         if (Editor.isVoid(editor, n)) return true;
         return false;

package/dist/basic-sdk/extension/plugins/image/menu/style.css

@@ -14,8 +14,8 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  z-index: 10;
-  white-space:nowrap;
+  z-index: 101;
+  white-space: nowrap;
 }
 
 .image-menu .image-popover .image-menu-item {

package/dist/basic-sdk/extension/plugins/image/plugin.js

@@ -1,3 +1,4 @@
+import { Transforms, Path } from '@seafile/slate';
 import context from '../../../../context';
 import { insertImage } from './helpers';
 var withImage = function withImage(editor) {
@@ -32,6 +33,26 @@ var withImage = function withImage(editor) {
     }
     insertData(data);
   };
+  newEditor.imageOnKeyDown = function (e) {
+    if (e.keyCode === 13) {
+      var selection = newEditor.selection;
+      var focus = selection.focus;
+      var parentPath = Path.parent(focus.path);
+      var nextPath = Path.next(parentPath);
+      var nextSelection = {
+        anchor: {
+          offset: 0,
+          path: nextPath
+        },
+        focus: {
+          offset: 0,
+          path: nextPath
+        }
+      };
+      Transforms.setSelection(editor, nextSelection);
+      return;
+    }
+  };
   return newEditor;
 };
 export default withImage;

package/dist/basic-sdk/extension/plugins/image/render-elem.js

@@ -26,7 +26,7 @@ var Image = /*#__PURE__*/function (_React$Component) {
     };
     _this.onResizeStart = function (event) {
       event.preventDefault();
-      // event.stopPropagation();
+      event.stopPropagation();
       _this.setState({
         isResizing: true
       }, function () {

package/dist/basic-sdk/extension/plugins/table/helpers.js

@@ -464,4 +464,15 @@ export var getFirstTableCell = function getFirstTableCell(element) {
     tableCellElement = tableCellElement.parentNode;
   }
   return tableCellElement;
+};
+export var rowElementHasImage = function rowElementHasImage(element) {
+  if (!element) return false;
+  if (!Array.isArray(element.children) || element.children.length === 0) return false;
+  return element.children.some(function (child) {
+    if (child.type === ELEMENT_TYPE.IMAGE) return true;
+    if (ObjectUtils.hasProperty(child, 'children')) {
+      return rowElementHasImage(child);
+    }
+    return false;
+  });
 };

package/dist/basic-sdk/extension/plugins/table/render/table-header/rows-header/row-header.js

@@ -8,6 +8,7 @@ import { useResizeHandlersContext, useTableSelectedRangeContext } from '../../ho
 import { useScrollContext } from '../../../../../../hooks/use-scroll-context';
 import { ELEMENT_TYPE } from '../../../../../constants';
 import { findPath, getSelectedNodeByType } from '../../../../../core';
+import { rowElementHasImage } from '../../../helpers';
 var RowHeader = function RowHeader(_ref) {
   var _row$style;
   var row = _ref.row,
@@ -30,6 +31,18 @@ var RowHeader = function RowHeader(_ref) {
   var currentCellPath = currentCell ? findPath(editor, currentCell, [-1, -1]) : [-1, -1];
   var pathLength = currentCellPath.length;
   useEffect(function () {
+    if (rowElementHasImage(row)) {
+      var time = setTimeout(function () {
+        // There is a delay in image loading
+        var rowDom = ReactEditor.toDOMNode(editor, row);
+        if (!rowDom) return;
+        if (rowHeight === rowDom.clientHeight) return;
+        setRowHeight(rowDom.clientHeight);
+      }, 300);
+      return function () {
+        clearTimeout(time);
+      };
+    }
     var rowDom = ReactEditor.toDOMNode(editor, row);
     if (!rowDom) return;
     if (rowHeight === rowDom.clientHeight) return;

package/dist/basic-sdk/extension/plugins/text-align/menu/index.js

@@ -16,12 +16,15 @@ var TextAlignMenu = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, TextAlignMenu);
     _this = _super.call(this, props);
     _this.registerEventHandler = function () {
-      document.addEventListener('click', _this.onHideTextAlignMenu);
+      document.addEventListener('click', _this.onHideTextAlignMenu, true);
     };
     _this.unregisterEventHandler = function () {
-      document.removeEventListener('click', _this.onHideTextAlignMenu);
+      document.removeEventListener('click', _this.onHideTextAlignMenu, true);
     };
-    _this.onHideTextAlignMenu = function () {
+    _this.onHideTextAlignMenu = function (e) {
+      var menu = _this.menu;
+      var clickIsInMenu = menu && menu.contains(e.target) && menu !== e.target;
+      if (clickIsInMenu) return;
       _this.setState({
         isDropdownMenuOpen: false
       }, function () {
@@ -60,6 +63,14 @@ var TextAlignMenu = /*#__PURE__*/function (_React$Component) {
     _this.setType = function (type) {
       var editor = _this.props.editor;
       setAlignType(editor, type);
+      _this.setState({
+        isDropdownMenuOpen: false
+      }, function () {
+        _this.unregisterEventHandler();
+      });
+    };
+    _this.setMenuRef = function (ref) {
+      _this.menu = ref;
     };
     _this.state = {
       isDropdownMenuOpen: false
@@ -89,6 +100,7 @@ var TextAlignMenu = /*#__PURE__*/function (_React$Component) {
       }), !disabled && /*#__PURE__*/React.createElement("span", {
         className: caretIconClass
       })), isDropdownMenuOpen && /*#__PURE__*/React.createElement("div", {
+        ref: this.setMenuRef,
         className: "align-popover sdoc-dropdown-menu"
       }, MENUS_CONFIG_MAP[TEXT_ALIGN].map(function (item, index) {
         return /*#__PURE__*/React.createElement("span", {

package/dist/basic-sdk/extension/plugins/text-align/menu/style.css

@@ -49,5 +49,5 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  z-index: 10;
+  z-index: 101;
 }

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

@@ -0,0 +1,75 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+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 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 config = currentValue ? JSON.parse(currentValue) : {};
+  config['outlineOpen'] = isShown;
+  localStorage.setItem(docUuid, JSON.stringify(config));
+};
+var SDocOutline = function SDocOutline(_ref) {
+  var scrollLeft = _ref.scrollLeft,
+    docUuid = _ref.docUuid,
+    doc = _ref.doc,
+    t = _ref.t;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isShown = _useState2[0],
+    setIsShown = _useState2[1];
+  useEffect(function () {
+    var outlineOpen = getOutlineSetting(docUuid);
+    setIsShown(outlineOpen);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var toggleShow = useCallback(function () {
+    setIsShown(!isShown);
+    setOutlineSetting(!isShown);
+  }, [isShown]);
+  var list = useMemo(function () {
+    return doc.filter(function (item) {
+      return ['header2', 'header3'].includes(item.type);
+    });
+  }, [doc]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-outline-wrapper",
+    style: {
+      left: -scrollLeft
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-outline"
+  }, isShown && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-outline-header"
+  }, /*#__PURE__*/React.createElement("h2", {
+    className: "sdoc-outline-header__title"
+  }, t('Outline')), /*#__PURE__*/React.createElement("span", {
+    className: "sdoc-outline-header__close sdocfont sdoc-cancel",
+    onClick: toggleShow
+  })), list.length === 0 && /*#__PURE__*/React.createElement("p", {
+    className: "mt-4 text-secondary"
+  }, t('Headings_you_add_to_the_document_will_appear_here')), list.length > 0 && /*#__PURE__*/React.createElement("ol", {
+    className: "sdoc-outline-list-container"
+  }, list.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(OutlineItem, {
+      key: index,
+      item: item
+    });
+  })))), !isShown && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    id: "sdoc-outline-menu",
+    className: "sdoc-outline-menu sdocfont sdoc-table-of-content",
+    onClick: toggleShow
+  }), /*#__PURE__*/React.createElement(UncontrolledTooltip, {
+    placement: "right",
+    target: "sdoc-outline-menu"
+  }, t('Outline'))));
+};
+export default withTranslation('sdoc-editor')(SDocOutline);

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

@@ -0,0 +1,52 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+var OutlineItem = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(OutlineItem, _React$PureComponent);
+  var _super = _createSuper(OutlineItem);
+  function OutlineItem(props) {
+    var _this;
+    _classCallCheck(this, OutlineItem);
+    _this = _super.call(this, props);
+    _this.onItemClick = function () {
+      var item = _this.props.item;
+      var id = item.id;
+      document.getElementById(id).scrollIntoView();
+    };
+    _this.onMouseOver = function () {
+      _this.setState({
+        isHighlighted: true
+      });
+    };
+    _this.onMouseOut = function () {
+      _this.setState({
+        isHighlighted: false
+      });
+    };
+    _this.state = {
+      isHighlighted: false
+    };
+    return _this;
+  }
+  _createClass(OutlineItem, [{
+    key: "render",
+    value: function render() {
+      var isHighlighted = this.state.isHighlighted;
+      var item = this.props.item;
+      var type = item.type,
+        children = item.children;
+      return /*#__PURE__*/React.createElement("li", {
+        className: "sdoc-outline-item ".concat(type === 'header3' ? 'pl-5' : '', " ").concat(isHighlighted ? 'active' : ''),
+        onClick: this.onItemClick,
+        onMouseOver: this.onMouseOver,
+        onMouseOut: this.onMouseOut
+      }, children.map(function (child) {
+        return child.text;
+      }).join(''));
+    }
+  }]);
+  return OutlineItem;
+}(React.PureComponent);
+export default OutlineItem;

package/dist/basic-sdk/outline/style.css

@@ -0,0 +1,83 @@
+.sdoc-outline-wrapper {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  margin: 20px 30px 20px 16px;
+  min-height: 0;
+  z-index: 101;
+}
+
+.sdoc-outline {
+  flex: 1;
+  width: 220px; 
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+  font-size: 14px;
+  position: relative;
+}
+
+.sdoc-outline-header  {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.25rem 0;
+  color: #999;
+  border-bottom: 1px solid #dbdbdb;
+}
+
+.sdoc-outline-header__title {
+  font-size: 14px;
+  line-height: 1.1;
+  margin: 0 !important;
+}
+
+.sdoc-outline-header__close {
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.sdoc-outline-header__close:hover {
+  color: #555;
+}
+
+.sdoc-outline-list-container {
+  list-style: none;
+  padding: 0.5rem 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.sdoc-outline-item {
+  padding: 4px 0;
+  cursor: pointer;
+}
+
+.sdoc-outline-item.active {
+  color: #ff8000;
+}
+
+.sdoc-outline-menu {
+  line-height: 1;
+  font-size: 14px;
+  color: #888;
+  cursor: pointer;
+  width: 28px;
+  height: 28px;
+  background: #fff;
+  border-radius: 0 50% 50% 0;
+  box-shadow: 0 0 6px rgba(0,0,0, 0.12);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 20px;
+  left: -16px;
+}
+
+.sdoc-outline-menu:hover {
+  color: #333;
+}

package/dist/basic-sdk/utils/event-handler.js

@@ -52,6 +52,10 @@ var EventProxy = /*#__PURE__*/_createClass(function EventProxy(_editor) {
     if (node) {
       _this.editor.tableOnKeyDown(event);
     }
+    var imageNode = getSelectedNodeByType(editor, ELEMENT_TYPE.IMAGE);
+    if (imageNode) {
+      _this.editor.imageOnKeyDown(event);
+    }
   };
   this.onCopy = function (event) {
     event.stopPropagation();

package/dist/basic-sdk/views/viewer.js

@@ -25,10 +25,12 @@ var SDocViewer = function SDocViewer(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: "sdoc-editor-container"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-editor-content"
+    className: "sdoc-editor-content readonly"
   }, /*#__PURE__*/React.createElement("div", {
     ref: scrollRef,
-    className: "sdoc-editor-article-container"
+    className: "sdoc-article-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-article-container"
   }, /*#__PURE__*/React.createElement(ScrollContext.Provider, {
     value: {
       scrollRef: scrollRef
@@ -37,7 +39,7 @@ var SDocViewer = function SDocViewer(_ref) {
     editor: editor,
     value: slateValue
   }, /*#__PURE__*/React.createElement("div", {
-    className: "article mx-auto",
+    className: "article",
     ref: articleRef
   }, /*#__PURE__*/React.createElement(SetNodeToDecorations, null), /*#__PURE__*/React.createElement(Editable, {
     readOnly: true,
@@ -50,6 +52,6 @@ var SDocViewer = function SDocViewer(_ref) {
     },
     onDOMBeforeInput: function onDOMBeforeInput(event) {},
     decorate: decorate
-  })))))));
+  }))))))));
 };
 export default SDocViewer;

package/dist/components/code-block-hover-menu/index.css

@@ -1,6 +1,7 @@
 .sdoc-code-block-hover-menu-container {
   position: absolute;
   height: 42px;
+  z-index: 101;
 }
 
 .sdoc-code-block-hover-menu-container .hover-menu-container {
@@ -14,7 +15,6 @@
   border-radius: 3px;
   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
   border: 1px solid #e8e8e8;
-  z-index: 1000;
 }
 
 .sdoc-code-block-hover-menu-container .hover-menu-container .active {

package/dist/components/doc-info/index.js

@@ -5,9 +5,11 @@ import context from '../../context';
 import { EventBus } from '../../basic-sdk';
 import { EXTERNAL_EVENT } from '../../constants';
 import { DateUtils } from '../../utils';
+import DraftDropdown from '../draft-dropdown';
 var DocInfo = function DocInfo(_ref) {
   var t = _ref.t,
     isStarred = _ref.isStarred,
+    isDraft = _ref.isDraft,
     isEditMode = _ref.isEditMode;
   var onInternalLinkClick = useCallback(function () {
     var eventBus = EventBus.getInstance();
@@ -22,7 +24,7 @@ var DocInfo = function DocInfo(_ref) {
   var _context$getSettings = context.getSettings(),
     isShowInternalLink = _context$getSettings.isShowInternalLink,
     isStarIconShown = _context$getSettings.isStarIconShown;
-  var docInfo = /*#__PURE__*/React.createElement(React.Fragment, null, isStarIconShown && /*#__PURE__*/React.createElement("button", {
+  var docInfo = /*#__PURE__*/React.createElement(React.Fragment, null, isDraft && /*#__PURE__*/React.createElement(DraftDropdown, null), isStarIconShown && /*#__PURE__*/React.createElement("button", {
     className: "doc-icon sdocfont ".concat(isStarred ? 'sdoc-starred' : 'sdoc-unstarred', " border-0 p-0 bg-transparent"),
     title: isStarred ? t('Starred') : t('Unstarred'),
     "aria-label": isStarred ? t('Unstar') : t('Star'),

package/dist/components/draft-dropdown/index.js

@@ -0,0 +1,77 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import { withTranslation } from 'react-i18next';
+import { EventBus } from '../../basic-sdk';
+import { EXTERNAL_EVENT } from '../../constants';
+import './style.css';
+var DraftDropdownMenu = /*#__PURE__*/function (_React$Component) {
+  _inherits(DraftDropdownMenu, _React$Component);
+  var _super = _createSuper(DraftDropdownMenu);
+  function DraftDropdownMenu(props) {
+    var _this;
+    _classCallCheck(this, DraftDropdownMenu);
+    _this = _super.call(this, props);
+    _this.registerEventHandler = function () {
+      document.addEventListener('click', _this.onHideDraftDropdownMenu);
+    };
+    _this.unregisterEventHandler = function () {
+      document.removeEventListener('click', _this.onHideDraftDropdownMenu);
+    };
+    _this.onHideDraftDropdownMenu = function () {
+      _this.setState({
+        isDropdownMenuOpen: false
+      }, function () {
+        _this.unregisterEventHandler();
+      });
+    };
+    _this.onToggleClick = function (event) {
+      event.stopPropagation();
+      event.nativeEvent.stopImmediatePropagation();
+      var isDropdownMenuOpen = !_this.state.isDropdownMenuOpen;
+      if (isDropdownMenuOpen) {
+        _this.setState({
+          isDropdownMenuOpen: isDropdownMenuOpen
+        }, function () {
+          _this.registerEventHandler();
+        });
+      } else {
+        _this.setState({
+          isDropdownMenuOpen: isDropdownMenuOpen
+        }, function () {
+          _this.unregisterEventHandler();
+        });
+      }
+    };
+    _this.unmark = function () {
+      var eventBus = EventBus.getInstance();
+      eventBus.dispatch(EXTERNAL_EVENT.UNMARK_AS_DRAFT);
+    };
+    _this.state = {
+      isDropdownMenuOpen: false
+    };
+    return _this;
+  }
+  _createClass(DraftDropdownMenu, [{
+    key: "render",
+    value: function render() {
+      var isDropdownMenuOpen = this.state.isDropdownMenuOpen;
+      var t = this.props.t;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "sdoc-draft-menu"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "draft-toggle sdoc-draft-identifier",
+        onClick: this.onToggleClick
+      }, t('Draft')), isDropdownMenuOpen && /*#__PURE__*/React.createElement("ul", {
+        className: "draft-popover list-unstyled m-0"
+      }, /*#__PURE__*/React.createElement("li", {
+        className: "draft-menu-item",
+        onClick: this.unmark
+      }, t('Unmark_as_draft'))));
+    }
+  }]);
+  return DraftDropdownMenu;
+}(React.Component);
+export default withTranslation('sdoc-editor')(DraftDropdownMenu);

package/dist/components/draft-dropdown/style.css

@@ -0,0 +1,43 @@
+.sdoc-draft-menu {
+  position: relative;
+  margin-left: 0.5rem;
+}
+
+.sdoc-draft-identifier {
+  display: inline-block;
+  font-size: 14px;
+  color: #888;
+  background: #eee;
+  padding: 0 8px; 
+  height: 20px;
+  line-height: 20px;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.sdoc-draft-identifier:hover {
+  background: #dbdbdb;
+}
+
+.sdoc-draft-menu .draft-popover {
+  position: absolute;
+  top: 25px;
+  left: 0;
+  width: 178px;
+  background-color: #fff;
+  border: 1px solid #e5e6e8;
+  border-radius: 2px;
+  padding: 8px 0;
+  box-shadow: 0 0 10px #e5e6e8;
+  z-index: 10;
+}
+
+.sdoc-draft-menu .draft-popover .draft-menu-item {
+  cursor: pointer;
+  width: 100%;
+  padding: 4px 12px;
+}
+
+.sdoc-draft-menu .draft-popover .draft-menu-item:hover {
+  background-color: rgb(245, 245, 245);
+}

package/dist/components/more-dropdown/index.js

@@ -12,12 +12,15 @@ var MoreDropdownMenu = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, MoreDropdownMenu);
     _this = _super.call(this, props);
     _this.registerEventHandler = function () {
-      document.addEventListener('click', _this.onHideMoreDropdownMenu);
+      document.addEventListener('click', _this.onHideMoreDropdownMenu, true);
     };
     _this.unregisterEventHandler = function () {
-      document.removeEventListener('click', _this.onHideMoreDropdownMenu);
+      document.removeEventListener('click', _this.onHideMoreDropdownMenu, true);
     };
-    _this.onHideMoreDropdownMenu = function () {
+    _this.onHideMoreDropdownMenu = function (e) {
+      var menu = _this.menu;
+      var clickIsInMenu = menu && menu.contains(e.target) && menu !== e.target;
+      if (clickIsInMenu) return;
       _this.setState({
         isDropdownMenuOpen: false
       }, function () {
@@ -42,6 +45,9 @@ var MoreDropdownMenu = /*#__PURE__*/function (_React$Component) {
         });
       }
     };
+    _this.setMenuRef = function (ref) {
+      _this.menu = ref;
+    };
     _this.state = {
       isDropdownMenuOpen: false
     };
@@ -59,6 +65,7 @@ var MoreDropdownMenu = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement("span", {
         className: "sdocfont sdoc-more"
       })), isDropdownMenuOpen && /*#__PURE__*/React.createElement("div", {
+        ref: this.setMenuRef,
         className: "more-popover"
       }, this.props.children));
     }

package/dist/components/more-dropdown/style.css

@@ -48,7 +48,7 @@
   border-radius: 2px;
   box-shadow: 0 0 10px #ccc;
   display: flex;
-  z-index: 10;
+  z-index: 101;
 }
 
 .sdoc-more-menu .more-popover .more-menu-item {

package/dist/constants/index.js

@@ -1,6 +1,7 @@
 export var EXTERNAL_EVENT = {
   INTERNAL_LINK_CLICK: 'internal_link_click',
   TOGGLE_STAR: 'toggle_star',
+  UNMARK_AS_DRAFT: 'unmark_as_draft',
   CANCEL_TABLE_SELECT_RANGE: 'cancel_table_select_range'
 };
 export var PAGE_EDIT_AREA_WIDTH = 672; // 672 = 794 - 2[borderLeft + borderRight] - 120[paddingLeft + paddingRight]

package/dist/pages/simple-editor.js

@@ -12,6 +12,7 @@ import DiffViewer from './diff-viewer';
 import '../assets/css/simple-editor.css';
 var SimpleEditor = function SimpleEditor(_ref) {
   var isStarred = _ref.isStarred,
+    isDraft = _ref.isDraft,
     t = _ref.t;
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
@@ -123,6 +124,7 @@ var SimpleEditor = function SimpleEditor(_ref) {
   }
   return /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(DocInfo, {
     isStarred: isStarred,
+    isDraft: isDraft,
     isEditMode: !isShowChanges
   }), /*#__PURE__*/React.createElement(DocOperations, {
     isShowChanges: isShowChanges,

package/package.json

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

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

@@ -260,5 +260,7 @@
   "Start_revise": "Start revise",
   "Failed_to_execute_operation_on_server": "Failed to execute operation on server",
   "Start_revise_tip": "Create a temporary document and modify on it, merge it back after reviewing changes",
-  "Load_doc_content_error": "Load doc content error"
+  "Load_doc_content_error": "Load doc content error",
+  "Draft": "Draft",
+  "Unmark_as_draft": "Unmark as draft"
 }

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

@@ -260,5 +260,7 @@
   "Start_revise": "开始修订",
   "Failed_to_execute_operation_on_server": "无法在服务器上执行操作",
   "Start_revise_tip": "创建一个临时文档并对其进行修订，检查更改后将其合并回来",
-  "Load_doc_content_error": "加载文档内容错误"
+  "Load_doc_content_error": "加载文档内容错误",
+  "Draft": "草稿",
+  "Unmark_as_draft": "取消草稿标记"
 }

package/dist/basic-sdk/assets/css/outline.css

@@ -1,52 +0,0 @@
-.display-outline-icon {
-  line-height: 1;
-  font-size: 14px;
-  color: #888;
-  cursor: pointer;
-  width: 28px;
-  height: 28px;
-  background: #fff;
-  border-radius: 0 50% 50% 0;
-  box-shadow: 0 0 6px rgba(0,0,0, 0.12);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 20px 230px 0 0;
-}
-
-.display-outline-icon:hover {
-  color: #333;
-}
-
-.sdoc-outline {
-  font-size: 14px;
-  width: 220px; 
-  margin: 20px 30px 20px 16px;
-}
-
-.sdoc-outline-header {
-  color: #999;
-  border-bottom: 1px solid #dbdbdb;
-}
-
-.font-size-inherit {
-  font-size: inherit;
-}
-
-.sdoc-outline-header .close-icon {
-  cursor: pointer;
-  font-size: 14px;
-}
-
-.sdoc-outline-header .close-icon:hover {
-  color: #555;
-}
-
-.outline-item {
-  padding: 4px 0;
-  cursor: pointer;
-}
-
-.outline-item.active {
-  color: #ff8000;
-}

package/dist/basic-sdk/outline.js

@@ -1,125 +0,0 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import React from 'react';
-import { withTranslation } from 'react-i18next';
-import { UncontrolledTooltip } from 'reactstrap';
-import './assets/css/outline.css';
-var SDocOutline = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(SDocOutline, _React$PureComponent);
-  var _super = _createSuper(SDocOutline);
-  function SDocOutline(props) {
-    var _this;
-    _classCallCheck(this, SDocOutline);
-    _this = _super.call(this, props);
-    _this.toggleShow = function () {
-      var docUuid = _this.props.docUuid;
-      _this.setState({
-        isShown: !_this.state.isShown
-      }, function () {
-        var currentValue = localStorage.getItem(docUuid);
-        var options = currentValue ? JSON.parse(currentValue) : {};
-        options['outlineOpen'] = _this.state.isShown;
-        localStorage.setItem(docUuid, JSON.stringify(options));
-      });
-    };
-    var _currentValue = localStorage.getItem(props.docUuid);
-    var _options = _currentValue ? JSON.parse(_currentValue) : {};
-    var _options$outlineOpen = _options.outlineOpen,
-      outlineOpen = _options$outlineOpen === void 0 ? false : _options$outlineOpen;
-    _this.state = {
-      isShown: outlineOpen
-    };
-    return _this;
-  }
-  _createClass(SDocOutline, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        doc = _this$props.doc,
-        t = _this$props.t;
-      var isShown = this.state.isShown;
-      var list = doc.filter(function (item) {
-        return item.type == 'header2' || item.type == 'header3';
-      });
-      return isShown ? /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-outline d-flex flex-column"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-outline-header d-flex align-items-center justify-content-between py-1"
-      }, /*#__PURE__*/React.createElement("h2", {
-        className: "font-weight-normal m-0 font-size-inherit"
-      }, t('Outline')), /*#__PURE__*/React.createElement("span", {
-        onClick: this.toggleShow,
-        className: "close-icon sdocfont sdoc-cancel"
-      })), list.length ? /*#__PURE__*/React.createElement("ol", {
-        className: "list-unstyled py-2 flex-fill o-auto"
-      }, list.map(function (item, index) {
-        return /*#__PURE__*/React.createElement(OutlineItem, {
-          key: index,
-          item: item
-        });
-      })) : /*#__PURE__*/React.createElement("p", {
-        className: "mt-4 text-secondary"
-      }, t('Headings_you_add_to_the_document_will_appear_here'))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-        onClick: this.toggleShow,
-        id: "display-outline-icon",
-        className: "display-outline-icon sdocfont sdoc-table-of-content",
-        style: {
-          'marginRight': (window.innerWidth - 794) / 2 - 36
-        }
-      }), /*#__PURE__*/React.createElement(UncontrolledTooltip, {
-        placement: "right",
-        target: "display-outline-icon"
-      }, t('Outline')));
-    }
-  }]);
-  return SDocOutline;
-}(React.PureComponent);
-var OutlineItem = /*#__PURE__*/function (_React$PureComponent2) {
-  _inherits(OutlineItem, _React$PureComponent2);
-  var _super2 = _createSuper(OutlineItem);
-  function OutlineItem(props) {
-    var _this2;
-    _classCallCheck(this, OutlineItem);
-    _this2 = _super2.call(this, props);
-    _this2.onItemClick = function () {
-      var item = _this2.props.item;
-      var id = item.id;
-      document.getElementById(id).scrollIntoView();
-    };
-    _this2.onMouseOver = function () {
-      _this2.setState({
-        isHighlighted: true
-      });
-    };
-    _this2.onMouseOut = function () {
-      _this2.setState({
-        isHighlighted: false
-      });
-    };
-    _this2.state = {
-      isHighlighted: false
-    };
-    return _this2;
-  }
-  _createClass(OutlineItem, [{
-    key: "render",
-    value: function render() {
-      var isHighlighted = this.state.isHighlighted;
-      var item = this.props.item;
-      var type = item.type,
-        children = item.children;
-      return /*#__PURE__*/React.createElement("li", {
-        className: "outline-item ".concat(type == 'header3' ? 'pl-5' : '', " ").concat(isHighlighted ? 'active' : ''),
-        onClick: this.onItemClick,
-        onMouseOver: this.onMouseOver,
-        onMouseOut: this.onMouseOut
-      }, children.map(function (child) {
-        return child.text;
-      }).join(''));
-    }
-  }]);
-  return OutlineItem;
-}(React.PureComponent);
-export default withTranslation('sdoc-editor')(SDocOutline);