@atlaskit/editor-plugin-table 15.4.21 → 15.4.22

package/dist/esm/nodeviews/TableComponentLegacy.js

@@ -1,1135 +0,0 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-import React from 'react';
-import classnames from 'classnames';
-import memoizeOne from 'memoize-one';
-import rafSchedule from 'raf-schd';
-import { injectIntl } from 'react-intl-next';
-import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
-import { browser as browserLegacy, getBrowserInfo } from '@atlaskit/editor-common/browser';
-import { tintDirtyTransaction } from '@atlaskit/editor-common/collab';
-import { getParentOfTypeCount } from '@atlaskit/editor-common/nesting';
-import { nodeVisibilityManager } from '@atlaskit/editor-common/node-visibility';
-import { getParentNodeWidth, getTableContainerWidth } from '@atlaskit/editor-common/node-width';
-import { tableMarginSides } from '@atlaskit/editor-common/styles';
-import { isValidPosition } from '@atlaskit/editor-common/utils';
-import { akEditorTableNumberColumnWidth, akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
-import { isTableSelected } from '@atlaskit/editor-tables/utils';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { autoSizeTable, clearHoverSelection } from '../pm-plugins/commands';
-import { autoScrollerFactory } from '../pm-plugins/drag-and-drop/utils/autoscrollers';
-import { pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers/plugin-key';
-import { findStickyHeaderForTable } from '../pm-plugins/sticky-headers/util';
-import { META_KEYS } from '../pm-plugins/table-analytics';
-import { insertColgroupFromNode, hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup';
-import { COLUMN_MIN_WIDTH, TABLE_EDITOR_MARGIN, TABLE_OFFSET_IN_COMMENT_EDITOR } from '../pm-plugins/table-resizing/utils/consts';
-import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
-import { getLayoutSize, getScalingPercentForTableWithoutWidth, getTableScalingPercent } from '../pm-plugins/table-resizing/utils/misc';
-import { getResizeState, updateColgroup } from '../pm-plugins/table-resizing/utils/resize-state';
-import { scaleTable } from '../pm-plugins/table-resizing/utils/scale-table';
-import { containsHeaderRow, isTableNested, isTableNestedInMoreThanOneNode, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, tablesHaveDifferentNoOfRows } from '../pm-plugins/utils/nodes';
-import { getAssistiveMessage } from '../pm-plugins/utils/table';
-import { TableCssClassName as ClassName, ShadowEvent } from '../types';
-import { handleMouseOut, handleMouseOver, isTableInFocus, withCellTracking } from '../ui/event-handlers';
-import TableFloatingColumnControls from '../ui/TableFloatingColumnControls';
-// Ignored via go/ees005
-// eslint-disable-next-line import/no-named-as-default
-import TableFloatingControls from '../ui/TableFloatingControls';
-import { ExternalDropTargets } from './ExternalDropTargets';
-import { OverflowShadowsObserver } from './OverflowShadowsObserver';
-import { TableContainer } from './TableContainer';
-import { TableStickyScrollbar } from './TableStickyScrollbar';
-// When table is inserted via paste, keyboard shortcut or quickInsert,
-// componentDidUpdate is called multiple times. The isOverflowing value is correct only on the last update.
-// To make sure we capture the last update, we use setTimeout.
-var initialOverflowCaptureTimeroutDelay = 300;
-
-// This is a hard switch for controlling whether the overflow analytics should be dispatched. There has been 6months of data
-// already collected which we could use but have not. This has been disabled rather then removed entirely in the event that
-// the current collected data becomes stale and we want to start collecting fresh data again in future.
-// PLEASE NOTE: that the current way this alaytics has been configured WILL cause reflows to occur. This is why the has been disabled.
-var isOverflowAnalyticsEnabled = false;
-
-// Prevent unnecessary parentWidth updates when table is nested inside of a node that is nested itself.
-var NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MIN_THRESHOLD = 2;
-var NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MAX_THRESHOLD = 20;
-// Ignored via go/ees005
-// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required
-// @deprecated Please use TableComponentNext instead
-// eslint-disable-next-line @repo/internal/react/no-class-components
-var TableComponent = /*#__PURE__*/function (_React$Component) {
-  function TableComponent(props) {
-    var _this;
-    _classCallCheck(this, TableComponent);
-    _this = _callSuper(this, TableComponent, [props]);
-    _defineProperty(_this, "state", _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-      scroll: 0,
-      parentWidth: undefined
-    }, ShadowEvent.SHOW_BEFORE_SHADOW, false), ShadowEvent.SHOW_AFTER_SHADOW, false), "tableWrapperWidth", undefined), "tableWrapperHeight", undefined), "windowResized", false));
-    _defineProperty(_this, "handleMouseOut", function (event) {
-      if (!isTableInFocus(_this.props.view)) {
-        return false;
-      }
-      return handleMouseOut(_this.props.view, event);
-    });
-    _defineProperty(_this, "handleMouseOver", function (event) {
-      if (!isTableInFocus(_this.props.view)) {
-        return false;
-      }
-      return withCellTracking(handleMouseOver)(_this.props.view, event);
-    });
-    _defineProperty(_this, "handleMouseEnter", function () {
-      var node = _this.props.getNode();
-      var pos = _this.props.getPos();
-      var tr = _this.props.view.state.tr;
-      var tableId = node.attrs.localId;
-      tr.setMeta('mouseEnterTable', [tableId, node, pos]);
-      _this.props.view.dispatch(tr);
-    });
-    _defineProperty(_this, "updateShadowState", function (shadowKey, value) {
-      if (_this.state[shadowKey] === value) {
-        return;
-      }
-      _this.setState(_defineProperty({}, shadowKey, value));
-    });
-    _defineProperty(_this, "createShadowSentinels", function (table) {
-      if (table) {
-        var shadowSentinelLeft = document.createElement('span');
-        shadowSentinelLeft.className = ClassName.TABLE_SHADOW_SENTINEL_LEFT;
-        var shadowSentinelRight = document.createElement('span');
-        shadowSentinelRight.className = ClassName.TABLE_SHADOW_SENTINEL_RIGHT;
-        table.prepend(shadowSentinelLeft);
-        table.prepend(shadowSentinelRight);
-      }
-    });
-    _defineProperty(_this, "onStickyState", function (state) {
-      var pos = _this.props.getPos();
-      if (!isValidPosition(pos, _this.props.view.state)) {
-        return;
-      }
-      var stickyHeader = findStickyHeaderForTable(state, pos);
-      if (stickyHeader !== _this.state.stickyHeader) {
-        _this.setState({
-          stickyHeader: stickyHeader
-        });
-        if (_this.overflowShadowsObserver) {
-          _this.overflowShadowsObserver.updateStickyShadows();
-        }
-      }
-    });
-    // Ignored via go/ees005
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    _defineProperty(_this, "prevTableState", null);
-    _defineProperty(_this, "handleScroll", function (event) {
-      if (!_this.wrapper || event.target !== _this.wrapper) {
-        return;
-      }
-      if (_this.stickyScrollbar) {
-        _this.stickyScrollbar.scrollLeft(_this.wrapper.scrollLeft);
-      }
-      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++) {
-          // Ignored via go/ees005
-          // eslint-disable-next-line @atlaskit/editor/no-as-casting
-          var header = headers[i];
-          header.scrollLeft = _this.wrapper.scrollLeft;
-          header.style.marginRight = '2px';
-        }
-      }
-      _this.setState(_defineProperty({}, ShadowEvent.SHOW_BEFORE_SHADOW, _this.wrapper.scrollLeft !== 0));
-    });
-    _defineProperty(_this, "handleTableResizing", function () {
-      var _this$props = _this.props,
-        getNode = _this$props.getNode,
-        containerWidth = _this$props.containerWidth,
-        options = _this$props.options,
-        allowTableResizing = _this$props.allowTableResizing;
-      // Ignored via go/ees005
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      var prevNode = _this.node;
-      var node = getNode();
-      var prevAttrs = prevNode.attrs;
-      var isNested = isTableNested(_this.props.view.state, _this.props.getPos());
-      var parentWidth = _this.getParentNodeWidth();
-      if (isNested && isTableNestedInMoreThanOneNode(_this.props.view.state, _this.props.getPos())) {
-        var resizeObsWrapperWidth = _this.wrapperWidth || 0;
-        var wrapperWidthDiffBetweenRerenders = Math.abs(resizeObsWrapperWidth - (_this.state.parentWidth || 0));
-        var isOusideOfThreshold = wrapperWidthDiffBetweenRerenders <= NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MIN_THRESHOLD || wrapperWidthDiffBetweenRerenders > NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MAX_THRESHOLD;
-        // 1. Check isOusideOfThreshold is added to prevent undersired state update.
-        // When table is nested in the extenstion and the table column is being resized,
-        // space available within extension can change and cause undesirable state update.
-        // MIN_THRESNESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MIN_THRESHOLDHOLD value is required
-        // as the resizeObsWrapperWidth can differ between page reloads by 2px.
-
-        // 2. Check resizeObsWrapperWidth > 1 is added to prevent parentWidth update when table unmounts.
-        // When a is nested table in a nested expand and the expand collabses, the table unmounts and
-        // resizeObsWrapperWidth becomes 1.
-        parentWidth = isOusideOfThreshold && resizeObsWrapperWidth > 1 ? resizeObsWrapperWidth : _this.state.parentWidth;
-      }
-      var parentWidthChanged = parentWidth && parentWidth !== _this.state.parentWidth;
-      var layoutSize = _this.tableNodeLayoutSize(node, containerWidth.width, options);
-      var hasNumberedColumnChanged = prevAttrs.isNumberColumnEnabled !== node.attrs.isNumberColumnEnabled;
-      var noOfColumnsChanged = tablesHaveDifferentNoOfColumns(node, prevNode);
-      if (
-      // 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
-      // Usually happens on window resize.
-      layoutSize !== _this.layoutSize || noOfColumnsChanged) {
-        var shouldScaleTable = (!allowTableResizing || allowTableResizing && isNested) && !hasNumberedColumnChanged && !noOfColumnsChanged;
-
-        // If column has been inserted/deleted avoid multi dispatch
-        if (shouldScaleTable) {
-          _this.scaleTable({
-            parentWidth: parentWidth
-          }, hasNumberedColumnChanged);
-        }
-
-        // only when table resizing is enabled and toggle numbered column to run scaleTable
-        if (allowTableResizing && hasNumberedColumnChanged) {
-          if (!hasTableBeenResized(prevNode)) {
-            _this.scaleTable({
-              parentWidth: node.attrs.width
-            }, true);
-          }
-        }
-        _this.updateParentWidth(parentWidth);
-      }
-      _this.node = node;
-      _this.containerWidth = containerWidth;
-      _this.layoutSize = layoutSize;
-    });
-    // Function gets called when table is nested.
-    _defineProperty(_this, "scaleTable", function (scaleOptions) {
-      var isUserTriggered = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-      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;
-      var node = getNode();
-      var state = view.state,
-        dispatch = view.dispatch;
-      var pos = getPos();
-      if (typeof pos !== 'number' || !isValidPosition(pos, state)) {
-        return;
-      }
-      var domAtPos = view.domAtPos.bind(view);
-      var width = containerWidth.width;
-      _this.scaleTableDebounced.cancel();
-      var tr = scaleTable(_this.table, _objectSpread(_objectSpread({}, scaleOptions), {}, {
-        node: node,
-        prevNode: _this.node || node,
-        start: pos + 1,
-        containerWidth: width,
-        // Ignored via go/ees005
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        previousContainerWidth: _this.containerWidth.width || width
-      }, options), domAtPos, _this.props.pluginInjectionApi, false,
-      // isTableScalingEnabled doesn't change the behavior of nested tables
-      false // shouldUseIncreasedScalingPercent set to false for nested tables
-      )(state.tr);
-      if (!isUserTriggered) {
-        tintDirtyTransaction(tr);
-        // Avoid adding this transaction separately to the history as these are automatic updates
-        // as a consequence of another action
-        tr.setMeta('addToHistory', false);
-      }
-      dispatch(tr);
-    });
-    _defineProperty(_this, "setTimerToSendInitialOverflowCaptured", function (isOverflowing) {
-      var _this$state;
-      var _this$props3 = _this.props,
-        dispatchAnalyticsEvent = _this$props3.dispatchAnalyticsEvent,
-        containerWidth = _this$props3.containerWidth,
-        allowTableResizing = _this$props3.allowTableResizing;
-      var parentWidth = ((_this$state = _this.state) === null || _this$state === void 0 ? void 0 : _this$state.parentWidth) || 0;
-      _this.initialOverflowCaptureTimerId = setTimeout(function () {
-        dispatchAnalyticsEvent({
-          action: TABLE_ACTION.INITIAL_OVERFLOW_CAPTURED,
-          actionSubject: ACTION_SUBJECT.TABLE,
-          actionSubjectId: null,
-          eventType: EVENT_TYPE.TRACK,
-          attributes: {
-            editorWidth: containerWidth.width || 0,
-            isOverflowing: isOverflowing,
-            tableResizingEnabled: allowTableResizing || false,
-            width: _this.node.attrs.width || 0,
-            parentWidth: parentWidth
-          }
-        });
-        _this.isInitialOverflowSent = true;
-      }, initialOverflowCaptureTimeroutDelay);
-    });
-    _defineProperty(_this, "handleAutoSize", function () {
-      if (_this.table) {
-        var _this$props4 = _this.props,
-          view = _this$props4.view,
-          getNode = _this$props4.getNode,
-          getPos = _this$props4.getPos,
-          containerWidth = _this$props4.containerWidth;
-        var node = getNode();
-        var pos = getPos();
-        if (!isValidPosition(pos, view.state)) {
-          return;
-        }
-        autoSizeTable(view, node, _this.table, pos, {
-          containerWidth: containerWidth.width
-        });
-      }
-    });
-    _defineProperty(_this, "handleWindowResize", function () {
-      var _this$props5 = _this.props,
-        getNode = _this$props5.getNode,
-        containerWidth = _this$props5.containerWidth;
-      var node = getNode();
-      var layoutSize = _this.tableNodeLayoutSize(node);
-      if (containerWidth.width > layoutSize) {
-        return;
-      }
-      var parentWidth = _this.getParentNodeWidth();
-      _this.scaleTableDebounced({
-        parentWidth: parentWidth
-      });
-    });
-    // This is a new handler for window resize events that sets the windowResized state immediately
-    // This is needed to update colgroup on window resize, to enforce the table scaling
-    _defineProperty(_this, "handleWindowResizeNew", function () {
-      // Set resizing to true immediately
-      if (!_this.state.windowResized) {
-        _this.setState({
-          windowResized: true
-        });
-      }
-    });
-    _defineProperty(_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;
-      var pos = getPos();
-      if (!isValidPosition(pos, state)) {
-        return;
-      }
-      var parentNodeWith = getParentNodeWidth(pos, state, containerWidth, options && options.isFullWidthModeEnabled);
-      return parentNodeWith;
-    });
-    _defineProperty(_this, "updateParentWidth", function (width) {
-      _this.setState({
-        parentWidth: width
-      });
-    });
-    _defineProperty(_this, "tableNodeLayoutSize", function (node, containerWidth, options) {
-      return getLayoutSize(node.attrs.layout, containerWidth || _this.props.containerWidth.width, options || _this.props.options || {});
-    });
-    _defineProperty(_this, "shouldUpdateColgroup", function (params) {
-      var _this$props$options, _this$props$options2;
-      var isWindowResized = params.isWindowResized,
-        isWidthChanged = params.isWidthChanged,
-        isTableWidthChanged = params.isTableWidthChanged,
-        isColumnsDistributed = params.isColumnsDistributed,
-        isTableResizedFullWidth = params.isTableResizedFullWidth,
-        isTableDisplayModeChanged = params.isTableDisplayModeChanged,
-        isNumberColumnChanged = params.isNumberColumnChanged,
-        isNumberOfColumnsChanged = params.isNumberOfColumnsChanged,
-        isFullWidthModeAndLineLengthChanged = params.isFullWidthModeAndLineLengthChanged;
-      var isFullPageEditor = !((_this$props$options = _this.props.options) !== null && _this$props$options !== void 0 && _this$props$options.isCommentEditor) && !((_this$props$options2 = _this.props.options) !== null && _this$props$options2 !== void 0 && _this$props$options2.isChromelessEditor);
-      if (isFullPageEditor) {
-        return !!isWindowResized || isColumnsDistributed || !!isTableResizedFullWidth || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged || !!isFullWidthModeAndLineLengthChanged;
-      }
-      return isWidthChanged || isTableWidthChanged || isColumnsDistributed || !!isTableResizedFullWidth || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged || !!isFullWidthModeAndLineLengthChanged;
-    });
-    _defineProperty(_this, "scaleTableDebounced", rafSchedule(_this.scaleTable));
-    _defineProperty(_this, "handleTableResizingDebounced", rafSchedule(_this.handleTableResizing));
-    _defineProperty(_this, "handleScrollDebounced", rafSchedule(_this.handleScroll));
-    _defineProperty(_this, "handleAutoSizeDebounced", rafSchedule(_this.handleAutoSize));
-    _defineProperty(_this, "handleWindowResizeDebounced", rafSchedule(_this.handleWindowResize));
-    _defineProperty(_this, "handleWindowResizeNewDebounced", rafSchedule(_this.handleWindowResizeNew));
-    _defineProperty(_this, "updateShadowStateDebounced", rafSchedule(_this.updateShadowState));
-    var _options = props.options,
-      _containerWidth = props.containerWidth,
-      _getNode = props.getNode;
-    _this.node = _getNode();
-    _this.containerWidth = _containerWidth;
-    var tablePos = props.getPos();
-    _this.isNestedInTable = tablePos ? getParentOfTypeCount(props.view.state.schema.nodes.table)(props.view.state.doc.resolve(tablePos)) > 0 : false;
-    _this.isInitialOverflowSent = false;
-    if (!_this.updateColGroupFromFullWidthChange) {
-      _this.updateColGroupFromFullWidthChange = (_options === null || _options === void 0 ? void 0 : _options.isFullWidthModeEnabled) && !(_options !== null && _options !== void 0 && _options.wasFullWidthModeEnabled);
-    }
-
-    // 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
-    });
-    _this.resizeObserver = new ResizeObserver(function (entries) {
-      var _iterator = _createForOfIteratorHelper(entries),
-        _step;
-      try {
-        var _loop = function _loop() {
-          var entry = _step.value;
-          _this.setState(function (prev) {
-            var _entry$contentRect, _entry$contentRect2;
-            return (prev === null || prev === void 0 ? void 0 : prev.tableWrapperWidth) === ((_entry$contentRect = entry.contentRect) === null || _entry$contentRect === void 0 ? void 0 : _entry$contentRect.width) && (prev === null || prev === void 0 ? void 0 : prev.tableWrapperHeight) === ((_entry$contentRect2 = entry.contentRect) === null || _entry$contentRect2 === void 0 ? void 0 : _entry$contentRect2.height) ? prev : _objectSpread(_objectSpread({}, prev), {}, {
-              tableWrapperWidth: entry.contentRect.width,
-              tableWrapperHeight: entry.contentRect.height
-            });
-          });
-        };
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          _loop();
-        }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
-      }
-    });
-
-    // 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)) {
-          document.execCommand(cmd, false, 'false');
-        }
-      });
-    }
-    return _this;
-  }
-  _inherits(TableComponent, _React$Component);
-  return _createClass(TableComponent, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-      var _nodeVisibilityManage = nodeVisibilityManager(this.props.view.dom),
-        observe = _nodeVisibilityManage.observe;
-      if (this.table) {
-        this.nodeVisibilityObserverCleanupFn = observe({
-          element: this.table,
-          onFirstVisible: function onFirstVisible() {
-            _this2.initialiseEventListenersAfterMount();
-            // force width calculation - missed resize event under firefox when
-            // table is nested within bodied extension
-            if (_this2.wrapper) {
-              var _this2$wrapper;
-              _this2.wrapperWidth = (_this2$wrapper = _this2.wrapper) === null || _this2$wrapper === void 0 ? void 0 : _this2$wrapper.clientWidth;
-            }
-          }
-        });
-        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-        window.addEventListener('resize', this.handleWindowResizeNewDebounced);
-      }
-    }
-  }, {
-    key: "initialiseEventListenersAfterMount",
-    value: function initialiseEventListenersAfterMount() {
-      var _this$table,
-        _this$table2,
-        _this$table3,
-        _this3 = this;
-      var _this$props7 = this.props,
-        allowColumnResizing = _this$props7.allowColumnResizing,
-        allowTableResizing = _this$props7.allowTableResizing,
-        eventDispatcher = _this$props7.eventDispatcher,
-        isDragAndDropEnabled = _this$props7.isDragAndDropEnabled,
-        getNode = _this$props7.getNode;
-      var browser = expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) ? getBrowserInfo() : browserLegacy;
-      var isIE11 = browser.ie_version === 11;
-
-      // Ignored via go/ees005
-      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-      this === null || this === void 0 || (_this$table = this.table) === null || _this$table === void 0 || _this$table.addEventListener('mouseenter', this.handleMouseEnter);
-
-      // Ignored via go/ees005
-      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-      this === null || this === void 0 || (_this$table2 = this.table) === null || _this$table2 === void 0 || _this$table2.addEventListener('mouseout', this.handleMouseOut);
-
-      // Ignored via go/ees005
-      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-      this === null || this === void 0 || (_this$table3 = this.table) === null || _this$table3 === void 0 || _this$table3.addEventListener('mouseover', this.handleMouseOver);
-      if (this.wrapper) {
-        this.wrapperReisizeObserver = new ResizeObserver(function (entries) {
-          var _iterator2 = _createForOfIteratorHelper(entries),
-            _step2;
-          try {
-            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-              var _entry$contentRect3;
-              var entry = _step2.value;
-              _this3.wrapperWidth = (_entry$contentRect3 = entry.contentRect) === null || _entry$contentRect3 === void 0 ? void 0 : _entry$contentRect3.width;
-            }
-          } catch (err) {
-            _iterator2.e(err);
-          } finally {
-            _iterator2.f();
-          }
-        });
-        this.wrapperReisizeObserver.observe(this.wrapper);
-      }
-      if (allowColumnResizing && this.wrapper && !isIE11) {
-        // Ignored via go/ees005
-        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-        this.wrapper.addEventListener('scroll', this.handleScrollDebounced, {
-          passive: true
-        });
-        if (this.table && !this.isNestedInTable) {
-          this.stickyScrollbar = new TableStickyScrollbar(this.wrapper, this.props.view);
-        }
-        if (isDragAndDropEnabled) {
-          this.dragAndDropCleanupFn = combine.apply(void 0, _toConsumableArray(autoScrollerFactory({
-            tableWrapper: this.wrapper,
-            getNode: getNode
-          })));
-        }
-      }
-      if (allowColumnResizing) {
-        /**
-         * We no longer use `containerWidth` as a variable to determine an update for table resizing (avoids unnecessary updates).
-         * Instead we use the resize event to only trigger updates when necessary.
-         */
-        if (!allowTableResizing) {
-          // Ignored via go/ees005
-          // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-          window.addEventListener('resize', this.handleWindowResizeDebounced);
-        }
-        this.handleTableResizingDebounced();
-      }
-      var currentStickyState = stickyHeadersPluginKey.getState(this.props.view.state);
-      if (currentStickyState) {
-        this.onStickyState(currentStickyState);
-      }
-
-      // Ignored via go/ees005
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      eventDispatcher.on(stickyHeadersPluginKey.key, this.onStickyState);
-      if (isOverflowAnalyticsEnabled) {
-        var initialIsOveflowing = this.state[ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[ShadowEvent.SHOW_AFTER_SHADOW];
-        this.setTimerToSendInitialOverflowCaptured(initialIsOveflowing);
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      var _this$resizeObserver, _this$wrapperReisizeO, _this$table4, _this$table5, _this$table6;
-      var _this$props8 = this.props,
-        allowColumnResizing = _this$props8.allowColumnResizing,
-        allowTableResizing = _this$props8.allowTableResizing,
-        eventDispatcher = _this$props8.eventDispatcher,
-        isDragAndDropEnabled = _this$props8.isDragAndDropEnabled,
-        view = _this$props8.view,
-        isInDanger = _this$props8.isInDanger;
-      var browser = expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) ? getBrowserInfo() : browserLegacy;
-      var isIE11 = browser.ie_version === 11;
-      if (this.wrapper && !isIE11) {
-        // Ignored via go/ees005
-        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-        this.wrapper.removeEventListener('scroll', this.handleScrollDebounced);
-      }
-      if (isDragAndDropEnabled && this.dragAndDropCleanupFn) {
-        this.dragAndDropCleanupFn();
-      }
-      if (this.nodeVisibilityObserverCleanupFn) {
-        this.nodeVisibilityObserverCleanupFn();
-      }
-      (_this$resizeObserver = this.resizeObserver) === null || _this$resizeObserver === void 0 || _this$resizeObserver.disconnect();
-      (_this$wrapperReisizeO = this.wrapperReisizeObserver) === null || _this$wrapperReisizeO === void 0 || _this$wrapperReisizeO.disconnect();
-      if (this.stickyScrollbar) {
-        this.stickyScrollbar.dispose();
-      }
-      this.handleScrollDebounced.cancel();
-      this.scaleTableDebounced.cancel();
-      this.handleTableResizingDebounced.cancel();
-      this.handleAutoSizeDebounced.cancel();
-      if (!allowTableResizing) {
-        this.handleWindowResizeDebounced.cancel();
-      }
-      this.handleWindowResizeNewDebounced.cancel();
-      if (isInDanger) {
-        clearHoverSelection()(view.state, view.dispatch);
-      }
-      if (!allowTableResizing && allowColumnResizing) {
-        // Ignored via go/ees005
-        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-        window.removeEventListener('resize', this.handleWindowResizeDebounced);
-      }
-
-      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-      window.removeEventListener('resize', this.handleWindowResizeNewDebounced);
-
-      // Ignored via go/ees005
-      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-      this === null || this === void 0 || (_this$table4 = this.table) === null || _this$table4 === void 0 || _this$table4.removeEventListener('mouseenter', this.handleMouseEnter);
-
-      // Ignored via go/ees005
-      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-      this === null || this === void 0 || (_this$table5 = this.table) === null || _this$table5 === void 0 || _this$table5.removeEventListener('mouseout', this.handleMouseOut);
-
-      // Ignored via go/ees005
-      // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-      this === null || this === void 0 || (_this$table6 = this.table) === null || _this$table6 === void 0 || _this$table6.removeEventListener('mouseover', this.handleMouseOver);
-      if (this.overflowShadowsObserver) {
-        this.overflowShadowsObserver.dispose();
-      }
-
-      // Ignored via go/ees005
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      eventDispatcher.off(stickyHeadersPluginKey.key, this.onStickyState);
-      if (this.initialOverflowCaptureTimerId) {
-        clearTimeout(this.initialOverflowCaptureTimerId);
-      }
-    }
-  }, {
-    key: "removeInlineTableWidth",
-    value:
-    // Should be called only when table node width is reset to undefined in Comment Editor
-    // Maybe replaced by handleColgroupUpdates as we implement new table's support in Comment Editor.
-    function removeInlineTableWidth() {
-      var _this$props9 = this.props,
-        isResizing = _this$props9.isResizing,
-        getNode = _this$props9.getNode,
-        view = _this$props9.view,
-        getPos = _this$props9.getPos;
-      if (!this.table) {
-        return;
-      }
-      var tableNode = getNode();
-      var newTableWidth = tableNode.attrs.width;
-      var start = getPos() || 0;
-      var depth = view.state.doc.resolve(start).depth;
-      if (depth !== 0) {
-        return;
-      }
-      if (!isResizing && newTableWidth === null) {
-        this.table.style.width = '';
-      }
-    }
-  }, {
-    key: "handleColgroupUpdates",
-    value: function handleColgroupUpdates() {
-      var _this$containerWidth,
-        _this4 = this;
-      var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      var _this$props0 = this.props,
-        getNode = _this$props0.getNode,
-        containerWidth = _this$props0.containerWidth,
-        isResizing = _this$props0.isResizing,
-        view = _this$props0.view,
-        getPos = _this$props0.getPos,
-        getEditorFeatureFlags = _this$props0.getEditorFeatureFlags,
-        options = _this$props0.options;
-      if (!this.table) {
-        return;
-      }
-
-      // Remove any widths styles after resizing preview is completed
-      this.table.style.width = '';
-      var tableNode = getNode();
-      var start = getPos() || 0;
-      var depth = view.state.doc.resolve(start).depth;
-      if (depth !== 0) {
-        return;
-      }
-      var tableNodeWidth = getTableContainerWidth(tableNode);
-      var isTableResizedFullWidth = tableNodeWidth === 1800 && this.wasResizing && !isResizing;
-
-      // Needed for undo / redo
-      var isTableWidthChanged = tableNodeWidth !== this.tableNodeWidth;
-      var tableRenderWidth = options !== null && options !== void 0 && options.isCommentEditor ? containerWidth.width - (TABLE_OFFSET_IN_COMMENT_EDITOR + 1) // should be the same as this.table.parentElement?.clientWidth - 1, subtract 1 to avoid overflow
-      : containerWidth.width - TABLE_EDITOR_MARGIN;
-      tableNodeWidth = options !== null && options !== void 0 && options.isCommentEditor && !tableNode.attrs.width ? tableRenderWidth : tableNodeWidth;
-      var isTableSquashed = tableRenderWidth < tableNodeWidth;
-      var isNumberColumnChanged = tableNode.attrs.isNumberColumnEnabled !== this.node.attrs.isNumberColumnEnabled;
-      var isNumberOfColumnsChanged = tablesHaveDifferentNoOfColumns(tableNode, this.node);
-      var containerWidthValue = containerWidth.width,
-        containerLineLength = containerWidth.lineLength;
-      var isLineLengthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.lineLength) !== containerLineLength;
-      var isFullWidthModeAndLineLengthChanged = this.updateColGroupFromFullWidthChange && isLineLengthChanged;
-      var maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth && !(options !== null && options !== void 0 && options.isCommentEditor) || isNumberColumnChanged || isNumberOfColumnsChanged || this.state.windowResized;
-      if (force || maybeScale || isFullWidthModeAndLineLengthChanged) {
-        var _this$containerWidth2, _this$props$options3, _this$props$options4, _this$props$options5;
-        var isWidthChanged = ((_this$containerWidth2 = this.containerWidth) === null || _this$containerWidth2 === void 0 ? void 0 : _this$containerWidth2.width) !== containerWidthValue;
-        var wasTableResized = hasTableBeenResized(this.node);
-        var isTableResized = hasTableBeenResized(tableNode);
-        var isColumnsDistributed = wasTableResized && !isTableResized;
-        var isTableDisplayModeChanged = this.node.attrs.displayMode !== tableNode.attrs.displayMode;
-        var shouldUpdateColgroup = this.shouldUpdateColgroup({
-          isWindowResized: this.state.windowResized,
-          isWidthChanged: isWidthChanged,
-          isTableWidthChanged: isTableWidthChanged,
-          isColumnsDistributed: isColumnsDistributed,
-          isTableResizedFullWidth: isTableResizedFullWidth,
-          isTableDisplayModeChanged: isTableDisplayModeChanged,
-          isNumberColumnChanged: isNumberColumnChanged,
-          isNumberOfColumnsChanged: isNumberOfColumnsChanged,
-          isFullWidthModeAndLineLengthChanged: isFullWidthModeAndLineLengthChanged,
-          isTableResized: isTableResized
-        });
-        var _getEditorFeatureFlag = getEditorFeatureFlags(),
-          _getEditorFeatureFlag2 = _getEditorFeatureFlag.tableWithFixedColumnWidthsOption,
-          tableWithFixedColumnWidthsOption = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
-        var isTableScalingWithFixedColumnWidthsOptionEnabled = !!((_this$props$options3 = this.props.options) !== null && _this$props$options3 !== void 0 && _this$props$options3.isTableScalingEnabled) && tableWithFixedColumnWidthsOption;
-        var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled || !!((_this$props$options4 = this.props.options) !== null && _this$props$options4 !== void 0 && _this$props$options4.isTableScalingEnabled) && !!((_this$props$options5 = this.props.options) !== null && _this$props$options5 !== void 0 && _this$props$options5.isCommentEditor);
-        if (force || !isResizing && shouldUpdateColgroup) {
-          var _this$props$options6, _this$props$options7, _this$props$options8, _this$props$options9;
-          var resizeState = getResizeState({
-            minWidth: COLUMN_MIN_WIDTH,
-            // When numbered column enabled, we need to subtract the width of the numbered column
-            maxSize: tableNode.attrs.isNumberColumnEnabled ? tableRenderWidth - akEditorTableNumberColumnWidth : tableRenderWidth,
-            table: tableNode,
-            tableRef: this.table,
-            start: start,
-            domAtPos: view.domAtPos.bind(view),
-            isTableScalingEnabled: true,
-            shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
-            isCommentEditor: !!((_this$props$options6 = this.props.options) !== null && _this$props$options6 !== void 0 && _this$props$options6.isCommentEditor)
-          });
-          var shouldScaleOnColgroupUpdate = false;
-          if ((_this$props$options7 = this.props.options) !== null && _this$props$options7 !== void 0 && _this$props$options7.isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
-            shouldScaleOnColgroupUpdate = true;
-          }
-          if (isTableScalingWithFixedColumnWidthsOptionEnabled && tableNode.attrs.displayMode !== 'fixed') {
-            shouldScaleOnColgroupUpdate = true;
-          }
-          if ((_this$props$options8 = this.props.options) !== null && _this$props$options8 !== void 0 && _this$props$options8.isTableScalingEnabled && (_this$props$options9 = this.props.options) !== null && _this$props$options9 !== void 0 && _this$props$options9.isCommentEditor) {
-            shouldScaleOnColgroupUpdate = true;
-          }
-          var scalePercent = 1;
-          requestAnimationFrame(function () {
-            var _this4$props$options, _this4$props$options2;
-            // Scaling percent has to be calculated inside requestAnimationFrame, otherwise
-            // renderWidth calculated as `tableRef?.parentElement?.clientWidth`
-            // inside of getTableScalingPercent returns 0.
-            if (!((_this4$props$options = _this4.props.options) !== null && _this4$props$options !== void 0 && _this4$props$options.isCommentEditor) || (_this4$props$options2 = _this4.props.options) !== null && _this4$props$options2 !== void 0 && _this4$props$options2.isCommentEditor && tableNode.attrs.width) {
-              scalePercent = getTableScalingPercent(tableNode,
-              // Ignored via go/ees005
-              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              _this4.table, shouldUseIncreasedScalingPercent);
-            } else {
-              // Ignored via go/ees005
-              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              scalePercent = getScalingPercentForTableWithoutWidth(tableNode, _this4.table);
-            }
-
-            // Request animation frame required for Firefox
-            updateColgroup(resizeState,
-            // Ignored via go/ees005
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            _this4.table, tableNode, shouldScaleOnColgroupUpdate, scalePercent);
-          });
-        }
-      }
-      if (isFullWidthModeAndLineLengthChanged) {
-        this.updateColGroupFromFullWidthChange = false;
-      }
-      this.tableNodeWidth = tableNodeWidth;
-      this.wasResizing = isResizing;
-      this.containerWidth = containerWidth;
-    }
-
-    // Ignored via go/ees005
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(_, prevState) {
-      var _this$props$options0,
-        _this$props$options1,
-        _this$wrapper,
-        _this5 = this;
-      var _this$props1 = this.props,
-        getNode = _this$props1.getNode,
-        isMediaFullscreen = _this$props1.isMediaFullscreen,
-        allowColumnResizing = _this$props1.allowColumnResizing,
-        allowTableResizing = _this$props1.allowTableResizing,
-        isResizing = _this$props1.isResizing,
-        options = _this$props1.options,
-        isTableScalingEnabled = _this$props1.isTableScalingEnabled,
-        getPos = _this$props1.getPos,
-        getEditorFeatureFlags = _this$props1.getEditorFeatureFlags;
-      var shouldScale = false;
-      var shouldHandleColgroupUpdates = false;
-      var _getEditorFeatureFlag3 = getEditorFeatureFlags(),
-        _getEditorFeatureFlag4 = _getEditorFeatureFlag3.tableWithFixedColumnWidthsOption,
-        tableWithFixedColumnWidthsOption = _getEditorFeatureFlag4 === void 0 ? false : _getEditorFeatureFlag4;
-      if (isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
-        shouldScale = true;
-        shouldHandleColgroupUpdates = true;
-      }
-      var isTableScalingWithFixedColumnWidthsOptionEnabled = !!isTableScalingEnabled && tableWithFixedColumnWidthsOption;
-      var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled || !!isTableScalingEnabled && !!((_this$props$options0 = this.props.options) !== null && _this$props$options0 !== void 0 && _this$props$options0.isCommentEditor);
-      if (isTableScalingWithFixedColumnWidthsOptionEnabled && getNode().attrs.displayMode !== 'fixed') {
-        shouldScale = true;
-        shouldHandleColgroupUpdates = true;
-      }
-      if (!fg('platform_editor_table_width_refactor')) {
-        if (this.state.windowResized) {
-          shouldHandleColgroupUpdates = true;
-        }
-      }
-      if (shouldHandleColgroupUpdates) {
-        this.handleColgroupUpdates();
-      }
-      if ((_this$props$options1 = this.props.options) !== null && _this$props$options1 !== void 0 && _this$props$options1.isCommentEditor && allowTableResizing && !(options !== null && options !== void 0 && options.isTableScalingEnabled)) {
-        this.removeInlineTableWidth();
-      }
-      if ((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement && this.table && !this.overflowShadowsObserver) {
-        // isDragAndDropEnabled will be false when the editorViewMode is 'live' and so the fix below is never triggered
-        // but the shadow observer must run async so its initial state is correct.
-        if (this.props.isDragAndDropEnabled) {
-          // requestAnimationFrame is used here to fix a race condition issue
-          // that happens when a table is nested in expand and expand's width is
-          // changed via breakout button
-          window.requestAnimationFrame(function () {
-            _this5.overflowShadowsObserver = new OverflowShadowsObserver(_this5.updateShadowStateDebounced,
-            // Ignored via go/ees005
-            // eslint-disable-next-line @atlaskit/editor/no-as-casting
-            _this5.table, _this5.wrapper);
-          });
-        } else {
-          this.overflowShadowsObserver = new OverflowShadowsObserver(this.updateShadowState, this.table, this.wrapper);
-        }
-      }
-      if (this.overflowShadowsObserver) {
-        var _this$state$stickyHea;
-        this.overflowShadowsObserver.observeShadowSentinels((_this$state$stickyHea = this.state.stickyHeader) === null || _this$state$stickyHea === void 0 ? void 0 : _this$state$stickyHea.sticky);
-      }
-      var currentTable = getNode();
-      var previousTable = this.node;
-      var isNoOfColumnsChanged = tablesHaveDifferentNoOfColumns(currentTable, previousTable);
-      var isNoOfRowsChanged = tablesHaveDifferentNoOfRows(currentTable, previousTable);
-      if (isNoOfColumnsChanged || isNoOfRowsChanged) {
-        var _this$props$pluginInj;
-        (_this$props$pluginInj = this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 || (_this$props$pluginInj = _this$props$pluginInj.accessibilityUtils) === null || _this$props$pluginInj === void 0 || _this$props$pluginInj.actions.ariaNotify(getAssistiveMessage(previousTable, currentTable, this.props.intl), {
-          priority: 'important'
-        });
-      }
-      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
-      // 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.
-        if (tablesHaveDifferentColumnWidths(currentTable, previousTable) || isNoOfColumnsChanged) {
-          var view = this.props.view;
-          var shouldRecreateResizeCols = !allowTableResizing || !isResizing || isNoOfColumnsChanged && isResizing;
-          if (shouldRecreateResizeCols) {
-            var start = getPos() || 0;
-            var depth = view.state.doc.resolve(start).depth;
-            shouldScale = depth === 0 && shouldScale;
-            insertColgroupFromNode(this.table, currentTable, shouldScale, undefined, shouldUseIncreasedScalingPercent, options === null || options === void 0 ? void 0 : options.isCommentEditor);
-          }
-          updateControls()(view.state);
-        }
-        this.handleTableResizingDebounced();
-      }
-      if (isOverflowAnalyticsEnabled) {
-        var newIsOverflowing = this.state[ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[ShadowEvent.SHOW_AFTER_SHADOW];
-        var prevIsOverflowing = prevState[ShadowEvent.SHOW_BEFORE_SHADOW] || prevState[ShadowEvent.SHOW_AFTER_SHADOW];
-        if (this.initialOverflowCaptureTimerId) {
-          clearTimeout(this.initialOverflowCaptureTimerId);
-        }
-        if (!this.isInitialOverflowSent) {
-          this.setTimerToSendInitialOverflowCaptured(newIsOverflowing);
-        }
-        if (this.isInitialOverflowSent && prevIsOverflowing !== newIsOverflowing) {
-          var _this$state2;
-          var _this$props$view = this.props.view,
-            dispatch = _this$props$view.dispatch,
-            tr = _this$props$view.state.tr;
-          dispatch(tr.setMeta(META_KEYS.OVERFLOW_STATE_CHANGED, {
-            isOverflowing: newIsOverflowing,
-            wasOverflowing: prevIsOverflowing,
-            editorWidth: this.props.containerWidth.width || 0,
-            width: this.node.attrs.width || 0,
-            parentWidth: ((_this$state2 = this.state) === null || _this$state2 === void 0 ? void 0 : _this$state2.parentWidth) || 0
-          }));
-        }
-      }
-    }
-  }, {
-    key: "observeTable",
-    value: function observeTable(table) {
-      if (table) {
-        var _this$resizeObserver2;
-        (_this$resizeObserver2 = this.resizeObserver) === null || _this$resizeObserver2 === void 0 || _this$resizeObserver2.observe(table);
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this6 = this,
-        _this$props$options10;
-      var _this$props10 = this.props,
-        view = _this$props10.view,
-        getNode = _this$props10.getNode,
-        isResizing = _this$props10.isResizing,
-        _this$props10$allowCo = _this$props10.allowControls,
-        allowControls = _this$props10$allowCo === void 0 ? true : _this$props10$allowCo,
-        isHeaderRowEnabled = _this$props10.isHeaderRowEnabled,
-        ordering = _this$props10.ordering,
-        isHeaderColumnEnabled = _this$props10.isHeaderColumnEnabled,
-        tableActive = _this$props10.tableActive,
-        containerWidth = _this$props10.containerWidth,
-        options = _this$props10.options,
-        getPos = _this$props10.getPos,
-        pluginInjectionApi = _this$props10.pluginInjectionApi,
-        isDragAndDropEnabled = _this$props10.isDragAndDropEnabled,
-        getEditorFeatureFlags = _this$props10.getEditorFeatureFlags,
-        isTableScalingEnabled = _this$props10.isTableScalingEnabled,
-        allowTableResizing = _this$props10.allowTableResizing,
-        allowTableAlignment = _this$props10.allowTableAlignment,
-        selection = _this$props10.selection,
-        isInDanger = _this$props10.isInDanger,
-        hoveredRows = _this$props10.hoveredRows,
-        hoveredCell = _this$props10.hoveredCell,
-        isTableHovered = _this$props10.isTableHovered,
-        isWholeTableInDanger = _this$props10.isWholeTableInDanger;
-      var _this$state3 = this.state,
-        showBeforeShadow = _this$state3.showBeforeShadow,
-        showAfterShadow = _this$state3.showAfterShadow;
-      var node = getNode();
-      var tableRef = this.table || undefined;
-      var headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined;
-      var hasHeaderRow = containsHeaderRow(node);
-      var rowControls = /*#__PURE__*/React.createElement(TableFloatingControls, {
-        editorView: view,
-        tableRef: tableRef,
-        tableNode: node,
-        tableActive: tableActive,
-        hoveredRows: hoveredRows,
-        hoveredCell: hoveredCell,
-        isTableHovered: isTableHovered,
-        isInDanger: isInDanger,
-        isResizing: isResizing,
-        isNumberColumnEnabled: node.attrs.isNumberColumnEnabled,
-        isHeaderRowEnabled: isHeaderRowEnabled,
-        isDragAndDropEnabled: isDragAndDropEnabled,
-        ordering: ordering,
-        isHeaderColumnEnabled: isHeaderColumnEnabled,
-        hasHeaderRow: hasHeaderRow
-        // pass `selection` and `tableHeight` to control re-render
-        ,
-        selection: view.state.selection,
-        headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
-        stickyHeader: !this.props.limitedMode ? this.state.stickyHeader : undefined,
-        tableWrapperWidth: this.state.tableWrapperWidth,
-        api: pluginInjectionApi,
-        isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor
-      });
-      var tableContainerWidth = getTableContainerWidth(node);
-      var colControls = isDragAndDropEnabled ? /*#__PURE__*/React.createElement(TableFloatingColumnControls, {
-        editorView: view,
-        tableRef: tableRef,
-        getNode: getNode,
-        tableActive: tableActive,
-        isInDanger: isInDanger,
-        hoveredRows: hoveredRows,
-        hoveredCell: hoveredCell,
-        isTableHovered: isTableHovered,
-        isResizing: isResizing,
-        ordering: ordering,
-        hasHeaderRow: hasHeaderRow
-        // pass `selection` to control re-render
-        ,
-        selection: view.state.selection,
-        headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
-        stickyHeader: !this.props.limitedMode ? this.state.stickyHeader : undefined,
-        getEditorFeatureFlags: getEditorFeatureFlags,
-        tableContainerWidth: tableContainerWidth,
-        isNumberColumnEnabled: node.attrs.isNumberColumnEnabled,
-        getScrollOffset: function getScrollOffset() {
-          var _this6$wrapper;
-          return ((_this6$wrapper = _this6.wrapper) === null || _this6$wrapper === void 0 ? void 0 : _this6$wrapper.scrollLeft) || 0;
-        },
-        tableWrapperHeight: this.state.tableWrapperHeight,
-        api: pluginInjectionApi,
-        isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor
-      }) : null;
-      var shadowPadding = allowControls && tableActive ? -tableToolbarSize : tableMarginSides;
-      var shadowStyle = memoizeOne(function (visible) {
-        return {
-          visibility: visible ? 'visible' : 'hidden'
-        };
-      });
-
-      /**
-       *  ED-19838
-       *  There is a getPos issue coming from this code. We need to apply this workaround for now and apply a patch
-       *  before CR6 lands in production
-       */
-      var tablePos;
-      try {
-        tablePos = getPos ? getPos() : undefined;
-      } catch (_unused) {
-        tablePos = undefined;
-      }
-      var isNested = isTableNested(view.state, tablePos);
-      var topShadowPadding = isDragAndDropEnabled ? 0 : shadowPadding;
-      var topOffset = 0;
-      var topStickyShadowPosition = !this.props.limitedMode && this.state.stickyHeader && topOffset + this.state.stickyHeader.padding + topShadowPadding + 2;
-      var _getEditorFeatureFlag5 = getEditorFeatureFlags(),
-        _getEditorFeatureFlag6 = _getEditorFeatureFlag5.tableWithFixedColumnWidthsOption,
-        tableWithFixedColumnWidthsOption = _getEditorFeatureFlag6 === void 0 ? false : _getEditorFeatureFlag6;
-      var shouldUseIncreasedScalingPercent = !!isTableScalingEnabled && (tableWithFixedColumnWidthsOption || !!((_this$props$options10 = this.props.options) !== null && _this$props$options10 !== void 0 && _this$props$options10.isCommentEditor));
-      return /*#__PURE__*/React.createElement(TableContainer
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      , {
-        className: classnames(ClassName.TABLE_CONTAINER, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ClassName.WITH_CONTROLS, allowControls && tableActive), ClassName.TABLE_STICKY, !this.props.limitedMode && this.state.stickyHeader && hasHeaderRow), ClassName.HOVERED_DELETE_BUTTON, isInDanger), ClassName.TABLE_SELECTED, isTableSelected(selection !== null && selection !== void 0 ? selection : view.state.selection)), ClassName.NESTED_TABLE_WITH_CONTROLS, tableActive && allowControls && this.isNestedInTable)),
-        editorView: view,
-        getPos: getPos,
-        node: node
-        // Ignored via go/ees005
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        ,
-        tableRef: tableRef,
-        containerWidth: containerWidth,
-        isNested: isNested,
-        pluginInjectionApi: pluginInjectionApi,
-        tableWrapperHeight: this.state.tableWrapperHeight,
-        isTableResizingEnabled: allowTableResizing,
-        isResizing: isResizing,
-        isTableScalingEnabled: isTableScalingEnabled,
-        isTableWithFixedColumnWidthsOptionEnabled: tableWithFixedColumnWidthsOption,
-        isWholeTableInDanger: isWholeTableInDanger,
-        isTableAlignmentEnabled: allowTableAlignment,
-        shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
-        isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
-        isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor
-      }, /*#__PURE__*/React.createElement("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        className: ClassName.TABLE_STICKY_SENTINEL_TOP,
-        "data-testid": "sticky-sentinel-top"
-      }), !this.isNestedInTable && /*#__PURE__*/React.createElement("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        className: ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
-        "data-testid": "sticky-scrollbar-sentinel-top"
-      }), allowControls && rowControls, isDragAndDropEnabled && /*#__PURE__*/React.createElement(ExternalDropTargets, {
-        editorView: view,
-        node: node,
-        getScrollOffset: function getScrollOffset() {
-          var _this6$wrapper2;
-          return ((_this6$wrapper2 = _this6.wrapper) === null || _this6$wrapper2 === void 0 ? void 0 : _this6$wrapper2.scrollLeft) || 0;
-        },
-        getTableWrapperWidth: function getTableWrapperWidth() {
-          var _this6$wrapper3;
-          return ((_this6$wrapper3 = _this6.wrapper) === null || _this6$wrapper3 === void 0 ? void 0 : _this6$wrapper3.clientWidth) || 760;
-        }
-      }), /*#__PURE__*/React.createElement("div", {
-        contentEditable: false
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        ,
-        style: shadowStyle(showBeforeShadow)
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        ,
-        className: options !== null && options !== void 0 && options.isChromelessEditor && !isDragAndDropEnabled ? ClassName.TABLE_LEFT_SHADOW + ' ' + ClassName.TABLE_CHROMELESS : ClassName.TABLE_LEFT_SHADOW
-      }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        className: "".concat(ClassName.TABLE_LEFT_SHADOW, " ").concat(ClassName.TABLE_STICKY_SHADOW),
-        style: {
-          visibility: showBeforeShadow && hasHeaderRow ? 'visible' : 'hidden',
-          top: "".concat(topStickyShadowPosition, "px"),
-          paddingBottom: "".concat(isDragAndDropEnabled && "var(--ds-space-025, 2px)")
-        }
-      }), /*#__PURE__*/React.createElement("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        className: classnames(ClassName.TABLE_NODE_WRAPPER),
-        ref: function ref(elem) {
-          _this6.wrapper = elem;
-          if (elem) {
-            _this6.props.contentDOM(elem);
-            var tableElement = elem.querySelector('table');
-            if (tableElement !== _this6.table) {
-              _this6.table = tableElement;
-              _this6.createShadowSentinels(_this6.table);
-              _this6.observeTable(_this6.table);
-            }
-          }
-        }
-      }, allowControls && colControls), !this.isNestedInTable ? /*#__PURE__*/React.createElement("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        className: ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
-        "data-vc-nvs": "true",
-        style: {
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-          height: "var(--ds-space-250, 20px)",
-          // MAX_BROWSER_SCROLLBAR_HEIGHT
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-          display: 'none',
-          // prevent unwanted scroll during table resize without removing scrollbar container from the dom
-          width: isResizing ? "var(--ds-space-0, 0px)" : '100%'
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        style: {
-          width: tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth,
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-          height: '100%'
-        },
-        "data-vc-nvs": "true"
-      })) : /*#__PURE__*/React.createElement("div", {
-        style: {
-          width: tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth,
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-          height: '100%'
-        },
-        "data-vc-nvs": "true"
-      }), /*#__PURE__*/React.createElement("div", {
-        contentEditable: false
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        ,
-        style: shadowStyle(showAfterShadow)
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        ,
-        className: options !== null && options !== void 0 && options.isChromelessEditor && !isDragAndDropEnabled ? ClassName.TABLE_RIGHT_SHADOW + ' ' + ClassName.TABLE_CHROMELESS : ClassName.TABLE_RIGHT_SHADOW
-      }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
-        style: {
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-          position: 'absolute',
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-          right: "var(--ds-space-400, 32px)" // tableOverflowShadowWidthWide
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        className: "".concat(ClassName.TABLE_RIGHT_SHADOW, " ").concat(ClassName.TABLE_STICKY_SHADOW),
-        style: {
-          visibility: showAfterShadow && hasHeaderRow ? 'visible' : 'hidden',
-          top: "".concat(topStickyShadowPosition, "px"),
-          paddingBottom: "".concat(isDragAndDropEnabled && "var(--ds-space-025, 2px)")
-        }
-      })), /*#__PURE__*/React.createElement("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        className: ClassName.TABLE_STICKY_SENTINEL_BOTTOM,
-        "data-testid": "sticky-sentinel-bottom"
-      }), !this.isNestedInTable && /*#__PURE__*/React.createElement("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        className: ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
-        "data-testid": "sticky-scrollbar-sentinel-bottom"
-      }));
-    }
-  }]);
-}(React.Component);
-_defineProperty(TableComponent, "displayName", 'TableComponent');
-export default injectIntl(TableComponent);