@seafile/sdoc-editor 0.1.90 → 0.1.91

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/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/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/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',
@@ -152,4 +152,4 @@ export var HEADER_TYPE_ARRAY = ['header1', 'header2', 'header3', 'header4', 'hea
 export var LIST_TYPE_ARRAY = ['unordered_list', 'ordered_list'];
 export var TRANSPARENT = 'transparent';
 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 };
+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/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

@@ -9,20 +9,23 @@ import { withTranslation } from 'react-i18next';
 import classnames from 'classnames';
 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 './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, {
@@ -135,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,
@@ -143,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/plugin.js

@@ -42,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)) {
@@ -108,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,
@@ -134,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

@@ -6,12 +6,20 @@ import { TEXT_STYLE, TEXT_STYLE_MORE, MENUS_CONFIG_MAP, ELEMENT_TYPE } from '../
 import { focusEditor } from '../../../core';
 import { MenuItem, ColorMenu, MoreDropdown } from '../../../commons';
 import { getValue, isMenuDisabled, addMark, removeMark } from '../helpers';
+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;
@@ -57,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
@@ -64,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

@@ -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) {

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/package.json

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