@seafile/sdoc-editor 2.0.81 → 2.0.83

package/dist/extension/plugins/table/render/table-header/index.js

@@ -0,0 +1,107 @@
+"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 _constants = require("../../../../constants");
+var _constants2 = require("../../constants");
+var _helpers = require("../../helpers");
+var _hooks = require("../hooks");
+var _columnsHeader = _interopRequireDefault(require("./columns-header"));
+var _rowsColumnsHeader = _interopRequireDefault(require("./rows-columns-header"));
+var _rowsHeader = _interopRequireDefault(require("./rows-header"));
+require("./index.css");
+var TableHeader = function TableHeader(_ref) {
+  var editor = _ref.editor,
+    table = _ref.table,
+    setSelectedRange = _ref.setSelectedRange,
+    setIsDragMove = _ref.setIsDragMove;
+  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
+    t = _useTranslation.t;
+  var columns = (0, _hooks.useResizeHandlersContext)();
+  var selectedRange = (0, _hooks.useTableSelectedRangeContext)() || _constants2.EMPTY_SELECTED_RANGE;
+  var selectColumn = (0, _react.useCallback)(function (columnIndex) {
+    var selectedRange = (0, _helpers.getTableColumnSelectedRange)(table, columnIndex);
+    setSelectedRange(selectedRange);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [table, columns]);
+  var selectRow = (0, _react.useCallback)(function (rowIndex) {
+    var selectedRange = (0, _helpers.getTableRowSelectedRange)(table, rowIndex);
+    setSelectedRange(selectedRange);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [table, columns]);
+  var selectTable = (0, _react.useCallback)(function () {
+    var columnsCount = columns.length;
+    var rowsCount = table.children.length;
+    var range = {
+      minRowIndex: 0,
+      maxRowIndex: rowsCount - 1,
+      minColIndex: 0,
+      maxColIndex: columnsCount - 1
+    };
+    setSelectedRange(range);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [table, columns]);
+  var tableSize = [table.children.length, columns.length];
+  var handleDragStart = function handleDragStart(event) {
+    event.stopPropagation();
+    var tableSelectedRange = editor.tableSelectedRange;
+    var tableId = table.id;
+    var minColIndex = tableSelectedRange.minColIndex,
+      maxColIndex = tableSelectedRange.maxColIndex,
+      minRowIndex = tableSelectedRange.minRowIndex,
+      maxRowIndex = tableSelectedRange.maxRowIndex;
+    var dragType = (0, _helpers.getTableDragType)(table, selectedRange);
+    var startIndex = dragType === _constants2.DRAG_HANDLER_COLUMN ? minColIndex : minRowIndex;
+    var endIndex = dragType === _constants2.DRAG_HANDLER_ROW ? maxRowIndex : maxColIndex;
+    var data = {
+      tableId: tableId,
+      dragType: dragType,
+      startIndex: startIndex,
+      endIndex: endIndex
+    };
+    var dragData = JSON.stringify(data);
+    event.dataTransfer.setData(_constants.TABLE_DRAG_KEY, dragData);
+    event.dataTransfer.effectAllowed = 'move';
+    var moveCount = endIndex - startIndex + 1;
+    var tipText = dragType === _constants2.DRAG_HANDLER_COLUMN ? t('Move_column_count', {
+      count: moveCount
+    }) : t('Move_row_count', {
+      count: moveCount
+    });
+    var dragImage = (0, _helpers.generateDragMoveElement)(tipText);
+    event.dataTransfer.setDragImage(dragImage, 0, 0);
+    setIsDragMove(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  };
+  var handleDragEnd = function handleDragEnd(event) {
+    setIsDragMove(false);
+    var indicator = document.getElementById('sdoc-drag-image');
+    indicator.style.display = 'none';
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_columnsHeader["default"], {
+    table: table,
+    selectRange: selectColumn,
+    tableSize: tableSize,
+    handleDragStart: handleDragStart,
+    handleDragEnd: handleDragEnd
+  }), /*#__PURE__*/_react["default"].createElement(_rowsColumnsHeader["default"], {
+    selectRange: selectTable,
+    tableSize: tableSize
+  }), /*#__PURE__*/_react["default"].createElement(_rowsHeader["default"], {
+    table: table,
+    selectRange: selectRow,
+    tableSize: tableSize,
+    handleDragStart: handleDragStart,
+    handleDragEnd: handleDragEnd
+  }));
+};
+var _default = exports["default"] = TableHeader;

package/dist/extension/plugins/table/render/table-header/rows-columns-header.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _objectUtils = _interopRequireDefault(require("../../../../../utils/object-utils"));
+var _hooks = require("../hooks");
+var RowsColumnsHeader = function RowsColumnsHeader(_ref) {
+  var selectRange = _ref.selectRange,
+    tableSize = _ref.tableSize;
+  var selectedRange = (0, _hooks.useTableSelectedRangeContext)();
+  var isSelectedAllTableCells = _objectUtils["default"].isSameObject(selectedRange, {
+    minRowIndex: 0,
+    maxRowIndex: tableSize[0] - 1,
+    minColIndex: 0,
+    maxColIndex: tableSize[1] - 1
+  });
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])('sdoc-table-rows-columns-header d-print-none', {
+      'range-selected': isSelectedAllTableCells
+    }),
+    contentEditable: false,
+    onClick: selectRange
+  });
+};
+var _default = exports["default"] = RowsColumnsHeader;

package/dist/extension/plugins/table/render/table-header/rows-header/index.js

@@ -0,0 +1,100 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _slateReact = require("@seafile/slate-react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _constants = require("../../../constants");
+var _helpers = require("../../../helpers");
+var _hooks = require("../../hooks");
+var _rowHeader = _interopRequireDefault(require("./row-header"));
+var RowsHeader = function RowsHeader(_ref) {
+  var table = _ref.table,
+    selectRange = _ref.selectRange,
+    tableSize = _ref.tableSize,
+    handleDragStart = _ref.handleDragStart,
+    handleDragEnd = _ref.handleDragEnd;
+  var editor = (0, _slateReact.useSlateStatic)();
+  var children = table.children;
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    insertRowIndex = _useState2[0],
+    setInsertRowIndex = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    addIconPosition = _useState4[0],
+    setAddIconPosition = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    isHoverInAddIcon = _useState6[0],
+    setIsHoverInAddIcon = _useState6[1];
+  var tableRootContent = (0, _hooks.useTableRootContext)();
+  var onMouseLeave = (0, _react.useCallback)(function () {
+    setAddIconPosition();
+    setInsertRowIndex(0);
+    setIsHoverInAddIcon(false);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tableSize, table]);
+  var _onMouseEnter = (0, _react.useCallback)(function (addIconPosition) {
+    setAddIconPosition(addIconPosition);
+    setIsHoverInAddIcon(true);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tableSize, table]);
+  var insertRow = (0, _react.useCallback)(function (insertRowIndex) {
+    var validInsertRowIndex = insertRowIndex === -1 ? 0 : insertRowIndex;
+    var insertRowPosition = insertRowIndex === -1 ? _constants.TABLE_ELEMENT_POSITION.BEFORE : _constants.TABLE_ELEMENT_POSITION.AFTER;
+    (0, _helpers.insertTableRow)(editor, table, validInsertRowIndex, insertRowPosition, 1);
+    setAddIconPosition();
+    setIsHoverInAddIcon(false);
+    setInsertRowIndex(0);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tableSize, table]);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-table-rows-header h-100 position-absolute d-flex flex-column d-print-none",
+    contentEditable: false
+  }, children.map(function (row, index) {
+    return /*#__PURE__*/_react["default"].createElement(_rowHeader["default"], {
+      key: row.id,
+      index: index,
+      row: row,
+      addIconPosition: addIconPosition,
+      tableSize: tableSize,
+      setAddIconPosition: setAddIconPosition,
+      setInsertRowIndex: setInsertRowIndex,
+      selectRange: selectRange,
+      handleDragStart: handleDragStart,
+      handleDragEnd: handleDragEnd
+    });
+  })), addIconPosition && /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])('position-fixed sdoc-table-add-element-icon-content', {
+      'background-color-tip-blue': isHoverInAddIcon
+    }),
+    style: addIconPosition,
+    onMouseEnter: function onMouseEnter() {
+      return _onMouseEnter(addIconPosition);
+    },
+    onMouseLeave: onMouseLeave,
+    onClick: function onClick() {
+      return insertRow(insertRowIndex);
+    }
+  }, '+'), addIconPosition && isHoverInAddIcon && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "position-fixed sdoc-table-add-element-tip background-color-tip-blue",
+    style: {
+      left: (addIconPosition === null || addIconPosition === void 0 ? void 0 : addIconPosition.left) + 11,
+      top: (addIconPosition === null || addIconPosition === void 0 ? void 0 : addIconPosition.top) + 6,
+      width: tableRootContent.clientWidth + 1,
+      height: 2,
+      zIndex: 1
+    }
+  }));
+};
+var _default = exports["default"] = RowsHeader;

package/dist/extension/plugins/table/render/table-header/rows-header/row-header.js

@@ -0,0 +1,127 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _slateReact = require("@seafile/slate-react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _useScrollContext = require("../../../../../../hooks/use-scroll-context");
+var _objectUtils = _interopRequireDefault(require("../../../../../../utils/object-utils"));
+var _constants = require("../../../../../constants");
+var _core = require("../../../../../core");
+var _helpers = require("../../../helpers");
+var _hooks = require("../../hooks");
+var RowHeader = function RowHeader(_ref) {
+  var row = _ref.row,
+    index = _ref.index,
+    addIconPosition = _ref.addIconPosition,
+    setAddIconPosition = _ref.setAddIconPosition,
+    setInsertRowIndex = _ref.setInsertRowIndex,
+    selectRange = _ref.selectRange,
+    tableSize = _ref.tableSize,
+    handleDragStart = _ref.handleDragStart,
+    handleDragEnd = _ref.handleDragEnd;
+  var editor = (0, _slateReact.useSlateStatic)();
+  var tableSelectedRange = editor.tableSelectedRange;
+  (0, _react.useEffect)(function () {
+    setRowHeight((0, _helpers.getRowDomHeight)(editor, row));
+  }, [editor, row, tableSize]);
+  var oldRowHeight = (0, _helpers.getRowDomHeight)(editor, row);
+  var _useState = (0, _react.useState)(oldRowHeight),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    rowHeight = _useState2[0],
+    setRowHeight = _useState2[1];
+  var rowHeaderRef = (0, _react.useRef)(null);
+  var columns = (0, _hooks.useResizeHandlersContext)();
+  var scrollContext = (0, _useScrollContext.useScrollContext)();
+  var selectedRange = (0, _hooks.useTableSelectedRangeContext)();
+  var currentCell = (0, _core.getSelectedNodeByType)(editor, _constants.ELEMENT_TYPE.TABLE_CELL);
+  var currentCellPath = currentCell ? (0, _core.findPath)(editor, currentCell, [-1, -1]) : [-1, -1];
+  var pathLength = currentCellPath.length;
+  var canDrag = (0, _react.useMemo)(function () {
+    var minRowIndex = tableSelectedRange.minRowIndex,
+      maxRowIndex = tableSelectedRange.maxRowIndex,
+      minColIndex = tableSelectedRange.minColIndex,
+      maxColIndex = tableSelectedRange.maxColIndex;
+    var _tableSize = (0, _slicedToArray2["default"])(tableSize, 2),
+      colNum = _tableSize[1];
+    var isSelectRow = minColIndex === 0 && maxColIndex === colNum - 1;
+    var isSelectRangeRow = minRowIndex <= index && index <= maxRowIndex;
+    var isSelectAllRows = minRowIndex === 0 && maxRowIndex === tableSize[0] - 1;
+    if (tableSize[0] === 1 || isSelectAllRows) return false;
+    if (isSelectRow && isSelectRangeRow) return true;
+    return false;
+  }, [index, tableSelectedRange, tableSize]);
+  (0, _react.useEffect)(function () {
+    if ((0, _helpers.elementHasImage)(row)) {
+      // There is a delay in image loading
+      var time = setTimeout(function () {
+        return setRowHeight((0, _helpers.getRowDomHeight)(editor, row));
+      }, 300);
+      return function () {
+        clearTimeout(time);
+      };
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [columns, row, index]);
+  var onMouseMove = (0, _react.useCallback)(function (event) {
+    var _rowHeaderRef$current = rowHeaderRef.current.getBoundingClientRect(),
+      left = _rowHeaderRef$current.left,
+      height = _rowHeaderRef$current.height,
+      top = _rowHeaderRef$current.top;
+    var halfElementY = top + height / 2;
+    var nextAddIconPosition = {
+      left: left,
+      top: event.clientY > halfElementY ? top + height - 7 : top - 7
+    };
+    var _scrollContext$curren = scrollContext.current.getBoundingClientRect(),
+      scrollContextTop = _scrollContext$curren.top,
+      scrollContextHeight = _scrollContext$curren.height;
+    if (nextAddIconPosition.top < scrollContextTop) {
+      setAddIconPosition(undefined);
+      return;
+    }
+    if (nextAddIconPosition.top > scrollContextTop + scrollContextHeight) {
+      setAddIconPosition(undefined);
+      return;
+    }
+    if (_objectUtils["default"].isSameObject(nextAddIconPosition, addIconPosition)) return;
+    setInsertRowIndex(event.clientY > halfElementY ? index : index - 1);
+    setAddIconPosition(nextAddIconPosition);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [index, addIconPosition, row, columns]);
+  var onMouseLeave = (0, _react.useCallback)(function (event) {
+    setAddIconPosition(undefined);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [index, addIconPosition, row, columns]);
+  var isSelectedARow = selectedRange.minColIndex === 0 && selectedRange.maxColIndex === tableSize[1] - 1;
+  var isSelectedSomeRow = selectedRange.minRowIndex <= index && index <= selectedRange.maxRowIndex;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])('sdoc-table-row-header', {
+      'range-selected': isSelectedARow && isSelectedSomeRow,
+      'range-selected-tip': !isSelectedARow && isSelectedSomeRow || currentCellPath[pathLength - 2] === index,
+      'drag': canDrag
+    }),
+    style: {
+      height: rowHeight
+    },
+    ref: rowHeaderRef,
+    onClick: function onClick() {
+      return selectRange(index);
+    },
+    onMouseMove: onMouseMove,
+    onMouseLeave: onMouseLeave,
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd,
+    draggable: canDrag
+  });
+};
+var _default = exports["default"] = RowHeader;

package/dist/extension/plugins/table/render/table-root.js

@@ -0,0 +1,64 @@
+"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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _slateReact = require("@seafile/slate-react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _menu = require("../menu");
+var _hooks = require("./hooks");
+var TableRoot = function TableRoot(_ref) {
+  var attributes = _ref.attributes,
+    _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? [] : _ref$columns,
+    children = _ref.children;
+  var editor = (0, _slateReact.useSlateStatic)();
+  var readonly = (0, _slateReact.useReadOnly)();
+  var tableScrollWrapper = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    scrollLeft = _useState2[0],
+    setScrollLeft = _useState2[1];
+  var allWidth = columns.reduce(function (pre, cur) {
+    return pre + cur.width;
+  }, 0);
+  var onScroll = (0, _react.useCallback)(function (event) {
+    setScrollLeft(event.target.scrollLeft);
+  }, []);
+  var _useContextMenu = (0, _hooks.useContextMenu)(tableScrollWrapper),
+    isShowContextMenu = _useContextMenu.isShowContextMenu,
+    menuPosition = _useContextMenu.menuPosition,
+    onContextMenu = _useContextMenu.onContextMenu;
+  return /*#__PURE__*/_react["default"].createElement(_hooks.TableRootContext.Provider, {
+    value: tableScrollWrapper.current
+  }, /*#__PURE__*/_react["default"].createElement(_hooks.TableRootScrollLeftContext.Provider, {
+    value: scrollLeft
+  }, /*#__PURE__*/_react["default"].createElement("div", Object.assign({}, attributes, {
+    className: (0, _classnames["default"])('sdoc-table-wrapper position-relative', attributes.className, {
+      'scroll': allWidth > editor.width
+    }),
+    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, attributes.style), {}, {
+      maxWidth: editor.width ? editor.width : '100%'
+    })
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])('sdoc-table-scroll-wrapper', {
+      'scroll-at-center': scrollLeft + editor.width !== allWidth && scrollLeft > 0,
+      'scroll-at-right': scrollLeft + editor.width === allWidth,
+      'scroll-at-left': scrollLeft === 0
+    }),
+    ref: tableScrollWrapper,
+    onScroll: onScroll,
+    onContextMenu: onContextMenu
+  }, children)), !readonly && isShowContextMenu && /*#__PURE__*/_react["default"].createElement(_menu.TableContextMenu, {
+    editor: editor,
+    contextMenuPosition: menuPosition,
+    readonly: readonly
+  })));
+};
+var _default = exports["default"] = TableRoot;

package/dist/extension/plugins/table/render-elem.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "renderTable", {
+  enumerable: true,
+  get: function get() {
+    return _render["default"];
+  }
+});
+Object.defineProperty(exports, "renderTableCell", {
+  enumerable: true,
+  get: function get() {
+    return _renderCell["default"];
+  }
+});
+Object.defineProperty(exports, "renderTableRow", {
+  enumerable: true,
+  get: function get() {
+    return _renderRow["default"];
+  }
+});
+var _render = _interopRequireDefault(require("./render"));
+var _renderCell = _interopRequireDefault(require("./render/render-cell"));
+var _renderRow = _interopRequireDefault(require("./render/render-row"));

package/dist/extension/plugins/text-align/helpers.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setAlignType = exports.isMenuDisabled = exports.getAlignType = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _slate = require("@seafile/slate");
+var _constants = require("../../constants");
+var _core = require("../../core");
+var isMenuDisabled = exports.isMenuDisabled = function isMenuDisabled(editor, readonly) {
+  if (readonly) return true;
+  if (!editor.selection) return true;
+  var _Editor$nodes = _slate.Editor.nodes(editor, {
+      match: function match(node) {
+        return !_slate.Editor.isEditor(node) && _slate.Element.isElement(node) && _slate.Editor.isBlock(editor, node);
+      },
+      universal: true,
+      mode: 'highest'
+    }),
+    _Editor$nodes2 = (0, _slicedToArray2["default"])(_Editor$nodes, 1),
+    match = _Editor$nodes2[0];
+  if (!match) return false;
+  var elementType = match[0].type;
+  // at present, TABLE got its own 'text align'
+  if (elementType === _constants.CODE_BLOCK || elementType === _constants.TABLE) {
+    return true;
+  }
+  return false;
+};
+var getAlignType = exports.getAlignType = function getAlignType(editor) {
+  var defaultType = 'left';
+  var selection = editor.selection;
+  if (!selection) {
+    return defaultType;
+  }
+  if ((0, _core.isRangeAcrossBlocks)(editor)) return defaultType;
+  var _Editor$nodes3 = _slate.Editor.nodes(editor, {
+      at: _slate.Editor.unhangRange(editor, selection),
+      match: function match(n) {
+        return !_slate.Editor.isEditor(n) && _slate.Element.isElement(n) && n['align'];
+      }
+    }),
+    _Editor$nodes4 = (0, _slicedToArray2["default"])(_Editor$nodes3, 1),
+    match = _Editor$nodes4[0];
+  if (!match) return defaultType;
+  return match[0].align;
+};
+var setAlignType = exports.setAlignType = function setAlignType(editor, type) {
+  _slate.Transforms.setNodes(editor, {
+    'align': type
+  });
+};

package/dist/extension/plugins/text-align/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var TextAlignPlugin = {};
+var _default = exports["default"] = TextAlignPlugin;

package/dist/extension/plugins/text-align/menu/index.js

@@ -0,0 +1,105 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _tooltip = _interopRequireDefault(require("../../../../components/tooltip"));
+var _constants = require("../../../constants");
+var _helpers = require("../helpers");
+require("./index.css");
+var TextAlignMenu = function TextAlignMenu(_ref) {
+  var _ref$isRichEditor = _ref.isRichEditor,
+    isRichEditor = _ref$isRichEditor === void 0 ? true : _ref$isRichEditor,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? 'menu-group-item' : _ref$className,
+    editor = _ref.editor,
+    readonly = _ref.readonly;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isShowMenu = _useState2[0],
+    setMenuShow = _useState2[1];
+  var popoverRef = (0, _react.useRef)(null);
+  var disabled = (0, _helpers.isMenuDisabled)(editor, readonly);
+  var buttonId = 'sdoc-button-text-align';
+  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
+    t = _useTranslation.t;
+  var toggle = (0, _react.useCallback)(function (event) {
+    popoverRef.current.toggle();
+    setMenuShow(!isShowMenu);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowMenu]);
+  var getCurrentType = (0, _react.useCallback)(function () {
+    return (0, _helpers.getAlignType)(editor);
+  }, [editor]);
+  var setType = (0, _react.useCallback)(function (type) {
+    (0, _helpers.setAlignType)(editor, type);
+    toggle();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, isShowMenu]);
+  var validClassName = (0, _classnames["default"])(className, 'sdoc-menu-with-dropdown', {
+    'menu-show': isShowMenu,
+    'disabled': disabled,
+    'rich-icon-btn d-flex': isRichEditor,
+    'rich-icon-btn-disabled': isRichEditor && disabled,
+    'rich-icon-btn-hover': isRichEditor && !disabled,
+    'btn btn-icon btn-secondary btn-active d-flex': !isRichEditor
+  });
+  var curType = getCurrentType();
+  var curIcon = _constants.MENUS_CONFIG_MAP[_constants.TEXT_ALIGN].filter(function (item) {
+    return item.type === curType;
+  })[0].iconClass;
+  var caretIconClass = "sdoc-menu-with-dropdown-triangle-icon sdocfont sdoc-".concat(isShowMenu ? 'caret-up' : 'drop-down');
+  curType = 'align_' + curType;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    "aria-label": "text align",
+    className: validClassName,
+    id: buttonId,
+    disabled: disabled
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-menu-with-dropdown-icon"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: curIcon
+  })), !disabled && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-menu-with-dropdown-triangle"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: caretIconClass
+  }))), /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    target: buttonId
+  }, t('Alignment_type')), !disabled && /*#__PURE__*/_react["default"].createElement(_reactstrap.UncontrolledPopover, {
+    target: buttonId,
+    className: "sdoc-menu-popover sdoc-dropdown-menu sdoc-text-align-dropdown",
+    trigger: "legacy",
+    placement: "bottom-start",
+    hideArrow: true,
+    toggle: toggle,
+    fade: false,
+    ref: popoverRef
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "pt-2 pb-2"
+  }, _constants.MENUS_CONFIG_MAP[_constants.TEXT_ALIGN].map(function (item, index) {
+    var isSelected = curType === item.id;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: index,
+      className: "sdoc-dropdown-menu-item",
+      onClick: function onClick() {
+        return setType(item.type);
+      }
+    }, isSelected && /*#__PURE__*/_react["default"].createElement("i", {
+      className: "sdocfont sdoc-check-mark"
+    }), /*#__PURE__*/_react["default"].createElement("i", {
+      className: item.iconClass
+    }));
+  }))));
+};
+var _default = exports["default"] = (0, _reactI18next.withTranslation)('sdoc-editor')(TextAlignMenu);