@seafile/sdoc-editor 0.3.6 → 0.3.7

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

@@ -1,5 +1,4 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useEffect, useState, useRef, useCallback } from 'react';
 import classnames from 'classnames';
 import { useSlateStatic, useReadOnly } from '@seafile/slate-react';
@@ -10,49 +9,42 @@ import { getRowHeight, updateTableRowHeight } from '../helpers';
 import { eventStopPropagation, getMouseDownInfo, getMouseMoveInfo, registerResizeEvents, unregisterResizeEvents } from '../../../../utils/mouse-event';
 import { useSettingSelectRangeContext, useResizeHandlersContext } from './hooks';
 import { useScrollContext } from '../../../../hooks/use-scroll-context';
-var TableRow = function TableRow(_ref) {
-  var element = _ref.element,
-    attributes = _ref.attributes,
-    children = _ref.children;
-  var editor = useSlateStatic();
-  var isSettingSelectRange = useSettingSelectRangeContext();
-  var columns = useResizeHandlersContext();
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isResizing = _useState2[0],
-    setIsResizing = _useState2[1];
-  var _useState3 = useState({}),
-    _useState4 = _slicedToArray(_useState3, 2),
-    mouseDownInfo = _useState4[0],
-    setMouseDownInfo = _useState4[1];
-  var rowPath = findPath(editor, element);
-  var pathLength = rowPath ? rowPath.length : 0;
-  var rowIndex = rowPath ? rowPath[pathLength - 1] : -1;
-  var rowHeight = getRowHeight(element, rowIndex);
-  var tableRow = useRef(rowHeight);
-  var _useState5 = useState(rowHeight),
-    _useState6 = _slicedToArray(_useState5, 2),
-    height = _useState6[0],
-    setHeight = _useState6[1];
-  var scrollContent = useScrollContext();
-  var onMouseDown = useCallback(function (event) {
+const TableRow = _ref => {
+  let {
+    element,
+    attributes,
+    children
+  } = _ref;
+  const editor = useSlateStatic();
+  const isSettingSelectRange = useSettingSelectRangeContext();
+  const columns = useResizeHandlersContext();
+  const [isResizing, setIsResizing] = useState(false);
+  const [mouseDownInfo, setMouseDownInfo] = useState({});
+  const rowPath = findPath(editor, element);
+  const pathLength = rowPath ? rowPath.length : 0;
+  const rowIndex = rowPath ? rowPath[pathLength - 1] : -1;
+  const rowHeight = getRowHeight(element, rowIndex);
+  const tableRow = useRef(rowHeight);
+  const [height, setHeight] = useState(rowHeight);
+  const scrollContent = useScrollContext();
+  const onMouseDown = useCallback(event => {
     eventStopPropagation(event);
-    var mouseDownInfo = getMouseDownInfo(event, scrollContent.current);
+    const mouseDownInfo = getMouseDownInfo(event, scrollContent.current);
     setMouseDownInfo(mouseDownInfo);
     setIsResizing(true);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  useEffect(function () {
+  useEffect(() => {
     if (!isResizing) return;
-    var onMouseMove = function onMouseMove(event) {
+    const onMouseMove = event => {
       eventStopPropagation(event);
-      var mouseMoveInfo = getMouseMoveInfo(event, mouseDownInfo, scrollContent.current);
-      var newHeight = tableRow.current + mouseMoveInfo.displacementY;
-      var validHeight = Math.max(TABLE_ROW_MIN_HEIGHT, newHeight);
+      const mouseMoveInfo = getMouseMoveInfo(event, mouseDownInfo, scrollContent.current);
+      const newHeight = tableRow.current + mouseMoveInfo.displacementY;
+      const validHeight = Math.max(TABLE_ROW_MIN_HEIGHT, newHeight);
       setHeight(validHeight);
     };
-    var onMouseUp = function onMouseUp(event) {
+    const onMouseUp = event => {
       eventStopPropagation(event);
       setIsResizing(false);
       tableRow.current = height;
@@ -62,7 +54,7 @@ var TableRow = function TableRow(_ref) {
       'mousemove': onMouseMove,
       'mouseup': onMouseUp
     });
-    return function () {
+    return () => {
       unregisterResizeEvents({
         'mousemove': onMouseMove,
         'mouseup': onMouseUp
@@ -71,8 +63,8 @@ var TableRow = function TableRow(_ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isResizing, mouseDownInfo, element, attributes, height]);
-  useEffect(function () {
-    var rowDom = ReactEditor.toDOMNode(editor, element);
+  useEffect(() => {
+    const rowDom = ReactEditor.toDOMNode(editor, element);
     if (!rowDom) return;
     tableRow.current = rowDom.clientHeight;
 
@@ -97,25 +89,28 @@ var TableRow = function TableRow(_ref) {
 };
 function renderTableRow(props) {
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  var readOnly = useReadOnly();
+  const readOnly = useReadOnly();
   if (readOnly) {
-    var attributes = props.attributes,
-      children = props.children,
-      element = props.element;
+    const {
+      attributes,
+      children,
+      element
+    } = props;
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    var editor = useSlateStatic();
-    var rowPath = findPath(editor, element);
+    const editor = useSlateStatic();
+    const rowPath = findPath(editor, element);
     if (!rowPath) return null;
-    var pathLength = rowPath.length;
-    var rowIndex = rowPath[pathLength - 1];
-    var _element$style = element.style,
-      style = _element$style === void 0 ? {} : _element$style;
-    var height = getRowHeight(element, rowIndex);
+    const pathLength = rowPath.length;
+    const rowIndex = rowPath[pathLength - 1];
+    const {
+      style = {}
+    } = element;
+    const height = getRowHeight(element, rowIndex);
     return /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
       className: classnames('table-row', attributes.className),
       style: _objectSpread(_objectSpread(_objectSpread({}, attributes.style), style), {}, {
-        height: height,
+        height,
         maxHeight: 'fit-content'
       }),
       "data-id": element.id

package/dist/basic-sdk/extension/plugins/table/render/resize-handlers/first-column-left-resize-handler.js

@@ -1,5 +1,4 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useRef, useState, useEffect, useCallback } from 'react';
 import { useSlateStatic } from '@seafile/slate-react';
 import classnames from 'classnames';
@@ -7,76 +6,68 @@ import { useTableRootContext } from '../hooks';
 import { TABLE_CELL_MIN_WIDTH } from '../../constants';
 import { getTableColumns, updateColumnWidth } from '../../helpers';
 import { eventStopPropagation, getMouseDownInfo, getMouseMoveInfo, registerResizeEvents, unregisterResizeEvents } from '../../../../../utils/mouse-event';
-var FirstColumnResizeHandler = function FirstColumnResizeHandler(_ref) {
-  var column = _ref.column,
-    initLeft = _ref.left,
-    element = _ref.element,
-    index = _ref.index;
-  var editor = useSlateStatic();
-  var resizeHandler = useRef(null);
-  var _useState = useState(initLeft),
-    _useState2 = _slicedToArray(_useState, 2),
-    left = _useState2[0],
-    setLeft = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isResizing = _useState4[0],
-    setIsResizing = _useState4[1];
-  var _useState5 = useState({}),
-    _useState6 = _slicedToArray(_useState5, 2),
-    mouseDownInfo = _useState6[0],
-    setMouseDownInfo = _useState6[1];
-  var _useState7 = useState({}),
-    _useState8 = _slicedToArray(_useState7, 2),
-    style = _useState8[0],
-    setStyle = _useState8[1];
-  var width = column.width;
-  var tableRootScrollContainer = useTableRootContext();
-  var onMouseDown = useCallback(function (event) {
+const FirstColumnResizeHandler = _ref => {
+  let {
+    column,
+    left: initLeft,
+    element,
+    index
+  } = _ref;
+  const editor = useSlateStatic();
+  const resizeHandler = useRef(null);
+  const [left, setLeft] = useState(initLeft);
+  const [isResizing, setIsResizing] = useState(false);
+  const [mouseDownInfo, setMouseDownInfo] = useState({});
+  const [style, setStyle] = useState({});
+  const width = column.width;
+  const tableRootScrollContainer = useTableRootContext();
+  const onMouseDown = useCallback(event => {
     eventStopPropagation(event);
-    var mouseDownInfo = getMouseDownInfo(event, tableRootScrollContainer);
-    var _tableRootScrollConta = tableRootScrollContainer.getBoundingClientRect(),
-      top = _tableRootScrollConta.top;
+    const mouseDownInfo = getMouseDownInfo(event, tableRootScrollContainer);
+    const {
+      top
+    } = tableRootScrollContainer.getBoundingClientRect();
     setStyle({
       left: mouseDownInfo.positionX - 2,
       height: tableRootScrollContainer.clientHeight,
-      top: top
+      top
     });
     setMouseDownInfo(mouseDownInfo);
     setIsResizing(true);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tableRootScrollContainer]);
-  useEffect(function () {
+  useEffect(() => {
     if (!isResizing) {
       if (initLeft !== left) {
         setLeft(initLeft);
       }
       return;
     }
-    var onMouseMove = function onMouseMove(event) {
+    const onMouseMove = event => {
       eventStopPropagation(event);
-      var mouseMoveInfo = getMouseMoveInfo(event, mouseDownInfo, tableRootScrollContainer);
-      var newWidth = width - mouseMoveInfo.displacementX;
+      const mouseMoveInfo = getMouseMoveInfo(event, mouseDownInfo, tableRootScrollContainer);
+      const newWidth = width - mouseMoveInfo.displacementX;
       if (newWidth < TABLE_CELL_MIN_WIDTH) return;
-      var left = initLeft - mouseMoveInfo.displacementX;
-      var _tableRootScrollConta2 = tableRootScrollContainer.getBoundingClientRect(),
-        top = _tableRootScrollConta2.top;
+      const left = initLeft - mouseMoveInfo.displacementX;
+      const {
+        top
+      } = tableRootScrollContainer.getBoundingClientRect();
       setStyle({
         left: event.clientX - 2,
         height: tableRootScrollContainer.clientHeight,
-        top: top
+        top
       });
       setLeft(left);
     };
-    var onMouseUp = function onMouseUp(event) {
+    const onMouseUp = event => {
       eventStopPropagation(event);
       setIsResizing(false);
       setStyle({});
-      var columns = getTableColumns(editor, element);
-      var newColumns = columns.slice(0);
-      var column = newColumns[index];
-      var newWidth = width + left - initLeft;
+      const columns = getTableColumns(editor, element);
+      const newColumns = columns.slice(0);
+      const column = newColumns[index];
+      const newWidth = width + left - initLeft;
       newColumns[index] = _objectSpread(_objectSpread({}, column), {}, {
         width: newWidth
       });
@@ -86,7 +77,7 @@ var FirstColumnResizeHandler = function FirstColumnResizeHandler(_ref) {
       'mousemove': onMouseMove,
       'mouseup': onMouseUp
     });
-    return function () {
+    return () => {
       unregisterResizeEvents({
         'mousemove': onMouseMove,
         'mouseup': onMouseUp

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

@@ -5,22 +5,24 @@ import ResizeHandler from './resize-handler';
 import { getNode, findPath } from '../../../../core';
 import { useResizeHandlersContext } from '../hooks';
 import { getTableColumns } from '../../helpers';
-var ResizeHandlers = function ResizeHandlers(_ref) {
-  var element = _ref.element;
-  var editor = useSlateStatic();
-  var tablePath = findPath(editor, element);
-  var columns = useResizeHandlersContext() || getTableColumns(editor, element);
+const ResizeHandlers = _ref => {
+  let {
+    element
+  } = _ref;
+  const editor = useSlateStatic();
+  const tablePath = findPath(editor, element);
+  const columns = useResizeHandlersContext() || getTableColumns(editor, element);
   if (!tablePath) return null;
-  var table = getNode(editor, tablePath);
+  const table = getNode(editor, tablePath);
   if (!table) return null;
-  var columnLeft = 0;
+  let columnLeft = 0;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FirstColumnResizeHandler, {
     key: "column-0-left",
     column: columns[0],
     left: 0,
     index: 0,
     element: element
-  }), columns.map(function (column, columnIndex) {
+  }), columns.map((column, columnIndex) => {
     columnLeft = columnLeft + column.width;
     return /*#__PURE__*/React.createElement(ResizeHandler, {
       key: columnIndex,

package/dist/basic-sdk/extension/plugins/table/render/resize-handlers/resize-handler.js

@@ -1,5 +1,4 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useRef, useState, useEffect, useCallback } from 'react';
 import { useSlateStatic } from '@seafile/slate-react';
 import classnames from 'classnames';
@@ -7,88 +6,80 @@ import { useTableRootContext } from '../hooks';
 import { TABLE_CELL_MIN_WIDTH } from '../../constants';
 import { getTableColumns, updateColumnWidth } from '../../helpers';
 import { eventStopPropagation, getMouseDownInfo, getMouseMoveInfo, registerResizeEvents, unregisterResizeEvents } from '../../../../../utils/mouse-event';
-var ResizeHandler = function ResizeHandler(_ref) {
-  var column = _ref.column,
-    initLeft = _ref.left,
-    element = _ref.element,
-    index = _ref.index;
-  var editor = useSlateStatic();
-  var resizeHandler = useRef(null);
-  var _useState = useState(initLeft),
-    _useState2 = _slicedToArray(_useState, 2),
-    left = _useState2[0],
-    setLeft = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isResizing = _useState4[0],
-    setIsResizing = _useState4[1];
-  var _useState5 = useState({}),
-    _useState6 = _slicedToArray(_useState5, 2),
-    mouseDownInfo = _useState6[0],
-    setMouseDownInfo = _useState6[1];
-  var _useState7 = useState({}),
-    _useState8 = _slicedToArray(_useState7, 2),
-    style = _useState8[0],
-    setStyle = _useState8[1];
-  var width = column.width;
-  var tableRootScrollContainer = useTableRootContext();
-  var onMouseDown = useCallback(function (event) {
+const ResizeHandler = _ref => {
+  let {
+    column,
+    left: initLeft,
+    element,
+    index
+  } = _ref;
+  const editor = useSlateStatic();
+  const resizeHandler = useRef(null);
+  const [left, setLeft] = useState(initLeft);
+  const [isResizing, setIsResizing] = useState(false);
+  const [mouseDownInfo, setMouseDownInfo] = useState({});
+  const [style, setStyle] = useState({});
+  const width = column.width;
+  const tableRootScrollContainer = useTableRootContext();
+  const onMouseDown = useCallback(event => {
     eventStopPropagation(event);
-    var mouseDownInfo = getMouseDownInfo(event, tableRootScrollContainer);
-    var _tableRootScrollConta = tableRootScrollContainer.getBoundingClientRect(),
-      top = _tableRootScrollConta.top;
+    const mouseDownInfo = getMouseDownInfo(event, tableRootScrollContainer);
+    const {
+      top
+    } = tableRootScrollContainer.getBoundingClientRect();
     setStyle({
       left: mouseDownInfo.positionX - 2,
       height: tableRootScrollContainer.clientHeight,
-      top: top
+      top
     });
     setMouseDownInfo(mouseDownInfo);
     setIsResizing(true);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tableRootScrollContainer]);
-  useEffect(function () {
+  useEffect(() => {
     if (!isResizing) {
       if (initLeft !== left) {
         setLeft(initLeft);
       }
       return;
     }
-    var onMouseMove = function onMouseMove(event) {
+    const onMouseMove = event => {
       eventStopPropagation(event);
-      var mouseMoveInfo = getMouseMoveInfo(event, mouseDownInfo, tableRootScrollContainer);
-      var newWidth = width + mouseMoveInfo.displacementX;
-      var columns = getTableColumns(editor, element);
+      const mouseMoveInfo = getMouseMoveInfo(event, mouseDownInfo, tableRootScrollContainer);
+      const newWidth = width + mouseMoveInfo.displacementX;
+      const columns = getTableColumns(editor, element);
       if (newWidth < TABLE_CELL_MIN_WIDTH) return;
-      var nextColumn = columns[index + 1];
+      const nextColumn = columns[index + 1];
       if (nextColumn) {
-        var nextColumnWidth = nextColumn.width - mouseMoveInfo.displacementX;
+        const nextColumnWidth = nextColumn.width - mouseMoveInfo.displacementX;
         if (nextColumnWidth < TABLE_CELL_MIN_WIDTH) return;
       }
-      var left = initLeft + mouseMoveInfo.displacementX;
-      var _tableRootScrollConta2 = tableRootScrollContainer.getBoundingClientRect(),
-        top = _tableRootScrollConta2.top;
+      const left = initLeft + mouseMoveInfo.displacementX;
+      const {
+        top
+      } = tableRootScrollContainer.getBoundingClientRect();
       setStyle({
         left: event.clientX - 2,
         height: tableRootScrollContainer.clientHeight,
-        top: top
+        top
       });
       setLeft(left);
     };
-    var onMouseUp = function onMouseUp(event) {
+    const onMouseUp = event => {
       eventStopPropagation(event);
       setIsResizing(false);
       setStyle({});
-      var columns = getTableColumns(editor, element);
-      var newColumns = columns.slice(0);
-      var column = newColumns[index];
-      var newWidth = width + left - initLeft;
+      const columns = getTableColumns(editor, element);
+      const newColumns = columns.slice(0);
+      const column = newColumns[index];
+      const newWidth = width + left - initLeft;
       newColumns[index] = _objectSpread(_objectSpread({}, column), {}, {
         width: newWidth
       });
-      var nextColumn = columns[index + 1];
+      const nextColumn = columns[index + 1];
       if (nextColumn) {
-        var nextColumnWidth = nextColumn.width - left + initLeft;
+        const nextColumnWidth = nextColumn.width - left + initLeft;
         newColumns[index + 1] = _objectSpread(_objectSpread({}, nextColumn), {}, {
           width: nextColumnWidth
         });
@@ -99,7 +90,7 @@ var ResizeHandler = function ResizeHandler(_ref) {
       'mousemove': onMouseMove,
       'mouseup': onMouseUp
     });
-    return function () {
+    return () => {
       unregisterResizeEvents({
         'mousemove': onMouseMove,
         'mouseup': onMouseUp

package/dist/basic-sdk/extension/plugins/table/render/table-header/columns-header/column-header.js

@@ -5,29 +5,32 @@ import ObjectUtils from '../../../../../../utils/object-utils';
 import { useTableRootContext, useTableSelectedRangeContext } from '../../hooks';
 import { ELEMENT_TYPE } from '../../../../../constants';
 import { findPath, getSelectedNodeByType } from '../../../../../core';
-var ColumnHeader = function ColumnHeader(_ref) {
-  var index = _ref.index,
-    column = _ref.column,
-    addIconPosition = _ref.addIconPosition,
-    setAddIconPosition = _ref.setAddIconPosition,
-    setInsertColumnIndex = _ref.setInsertColumnIndex,
-    selectRange = _ref.selectRange,
-    tableSize = _ref.tableSize;
-  var editor = useSlateStatic();
-  var columnHeaderRef = useRef(null);
-  var tableRoot = useTableRootContext();
-  var selectedRange = useTableSelectedRangeContext();
-  var currentCell = getSelectedNodeByType(editor, ELEMENT_TYPE.TABLE_CELL);
-  var currentCellPath = currentCell ? findPath(editor, currentCell, [-1, -1]) : [-1, -1];
-  var pathLength = currentCellPath.length;
-  var onMouseMove = useCallback(function (event) {
-    var _columnHeaderRef$curr = columnHeaderRef.current.getBoundingClientRect(),
-      left = _columnHeaderRef$curr.left,
-      width = _columnHeaderRef$curr.width,
-      top = _columnHeaderRef$curr.top;
-    var tableRootPosition = tableRoot.getBoundingClientRect();
-    var halfElementX = left + width / 2;
-    var nextAddIconPosition = {
+const ColumnHeader = _ref => {
+  let {
+    index,
+    column,
+    addIconPosition,
+    setAddIconPosition,
+    setInsertColumnIndex,
+    selectRange,
+    tableSize
+  } = _ref;
+  const editor = useSlateStatic();
+  const columnHeaderRef = useRef(null);
+  const tableRoot = useTableRootContext();
+  const selectedRange = useTableSelectedRangeContext();
+  const currentCell = getSelectedNodeByType(editor, ELEMENT_TYPE.TABLE_CELL);
+  const currentCellPath = currentCell ? findPath(editor, currentCell, [-1, -1]) : [-1, -1];
+  const pathLength = currentCellPath.length;
+  const onMouseMove = useCallback(event => {
+    const {
+      left,
+      width,
+      top
+    } = columnHeaderRef.current.getBoundingClientRect();
+    const tableRootPosition = tableRoot.getBoundingClientRect();
+    const halfElementX = left + width / 2;
+    const nextAddIconPosition = {
       left: event.clientX > halfElementX ? left + width - 6 : left - 6,
       top: top
     };
@@ -45,13 +48,13 @@ var ColumnHeader = function ColumnHeader(_ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [index, addIconPosition, column, tableSize]);
-  var onMouseLeave = useCallback(function (event) {
+  const onMouseLeave = useCallback(event => {
     setAddIconPosition(undefined);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [index, addIconPosition, column, tableSize]);
-  var isSelectedAColumn = selectedRange.minRowIndex === 0 && selectedRange.maxRowIndex === tableSize[0] - 1;
-  var isSelectedRangeColumn = selectedRange.minColIndex <= index && index <= selectedRange.maxColIndex;
+  const isSelectedAColumn = selectedRange.minRowIndex === 0 && selectedRange.maxRowIndex === tableSize[0] - 1;
+  const isSelectedRangeColumn = selectedRange.minColIndex <= index && index <= selectedRange.maxColIndex;
   return /*#__PURE__*/React.createElement("div", {
     className: classnames('sdoc-table-column-header h-100', {
       'range-selected': isSelectedAColumn && isSelectedRangeColumn,
@@ -60,9 +63,7 @@ var ColumnHeader = function ColumnHeader(_ref) {
     ref: columnHeaderRef,
     onMouseMove: onMouseMove,
     onMouseLeave: onMouseLeave,
-    onClick: function onClick() {
-      return selectRange(index);
-    },
+    onClick: () => selectRange(index),
     style: {
       width: column.width
     }

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

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useCallback, useState } from 'react';
 import { useSlateStatic } from '@seafile/slate-react';
 import classnames from 'classnames';
@@ -6,42 +5,35 @@ import { useResizeHandlersContext, useTableRootScrollLeftContext, useTableRootCo
 import ColumnHeader from './column-header';
 import { insertTableColumn } from '../../../helpers';
 import { TABLE_ELEMENT_POSITION } from '../../../constants';
-var ColumnsHeader = function ColumnsHeader(_ref) {
-  var table = _ref.table,
-    selectRange = _ref.selectRange,
-    tableSize = _ref.tableSize;
-  var editor = useSlateStatic();
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    insertColumnIndex = _useState2[0],
-    setInsertColumnIndex = _useState2[1];
-  var _useState3 = useState(),
-    _useState4 = _slicedToArray(_useState3, 2),
-    addIconPosition = _useState4[0],
-    setAddIconPosition = _useState4[1];
-  var columns = useResizeHandlersContext();
-  var tableRootScrollLeft = useTableRootScrollLeftContext();
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isHoverInAddIcon = _useState6[0],
-    setIsHoverInAddIcon = _useState6[1];
-  var tableRootContent = useTableRootContext();
-  var onMouseLeave = useCallback(function () {
+const ColumnsHeader = _ref => {
+  let {
+    table,
+    selectRange,
+    tableSize
+  } = _ref;
+  const editor = useSlateStatic();
+  const [insertColumnIndex, setInsertColumnIndex] = useState(0);
+  const [addIconPosition, setAddIconPosition] = useState();
+  const columns = useResizeHandlersContext();
+  const tableRootScrollLeft = useTableRootScrollLeftContext();
+  const [isHoverInAddIcon, setIsHoverInAddIcon] = useState(false);
+  const tableRootContent = useTableRootContext();
+  const onMouseLeave = useCallback(() => {
     setAddIconPosition();
     setInsertColumnIndex(0);
     setIsHoverInAddIcon(false);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [table, columns, tableSize]);
-  var _onMouseEnter = useCallback(function (addIconPosition) {
+  const onMouseEnter = useCallback(addIconPosition => {
     setAddIconPosition(addIconPosition);
     setIsHoverInAddIcon(true);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [table, columns, tableSize]);
-  var insertColumn = useCallback(function (insertColumnIndex) {
-    var validInsertColumnIndex = insertColumnIndex === -1 ? 0 : insertColumnIndex;
-    var insertColumnPosition = insertColumnIndex === -1 ? TABLE_ELEMENT_POSITION.BEFORE : TABLE_ELEMENT_POSITION.AFTER;
+  const insertColumn = useCallback(insertColumnIndex => {
+    const validInsertColumnIndex = insertColumnIndex === -1 ? 0 : insertColumnIndex;
+    const insertColumnPosition = insertColumnIndex === -1 ? TABLE_ELEMENT_POSITION.BEFORE : TABLE_ELEMENT_POSITION.AFTER;
     insertTableColumn(editor, table, validInsertColumnIndex, insertColumnPosition, 1);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -54,7 +46,7 @@ var ColumnsHeader = function ColumnsHeader(_ref) {
     style: {
       left: -1 * tableRootScrollLeft
     }
-  }, columns.map(function (column, index) {
+  }, columns.map((column, index) => {
     return /*#__PURE__*/React.createElement(ColumnHeader, {
       key: index,
       column: column,
@@ -71,13 +63,9 @@ var ColumnsHeader = function ColumnsHeader(_ref) {
     }),
     contentEditable: false,
     style: addIconPosition,
-    onMouseEnter: function onMouseEnter() {
-      return _onMouseEnter(addIconPosition);
-    },
+    onMouseEnter: () => onMouseEnter(addIconPosition),
     onMouseLeave: onMouseLeave,
-    onClick: function onClick() {
-      return insertColumn(insertColumnIndex);
-    }
+    onClick: () => insertColumn(insertColumnIndex)
   }, '+'), addIconPosition && isHoverInAddIcon && /*#__PURE__*/React.createElement("div", {
     className: "position-fixed sdoc-table-add-element-tip background-color-tip-blue",
     style: {