@seafile/sdoc-editor 0.3.6 → 0.3.7

package/dist/basic-sdk/extension/plugins/table/popover/table-size-popover/index.js

@@ -1,37 +1,31 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useCallback, useRef, useState } from 'react';
 import classnames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { UncontrolledPopover } from 'reactstrap';
 import TableTemplate from '../table-template';
 import './index.css';
-var TableSizePopover = function TableSizePopover(_ref) {
-  var editor = _ref.editor,
-    target = _ref.target,
-    _ref$trigger = _ref.trigger,
-    trigger = _ref$trigger === void 0 ? 'legacy' : _ref$trigger,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
-    popperClassName = _ref.popperClassName,
-    createTable = _ref.createTable;
-  var minSize = [5, 10];
-  var maxSize = [10, 10];
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _useState = useState([5, 10]),
-    _useState2 = _slicedToArray(_useState, 2),
-    displaySize = _useState2[0],
-    setDisplaySize = _useState2[1];
-  var _useState3 = useState([1, 1]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    selectedSize = _useState4[0],
-    setSelectedSize = _useState4[1];
-  var ref = useRef(null);
-  var _onMouseEnter = useCallback(function (event) {
-    var cellPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [1, 1];
-    var newDisplaySize = displaySize.slice(0);
-    var cellPositionX = cellPosition[0];
-    var cellPositionY = cellPosition[1];
+const TableSizePopover = _ref => {
+  let {
+    editor,
+    target,
+    trigger = 'legacy',
+    placement = 'bottom-start',
+    popperClassName,
+    createTable
+  } = _ref;
+  const minSize = [5, 10];
+  const maxSize = [10, 10];
+  const {
+    t
+  } = useTranslation();
+  const [displaySize, setDisplaySize] = useState([5, 10]);
+  const [selectedSize, setSelectedSize] = useState([1, 1]);
+  const ref = useRef(null);
+  const onMouseEnter = useCallback(function (event) {
+    let cellPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [1, 1];
+    let newDisplaySize = displaySize.slice(0);
+    const cellPositionX = cellPosition[0];
+    const cellPositionY = cellPosition[1];
     newDisplaySize[0] = cellPositionX < minSize[0] ? minSize[0] : cellPositionX + 1;
     newDisplaySize[1] = cellPositionY < minSize[1] ? minSize[1] : cellPositionY + 1;
     if (newDisplaySize[0] > maxSize[0]) {
@@ -45,40 +39,32 @@ var TableSizePopover = function TableSizePopover(_ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [displaySize, selectedSize, maxSize, minSize]);
-  var onCreateTable = useCallback(function () {
+  const onCreateTable = useCallback(() => {
     createTable(selectedSize);
     ref && ref.current && ref.current.toggle();
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedSize, ref]);
-  var renderTableSize = useCallback(function () {
-    var tableSize = [];
-    var _loop = function _loop(i) {
-      var children = [];
-      var _loop2 = function _loop2(j) {
-        var isSelectedChild = i <= selectedSize[0] && selectedSize[0] !== 0 && j <= selectedSize[1] && selectedSize[1] !== 0;
-        var child = /*#__PURE__*/React.createElement("div", {
+  const renderTableSize = useCallback(() => {
+    let tableSize = [];
+    for (let i = 1; i <= displaySize[0]; i++) {
+      let children = [];
+      for (let j = 1; j <= displaySize[1]; j++) {
+        const isSelectedChild = i <= selectedSize[0] && selectedSize[0] !== 0 && j <= selectedSize[1] && selectedSize[1] !== 0;
+        const child = /*#__PURE__*/React.createElement("div", {
           key: "sdoc-table-size-cell-".concat(i, "-").concat(j),
           className: classnames('sdoc-table-size-cell', {
             'active': isSelectedChild
           }),
           onClick: onCreateTable,
-          onMouseEnter: function onMouseEnter(event) {
-            return _onMouseEnter(event, [i, j]);
-          }
+          onMouseEnter: event => onMouseEnter(event, [i, j])
         });
         children.push(child);
-      };
-      for (var j = 1; j <= displaySize[1]; j++) {
-        _loop2(j);
       }
       tableSize.push( /*#__PURE__*/React.createElement("div", {
         key: "sdoc-table-size-row-".concat(i),
         className: "sdoc-table-size-row d-flex"
       }, children));
-    };
-    for (var i = 1; i <= displaySize[0]; i++) {
-      _loop(i);
     }
     return tableSize;
 

package/dist/basic-sdk/extension/plugins/table/popover/table-template/index.js

@@ -5,13 +5,13 @@ import SmapleTable from './sample-table';
 import { insertTableByTemplate } from '../../helpers';
 import './index.css';
 import '../../render/alternate-color.css';
-var TableTemplate = function TableTemplate(_ref) {
-  var editor = _ref.editor,
-    targetId = _ref.targetId;
-  var tableTemplatePreviewList = useMemo(function () {
-    return Reflect.ownKeys(TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP);
-  }, []);
-  var handleClickTemplate = useCallback(function (e, alternateColor) {
+const TableTemplate = _ref => {
+  let {
+    editor,
+    targetId
+  } = _ref;
+  const tableTemplatePreviewList = useMemo(() => Reflect.ownKeys(TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP), []);
+  const handleClickTemplate = useCallback((e, alternateColor) => {
     insertTableByTemplate(editor, alternateColor);
   }, [editor]);
   return /*#__PURE__*/React.createElement(UncontrolledPopover, {
@@ -22,12 +22,10 @@ var TableTemplate = function TableTemplate(_ref) {
     fade: false,
     className: "sdoc-sub-dropdown-menu sdoc-table-template-popover",
     innerClassName: "sdoc-table-template-inner-popover"
-  }, tableTemplatePreviewList.map(function (alternateColor, index) {
-    return /*#__PURE__*/React.createElement(SmapleTable, {
-      key: alternateColor + index,
-      alternateColor: alternateColor,
-      onClickTemplate: handleClickTemplate
-    });
-  }));
+  }, tableTemplatePreviewList.map((alternateColor, index) => /*#__PURE__*/React.createElement(SmapleTable, {
+    key: alternateColor + index,
+    alternateColor: alternateColor,
+    onClickTemplate: handleClickTemplate
+  })));
 };
 export default TableTemplate;

package/dist/basic-sdk/extension/plugins/table/popover/table-template/sample-table.js

@@ -2,26 +2,22 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP } from '../../constants';
 import './index.css';
-var SmapleTable = function SmapleTable(_ref) {
-  var alternateColor = _ref.alternateColor,
-    onClickTemplate = _ref.onClickTemplate;
+const SmapleTable = _ref => {
+  let {
+    alternateColor,
+    onClickTemplate
+  } = _ref;
   // generate table
-  var renderTableRow = useCallback(function (row, column) {
-    return new Array(row).fill(null).map(function (_, index) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "sdoc-table-template-row table-row",
-        key: "sdoc-template-table-row-".concat(index),
-        onClick: function onClick(e) {
-          return onClickTemplate(e, alternateColor);
-        }
-      }, new Array(column).fill(null).map(function (_, index) {
-        return /*#__PURE__*/React.createElement("div", {
-          className: "sdoc-table-template-cell",
-          key: "sdoc-template-table-cell-".concat(index)
-        });
-      }));
-    });
-  }, [onClickTemplate, alternateColor]);
+  const renderTableRow = useCallback((row, column) => new Array(row).fill(null).map((_, index) => {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "sdoc-table-template-row table-row",
+      key: "sdoc-template-table-row-".concat(index),
+      onClick: e => onClickTemplate(e, alternateColor)
+    }, new Array(column).fill(null).map((_, index) => /*#__PURE__*/React.createElement("div", {
+      className: "sdoc-table-template-cell",
+      key: "sdoc-template-table-cell-".concat(index)
+    })));
+  }), [onClickTemplate, alternateColor]);
   return /*#__PURE__*/React.createElement("div", {
     className: "sdoc-table-template-view-table ".concat(TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP[alternateColor])
   }, renderTableRow(4, 4));

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

@@ -1,62 +1,55 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { createContext, useCallback, useContext, useEffect, useState } from 'react';
 import { useScrollContext } from '../../../../hooks/use-scroll-context';
-export var TableRootContext = createContext();
-export var useTableRootContext = function useTableRootContext() {
+export const TableRootContext = createContext();
+export const useTableRootContext = () => {
   return useContext(TableRootContext);
 };
-export var TableSelectedRangeContext = createContext();
-export var useTableSelectedRangeContext = function useTableSelectedRangeContext() {
+export const TableSelectedRangeContext = createContext();
+export const useTableSelectedRangeContext = () => {
   return useContext(TableSelectedRangeContext);
 };
-export var ResizeHandlersContext = createContext();
-export var useResizeHandlersContext = function useResizeHandlersContext() {
+export const ResizeHandlersContext = createContext();
+export const useResizeHandlersContext = () => {
   return useContext(ResizeHandlersContext);
 };
-export var SettingSelectRangeContext = createContext();
-export var useSettingSelectRangeContext = function useSettingSelectRangeContext() {
+export const SettingSelectRangeContext = createContext();
+export const useSettingSelectRangeContext = () => {
   return useContext(SettingSelectRangeContext);
 };
-export var TableRootScrollLeftContext = createContext();
-export var useTableRootScrollLeftContext = function useTableRootScrollLeftContext() {
+export const TableRootScrollLeftContext = createContext();
+export const useTableRootScrollLeftContext = () => {
   return useContext(TableRootScrollLeftContext);
 };
-export var useContextMenu = function useContextMenu(tableScrollWrapper) {
-  var scrollRef = useScrollContext();
-  var _useState = useState(),
-    _useState2 = _slicedToArray(_useState, 2),
-    isShowContextMenu = _useState2[0],
-    setShowContextMenu = _useState2[1];
-  var _useState3 = useState({}),
-    _useState4 = _slicedToArray(_useState3, 2),
-    menuPosition = _useState4[0],
-    setMenuPosition = _useState4[1];
-  var onContextMenu = useCallback(function (event) {
+export const useContextMenu = tableScrollWrapper => {
+  const scrollRef = useScrollContext();
+  const [isShowContextMenu, setShowContextMenu] = useState();
+  const [menuPosition, setMenuPosition] = useState({});
+  const onContextMenu = useCallback(event => {
     event.preventDefault();
-    var menuPosition = {
+    const menuPosition = {
       left: event.clientX,
       top: event.clientY
     };
     setShowContextMenu(true);
     setMenuPosition(menuPosition);
   }, []);
-  var hideContextMenu = useCallback(function (e) {
+  const hideContextMenu = useCallback(e => {
     if (isShowContextMenu) {
       setShowContextMenu(false);
     }
   }, [isShowContextMenu]);
-  var hideByContextmenuEvent = useCallback(function (e) {
-    var table = tableScrollWrapper.current;
-    var clickIsInCurrentTable = table && table.contains(e.target) && table !== e.target;
+  const hideByContextmenuEvent = useCallback(e => {
+    const table = tableScrollWrapper.current;
+    const clickIsInCurrentTable = table && table.contains(e.target) && table !== e.target;
     if (!clickIsInCurrentTable) {
       setShowContextMenu(false);
     }
   }, [tableScrollWrapper]);
-  useEffect(function () {
+  useEffect(() => {
     document.addEventListener('mousedown', hideContextMenu);
     document.addEventListener('contextmenu', hideByContextmenuEvent, true);
     scrollRef.current && scrollRef.current.addEventListener('scroll', hideContextMenu);
-    return function () {
+    return () => {
       document.removeEventListener('mousedown', hideContextMenu);
       document.removeEventListener('contextmenu', hideByContextmenuEvent, true);
       // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -64,8 +57,8 @@ export var useContextMenu = function useContextMenu(tableScrollWrapper) {
     };
   }, [hideContextMenu, hideByContextmenuEvent, scrollRef]);
   return {
-    isShowContextMenu: isShowContextMenu,
-    menuPosition: menuPosition,
-    onContextMenu: onContextMenu
+    isShowContextMenu,
+    menuPosition,
+    onContextMenu
   };
 };

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

@@ -1,6 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useRef, useState, useEffect, useCallback } from 'react';
 import classnames from 'classnames';
 import throttle from 'lodash.throttle';
@@ -19,41 +16,28 @@ import TableHeader from './table-header';
 import { findPath } from '../../../core';
 import './index.css';
 import './alternate-color.css';
-var Table = function Table(_ref) {
+const Table = _ref => {
   var _element$style, _element$style2;
-  var className = _ref.className,
-    attributes = _ref.attributes,
-    children = _ref.children,
-    element = _ref.element;
-  var isSelected = useSelected();
-  var editor = useSlateStatic();
-  var table = useRef(null);
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    startRowIndex = _useState2[0],
-    setStartRowIndex = _useState2[1];
-  var _useState3 = useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    startColIndex = _useState4[0],
-    setStartColIndex = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isSettingSelectRange = _useState6[0],
-    setIsSettingSelectRange = _useState6[1];
-  var _useState7 = useState(EMPTY_SELECTED_RANGE),
-    _useState8 = _slicedToArray(_useState7, 2),
-    selectedRange = _useState8[0],
-    setSelectedRange = _useState8[1];
-  var oldColumns = getTableColumns(editor, element);
-  var _useState9 = useState(oldColumns),
-    _useState10 = _slicedToArray(_useState9, 2),
-    columns = _useState10[0],
-    setColumns = _useState10[1];
-  var path = findPath(editor, element);
-  var onMouseDown = useCallback(function (event) {
+  let {
+    className,
+    attributes,
+    children,
+    element
+  } = _ref;
+  const isSelected = useSelected();
+  const editor = useSlateStatic();
+  const table = useRef(null);
+  const [startRowIndex, setStartRowIndex] = useState(0);
+  const [startColIndex, setStartColIndex] = useState(0);
+  const [isSettingSelectRange, setIsSettingSelectRange] = useState(false);
+  const [selectedRange, setSelectedRange] = useState(EMPTY_SELECTED_RANGE);
+  const oldColumns = getTableColumns(editor, element);
+  const [columns, setColumns] = useState(oldColumns);
+  const path = findPath(editor, element);
+  const onMouseDown = useCallback(event => {
     if (event.button !== 0) return; // right click not deal
     setIsSettingSelectRange(true);
-    var tableCell = getFirstTableCell(event.target);
+    const tableCell = getFirstTableCell(event.target);
     setStartRowIndex(Number(tableCell.getAttribute('row-index')));
     setStartColIndex(Number(tableCell.getAttribute('cell-index')));
     setSelectedRange(EMPTY_SELECTED_RANGE);
@@ -61,19 +45,19 @@ var Table = function Table(_ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var resetState = useCallback(function () {
+  const resetState = useCallback(() => {
     setIsSettingSelectRange(false);
     setStartColIndex(0);
     setStartRowIndex(0);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  useEffect(function () {
+  useEffect(() => {
     if (isSelected) {
-      var eventBus = EventBus.getInstance();
-      var cancelTableSelectRangeSubscribe = eventBus.subscribe(INTERNAL_EVENT.CANCEL_TABLE_SELECT_RANGE, clearRange);
-      var setTableSelectRangeSubscribe = eventBus.subscribe(INTERNAL_EVENT.SET_TABLE_SELECT_RANGE, setRange);
-      return function () {
+      const eventBus = EventBus.getInstance();
+      const cancelTableSelectRangeSubscribe = eventBus.subscribe(INTERNAL_EVENT.CANCEL_TABLE_SELECT_RANGE, clearRange);
+      const setTableSelectRangeSubscribe = eventBus.subscribe(INTERNAL_EVENT.SET_TABLE_SELECT_RANGE, setRange);
+      return () => {
         cancelTableSelectRangeSubscribe();
         setTableSelectRangeSubscribe();
       };
@@ -81,16 +65,16 @@ var Table = function Table(_ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isSelected]);
-  useEffect(function () {
+  useEffect(() => {
     setColumns(getTableColumns(editor, element));
     if (isSettingSelectRange) {
-      var onMouseMove = throttle(function (event) {
+      const onMouseMove = throttle(event => {
         // if event.target not in the table, clear the mouseMove event
         if (!table.current.contains(event.target)) return;
-        var tableCell = getFirstTableCell(event.target);
-        var endRowIndex = Number(tableCell.getAttribute('row-index'));
-        var endColIndex = Number(tableCell.getAttribute('cell-index'));
-        var newSelectedRange = {
+        const tableCell = getFirstTableCell(event.target);
+        const endRowIndex = Number(tableCell.getAttribute('row-index'));
+        const endColIndex = Number(tableCell.getAttribute('cell-index'));
+        const newSelectedRange = {
           minRowIndex: Math.min(startRowIndex, endRowIndex),
           maxRowIndex: Math.max(startRowIndex, endRowIndex),
           minColIndex: Math.min(startColIndex, endColIndex),
@@ -98,10 +82,10 @@ var Table = function Table(_ref) {
         };
         if (!ObjectUtils.isSameObject(selectedRange, EMPTY_SELECTED_RANGE)) {
           event.preventDefault();
-          Editor.withoutNormalizing(editor, function () {
-            var selection = {
+          Editor.withoutNormalizing(editor, () => {
+            const selection = {
               offset: 0,
-              path: [].concat(_toConsumableArray(path), [endRowIndex, endColIndex, 0])
+              path: [...path, endRowIndex, endColIndex, 0]
             };
             Transforms.setSelection(editor, {
               anchor: selection,
@@ -117,7 +101,7 @@ var Table = function Table(_ref) {
         }
         setSelectedRange(newSelectedRange);
       }, 200);
-      var onMouseUp = function onMouseUp(event) {
+      const onMouseUp = event => {
         if (!ObjectUtils.isSameObject(selectedRange, EMPTY_SELECTED_RANGE)) {
           setTableSelectedRange(editor, selectedRange);
         }
@@ -127,7 +111,7 @@ var Table = function Table(_ref) {
         'mousemove': onMouseMove,
         'mouseup': onMouseUp
       });
-      return function () {
+      return () => {
         unregisterResizeEvents({
           'mousemove': onMouseMove,
           'mouseup': onMouseUp
@@ -137,7 +121,7 @@ var Table = function Table(_ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [element, isSettingSelectRange, selectedRange, element]);
-  var setRange = useCallback(function (table, range) {
+  const setRange = useCallback((table, range) => {
     if (element.id !== table.id) {
       setSelectedRange(EMPTY_SELECTED_RANGE);
     } else {
@@ -147,19 +131,21 @@ var Table = function Table(_ref) {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [element]);
-  var clearRange = useCallback(function () {
+  const clearRange = useCallback(() => {
     setSelectedRange(EMPTY_SELECTED_RANGE);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var setSelectedRangeByClick = useCallback(function (range) {
+  const setSelectedRangeByClick = useCallback(range => {
     setSelectedRange(range);
     setTableSelectedRange(editor, range);
-    var maxRowIndex = range.maxRowIndex,
-      maxColIndex = range.maxColIndex;
-    var selection = {
+    const {
+      maxRowIndex,
+      maxColIndex
+    } = range;
+    const selection = {
       offset: 0,
-      path: [].concat(_toConsumableArray(path), [maxRowIndex, maxColIndex, 0])
+      path: [...path, maxRowIndex, maxColIndex, 0]
     };
     Transforms.setSelection(editor, {
       anchor: selection,
@@ -167,7 +153,7 @@ var Table = function Table(_ref) {
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, path]);
-  var tableContainerClassName = classnames('sdoc-table-container position-relative', attributes.className, className, {
+  const tableContainerClassName = classnames('sdoc-table-container position-relative', attributes.className, className, {
     'sdoc-table-selected': isSelected,
     'sdoc-table-selected-range': !ObjectUtils.isSameObject(selectedRange, EMPTY_SELECTED_RANGE)
   });
@@ -184,7 +170,9 @@ var Table = function Table(_ref) {
     table: element,
     setSelectedRange: setSelectedRangeByClick
   }), /*#__PURE__*/React.createElement("div", {
-    className: classnames(tableContainerClassName, _defineProperty({}, TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP[element === null || element === void 0 ? void 0 : (_element$style = element.style) === null || _element$style === void 0 ? void 0 : _element$style.alternate_highlight_color], element === null || element === void 0 ? void 0 : (_element$style2 = element.style) === null || _element$style2 === void 0 ? void 0 : _element$style2.alternate_highlight)),
+    className: classnames(tableContainerClassName, {
+      [TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP[element === null || element === void 0 ? void 0 : (_element$style = element.style) === null || _element$style === void 0 ? void 0 : _element$style.alternate_highlight_color]]: element === null || element === void 0 ? void 0 : (_element$style2 = element.style) === null || _element$style2 === void 0 ? void 0 : _element$style2.alternate_highlight
+    }),
     onMouseDown: onMouseDown,
     ref: table,
     "data-id": element.id
@@ -194,14 +182,16 @@ var Table = function Table(_ref) {
 };
 function renderTable(props) {
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  var readOnly = useReadOnly();
+  const readOnly = useReadOnly();
   if (readOnly) {
-    var className = props.className,
-      attributes = props.attributes,
-      children = props.children,
-      element = props.element;
+    const {
+      className,
+      attributes,
+      children,
+      element
+    } = props;
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    var editor = useSlateStatic();
+    const editor = useSlateStatic();
     return /*#__PURE__*/React.createElement(TableRoot, {
       columns: getTableColumns(editor, element),
       attributes: attributes

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

@@ -8,37 +8,41 @@ import { findPath, focusEditor } from '../../../core';
 import { useResizeHandlersContext, useTableSelectedRangeContext } from './hooks';
 import { EMPTY_SELECTED_RANGE, SELECTED_TABLE_CELL_BACKGROUND_COLOR, TABLE_CELL_STYLE } from '../constants';
 import { getTableColumns, getCellColumn, colorBlend } from '../helpers';
-var TableCell = function TableCell(_ref) {
-  var attributes = _ref.attributes,
-    element = _ref.element,
-    children = _ref.children;
-  var editor = useSlateStatic();
-  var selectedRange = useTableSelectedRangeContext() || EMPTY_SELECTED_RANGE;
-  var cellPath = findPath(editor, element, [0, 0]);
-  var columns = useResizeHandlersContext() || getTableColumns(editor, element);
-  var pathLength = cellPath.length;
-  var rowIndex = cellPath[pathLength - 2];
-  var cellIndex = cellPath[pathLength - 1];
-  var column = columns ? columns[cellIndex] : {};
-  var columnWidth = (column === null || column === void 0 ? void 0 : column.width) || 0;
-  var minColIndex = selectedRange.minColIndex,
-    maxColIndex = selectedRange.maxColIndex,
-    minRowIndex = selectedRange.minRowIndex,
-    maxRowIndex = selectedRange.maxRowIndex;
-  var isRowSelected = rowIndex >= minRowIndex && rowIndex <= maxRowIndex;
-  var isSelected = isRowSelected && cellIndex >= minColIndex && cellIndex <= maxColIndex;
-  var isSelectedFirstCell = isSelected && cellIndex === minColIndex;
-  var isSelectedLastCell = isSelected && cellIndex === maxColIndex;
-  var isSelectedFirstRow = isSelected && rowIndex === minRowIndex;
-  var isSelectedLastRow = isSelected && rowIndex === maxRowIndex;
-  var onContextMenu = useCallback(function (event) {
-    var path = findPath(editor, element);
+const TableCell = _ref => {
+  let {
+    attributes,
+    element,
+    children
+  } = _ref;
+  const editor = useSlateStatic();
+  const selectedRange = useTableSelectedRangeContext() || EMPTY_SELECTED_RANGE;
+  const cellPath = findPath(editor, element, [0, 0]);
+  const columns = useResizeHandlersContext() || getTableColumns(editor, element);
+  const pathLength = cellPath.length;
+  const rowIndex = cellPath[pathLength - 2];
+  const cellIndex = cellPath[pathLength - 1];
+  const column = columns ? columns[cellIndex] : {};
+  const columnWidth = (column === null || column === void 0 ? void 0 : column.width) || 0;
+  const {
+    minColIndex,
+    maxColIndex,
+    minRowIndex,
+    maxRowIndex
+  } = selectedRange;
+  const isRowSelected = rowIndex >= minRowIndex && rowIndex <= maxRowIndex;
+  const isSelected = isRowSelected && cellIndex >= minColIndex && cellIndex <= maxColIndex;
+  const isSelectedFirstCell = isSelected && cellIndex === minColIndex;
+  const isSelectedLastCell = isSelected && cellIndex === maxColIndex;
+  const isSelectedFirstRow = isSelected && rowIndex === minRowIndex;
+  const isSelectedLastRow = isSelected && rowIndex === maxRowIndex;
+  const onContextMenu = useCallback(event => {
+    const path = findPath(editor, element);
     focusEditor(editor, path);
     Transforms.collapse(editor, {
       edge: 'end'
     });
   }, [editor, element]);
-  var style = attributes.style || {};
+  let style = attributes.style || {};
   if (ObjectUtils.hasProperty(element.style, TABLE_CELL_STYLE.TEXT_ALIGN)) {
     style['textAlign'] = element.style[TABLE_CELL_STYLE.TEXT_ALIGN];
   }
@@ -46,7 +50,7 @@ var TableCell = function TableCell(_ref) {
     style['backgroundColor'] = SELECTED_TABLE_CELL_BACKGROUND_COLOR;
   }
   if (ObjectUtils.hasProperty(element.style, TABLE_CELL_STYLE.BACKGROUND_COLOR)) {
-    var color = element.style[TABLE_CELL_STYLE.BACKGROUND_COLOR];
+    const color = element.style[TABLE_CELL_STYLE.BACKGROUND_COLOR];
     if (color && color !== 'transparent' && color !== 'unset') {
       style['backgroundColor'] = isSelected ? colorBlend(SELECTED_TABLE_CELL_BACKGROUND_COLOR, color, 0.9) : color;
     }
@@ -72,27 +76,29 @@ var TableCell = function TableCell(_ref) {
 };
 function renderTableCell(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 cellPath = findPath(editor, element);
+    const editor = useSlateStatic();
+    const cellPath = findPath(editor, element);
     if (!cellPath) return null;
 
     // const cellValue = element;
-    var style = attributes.style || {};
+    let style = attributes.style || {};
     if (ObjectUtils.hasProperty(element.style, TABLE_CELL_STYLE.TEXT_ALIGN)) {
       style['textAlign'] = element.style[TABLE_CELL_STYLE.TEXT_ALIGN];
     }
     if (ObjectUtils.hasProperty(element.style, TABLE_CELL_STYLE.BACKGROUND_COLOR) && element.style[TABLE_CELL_STYLE.BACKGROUND_COLOR]) {
       style['backgroundColor'] = element.style[TABLE_CELL_STYLE.BACKGROUND_COLOR];
     }
-    var column = getCellColumn(editor, element);
-    var width = column.width;
+    const column = getCellColumn(editor, element);
+    const width = column.width;
     return /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
       style: _objectSpread(_objectSpread(_objectSpread({}, element.style), style), {}, {
         minWidth: width,