@seafile/seafile-editor 0.3.80 → 0.3.84

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,155 @@
+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 columnCount = columnIndex + 1,
+          rowCount = rowIndex + 1;
+      var currentMaxRowCount = rowCount + 1,
+          currentMaxColumnCount = columnCount + 1;
+
+      if (currentMaxColumnCount > 10) {
+        currentMaxColumnCount = 10;
+      } else if (currentMaxColumnCount < 4) {
+        currentMaxColumnCount = 4;
+      }
+
+      if (currentMaxRowCount > 10) {
+        currentMaxRowCount = 10;
+      } else if (currentMaxRowCount < 4) {
+        currentMaxRowCount = 4;
+      }
+
+      _this.setState({
+        columnCount: columnCount,
+        rowCount: rowCount,
+        currentMaxColumnCount: currentMaxColumnCount,
+        currentMaxRowCount: currentMaxRowCount
+      });
+    };
+
+    _this.state = {
+      showCard: false,
+      currentMaxColumnCount: 4,
+      currentMaxRowCount: 4,
+      columnCount: -1,
+      rowCount: -1
+    };
+    return _this;
+  }
+
+  _createClass(TableButton, [{
+    key: "createTableScaleCard",
+    value: function createTableScaleCard(props) {
+      var _this$state2 = this.state,
+          columnCount = _this$state2.columnCount,
+          rowCount = _this$state2.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/richeditor/image.css

@@ -98,44 +98,41 @@
   display: inline;
 }
 
-.big-image-cover {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 1049;
-  text-align: center;
+/* set button font style in image previewer */
+.sf-editor-image-previewer .dtable-icon-left {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-.big-image-container {
-  position: absolute;
-  width: 100%;
-  top: 50px;
-  bottom: 0;
-  overflow-y: auto;
-  padding: 0 30px 10px 30px;
+.sf-editor-image-previewer .dtable-icon-left:before {
+  content: "\e756";
 }
 
-.big-image-cover .image-container-close {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  border-radius: 50%;
-  height: 20px;
-  width: 20px;
-  z-index: 10000;
-  font-size: 20px;
-  color: hsla(0,0%,100%,.6);
-  line-height: 26px;
-  text-align: center;
+.sf-editor-image-previewer .dtable-icon-right {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: normal;
 }
 
-.image-container-close:hover {
-  color: #fff;
+.sf-editor-image-previewer .dtable-icon-right:before {
+  content: "\e755";
 }
 
-.big-image-cover img{
-  max-width: 100%;
+.sf-editor-image-previewer button.dtable-icon-fork-number {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: normal;
+}
+
+.sf-editor-image-previewer .dtable-icon-fork-number:before {
+  content: "\e6ce";
 }

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;