@seafile/seafile-editor 0.3.80 → 0.3.81

package/dist/components/click-outside.js

@@ -0,0 +1,58 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+
+var ClickOutside = /*#__PURE__*/function (_React$Component) {
+  _inherits(ClickOutside, _React$Component);
+
+  var _super = _createSuper(ClickOutside);
+
+  function ClickOutside(props) {
+    var _this;
+
+    _classCallCheck(this, ClickOutside);
+
+    _this = _super.call(this, props);
+
+    _this.handleDocumentMouseDown = function () {
+      if (_this.isClickedInside) {
+        _this.isClickedInside = false;
+        return;
+      }
+
+      _this.props.clickOutside();
+    };
+
+    _this.handleMouseDown = function (e) {
+      _this.isClickedInside = true;
+    };
+
+    _this.isClickedInside = false;
+    return _this;
+  }
+
+  _createClass(ClickOutside, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      document.addEventListener('mousedown', this.handleDocumentMouseDown);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener('mousedown', this.handleDocumentMouseDown);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return React.cloneElement(React.Children.only(this.props.children), {
+        onMouseDownCapture: this.handleMouseDown
+      });
+    }
+  }]);
+
+  return ClickOutside;
+}(React.Component);
+
+export default ClickOutside;

package/dist/components/table-button.js

@@ -0,0 +1,156 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import ClickOutside from './click-outside';
+import IconButton from './topbar-component/icon-button';
+
+var TableButton = /*#__PURE__*/function (_Component) {
+  _inherits(TableButton, _Component);
+
+  var _super = _createSuper(TableButton);
+
+  function TableButton(props) {
+    var _this;
+
+    _classCallCheck(this, TableButton);
+
+    _this = _super.call(this, props);
+
+    _this.toggleCard = function () {
+      _this.setState({
+        showCard: !_this.state.showCard,
+        columnCount: -1,
+        rowCount: -1
+      });
+    };
+
+    _this.createTableCells = function () {
+      var rows = [];
+      var _this$state = _this.state,
+          columnCount = _this$state.columnCount,
+          rowCount = _this$state.rowCount,
+          currentMaxColumnCount = _this$state.currentMaxColumnCount,
+          currentMaxRowCount = _this$state.currentMaxRowCount;
+
+      var _loop = function _loop(rowIndex) {
+        var cells = [];
+
+        var _loop2 = function _loop2(columnIndex) {
+          var isActive = columnIndex <= columnCount - 1 && rowIndex <= rowCount - 1;
+          var vDom = /*#__PURE__*/React.createElement("div", {
+            onMouseEnter: function onMouseEnter() {
+              return _this.onTableCellMouseEnter(rowIndex, columnIndex);
+            },
+            key: "table-row-".concat(rowIndex, "-").concat(columnIndex),
+            className: "sf-editor-table-card-cell ".concat(isActive ? 'sf-editor-table-card-active-cell' : '')
+          });
+          cells.push(vDom);
+        };
+
+        for (var columnIndex = 0; columnIndex < currentMaxColumnCount; columnIndex++) {
+          _loop2(columnIndex);
+        }
+
+        var row = /*#__PURE__*/React.createElement("div", {
+          key: "table-row-".concat(rowIndex),
+          className: "sf-editor-table-card-row"
+        }, cells);
+        rows.push(row);
+      };
+
+      for (var rowIndex = 0; rowIndex < currentMaxRowCount; rowIndex++) {
+        _loop(rowIndex);
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        onClick: function onClick(event) {
+          return _this.onAddTable(event, rowCount, columnCount);
+        },
+        className: "sf-editor-table-card"
+      }, rows);
+    };
+
+    _this.onAddTable = function (event, rowCount, columnCount) {
+      _this.props.onAddTable(event, rowCount, columnCount);
+
+      _this.toggleCard();
+    };
+
+    _this.onTableCellMouseEnter = function (rowIndex, columnIndex) {
+      var _this$state2 = _this.state,
+          currentMaxColumnCount = _this$state2.currentMaxColumnCount,
+          currentMaxRowCount = _this$state2.currentMaxRowCount;
+
+      if (columnIndex >= currentMaxColumnCount - 2 && currentMaxColumnCount < _this.maxColumnCount) {
+        currentMaxColumnCount += 1;
+      } else if (columnIndex < currentMaxColumnCount - 1 && currentMaxColumnCount > 4) {
+        currentMaxColumnCount -= 1;
+      }
+
+      if (rowIndex >= currentMaxRowCount - 2 && currentMaxRowCount < _this.maxRowCount) {
+        currentMaxRowCount += 1;
+      } else if (rowIndex < currentMaxRowCount - 1 && currentMaxRowCount > 4) {
+        currentMaxRowCount -= 1;
+      }
+
+      _this.setState({
+        columnCount: columnIndex + 1,
+        rowCount: rowIndex + 1,
+        currentMaxColumnCount: currentMaxColumnCount,
+        currentMaxRowCount: currentMaxRowCount
+      });
+    };
+
+    _this.state = {
+      showCard: false,
+      currentMaxColumnCount: 4,
+      currentMaxRowCount: 4,
+      columnCount: -1,
+      rowCount: -1
+    };
+    _this.maxColumnCount = 10;
+    _this.maxRowCount = 10;
+    return _this;
+  }
+
+  _createClass(TableButton, [{
+    key: "createTableScaleCard",
+    value: function createTableScaleCard(props) {
+      var _this$state3 = this.state,
+          columnCount = _this$state3.columnCount,
+          rowCount = _this$state3.rowCount;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "sf-editor-table-count-card"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "sf-editor-table-cells-header"
+      }, "".concat(columnCount < 0 ? 0 : columnCount, " x ").concat(rowCount < 0 ? 0 : rowCount)), this.createTableCells());
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          disabled = _this$props.disabled,
+          isRichEditor = _this$props.isRichEditor,
+          text = _this$props.text;
+      var showCard = this.state.showCard;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "sf-editor-table-btn-wrapper"
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        disabled: disabled,
+        isRichEditor: isRichEditor,
+        text: text,
+        id: 'tableButton',
+        icon: 'iconfont icon-table',
+        onMouseDown: this.toggleCard
+      }), showCard && /*#__PURE__*/React.createElement(ClickOutside, {
+        clickOutside: this.toggleCard
+      }, this.createTableScaleCard()));
+    }
+  }]);
+
+  return TableButton;
+}(Component);
+
+export default TableButton;

package/dist/components/toolbar.js

@@ -6,6 +6,7 @@ import React from 'react';
 import HeaderList from '../components/topbar-component/header-list';
 import ButtonGroup from '../components/topbar-component/button-group';
 import IconButton from '../components/topbar-component/icon-button';
+import TableButton from '../components/table-button';
 import { withTranslation } from 'react-i18next';
 import AddLinkDialog from './add-link-dialog';
 import AddImageDialog from './add-image-dialog';
@@ -168,13 +169,13 @@ var ToolBar = /*#__PURE__*/function (_React$Component) {
           return _this2.editorUtils.onClickBlock(event, 'code_block');
         },
         isActive: isCodeActive && !readOnly
-      }), /*#__PURE__*/React.createElement(IconButton, {
+      }), /*#__PURE__*/React.createElement(TableButton, {
         disabled: isFormulaActive || isCodeActive || isTableActive || isHeadActive,
         isRichEditor: true,
         text: t('insert_table'),
         id: 'tableButton',
         icon: 'iconfont icon-table',
-        onMouseDown: this.editorUtils.onAddTable
+        onAddTable: this.editorUtils.onAddTable
       }), window.canInsertFormula && /*#__PURE__*/React.createElement(IconButton, {
         disabled: isFormulaActive || isCodeActive || isTableActive || isHeadActive || isListActive,
         isRichEditor: true,

package/dist/css/topbar.css

@@ -102,6 +102,58 @@
   margin-left:10px;
 }
 
+.sf-editor-table-btn-wrapper {
+  position: relative;
+}
+
+.sf-editor-table-count-card {
+  background-color: #ffffff;
+  min-width: 100px;
+  min-height: 100px;
+  position: absolute;
+  top: 101%;
+  left: 0;
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
+  border: 1px solid rgba(0, 40, 100, 0.12);
+  z-index: 100;
+  padding: 5px 10px 10px 10px;
+  border-radius: 2px;
+}
+
+.sf-editor-table-cells-header {
+  text-align: center;
+  height: 20px;
+  font-size: 14px;
+}
+
+.sf-editor-table-card {
+  margin-top: 5px;
+}
+
+.sf-editor-table-card-row {
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid #cccccc;
+}
+
+.sf-editor-table-card-row:first-child {
+  border-top: 1px solid #cccccc;
+}
+
+.sf-editor-table-card-cell {
+  border-right: 1px solid #cccccc;
+  width: 20px;
+  height: 15px;
+}
+
+.sf-editor-table-card-row .sf-editor-table-card-cell:first-child {
+  border-left: 1px solid #cccccc;
+}
+
+.sf-editor-table-card-active-cell {
+  background-color: #ffa94d;
+}
+
 /*topbar style*/
 
 .menu {

package/dist/editor/controller/block-element-controller.js

@@ -347,7 +347,7 @@ var withBlock = function withBlock(editor) {
         break;
 
       case 'insert_table':
-        tableUtils.insertTable();
+        tableUtils.insertTable(data);
         break;
 
       case 'remove_table':
@@ -378,6 +378,14 @@ var withBlock = function withBlock(editor) {
         tableUtils.exitTable();
         break;
 
+      case 'focus_next_table_cell':
+        tableUtils.focusNextTableCell();
+        break;
+
+      case 'focus_previous_table_cell':
+        tableUtils.focusPreviousTableCell();
+        break;
+
       case 'insert_formula':
         formulaUtils.insertFormula(command.data);
         break;

package/dist/editor/editor-plugin.js

@@ -65,6 +65,12 @@ var Plugin = function Plugin(_editor) {
           type: "unwrap_".concat(type)
         });
       }
+
+      if (_this.tableUtils.isInTable()) {
+        _this.editor.exec({
+          type: 'focus_previous_table_cell'
+        });
+      }
     }
 
     if (isHotKey('mod+s', event)) {
@@ -86,6 +92,12 @@ var Plugin = function Plugin(_editor) {
           type: 'increase_list_item_depth'
         });
       }
+
+      if (_this.tableUtils.isInTable()) {
+        _this.editor.exec({
+          type: 'focus_next_table_cell'
+        });
+      }
     }
 
     if (isHotKey('mod+b', event)) {

package/dist/editor/editor-utils/block-element-utils/table-utils.js

@@ -2,7 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import { SfEditor } from '../../custom/custom';
-import { Node } from 'slate';
+import { Node, Editor } from 'slate';
 import { generateTable, generateTableRow, generateTableCell } from '../../element-model/table';
 import getEventTransfer from '../../custom/get-event-transfer';
 import { htmlDeserializer } from '../../../utils/deserialize-html';
@@ -28,8 +28,67 @@ var TableUtils = function TableUtils(_editor) {
     return false;
   };
 
-  this.insertTable = function () {
-    var tableElement = generateTable();
+  this.focusNextTableCell = function () {
+    var position = _this.getTablePosition();
+
+    var rowIndex = position.rowIndex,
+        cellIndex = position.cellIndex,
+        row = position.row,
+        table = position.table;
+    var nextCellIndex, nextRowIndex;
+
+    if (cellIndex < row.children.length - 1) {
+      nextCellIndex = cellIndex + 1;
+      nextRowIndex = rowIndex;
+    } else {
+      if (rowIndex < table.children.length - 1) {
+        nextCellIndex = 0;
+        nextRowIndex = rowIndex + 1;
+      } else {
+        _this.insertRow();
+
+        nextCellIndex = 0;
+        nextRowIndex = rowIndex + 1;
+      }
+    }
+
+    _this.selectCellByPosition(nextRowIndex, nextCellIndex);
+  };
+
+  this.focusPreviousTableCell = function () {
+    var position = _this.getTablePosition();
+
+    var rowIndex = position.rowIndex,
+        cellIndex = position.cellIndex,
+        row = position.row;
+    var nextCellIndex, nextRowIndex;
+
+    if (cellIndex > 0) {
+      nextCellIndex = cellIndex - 1;
+      nextRowIndex = rowIndex;
+    } else {
+      if (rowIndex > 0) {
+        nextRowIndex = rowIndex - 1;
+        nextCellIndex = row.children.length - 1;
+      } else {
+        nextCellIndex = 0;
+        nextRowIndex = 0;
+      }
+    }
+
+    _this.selectCellByPosition(nextRowIndex, nextCellIndex);
+  };
+
+  this.selectCellByPosition = function (rowIndex, cellIndex) {
+    var _this$getTablePositio = _this.getTablePosition(),
+        tablePath = _this$getTablePositio.tablePath;
+
+    var cellRange = Editor.range(_this.editor, [].concat(_toConsumableArray(tablePath), [rowIndex, cellIndex]));
+    Editor.select(_this.editor, cellRange.focus);
+  };
+
+  this.insertTable = function (data) {
+    var tableElement = generateTable(data);
     SfEditor.insertNodes(_this.editor, tableElement); // get the first cell path of the table and move selection to it;
 
     var table = SfEditor.match(_this.editor, _this.editor.selection, {

package/dist/editor/editor-utils/common-editor-utils.js

@@ -417,11 +417,15 @@ var EditorUtils = /*#__PURE__*/function () {
       });
     };
 
-    this.onAddTable = function (event) {
+    this.onAddTable = function (event, rowCount, columnCount) {
       event.preventDefault();
 
       _this.editor.exec({
-        type: 'insert_table'
+        type: 'insert_table',
+        data: {
+          rowCount: rowCount,
+          columnCount: columnCount
+        }
       });
     };
 

package/dist/editor/element-model/table.js

@@ -6,7 +6,20 @@ var Table = function Table() {
   _classCallCheck(this, Table);
 
   this.type = options.type || 'table';
-  this.children = options.children || [generateTableRow(), generateTableRow()];
+  var rowCount = options.rowCount,
+      columnCount = options.columnCount;
+  var children = options.children;
+
+  if (rowCount) {
+    var list = new Array(rowCount).fill('');
+    children = list.map(function () {
+      return generateTableRow({
+        columnCount: columnCount
+      });
+    });
+  }
+
+  this.children = children;
 };
 
 var TableRow = function TableRow() {
@@ -15,7 +28,17 @@ var TableRow = function TableRow() {
   _classCallCheck(this, TableRow);
 
   this.type = options.type || 'table_row';
-  this.children = options.children || [generateTableCell(), generateTableCell()];
+  var columnCount = options.columnCount;
+  var children = options.children;
+
+  if (columnCount) {
+    var list = new Array(columnCount).fill('');
+    children = list.map(function () {
+      return generateTableCell();
+    });
+  }
+
+  this.children = children;
 };
 
 var TableCell = function TableCell() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/seafile-editor",
-  "version": "0.3.80",
+  "version": "0.3.81",
   "private": false,
   "dependencies": {
     "@seafile/slate-react": "^0.54.13",