@seafile/sdoc-editor 1.0.54 → 1.0.56

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

@@ -1,23 +1,31 @@
-import React, { useRef, useState, useEffect, useCallback } from 'react';
-import classnames from 'classnames';
-import throttle from 'lodash.throttle';
-import { useSelected, useSlateStatic, useReadOnly, ReactEditor } from '@seafile/slate-react';
-import { Transforms, Editor } from '@seafile/slate';
-import { EMPTY_SELECTED_RANGE } from '../constants';
-import { ResizeHandlersContext, TableSelectedRangeContext, SettingSelectRangeContext } from './hooks';
-import EventBus from '../../../../utils/event-bus';
-import { INTERNAL_EVENT } from '../../../../constants';
-import { getTableColumns, setTableSelectedRange, getFirstTableCell, getRowHeight, adjustCombinedCellRange } from '../helpers';
-import ObjectUtils from '../../../../utils/object-utils';
-import ResizeHandlers from './resize-handlers';
-import { registerResizeEvents, unregisterResizeEvents } from '../../../../utils/mouse-event';
-import TableRoot from './table-root';
-import TableHeader from './table-header';
-import { findPath } from '../../../core';
-import ResizeMask from './resize-mask';
-import DragHandlers from './drag-handlers';
-import './index.css';
-import './alternate-color.css';
+"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 _classnames = _interopRequireDefault(require("classnames"));
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
+var _slateReact = require("@seafile/slate-react");
+var _slate = require("@seafile/slate");
+var _constants = require("../constants");
+var _hooks = require("./hooks");
+var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
+var _constants2 = require("../../../../constants");
+var _helpers = require("../helpers");
+var _objectUtils = _interopRequireDefault(require("../../../../utils/object-utils"));
+var _resizeHandlers = _interopRequireDefault(require("./resize-handlers"));
+var _mouseEvent = require("../../../../utils/mouse-event");
+var _tableRoot = _interopRequireDefault(require("./table-root"));
+var _tableHeader = _interopRequireDefault(require("./table-header"));
+var _core = require("../../../core");
+var _resizeMask = _interopRequireDefault(require("./resize-mask"));
+var _dragHandlers = _interopRequireDefault(require("./drag-handlers"));
+require("./index.css");
+require("./alternate-color.css");
 const Table = _ref => {
   let {
     className,
@@ -25,38 +33,38 @@ const Table = _ref => {
     children,
     element
   } = _ref;
-  const isSelected = useSelected();
-  const editor = useSlateStatic();
-  const table = useRef(null);
-  const [startRowIndex, setStartRowIndex] = useState(0);
-  const [startColIndex, setStartColIndex] = useState(0);
-  const [startRowSpan, setStartRowSpan] = useState(1);
-  const [startColSpan, setStartColSpan] = useState(1);
-  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 [resizeCellMaskInfo, setResizeCellMaskInfo] = useState({});
-  const [isShowResizeHandlers, setIsShowResizeHandlers] = useState(false);
-  const [isDraggingResizeHandler, setIsDraggingResizeHandler] = useState(false);
-  const [isDragMove, setIsDragMove] = useState(false);
-  const onMouseDown = useCallback(event => {
+  const isSelected = (0, _slateReact.useSelected)();
+  const editor = (0, _slateReact.useSlateStatic)();
+  const table = (0, _react.useRef)(null);
+  const [startRowIndex, setStartRowIndex] = (0, _react.useState)(0);
+  const [startColIndex, setStartColIndex] = (0, _react.useState)(0);
+  const [startRowSpan, setStartRowSpan] = (0, _react.useState)(1);
+  const [startColSpan, setStartColSpan] = (0, _react.useState)(1);
+  const [isSettingSelectRange, setIsSettingSelectRange] = (0, _react.useState)(false);
+  const [selectedRange, setSelectedRange] = (0, _react.useState)(_constants.EMPTY_SELECTED_RANGE);
+  const oldColumns = (0, _helpers.getTableColumns)(editor, element);
+  const [columns, setColumns] = (0, _react.useState)(oldColumns);
+  const path = (0, _core.findPath)(editor, element);
+  const [resizeCellMaskInfo, setResizeCellMaskInfo] = (0, _react.useState)({});
+  const [isShowResizeHandlers, setIsShowResizeHandlers] = (0, _react.useState)(false);
+  const [isDraggingResizeHandler, setIsDraggingResizeHandler] = (0, _react.useState)(false);
+  const [isDragMove, setIsDragMove] = (0, _react.useState)(false);
+  const onMouseDown = (0, _react.useCallback)(event => {
     if (event.button !== 0) return; // right click not deal
     setIsSettingSelectRange(true);
     if (!table.current.contains(event.target)) return;
-    const tableCell = getFirstTableCell(event.target);
+    const tableCell = (0, _helpers.getFirstTableCell)(event.target);
     const cellData = tableCell.style.gridArea.split(' / ');
     setStartRowIndex(Number(tableCell.getAttribute('row-index')));
     setStartColIndex(Number(tableCell.getAttribute('cell-index')));
     setStartRowSpan(Number(cellData[2].split(' ')[1]));
     setStartColSpan(Number(cellData[3].split(' ')[1]));
-    setSelectedRange(EMPTY_SELECTED_RANGE);
-    setTableSelectedRange(editor, EMPTY_SELECTED_RANGE);
+    setSelectedRange(_constants.EMPTY_SELECTED_RANGE);
+    (0, _helpers.setTableSelectedRange)(editor, _constants.EMPTY_SELECTED_RANGE);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  const resetState = useCallback(() => {
+  const resetState = (0, _react.useCallback)(() => {
     setIsSettingSelectRange(false);
     setStartColIndex(0);
     setStartRowIndex(0);
@@ -65,9 +73,9 @@ const Table = _ref => {
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  const setSelectedRangeByClick = useCallback(range => {
+  const setSelectedRangeByClick = (0, _react.useCallback)(range => {
     setSelectedRange(range);
-    setTableSelectedRange(editor, range);
+    (0, _helpers.setTableSelectedRange)(editor, range);
     const {
       minRowIndex,
       minColIndex
@@ -76,50 +84,50 @@ const Table = _ref => {
       offset: 0,
       path: [...path, minRowIndex, minColIndex, 0]
     };
-    Transforms.setSelection(editor, {
+    _slate.Transforms.setSelection(editor, {
       anchor: selection,
       focus: selection
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, path]);
-  useEffect(() => {
-    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);
+  (0, _react.useEffect)(() => {
+    const eventBus = _eventBus.default.getInstance();
+    const cancelTableSelectRangeSubscribe = eventBus.subscribe(_constants2.INTERNAL_EVENT.CANCEL_TABLE_SELECT_RANGE, clearRange);
+    const setTableSelectRangeSubscribe = eventBus.subscribe(_constants2.INTERNAL_EVENT.SET_TABLE_SELECT_RANGE, setRange);
     return () => {
       cancelTableSelectRangeSubscribe();
       setTableSelectRangeSubscribe();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  useEffect(() => {
-    setColumns(getTableColumns(editor, element));
+  (0, _react.useEffect)(() => {
+    setColumns((0, _helpers.getTableColumns)(editor, element));
     if (isSettingSelectRange) {
-      const onMouseMove = throttle(event => {
+      const onMouseMove = (0, _lodash.default)(event => {
         // if event.target not in the table, clear the mouseMove event
         if (!table.current.contains(event.target)) return;
-        const tableCell = getFirstTableCell(event.target);
+        const tableCell = (0, _helpers.getFirstTableCell)(event.target);
         const endRowIndex = Number(tableCell.getAttribute('row-index'));
         const endColIndex = Number(tableCell.getAttribute('cell-index'));
         const cellData = tableCell.style.gridArea.split(' / ');
         const endRowSpan = Number(cellData[2].split(' ')[1]);
         const endColSpan = Number(cellData[3].split(' ')[1]);
-        const tableSlateNode = ReactEditor.toSlateNode(editor, table.current);
+        const tableSlateNode = _slateReact.ReactEditor.toSlateNode(editor, table.current);
         let newSelectedRange = {
           minRowIndex: Math.min(startRowIndex, endRowIndex),
           maxRowIndex: startRowIndex < endRowIndex ? endRowIndex + endRowSpan - 1 : startRowIndex + startRowSpan - 1,
           minColIndex: Math.min(startColIndex, endColIndex),
           maxColIndex: startColIndex < endColIndex ? endColIndex + endColSpan - 1 : startColIndex + startColSpan - 1
         };
-        newSelectedRange = adjustCombinedCellRange(tableSlateNode, newSelectedRange);
-        if (!ObjectUtils.isSameObject(selectedRange, EMPTY_SELECTED_RANGE)) {
+        newSelectedRange = (0, _helpers.adjustCombinedCellRange)(tableSlateNode, newSelectedRange);
+        if (!_objectUtils.default.isSameObject(selectedRange, _constants.EMPTY_SELECTED_RANGE)) {
           event.preventDefault();
-          Editor.withoutNormalizing(editor, () => {
+          _slate.Editor.withoutNormalizing(editor, () => {
             const selection = {
               offset: 0,
               path: [...path, endRowIndex, endColIndex, 0]
             };
-            Transforms.setSelection(editor, {
+            _slate.Transforms.setSelection(editor, {
               anchor: selection,
               focus: selection
             });
@@ -128,12 +136,12 @@ const Table = _ref => {
 
         // same cell
         if (newSelectedRange.minRowIndex === newSelectedRange.maxRowIndex && newSelectedRange.minColIndex === newSelectedRange.maxColIndex) {
-          setSelectedRange(EMPTY_SELECTED_RANGE);
-          setTableSelectedRange(editor, EMPTY_SELECTED_RANGE);
+          setSelectedRange(_constants.EMPTY_SELECTED_RANGE);
+          (0, _helpers.setTableSelectedRange)(editor, _constants.EMPTY_SELECTED_RANGE);
           return;
         }
         setSelectedRange(newSelectedRange);
-        setTableSelectedRange(editor, newSelectedRange);
+        (0, _helpers.setTableSelectedRange)(editor, newSelectedRange);
       }, 200);
       const onMouseUp = event => {
         /*
@@ -143,12 +151,12 @@ const Table = _ref => {
         */
         resetState();
       };
-      registerResizeEvents({
+      (0, _mouseEvent.registerResizeEvents)({
         'mousemove': onMouseMove,
         'mouseup': onMouseUp
       });
       return () => {
-        unregisterResizeEvents({
+        (0, _mouseEvent.unregisterResizeEvents)({
           'mousemove': onMouseMove,
           'mouseup': onMouseUp
         });
@@ -156,82 +164,82 @@ const Table = _ref => {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [element, isSettingSelectRange, selectedRange, element]);
-  const setRange = useCallback((table, range) => {
+  const setRange = (0, _react.useCallback)((table, range) => {
     if (element.id !== table.id) {
-      setSelectedRange(EMPTY_SELECTED_RANGE);
+      setSelectedRange(_constants.EMPTY_SELECTED_RANGE);
     } else {
       setSelectedRange(range);
     }
-    setTableSelectedRange(editor, range);
+    (0, _helpers.setTableSelectedRange)(editor, range);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [element]);
-  const clearRange = useCallback(() => {
-    setSelectedRange(EMPTY_SELECTED_RANGE);
+  const clearRange = (0, _react.useCallback)(() => {
+    setSelectedRange(_constants.EMPTY_SELECTED_RANGE);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  const tableContainerClassName = classnames('sdoc-table-container position-relative', attributes.className, className, {
+  const tableContainerClassName = (0, _classnames.default)('sdoc-table-container position-relative', attributes.className, className, {
     'sdoc-table-selected': isSelected,
-    'sdoc-table-selected-range': !ObjectUtils.isSameObject(selectedRange, EMPTY_SELECTED_RANGE)
+    'sdoc-table-selected-range': !_objectUtils.default.isSameObject(selectedRange, _constants.EMPTY_SELECTED_RANGE)
   });
-  const handleShowResizeHandler = useCallback(cellInfo => {
+  const handleShowResizeHandler = (0, _react.useCallback)(cellInfo => {
     setResizeCellMaskInfo(cellInfo);
     setIsShowResizeHandlers(true);
   }, []);
-  const hideResizeHandlers = useCallback(() => {
+  const hideResizeHandlers = (0, _react.useCallback)(() => {
     setIsShowResizeHandlers(false);
     setIsDraggingResizeHandler(false);
   }, []);
-  const handlerStartDragging = useCallback(() => {
+  const handlerStartDragging = (0, _react.useCallback)(() => {
     setIsDraggingResizeHandler(true);
   }, []);
   let style = element.style ? {
     ...element.style
   } : {};
-  const columnWidthList = columns.map(item => "".concat(item.width, "px"));
+  const columnWidthList = columns.map(item => `${item.width}px`);
   style.gridTemplateColumns = columnWidthList.join(' ');
-  const rowHeightList = element.children.map((item, index) => getRowHeight(item, index));
-  style.gridAutoRows = rowHeightList.map(item => "minmax(".concat(item, "px, auto)")).join(' ');
-  return /*#__PURE__*/React.createElement(TableSelectedRangeContext.Provider, {
+  const rowHeightList = element.children.map((item, index) => (0, _helpers.getRowHeight)(item, index));
+  style.gridAutoRows = rowHeightList.map(item => `minmax(${item}px, auto)`).join(' ');
+  return /*#__PURE__*/_react.default.createElement(_hooks.TableSelectedRangeContext.Provider, {
     value: selectedRange
-  }, /*#__PURE__*/React.createElement(ResizeHandlersContext.Provider, {
+  }, /*#__PURE__*/_react.default.createElement(_hooks.ResizeHandlersContext.Provider, {
     value: columns
-  }, /*#__PURE__*/React.createElement(SettingSelectRangeContext.Provider, {
+  }, /*#__PURE__*/_react.default.createElement(_hooks.SettingSelectRangeContext.Provider, {
     value: isSettingSelectRange
-  }, /*#__PURE__*/React.createElement(TableRoot, {
+  }, /*#__PURE__*/_react.default.createElement(_tableRoot.default, {
     columns: columns,
     attributes: attributes
-  }, isSelected && /*#__PURE__*/React.createElement(TableHeader, {
+  }, isSelected && /*#__PURE__*/_react.default.createElement(_tableHeader.default, {
     editor: editor,
     table: element,
     setSelectedRange: setSelectedRangeByClick,
     setIsDragMove: setIsDragMove
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classnames(tableContainerClassName),
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(tableContainerClassName),
     style: style,
     onMouseDown: onMouseDown,
     ref: table,
     "data-id": element.id
-  }, children, !isSettingSelectRange && /*#__PURE__*/React.createElement(ResizeMask, {
+  }, children, !isSettingSelectRange && /*#__PURE__*/_react.default.createElement(_resizeMask.default, {
     editor: editor,
     table: element,
     handleShowResizeHandler: handleShowResizeHandler,
     hideResizeHandlers: hideResizeHandlers,
     handlerStartDragging: handlerStartDragging,
     isDraggingResizeHandler: isDraggingResizeHandler
-  }), !isSettingSelectRange && isShowResizeHandlers && /*#__PURE__*/React.createElement(ResizeHandlers, {
+  }), !isSettingSelectRange && isShowResizeHandlers && /*#__PURE__*/_react.default.createElement(_resizeHandlers.default, {
     hideResizeHandlers: hideResizeHandlers,
     element: element,
     resizeCellMaskInfo: resizeCellMaskInfo,
     isDraggingResizeHandler: isDraggingResizeHandler
-  }), isDragMove && /*#__PURE__*/React.createElement(DragHandlers, {
+  }), isDragMove && /*#__PURE__*/_react.default.createElement(_dragHandlers.default, {
     table: element
   }))))));
 };
 function renderTable(props) {
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  const readOnly = useReadOnly();
+  const readOnly = (0, _slateReact.useReadOnly)();
   if (readOnly) {
     const {
       className,
@@ -240,24 +248,24 @@ function renderTable(props) {
       element
     } = props;
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const editor = useSlateStatic();
-    const columns = getTableColumns(editor, element);
+    const editor = (0, _slateReact.useSlateStatic)();
+    const columns = (0, _helpers.getTableColumns)(editor, element);
     let style = element.style ? {
       ...element.style
     } : {};
-    const columnWidthList = columns.map(item => "".concat(item.width, "px"));
+    const columnWidthList = columns.map(item => `${item.width}px`);
     style.gridTemplateColumns = columnWidthList.join(' ');
-    const rowHeightList = element.children.map((item, index) => getRowHeight(item, index));
-    style.gridAutoRows = rowHeightList.map(item => "minmax(".concat(item, "px, auto)")).join(' ');
-    return /*#__PURE__*/React.createElement(TableRoot, {
+    const rowHeightList = element.children.map((item, index) => (0, _helpers.getRowHeight)(item, index));
+    style.gridAutoRows = rowHeightList.map(item => `minmax(${item}px, auto)`).join(' ');
+    return /*#__PURE__*/_react.default.createElement(_tableRoot.default, {
       columns: columns,
       attributes: attributes
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classnames('sdoc-table-container', attributes.className, className),
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)('sdoc-table-container', attributes.className, className),
       "data-id": element.id,
       style: style
     }, children));
   }
-  return /*#__PURE__*/React.createElement(Table, props);
+  return /*#__PURE__*/_react.default.createElement(Table, props);
 }
-export default renderTable;
+var _default = exports.default = renderTable;

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

@@ -1,29 +1,37 @@
-import React, { useCallback, useMemo, useRef } from 'react';
-import classnames from 'classnames';
-import { useSlateStatic, useReadOnly } from '@seafile/slate-react';
-import { Editor, Transforms } from '@seafile/slate';
-import ObjectUtils from '../../../../utils/object-utils';
-import { findPath, focusEditor } from '../../../core';
-import { useTableSelectedRangeContext } from './hooks';
-import { CELL_SELECTED, DRAG_HANDLER_COLUMN, EMPTY_SELECTED_RANGE, SELECTED_TABLE_CELL_BACKGROUND_COLOR, TABLE_CELL_STYLE } from '../constants';
-import { colorBlend, getHighlightClass, getResizeMaskCellInfo, getTableDragType, moveColumns, moveRows, isHideDragHandlerLine, getTableSelectedRangeAfterDrag } from '../helpers';
-import EventBus from '../../../../utils/event-bus';
-import { INTERNAL_EVENT } from '../../../../constants';
-import { TABLE_DRAG_KEY } from '../../../constants';
+"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 _classnames = _interopRequireDefault(require("classnames"));
+var _slateReact = require("@seafile/slate-react");
+var _slate = require("@seafile/slate");
+var _objectUtils = _interopRequireDefault(require("../../../../utils/object-utils"));
+var _core = require("../../../core");
+var _hooks = require("./hooks");
+var _constants = require("../constants");
+var _helpers = require("../helpers");
+var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
+var _constants2 = require("../../../../constants");
+var _constants3 = require("../../../constants");
 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 editor = (0, _slateReact.useSlateStatic)();
+  const selectedRange = (0, _hooks.useTableSelectedRangeContext)() || _constants.EMPTY_SELECTED_RANGE;
+  const cellPath = (0, _core.findPath)(editor, element, [0, 0]);
   const pathLength = cellPath.length;
   const rowIndex = cellPath[pathLength - 2];
   const cellIndex = cellPath[pathLength - 1];
-  const rowEntry = Editor.parent(editor, cellPath);
-  const tableEntry = Editor.parent(editor, rowEntry[1]);
+  const rowEntry = _slate.Editor.parent(editor, cellPath);
+  const tableEntry = _slate.Editor.parent(editor, rowEntry[1]);
   const {
     minColIndex,
     maxColIndex,
@@ -36,28 +44,28 @@ const TableCell = _ref => {
   const isSelectedLastCell = isSelected && cellIndex === maxColIndex;
   const isSelectedFirstRow = isSelected && rowIndex === minRowIndex;
   const isSelectedLastRow = isSelected && rowIndex === maxRowIndex;
-  const eventBus = EventBus.getInstance();
+  const eventBus = _eventBus.default.getInstance();
   const tableId = tableEntry[0].id;
-  const canDrop = useRef(false);
-  const isDragOverHalfCell = useRef(false);
-  const onContextMenu = useCallback(event => {
-    const path = findPath(editor, element);
-    focusEditor(editor, path);
-    Transforms.collapse(editor, {
+  const canDrop = (0, _react.useRef)(false);
+  const isDragOverHalfCell = (0, _react.useRef)(false);
+  const onContextMenu = (0, _react.useCallback)(event => {
+    const path = (0, _core.findPath)(editor, element);
+    (0, _core.focusEditor)(editor, path);
+    _slate.Transforms.collapse(editor, {
       edge: 'end'
     });
   }, [editor, element]);
   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.default.hasProperty(element.style, _constants.TABLE_CELL_STYLE.TEXT_ALIGN)) {
+    style['textAlign'] = element.style[_constants.TABLE_CELL_STYLE.TEXT_ALIGN];
   }
   if (isSelected) {
-    style['backgroundColor'] = SELECTED_TABLE_CELL_BACKGROUND_COLOR;
+    style['backgroundColor'] = _constants.SELECTED_TABLE_CELL_BACKGROUND_COLOR;
   }
-  if (ObjectUtils.hasProperty(element.style, TABLE_CELL_STYLE.BACKGROUND_COLOR)) {
-    const color = element.style[TABLE_CELL_STYLE.BACKGROUND_COLOR];
+  if (_objectUtils.default.hasProperty(element.style, _constants.TABLE_CELL_STYLE.BACKGROUND_COLOR)) {
+    const color = element.style[_constants.TABLE_CELL_STYLE.BACKGROUND_COLOR];
     if (color && color !== 'transparent' && color !== 'unset') {
-      style['backgroundColor'] = isSelected ? colorBlend(SELECTED_TABLE_CELL_BACKGROUND_COLOR, color, 0.9) : color;
+      style['backgroundColor'] = isSelected ? (0, _helpers.colorBlend)(_constants.SELECTED_TABLE_CELL_BACKGROUND_COLOR, color, 0.9) : color;
     }
   }
   if (element.is_combined) {
@@ -73,7 +81,7 @@ const TableCell = _ref => {
     rowspan = 1,
     colspan = 1
   } = element;
-  style.gridArea = "".concat(rowIndex + 1, " / ").concat(cellIndex + 1, " / span ").concat(rowspan, " / span ").concat(colspan);
+  style.gridArea = `${rowIndex + 1} / ${cellIndex + 1} / span ${rowspan} / span ${colspan}`;
   if (element.style) {
     style = {
       ...element.style,
@@ -81,7 +89,7 @@ const TableCell = _ref => {
     };
   }
   const onMouseMove = mouseDownEvent => {
-    eventBus.dispatch(INTERNAL_EVENT.TABLE_CELL_MOUSE_ENTER, {
+    eventBus.dispatch(_constants2.INTERNAL_EVENT.TABLE_CELL_MOUSE_ENTER, {
       mouseDownEvent,
       cell: element,
       rowIndex,
@@ -90,21 +98,21 @@ const TableCell = _ref => {
     });
   };
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const highlightClass = useMemo(() => getHighlightClass(editor, cellPath), []);
-  const onDragOver = useCallback(event => {
+  const highlightClass = (0, _react.useMemo)(() => (0, _helpers.getHighlightClass)(editor, cellPath), []);
+  const onDragOver = (0, _react.useCallback)(event => {
     const {
       target
     } = event;
     const table = tableEntry[0];
-    const displayType = getTableDragType(table, selectedRange);
-    const resizeMaskCellInfo = getResizeMaskCellInfo(editor, table, rowIndex, cellIndex);
+    const displayType = (0, _helpers.getTableDragType)(table, selectedRange);
+    const resizeMaskCellInfo = (0, _helpers.getResizeMaskCellInfo)(editor, table, rowIndex, cellIndex);
     const cellInfo = {
       ...resizeMaskCellInfo,
       displayType,
       mouseDownEvent: event,
       tableId
     };
-    if (cellInfo.displayType === DRAG_HANDLER_COLUMN) {
+    if (cellInfo.displayType === _constants.DRAG_HANDLER_COLUMN) {
       const offsetX = cellInfo.mouseDownEvent.nativeEvent.offsetX;
       const cellWidth = cellInfo.width;
       const cellIndex = cellInfo.cellIndex;
@@ -131,23 +139,23 @@ const TableCell = _ref => {
         isDragOverHalfCell.current = false;
       }
     }
-    const isHideHandleLine = isHideDragHandlerLine(editor, displayType, table, cellPath, isDragOverHalfCell.current);
+    const isHideHandleLine = (0, _helpers.isHideDragHandlerLine)(editor, displayType, table, cellPath, isDragOverHalfCell.current);
     canDrop.current = !isHideHandleLine;
-    if (target.classList.contains(CELL_SELECTED) || isHideHandleLine) {
+    if (target.classList.contains(_constants.CELL_SELECTED) || isHideHandleLine) {
       cellInfo.top = -9999;
       cellInfo.left = -9999;
     }
-    eventBus.dispatch(INTERNAL_EVENT.TABLE_SHOW_DRAG_HANDLER, cellInfo);
+    eventBus.dispatch(_constants2.INTERNAL_EVENT.TABLE_SHOW_DRAG_HANDLER, cellInfo);
   }, [cellIndex, cellPath, editor, eventBus, rowIndex, selectedRange, tableEntry, tableId]);
-  const handleDrop = useCallback(event => {
+  const handleDrop = (0, _react.useCallback)(event => {
     event.stopPropagation();
     event.preventDefault();
     if (!canDrop.current) return;
     const {
       target
     } = event;
-    if (target.classList.contains(CELL_SELECTED)) return;
-    const dragDataJson = event.dataTransfer.getData(TABLE_DRAG_KEY);
+    if (target.classList.contains(_constants.CELL_SELECTED)) return;
+    const dragDataJson = event.dataTransfer.getData(_constants3.TABLE_DRAG_KEY);
     if (!dragDataJson) return;
     const dragData = JSON.parse(dragDataJson);
     if (dragData) {
@@ -159,18 +167,18 @@ const TableCell = _ref => {
         dragType
       } = dragData;
       if (dragTableId !== tableId) return;
-      dragType === DRAG_HANDLER_COLUMN ? moveColumns(editor, cellIndex + offset, startIndex, endIndex) : moveRows(editor, rowIndex + offset, startIndex, endIndex);
-      const range = dragType === DRAG_HANDLER_COLUMN ? getTableSelectedRangeAfterDrag(tableEntry[0], dragType, cellIndex + offset, startIndex, endIndex) : getTableSelectedRangeAfterDrag(tableEntry[0], dragType, rowIndex + offset, startIndex, endIndex);
-      eventBus.dispatch(INTERNAL_EVENT.SET_TABLE_SELECT_RANGE, tableEntry[0], range);
+      dragType === _constants.DRAG_HANDLER_COLUMN ? (0, _helpers.moveColumns)(editor, cellIndex + offset, startIndex, endIndex) : (0, _helpers.moveRows)(editor, rowIndex + offset, startIndex, endIndex);
+      const range = dragType === _constants.DRAG_HANDLER_COLUMN ? (0, _helpers.getTableSelectedRangeAfterDrag)(tableEntry[0], dragType, cellIndex + offset, startIndex, endIndex) : (0, _helpers.getTableSelectedRangeAfterDrag)(tableEntry[0], dragType, rowIndex + offset, startIndex, endIndex);
+      eventBus.dispatch(_constants2.INTERNAL_EVENT.SET_TABLE_SELECT_RANGE, tableEntry[0], range);
     }
   }, [cellIndex, editor, eventBus, rowIndex, tableEntry, tableId]);
-  return /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
+  return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, attributes, {
     style: {
       ...element.style,
       ...style
     },
-    className: classnames('table-cell', attributes.className, highlightClass, {
-      [CELL_SELECTED]: isSelected,
+    className: (0, _classnames.default)('table-cell', attributes.className, highlightClass, {
+      [_constants.CELL_SELECTED]: isSelected,
       'cell-light-height-left-border': isSelectedFirstCell,
       'cell-light-height-right-border': isSelectedLastCell,
       'cell-light-height-top-border': isSelectedFirstRow,
@@ -183,13 +191,13 @@ const TableCell = _ref => {
     onMouseMove: onMouseMove,
     onDragOver: onDragOver,
     onDrop: handleDrop
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "sdoc-cell-container"
   }, children));
 };
 function renderTableCell(props) {
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  const readOnly = useReadOnly();
+  const readOnly = (0, _slateReact.useReadOnly)();
   if (readOnly) {
     const {
       attributes,
@@ -198,23 +206,23 @@ function renderTableCell(props) {
     } = props;
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const editor = useSlateStatic();
-    const cellPath = findPath(editor, element, [0, 0]);
+    const editor = (0, _slateReact.useSlateStatic)();
+    const cellPath = (0, _core.findPath)(editor, element, [0, 0]);
     if (!cellPath) return null;
     const pathLength = cellPath.length;
     const rowIndex = cellPath[pathLength - 2];
     const cellIndex = cellPath[pathLength - 1];
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const highlightClass = useMemo(() => getHighlightClass(editor, cellPath), [cellPath, editor]);
+    const highlightClass = (0, _react.useMemo)(() => (0, _helpers.getHighlightClass)(editor, cellPath), [cellPath, editor]);
 
     // const cellValue = element;
     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.default.hasProperty(element.style, _constants.TABLE_CELL_STYLE.TEXT_ALIGN)) {
+      style['textAlign'] = element.style[_constants.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];
+    if (_objectUtils.default.hasProperty(element.style, _constants.TABLE_CELL_STYLE.BACKGROUND_COLOR) && element.style[_constants.TABLE_CELL_STYLE.BACKGROUND_COLOR]) {
+      style['backgroundColor'] = element.style[_constants.TABLE_CELL_STYLE.BACKGROUND_COLOR];
     }
     if (element.is_combined) {
       style.display = 'none';
@@ -229,18 +237,18 @@ function renderTableCell(props) {
       rowspan = 1,
       colspan = 1
     } = element;
-    style.gridArea = "".concat(rowIndex + 1, " / ").concat(cellIndex + 1, " / span ").concat(rowspan, " / span ").concat(colspan);
-    return /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
+    style.gridArea = `${rowIndex + 1} / ${cellIndex + 1} / span ${rowspan} / span ${colspan}`;
+    return /*#__PURE__*/_react.default.createElement("div", Object.assign({}, attributes, {
       style: {
         ...element.style,
         ...style
       },
-      className: classnames('table-cell', highlightClass, attributes.className),
+      className: (0, _classnames.default)('table-cell', highlightClass, attributes.className),
       "data-id": element.id
-    }), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/_react.default.createElement("div", {
       className: "sdoc-cell-container"
     }, children));
   }
-  return /*#__PURE__*/React.createElement(TableCell, props);
+  return /*#__PURE__*/_react.default.createElement(TableCell, props);
 }
-export default renderTableCell;
+var _default = exports.default = renderTableCell;