@seafile/sdoc-editor 1.0.2 → 1.0.4

package/dist/basic-sdk/extension/plugins/html/rules/list.js

@@ -7,17 +7,19 @@ const listRule = (element, parseChild) => {
     childNodes
   } = element;
   if (nodeName === 'UL') {
+    const validChildNodes = Array.from(childNodes).filter(item => item.nodeName === 'LI');
     return {
       id: slugid.nice(),
       type: UNORDERED_LIST,
-      children: parseChild(childNodes)
+      children: parseChild(validChildNodes)
     };
   }
   if (nodeName === 'OL') {
+    const validChildNodes = Array.from(childNodes).filter(item => item.nodeName === 'LI');
     return {
       id: slugid.nice(),
       type: ORDERED_LIST,
-      children: parseChild(childNodes)
+      children: parseChild(validChildNodes)
     };
   }
   if (nodeName === 'LI' && PARAGRAPH_TAGS.includes(element.firstChild.nodeName)) {

package/dist/basic-sdk/extension/plugins/table/menu/color-selector-popover/color-item.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { withTranslation } from 'react-i18next';
+import classnames from 'classnames';
+const ColorItem = _ref => {
+  let {
+    t,
+    color,
+    lastUsedColor
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames('sdoc-color-item', {
+      'selected': lastUsedColor === color.value
+    }),
+    style: {
+      backgroundColor: color.value
+    },
+    color: color.value,
+    "data-color": color.value,
+    title: color.index ? t(color.name, {
+      value: color.index
+    }) : t(color.name)
+  });
+};
+export default withTranslation('sdoc-editor')(ColorItem);

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

@@ -0,0 +1,171 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { UncontrolledPopover } from 'reactstrap';
+import classnames from 'classnames';
+import { ChromePicker } from 'react-color';
+import { LocalStorage } from '../../../../../../utils';
+import { DEFAULT_COLORS, DEFAULT_RECENT_USED_LIST, RECENT_USED_TABLE_CELL_BACKGROUND_COLORS_KEY, STANDARD_COLORS } from '../../../../constants';
+import ColorItem from './color-item';
+import { eventStopPropagation } from '../../../../../utils/mouse-event';
+import { setCellStyle } from '../../helpers';
+import { useColorContext } from '../../../../../hooks/use-color-context';
+import './style.css';
+const recentUsedColorsKey = RECENT_USED_TABLE_CELL_BACKGROUND_COLORS_KEY;
+const ColorSelectorPopover = _ref => {
+  let {
+    target,
+    editor,
+    readonly,
+    isRichEditor = true
+  } = _ref;
+  const {
+    t
+  } = useTranslation();
+  const {
+    lastUsedTableCellBackgroundColor: lastUsedColor,
+    updateLastUsedTableCellBackgroundColor: updateLastUsedColor
+  } = useColorContext();
+  const popoverRef = useRef(null);
+  const moreColorsPopoverRef = useRef(null);
+  const [recentUsedColors, setRecentUsedColors] = useState(LocalStorage.getItem(recentUsedColorsKey, DEFAULT_RECENT_USED_LIST));
+  const [isShowMenu, setMenuShow] = useState(false);
+  const [isPickerShow, setPickerShow] = useState(false);
+  const setColor = useCallback(color => {
+    setCellStyle(editor, {
+      background_color: color
+    });
+  }, [editor]);
+  const onSetColor = useCallback(function (color) {
+    let shouldClose = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    if (readonly) return;
+    const validColor = color || '';
+    setColor(validColor);
+    if (validColor !== '' && recentUsedColors[0] !== validColor) {
+      let newRecentUsedColors = recentUsedColors.slice(0, 9);
+      newRecentUsedColors.unshift(validColor);
+      LocalStorage.setItem(recentUsedColorsKey, newRecentUsedColors);
+      setRecentUsedColors(newRecentUsedColors);
+    }
+    updateLastUsedColor && updateLastUsedColor(validColor);
+    if (shouldClose) {
+      popoverRef.current.toggle();
+      setMenuShow(!isShowMenu);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [recentUsedColors, recentUsedColorsKey, isShowMenu, isPickerShow, readonly]);
+  const setColorProxy = useCallback(event => {
+    if (event.target.className.includes('sdoc-color-item')) {
+      const color = event.target.dataset.color;
+      onSetColor(color);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [recentUsedColors, recentUsedColorsKey, isShowMenu, isPickerShow]);
+  const toggle = useCallback(() => {
+    if (isPickerShow) return;
+    popoverRef.current.toggle();
+    setMenuShow(!isShowMenu);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowMenu, isPickerShow]);
+  const moreColorsPopoverToggle = useCallback(() => {
+    moreColorsPopoverRef.current.toggle();
+    setPickerShow(!isPickerShow);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [moreColorsPopoverRef, isPickerShow]);
+  const onMouseDown = useCallback(event => {
+    eventStopPropagation(event);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onChange = useCallback(color => {
+    const validColor = color.hex;
+    onSetColor(validColor, false);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [readonly]);
+  return /*#__PURE__*/React.createElement(UncontrolledPopover, {
+    target: target,
+    trigger: "hover",
+    placement: "right-start",
+    hideArrow: true,
+    fade: false,
+    className: "sdoc-color-menu-popover sdoc-table-cell-bg-colors-popover",
+    toggle: toggle,
+    ref: popoverRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-dropdown-menu sdoc-color-dropdown-menu"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "p-3 d-flex flex-column"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-color-no-color-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-color-no-color-content",
+    onMouseDown: () => onSetColor()
+  }, t('No_color'))), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-color-default-colors-container",
+    onMouseDown: setColorProxy
+  }, DEFAULT_COLORS.map((color, index) => {
+    return /*#__PURE__*/React.createElement(ColorItem, {
+      key: "default-color-".concat(index),
+      color: color,
+      lastUsedColor: lastUsedColor
+    });
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-color-standard-colors-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-color-sub-title"
+  }, t('Standard_color')), /*#__PURE__*/React.createElement("div", {
+    className: "d-flex",
+    onMouseDown: setColorProxy
+  }, STANDARD_COLORS.map((color, index) => {
+    return /*#__PURE__*/React.createElement(ColorItem, {
+      key: "standard-color-".concat(index),
+      color: color,
+      lastUsedColor: lastUsedColor
+    });
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-color-recent-used-colors-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-color-sub-title"
+  }, t('Recently_used')), /*#__PURE__*/React.createElement("div", {
+    className: "d-flex",
+    onMouseDown: setColorProxy
+  }, recentUsedColors.map((color, index) => {
+    return /*#__PURE__*/React.createElement(ColorItem, {
+      key: "standard-color-".concat(index),
+      color: {
+        value: color,
+        name: color
+      }
+    });
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-colors-divider"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classnames('sdoc-more-colors pr-2', {
+      'show-pick': isPickerShow
+    }),
+    id: "sdoc-more-colors"
+  }, /*#__PURE__*/React.createElement("span", null, t('More_color')), /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-right-slide"
+  })), /*#__PURE__*/React.createElement(UncontrolledPopover, {
+    target: "sdoc-more-colors",
+    className: "sdoc-more-colors-popover sdoc-table-more-colors",
+    trigger: "hover",
+    placement: "right-end",
+    hideArrow: true,
+    fade: false,
+    toggle: moreColorsPopoverToggle,
+    ref: moreColorsPopoverRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-more-colors-container",
+    onMouseDown: onMouseDown
+  }, /*#__PURE__*/React.createElement(ChromePicker, {
+    disableAlpha: true,
+    color: lastUsedColor || '',
+    onChange: onChange
+  })))));
+};
+export default ColorSelectorPopover;

package/dist/basic-sdk/extension/plugins/table/menu/color-selector-popover/style.css

@@ -0,0 +1,169 @@
+.menu-group .sdoc-color-menu.menu-show {
+  background: #e5e5e5;
+  border-radius: 2px;
+}
+
+.menu-group .sdoc-color-menu .last-used-color-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.menu-group .sdoc-color-menu .last-used-color-container.disabled {
+  padding-right: 0;
+}
+
+.menu-group .sdoc-color-menu .sdoc-color-toggle {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.menu-group .sdoc-color-menu .sdoc-color-toggle:hover,
+.menu-group .sdoc-color-menu .last-used-color-container:not(.disabled):hover {
+  background-color: #E5E5E5;
+}
+
+.menu-group .sdoc-color-menu.disabled .sdoc-color-toggle {
+  display: none;
+}
+
+.sdoc-color-menu .sdoc-color-icon {
+  height: 12px;
+  width: 12px;
+  transform: scale(.85);
+  line-height: 12px;
+}
+
+.sdoc-color-menu .last-used-color {
+  width: 14px;
+  height: 3px;
+  border-radius: 1px;
+  margin-top: 1px;
+  border: 1px solid rgba(0, 0, 0, .08);
+}
+
+.sdoc-color-menu-popover .popover {
+  left: -24px !important;
+}
+
+.sdoc-color-menu-popover .sdoc-color-dropdown-menu {
+  width: 251px;
+  padding: 0 0 12px 0;
+}
+
+.sdoc-color-menu-popover .sdoc-color-no-color-container {
+  width: 100%;
+  height: 24px;
+  margin-bottom: 5px;
+}
+
+.sdoc-color-menu-popover .sdoc-color-no-color-content {
+  height: 100%;
+  width: 100%;
+  text-align: center;
+  border: 1px solid rgba(0, 0, 0, .12);
+  border-radius: 2px;
+  font-size: 12px;
+  line-height: 22px;
+  cursor: pointer;
+}
+
+.sdoc-color-menu-popover .sdoc-color-default-colors-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.sdoc-color-menu-popover .sdoc-color-item {
+  position: relative;
+  height: 20px;
+  width: 20px;
+  margin-right: 3px;
+  margin-bottom: 3px;
+  border: 0.5px solid rgba(0, 0, 0, .08);
+}
+
+.sdoc-color-menu-popover .sdoc-color-item:not(.selected):hover::before {
+  content: '';
+  position: absolute;
+  width: calc(100% + 5px);
+  height: calc((100% + 5px));
+  top: -2.5px;
+  left: -2.5px;
+  pointer-events: none;
+  border: 1px solid rgba(0, 0, 0, .24);
+}
+
+.sdoc-color-menu-popover .sdoc-color-item.selected::after {
+  content: '';
+  position: absolute;
+  width: calc(100% + 5px);
+  height: calc((100% + 5px));
+  top: -2.5px;
+  left: -2.5px;
+  pointer-events: none;
+  border: 1px solid rgba(0, 0, 0, .88);
+}
+
+.sdoc-color-menu-popover .sdoc-color-item:hover {
+  cursor: pointer;
+}
+
+.sdoc-color-menu-popover .sdoc-color-item:nth-child(10n) {
+  margin-right: 0px;
+}
+
+.sdoc-color-menu-popover .sdoc-color-sub-title {
+  font-size: 11px;
+  line-height: 16px;
+  margin: 7px 0;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.sdoc-color-menu-popover .sdoc-colors-divider {
+  width: 100%;
+  height: 1px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  margin: 0px 0 8px 0;
+}
+
+.sdoc-color-menu-popover .sdoc-more-colors {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 30px;
+  font-size: 12px;
+  padding: 0 12px;
+}
+
+.sdoc-color-menu-popover .sdoc-more-colors .sdocfont {
+  font-size: 12px;
+  transform: scale(.6);
+  color: #888;
+}
+
+.sdoc-color-menu-popover .sdoc-more-colors.show-pick {
+  cursor: pointer;
+  background-color: rgba(51, 77, 102, .06);
+}
+
+.sdoc-more-colors-popover .popover {
+  left: 10px !important;
+}
+
+/* commission */
+.menu-group #button-sdoc-highlight-color .sdoc-color-icon {
+  position: relative;
+  left: 1px;
+}
+
+.sdoc-table-cell-bg-colors-popover .popover {
+  margin-left: 30px;
+}
+
+.sdoc-table-more-colors.sdoc-more-colors-popover .popover {
+  margin-left: -8px;
+}

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

@@ -1,4 +1,3 @@
 import TableMenu from './table-menu';
-import ActiveTableMenu from './active-table-menu';
 import TableContextMenu from './table-context-menu';
-export { TableMenu, ActiveTableMenu, TableContextMenu };
+export { TableMenu, TableContextMenu };

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

@@ -13,6 +13,7 @@ import { INTERNAL_EVENT } from '../../../../../constants';
 import VerticalAlignPopover from '../vertical-align-popover';
 import HorizontalAlignPopover from '../horizontal-align-popover';
 import KebabToCamel from '../../../../../utils/Kebab-to-camel';
+import ColorSelectorPopover from '../color-selector-popover';
 import './index.css';
 class TableContextMenu extends React.Component {
   constructor(props) {
@@ -76,6 +77,7 @@ class TableContextMenu extends React.Component {
     this.eventBus = EventBus.getInstance();
     this.horizontalAlignRef = React.createRef();
     this.verticalAlignRef = React.createRef();
+    this.colorSelectorRef = React.createRef();
   }
   componentDidMount() {
     this.position = this.props.contextMenuPosition;
@@ -203,6 +205,15 @@ class TableContextMenu extends React.Component {
       editor: editor,
       readonly: readonly,
       verticalAlign: verticalAlign
+    }), /*#__PURE__*/React.createElement("button", {
+      ref: this.colorSelectorRef,
+      className: "dropdown-item side-extendable"
+    }, /*#__PURE__*/React.createElement("span", null, t('Background_color')), /*#__PURE__*/React.createElement("i", {
+      className: "sdocfont sdoc-right-slide"
+    })), /*#__PURE__*/React.createElement(ColorSelectorPopover, {
+      target: this.colorSelectorRef,
+      editor: editor,
+      readonly: readonly
     }), /*#__PURE__*/React.createElement("div", {
       className: 'seafile-divider dropdown-divider'
     }), /*#__PURE__*/React.createElement("button", {

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

@@ -12,7 +12,6 @@ import ClearFormatMenu from '../../plugins/clear-format/menu';
 import HistoryMenu from './redo-undo';
 import Font from '../../plugins/font/menu';
 import InsertToolbar from './insert-toolbar';
-import ActiveTableMenu from '../../plugins/table/menu/active-table-menu';
 import CalloutMenu from '../../plugins/callout/menu';
 import SearchReplaceMenu from '../../plugins/search-replace/menu';
 import { getSelectedNodeByType } from '../../core';
@@ -63,10 +62,7 @@ const HeaderToolbar = _ref => {
   }), /*#__PURE__*/React.createElement(CalloutMenu, {
     editor: editor,
     readonly: readonly
-  })), /*#__PURE__*/React.createElement(ActiveTableMenu, {
-    editor: editor,
-    readonly: readonly
-  }), /*#__PURE__*/React.createElement(MenuGroup, {
+  })), /*#__PURE__*/React.createElement(MenuGroup, {
     className: "menu-group sdoc-editor-toolbar-right-menu"
   }, /*#__PURE__*/React.createElement(SearchReplaceMenu, {
     editor: editor,

package/package.json

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

package/dist/basic-sdk/extension/plugins/table/menu/active-table-menu/cell-bg-color-menu.js

@@ -1,42 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import React, { useCallback } from 'react';
-import { ColorMenu } from '../../../../commons';
-import { RECENT_USED_TABLE_CELL_BACKGROUND_COLORS_KEY } from '../../../../constants';
-import { setCellStyle } from '../../helpers';
-import { useColorContext } from '../../../../../hooks/use-color-context';
-const menuConfig = {
-  id: 'sdoc_background_color',
-  iconClass: 'sdocfont sdoc-bg-color',
-  text: 'Background_color'
-};
-const CellBackgroundColorMenu = _ref => {
-  let {
-    isRichEditor,
-    className,
-    editor
-  } = _ref;
-  const {
-    lastUsedTableCellBackgroundColor,
-    updateLastUsedTableCellBackgroundColor
-  } = useColorContext();
-  const setColor = useCallback(color => {
-    setCellStyle(editor, {
-      background_color: color
-    });
-  }, [editor]);
-  const props = _objectSpread(_objectSpread({
-    isRichEditor,
-    className,
-    disabled: false,
-    isActive: false
-  }, menuConfig), {}, {
-    onMouseDown: () => {},
-    setColor: setColor,
-    recentUsedColorsKey: RECENT_USED_TABLE_CELL_BACKGROUND_COLORS_KEY,
-    lastUsedColor: lastUsedTableCellBackgroundColor,
-    updateLastUsedColor: updateLastUsedTableCellBackgroundColor,
-    popoverClassName: 'sdoc-table-cell-bg-colors-popover'
-  });
-  return /*#__PURE__*/React.createElement(ColorMenu, props);
-};
-export default CellBackgroundColorMenu;

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

@@ -1,15 +0,0 @@
-.sdoc-table-menu-group .sdoc-menu-with-dropdown .sdoc-menu-with-dropdown-icon {
-  width: 24px;
-}
-
-.sdoc-table-menu-group .sdoc-menu-with-dropdown .sdoc-menu-with-dropdown-triangle {
-  width: 12px;
-}
-
-.sdoc-table-menu-group .sdoc-color-menu .last-used-color-container {
-  height: 100%;
-}
-
-.sdoc-table-menu-popover .sdoc-dropdown-menu-item {
-  font-size: 14px;
-}

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

@@ -1,24 +0,0 @@
-import React from 'react';
-import { withTranslation } from 'react-i18next';
-import { MenuGroup } from '../../../../commons';
-import { isAllInTable } from '../../helpers';
-import CellBackgroundColorMenu from './cell-bg-color-menu';
-import './index.css';
-const ActiveTableMenu = _ref => {
-  let {
-    isRichEditor,
-    className,
-    editor,
-    readonly
-  } = _ref;
-  if (!isAllInTable(editor)) return null;
-  return /*#__PURE__*/React.createElement(MenuGroup, {
-    className: "menu-group sdoc-table-menu-group"
-  }, /*#__PURE__*/React.createElement(CellBackgroundColorMenu, {
-    editor: editor,
-    isRichEditor: isRichEditor,
-    className: className,
-    readonly: readonly
-  }));
-};
-export default withTranslation('sdoc-editor')(ActiveTableMenu);