@atlaskit/editor-plugin-table 7.6.2 → 7.6.4

package/dist/es2019/utils/guidelines.js

@@ -4,4 +4,4 @@ import { calculateDefaultSnappings, calculateDefaultTablePreserveSnappings } fro
 // NOTE: We have to take 1 pixel off every length due to the fact that the tbody is 1px smaller then the table container.
 // If we don't do this then the guidelines will not align correctly to the edge of the table
 export const defaultGuidelines = createFixedGuidelinesFromLengths([0, ...calculateDefaultSnappings(-1)]);
-export const defaultGuidelinesForPreserveTable = editorContainerWidth => createFixedGuidelinesFromLengths([0, ...calculateDefaultTablePreserveSnappings(-1, editorContainerWidth)]);
+export const defaultGuidelinesForPreserveTable = editorContainerWidth => createFixedGuidelinesFromLengths([0, ...calculateDefaultTablePreserveSnappings(-1, editorContainerWidth)], undefined, true);

package/dist/esm/commands/misc.js

@@ -2,6 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
+import isEqual from 'lodash/isEqual';
 import { closestElement, isParagraph, isTextSelection, mapSlice } from '@atlaskit/editor-common/utils';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
@@ -559,13 +560,13 @@ export var updateWidthToWidest = function updateWidthToWidest(widthToWidest) {
   return createCommand(function (state) {
     var _getPluginState4 = getPluginState(state),
       prevWidthToWidest = _getPluginState4.widthToWidest;
-    if (prevWidthToWidest === widthToWidest) {
+    if (isEqual(widthToWidest, prevWidthToWidest)) {
       return false;
     }
     return {
       type: 'UPDATE_TABLE_WIDTH_TO_WIDEST',
       data: {
-        widthToWidest: widthToWidest
+        widthToWidest: _objectSpread(_objectSpread({}, prevWidthToWidest), widthToWidest)
       }
     };
   });

package/dist/esm/nodeviews/TableComponent.js

@@ -498,9 +498,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         options = _this$props10.options,
         isTableScalingEnabled = _this$props10.isTableScalingEnabled,
         getPos = _this$props10.getPos;
-      var _getPluginState = getPluginState(view.state),
-        isInDanger = _getPluginState.isInDanger;
+      var isInDanger = this.props.isInDanger;
       var table = findTable(view.state.selection);
+      if (!getBooleanFF('platform.editor.table.use-shared-state-hook')) {
+        var pluginState = getPluginState(view.state);
+        isInDanger = pluginState.isInDanger;
+      }
       if (isTableScalingEnabled) {
         this.handleColgroupUpdates();
       }
@@ -602,16 +605,24 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isDragAndDropEnabled = _this$props11.isDragAndDropEnabled,
         getEditorFeatureFlags = _this$props11.getEditorFeatureFlags,
         isTableScalingEnabled = _this$props11.isTableScalingEnabled;
+      var _this$props12 = this.props,
+        isInDanger = _this$props12.isInDanger,
+        hoveredRows = _this$props12.hoveredRows,
+        hoveredCell = _this$props12.hoveredCell,
+        isTableHovered = _this$props12.isTableHovered,
+        isWholeTableInDanger = _this$props12.isWholeTableInDanger;
       var _this$state3 = this.state,
         showBeforeShadow = _this$state3.showBeforeShadow,
         showAfterShadow = _this$state3.showAfterShadow;
       var node = getNode();
-      // doesn't work well with WithPluginState
-      var _getPluginState2 = getPluginState(view.state),
-        isInDanger = _getPluginState2.isInDanger,
-        hoveredRows = _getPluginState2.hoveredRows,
-        hoveredCell = _getPluginState2.hoveredCell,
-        isTableHovered = _getPluginState2.isTableHovered;
+      if (!getBooleanFF('platform.editor.table.use-shared-state-hook')) {
+        var pluginState = getPluginState(view.state);
+        isInDanger = pluginState.isInDanger;
+        hoveredRows = pluginState.hoveredRows;
+        hoveredCell = pluginState.hoveredCell;
+        isTableHovered = pluginState.isTableHovered;
+        isWholeTableInDanger = pluginState.isWholeTableInDanger;
+      }
       var tableRef = this.table || undefined;
       var headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined;
       var hasHeaderRow = containsHeaderRow(node);
@@ -636,7 +647,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         selection: view.state.selection,
         headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
         stickyHeader: this.state.stickyHeader,
-        tableWrapperWidth: this.state.tableWrapperWidth
+        tableWrapperWidth: this.state.tableWrapperWidth,
+        api: pluginInjectionApi
       });
       var tableContainerWidth = getTableContainerWidth(node);
       var colControls = isDragAndDropEnabled ? /*#__PURE__*/React.createElement(TableFloatingColumnControls, {
@@ -663,7 +675,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           var _this4$wrapper;
           return ((_this4$wrapper = _this4.wrapper) === null || _this4$wrapper === void 0 ? void 0 : _this4$wrapper.scrollLeft) || 0;
         },
-        tableWrapperHeight: this.state.tableWrapperHeight
+        tableWrapperHeight: this.state.tableWrapperHeight,
+        api: pluginInjectionApi
       }) : null;
       var shadowPadding = allowControls && tableActive ? -tableToolbarSize : tableMarginSides;
       var shadowStyle = memoizeOne(function (visible) {
@@ -700,7 +713,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         tableWrapperHeight: this.state.tableWrapperHeight,
         isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled,
         isResizing: isResizing,
-        isTableScalingEnabled: isTableScalingEnabled
+        isTableScalingEnabled: isTableScalingEnabled,
+        isWholeTableInDanger: isWholeTableInDanger
       }, /*#__PURE__*/React.createElement("div", {
         className: ClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"

package/dist/esm/nodeviews/TableComponentWithSharedState.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { findTable } from '@atlaskit/editor-tables';
+import TableComponent from './TableComponent';
+/**
+ * Use useSharedPluginState to control re-renders from plugin dependencies
+ */
+export var TableComponentWithSharedState = function TableComponentWithSharedState(_ref) {
+  var view = _ref.view,
+    options = _ref.options,
+    getNode = _ref.getNode,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+    api = _ref.api,
+    getEditorFeatureFlags = _ref.getEditorFeatureFlags,
+    eventDispatcher = _ref.eventDispatcher,
+    allowColumnResizing = _ref.allowColumnResizing,
+    allowControls = _ref.allowControls,
+    getPos = _ref.getPos,
+    forwardRef = _ref.forwardRef;
+  var _useSharedPluginState = useSharedPluginState(api, ['width', 'table', 'media']),
+    widthState = _useSharedPluginState.widthState,
+    tableState = _useSharedPluginState.tableState,
+    mediaState = _useSharedPluginState.mediaState;
+  if (!tableState) {
+    return null;
+  }
+  var _ref2 = tableState,
+    isTableResizing = _ref2.isTableResizing,
+    isHeaderColumnEnabled = _ref2.isHeaderColumnEnabled,
+    isHeaderRowEnabled = _ref2.isHeaderRowEnabled,
+    ordering = _ref2.ordering,
+    isResizing = _ref2.isResizing,
+    isInDanger = _ref2.isInDanger,
+    hoveredCell = _ref2.hoveredCell,
+    hoveredRows = _ref2.hoveredRows,
+    isTableHovered = _ref2.isTableHovered,
+    isWholeTableInDanger = _ref2.isWholeTableInDanger;
+
+  /**
+   *  ED-19810
+   *  There is a getPos issue coming from this code. We need to apply this workaround for now and apply a patch
+   *  directly to confluence since this bug is now in production.
+   */
+  var currentTablePos;
+  try {
+    currentTablePos = getPos ? getPos() : undefined;
+  } catch (e) {
+    currentTablePos = undefined;
+  }
+  var selectedTable = findTable(view.state.selection);
+  var tablePos = selectedTable && selectedTable.start - 1;
+  var tableActive = typeof currentTablePos === 'number' && typeof tablePos === 'number' && currentTablePos === tablePos && !isTableResizing;
+  return /*#__PURE__*/React.createElement(TableComponent, {
+    view: view,
+    allowColumnResizing: allowColumnResizing,
+    eventDispatcher: eventDispatcher,
+    getPos: getPos,
+    isMediaFullscreen: mediaState === null || mediaState === void 0 ? void 0 : mediaState.isFullscreen,
+    options: options,
+    allowControls: !!allowControls,
+    isHeaderRowEnabled: isHeaderRowEnabled,
+    isHeaderColumnEnabled: isHeaderColumnEnabled,
+    isDragAndDropEnabled: options === null || options === void 0 ? void 0 : options.isDragAndDropEnabled,
+    isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
+    tableActive: tableActive,
+    ordering: ordering,
+    isResizing: isResizing,
+    getNode: getNode,
+    containerWidth: widthState,
+    contentDOM: forwardRef,
+    getEditorFeatureFlags: getEditorFeatureFlags,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    pluginInjectionApi: api,
+    isInDanger: !!isInDanger,
+    hoveredRows: hoveredRows,
+    hoveredCell: hoveredCell,
+    isTableHovered: isTableHovered,
+    isWholeTableInDanger: isWholeTableInDanger
+  });
+};

package/dist/esm/nodeviews/TableContainer.js

@@ -4,6 +4,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 import React, { forwardRef, useCallback, useRef, useState } from 'react';
 import classNames from 'classnames';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
 import { akEditorDefaultLayoutWidth, akEditorGutterPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
@@ -32,10 +33,11 @@ export var InnerContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: className,
     "data-number-column": node.attrs.isNumberColumnEnabled,
     "data-layout": node.attrs.layout,
-    "data-test-id": "table-container"
+    "data-testid": "table-container"
   }, children);
 });
 export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
+  var _node$attrs$localId, _node$attrs;
   var children = _ref2.children,
     className = _ref2.className,
     node = _ref2.node,
@@ -46,7 +48,8 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
     isResizing = _ref2.isResizing,
     pluginInjectionApi = _ref2.pluginInjectionApi,
     isTableScalingEnabled = _ref2.isTableScalingEnabled,
-    tableWrapperHeight = _ref2.tableWrapperHeight;
+    tableWrapperHeight = _ref2.tableWrapperHeight,
+    isWholeTableInDanger = _ref2.isWholeTableInDanger;
   var containerRef = useRef(null);
   var tableWidthRef = useRef(akEditorDefaultLayoutWidth);
   var _useState = useState(false),
@@ -106,9 +109,18 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
     return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$s = pluginInjectionApi.selection) === null || _pluginInjectionApi$s === void 0 ? void 0 : _pluginInjectionApi$s.commands.displayGapCursor(toggle))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
   }, [pluginInjectionApi]);
   var tableWidth = getTableContainerWidth(node);
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['table']),
+    tableState = _useSharedPluginState.tableState;
+  var _ref3 = tableState,
+    widthToWidest = _ref3.widthToWidest;
+  var currentTableNodeLocalId = (_node$attrs$localId = node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) !== null && _node$attrs$localId !== void 0 ? _node$attrs$localId : '';
+
   // 76 is currently an accepted padding value considering the spacing for resizer handle
   var responsiveContainerWidth = isTableScalingEnabled ? containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide / 2 : containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide;
   var width = Math.min(tableWidth, responsiveContainerWidth);
+  if (isTableScalingEnabled && currentTableNodeLocalId && widthToWidest && widthToWidest[currentTableNodeLocalId]) {
+    width = TABLE_MAX_WIDTH;
+  }
   if (!isResizing) {
     tableWidthRef.current = width;
   }
@@ -125,7 +137,9 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
     displayGuideline: displayGuideline,
     attachAnalyticsEvent: attachAnalyticsEvent,
     displayGapCursor: displayGapCursor,
-    isTableScalingEnabled: isTableScalingEnabled
+    isTableScalingEnabled: isTableScalingEnabled,
+    isWholeTableInDanger: isWholeTableInDanger,
+    pluginInjectionApi: pluginInjectionApi
   };
   if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
     tableResizerProps = _objectSpread(_objectSpread({}, tableResizerProps), {}, {
@@ -150,23 +164,24 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
     node: node
   }, children))));
 });
-export var TableContainer = function TableContainer(_ref3) {
-  var children = _ref3.children,
-    node = _ref3.node,
-    className = _ref3.className,
-    _ref3$containerWidth = _ref3.containerWidth,
-    lineLength = _ref3$containerWidth.lineLength,
-    editorWidth = _ref3$containerWidth.width,
-    isTableResizingEnabled = _ref3.isTableResizingEnabled,
-    isBreakoutEnabled = _ref3.isBreakoutEnabled,
-    editorView = _ref3.editorView,
-    getPos = _ref3.getPos,
-    tableRef = _ref3.tableRef,
-    isNested = _ref3.isNested,
-    tableWrapperHeight = _ref3.tableWrapperHeight,
-    isResizing = _ref3.isResizing,
-    pluginInjectionApi = _ref3.pluginInjectionApi,
-    isTableScalingEnabled = _ref3.isTableScalingEnabled;
+export var TableContainer = function TableContainer(_ref4) {
+  var children = _ref4.children,
+    node = _ref4.node,
+    className = _ref4.className,
+    _ref4$containerWidth = _ref4.containerWidth,
+    lineLength = _ref4$containerWidth.lineLength,
+    editorWidth = _ref4$containerWidth.width,
+    isTableResizingEnabled = _ref4.isTableResizingEnabled,
+    isBreakoutEnabled = _ref4.isBreakoutEnabled,
+    editorView = _ref4.editorView,
+    getPos = _ref4.getPos,
+    tableRef = _ref4.tableRef,
+    isNested = _ref4.isNested,
+    tableWrapperHeight = _ref4.tableWrapperHeight,
+    isResizing = _ref4.isResizing,
+    pluginInjectionApi = _ref4.pluginInjectionApi,
+    isTableScalingEnabled = _ref4.isTableScalingEnabled,
+    isWholeTableInDanger = _ref4.isWholeTableInDanger;
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/React.createElement(ResizableTableContainer, {
       className: className,
@@ -178,7 +193,8 @@ export var TableContainer = function TableContainer(_ref3) {
       tableWrapperHeight: tableWrapperHeight,
       isResizing: isResizing,
       pluginInjectionApi: pluginInjectionApi,
-      isTableScalingEnabled: isTableScalingEnabled
+      isTableScalingEnabled: isTableScalingEnabled,
+      isWholeTableInDanger: isWholeTableInDanger
     }, children);
   }
   var tableWidth = isBreakoutEnabled ? calcTableWidth(node.attrs.layout, editorWidth) : 'inherit';

package/dist/esm/nodeviews/TableResizer.js

@@ -8,17 +8,16 @@ import rafSchd from 'raf-schd';
 import { useIntl } from 'react-intl-next';
 import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { focusTableResizer, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { browser } from '@atlaskit/editor-common/utils';
-import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { updateWidthToWidest } from '../commands/misc';
-import { getPluginState } from '../pm-plugins/plugin-factory';
 import { META_KEYS } from '../pm-plugins/table-analytics';
-import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTable } from '../pm-plugins/table-resizing/utils';
+import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTable, TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { TABLE_GUIDELINE_VISIBLE_ADJUSTMENT, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE, TABLE_SNAP_GAP } from '../ui/consts';
 import { generateResizedPayload, generateResizeFrameRatePayloads, useMeasureFramerate } from '../utils/analytics';
@@ -90,28 +89,38 @@ export var TableResizer = function TableResizer(_ref) {
     displayGuideline = _ref.displayGuideline,
     attachAnalyticsEvent = _ref.attachAnalyticsEvent,
     displayGapCursor = _ref.displayGapCursor,
-    isTableScalingEnabled = _ref.isTableScalingEnabled;
+    isTableScalingEnabled = _ref.isTableScalingEnabled,
+    isWholeTableInDanger = _ref.isWholeTableInDanger,
+    pluginInjectionApi = _ref.pluginInjectionApi;
   var currentGap = useRef(0);
   // track resizing state - use ref over state to avoid re-render
   var isResizing = useRef(false);
   var areResizeMetaKeysPressed = useRef(false);
+  var _useState = useState(width),
+    _useState2 = _slicedToArray(_useState, 2),
+    localTableWidth = _useState2[0],
+    setLocalTableWidth = _useState2[1];
   var resizerRef = useRef(null);
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['table']),
+    tableState = _useSharedPluginState.tableState;
+  var _ref2 = tableState,
+    widthToWidest = _ref2.widthToWidest;
 
   // used to reposition tooltip when table is resizing via keyboard
   var updateTooltip = React.useRef();
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    snappingEnabled = _useState2[0],
-    setSnappingEnabled = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    snappingEnabled = _useState4[0],
+    setSnappingEnabled = _useState4[1];
 
   // we don't want to update aria-live region on each width change, it might provide bad experience for screen reader users
-  var _useState3 = useState({
+  var _useState5 = useState({
       type: 'none',
       width: width
     }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    screenReaderResizeInformation = _useState4[0],
-    setScreenReaderResizeInformation = _useState4[1];
+    _useState6 = _slicedToArray(_useState5, 2),
+    screenReaderResizeInformation = _useState6[0],
+    setScreenReaderResizeInformation = _useState6[1];
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var screenReaderResizeAnnouncerMessages = {
@@ -126,15 +135,13 @@ export var TableResizer = function TableResizer(_ref) {
   var isTableSelected = ((_findTable = findTable((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos();
   var resizerMinWidth = getResizerMinWidth(node);
   var handleSize = getResizerHandleHeight(tableRef);
-  var _getPluginState = getPluginState(editorView.state),
-    isWholeTableInDanger = _getPluginState.isWholeTableInDanger;
   var _useMeasureFramerate = useMeasureFramerate(),
     startMeasure = _useMeasureFramerate.startMeasure,
     endMeasure = _useMeasureFramerate.endMeasure,
     countFrames = _useMeasureFramerate.countFrames;
-  var updateActiveGuidelines = useCallback(function (_ref2) {
-    var gap = _ref2.gap,
-      keys = _ref2.keys;
+  var updateActiveGuidelines = useCallback(function (_ref3) {
+    var gap = _ref3.gap,
+      keys = _ref3.keys;
     if (gap !== currentGap.current) {
       currentGap.current = gap;
       var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, containerWidth);
@@ -182,7 +189,7 @@ export var TableResizer = function TableResizer(_ref) {
     }
   }, [startMeasure, editorView, displayGapCursor, isTableScalingEnabled, containerWidth, displayGuideline, onResizeStart]);
   var handleResize = useCallback(function (originalState, delta) {
-    var _defaultGuidelinesFor;
+    var _node$attrs$localId, _node$attrs, _widestGuideline$posi;
     countFrames();
     var newWidth = originalState.width + delta.width;
     var pos;
@@ -207,25 +214,29 @@ export var TableResizer = function TableResizer(_ref) {
     // set the width of the table to 1800 pixels.
     var state = editorView.state,
       dispatch = editorView.dispatch;
-    var widestGuideLineWidthString = (_defaultGuidelinesFor = defaultGuidelinesForPreserveTable(containerWidth)[16].key) === null || _defaultGuidelinesFor === void 0 || (_defaultGuidelinesFor = _defaultGuidelinesFor.match(/[\d]*[.]{0,1}[\d]+/g)) === null || _defaultGuidelinesFor === void 0 ? void 0 : _defaultGuidelinesFor.join('');
-    var widestGuideLineWidth = parseInt(widestGuideLineWidthString || '', 10);
-    var shouldUpdateWidthToWidest = !!(isTableScalingEnabled && defaultGuidelinesForPreserveTable(containerWidth).length === 17 && widestGuideLineWidth - newWidth <= 1);
-    updateWidthToWidest(shouldUpdateWidthToWidest)(state, dispatch);
-    updateWidth(shouldUpdateWidthToWidest ? akEditorFullWidthLayoutWidth : newWidth);
+    var currentTableNodeLocalId = (_node$attrs$localId = node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) !== null && _node$attrs$localId !== void 0 ? _node$attrs$localId : '';
+    var widestGuideline = defaultGuidelinesForPreserveTable(containerWidth).filter(function (guideline) {
+      return guideline.isFullWidth;
+    })[0];
+    var widestGuideLineWidth = widestGuideline ? (((_widestGuideline$posi = widestGuideline.position) === null || _widestGuideline$posi === void 0 ? void 0 : _widestGuideline$posi.x) || 0) * 2 : null;
+    var shouldUpdateWidthToWidest = !!(isTableScalingEnabled && widestGuideLineWidth && Math.abs(widestGuideLineWidth - newWidth) <= 1);
+    shouldUpdateWidthToWidest ? setLocalTableWidth(TABLE_MAX_WIDTH) : setLocalTableWidth(newWidth);
+    updateWidthToWidest(_defineProperty({}, currentTableNodeLocalId, shouldUpdateWidthToWidest))(state, dispatch);
+    updateWidth(shouldUpdateWidthToWidest ? TABLE_MAX_WIDTH : newWidth);
     return newWidth;
   }, [countFrames, isTableScalingEnabled, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos]);
   var scheduleResize = useMemo(function () {
     return rafSchd(handleResize);
   }, [handleResize]);
   var handleResizeStop = useCallback(function (originalState, delta) {
+    var _node$attrs$localId2, _node$attrs2;
     isResizing.current = false;
     var newWidth = originalState.width + delta.width;
     var state = editorView.state,
       dispatch = editorView.dispatch;
     var pos = getPos();
-    var _getPluginState2 = getPluginState(editorView.state),
-      widthToWidest = _getPluginState2.widthToWidest;
-    newWidth = widthToWidest ? akEditorFullWidthLayoutWidth : newWidth;
+    var currentTableNodeLocalId = (_node$attrs$localId2 = node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.localId) !== null && _node$attrs$localId2 !== void 0 ? _node$attrs$localId2 : '';
+    newWidth = widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId] ? TABLE_MAX_WIDTH : newWidth;
     var tr = state.tr.setMeta(tableWidthPluginKey, {
       resizing: false
     });
@@ -270,7 +281,7 @@ export var TableResizer = function TableResizer(_ref) {
       onResizeStop();
     }
     return newWidth;
-  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled]);
+  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, widthToWidest]);
   var handleTableSizeChangeOnKeypress = useCallback(function (step) {
     var newWidth = width + step;
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {
@@ -375,7 +386,7 @@ export var TableResizer = function TableResizer(_ref) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizerNext, {
     ref: resizerRef,
     enable: handles,
-    width: width,
+    width: localTableWidth,
     handleAlignmentMethod: "sticky",
     handleSize: handleSize,
     handleStyles: handleStyles,
@@ -392,8 +403,8 @@ export var TableResizer = function TableResizer(_ref) {
     needExtendedResizeZone: !isTableSelected,
     appearance: isTableSelected && isWholeTableInDanger ? 'danger' : undefined,
     handleHighlight: "shadow",
-    handleTooltipContent: getBooleanFF('platform.editor.a11y-table-resizing_uapcv') ? function (_ref3) {
-      var update = _ref3.update;
+    handleTooltipContent: getBooleanFF('platform.editor.a11y-table-resizing_uapcv') ? function (_ref4) {
+      var update = _ref4.update;
       updateTooltip.current = update;
       return /*#__PURE__*/React.createElement(ToolTipContent, {
         description: formatMessage(messages.resizeTable),

package/dist/esm/nodeviews/table.js

@@ -17,6 +17,7 @@ import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { pluginConfig as getPluginConfig } from '../create-plugin-config';
 import { pluginKey as tableDragAndDropPluginKey } from '../pm-plugins/drag-and-drop';
 import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -26,6 +27,7 @@ import { generateColgroup } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { isTableNested } from '../utils';
 import TableComponent from './TableComponent';
+import { TableComponentWithSharedState } from './TableComponentWithSharedState';
 var tableAttributes = function tableAttributes(node) {
   return {
     'data-number-column': node.attrs.isNumberColumnEnabled,
@@ -116,6 +118,22 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
     key: "render",
     value: function render(props, forwardRef) {
       var _this3 = this;
+      if (getBooleanFF('platform.editor.table.use-shared-state-hook')) {
+        return /*#__PURE__*/React.createElement(TableComponentWithSharedState, {
+          forwardRef: forwardRef,
+          getNode: this.getNode,
+          view: props.view,
+          options: props.options,
+          eventDispatcher: props.eventDispatcher,
+          api: props.pluginInjectionApi,
+          allowColumnResizing: props.allowColumnResizing,
+          allowControls: props.allowControls,
+          getPos: props.getPos,
+          getEditorFeatureFlags: props.getEditorFeatureFlags,
+          dispatchAnalyticsEvent: props.dispatchAnalyticsEvent
+        });
+      }
+
       // TODO: ED-15663
       // Please, do not copy or use this kind of code below
       // @ts-ignore
@@ -262,12 +280,14 @@ export var createTableView = function createTableView(node, view, getPos, portal
     isDragAndDropEnabled = _getPluginState2.isDragAndDropEnabled,
     isTableScalingEnabled = _getPluginState2.isTableScalingEnabled;
   var _getPluginConfig = getPluginConfig(pluginConfig),
-    allowColumnResizing = _getPluginConfig.allowColumnResizing;
+    allowColumnResizing = _getPluginConfig.allowColumnResizing,
+    allowControls = _getPluginConfig.allowControls;
   var hasIntlContext = true;
   return new TableView({
     node: node,
     view: view,
     allowColumnResizing: allowColumnResizing,
+    allowControls: allowControls,
     portalProviderAPI: portalProviderAPI,
     eventDispatcher: eventDispatcher,
     getPos: getPos,

package/dist/esm/plugin.js

@@ -24,7 +24,7 @@ import { createPlugin as createTableSafariDeleteCompositionTextIssueWorkaroundPl
 import { createPlugin as createStickyHeadersPlugin, findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from './pm-plugins/sticky-headers';
 import { createPlugin as createTableOverflowAnalyticsPlugin } from './pm-plugins/table-analytics';
 import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-local-id';
-import { createPlugin as createFlexiResizingPlugin, pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
+import { createPlugin as createFlexiResizingPlugin, getPluginState as getFlexiResizingPlugin, pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
 import { tableSelectionKeymapPlugin } from './pm-plugins/table-selection-keymap';
 import { createPlugin as createTableWidthPlugin, pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
 import { getToolbarConfig } from './toolbar';
@@ -38,6 +38,9 @@ import { createTableWithWidth, isLayoutSupported } from './utils';
 var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
   return {};
 };
+
+// TODO: duplicating type instead of importing media plugin causing a circular dependency
+
 /**
  * Table plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
  * from `@atlaskit/editor-core`.
@@ -60,10 +63,30 @@ var tablesPlugin = function tablesPlugin(_ref) {
     name: 'table',
     // Use getSharedState to store fullWidthEnabled and wasFullWidthModeEnabled to guarantee access
     // to most up to date values - passing to createPluginState will not re-initialise the state
-    getSharedState: function getSharedState() {
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      var tablePluginState = getPluginState(editorState);
+      var tableResizingPluginState = getFlexiResizingPlugin(editorState);
+      var tableWidthResizingPluginState = tableWidthPluginKey.getState(editorState);
       return {
         isFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.fullWidthEnabled),
-        wasFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.wasFullWidthEnabled)
+        wasFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.wasFullWidthEnabled),
+        isHeaderRowEnabled: tablePluginState.isHeaderRowEnabled,
+        isHeaderColumnEnabled: tablePluginState.isHeaderColumnEnabled,
+        ordering: tablePluginState.ordering,
+        isResizing: !!(tableResizingPluginState !== null && tableResizingPluginState !== void 0 && tableResizingPluginState.dragging || tableWidthResizingPluginState !== null && tableWidthResizingPluginState !== void 0 && tableWidthResizingPluginState.resizing),
+        isTableResizing: tableWidthResizingPluginState === null || tableWidthResizingPluginState === void 0 ? void 0 : tableWidthResizingPluginState.resizing,
+        isInDanger: tablePluginState.isInDanger,
+        hoveredRows: tablePluginState.hoveredRows,
+        hoveredCell: tablePluginState.hoveredCell,
+        isTableHovered: tablePluginState.isTableHovered,
+        isWholeTableInDanger: tablePluginState.isWholeTableInDanger,
+        // IMPORTANT: Need to continue to pass tableNode to control re-renders
+        // TableComponent listens for node attribute changes to update colgroups
+        tableNode: tablePluginState.tableNode,
+        widthToWidest: tablePluginState.widthToWidest
       };
     },
     actions: {

package/dist/esm/toolbar.js

@@ -15,7 +15,6 @@ import { findCellRectClosestToPos, findTable, getSelectionRect, isSelectionType,
 import DistributeColumnIcon from '@atlaskit/icon/glyph/editor/layout-three-equal';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import TableOptionsIcon from '@atlaskit/icon/glyph/preferences';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, hoverTable, removeDescendantNodes } from './commands';
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, deleteTableWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, wrapTableInExpandWithAnalytics } from './commands-with-analytics';
 import { getPluginState } from './pm-plugins/plugin-factory';
@@ -54,7 +53,7 @@ export var getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _
     disabled: !state.canCollapseTable,
     hidden: !config.allowCollapse
   }];
-  if (state.isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling')) {
+  if (state.isDragAndDropEnabled) {
     return {
       id: 'editor.table.tableOptions',
       type: 'dropdown',
@@ -290,6 +289,7 @@ export var getClosestSelectionOrTableRect = function getClosestSelectionOrTableR
 export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView) {
   return function (config) {
     return function (state, intl) {
+      var _tableObject$node$att, _tableObject$node;
       var tableObject = findTable(state.selection);
       var pluginState = getPluginState(state);
       var resizeState = tableResizingPluginKey.getState(state);
@@ -299,7 +299,8 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
       var isWidthResizing = tableWidthState === null || tableWidthState === void 0 ? void 0 : tableWidthState.resizing;
       var isTableScalingEnabled = pluginState.isTableScalingEnabled,
         widthToWidest = pluginState.widthToWidest;
-      if (isTableScalingEnabled && isWidthResizing && widthToWidest) {
+      var currentTableNodeLocalId = (_tableObject$node$att = tableObject === null || tableObject === void 0 || (_tableObject$node = tableObject.node) === null || _tableObject$node === void 0 || (_tableObject$node = _tableObject$node.attrs) === null || _tableObject$node === void 0 ? void 0 : _tableObject$node.localId) !== null && _tableObject$node$att !== void 0 ? _tableObject$node$att : '';
+      if (isTableScalingEnabled && isWidthResizing && widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId]) {
         var _getEditorFeatureFlag = getEditorFeatureFlags(),
           stickyScrollbar = _getEditorFeatureFlag.stickyScrollbar;
         var nodeType = state.schema.nodes.table;
@@ -351,7 +352,7 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
         var cellItems;
         cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, _isTableScalingEnabled);
         var columnSettingsItems;
-        columnSettingsItems = pluginState.isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, _isTableScalingEnabled) : [];
+        columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, _isTableScalingEnabled) : [];
         var colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI);
 
         // Check if we need to show confirm dialog for delete button

package/dist/esm/types.js

@@ -9,6 +9,9 @@ export var RESIZE_HANDLE_AREA_DECORATION_GAP = 30;
  * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-6877 Internal documentation for deprecation (no external access)}
  **/
 
+// override getPluginState but do not expose publicly as this type is experimental and will change
+// in the future
+
 /*
  * This type represents the start and end from a cell in a column,
  * for example, on this table the cell C1 will have