@seafile/sdoc-editor 2.0.82 → 2.0.83

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

@@ -0,0 +1,244 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/callSuper"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _reactI18next = require("react-i18next");
+var _constants = require("../../../../../constants");
+var _eventBus = _interopRequireDefault(require("../../../../../utils/event-bus"));
+var _KebabToCamel = _interopRequireDefault(require("../../../../../utils/Kebab-to-camel"));
+var _objectUtils = _interopRequireDefault(require("../../../../../utils/object-utils"));
+var _commons = require("../../../../commons");
+var _constants2 = require("../../../../constants");
+var _core = require("../../../../core");
+var _constants3 = require("../../constants");
+var _helpers = require("../../helpers");
+var _colorSelectorPopover = _interopRequireDefault(require("../color-selector-popover"));
+var _horizontalAlignPopover = _interopRequireDefault(require("../horizontal-align-popover"));
+var _verticalAlignPopover = _interopRequireDefault(require("../vertical-align-popover"));
+var _insertTableElement = _interopRequireDefault(require("./insert-table-element"));
+require("./index.css");
+var TableContextMenu = /*#__PURE__*/function (_React$Component) {
+  function TableContextMenu(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, TableContextMenu);
+    _this = (0, _callSuper2["default"])(this, TableContextMenu, [props]);
+    (0, _defineProperty2["default"])(_this, "updateMenuPosition", function () {
+      var menuHeight = _this.menu.offsetHeight;
+
+      // get height of context menu when the menu is drawing completed in this page
+      if (menuHeight === 0) {
+        requestAnimationFrame(_this.updateMenuPosition);
+        return;
+      }
+      var top = 0;
+      if (_this.position.top + menuHeight > document.body.clientHeight) {
+        top = document.body.clientHeight - menuHeight - 5;
+      } else {
+        top = _this.position.top;
+      }
+      var left = _this.position.left + 3;
+      _this.setState({
+        contextStyle: {
+          top: top,
+          left: left
+        }
+      });
+    });
+    (0, _defineProperty2["default"])(_this, "insertTableElement", function (type, position, count) {
+      var editor = _this.props.editor;
+      (0, _helpers.insertTableElement)(editor, type, position, count);
+    });
+    (0, _defineProperty2["default"])(_this, "removeTableElements", function (type) {
+      var editor = _this.props.editor;
+      (0, _helpers.removeTableElement)(editor, type);
+    });
+    (0, _defineProperty2["default"])(_this, "renderRemoveBtn", function (type, title) {
+      return /*#__PURE__*/_react["default"].createElement("button", {
+        onMouseDown: _this.removeTableElements.bind(_this, type),
+        className: "dropdown-item"
+      }, _this.props.t(title));
+    });
+    (0, _defineProperty2["default"])(_this, "combineCells", function () {
+      var editor = _this.props.editor;
+      (0, _helpers.combineCells)(editor);
+    });
+    (0, _defineProperty2["default"])(_this, "toggleSplitCellSettingDialog", function () {
+      _this.eventBus.dispatch(_constants.INTERNAL_EVENT.INSERT_ELEMENT, {
+        type: _constants2.ELEMENT_TYPE.TABLE_CELL
+      });
+    });
+    _this.state = {
+      contextStyle: {},
+      isDisableFitTableWidthToScreen: false
+    };
+    _this.position = null;
+    _this.eventBus = _eventBus["default"].getInstance();
+    _this.horizontalAlignRef = /*#__PURE__*/_react["default"].createRef();
+    _this.verticalAlignRef = /*#__PURE__*/_react["default"].createRef();
+    _this.colorSelectorRef = /*#__PURE__*/_react["default"].createRef();
+    return _this;
+  }
+  (0, _inherits2["default"])(TableContextMenu, _React$Component);
+  return (0, _createClass2["default"])(TableContextMenu, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.position = this.props.contextMenuPosition;
+      this.updateMenuPosition();
+    }
+  }, {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      var nextContextMenuPosition = nextProps.contextMenuPosition;
+      if (!_objectUtils["default"].isSameObject(nextContextMenuPosition, this.props.contextMenuPosition)) {
+        this.position = nextContextMenuPosition;
+        this.updateMenuPosition();
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.menu = null;
+    }
+  }, {
+    key: "isMergedCell",
+    value: function isMergedCell() {
+      var editor = this.props.editor;
+      var _getSelectedNodeByTyp = (0, _core.getSelectedNodeByType)(editor, _constants2.ELEMENT_TYPE.TABLE_CELL),
+        colspan = _getSelectedNodeByTyp.colspan,
+        rowspan = _getSelectedNodeByTyp.rowspan;
+      return colspan > 1 || rowspan > 1;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _tableCellNode$style,
+        _tableCellNode$style2,
+        _this2 = this;
+      var _this$state = this.state,
+        contextStyle = _this$state.contextStyle,
+        isDisableFitTableWidthToScreen = _this$state.isDisableFitTableWidthToScreen;
+      var _this$props = this.props,
+        editor = _this$props.editor,
+        t = _this$props.t,
+        readonly = _this$props.readonly;
+      var currentTable = (0, _core.getSelectedNodeByType)(editor, _constants2.ELEMENT_TYPE.TABLE);
+      if (!currentTable) return null;
+      var currentRow = (0, _core.getSelectedNodeByType)(editor, _constants2.ELEMENT_TYPE.TABLE_ROW);
+      var currentRowsCount = currentTable.children.length;
+      var currentColumnsCount = currentRow.children.length;
+      var tableSelectedRange = editor.tableSelectedRange;
+      var selectedRows = tableSelectedRange.maxRowIndex - tableSelectedRange.minRowIndex + 1;
+      var selectedCols = tableSelectedRange.maxColIndex - tableSelectedRange.minColIndex + 1;
+      var canAddRowsCount = currentRowsCount + selectedRows > _constants3.TABLE_MAX_ROWS ? _constants3.TABLE_MAX_ROWS - currentRowsCount : selectedRows;
+      var canAddColsCount = currentColumnsCount + selectedCols > _constants3.TABLE_MAX_COLUMNS ? _constants3.TABLE_MAX_COLUMNS - currentColumnsCount : selectedCols;
+      var enableCombineCell = !_objectUtils["default"].isSameObject(tableSelectedRange, _constants3.EMPTY_SELECTED_RANGE);
+      var enableSplitCell = !enableCombineCell;
+      var isMergedCell = this.isMergedCell();
+      var tableCellNode = (0, _core.getSelectedNodeByType)(editor, _constants2.ELEMENT_TYPE.TABLE_CELL);
+      var horizontalAlign = tableCellNode === null || tableCellNode === void 0 ? void 0 : (_tableCellNode$style = tableCellNode.style) === null || _tableCellNode$style === void 0 ? void 0 : _tableCellNode$style[_constants3.TABLE_CELL_STYLE.TEXT_ALIGN];
+      var verticalAlign = tableCellNode === null || tableCellNode === void 0 ? void 0 : (_tableCellNode$style2 = tableCellNode.style) === null || _tableCellNode$style2 === void 0 ? void 0 : _tableCellNode$style2[(0, _KebabToCamel["default"])(_constants3.TABLE_CELL_STYLE.ALIGN_ITEMS)];
+      // Check if the table width is fit to screen
+      // Use queueMicrotask to resolve the issue that the table cell combined or split, the table width is not updated immediately
+      queueMicrotask(function () {
+        var isDisable = (0, _helpers.isTableWidthFitScreen)(editor);
+        if (isDisableFitTableWidthToScreen !== isDisable) {
+          _this2.setState({
+            isDisableFitTableWidthToScreen: (0, _helpers.isTableWidthFitScreen)(editor)
+          });
+        }
+      });
+      return /*#__PURE__*/_react["default"].createElement(_commons.ElementPopover, {
+        className: "sdoc-context-menu"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        style: contextStyle,
+        ref: function ref(_ref) {
+          return _this2.menu = _ref;
+        },
+        className: "sdoc-table-context-menu dropdown-menu"
+      }, /*#__PURE__*/_react["default"].createElement(_insertTableElement["default"], {
+        type: _constants3.TABLE_ELEMENT.ROW,
+        count: canAddRowsCount,
+        currentCount: currentRowsCount,
+        position: _constants3.TABLE_ELEMENT_POSITION.BEFORE,
+        insertTableElement: this.insertTableElement
+      }), /*#__PURE__*/_react["default"].createElement(_insertTableElement["default"], {
+        type: _constants3.TABLE_ELEMENT.ROW,
+        count: canAddRowsCount,
+        currentCount: currentRowsCount,
+        position: _constants3.TABLE_ELEMENT_POSITION.AFTER,
+        insertTableElement: this.insertTableElement
+      }), /*#__PURE__*/_react["default"].createElement(_insertTableElement["default"], {
+        type: _constants3.TABLE_ELEMENT.COLUMN,
+        count: canAddColsCount,
+        currentCount: currentColumnsCount,
+        position: _constants3.TABLE_ELEMENT_POSITION.BEFORE,
+        insertTableElement: this.insertTableElement
+      }), /*#__PURE__*/_react["default"].createElement(_insertTableElement["default"], {
+        type: _constants3.TABLE_ELEMENT.COLUMN,
+        count: canAddColsCount,
+        currentCount: currentColumnsCount,
+        position: _constants3.TABLE_ELEMENT_POSITION.AFTER,
+        insertTableElement: this.insertTableElement
+      }), /*#__PURE__*/_react["default"].createElement("div", {
+        className: 'seafile-divider dropdown-divider'
+      }), this.renderRemoveBtn(_constants3.TABLE_ELEMENT.ROW, 'Delete_row'), this.renderRemoveBtn(_constants3.TABLE_ELEMENT.COLUMN, 'Delete_column'), this.renderRemoveBtn(_constants3.TABLE_ELEMENT.TABLE, 'Delete_table'), /*#__PURE__*/_react["default"].createElement("div", {
+        className: 'seafile-divider dropdown-divider'
+      }), /*#__PURE__*/_react["default"].createElement("button", {
+        className: "dropdown-item",
+        disabled: !enableCombineCell,
+        onMouseDown: this.combineCells
+      }, t('Combine_cell')), /*#__PURE__*/_react["default"].createElement("button", {
+        className: "dropdown-item",
+        disabled: !isMergedCell || !enableSplitCell,
+        onMouseDown: this.toggleSplitCellSettingDialog
+      }, t('Split_cell')), /*#__PURE__*/_react["default"].createElement("button", {
+        ref: this.horizontalAlignRef,
+        className: "dropdown-item side-extendable"
+      }, /*#__PURE__*/_react["default"].createElement("span", null, t('Horizontal_align')), /*#__PURE__*/_react["default"].createElement("i", {
+        className: "sdocfont sdoc-right-slide"
+      })), this.horizontalAlignRef.current && /*#__PURE__*/_react["default"].createElement(_horizontalAlignPopover["default"], {
+        target: this.horizontalAlignRef,
+        editor: editor,
+        readonly: readonly,
+        horizontalAlign: horizontalAlign
+      }), /*#__PURE__*/_react["default"].createElement("button", {
+        ref: this.verticalAlignRef,
+        className: "dropdown-item side-extendable"
+      }, /*#__PURE__*/_react["default"].createElement("span", null, t('Vertical_align')), /*#__PURE__*/_react["default"].createElement("i", {
+        className: "sdocfont sdoc-right-slide"
+      })), this.verticalAlignRef.current && /*#__PURE__*/_react["default"].createElement(_verticalAlignPopover["default"], {
+        target: this.verticalAlignRef,
+        editor: editor,
+        readonly: readonly,
+        verticalAlign: verticalAlign
+      }), /*#__PURE__*/_react["default"].createElement("button", {
+        ref: this.colorSelectorRef,
+        className: "dropdown-item side-extendable"
+      }, /*#__PURE__*/_react["default"].createElement("span", null, t('Background_color')), /*#__PURE__*/_react["default"].createElement("i", {
+        className: "sdocfont sdoc-right-slide"
+      })), this.colorSelectorRef.current && /*#__PURE__*/_react["default"].createElement(_colorSelectorPopover["default"], {
+        target: this.colorSelectorRef,
+        editor: editor,
+        readonly: readonly
+      }), /*#__PURE__*/_react["default"].createElement("div", {
+        className: 'seafile-divider dropdown-divider'
+      }), /*#__PURE__*/_react["default"].createElement("button", {
+        className: "dropdown-item",
+        disabled: isDisableFitTableWidthToScreen,
+        onMouseDown: function onMouseDown() {
+          return (0, _helpers.fitTableColumnToScreen)(editor);
+        }
+      }, t('Fit_table_to_page_width'))));
+    }
+  }]);
+}(_react["default"].Component);
+var _default = exports["default"] = (0, _reactI18next.withTranslation)('sdoc-editor')(TableContextMenu);

package/dist/extension/plugins/table/menu/table-context-menu/insert-table-element.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/callSuper"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var _isHotkey = _interopRequireDefault(require("is-hotkey"));
+var _constants = require("../../constants");
+var InsertTableElement = /*#__PURE__*/function (_Component) {
+  function InsertTableElement(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, InsertTableElement);
+    _this = (0, _callSuper2["default"])(this, InsertTableElement, [props]);
+    (0, _defineProperty2["default"])(_this, "insertTableElement", function () {
+      var _this$props = _this.props,
+        type = _this$props.type,
+        position = _this$props.position;
+      var count = _this.state.count;
+      _this.props.insertTableElement(type, position, count);
+    });
+    (0, _defineProperty2["default"])(_this, "getTip", function () {
+      var _this$props2 = _this.props,
+        type = _this$props2.type,
+        position = _this$props2.position,
+        t = _this$props2.t;
+      if (type === _constants.TABLE_ELEMENT.ROW) {
+        return position === _constants.TABLE_ELEMENT_POSITION.AFTER ? t('Insert_below') : t('Insert_above');
+      }
+      return position === _constants.TABLE_ELEMENT_POSITION.AFTER ? t('Insert_on_the_right') : t('Insert_on_the_left');
+    });
+    (0, _defineProperty2["default"])(_this, "onKeyDown", function (event) {
+      if ((0, _isHotkey["default"])('enter', event)) {
+        event.preventDefault();
+        _this.insertTableElement();
+        return;
+      }
+    });
+    (0, _defineProperty2["default"])(_this, "onChange", function (event) {
+      var value = event.target.value || '0';
+      var newValue = value ? value.replace(/[^\d,]/g, '') : value;
+      if (newValue === _this.state.count) return;
+      var currentCount = _this.props.currentCount;
+      var numberValue = parseInt(newValue);
+      if (currentCount + numberValue > _this.maxCount) {
+        _this.setState({
+          count: _this.maxCount - currentCount
+        });
+        return;
+      }
+      _this.setState({
+        count: numberValue
+      });
+    });
+    _this.state = {
+      count: props.count || 1
+    };
+    _this.maxCount = props.type === _constants.TABLE_ELEMENT.ROW ? _constants.TABLE_MAX_ROWS : _constants.TABLE_MAX_COLUMNS;
+    return _this;
+  }
+  (0, _inherits2["default"])(InsertTableElement, _Component);
+  return (0, _createClass2["default"])(InsertTableElement, [{
+    key: "render",
+    value: function render() {
+      var count = this.state.count;
+      var _this$props3 = this.props,
+        t = _this$props3.t,
+        type = _this$props3.type,
+        currentCount = _this$props3.currentCount;
+      var isDisabled = currentCount >= this.maxCount;
+      return /*#__PURE__*/_react["default"].createElement("button", {
+        onMouseDown: this.insertTableElement,
+        className: "dropdown-item d-flex align-items-center justify-content-between",
+        disabled: isDisabled
+      }, this.getTip(), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "insert-number d-flex align-items-center"
+      }, /*#__PURE__*/_react["default"].createElement(_reactstrap.Input, {
+        disabled: isDisabled,
+        className: "insert-number-input",
+        onMouseDown: function onMouseDown(e) {
+          e.stopPropagation();
+        },
+        onKeyDown: this.onKeyDown,
+        value: count,
+        onChange: this.onChange
+      }), /*#__PURE__*/_react["default"].createElement("span", null, type === _constants.TABLE_ELEMENT.ROW ? t('Row(s)') : t('Column(s)'))));
+    }
+  }]);
+}(_react.Component);
+var _default = exports["default"] = (0, _reactI18next.withTranslation)('sdoc-editor')(InsertTableElement);

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

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _dropdownMenuItem = _interopRequireDefault(require("../../../../commons/dropdown-menu-item"));
+var _constants = require("../../../../constants");
+var _helpers = require("../../helpers");
+var _tableSizePopover = _interopRequireDefault(require("../../popover/table-size-popover"));
+var TableMenu = function TableMenu(_ref) {
+  var editor = _ref.editor,
+    readonly = _ref.readonly,
+    eventBus = _ref.eventBus;
+  var disabled = (0, _helpers.isTableMenuDisabled)(editor, readonly);
+  var menuConfig = _constants.MENUS_CONFIG_MAP[_constants.ELEMENT_TYPE.TABLE];
+  var createTable = (0, _react.useCallback)(function (size) {
+    var insertPosition = (0, _helpers.getInsertPosition)(editor, _constants.INSERT_POSITION.AFTER);
+    (0, _helpers.insertTable)(editor, size, editor.selection, insertPosition);
+  }, [editor]);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
+    disabled: disabled,
+    menuConfig: menuConfig,
+    className: "pr-2"
+  }, !disabled && /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont sdoc-right-slide sdoc-dropdown-item-right-icon"
+  })), !disabled && /*#__PURE__*/_react["default"].createElement(_tableSizePopover["default"], {
+    editor: editor,
+    target: menuConfig.id,
+    trigger: "hover",
+    placement: "right-start",
+    createTable: createTable
+  }));
+};
+var _default = exports["default"] = (0, _reactI18next.withTranslation)('sdoc-editor')(TableMenu);

package/dist/extension/plugins/table/menu/vertical-align-popover/index.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _KebabToCamel = _interopRequireDefault(require("../../../../../utils/Kebab-to-camel"));
+var _core = require("../../../../core");
+var _constants = require("../../constants");
+var _helpers = require("../../helpers");
+require("./style.css");
+var VerticalAlignPopover = function VerticalAlignPopover(_ref) {
+  var target = _ref.target,
+    editor = _ref.editor,
+    readonly = _ref.readonly,
+    verticalAlign = _ref.verticalAlign;
+  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
+    t = _useTranslation.t;
+  var setVerticalAlignStyle = (0, _react.useCallback)(function (position) {
+    if (readonly) return;
+    var alignItems = (0, _KebabToCamel["default"])(_constants.TABLE_CELL_STYLE.ALIGN_ITEMS);
+    (0, _helpers.setCellStyle)(editor, (0, _defineProperty2["default"])({}, alignItems, position));
+    var focusPoint = editor.selection.focus;
+    // prevent select all text in the editor
+    (0, _core.focusEditor)(editor, focusPoint);
+    // Select last focus point
+    setTimeout(function () {
+      (0, _core.focusEditor)(editor, focusPoint);
+    }, 0);
+  }, [editor, readonly]);
+  return /*#__PURE__*/_react["default"].createElement(_reactstrap.UncontrolledPopover, {
+    target: target.current,
+    trigger: "hover",
+    placement: "right-start",
+    hideArrow: true,
+    fade: false
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-dropdown-menu sdoc-table-alignment-menu"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-dropdown-menu-item",
+    onMouseDown: function onMouseDown() {
+      return setVerticalAlignStyle('flex-start');
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-checked"
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: (0, _classnames["default"])('sdocfont sdoc-check-mark', {
+      active: !verticalAlign || verticalAlign === 'flex-start'
+    })
+  })), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "active"
+  }, t('Top_align'))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-dropdown-menu-item",
+    onMouseDown: function onMouseDown() {
+      return setVerticalAlignStyle('center');
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-checked"
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: (0, _classnames["default"])('sdocfont sdoc-check-mark', {
+      active: verticalAlign === 'center'
+    })
+  })), /*#__PURE__*/_react["default"].createElement("span", null, t('Center_align'))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-dropdown-menu-item",
+    onMouseDown: function onMouseDown() {
+      return setVerticalAlignStyle('flex-end');
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-checked"
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: (0, _classnames["default"])('sdocfont sdoc-check-mark', {
+      active: verticalAlign === 'flex-end'
+    })
+  })), /*#__PURE__*/_react["default"].createElement("span", null, t('Bottom_align')))));
+};
+var _default = exports["default"] = VerticalAlignPopover;

package/dist/extension/plugins/table/model.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+var _constants = require("../../constants");
+var _constants2 = require("./constants");
+var Table = /*#__PURE__*/(0, _createClass2["default"])(function Table(options) {
+  (0, _classCallCheck2["default"])(this, Table);
+  this.type = options.type || _constants.ELEMENT_TYPE.TABLE;
+  this.children = options.children || [
+  // 1 x 1
+  {
+    id: '',
+    type: _constants.ELEMENT_TYPE.TABLE_ROW,
+    children: [{
+      id: '',
+      type: _constants.ELEMENT_TYPE.TABLE_CELL,
+      children: [{
+        text: '',
+        id: ''
+      }],
+      style: {
+        text_align: 'left',
+        alignItems: 'center',
+        background_color: ''
+      },
+      // inherit from table,when insert new cell
+      inherit_style: {
+        text_align: 'left',
+        background_color: ''
+      }
+    }],
+    style: {
+      'min_height': 42
+    }
+  }];
+  this.columns = options.columns || [{
+    width: _constants2.TABLE_CELL_MIN_WIDTH
+  }];
+  this.ui = options.ui || {
+    alternate_highlight: true,
+    // alternate row highlight
+    alternate_highlight_color: ''
+  };
+  this.style = options.style || {
+    gridTemplateColumns: "repeat(1, ".concat(_constants2.TABLE_CELL_MIN_WIDTH, "}px)"),
+    // grid
+    gridAutoRows: "minmax(".concat(_constants2.TABLE_ROW_MIN_HEIGHT, "}px, auto)")
+  };
+});
+var _default = exports["default"] = Table;