@seafile/sdoc-editor 0.3.1 → 0.3.2

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

@@ -28,4 +28,10 @@ export var TABLE_CELL_STYLE = {
 };
 export var TABLE_ROW_STYLE = {
   MIN_HEIGHT: 'min_height'
+};
+export var TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP = {
+  '#3f495d': 'sdoc-table-3f495d',
+  '#2367f2': 'sdoc-table-2367f2',
+  '#f77d21': 'sdoc-table-f77d21',
+  '#0099f4': 'sdoc-table-0099f4'
 };

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

@@ -67,8 +67,20 @@ export var generateTableRow = function generateTableRow(colsCount) {
     style: _defineProperty({}, TABLE_ROW_STYLE.MIN_HEIGHT, TABLE_ROW_MIN_HEIGHT)
   };
 };
-export var generateEmptyTable = function generateEmptyTable(editor) {
-  var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [0, 0];
+
+/**
+ * @param {Editor} editor
+ * @param {Object} tableProps
+ * @param {[number,number]} tableProps.size - table size, [row,column]
+ * @param {Boolean} tableProps.alternate_highlight - is alternate highlight
+ * @param {string} tableProps.alternate_highlight_color - table alternate highlight color
+ */
+export var generateEmptyTable = function generateEmptyTable(editor, tableProps) {
+  var _tableProps$size = tableProps.size,
+    size = _tableProps$size === void 0 ? [0, 0] : _tableProps$size,
+    _tableProps$alternate = tableProps.alternate_highlight,
+    alternate_highlight = _tableProps$alternate === void 0 ? false : _tableProps$alternate,
+    alternate_highlight_color = tableProps.alternate_highlight_color;
   var rowsCount = size[0];
   var colsCount = size[1];
   var children = [];
@@ -87,7 +99,11 @@ export var generateEmptyTable = function generateEmptyTable(editor) {
     id: slugid.nice(),
     type: ELEMENT_TYPE.TABLE,
     children: children,
-    columns: columns
+    columns: columns,
+    style: {
+      alternate_highlight: alternate_highlight,
+      alternate_highlight_color: alternate_highlight_color
+    }
   };
 };
 export var insertTable = function insertTable(editor, size, selection) {
@@ -96,7 +112,9 @@ export var insertTable = function insertTable(editor, size, selection) {
   if (position !== INSERT_POSITION.AFTER) {
     if (isTableMenuDisabled(editor)) return;
   }
-  var tableNode = generateEmptyTable(editor, size);
+  var tableNode = generateEmptyTable(editor, {
+    size: size
+  });
   var validSelection = selection || editor.selection;
   var path = Editor.path(editor, validSelection);
   if (position === INSERT_POSITION.AFTER) {
@@ -926,7 +944,9 @@ var normalizeTableCell = function normalizeTableCell(cell) {
 export var normalizeTableELement = function normalizeTableELement(editor, element) {
   if (element.type !== ELEMENT_TYPE.TABLE) {
     var size = [element.children.length, element.children[0].children.length];
-    return generateEmptyTable(editor, size);
+    return generateEmptyTable(editor, {
+      size: size
+    });
   }
   var newElement = _objectSpread({}, element);
   for (var i = 0; i < element.children.length; i++) {
@@ -937,4 +957,16 @@ export var normalizeTableELement = function normalizeTableELement(editor, elemen
     newElement.children[i] = row;
   }
   return newElement;
+};
+export var insertTableByTemplate = function insertTableByTemplate(editor, alternateColor) {
+  var size = [4, 4];
+  var tableNode = generateEmptyTable(editor, {
+    size: size,
+    alternate_highlight_color: alternateColor,
+    alternate_highlight: true
+  });
+  var path = Editor.path(editor, editor.selection);
+  Transforms.insertNodes(editor, tableNode, {
+    at: [path[0]]
+  });
 };

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

@@ -4,7 +4,6 @@ import { insertTable, isTableMenuDisabled } from '../../helpers';
 import { MENUS_CONFIG_MAP, ELEMENT_TYPE, INSERT_POSITION } from '../../../../constants';
 import TableSizePopover from '../../popover/table-size-popover';
 import ElementDropdownMenuItem from '../../../../commons/dropdown-menu-item';
-import { INTERNAL_EVENT } from '../../../../../constants';
 var TableMenu = function TableMenu(_ref) {
   var editor = _ref.editor,
     readonly = _ref.readonly,
@@ -14,11 +13,6 @@ var TableMenu = function TableMenu(_ref) {
   var createTable = useCallback(function (size) {
     insertTable(editor, size, editor.selection, INSERT_POSITION.CURRENT);
   }, [editor]);
-  var openDialog = useCallback(function () {
-    eventBus.dispatch(INTERNAL_EVENT.INSERT_ELEMENT, {
-      type: ELEMENT_TYPE.TABLE
-    });
-  }, [eventBus]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ElementDropdownMenuItem, {
     disabled: disabled,
     menuConfig: menuConfig,
@@ -26,11 +20,11 @@ var TableMenu = function TableMenu(_ref) {
   }, !disabled && /*#__PURE__*/React.createElement("i", {
     className: "sdocfont sdoc-right-slide sdoc-dropdown-item-right-icon"
   })), !disabled && /*#__PURE__*/React.createElement(TableSizePopover, {
+    editor: editor,
     target: menuConfig.id,
     trigger: "hover",
     placement: "right-start",
-    createTable: createTable,
-    openDialog: openDialog
+    createTable: createTable
   }));
 };
 export default withTranslation('sdoc-editor')(TableMenu);

package/dist/basic-sdk/extension/plugins/table/popover/table-size-popover/index.css

@@ -45,13 +45,20 @@
   margin-top: 5px;
 }
 
+.sdoc-selected-table-size-container .sdoc-selected-table-tools-container {
+  padding: 10px 0;
+  margin-bottom: 10px;
+  border-bottom: 1px solid #dedede;
+}
+
 .sdoc-selected-table-size-popover .sdoc-selected-table-size-custom {
-  min-height: 40px;
-  margin-top: 10px;
-  border-top: 1px solid #dedede;
-  padding: 8px 10px;
+  display: flex;
+  justify-content: space-between;
+  padding: 5px 10px 0;
+  min-height: 32px;
 }
 
 .sdoc-selected-table-size-popover .sdoc-selected-table-size-custom:hover {
   cursor: pointer;
+  background: #f5f5f5;
 }

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

@@ -3,25 +3,26 @@ import React, { useCallback, useRef, useState } from 'react';
 import classnames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { UncontrolledPopover } from 'reactstrap';
+import TableTemplate from '../table-template';
 import './index.css';
 var TableSizePopover = function TableSizePopover(_ref) {
-  var target = _ref.target,
+  var editor = _ref.editor,
+    target = _ref.target,
     _ref$trigger = _ref.trigger,
     trigger = _ref$trigger === void 0 ? 'legacy' : _ref$trigger,
     _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
     popperClassName = _ref.popperClassName,
-    createTable = _ref.createTable,
-    openDialog = _ref.openDialog;
-  var minSize = [4, 4];
+    createTable = _ref.createTable;
+  var minSize = [5, 10];
   var maxSize = [10, 10];
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useState = useState([4, 4]),
+  var _useState = useState([5, 10]),
     _useState2 = _slicedToArray(_useState, 2),
     displaySize = _useState2[0],
     setDisplaySize = _useState2[1];
-  var _useState3 = useState([0, 0]),
+  var _useState3 = useState([1, 1]),
     _useState4 = _slicedToArray(_useState3, 2),
     selectedSize = _useState4[0],
     setSelectedSize = _useState4[1];
@@ -85,7 +86,7 @@ var TableSizePopover = function TableSizePopover(_ref) {
   }, [displaySize, selectedSize]);
   return /*#__PURE__*/React.createElement(UncontrolledPopover, {
     target: target,
-    className: "sdoc-selected-table-size-popover sdoc-sub-dropdown-menu",
+    className: "sdoc-selected-table-size-popover sdoc-sub-dropdown-menu sdoc-dropdown-menu",
     trigger: trigger,
     placement: placement,
     hideArrow: true,
@@ -95,12 +96,19 @@ var TableSizePopover = function TableSizePopover(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "sdoc-selected-table-size-container w-100 h-100 d-flex flex-column"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-selected-table-size-tip w-100 "
-  }, "".concat(selectedSize[0], " x ").concat(selectedSize[1])), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-selected-table-tools-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "sdoc-table-template-review-btn",
+    className: "sdoc-selected-table-size-custom"
+  }, /*#__PURE__*/React.createElement("span", null, t('Table_template')), /*#__PURE__*/React.createElement("i", {
+    className: "sdocfont sdoc-right-slide sdoc-dropdown-item-right-icon"
+  }))), /*#__PURE__*/React.createElement("div", {
     className: "sdoc-table-size-select"
   }, renderTableSize()), /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-selected-table-size-custom",
-    onClick: openDialog
-  }, t('Customize_the_number_of_rows_and_columns'))));
+    className: "sdoc-selected-table-size-tip w-100 "
+  }, "".concat(selectedSize[0], " x ").concat(selectedSize[1])), /*#__PURE__*/React.createElement(TableTemplate, {
+    editor: editor,
+    targetId: "sdoc-table-template-review-btn"
+  })));
 };
 export default TableSizePopover;

package/dist/basic-sdk/extension/plugins/table/popover/table-template/index.css

@@ -0,0 +1,35 @@
+.sdoc-table-template-inner-popover {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 20px;
+  width: 430px;
+  height: 100%;
+  background-color: #fff;
+}
+
+.sdoc-table-template-view-table {
+  padding: 10px;
+  margin: 10px 5px;
+  border: 1px solid #e2e3e6;
+  cursor: pointer;
+}
+
+.sdoc-table-template-view-table .sdoc-table-template-row .sdoc-table-template-cell {
+  width: 40px;
+  height: 20px;
+  border-left: 1px solid #e2e3e6;
+  border-right: 1px solid #e2e3e6;
+}
+
+.sdoc-table-template-view-table .sdoc-table-template-row {
+  display: flex;
+}
+
+.sdoc-table-template-view-table .sdoc-table-template-row:first-child .sdoc-table-template-cell {
+  border: none;
+  border-top: 1px solid #e2e3e6;
+}
+
+.sdoc-table-template-view-table .sdoc-table-template-row:last-child .sdoc-table-template-cell {
+  border-bottom: 1px solid #e2e3e6;
+}

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

@@ -0,0 +1,33 @@
+import React, { useCallback, useMemo } from 'react';
+import { UncontrolledPopover } from 'reactstrap';
+import { TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP } from '../../constants';
+import SmapleTable from './sample-table';
+import { insertTableByTemplate } from '../../helpers';
+import './index.css';
+import '../../render/alternate-color.css';
+var TableTemplate = function TableTemplate(_ref) {
+  var editor = _ref.editor,
+    targetId = _ref.targetId;
+  var tableTemplatePreviewList = useMemo(function () {
+    return Reflect.ownKeys(TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP);
+  }, []);
+  var handleClickTemplate = useCallback(function (e, alternateColor) {
+    insertTableByTemplate(editor, alternateColor);
+  }, [editor]);
+  return /*#__PURE__*/React.createElement(UncontrolledPopover, {
+    target: targetId,
+    trigger: "hover",
+    placement: "right-start",
+    hideArrow: true,
+    fade: false,
+    className: "sdoc-sub-dropdown-menu sdoc-table-template-popover",
+    innerClassName: "sdoc-table-template-inner-popover"
+  }, tableTemplatePreviewList.map(function (alternateColor, index) {
+    return /*#__PURE__*/React.createElement(SmapleTable, {
+      key: alternateColor + index,
+      alternateColor: alternateColor,
+      onClickTemplate: handleClickTemplate
+    });
+  }));
+};
+export default TableTemplate;

package/dist/basic-sdk/extension/plugins/table/popover/table-template/sample-table.js

@@ -0,0 +1,33 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP } from '../../constants';
+import './index.css';
+var SmapleTable = function SmapleTable(_ref) {
+  var alternateColor = _ref.alternateColor,
+    onClickTemplate = _ref.onClickTemplate;
+  // generate table
+  var renderTableRow = useCallback(function (row, column) {
+    return new Array(row).fill(null).map(function (_, index) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "sdoc-table-template-row table-row",
+        key: "sdoc-template-table-row-".concat(index),
+        onClick: function onClick(e) {
+          return onClickTemplate(e, alternateColor);
+        }
+      }, new Array(column).fill(null).map(function (_, index) {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "sdoc-table-template-cell",
+          key: "sdoc-template-table-cell-".concat(index)
+        });
+      }));
+    });
+  }, [onClickTemplate, alternateColor]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-table-template-view-table ".concat(TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP[alternateColor])
+  }, renderTableRow(4, 4));
+};
+SmapleTable.proptoTypes = {
+  alternateColor: PropTypes.string.isRequired,
+  onClickTemplate: PropTypes.func.isRequired
+};
+export default SmapleTable;

package/dist/basic-sdk/extension/plugins/table/render/alternate-color.css

@@ -0,0 +1,37 @@
+/* type1 */
+.sdoc-table-3f495d .table-row:nth-child(2n + 1) {
+  background-color: #f1f3f6;
+}
+
+.sdoc-table-3f495d .table-row:first-child {
+  background-color: #3f495d;
+  color: white;
+}
+
+/* type2 */
+.sdoc-table-2367f2 .table-row:nth-child(2n + 1) {
+  background-color: #e1edff;
+}
+
+.sdoc-table-2367f2 .table-row:first-child {
+  background-color: #2367f2;
+  color: white;
+}
+
+/* type3 */
+.sdoc-table-f77d21 .table-row:nth-child(2n + 1) {
+  background-color: #fff1e8;
+}
+
+.sdoc-table-f77d21 .table-row:first-child {
+  background-color: #f77d21;
+}
+
+/* type4 */
+.sdoc-table-0099f4 .table-row:nth-child(2n + 1) {
+  background-color: #e1f5ff;
+}
+
+.sdoc-table-0099f4 .table-row:first-child {
+  background-color: #0099f4;
+}

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

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useRef, useState, useEffect, useCallback } from 'react';
@@ -5,7 +6,7 @@ import classnames from 'classnames';
 import throttle from 'lodash.throttle';
 import { useSelected, useSlateStatic, useReadOnly } from '@seafile/slate-react';
 import { Transforms, Editor } from '@seafile/slate';
-import { EMPTY_SELECTED_RANGE } from '../constants';
+import { EMPTY_SELECTED_RANGE, TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP } from '../constants';
 import { ResizeHandlersContext, TableSelectedRangeContext, SettingSelectRangeContext } from './hooks';
 import EventBus from '../../../../utils/event-bus';
 import { INTERNAL_EVENT } from '../../../../constants';
@@ -17,7 +18,9 @@ import TableRoot from './table-root';
 import TableHeader from './table-header';
 import { findPath } from '../../../core';
 import './index.css';
+import './alternate-color.css';
 var Table = function Table(_ref) {
+  var _element$style, _element$style2;
   var className = _ref.className,
     attributes = _ref.attributes,
     children = _ref.children,
@@ -181,7 +184,7 @@ var Table = function Table(_ref) {
     table: element,
     setSelectedRange: setSelectedRangeByClick
   }), /*#__PURE__*/React.createElement("div", {
-    className: tableContainerClassName,
+    className: classnames(tableContainerClassName, _defineProperty({}, TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP[element === null || element === void 0 ? void 0 : (_element$style = element.style) === null || _element$style === void 0 ? void 0 : _element$style.alternate_highlight_color], element === null || element === void 0 ? void 0 : (_element$style2 = element.style) === null || _element$style2 === void 0 ? void 0 : _element$style2.alternate_highlight)),
     onMouseDown: onMouseDown,
     ref: table,
     "data-id": element.id
@@ -197,7 +200,6 @@ function renderTable(props) {
       attributes = props.attributes,
       children = props.children,
       element = props.element;
-
     // eslint-disable-next-line react-hooks/rules-of-hooks
     var editor = useSlateStatic();
     return /*#__PURE__*/React.createElement(TableRoot, {

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

@@ -52,15 +52,6 @@ var InsertBlockMenu = function InsertBlockMenu(_ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, insertPosition, slateNode]);
-  var openTableDialog = useCallback(function () {
-    var eventBus = EventBus.getInstance();
-    eventBus.dispatch(INTERNAL_EVENT.INSERT_ELEMENT, {
-      type: ELEMENT_TYPE.TABLE,
-      insertPosition: insertPosition
-    });
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [insertPosition]);
   var onInsertList = useCallback(function (type) {
     toggleList(editor, type, insertPosition);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -82,12 +73,12 @@ var InsertBlockMenu = function InsertBlockMenu(_ref) {
   }, /*#__PURE__*/React.createElement("i", {
     className: "sdocfont sdoc-right-slide sdoc-dropdown-item-right-icon"
   }), /*#__PURE__*/React.createElement(TableSizePopover, {
+    editor: editor,
     target: "sdoc-side-menu-item-table",
     trigger: "hover",
     placement: "right-start",
     popperClassName: "sdoc-side-menu-table-size",
-    createTable: createTable,
-    openDialog: openTableDialog
+    createTable: createTable
   })), /*#__PURE__*/React.createElement(DropdownMenuItem, {
     menuConfig: _objectSpread({}, SIDE_INSERT_MENUS_CONFIG[ELEMENT_TYPE.LINK]),
     onClick: openLinkDialog

package/package.json

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

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

@@ -410,5 +410,6 @@
   "revision": "revision",
   "xxx_added_a_new_comment": "{{author}} added a new comment",
   "xxx_added_a_reply": "{{author}} added a reply",
-  "New": "New"
+  "New": "New",
+  "Table_template": "Table template"
 }

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

@@ -410,5 +410,6 @@
   "revision": "修订稿",
   "xxx_added_a_new_comment": "{{author}} 添加了一条新评论",
   "xxx_added_a_reply": "{{author}} 添加了一条回复",
-  "New": "新"
+  "New": "新",
+  "Table_template": "表格模板"
 }