@atlaskit/editor-plugin-table 7.6.3 → 7.6.4

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';
@@ -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),

package/dist/esm/plugin.js

@@ -85,7 +85,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
         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/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/ui/FloatingContextualMenu/ContextualMenu.js

@@ -80,11 +80,11 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         var node = isOpen && targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
         var background = hexToEditorBackgroundPaletteColor((node === null || node === 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),
@@ -94,7 +94,7 @@ export var ContextualMenu = /*#__PURE__*/function (_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
@@ -126,7 +126,7 @@ export var ContextualMenu = /*#__PURE__*/function (_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
         }, {
@@ -135,7 +135,7 @@ export var ContextualMenu = /*#__PURE__*/function (_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 var ContextualMenu = /*#__PURE__*/function (_Component) {
       var _getPluginState3 = getPluginState(editorView.state),
         isDragAndDropEnabled = _getPluginState3.isDragAndDropEnabled;
       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
       };
@@ -168,14 +168,14 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
       var _getPluginState4 = getPluginState(editorView.state),
         isDragAndDropEnabled = _getPluginState4.isDragAndDropEnabled;
       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
       };
@@ -203,7 +203,7 @@ export var ContextualMenu = /*#__PURE__*/function (_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, {
@@ -229,7 +229,7 @@ export var ContextualMenu = /*#__PURE__*/function (_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, {
@@ -255,7 +255,7 @@ export var ContextualMenu = /*#__PURE__*/function (_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, {
@@ -273,7 +273,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
       var _getPluginState8 = getPluginState(editorView.state),
         isDragAndDropEnabled = _getPluginState8.isDragAndDropEnabled,
         allowDistributeColumns = _getPluginState8.pluginConfig.allowDistributeColumns;
-      if (allowDistributeColumns && (!isDragAndDropEnabled || !getBooleanFF('platform.editor.table.new-cell-context-menu-styling'))) {
+      if (allowDistributeColumns && !isDragAndDropEnabled) {
         var _newResizeState$chang;
         var _getPluginState9 = getPluginState(editorView.state),
           _getPluginState9$isTa = _getPluginState9.isTableScalingEnabled,
@@ -297,7 +297,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         allowColumnSorting = _this$props9.allowColumnSorting;
       var _getPluginState10 = getPluginState(editorView.state),
         isDragAndDropEnabled = _getPluginState10.isDragAndDropEnabled;
-      if (allowColumnSorting && (!isDragAndDropEnabled || !getBooleanFF('platform.editor.table.new-cell-context-menu-styling'))) {
+      if (allowColumnSorting && !isDragAndDropEnabled) {
         var hasMergedCellsInTable = getMergedCellsPositions(editorView.state.tr).length > 0;
         var warning = hasMergedCellsInTable ? {
           tooltipDescription: formatMessage(messages.canNotSortTable),
@@ -515,7 +515,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         editorView = _this$props14.editorView;
       var _getPluginState14 = getPluginState(editorView.state),
         isDragAndDropEnabled = _getPluginState14.isDragAndDropEnabled;
-      var items = isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
+      var items = isDragAndDropEnabled ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
       return jsx("div", {
         "data-testid": "table-cell-contextual-menu",
         onMouseLeave: this.closeSubmenu
@@ -538,7 +538,7 @@ export var ContextualMenu = /*#__PURE__*/function (_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/esm/ui/FloatingDragMenu/DragMenu.js

@@ -437,20 +437,20 @@ export var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
   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/esm/ui/FloatingDragMenu/DropdownMenu.js

@@ -6,7 +6,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';
 var DropListWithOutsideListeners = withReactEditorViewOuterListeners(DropList);
 export var DropdownMenu = function DropdownMenu(_ref) {
@@ -118,39 +117,33 @@ export var DropdownMenu = function DropdownMenu(_ref) {
       // 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')) {
-        var keys = ['row_numbers', 'header_row', 'header_column'];
-        var doubleItemCount = 0;
-        var firstIndex = results.findIndex(function (value) {
-          return keys.includes(value.key);
+      var keys = ['row_numbers', 'header_row', 'header_column'];
+      var doubleItemCount = 0;
+      var firstIndex = results.findIndex(function (value) {
+        return keys.includes(value.key);
+      });
+      if (firstIndex === -1 || index <= firstIndex) {
+        onItemActivated && onItemActivated({
+          item: results[index]
         });
-        if (firstIndex === -1 || index <= firstIndex) {
+        return;
+      }
+      for (var 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 (var 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/esm/utils/guidelines.js

@@ -6,5 +6,5 @@ import { calculateDefaultSnappings, calculateDefaultTablePreserveSnappings } fro
 // If we don't do this then the guidelines will not align correctly to the edge of the table
 export var defaultGuidelines = createFixedGuidelinesFromLengths([0].concat(_toConsumableArray(calculateDefaultSnappings(-1))));
 export var defaultGuidelinesForPreserveTable = function defaultGuidelinesForPreserveTable(editorContainerWidth) {
-  return createFixedGuidelinesFromLengths([0].concat(_toConsumableArray(calculateDefaultTablePreserveSnappings(-1, editorContainerWidth))));
+  return createFixedGuidelinesFromLengths([0].concat(_toConsumableArray(calculateDefaultTablePreserveSnappings(-1, editorContainerWidth))), undefined, true);
 };

package/dist/types/commands/misc.d.ts

@@ -3,6 +3,7 @@ import type { Node as PMNode, Schema, Slice } from '@atlaskit/editor-prosemirror
 import type { EditorState, Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { WidthToWidest } from '../types';
 export declare const setEditorFocus: (editorHasFocus: boolean) => Command;
 export declare const setTableRef: (ref?: HTMLTableElement) => Command;
 export declare const setCellAttr: (name: string, value: any) => Command;
@@ -33,4 +34,4 @@ export declare const autoSizeTable: (view: EditorView, node: PMNode, table: HTML
     containerWidth: number;
 }) => boolean;
 export declare const addBoldInEmptyHeaderCells: (tableCellHeader: ContentNodeWithPos) => Command;
-export declare const updateWidthToWidest: (widthToWidest: boolean) => Command;
+export declare const updateWidthToWidest: (widthToWidest: WidthToWidest) => Command;

package/dist/types/nodeviews/TableResizer.d.ts

@@ -4,6 +4,7 @@ import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { PluginInjectionAPI } from '../types';
 interface TableResizerProps {
     width: number;
     maxWidth: number;
@@ -16,6 +17,7 @@ interface TableResizerProps {
     displayGuideline: (guideline: GuidelineConfig[]) => boolean;
     attachAnalyticsEvent: (payload: TableEventPayload) => ((tr: Transaction) => boolean) | undefined;
     displayGapCursor: (toggle: boolean) => boolean;
+    pluginInjectionApi?: PluginInjectionAPI;
     isTableScalingEnabled?: boolean;
     isWholeTableInDanger?: boolean;
 }
@@ -23,5 +25,5 @@ export interface TableResizerImprovementProps extends TableResizerProps {
     onResizeStop?: () => void;
     onResizeStart?: () => void;
 }
-export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, isTableScalingEnabled, isWholeTableInDanger, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
+export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, isTableScalingEnabled, isWholeTableInDanger, pluginInjectionApi, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
 export {};

package/dist/types/types.d.ts

@@ -26,7 +26,7 @@ export interface InsertRowOptions {
     moveCursorToInsertedRow: boolean;
 }
 export type PluginInjectionAPI = ExtractInjectionAPI<TablePlugin>;
-export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'isHeaderRowEnabled' | 'isHeaderColumnEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredCell' | 'isTableHovered' | 'tableNode'> & {
+export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'isHeaderRowEnabled' | 'isHeaderColumnEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredCell' | 'isTableHovered' | 'tableNode' | 'widthToWidest'> & {
     isResizing: boolean;
     isTableResizing?: boolean;
     isWholeTableInDanger?: boolean;
@@ -60,6 +60,9 @@ export interface CellHoverMeta {
     colIndex?: number;
     rowIndex?: number;
 }
+export interface WidthToWidest {
+    [tableLocalId: string]: boolean;
+}
 export interface TablePluginState {
     editorHasFocus?: boolean;
     hoveredColumns: number[];
@@ -89,7 +92,7 @@ export interface TablePluginState {
     isKeyboardResize?: boolean;
     isTableCollapsed?: boolean;
     canCollapseTable?: boolean;
-    widthToWidest?: boolean;
+    widthToWidest?: WidthToWidest;
     getIntl: () => IntlShape;
     isBreakoutEnabled?: boolean;
     wasFullWidthModeEnabled?: boolean;
@@ -178,7 +181,7 @@ export type TablePluginAction = {
 } | {
     type: 'UPDATE_TABLE_WIDTH_TO_WIDEST';
     data: {
-        widthToWidest: boolean | undefined;
+        widthToWidest: WidthToWidest | undefined;
     };
 } | {
     type: 'REMOVE_RESIZE_HANDLE_DECORATIONS';

package/dist/types-ts4.5/commands/misc.d.ts

@@ -3,6 +3,7 @@ import type { Node as PMNode, Schema, Slice } from '@atlaskit/editor-prosemirror
 import type { EditorState, Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { WidthToWidest } from '../types';
 export declare const setEditorFocus: (editorHasFocus: boolean) => Command;
 export declare const setTableRef: (ref?: HTMLTableElement) => Command;
 export declare const setCellAttr: (name: string, value: any) => Command;
@@ -33,4 +34,4 @@ export declare const autoSizeTable: (view: EditorView, node: PMNode, table: HTML
     containerWidth: number;
 }) => boolean;
 export declare const addBoldInEmptyHeaderCells: (tableCellHeader: ContentNodeWithPos) => Command;
-export declare const updateWidthToWidest: (widthToWidest: boolean) => Command;
+export declare const updateWidthToWidest: (widthToWidest: WidthToWidest) => Command;

package/dist/types-ts4.5/nodeviews/TableResizer.d.ts

@@ -4,6 +4,7 @@ import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { PluginInjectionAPI } from '../types';
 interface TableResizerProps {
     width: number;
     maxWidth: number;
@@ -16,6 +17,7 @@ interface TableResizerProps {
     displayGuideline: (guideline: GuidelineConfig[]) => boolean;
     attachAnalyticsEvent: (payload: TableEventPayload) => ((tr: Transaction) => boolean) | undefined;
     displayGapCursor: (toggle: boolean) => boolean;
+    pluginInjectionApi?: PluginInjectionAPI;
     isTableScalingEnabled?: boolean;
     isWholeTableInDanger?: boolean;
 }
@@ -23,5 +25,5 @@ export interface TableResizerImprovementProps extends TableResizerProps {
     onResizeStop?: () => void;
     onResizeStart?: () => void;
 }
-export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, isTableScalingEnabled, isWholeTableInDanger, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
+export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, isTableScalingEnabled, isWholeTableInDanger, pluginInjectionApi, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
 export {};

package/dist/types-ts4.5/types.d.ts

@@ -26,7 +26,7 @@ export interface InsertRowOptions {
     moveCursorToInsertedRow: boolean;
 }
 export type PluginInjectionAPI = ExtractInjectionAPI<TablePlugin>;
-export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'isHeaderRowEnabled' | 'isHeaderColumnEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredCell' | 'isTableHovered' | 'tableNode'> & {
+export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'isHeaderRowEnabled' | 'isHeaderColumnEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredCell' | 'isTableHovered' | 'tableNode' | 'widthToWidest'> & {
     isResizing: boolean;
     isTableResizing?: boolean;
     isWholeTableInDanger?: boolean;
@@ -60,6 +60,9 @@ export interface CellHoverMeta {
     colIndex?: number;
     rowIndex?: number;
 }
+export interface WidthToWidest {
+    [tableLocalId: string]: boolean;
+}
 export interface TablePluginState {
     editorHasFocus?: boolean;
     hoveredColumns: number[];
@@ -89,7 +92,7 @@ export interface TablePluginState {
     isKeyboardResize?: boolean;
     isTableCollapsed?: boolean;
     canCollapseTable?: boolean;
-    widthToWidest?: boolean;
+    widthToWidest?: WidthToWidest;
     getIntl: () => IntlShape;
     isBreakoutEnabled?: boolean;
     wasFullWidthModeEnabled?: boolean;
@@ -178,7 +181,7 @@ export type TablePluginAction = {
 } | {
     type: 'UPDATE_TABLE_WIDTH_TO_WIDEST';
     data: {
-        widthToWidest: boolean | undefined;
+        widthToWidest: WidthToWidest | undefined;
     };
 } | {
     type: 'REMOVE_RESIZE_HANDLE_DECORATIONS';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.6.3",
+  "version": "7.6.4",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.7.0",
     "@atlaskit/custom-steps": "^0.0.16",
-    "@atlaskit/editor-common": "^78.21.0",
+    "@atlaskit/editor-common": "^78.22.0",
     "@atlaskit/editor-palette": "1.5.3",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
     "@atlaskit/editor-plugin-content-insertion": "^1.0.0",
@@ -128,9 +128,6 @@
     "platform.editor.a11y-table-resizing_uapcv": {
       "type": "boolean"
     },
-    "platform.editor.table.new-cell-context-menu-styling": {
-      "type": "boolean"
-    },
     "platform.editor.a11y.table-selection_9uv33": {
       "type": "boolean"
     },