@atlaskit/editor-plugin-table 7.6.3 → 7.6.5

package/dist/esm/commands/column-resize.js

@@ -1,3 +1,4 @@
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { TableMap } from '@atlaskit/editor-tables';
 import { findCellClosestToPos, findCellRectClosestToPos, findTableClosestToPos, getSelectionRect, isSelectionType, nextCell } from '@atlaskit/editor-tables/utils';
@@ -60,25 +61,35 @@ var updateResizeHandleAndStatePosition = function updateResizeHandleAndStatePosi
     return false;
   };
 };
-export var initiateKeyboardColumnResizing = function initiateKeyboardColumnResizing(state, dispatch, view) {
-  if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+export var initiateKeyboardColumnResizing = function initiateKeyboardColumnResizing(_ref) {
+  var ariaNotify = _ref.ariaNotify,
+    getIntl = _ref.getIntl;
+  return function (state, dispatch, view) {
+    if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+      return false;
+    }
+    var selection = state.selection;
+    var selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
+    var cell = findCellClosestToPos(selection.$from);
+    if (ariaNotify && getIntl) {
+      ariaNotify(getIntl().formatMessage(messages.startedColumnResize));
+    }
+    if (selectionRect && cell && view) {
+      return updateResizeHandleAndStatePosition(selectionRect.top, selectionRect.right, cell.pos)(state, dispatch);
+    }
     return false;
-  }
-  var selection = state.selection;
-  var selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
-  var cell = findCellClosestToPos(selection.$from);
-  if (selectionRect && cell && view) {
-    return updateResizeHandleAndStatePosition(selectionRect.top, selectionRect.right, cell.pos)(state, dispatch);
-  }
-  return false;
+  };
 };
-export var activateNextResizeArea = function activateNextResizeArea(direction) {
+export var activateNextResizeArea = function activateNextResizeArea(_ref2) {
+  var direction = _ref2.direction,
+    ariaNotify = _ref2.ariaNotify,
+    getIntl = _ref2.getIntl;
   return function (state, dispatch, view) {
     if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
       return false;
     }
-    var _ref = getTableResizingPluginState(state) || {},
-      resizeHandlePos = _ref.resizeHandlePos;
+    var _ref3 = getTableResizingPluginState(state) || {},
+      resizeHandlePos = _ref3.resizeHandlePos;
     // If No resizing has initiated, skip to regular handler
     if (!resizeHandlePos) {
       return false;
@@ -101,6 +112,18 @@ export var activateNextResizeArea = function activateNextResizeArea(direction) {
     }
     var currentCellRect = tableMap.findCell($currentCell.pos - $currentCell.start(-1));
     var $nextCell = nextCell($currentCell, 'horiz', direction);
+    if (ariaNotify && getIntl) {
+      var columnDirection = '';
+      if (direction === 1) {
+        columnDirection = getIntl().formatMessage(messages.columnRightResize);
+      }
+      if (direction === -1) {
+        columnDirection = getIntl().formatMessage(messages.columnLeftResize);
+      }
+      ariaNotify(getIntl().formatMessage(messages.focusedOtherResize, {
+        direction: columnDirection
+      }));
+    }
     if ($nextCell) {
       // we are somewhere in between the side columns of the table
       var offset = $nextCell.pos - $nextCell.start(-1);
@@ -121,8 +144,12 @@ export var activateNextResizeArea = function activateNextResizeArea(direction) {
     return false;
   };
 };
-export var changeColumnWidthByStep = function changeColumnWidthByStep(stepSize, getEditorContainerWidth) {
-  var isTableScalingEnabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+export var changeColumnWidthByStep = function changeColumnWidthByStep(_ref4) {
+  var stepSize = _ref4.stepSize,
+    getEditorContainerWidth = _ref4.getEditorContainerWidth,
+    isTableScalingEnabled = _ref4.isTableScalingEnabled,
+    ariaNotify = _ref4.ariaNotify,
+    getIntl = _ref4.getIntl;
   return function (state, dispatch, view) {
     var customTr = state.tr;
     var fakeDispatch = function fakeDispatch(tr) {
@@ -184,10 +211,26 @@ export var changeColumnWidthByStep = function changeColumnWidthByStep(stepSize,
     if (dispatch) {
       dispatch(customTr);
     }
+    if (ariaNotify && getIntl) {
+      ariaNotify(getIntl().formatMessage(messages.changedColumnWidth, {
+        width: Math.floor(newResizeState.cols[colIndex].width)
+      }));
+      if (newResizeState.cols.length === colIndex + 1) {
+        if (newResizeState.overflow === true) {
+          ariaNotify(getIntl().formatMessage(messages.columnResizeLast));
+        }
+        if (newResizeState.overflow === false) {
+          ariaNotify(getIntl().formatMessage(messages.columnResizeOverflow));
+        }
+      }
+    }
     return true;
   };
 };
-export var stopKeyboardColumnResizing = function stopKeyboardColumnResizing(originalTr) {
+export var stopKeyboardColumnResizing = function stopKeyboardColumnResizing(_ref5) {
+  var ariaNotify = _ref5.ariaNotify,
+    getIntl = _ref5.getIntl,
+    originalTr = _ref5.originalTr;
   return function (state, dispatch) {
     if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
       return false;
@@ -212,6 +255,9 @@ export var stopKeyboardColumnResizing = function stopKeyboardColumnResizing(orig
     }, function () {
       return customTr.setMeta('scrollIntoView', false);
     })(state, fakeDispatch);
+    if (ariaNotify && getIntl) {
+      ariaNotify(getIntl().formatMessage(messages.columnResizeStop));
+    }
     if (dispatch) {
       dispatch(customTr);
       return true;

package/dist/esm/commands/go-to-next-cell.js

@@ -10,7 +10,7 @@ import { getPluginState } from '../pm-plugins/plugin-factory';
 import { stopKeyboardColumnResizing } from './column-resize';
 var TAB_FORWARD_DIRECTION = 1;
 var TAB_BACKWARD_DIRECTION = -1;
-export var goToNextCell = function goToNextCell(editorAnalyticsAPI) {
+export var goToNextCell = function goToNextCell(editorAnalyticsAPI, ariaNotify, getIntl) {
   return function (direction) {
     return function (state, dispatch, view) {
       var table = findTable(state.selection);
@@ -21,7 +21,10 @@ export var goToNextCell = function goToNextCell(editorAnalyticsAPI) {
         var _getPluginState;
         var isColumnResizing = (_getPluginState = getPluginState(state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.isKeyboardResize;
         if (isColumnResizing) {
-          stopKeyboardColumnResizing()(state, dispatch, view);
+          stopKeyboardColumnResizing({
+            ariaNotify: ariaNotify,
+            getIntl: getIntl
+          })(state, dispatch, view);
           return 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/commands-with-analytics.js

@@ -184,7 +184,7 @@ export var insertRowWithAnalytics = function insertRowWithAnalytics(editorAnalyt
   };
 };
 export var changeColumnWidthByStepWithAnalytics = function changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI) {
-  return function (stepSize, getEditorContainerWidth, isTableScalingEnabled, inputMethod) {
+  return function (stepSize, getEditorContainerWidth, isTableScalingEnabled, inputMethod, ariaNotify, getIntl) {
     return withEditorAnalyticsAPI(function (state) {
       var _getSelectedTableInfo2 = getSelectedTableInfo(state.selection),
         table = _getSelectedTableInfo2.table,
@@ -206,7 +206,13 @@ export var changeColumnWidthByStepWithAnalytics = function changeColumnWidthBySt
           totalColumnCount: totalColumnCount
         }
       };
-    })(editorAnalyticsAPI)(changeColumnWidthByStep(stepSize, getEditorContainerWidth, isTableScalingEnabled));
+    })(editorAnalyticsAPI)(changeColumnWidthByStep({
+      stepSize: stepSize,
+      getEditorContainerWidth: getEditorContainerWidth,
+      isTableScalingEnabled: isTableScalingEnabled,
+      ariaNotify: ariaNotify,
+      getIntl: getIntl
+    }));
   };
 };
 export var insertColumnWithAnalytics = function insertColumnWithAnalytics(editorAnalyticsAPI) {

package/dist/esm/nodeviews/ExternalDropTargets.js

@@ -42,6 +42,7 @@ export var ExternalDropTargets = function ExternalDropTargets(_ref) {
       width: getTableWrapperWidth(),
       overflow: 'hidden',
       position: 'absolute',
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       top: "-".concat(dropTargetExtendedWidth - tableMarginTop, "px"),
       pointerEvents: 'auto',
       zIndex: "".concat(dropTargetsZIndex)
@@ -51,6 +52,7 @@ export var ExternalDropTargets = function ExternalDropTargets(_ref) {
     style: {
       display: 'flex',
       // move drop targets based on table wrapper scroll
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginLeft: "-".concat(getScrollOffset(), "px")
     }
   }, colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(function (width, index) {

package/dist/esm/nodeviews/TableComponent.js

@@ -21,7 +21,7 @@ import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-commo
 import { getParentNodeWidth, getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableMarginSides } from '@atlaskit/editor-common/styles';
 import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
-import { MAX_BROWSER_SCROLLBAR_HEIGHT, akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
+import { akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
@@ -35,7 +35,6 @@ import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup
 import { TABLE_EDITOR_MARGIN } from '../pm-plugins/table-resizing/utils/consts';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
-import { tableOverflowShadowWidth, tableOverflowShadowWidthWide } from '../ui/consts';
 import TableFloatingColumnControls from '../ui/TableFloatingColumnControls';
 import TableFloatingControls from '../ui/TableFloatingControls';
 import { containsHeaderRow, isTableNested, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns } from '../utils';
@@ -741,7 +740,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         style: {
           visibility: showBeforeShadow && hasHeaderRow ? 'visible' : 'hidden',
           top: "".concat(topStickyShadowPosition, "px"),
-          paddingBottom: "".concat(isDragAndDropEnabled ? '1px' : '')
+          paddingBottom: "".concat(isDragAndDropEnabled && "var(--ds-space-025, 2px)")
         }
       }), /*#__PURE__*/React.createElement("div", {
         className: classnames(ClassName.TABLE_NODE_WRAPPER),
@@ -760,10 +759,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }, allowControls && colControls), stickyScrollbar && /*#__PURE__*/React.createElement("div", {
         className: ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
         style: {
-          height: MAX_BROWSER_SCROLLBAR_HEIGHT,
+          height: "var(--ds-space-250, 20px)",
+          // MAX_BROWSER_SCROLLBAR_HEIGHT
           display: 'none',
           // prevent unwanted scroll during table resize without removing scrollbar container from the dom
-          width: isResizing ? '0px' : '100%'
+          width: isResizing ? "var(--ds-space-0, 0px)" : '100%'
         }
       }, /*#__PURE__*/React.createElement("div", {
         style: {
@@ -777,14 +777,16 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
         style: {
           position: 'absolute',
-          right: getBooleanFF('platform.editor.custom-table-width') ? "".concat(getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? tableOverflowShadowWidthWide : tableOverflowShadowWidth, "px") : '-2px'
+          right: getBooleanFF('platform.editor.custom-table-width') ? "".concat(getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? "var(--ds-space-400, 32px)" // tableOverflowShadowWidthWide
+          : "var(--ds-space-100, 8px)" // tableOverflowShadowWidth
+          ) : "var(--ds-space-negative-025, -2px)"
         }
       }, /*#__PURE__*/React.createElement("div", {
         className: "".concat(ClassName.TABLE_RIGHT_SHADOW, " ").concat(ClassName.TABLE_STICKY_SHADOW),
         style: {
           visibility: showAfterShadow && hasHeaderRow ? 'visible' : 'hidden',
           top: "".concat(topStickyShadowPosition, "px"),
-          paddingBottom: "".concat(isDragAndDropEnabled ? '1px' : '')
+          paddingBottom: "".concat(isDragAndDropEnabled && "var(--ds-space-025, 2px)")
         }
       })), /*#__PURE__*/React.createElement("div", {
         className: ClassName.TABLE_STICKY_SENTINEL_BOTTOM,

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,
@@ -107,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;
   }
@@ -127,7 +138,8 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
     attachAnalyticsEvent: attachAnalyticsEvent,
     displayGapCursor: displayGapCursor,
     isTableScalingEnabled: isTableScalingEnabled,
-    isWholeTableInDanger: isWholeTableInDanger
+    isWholeTableInDanger: isWholeTableInDanger,
+    pluginInjectionApi: pluginInjectionApi
   };
   if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
     tableResizerProps = _objectSpread(_objectSpread({}, tableResizerProps), {}, {
@@ -152,24 +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,
-    isWholeTableInDanger = _ref3.isWholeTableInDanger;
+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,

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';
@@ -31,7 +30,7 @@ var handles = {
 };
 var handleStyles = {
   right: {
-    // eslint-disable-next-line
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
     right: '-14px',
     marginTop: "var(--ds-space-150, 12px)"
   }
@@ -91,28 +90,37 @@ export var TableResizer = function TableResizer(_ref) {
     attachAnalyticsEvent = _ref.attachAnalyticsEvent,
     displayGapCursor = _ref.displayGapCursor,
     isTableScalingEnabled = _ref.isTableScalingEnabled,
-    isWholeTableInDanger = _ref.isWholeTableInDanger;
+    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 = {
@@ -131,9 +139,9 @@ export var TableResizer = function TableResizer(_ref) {
     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);
@@ -181,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;
@@ -206,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 _getPluginState = getPluginState(editorView.state),
-      widthToWidest = _getPluginState.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
     });
@@ -269,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) {
@@ -374,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,
@@ -391,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),