@atlaskit/editor-plugin-table 7.6.3 → 7.6.4

package/dist/es2019/nodeviews/TableContainer.js

@@ -1,5 +1,6 @@
 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';
@@ -29,7 +30,7 @@ export const InnerContainer = /*#__PURE__*/forwardRef(({
     className: className,
     "data-number-column": node.attrs.isNumberColumnEnabled,
     "data-layout": node.attrs.layout,
-    "data-test-id": "table-container"
+    "data-testid": "table-container"
   }, children);
 });
 export const ResizableTableContainer = /*#__PURE__*/React.memo(({
@@ -46,6 +47,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   tableWrapperHeight,
   isWholeTableInDanger
 }) => {
+  var _node$attrs$localId, _node$attrs;
   const containerRef = useRef(null);
   const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
   const [resizing, setIsResizing] = useState(false);
@@ -102,9 +104,20 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? 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]);
   const tableWidth = getTableContainerWidth(node);
+  const {
+    tableState
+  } = useSharedPluginState(pluginInjectionApi, ['table']);
+  const {
+    widthToWidest
+  } = tableState;
+  const currentTableNodeLocalId = (_node$attrs$localId = node === null || node === void 0 ? 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
   const responsiveContainerWidth = isTableScalingEnabled ? containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide / 2 : containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide;
-  const width = Math.min(tableWidth, responsiveContainerWidth);
+  let width = Math.min(tableWidth, responsiveContainerWidth);
+  if (isTableScalingEnabled && currentTableNodeLocalId && widthToWidest && widthToWidest[currentTableNodeLocalId]) {
+    width = TABLE_MAX_WIDTH;
+  }
   if (!isResizing) {
     tableWidthRef.current = width;
   }
@@ -122,7 +135,8 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     attachAnalyticsEvent,
     displayGapCursor,
     isTableScalingEnabled,
-    isWholeTableInDanger
+    isWholeTableInDanger,
+    pluginInjectionApi
   };
   if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
     tableResizerProps = {

package/dist/es2019/nodeviews/TableResizer.js

@@ -4,17 +4,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';
@@ -86,14 +85,22 @@ export const TableResizer = ({
   attachAnalyticsEvent,
   displayGapCursor,
   isTableScalingEnabled,
-  isWholeTableInDanger
+  isWholeTableInDanger,
+  pluginInjectionApi
 }) => {
   var _findTable, _editorView$state;
   const currentGap = useRef(0);
   // track resizing state - use ref over state to avoid re-render
   const isResizing = useRef(false);
   const areResizeMetaKeysPressed = useRef(false);
+  const [localTableWidth, setLocalTableWidth] = useState(width);
   const resizerRef = useRef(null);
+  const {
+    tableState
+  } = useSharedPluginState(pluginInjectionApi, ['table']);
+  const {
+    widthToWidest
+  } = tableState;
 
   // used to reposition tooltip when table is resizing via keyboard
   const updateTooltip = React.useRef();
@@ -181,7 +188,7 @@ export const TableResizer = ({
     }
   }, [startMeasure, editorView, displayGapCursor, isTableScalingEnabled, containerWidth, displayGuideline, onResizeStart]);
   const handleResize = useCallback((originalState, delta) => {
-    var _defaultGuidelinesFor, _defaultGuidelinesFor2;
+    var _node$attrs$localId, _node$attrs, _widestGuideline$posi;
     countFrames();
     const newWidth = originalState.width + delta.width;
     let pos;
@@ -208,15 +215,20 @@ export const TableResizer = ({
       state,
       dispatch
     } = editorView;
-    const widestGuideLineWidthString = (_defaultGuidelinesFor = defaultGuidelinesForPreserveTable(containerWidth)[16].key) === null || _defaultGuidelinesFor === void 0 ? void 0 : (_defaultGuidelinesFor2 = _defaultGuidelinesFor.match(/[\d]*[.]{0,1}[\d]+/g)) === null || _defaultGuidelinesFor2 === void 0 ? void 0 : _defaultGuidelinesFor2.join('');
-    const widestGuideLineWidth = parseInt(widestGuideLineWidthString || '', 10);
-    const shouldUpdateWidthToWidest = !!(isTableScalingEnabled && defaultGuidelinesForPreserveTable(containerWidth).length === 17 && widestGuideLineWidth - newWidth <= 1);
-    updateWidthToWidest(shouldUpdateWidthToWidest)(state, dispatch);
-    updateWidth(shouldUpdateWidthToWidest ? akEditorFullWidthLayoutWidth : newWidth);
+    const currentTableNodeLocalId = (_node$attrs$localId = node === null || node === void 0 ? 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 : '';
+    const widestGuideline = defaultGuidelinesForPreserveTable(containerWidth).filter(guideline => guideline.isFullWidth)[0];
+    const widestGuideLineWidth = widestGuideline ? (((_widestGuideline$posi = widestGuideline.position) === null || _widestGuideline$posi === void 0 ? void 0 : _widestGuideline$posi.x) || 0) * 2 : null;
+    const shouldUpdateWidthToWidest = !!(isTableScalingEnabled && widestGuideLineWidth && Math.abs(widestGuideLineWidth - newWidth) <= 1);
+    shouldUpdateWidthToWidest ? setLocalTableWidth(TABLE_MAX_WIDTH) : setLocalTableWidth(newWidth);
+    updateWidthToWidest({
+      [currentTableNodeLocalId]: shouldUpdateWidthToWidest
+    })(state, dispatch);
+    updateWidth(shouldUpdateWidthToWidest ? TABLE_MAX_WIDTH : newWidth);
     return newWidth;
   }, [countFrames, isTableScalingEnabled, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos]);
   const scheduleResize = useMemo(() => rafSchd(handleResize), [handleResize]);
   const handleResizeStop = useCallback((originalState, delta) => {
+    var _node$attrs$localId2, _node$attrs2;
     isResizing.current = false;
     let newWidth = originalState.width + delta.width;
     const {
@@ -224,10 +236,8 @@ export const TableResizer = ({
       dispatch
     } = editorView;
     const pos = getPos();
-    const {
-      widthToWidest
-    } = getPluginState(editorView.state);
-    newWidth = widthToWidest ? akEditorFullWidthLayoutWidth : newWidth;
+    const currentTableNodeLocalId = (_node$attrs$localId2 = node === null || node === void 0 ? 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;
     let tr = state.tr.setMeta(tableWidthPluginKey, {
       resizing: false
     });
@@ -273,7 +283,7 @@ export const TableResizer = ({
       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]);
   const handleTableSizeChangeOnKeypress = useCallback(step => {
     const newWidth = width + step;
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {
@@ -378,7 +388,7 @@ export const TableResizer = ({
   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,

package/dist/es2019/plugin.js

@@ -84,7 +84,8 @@ const tablesPlugin = ({
         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
+        tableNode: tablePluginState.tableNode,
+        widthToWidest: tablePluginState.widthToWidest
       };
     },
     actions: {

package/dist/es2019/toolbar.js

@@ -14,7 +14,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 const 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',
@@ -287,6 +286,7 @@ export const getClosestSelectionOrTableRect = state => {
   return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : tableRect;
 };
 export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView) => config => (state, intl) => {
+  var _tableObject$node$att, _tableObject$node, _tableObject$node$att2;
   const tableObject = findTable(state.selection);
   const pluginState = getPluginState(state);
   const resizeState = tableResizingPluginKey.getState(state);
@@ -298,7 +298,8 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
     isTableScalingEnabled,
     widthToWidest
   } = pluginState;
-  if (isTableScalingEnabled && isWidthResizing && widthToWidest) {
+  const currentTableNodeLocalId = (_tableObject$node$att = tableObject === null || tableObject === void 0 ? void 0 : (_tableObject$node = tableObject.node) === null || _tableObject$node === void 0 ? void 0 : (_tableObject$node$att2 = _tableObject$node.attrs) === null || _tableObject$node$att2 === void 0 ? void 0 : _tableObject$node$att2.localId) !== null && _tableObject$node$att !== void 0 ? _tableObject$node$att : '';
+  if (isTableScalingEnabled && isWidthResizing && widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId]) {
     const {
       stickyScrollbar
     } = getEditorFeatureFlags();
@@ -351,7 +352,7 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
     let cellItems;
     cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled);
     let 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) : [];
     const colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI);
 
     // Check if we need to show confirm dialog for delete button

package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js

@@ -70,11 +70,11 @@ export class ContextualMenu extends Component {
         const node = isOpen && targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
         const background = hexToEditorBackgroundPaletteColor((node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
         return {
-          content: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? formatMessage(messages.backgroundColor) : formatMessage(messages.cellBackground),
+          content: isDragAndDropEnabled ? formatMessage(messages.backgroundColor) : formatMessage(messages.cellBackground),
           value: {
             name: 'background'
           },
-          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+          elemBefore: isDragAndDropEnabled ? jsx("span", {
             css: elementBeforeIconStyles
           }, jsx(EditorBackgroundColorIcon, {
             label: formatMessage(messages.backgroundColor),
@@ -84,7 +84,7 @@ export class ContextualMenu extends Component {
             className: DropdownMenuSharedCssClassName.SUBMENU
           }, jsx("div", {
             css: cellColourPreviewStyles(background),
-            className: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? ClassName.CONTEXTUAL_MENU_ICON_SMALL : ClassName.CONTEXTUAL_MENU_ICON
+            className: isDragAndDropEnabled ? ClassName.CONTEXTUAL_MENU_ICON_SMALL : ClassName.CONTEXTUAL_MENU_ICON
           }), isSubmenuOpen && jsx("div", {
             className: ClassName.CONTEXTUAL_SUBMENU,
             ref: this.handleSubMenuRef
@@ -122,7 +122,7 @@ export class ContextualMenu extends Component {
             name: 'merge'
           },
           isDisabled: !canMergeCells(state.tr),
-          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+          elemBefore: isDragAndDropEnabled ? jsx("span", {
             css: elementBeforeIconStyles
           }, jsx(MergeCellsIcon, null)) : undefined
         }, {
@@ -131,7 +131,7 @@ export class ContextualMenu extends Component {
             name: 'split'
           },
           isDisabled: !splitCell(state),
-          elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+          elemBefore: isDragAndDropEnabled ? jsx("span", {
             css: elementBeforeIconStyles
           }, jsx(SplitCellIcon, null)) : undefined
         }];
@@ -149,14 +149,14 @@ export class ContextualMenu extends Component {
         isDragAndDropEnabled
       } = getPluginState(editorView.state);
       return {
-        content: formatMessage(isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? messages.addColumnRight : messages.insertColumn),
+        content: formatMessage(isDragAndDropEnabled ? messages.addColumnRight : messages.insertColumn),
         value: {
           name: 'insert_column'
         },
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(addColumnAfter)),
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+        elemBefore: isDragAndDropEnabled ? jsx("span", {
           css: elementBeforeIconStyles
         }, jsx(AddColRightIcon, null)) : undefined
       };
@@ -172,14 +172,14 @@ export class ContextualMenu extends Component {
         isDragAndDropEnabled
       } = getPluginState(editorView.state);
       return {
-        content: formatMessage(isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? messages.addRowBelow : messages.insertRow),
+        content: formatMessage(isDragAndDropEnabled ? messages.addRowBelow : messages.insertRow),
         value: {
           name: 'insert_row'
         },
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(addRowAfter)),
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+        elemBefore: isDragAndDropEnabled ? jsx("span", {
           css: elementBeforeIconStyles
         }, jsx(AddRowBelowIcon, null)) : undefined
       };
@@ -213,7 +213,7 @@ export class ContextualMenu extends Component {
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(backspace)),
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+        elemBefore: isDragAndDropEnabled ? jsx("span", {
           css: elementBeforeIconStyles
         }, jsx(CrossCircleIcon, {
           label: formatMessage(messages.clearCells, {
@@ -245,7 +245,7 @@ export class ContextualMenu extends Component {
         value: {
           name: 'delete_column'
         },
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+        elemBefore: isDragAndDropEnabled ? jsx("span", {
           css: elementBeforeIconStyles
         }, jsx(RemoveIcon, {
           label: formatMessage(messages.removeColumns, {
@@ -277,7 +277,7 @@ export class ContextualMenu extends Component {
         value: {
           name: 'delete_row'
         },
-        elemBefore: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? jsx("span", {
+        elemBefore: isDragAndDropEnabled ? jsx("span", {
           css: elementBeforeIconStyles
         }, jsx(RemoveIcon, {
           label: formatMessage(messages.removeRows, {
@@ -301,7 +301,7 @@ export class ContextualMenu extends Component {
           allowDistributeColumns
         }
       } = getPluginState(editorView.state);
-      if (allowDistributeColumns && (!isDragAndDropEnabled || !getBooleanFF('platform.editor.table.new-cell-context-menu-styling'))) {
+      if (allowDistributeColumns && !isDragAndDropEnabled) {
         var _newResizeState$chang;
         const {
           isTableScalingEnabled = false
@@ -329,7 +329,7 @@ export class ContextualMenu extends Component {
       const {
         isDragAndDropEnabled
       } = getPluginState(editorView.state);
-      if (allowColumnSorting && (!isDragAndDropEnabled || !getBooleanFF('platform.editor.table.new-cell-context-menu-styling'))) {
+      if (allowColumnSorting && !isDragAndDropEnabled) {
         const hasMergedCellsInTable = getMergedCellsPositions(editorView.state.tr).length > 0;
         const warning = hasMergedCellsInTable ? {
           tooltipDescription: formatMessage(messages.canNotSortTable),
@@ -568,7 +568,7 @@ export class ContextualMenu extends Component {
     const {
       isDragAndDropEnabled
     } = getPluginState(editorView.state);
-    const items = isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
+    const items = isDragAndDropEnabled ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
     return jsx("div", {
       "data-testid": "table-cell-contextual-menu",
       onMouseLeave: this.closeSubmenu
@@ -591,7 +591,7 @@ export class ContextualMenu extends Component {
       fitWidth: isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth,
       boundariesElement: boundariesElement,
       offset: offset,
-      section: isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') && getBooleanFF('platform.editor.menu.group-items') ? {
+      section: isDragAndDropEnabled && getBooleanFF('platform.editor.menu.group-items') ? {
         hasSeparator: true
       } : undefined
     }));

package/dist/es2019/ui/FloatingDragMenu/DragMenu.js

@@ -448,20 +448,20 @@ export const DragMenu = /*#__PURE__*/React.memo(({
   if (!menuItems) {
     return null;
   }
-  if (allowBackgroundColor && getBooleanFF('platform.editor.table.new-cell-context-menu-styling')) {
+  if (allowBackgroundColor) {
     menuItems[0].items.unshift(createBackgroundColorMenuItem());
   }
 
   // If first row, add toggle for Header row, default is true
   // If first column, add toggle for Header column, default is false
-  if (getBooleanFF('platform.editor.table.new-cell-context-menu-styling') && index === 0) {
+  if (index === 0) {
     menuItems.push({
       items: [createHeaderRowColumnMenuItem(direction)]
     });
   }
 
   // All rows, add toggle for numbered rows, default is false
-  if (getBooleanFF('platform.editor.table.new-cell-context-menu-styling') && direction === 'row') {
+  if (direction === 'row') {
     index === 0 ? menuItems[menuItems.length - 1].items.push(createRowNumbersMenuItem()) : menuItems.push({
       items: [createRowNumbersMenuItem()]
     });

package/dist/es2019/ui/FloatingDragMenu/DropdownMenu.js

@@ -5,7 +5,6 @@ import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenuItem }
 import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { MenuGroup, Section } from '@atlaskit/menu';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { dragMenuDropdownWidth } from '../consts';
 const DropListWithOutsideListeners = withReactEditorViewOuterListeners(DropList);
 export const DropdownMenu = ({
@@ -106,37 +105,31 @@ export const DropdownMenu = ({
       // The logic below normalises the index value based on the number
       // of menu items with 2 focusable elements, and adjusts the index to ensure
       // the correct menu item is sent in onItemActivated callback
-      if (getBooleanFF('platform.editor.table.new-cell-context-menu-styling')) {
-        const keys = ['row_numbers', 'header_row', 'header_column'];
-        let doubleItemCount = 0;
-        const firstIndex = results.findIndex(value => keys.includes(value.key));
-        if (firstIndex === -1 || index <= firstIndex) {
+      const keys = ['row_numbers', 'header_row', 'header_column'];
+      let doubleItemCount = 0;
+      const firstIndex = results.findIndex(value => keys.includes(value.key));
+      if (firstIndex === -1 || index <= firstIndex) {
+        onItemActivated && onItemActivated({
+          item: results[index]
+        });
+        return;
+      }
+      for (let i = firstIndex; i < results.length; i += 1) {
+        if (keys.includes(results[i].key)) {
+          doubleItemCount += 1;
+        }
+        if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
           onItemActivated && onItemActivated({
-            item: results[index]
+            item: results[i]
           });
           return;
         }
-        for (let i = firstIndex; i < results.length; i += 1) {
-          if (keys.includes(results[i].key)) {
-            doubleItemCount += 1;
-          }
-          if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
-            onItemActivated && onItemActivated({
-              item: results[i]
-            });
-            return;
-          }
-          if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
-            onItemActivated && onItemActivated({
-              item: results[i]
-            });
-            return;
-          }
+        if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
+          onItemActivated && onItemActivated({
+            item: results[i]
+          });
+          return;
         }
-      } else {
-        onItemActivated && onItemActivated({
-          item: results[index]
-        });
       }
     }
   }, innerMenu())));

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/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,