@seafile/sdoc-editor 0.1.89 → 0.1.91

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

@@ -61,7 +61,7 @@
 
 .sdoc-editor-container .sdoc-editor-content .article {
   width: 794px;
-  min-height: 100%;
+  min-height: 800px;
   padding: 40px 60px;
   background-color: #fff;
   border: 1px solid #e5e6e8;

package/dist/basic-sdk/editor.js

@@ -16,6 +16,8 @@ import CommentWrapper from './comment';
 import { usePipDecorate } from './decorates';
 import { getCursorPosition, getDomHeight, getDomMarginTop } from './utils/dom-utils';
 import EventBus from './utils/event-bus';
+import { FontColorProvider } from './hooks/use-font-color-context';
+import { HighlightColorProvider } from './hooks/use-highlight-color-context';
 import './assets/css/layout.css';
 import './assets/css/sdoc-editor-plugins.css';
 import './assets/css/dropdown-menu.css';
@@ -87,6 +89,7 @@ var SDocEditor = function SDocEditor(_ref) {
     var _scrollRef$current = scrollRef.current,
       scrollTop = _scrollRef$current.scrollTop,
       clientHeight = _scrollRef$current.clientHeight;
+    eventProxy.onKeyDown(event);
     if (event.key === 'ArrowLeft') {
       if (!isSelectionAtBlockStart(editor)) return;
     }
@@ -170,7 +173,7 @@ var SDocEditor = function SDocEditor(_ref) {
         return;
       }
     }
-    eventProxy.onKeyDown(event);
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   var _useState3 = useState({}),
@@ -205,7 +208,7 @@ var SDocEditor = function SDocEditor(_ref) {
   }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "sdoc-editor-container"
-  }, /*#__PURE__*/React.createElement(Toolbar, {
+  }, /*#__PURE__*/React.createElement(FontColorProvider, null, /*#__PURE__*/React.createElement(HighlightColorProvider, null, /*#__PURE__*/React.createElement(Toolbar, {
     editor: editor
   }), /*#__PURE__*/React.createElement("div", {
     className: "sdoc-editor-content"
@@ -243,6 +246,6 @@ var SDocEditor = function SDocEditor(_ref) {
     onMouseDown: onMouseDown,
     decorate: decorate,
     onCut: eventProxy.onCut
-  })), /*#__PURE__*/React.createElement(CommentWrapper, null))))))))));
+  })), /*#__PURE__*/React.createElement(CommentWrapper, null))))))))))));
 };
 export default SDocEditor;

package/dist/basic-sdk/extension/{menu → commons}/color-menu/index.css

@@ -47,7 +47,7 @@
 }
 
 .sdoc-color-menu-popover .popover {
-  left: -30px !important;
+  left: -24px !important;
 }
 
 .sdoc-color-menu-popover .sdoc-color-dropdown-menu {

package/dist/basic-sdk/extension/{menu → commons}/color-menu/index.js

@@ -19,30 +19,28 @@ var ColorMenu = function ColorMenu(_ref) {
     t = _ref.t,
     setColor = _ref.setColor,
     recentUsedColorsKey = _ref.recentUsedColorsKey,
-    lastUsedColorKey = _ref.lastUsedColorKey,
     text = _ref.text,
     defaultColorTip = _ref.defaultColorTip,
-    defaultColor = _ref.defaultColor;
+    defaultColor = _ref.defaultColor,
+    lastUsedColor = _ref.lastUsedColor,
+    updateLastUsedColor = _ref.updateLastUsedColor;
   var popoverRef = useRef(null);
   var moreColorsPopoverRef = useRef(null);
-  var _useState = useState(LocalStorage.getItem(lastUsedColorKey, '')),
+  var _useState = useState(LocalStorage.getItem(recentUsedColorsKey, DEFAULT_RECENT_USED_COLORS)),
     _useState2 = _slicedToArray(_useState, 2),
-    lastUsedColor = _useState2[0],
-    setLastUseColor = _useState2[1];
-  var _useState3 = useState(LocalStorage.getItem(recentUsedColorsKey, DEFAULT_RECENT_USED_COLORS)),
+    recentUsedColors = _useState2[0],
+    setRecentUsedColors = _useState2[1];
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    recentUsedColors = _useState4[0],
-    setRecentUsedColors = _useState4[1];
+    isShowMenu = _useState4[0],
+    setMenuShow = _useState4[1];
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    isShowMenu = _useState6[0],
-    setMenuShow = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    isPickerShow = _useState8[0],
-    setPickerShow = _useState8[1];
+    isPickerShow = _useState6[0],
+    setPickerShow = _useState6[1];
   var onSetColor = useCallback(function (color) {
     var shouldClose = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    if (disabled) return;
     var validColor = color || '';
     setColor(validColor);
     if (validColor !== '' && recentUsedColors[0] !== validColor) {
@@ -51,15 +49,14 @@ var ColorMenu = function ColorMenu(_ref) {
       LocalStorage.setItem(recentUsedColorsKey, newRecentUsedColors);
       setRecentUsedColors(newRecentUsedColors);
     }
-    LocalStorage.setItem(lastUsedColorKey, validColor);
-    setLastUseColor(validColor);
+    updateLastUsedColor && updateLastUsedColor(validColor);
     if (shouldClose) {
       popoverRef.current.toggle();
       setMenuShow(!isShowMenu);
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [recentUsedColors, recentUsedColorsKey, isShowMenu, isPickerShow]);
+  }, [recentUsedColors, recentUsedColorsKey, isShowMenu, isPickerShow, disabled]);
   var setColorProxy = useCallback(function (event) {
     if (event.target.className.includes('sdoc-color-item')) {
       var color = event.target.dataset.color;

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

@@ -0,0 +1,5 @@
+import ColorMenu from './color-menu';
+import ElementPopover from './element-popover';
+import MoreDropdown from './more-dropdown';
+import { MenuGroup, MenuItem } from './menu';
+export { ColorMenu, ElementPopover, MenuGroup, MenuItem, MoreDropdown };

package/dist/{components → basic-sdk/extension/commons}/more-dropdown/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import classnames from 'classnames';
 import { UncontrolledPopover } from 'reactstrap';
-var MoreDropdownMenu = function MoreDropdownMenu(_ref) {
+var MoreDropdown = function MoreDropdown(_ref) {
   var className = _ref.className,
     disabled = _ref.disabled,
     isRichEditor = _ref.isRichEditor,
@@ -31,8 +31,8 @@ var MoreDropdownMenu = function MoreDropdownMenu(_ref) {
     className: "menu-group"
   }, children)));
 };
-MoreDropdownMenu.defaultProps = {
+MoreDropdown.defaultProps = {
   isRichEditor: true,
   className: 'menu-group-item'
 };
-export default MoreDropdownMenu;
+export default MoreDropdown;

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

@@ -263,4 +263,14 @@ export var STANDARD_COLORS = [{
 
 // Initialize the most recently used colors
 export var DEFAULT_RECENT_USED_COLORS = new Array(10).fill('');
-export var DEFAULT_FONT_COLOR = '#333333';
+export var DEFAULT_FONT_COLOR = '#333333';
+
+// default last used color
+export var DEFAULT_LAST_USED_FONT_COLOR = '#FFFF00';
+export var DEFAULT_LAST_USED_HIGHLIGHT_COLOR = '#FF0000';
+export var DEFAULT_LAST_USED_TABLE_CELL_BG_COLOR = '#FF0000';
+
+// recent used colors key
+export var RECENT_USED_HIGHLIGHT_COLORS_KEY = 'sdoc-recent-used-highlight-colors';
+export var RECENT_USED_FONT_COLORS_KEY = 'sdoc-recent-used-font-colors';
+export var RECENT_USED_TABLE_CELL_BG_COLORS_KEY = 'sdoc-recent-used-bg-colors';

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

@@ -4,7 +4,7 @@ var _MENUS_CONFIG_MAP, _HEADER_TITLE_MAP;
 import * as ELEMENT_TYPE from './element-type';
 import { 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, CLEAR_FORMAT, COLOR, HIGHLIGHT_COLOR } from './element-type';
 import KEYBOARD from './keyboard';
-import { DEFAULT_COLORS, STANDARD_COLORS, DEFAULT_RECENT_USED_COLORS, DEFAULT_FONT_COLOR } from './color';
+import { DEFAULT_COLORS, STANDARD_COLORS, DEFAULT_RECENT_USED_COLORS, DEFAULT_FONT_COLOR, RECENT_USED_HIGHLIGHT_COLORS_KEY, RECENT_USED_FONT_COLORS_KEY, RECENT_USED_TABLE_CELL_BG_COLORS_KEY, DEFAULT_LAST_USED_FONT_COLOR, DEFAULT_LAST_USED_HIGHLIGHT_COLOR, DEFAULT_LAST_USED_TABLE_CELL_BG_COLOR } from './color';
 
 // history
 export var UNDO = 'undo';
@@ -72,8 +72,8 @@ export var MENUS_CONFIG_MAP = (_MENUS_CONFIG_MAP = {}, _defineProperty(_MENUS_CO
   text: 'Highlight_color',
   type: HIGHLIGHT_COLOR,
   isColor: true,
-  recentUsedColorsKey: 'sdoc-recent-used-highlight-colors',
-  lastUsedColorKey: 'sdoc-last-used-highlight-color'
+  recentUsedColorsKey: RECENT_USED_HIGHLIGHT_COLORS_KEY,
+  defaultLastUsedColor: DEFAULT_LAST_USED_HIGHLIGHT_COLOR
 }, {
   id: "sdoc-font-".concat(COLOR),
   iconClass: 'sdocfont sdoc-font-color',
@@ -81,8 +81,8 @@ export var MENUS_CONFIG_MAP = (_MENUS_CONFIG_MAP = {}, _defineProperty(_MENUS_CO
   type: COLOR,
   defaultColor: DEFAULT_FONT_COLOR,
   isColor: true,
-  recentUsedColorsKey: 'sdoc-recent-used-font-colors',
-  lastUsedColorKey: 'sdoc-last-used-font-color'
+  recentUsedColorsKey: RECENT_USED_FONT_COLORS_KEY,
+  defaultLastUsedColor: DEFAULT_LAST_USED_FONT_COLOR
 }]), _defineProperty(_MENUS_CONFIG_MAP, TEXT_STYLE_MORE, [{
   id: STRIKETHROUGH,
   iconClass: 'sdocfont sdoc-strikethrough',
@@ -151,4 +151,5 @@ export var ADDED_STYLE = {
 export var HEADER_TYPE_ARRAY = ['header1', 'header2', 'header3', 'header4', 'header5', 'header6'];
 export var LIST_TYPE_ARRAY = ['unordered_list', 'ordered_list'];
 export var TRANSPARENT = 'transparent';
-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, DEFAULT_COLORS, STANDARD_COLORS, DEFAULT_RECENT_USED_COLORS, CLEAR_FORMAT, DEFAULT_FONT_COLOR };
+export var CLIPBOARD_FORMAT_KEY = 'x-slate-fragment';
+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, DEFAULT_COLORS, STANDARD_COLORS, DEFAULT_RECENT_USED_COLORS, CLEAR_FORMAT, DEFAULT_FONT_COLOR, RECENT_USED_HIGHLIGHT_COLORS_KEY, RECENT_USED_FONT_COLORS_KEY, RECENT_USED_TABLE_CELL_BG_COLORS_KEY, DEFAULT_LAST_USED_FONT_COLOR, DEFAULT_LAST_USED_HIGHLIGHT_COLOR, DEFAULT_LAST_USED_TABLE_CELL_BG_COLOR };

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

@@ -4,8 +4,7 @@ import { withHistory } from '@seafile/slate-history';
 import Plugins from './plugins';
 import renderElement from './render/render-element';
 import renderLeaf from './render/render-leaf';
-import Toolbar from './toolbar';
-import ContextToolbar from './toolbar/context-toolbar';
+import { Toolbar, ContextToolbar } from './toolbar';
 var baseEditor = withHistory(withReact(createEditor()));
 var defaultEditor = Plugins.reduce(function (editor, pluginItem) {
   var withPlugin = pluginItem.editorPlugin;

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

@@ -5,7 +5,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { BLOCKQUOTE, MENUS_CONFIG_MAP } from '../../../constants';
-import { MenuItem } from '../../../menu';
+import { MenuItem } from '../../../commons';
 import { getBlockQuoteType, isMenuDisabled, setBlockQuoteType } from '../helpers';
 var QuoteMenu = /*#__PURE__*/function (_React$Component) {
   _inherits(QuoteMenu, _React$Component);

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

@@ -5,7 +5,7 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { CHECK_LIST, CHECK_LIST_ITEM, MENUS_CONFIG_MAP, PARAGRAPH } from '../../../constants';
-import { MenuItem } from '../../../menu';
+import { MenuItem } from '../../../commons';
 import { isMenuDisabled, setCheckListItemType, getCheckListItemType } from '../helpers';
 var CheckListMenu = /*#__PURE__*/function (_React$Component) {
   _inherits(CheckListMenu, _React$Component);

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

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React, { useCallback } from 'react';
 import { CLEAR_FORMAT, MENUS_CONFIG_MAP } from '../../../constants';
-import { MenuItem } from '../../../menu';
+import { MenuItem } from '../../../commons';
 import { isMenuDisabled, clearStyles } from '../helpers';
 var menuConfig = MENUS_CONFIG_MAP[CLEAR_FORMAT];
 var ClearFormatMenu = function ClearFormatMenu(_ref) {

package/dist/basic-sdk/extension/plugins/code-block/hover-menu/index.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useCallback, useEffect, useState } from 'react';
 import { withTranslation } from 'react-i18next';
-import ElementPopover from '../../../commons/element-popover';
+import { ElementPopover } from '../../../commons/';
 import { genCodeLangs } from '../prismjs';
 import './index.css';
 var CodeBlockHoverMenu = function CodeBlockHoverMenu(_ref) {

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

@@ -6,7 +6,7 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { focusEditor } from '../../../core';
 import { CODE_BLOCK, MENUS_CONFIG_MAP } from '../../../constants';
-import { MenuItem } from '../../../menu';
+import { MenuItem } from '../../../commons';
 import { getSelectCodeElem, isMenuDisabled, changeToCodeBlock, changeToPlainText } from '../helpers';
 var CodeBlockMenu = /*#__PURE__*/function (_React$Component) {
   _inherits(CodeBlockMenu, _React$Component);

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

@@ -8,7 +8,7 @@ import { withTranslation } from 'react-i18next';
 import { insertImage, isInsertImageMenuDisabled } from '../helpers';
 import context from '../../../../../context';
 import { IMAGE, MENUS_CONFIG_MAP } from '../../../constants';
-import { MenuItem } from '../../../menu';
+import { MenuItem } from '../../../commons';
 import InsertWebImageDialog from '../dialogs/insert-web-image-dialog';
 import './style.css';
 var ImageMenu = /*#__PURE__*/function (_React$Component) {

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

@@ -6,7 +6,7 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { LINK, MENUS_CONFIG_MAP } from '../../../constants';
 import { getEditorString } from '../../../core';
-import { MenuItem } from '../../../menu';
+import { MenuItem } from '../../../commons';
 import { getLinkType, isMenuDisabled } from '../helpers';
 import AddLinkDialog from './add-link-dialog';
 var LinkMenu = /*#__PURE__*/function (_React$Component) {

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

@@ -6,7 +6,7 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { MENUS_CONFIG_MAP, ORDERED_LIST, UNORDERED_LIST } from '../../../constants';
 import { focusEditor } from '../../../core';
-import { MenuItem } from '../../../menu';
+import { MenuItem } from '../../../commons';
 import { getListType, isMenuDisabled, setListType } from '../helpers';
 var ListMenu = /*#__PURE__*/function (_React$Component) {
   _inherits(ListMenu, _React$Component);

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

@@ -6,13 +6,12 @@ import slugid from 'slugid';
 import { Editor, Range, Transforms, Point, Node } from '@seafile/slate';
 import { ReactEditor } from '@seafile/slate-react';
 import { getNodeType, getParentNode, getSelectedNodeByType, isTextNode, getSelectedElems, focusEditor, getNode, findPath, replaceNodeChildren } from '../../core';
-import { ELEMENT_TYPE, KEYBOARD } from '../../constants';
+import { ELEMENT_TYPE, KEYBOARD, CLIPBOARD_FORMAT_KEY } from '../../constants';
 import { TABLE_MAX_ROWS, TABLE_MAX_COLUMNS, EMPTY_SELECTED_RANGE, TABLE_ROW_MIN_HEIGHT, TABLE_CELL_MIN_WIDTH, TABLE_ELEMENT, TABLE_ELEMENT_POSITION } from './constants';
 import EventBus from '../../../utils/event-bus';
 import { EXTERNAL_EVENT, PAGE_EDIT_AREA_WIDTH } from '../../../../constants';
 import ObjectUtils from '../../../utils/object-utils';
 import { replacePastedDataId } from '../../../node-id/helpers';
-import { CLIPBOARD_FORMAT_KEY } from '../../../constants';
 export var isTableMenuDisabled = function isTableMenuDisabled(editor) {
   var selection = editor.selection;
   if (selection === null) return true;

package/dist/basic-sdk/extension/plugins/table/menu/active-table-menu/index.css

@@ -14,7 +14,3 @@
   height: 100%;
   padding-top: 2px;
 }
-
-.sdoc-color-menu-popover.sdoc-table-cell-bg-colors-popover .popover {
-  left: -24px !important;
-}

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

@@ -7,23 +7,25 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Component } from 'react';
 import { withTranslation } from 'react-i18next';
 import classnames from 'classnames';
-import { MenuGroup, MenuItem } from '../../../../menu';
+import { ColorMenu, MenuGroup, MenuItem } from '../../../../commons';
 import CommonMenu from './common-menu';
-import { MENUS_CONFIG_MAP, REMOVE_TABLE, BG_COLOR } from '../../../../constants';
+import { MENUS_CONFIG_MAP, REMOVE_TABLE, BG_COLOR, RECENT_USED_TABLE_CELL_BG_COLORS_KEY, DEFAULT_LAST_USED_TABLE_CELL_BG_COLOR } from '../../../../constants';
 import { setCellStyle, insertTableElement, removeTableElement, isAllInTable } from '../../helpers';
 import { TABLE_ELEMENT } from '../../constants';
-import ColorMenu from '../../../../menu/color-menu';
 import './index.css';
 var ActiveTableMenu = /*#__PURE__*/function (_Component) {
   _inherits(ActiveTableMenu, _Component);
   var _super = _createSuper(ActiveTableMenu);
-  function ActiveTableMenu() {
+  function ActiveTableMenu(_props) {
     var _this;
     _classCallCheck(this, ActiveTableMenu);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call(this, _props);
+    _this.updateLastUsedColor = function (color) {
+      if (_this.state.lastUsedColor === color) return;
+      _this.setState({
+        lastUsedColor: color
+      });
+    };
     _this.setTextAlignStyle = function (textAlign) {
       var editor = _this.props.editor;
       setCellStyle(editor, {
@@ -136,6 +138,7 @@ var ActiveTableMenu = /*#__PURE__*/function (_Component) {
         isRichEditor = _this$props2.isRichEditor,
         className = _this$props2.className;
       var menuConfig = MENUS_CONFIG_MAP[BG_COLOR];
+      var lastUsedColor = _this.state.lastUsedColor;
       var props = _objectSpread(_objectSpread({
         isRichEditor: isRichEditor,
         className: className,
@@ -144,12 +147,16 @@ var ActiveTableMenu = /*#__PURE__*/function (_Component) {
       }, menuConfig), {}, {
         onMouseDown: function onMouseDown() {},
         setColor: _this.setColor,
-        recentUsedColorsKey: 'sdoc-recent-used-bg-colors',
-        lastUsedColorKey: 'sdoc-last-used-bg-colors',
+        recentUsedColorsKey: RECENT_USED_TABLE_CELL_BG_COLORS_KEY,
+        lastUsedColor: lastUsedColor,
+        updateLastUsedColor: _this.updateLastUsedColor,
         popoverClassName: 'sdoc-table-cell-bg-colors-popover'
       });
       return /*#__PURE__*/React.createElement(ColorMenu, props);
     };
+    _this.state = {
+      lastUsedColor: DEFAULT_LAST_USED_TABLE_CELL_BG_COLOR
+    };
     return _this;
   }
   _createClass(ActiveTableMenu, [{

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

@@ -6,7 +6,7 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
 import { withTranslation } from 'react-i18next';
 import ObjectUtils from '../../../../../utils/object-utils';
-import ElementPopover from '../../../../commons/element-popover';
+import { ElementPopover } from '../../../../commons';
 import { ELEMENT_TYPE } from '../../../../constants';
 import { getSelectedNodeByType } from '../../../../core';
 import { TABLE_MAX_COLUMNS, TABLE_MAX_ROWS, TABLE_ELEMENT, TABLE_ELEMENT_POSITION } from '../../constants';

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

@@ -7,7 +7,7 @@ import React from 'react';
 import { withTranslation } from 'react-i18next';
 import { insertTable, isTableMenuDisabled } from '../../helpers';
 import { TABLE, MENUS_CONFIG_MAP } from '../../../../constants';
-import { MenuItem } from '../../../../menu';
+import { MenuItem } from '../../../../commons';
 import TableSizePopover from '../../popover/table-size-popover';
 var TableMenu = /*#__PURE__*/function (_React$Component) {
   _inherits(TableMenu, _React$Component);

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

@@ -4,13 +4,12 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import isHotkey from 'is-hotkey';
 import { Editor, Transforms, Path } from '@seafile/slate';
 import { getNodeType, getParentNode, getSelectedNodeByType, isLastNode, generateEmptyElement } from '../../core';
-import { ELEMENT_TYPE, KEYBOARD, PARAGRAPH } from '../../constants';
+import { ELEMENT_TYPE, KEYBOARD, PARAGRAPH, CLIPBOARD_FORMAT_KEY } from '../../constants';
 import { TABLE_MAX_ROWS, EMPTY_SELECTED_RANGE, TABLE_ELEMENT, TABLE_ELEMENT_POSITION } from './constants';
 import ObjectUtils from '../../../utils/object-utils';
 import { getSelectedInfo, insertTableElement, removeTable, insertMultipleRowsAndColumns, setTableFragmentData, deleteTableRangeData, focusCell, deleteHandler, isTableLocation, isLastTableCell } from './helpers';
 import EventBus from '../../../utils/event-bus';
 import { EXTERNAL_EVENT } from '../../../../constants';
-import { CLIPBOARD_FORMAT_KEY } from '../../../constants';
 var withTable = function withTable(editor) {
   var insertBreak = editor.insertBreak,
     deleteBackward = editor.deleteBackward,
@@ -43,7 +42,6 @@ var withTable = function withTable(editor) {
       eventBus.dispatch(EXTERNAL_EVENT.SET_TABLE_SELECT_RANGE, table, allTableRange);
     }
     if (isHotkey(KEYBOARD.UP, event)) {
-      event.preventDefault();
       focusCell(newEditor, event, KEYBOARD.UP);
     }
     if (isHotkey(KEYBOARD.RIGHT, event)) {
@@ -109,7 +107,14 @@ var withTable = function withTable(editor) {
     }
     var tableSelectedRange = newEditor.tableSelectedRange;
     if (ObjectUtils.isSameObject(tableSelectedRange, EMPTY_SELECTED_RANGE)) {
-      return getFragment();
+      var fragment = getFragment();
+
+      // When a cell is selected, it should be converted to text
+      return [Object.freeze({
+        children: fragment[0].children[0].children[0]['children'],
+        id: fragment[0]['id'],
+        type: ELEMENT_TYPE.PARAGRAPH
+      })];
     }
     var minColIndex = tableSelectedRange.minColIndex,
       maxColIndex = tableSelectedRange.maxColIndex,
@@ -135,10 +140,10 @@ var withTable = function withTable(editor) {
       var _column = columns[_j];
       selectedColumns.push(_column);
     }
-    return _objectSpread(_objectSpread({}, selectedNode), {}, {
+    return Object.freeze(_objectSpread(_objectSpread({}, selectedNode), {}, {
       children: selectedRows,
       columns: selectedColumns
-    });
+    }));
   };
 
   // copy: mod + c

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

@@ -4,16 +4,22 @@ import { withTranslation } from 'react-i18next';
 import { Editor } from '@seafile/slate';
 import { TEXT_STYLE, TEXT_STYLE_MORE, MENUS_CONFIG_MAP, ELEMENT_TYPE } from '../../../constants';
 import { focusEditor } from '../../../core';
-import { MenuItem } from '../../../menu';
+import { MenuItem, ColorMenu, MoreDropdown } from '../../../commons';
 import { getValue, isMenuDisabled, addMark, removeMark } from '../helpers';
-import MoreDropdown from '../../../../../components/more-dropdown';
-import ColorMenu from '../../../menu/color-menu';
+import { useFontColorContext } from '../../../../hooks/use-font-color-context';
+import { useHighlightColorContext } from '../../../../hooks/use-highlight-color-context';
 var TextStyleMenuList = function TextStyleMenuList(_ref) {
   var editor = _ref.editor,
     t = _ref.t,
     isRichEditor = _ref.isRichEditor,
     className = _ref.className,
     idPrefix = _ref.idPrefix;
+  var _useFontColorContext = useFontColorContext(),
+    lastUsedFontColor = _useFontColorContext.color,
+    updateLastUsedFontColor = _useFontColorContext.updateColor;
+  var _useHighlightColorCon = useHighlightColorContext(),
+    lastUsedHighlightColor = _useHighlightColorCon.color,
+    updateLastUsedHighlightColor = _useHighlightColorCon.updateColor;
   var isActive = useCallback(function (type) {
     var isMark = getValue(editor, type);
     return !!isMark;
@@ -59,6 +65,8 @@ var TextStyleMenuList = function TextStyleMenuList(_ref) {
           return setColor(item.type, color);
         };
         itemProps['defaultColorTip'] = item.type === ELEMENT_TYPE.COLOR ? t('Default') : '';
+        itemProps['lastUsedColor'] = item.type === ELEMENT_TYPE.COLOR ? lastUsedFontColor : lastUsedHighlightColor;
+        itemProps['updateLastUsedColor'] = item.type === ELEMENT_TYPE.COLOR ? updateLastUsedFontColor : updateLastUsedHighlightColor;
       }
       return _objectSpread(_objectSpread(_objectSpread({}, itemProps), item), {}, {
         id: idPrefix ? "".concat(idPrefix, "_").concat(item.id) : item.id
@@ -66,7 +74,7 @@ var TextStyleMenuList = function TextStyleMenuList(_ref) {
     });
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editor]);
+  }, [editor, lastUsedFontColor, lastUsedHighlightColor]);
   var list = getTextStyleList(TEXT_STYLE);
   var dropdownList = getTextStyleList(TEXT_STYLE_MORE);
   return /*#__PURE__*/React.createElement(React.Fragment, null, list.map(function (itemProps, index) {

package/dist/basic-sdk/extension/toolbar/context-toolbar/index.css

@@ -1,5 +1,6 @@
 .sdoc-context-toolbar {
   position: absolute;
+  display: none;
   width: auto;
   height: 42px;
   z-index: 101;

package/dist/basic-sdk/extension/toolbar/context-toolbar/index.js

@@ -2,7 +2,7 @@ import React, { useRef, useEffect, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { useFocused, useSlateStatic, useReadOnly } from '@seafile/slate-react';
 import { Editor, Range } from '@seafile/slate';
-import { MenuGroup } from '../../menu';
+import { MenuGroup } from '../../commons';
 import TextStyleMenuList from '../../plugins/text-style/menu';
 import { useScrollContext } from '../../../hooks/use-scroll-context';
 import { getSelectedNodeByType } from '../../core';
@@ -21,6 +21,7 @@ var ContextToolbar = function ContextToolbar() {
     var rect = domRange.getBoundingClientRect();
     el.style.top = "".concat(rect.top - el.offsetHeight, "px");
     el.style.left = "".concat(rect.left, "px");
+    el.style.display = 'block';
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   var onScroll = useCallback(function (e) {
@@ -41,15 +42,16 @@ var ContextToolbar = function ContextToolbar() {
     scrollRef.current && scrollRef.current.addEventListener('scroll', onScroll);
     setContextToolbarPosition();
   });
+  var onMouseDown = useCallback(function (event) {
+    event.preventDefault(); // prevent toolbar from taking focus away from editor
+  }, []);
   return createPortal( /*#__PURE__*/React.createElement("div", {
     ref: ref,
     className: "sdoc-context-toolbar",
-    onMouseDown: function onMouseDown(e) {
-      e.preventDefault(); // prevent toolbar from taking focus away from editor
-    }
+    onMouseDown: onMouseDown
   }, /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(TextStyleMenuList, {
     editor: editor,
-    idPrefix: 'sdoc_context_toolar'
+    idPrefix: 'sdoc_context_toolbar'
   }))), document.body);
 };
 export default ContextToolbar;

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import useSelectionUpdate from '../../../hooks/use-selection-update';
+import { ORDERED_LIST, UNORDERED_LIST } from '../../constants';
+import { MenuGroup } from '../../commons';
+import QuoteMenu from '../../plugins/blockquote/menu';
+import LinkMenu from '../../plugins/link/menu';
+import ListMenu from '../../plugins/list/menu';
+import ImageMenu from '../../plugins/image/menu';
+import HeaderMenu from '../../plugins/header/menu';
+import CheckListMenu from '../../plugins/check-list/menu';
+import TextStyleMenuList from '../../plugins/text-style/menu';
+import CodeBlockMenu from '../../plugins/code-block/menu';
+import TextAlignMenu from '../../plugins/text-align/menu';
+import { TableMenu, ActiveTableMenu } from '../../plugins/table/menu';
+import ClearFormatMenu from '../../plugins/clear-format/menu';
+import HistoryMenu from './redo-undo';
+var Toolbar = function Toolbar(_ref) {
+  var editor = _ref.editor;
+  useSelectionUpdate();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-editor-toolbar"
+  }, /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(HistoryMenu, {
+    editor: editor
+  }), /*#__PURE__*/React.createElement(ClearFormatMenu, {
+    editor: editor
+  })), /*#__PURE__*/React.createElement(HeaderMenu, {
+    editor: editor
+  }), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(TextStyleMenuList, {
+    editor: editor
+  })), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(QuoteMenu, {
+    editor: editor
+  }), /*#__PURE__*/React.createElement(ListMenu, {
+    editor: editor,
+    type: UNORDERED_LIST
+  }), /*#__PURE__*/React.createElement(ListMenu, {
+    editor: editor,
+    type: ORDERED_LIST
+  }), /*#__PURE__*/React.createElement(CheckListMenu, {
+    editor: editor
+  }), /*#__PURE__*/React.createElement(TextAlignMenu, {
+    editor: editor
+  })), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(CodeBlockMenu, {
+    editor: editor
+  }), /*#__PURE__*/React.createElement(TableMenu, {
+    editor: editor
+  })), /*#__PURE__*/React.createElement(ActiveTableMenu, {
+    editor: editor
+  }), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(ImageMenu, {
+    editor: editor
+  }), /*#__PURE__*/React.createElement(LinkMenu, {
+    editor: editor
+  })));
+};
+export default Toolbar;

package/dist/basic-sdk/extension/toolbar/{redo-undo.js → header-toolbar/redo-undo.js}

@@ -4,8 +4,8 @@ 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 { MenuItem } from '../menu';
-import { MENUS_CONFIG_MAP, REDO, UNDO } from '../constants';
+import { MenuItem } from '../../commons';
+import { MENUS_CONFIG_MAP, REDO, UNDO } from '../../constants';
 var HistoryMenu = /*#__PURE__*/function (_React$Component) {
   _inherits(HistoryMenu, _React$Component);
   var _super = _createSuper(HistoryMenu);

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

@@ -1,54 +1,3 @@
-import React from 'react';
-import useSelectionUpdate from '../../hooks/use-selection-update';
-import { ORDERED_LIST, UNORDERED_LIST } from '../constants';
-import { MenuGroup } from '../menu';
-import QuoteMenu from '../plugins/blockquote/menu';
-import LinkMenu from '../plugins/link/menu';
-import ListMenu from '../plugins/list/menu';
-import ImageMenu from '../plugins/image/menu';
-import HeaderMenu from '../plugins/header/menu';
-import CheckListMenu from '../plugins/check-list/menu';
-import TextStyleMenuList from '../plugins/text-style/menu';
-import CodeBlockMenu from '../plugins/code-block/menu';
-import TextAlignMenu from '../plugins/text-align/menu';
-import HistoryMenu from './redo-undo';
-import { TableMenu, ActiveTableMenu } from '../plugins/table/menu';
-import ClearFormatMenu from '../plugins/clear-format/menu';
-var Toolbar = function Toolbar(_ref) {
-  var editor = _ref.editor;
-  useSelectionUpdate();
-  return /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-editor-toolbar"
-  }, /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(HistoryMenu, {
-    editor: editor
-  })), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(ClearFormatMenu, {
-    editor: editor
-  })), /*#__PURE__*/React.createElement(HeaderMenu, {
-    editor: editor
-  }), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(TextStyleMenuList, {
-    editor: editor
-  })), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(QuoteMenu, {
-    editor: editor
-  }), /*#__PURE__*/React.createElement(ListMenu, {
-    editor: editor,
-    type: UNORDERED_LIST
-  }), /*#__PURE__*/React.createElement(ListMenu, {
-    editor: editor,
-    type: ORDERED_LIST
-  }), /*#__PURE__*/React.createElement(CheckListMenu, {
-    editor: editor
-  }), /*#__PURE__*/React.createElement(TextAlignMenu, {
-    editor: editor
-  })), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(CodeBlockMenu, {
-    editor: editor
-  }), /*#__PURE__*/React.createElement(TableMenu, {
-    editor: editor
-  })), /*#__PURE__*/React.createElement(ActiveTableMenu, {
-    editor: editor
-  }), /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(ImageMenu, {
-    editor: editor
-  }), /*#__PURE__*/React.createElement(LinkMenu, {
-    editor: editor
-  })));
-};
-export default Toolbar;
+import Toolbar from './header-toolbar';
+import ContextToolbar from './context-toolbar';
+export { Toolbar, ContextToolbar };

package/dist/basic-sdk/hooks/use-font-color-context.js

@@ -0,0 +1,28 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useContext, useState } from 'react';
+import { DEFAULT_LAST_USED_FONT_COLOR } from '../extension/constants';
+export var FontColorContext = React.createContext(null);
+export var FontColorProvider = function FontColorProvider(props) {
+  var _useState = useState(DEFAULT_LAST_USED_FONT_COLOR),
+    _useState2 = _slicedToArray(_useState, 2),
+    color = _useState2[0],
+    updateColor = _useState2[1];
+  return /*#__PURE__*/React.createElement(FontColorContext.Provider, {
+    value: {
+      color: color,
+      updateColor: updateColor
+    }
+  }, props.children);
+};
+export var useFontColorContext = function useFontColorContext() {
+  var context = useContext(FontColorContext);
+  if (!context) {
+    throw new Error('\'FontColorContext\' is null');
+  }
+  var color = context.color,
+    updateColor = context.updateColor;
+  return {
+    color: color,
+    updateColor: updateColor
+  };
+};

package/dist/basic-sdk/hooks/use-highlight-color-context.js

@@ -0,0 +1,28 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useContext, useState } from 'react';
+import { DEFAULT_LAST_USED_HIGHLIGHT_COLOR } from '../extension/constants';
+export var HighlightColorContext = React.createContext(null);
+export var HighlightColorProvider = function HighlightColorProvider(props) {
+  var _useState = useState(DEFAULT_LAST_USED_HIGHLIGHT_COLOR),
+    _useState2 = _slicedToArray(_useState, 2),
+    color = _useState2[0],
+    updateColor = _useState2[1];
+  return /*#__PURE__*/React.createElement(HighlightColorContext.Provider, {
+    value: {
+      color: color,
+      updateColor: updateColor
+    }
+  }, props.children);
+};
+export var useHighlightColorContext = function useHighlightColorContext() {
+  var context = useContext(HighlightColorContext);
+  if (!context) {
+    throw new Error('\'HighlightColorContext\' is null');
+  }
+  var color = context.color,
+    updateColor = context.updateColor;
+  return {
+    color: color,
+    updateColor: updateColor
+  };
+};

package/dist/basic-sdk/node-id/index.js

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { decorateOperation, replacePastedDataId } from './helpers';
-import { CLIPBOARD_FORMAT_KEY } from '../constants';
+import { CLIPBOARD_FORMAT_KEY } from '../extension/constants';
 var catchSlateFragment = /data-slate-fragment="(.+?)"/m;
 var getSlateFragmentAttribute = function getSlateFragmentAttribute(dataTransfer) {
   var htmlData = dataTransfer.getData('text/html');

package/dist/layout/layout.css

@@ -21,7 +21,7 @@ html, body {
   flex-shrink: 0;
   height: 56px;
   position: relative;
-  z-index: 102;
+  z-index: 103;
   background-color: #fff;
 }
 

package/package.json

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

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

@@ -1 +0,0 @@
-export var CLIPBOARD_FORMAT_KEY = 'x-slate-fragment';