@atlaskit/editor-plugin-table 1.1.0 → 1.1.2

package/dist/cjs/plugins/table/nodeviews/TableComponent.js

@@ -1,90 +1,51 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var _defineProperty3 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _classnames2 = _interopRequireDefault(require("classnames"));
-
 var _utils = require("@atlaskit/editor-tables/utils");
-
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
-
 var _styles = require("@atlaskit/editor-common/styles");
-
 var _utils2 = require("@atlaskit/editor-common/utils");
-
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
-
 var _commands = require("../commands");
-
 var _pluginFactory = require("../pm-plugins/plugin-factory");
-
 var _stickyHeaders = require("../pm-plugins/sticky-headers");
-
 var _tableResizing = require("../pm-plugins/table-resizing");
-
 var _utils3 = require("../pm-plugins/table-resizing/utils");
-
 var _dom = require("../pm-plugins/table-resizing/utils/dom");
-
 var _types = require("../types");
-
 var _TableFloatingControls = _interopRequireDefault(require("../ui/TableFloatingControls"));
-
 var _utils4 = require("../utils");
-
 var _updateOverflowShadows = require("./update-overflow-shadows");
-
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
-
 var _OverflowShadowsObserver = require("./OverflowShadowsObserver");
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty3.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 var isIE11 = _utils2.browser.ie_version === 11;
-
 var NOOP = function NOOP() {
   return undefined;
 };
-
 var TableComponent = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(TableComponent, _React$Component);
-
   var _super = _createSuper(TableComponent);
-
   function TableComponent(props) {
     var _defineProperty2;
-
     var _this;
-
     (0, _classCallCheck2.default)(this, TableComponent);
     _this = _super.call(this, props);
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "state", (_defineProperty2 = {
@@ -96,32 +57,25 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "updateShadowState", function (shadowKey, value) {
       if (_this.state[shadowKey] === value) {
         return;
-      } // need this check to satisfy types for the setState argument
-
-
+      }
+      // need this check to satisfy types for the setState argument
       if (shadowKey === _types.ShadowEvent.SHOW_BEFORE_SHADOW) {
         return _this.setState((0, _defineProperty3.default)({}, shadowKey, value));
       }
-
       _this.setState((0, _defineProperty3.default)({}, shadowKey, value));
     });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "onStickyState", function (state) {
       var _this$props$getEditor = _this.props.getEditorFeatureFlags(),
-          tableOverflowShadowsOptimization = _this$props$getEditor.tableOverflowShadowsOptimization;
-
+        tableOverflowShadowsOptimization = _this$props$getEditor.tableOverflowShadowsOptimization;
       var pos = _this.props.getPos();
-
       if (!(0, _utils2.isValidPosition)(pos, _this.props.view.state)) {
         return;
       }
-
       var stickyHeader = (0, _stickyHeaders.findStickyHeaderForTable)(state, pos);
-
       if (stickyHeader !== _this.state.stickyHeader) {
         _this.setState({
           stickyHeader: stickyHeader
         });
-
         if (tableOverflowShadowsOptimization && _this.overflowShadowsObserver) {
           _this.overflowShadowsObserver.updateStickyShadows();
         }
@@ -132,65 +86,58 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var containerWidth = _this.props.containerWidth;
       var lineLength = containerWidth.lineLength;
       var marginLeft;
-
       if (tableContainerCssWidth !== 'inherit' && lineLength) {
         var _containerWidth2 = (0, _utils2.parsePx)(tableContainerCssWidth);
-
         if (_containerWidth2) {
           marginLeft = (lineLength - _containerWidth2) / 2;
         }
       }
-
       return marginLeft;
     });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleScroll", function (event) {
       if (!_this.wrapper || event.target !== _this.wrapper) {
         return;
       }
-
       if (_this.table) {
         // sync sticky header row to table scroll
         var headers = _this.table.querySelectorAll('tr[data-header-row]');
-
         for (var i = 0; i < headers.length; i++) {
           var header = headers[i];
           header.scrollLeft = _this.wrapper.scrollLeft;
           header.style.marginRight = '2px';
         }
       }
-
       var _this$props$getEditor2 = _this.props.getEditorFeatureFlags(),
-          tableOverflowShadowsOptimization = _this$props$getEditor2.tableOverflowShadowsOptimization;
-
+        tableOverflowShadowsOptimization = _this$props$getEditor2.tableOverflowShadowsOptimization;
       if (!tableOverflowShadowsOptimization) {
         _this.updateShadows();
       }
     });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleTableResizing", function () {
       var _this$props = _this.props,
-          getNode = _this$props.getNode,
-          containerWidth = _this$props.containerWidth,
-          options = _this$props.options;
+        getNode = _this$props.getNode,
+        containerWidth = _this$props.containerWidth,
+        options = _this$props.options;
       var prevNode = _this.node;
       var node = getNode();
-      var prevAttrs = prevNode.attrs; // We only consider a layout change valid if it's done outside of an autoSize.
+      var prevAttrs = prevNode.attrs;
 
+      // We only consider a layout change valid if it's done outside of an autoSize.
       var layoutChanged = prevAttrs.layout !== node.attrs.layout && prevAttrs.__autoSize === node.attrs.__autoSize;
-
       var parentWidth = _this.getParentNodeWidth();
-
       var parentWidthChanged = parentWidth && parentWidth !== _this.state.parentWidth;
-
       var layoutSize = _this.tableNodeLayoutSize(node, containerWidth.width, options);
-
       var hasNumberedColumnChanged = prevAttrs.isNumberColumnEnabled !== node.attrs.isNumberColumnEnabled;
       var noOfColumnsChanged = (0, _utils4.tablesHaveDifferentNoOfColumns)(node, prevNode);
-
-      if ( // Breakout mode/layout changed
-      layoutChanged || // We need to react if our parent changes
+      if (
+      // Breakout mode/layout changed
+      layoutChanged ||
+      // We need to react if our parent changes
       // Scales the cols widths relative to the new parent width.
-      parentWidthChanged || // Enabling / disabling this feature reduces or adds size to the table.
-      hasNumberedColumnChanged || // This last check is also to cater for dynamic text sizing changing the 'default' layout width
+      parentWidthChanged ||
+      // Enabling / disabling this feature reduces or adds size to the table.
+      hasNumberedColumnChanged ||
+      // This last check is also to cater for dynamic text sizing changing the 'default' layout width
       // Usually happens on window resize.
       layoutSize !== _this.layoutSize || noOfColumnsChanged) {
         // If column has been inserted/deleted avoid multi dispatch
@@ -200,37 +147,30 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             layoutChanged: layoutChanged
           });
         }
-
         _this.updateParentWidth(parentWidth);
       }
-
       _this.updateTableContainerWidth();
-
       _this.node = node;
       _this.containerWidth = containerWidth;
       _this.layoutSize = layoutSize;
     });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "scaleTable", function (scaleOptions) {
       var _this$props2 = _this.props,
-          view = _this$props2.view,
-          getNode = _this$props2.getNode,
-          getPos = _this$props2.getPos,
-          containerWidth = _this$props2.containerWidth,
-          options = _this$props2.options;
+        view = _this$props2.view,
+        getNode = _this$props2.getNode,
+        getPos = _this$props2.getPos,
+        containerWidth = _this$props2.containerWidth,
+        options = _this$props2.options;
       var node = getNode();
       var state = view.state,
-          dispatch = view.dispatch;
+        dispatch = view.dispatch;
       var pos = getPos();
-
       if (!(0, _utils2.isValidPosition)(pos, state)) {
         return;
       }
-
       var domAtPos = view.domAtPos.bind(view);
       var width = containerWidth.width;
-
       _this.scaleTableDebounced.cancel();
-
       (0, _tableResizing.scaleTable)(_this.table, _objectSpread(_objectSpread({}, scaleOptions), {}, {
         node: node,
         prevNode: _this.node || node,
@@ -242,19 +182,15 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleAutoSize", function () {
       if (_this.table) {
         var _this$props3 = _this.props,
-            view = _this$props3.view,
-            getNode = _this$props3.getNode,
-            getPos = _this$props3.getPos,
-            containerWidth = _this$props3.containerWidth;
-
+          view = _this$props3.view,
+          getNode = _this$props3.getNode,
+          getPos = _this$props3.getPos,
+          containerWidth = _this$props3.containerWidth;
         var _node = getNode();
-
         var pos = getPos();
-
         if (!(0, _utils2.isValidPosition)(pos, view.state)) {
           return;
         }
-
         (0, _commands.autoSizeTable)(view, _node, _this.table, pos, {
           containerWidth: containerWidth.width
         });
@@ -262,43 +198,34 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleWindowResize", function () {
       var _this$props4 = _this.props,
-          getNode = _this$props4.getNode,
-          containerWidth = _this$props4.containerWidth;
-
+        getNode = _this$props4.getNode,
+        containerWidth = _this$props4.containerWidth;
       var layoutSize = _this.tableNodeLayoutSize(getNode());
-
       if (containerWidth.width > layoutSize) {
         return;
       }
-
       var parentWidth = _this.getParentNodeWidth();
-
       _this.scaleTableDebounced(parentWidth);
     });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "updateTableContainerWidth", function () {
       var _this$props5 = _this.props,
-          getNode = _this$props5.getNode,
-          containerWidth = _this$props5.containerWidth,
-          options = _this$props5.options;
+        getNode = _this$props5.getNode,
+        containerWidth = _this$props5.containerWidth,
+        options = _this$props5.options;
       var node = getNode();
-
       if (options && options.isBreakoutEnabled === false) {
         return;
       }
-
       var tableContainerWidth = (0, _styles.calcTableWidth)(node.attrs.layout, containerWidth.width);
-
       if (_this.state.tableContainerWidth === tableContainerWidth) {
         return null;
       }
-
       _this.setState(function (prevState) {
         if (options && options.isBreakoutEnabled === false && prevState.tableContainerWidth !== 'inherit') {
           return {
             tableContainerWidth: 'inherit'
           };
         }
-
         return {
           tableContainerWidth: tableContainerWidth
         };
@@ -306,16 +233,14 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "getParentNodeWidth", function () {
       var _this$props6 = _this.props,
-          getPos = _this$props6.getPos,
-          containerWidth = _this$props6.containerWidth,
-          options = _this$props6.options,
-          state = _this$props6.view.state;
+        getPos = _this$props6.getPos,
+        containerWidth = _this$props6.containerWidth,
+        options = _this$props6.options,
+        state = _this$props6.view.state;
       var pos = getPos();
-
       if (!(0, _utils2.isValidPosition)(pos, state)) {
         return;
       }
-
       return (0, _nodeWidth.getParentNodeWidth)(pos, state, containerWidth, options && options.isFullWidthModeEnabled);
     });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "updateParentWidth", function (width) {
@@ -332,18 +257,20 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleAutoSizeDebounced", (0, _rafSchd.default)(_this.handleAutoSize));
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleWindowResizeDebounced", (0, _rafSchd.default)(_this.handleWindowResize));
     var _options = props.options,
-        _containerWidth = props.containerWidth,
-        _getNode = props.getNode,
-        getEditorFeatureFlags = props.getEditorFeatureFlags;
+      _containerWidth = props.containerWidth,
+      _getNode = props.getNode,
+      getEditorFeatureFlags = props.getEditorFeatureFlags;
     _this.node = _getNode();
-    _this.containerWidth = _containerWidth; // store table size using previous full-width mode so can detect if it has changed
+    _this.containerWidth = _containerWidth;
 
+    // store table size using previous full-width mode so can detect if it has changed
     var isFullWidthModeEnabled = _options ? _options.wasFullWidthModeEnabled : false;
     _this.layoutSize = _this.tableNodeLayoutSize(_this.node, _containerWidth.width, {
       isFullWidthModeEnabled: isFullWidthModeEnabled
-    }); // Disable inline table editing and resizing controls in Firefox
-    // https://github.com/ProseMirror/prosemirror/issues/432
+    });
 
+    // Disable inline table editing and resizing controls in Firefox
+    // https://github.com/ProseMirror/prosemirror/issues/432
     if ('execCommand' in document) {
       ['enableObjectResizing', 'enableInlineTableEditing'].forEach(function (cmd) {
         if (document.queryCommandSupported(cmd)) {
@@ -351,10 +278,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         }
       });
     }
-
     var _getEditorFeatureFlag = getEditorFeatureFlags(),
-        initialRenderOptimization = _getEditorFeatureFlag.initialRenderOptimization;
-
+      initialRenderOptimization = _getEditorFeatureFlag.initialRenderOptimization;
     if (!initialRenderOptimization) {
       // @see ED-7945
       requestAnimationFrame(function () {
@@ -363,21 +288,17 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         });
       });
     }
-
     return _this;
   }
-
   (0, _createClass2.default)(TableComponent, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this$props7 = this.props,
-          allowColumnResizing = _this$props7.allowColumnResizing,
-          eventDispatcher = _this$props7.eventDispatcher;
-
+        allowColumnResizing = _this$props7.allowColumnResizing,
+        eventDispatcher = _this$props7.eventDispatcher;
       if (allowColumnResizing && this.wrapper && !isIE11) {
         this.wrapper.addEventListener('scroll', this.handleScrollDebounced);
       }
-
       if (allowColumnResizing) {
         /**
          * We no longer use `containerWidth` as a variable to determine an update for table resizing (avoids unnecessary updates).
@@ -387,13 +308,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         this.updateTableContainerWidth();
         this.handleTableResizingDebounced();
       }
-
       var currentStickyState = _stickyHeaders.pluginKey.getState(this.props.view.state);
-
       if (currentStickyState) {
         this.onStickyState(currentStickyState);
       }
-
       eventDispatcher.on(_stickyHeaders.pluginKey.key, this.onStickyState);
     }
   }, {
@@ -402,78 +320,63 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (this.wrapper && !isIE11) {
         this.wrapper.removeEventListener('scroll', this.handleScrollDebounced);
       }
-
       this.handleScrollDebounced.cancel();
       this.scaleTableDebounced.cancel();
       this.handleTableResizingDebounced.cancel();
       this.handleAutoSizeDebounced.cancel();
       this.handleWindowResizeDebounced.cancel();
-
       if (this.props.allowColumnResizing) {
         window.removeEventListener('resize', this.handleWindowResizeDebounced);
       }
-
       if (this.overflowShadowsObserver) {
         this.overflowShadowsObserver.dispose();
       }
-
       this.props.eventDispatcher.off(_stickyHeaders.pluginKey.key, this.onStickyState);
     }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       var _this$props8 = this.props,
-          view = _this$props8.view,
-          getNode = _this$props8.getNode,
-          isMediaFullscreen = _this$props8.isMediaFullscreen,
-          allowColumnResizing = _this$props8.allowColumnResizing;
-
+        view = _this$props8.view,
+        getNode = _this$props8.getNode,
+        isMediaFullscreen = _this$props8.isMediaFullscreen,
+        allowColumnResizing = _this$props8.allowColumnResizing;
       var _getPluginState = (0, _pluginFactory.getPluginState)(view.state),
-          isInDanger = _getPluginState.isInDanger;
-
+        isInDanger = _getPluginState.isInDanger;
       var table = (0, _utils.findTable)(view.state.selection);
-
       if (isInDanger && !table) {
         (0, _commands.clearHoverSelection)()(view.state, view.dispatch);
       }
-
       var _this$props$getEditor3 = this.props.getEditorFeatureFlags(),
-          tableOverflowShadowsOptimization = _this$props$getEditor3.tableOverflowShadowsOptimization;
-
+        tableOverflowShadowsOptimization = _this$props$getEditor3.tableOverflowShadowsOptimization;
       if (!tableOverflowShadowsOptimization) {
         this.updateShadows();
       } else {
         var _this$wrapper;
-
         if ((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement && this.table && !this.overflowShadowsObserver) {
           this.overflowShadowsObserver = new _OverflowShadowsObserver.OverflowShadowsObserver(this.updateShadowState, this.table, this.wrapper);
         }
-
         if (this.overflowShadowsObserver) {
           var _this$state$stickyHea;
-
           this.overflowShadowsObserver.observeCells((_this$state$stickyHea = this.state.stickyHeader) === null || _this$state$stickyHea === void 0 ? void 0 : _this$state$stickyHea.sticky, (0, _utils4.containsHeaderRow)(getNode()));
         }
       }
-
       var currentTable = getNode();
-
       if (currentTable.attrs.__autoSize) {
         // Wait for next tick to handle auto sizing, gives the browser time to do layout calc etc.
         this.handleAutoSizeDebounced();
-      } // re-drawing will cause media component get unmounted that will exit fullscreen mode if media is in fullscreen mode
+      }
+      // re-drawing will cause media component get unmounted that will exit fullscreen mode if media is in fullscreen mode
       // see https://product-fabric.atlassian.net/browse/MEX-1290
       else if (allowColumnResizing && this.table && !isMediaFullscreen) {
         // If col widths (e.g. via collab) or number of columns (e.g. delete a column) have changed,
         // re-draw colgroup.
         var previousTable = this.node;
-
         if ((0, _utils4.tablesHaveDifferentColumnWidths)(currentTable, previousTable) || (0, _utils4.tablesHaveDifferentNoOfColumns)(currentTable, previousTable)) {
           var _view = this.props.view;
           (0, _utils3.insertColgroupFromNode)(this.table, currentTable);
           (0, _dom.updateControls)(this.props.getEditorFeatureFlags)(_view.state);
         }
-
         this.handleTableResizingDebounced();
       }
     }
@@ -481,9 +384,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     key: "updateShadows",
     value: function updateShadows() {
       var _this$wrapper2;
-
       var parent = (_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.parentElement;
-
       if (this.wrapper && parent) {
         var rightShadows = parent.querySelectorAll(".".concat(_types.TableCssClassName.TABLE_RIGHT_SHADOW));
         var leftShadows = parent.querySelectorAll(".".concat(_types.TableCssClassName.TABLE_LEFT_SHADOW));
@@ -494,43 +395,40 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _classnames,
-          _this2 = this;
-
+        _this2 = this;
       var _this$props9 = this.props,
-          view = _this$props9.view,
-          getNode = _this$props9.getNode,
-          tableResizingPluginState = _this$props9.tableResizingPluginState,
-          _this$props9$allowCon = _this$props9.allowControls,
-          allowControls = _this$props9$allowCon === void 0 ? true : _this$props9$allowCon,
-          isHeaderRowEnabled = _this$props9.isHeaderRowEnabled,
-          ordering = _this$props9.ordering,
-          isHeaderColumnEnabled = _this$props9.isHeaderColumnEnabled,
-          tableActive = _this$props9.tableActive,
-          containerWidth = _this$props9.containerWidth;
+        view = _this$props9.view,
+        getNode = _this$props9.getNode,
+        tableResizingPluginState = _this$props9.tableResizingPluginState,
+        _this$props9$allowCon = _this$props9.allowControls,
+        allowControls = _this$props9$allowCon === void 0 ? true : _this$props9$allowCon,
+        isHeaderRowEnabled = _this$props9.isHeaderRowEnabled,
+        ordering = _this$props9.ordering,
+        isHeaderColumnEnabled = _this$props9.isHeaderColumnEnabled,
+        tableActive = _this$props9.tableActive,
+        containerWidth = _this$props9.containerWidth;
       var _this$state = this.state,
-          isLoading = _this$state.isLoading,
-          tableContainerWidth = _this$state.tableContainerWidth,
-          showBeforeShadow = _this$state.showBeforeShadow,
-          showAfterShadow = _this$state.showAfterShadow;
-      var node = getNode(); // doesn't work well with WithPluginState
-
+        isLoading = _this$state.isLoading,
+        tableContainerWidth = _this$state.tableContainerWidth,
+        showBeforeShadow = _this$state.showBeforeShadow,
+        showAfterShadow = _this$state.showAfterShadow;
+      var node = getNode();
+      // doesn't work well with WithPluginState
       var _getPluginState2 = (0, _pluginFactory.getPluginState)(view.state),
-          isInDanger = _getPluginState2.isInDanger,
-          hoveredRows = _getPluginState2.hoveredRows;
-
+        isInDanger = _getPluginState2.isInDanger,
+        hoveredRows = _getPluginState2.hoveredRows;
       var _this$props$getEditor4 = this.props.getEditorFeatureFlags(),
-          stickyHeadersOptimization = _this$props$getEditor4.stickyHeadersOptimization,
-          initialRenderOptimization = _this$props$getEditor4.initialRenderOptimization,
-          tableRenderOptimization = _this$props$getEditor4.tableRenderOptimization,
-          tableOverflowShadowsOptimization = _this$props$getEditor4.tableOverflowShadowsOptimization;
-
+        stickyHeadersOptimization = _this$props$getEditor4.stickyHeadersOptimization,
+        initialRenderOptimization = _this$props$getEditor4.initialRenderOptimization,
+        tableRenderOptimization = _this$props$getEditor4.tableRenderOptimization,
+        tableOverflowShadowsOptimization = _this$props$getEditor4.tableOverflowShadowsOptimization;
       var tableRef = this.table || undefined;
       var isResizing = !!tableResizingPluginState && !!tableResizingPluginState.dragging;
-      var headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined; //dont need to change tableHeight with tableRenderOptimization because it will be observed inside floating components
+      var headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined;
 
+      //dont need to change tableHeight with tableRenderOptimization because it will be observed inside floating components
       var tableHeight = tableRef && !tableRenderOptimization ? tableRef.offsetHeight : undefined;
       var hasHeaderRow = (0, _utils4.containsHeaderRow)(node);
-
       var rowControls = /*#__PURE__*/_react.default.createElement("div", {
         className: _types.TableCssClassName.ROW_CONTROLS_WRAPPER
       }, /*#__PURE__*/_react.default.createElement(_TableFloatingControls.default, {
@@ -544,7 +442,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isHeaderRowEnabled: isHeaderRowEnabled,
         ordering: ordering,
         isHeaderColumnEnabled: isHeaderColumnEnabled,
-        hasHeaderRow: hasHeaderRow // pass `selection` and `tableHeight` to control re-render
+        hasHeaderRow: hasHeaderRow
+        // pass `selection` and `tableHeight` to control re-render
         ,
         selection: view.state.selection,
         tableHeight: tableHeight,
@@ -552,7 +451,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         stickyHeader: this.state.stickyHeader,
         getEditorFeatureFlags: this.props.getEditorFeatureFlags
       }));
-
       var shadowPadding = allowControls && (!isLoading || initialRenderOptimization) && tableActive ? -_editorSharedStyles.akEditorTableToolbarSize : _styles.tableMarginSides;
       var shadowStyle = tableOverflowShadowsOptimization ? (0, _memoizeOne.default)(function (visible) {
         return {
@@ -583,12 +481,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         className: (0, _classnames2.default)(_types.TableCssClassName.TABLE_NODE_WRAPPER),
         ref: function ref(elem) {
           _this2.wrapper = elem;
-
           if (elem) {
             _this2.props.contentDOM(elem);
-
             var tableElement = elem.querySelector('table');
-
             if (tableElement !== _this2.table) {
               _this2.table = tableElement;
             }
@@ -616,7 +511,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }]);
   return TableComponent;
 }(_react.default.Component);
-
 (0, _defineProperty3.default)(TableComponent, "displayName", 'TableComponent');
 var _default = TableComponent;
 exports.default = _default;