@atlaskit/editor-plugin-table 7.6.3 → 7.6.4

package/src/commands/misc.ts

@@ -1,3 +1,5 @@
+import isEqual from 'lodash/isEqual';
+
 import type { CellAttributes } from '@atlaskit/adf-schema';
 import type { Command } from '@atlaskit/editor-common/types';
 import {
@@ -45,6 +47,7 @@ import {
 } from '../pm-plugins/decorations/utils';
 import { createCommand, getPluginState } from '../pm-plugins/plugin-factory';
 import { fixAutoSizedTable } from '../transforms';
+import type { WidthToWidest } from '../types';
 import { TableCssClassName as ClassName, TableDecorations } from '../types';
 import {
   createColumnControlsDecoration,
@@ -779,18 +782,18 @@ export const addBoldInEmptyHeaderCells =
     return false;
   };
 
-export const updateWidthToWidest = (widthToWidest: boolean) =>
+export const updateWidthToWidest = (widthToWidest: WidthToWidest) =>
   createCommand((state) => {
     let { widthToWidest: prevWidthToWidest } = getPluginState(state);
 
-    if (prevWidthToWidest === widthToWidest) {
+    if (isEqual(widthToWidest, prevWidthToWidest)) {
       return false;
     }
 
     return {
       type: 'UPDATE_TABLE_WIDTH_TO_WIDEST',
       data: {
-        widthToWidest,
+        widthToWidest: { ...prevWidthToWidest, ...widthToWidest },
       },
     };
   });

package/src/nodeviews/TableContainer.tsx

@@ -5,6 +5,7 @@ import classNames from 'classnames';
 
 import type { TableEventPayload } from '@atlaskit/editor-common/analytics';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
 import type { EditorContainerWidth } from '@atlaskit/editor-common/types';
@@ -19,7 +20,7 @@ import {
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
-import type { PluginInjectionAPI } from '../types';
+import type { PluginInjectionAPI, TableSharedStateInternal } from '../types';
 import { TableCssClassName as ClassName } from '../types';
 
 import { TableResizer } from './TableResizer';
@@ -61,7 +62,7 @@ export const InnerContainer = forwardRef<
       className={className}
       data-number-column={node.attrs.isNumberColumnEnabled}
       data-layout={node.attrs.layout}
-      data-test-id="table-container"
+      data-testid="table-container"
     >
       {children}
     </div>
@@ -180,6 +181,10 @@ export const ResizableTableContainer = React.memo(
     );
 
     const tableWidth = getTableContainerWidth(node);
+    const { tableState } = useSharedPluginState(pluginInjectionApi, ['table']);
+    const { widthToWidest } = tableState as TableSharedStateInternal;
+    const currentTableNodeLocalId = node?.attrs?.localId ?? '';
+
     // 76 is currently an accepted padding value considering the spacing for resizer handle
     const responsiveContainerWidth = isTableScalingEnabled
       ? containerWidth -
@@ -189,7 +194,16 @@ export const ResizableTableContainer = React.memo(
         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;
@@ -210,6 +224,7 @@ export const ResizableTableContainer = React.memo(
       displayGapCursor,
       isTableScalingEnabled,
       isWholeTableInDanger,
+      pluginInjectionApi,
     };
 
     if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {

package/src/nodeviews/TableResizer.tsx

@@ -16,6 +16,7 @@ import type { TableEventPayload } from '@atlaskit/editor-common/analytics';
 import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import {
   focusTableResizer,
   ToolTipContent,
@@ -27,21 +28,21 @@ import { browser } from '@atlaskit/editor-common/utils';
 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 { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { token } from '@atlaskit/tokens';
 
 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,
+  TABLE_MAX_WIDTH,
 } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
+import type { PluginInjectionAPI, TableSharedStateInternal } from '../types';
 import {
   TABLE_GUIDELINE_VISIBLE_ADJUSTMENT,
   TABLE_HIGHLIGHT_GAP,
@@ -77,6 +78,7 @@ interface TableResizerProps {
     payload: TableEventPayload,
   ) => ((tr: Transaction) => boolean) | undefined;
   displayGapCursor: (toggle: boolean) => boolean;
+  pluginInjectionApi?: PluginInjectionAPI;
   isTableScalingEnabled?: boolean;
   isWholeTableInDanger?: boolean;
 }
@@ -172,13 +174,16 @@ export const TableResizer = ({
   displayGapCursor,
   isTableScalingEnabled,
   isWholeTableInDanger,
+  pluginInjectionApi,
 }: PropsWithChildren<TableResizerImprovementProps>) => {
   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<ResizerNextHandler>(null);
+  const { tableState } = useSharedPluginState(pluginInjectionApi, ['table']);
+  const { widthToWidest } = tableState as TableSharedStateInternal;
 
   // used to reposition tooltip when table is resizing via keyboard
   const updateTooltip = React.useRef<() => void>();
@@ -349,25 +354,28 @@ export const TableResizer = ({
       // and a table is resized to fit the widest guideline when view port width is between 1011 and 1800
       // set the width of the table to 1800 pixels.
       const { state, dispatch } = editorView;
-      const widestGuideLineWidthString = defaultGuidelinesForPreserveTable(
+      const currentTableNodeLocalId = node?.attrs?.localId ?? '';
+
+      const widestGuideline = defaultGuidelinesForPreserveTable(
         containerWidth,
-      )[16]
-        .key?.match(/[\d]*[.]{0,1}[\d]+/g)
-        ?.join('');
-      const widestGuideLineWidth = parseInt(
-        widestGuideLineWidthString || '',
-        10,
-      );
+      ).filter((guideline) => guideline.isFullWidth)[0];
+      const widestGuideLineWidth = widestGuideline
+        ? ((widestGuideline.position?.x || 0) as number) * 2
+        : null;
       const shouldUpdateWidthToWidest = !!(
         isTableScalingEnabled &&
-        defaultGuidelinesForPreserveTable(containerWidth).length === 17 &&
-        widestGuideLineWidth - newWidth <= 1
+        widestGuideLineWidth &&
+        Math.abs(widestGuideLineWidth - newWidth) <= 1
       );
-      updateWidthToWidest(shouldUpdateWidthToWidest)(state, dispatch);
+      shouldUpdateWidthToWidest
+        ? setLocalTableWidth(TABLE_MAX_WIDTH)
+        : setLocalTableWidth(newWidth);
 
-      updateWidth(
-        shouldUpdateWidthToWidest ? akEditorFullWidthLayoutWidth : newWidth,
-      );
+      updateWidthToWidest({
+        [currentTableNodeLocalId]: shouldUpdateWidthToWidest,
+      })(state, dispatch);
+
+      updateWidth(shouldUpdateWidthToWidest ? TABLE_MAX_WIDTH : newWidth);
 
       return newWidth;
     },
@@ -392,8 +400,13 @@ export const TableResizer = ({
       let newWidth = originalState.width + delta.width;
       const { state, dispatch } = editorView;
       const pos = getPos();
-      const { widthToWidest } = getPluginState(editorView.state);
-      newWidth = widthToWidest ? akEditorFullWidthLayoutWidth : newWidth;
+      const currentTableNodeLocalId = node?.attrs?.localId ?? '';
+      newWidth =
+        widthToWidest &&
+        currentTableNodeLocalId &&
+        widthToWidest[currentTableNodeLocalId]
+          ? TABLE_MAX_WIDTH
+          : newWidth;
 
       let tr = state.tr.setMeta(tableWidthPluginKey, { resizing: false });
       const frameRateSamples = endMeasure();
@@ -467,6 +480,7 @@ export const TableResizer = ({
       endMeasure,
       onResizeStop,
       isTableScalingEnabled,
+      widthToWidest,
     ],
   );
 
@@ -617,7 +631,7 @@ export const TableResizer = ({
       <ResizerNext
         ref={resizerRef}
         enable={handles}
-        width={width}
+        width={localTableWidth}
         handleAlignmentMethod="sticky"
         handleSize={handleSize}
         handleStyles={handleStyles}

package/src/plugin.tsx

@@ -192,6 +192,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
         // IMPORTANT: Need to continue to pass tableNode to control re-renders
         // TableComponent listens for node attribute changes to update colgroups
         tableNode: tablePluginState.tableNode,
+        widthToWidest: tablePluginState.widthToWidest,
       };
     },
 

package/src/toolbar.tsx

@@ -51,7 +51,6 @@ import {
 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,
@@ -135,10 +134,7 @@ export const getToolbarMenuConfig = (
     },
   ];
 
-  if (
-    state.isDragAndDropEnabled &&
-    getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
-  ) {
+  if (state.isDragAndDropEnabled) {
     return {
       id: 'editor.table.tableOptions',
       type: 'dropdown',
@@ -454,8 +450,15 @@ export const getToolbarConfig =
     const isWidthResizing = tableWidthState?.resizing;
 
     const { isTableScalingEnabled, widthToWidest } = pluginState;
-
-    if (isTableScalingEnabled && isWidthResizing && widthToWidest) {
+    const currentTableNodeLocalId = tableObject?.node?.attrs?.localId ?? '';
+
+    if (
+      isTableScalingEnabled &&
+      isWidthResizing &&
+      widthToWidest &&
+      currentTableNodeLocalId &&
+      widthToWidest[currentTableNodeLocalId]
+    ) {
       const { stickyScrollbar } = getEditorFeatureFlags();
 
       const nodeType = state.schema.nodes.table;
@@ -526,18 +529,16 @@ export const getToolbarConfig =
           );
 
       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/src/types.ts

@@ -49,6 +49,7 @@ export type TableSharedStateInternal = Pick<
   | 'hoveredCell'
   | 'isTableHovered'
   | 'tableNode'
+  | 'widthToWidest'
 > & {
   isResizing: boolean;
   isTableResizing?: boolean;
@@ -121,6 +122,9 @@ export interface CellHoverMeta {
   colIndex?: number;
   rowIndex?: number;
 }
+export interface WidthToWidest {
+  [tableLocalId: string]: boolean;
+}
 
 export interface TablePluginState {
   editorHasFocus?: boolean;
@@ -155,7 +159,7 @@ export interface TablePluginState {
   // for table wrap/collapse
   isTableCollapsed?: boolean; // is the current table already in an expand?
   canCollapseTable?: boolean; // enabled/disabled state of collapse option
-  widthToWidest?: boolean; // is the current table set to the widest width regarding view port
+  widthToWidest?: WidthToWidest; // is the current table set to the widest width regarding view port
 
   getIntl: () => IntlShape;
 
@@ -246,7 +250,7 @@ export type TablePluginAction =
   | {
       type: 'UPDATE_TABLE_WIDTH_TO_WIDEST';
       data: {
-        widthToWidest: boolean | undefined;
+        widthToWidest: WidthToWidest | undefined;
       };
     }
   | {

package/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -126,11 +126,9 @@ export class ContextualMenu extends Component<
     const { isOpen, mountPoint, offset, boundariesElement, editorView } =
       this.props;
     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 (
       <div
@@ -161,9 +159,6 @@ export class ContextualMenu extends Component<
           offset={offset}
           section={
             isDragAndDropEnabled &&
-            getBooleanFF(
-              'platform.editor.table.new-cell-context-menu-styling',
-            ) &&
             getBooleanFF('platform.editor.menu.group-items')
               ? { hasSeparator: true }
               : undefined
@@ -210,33 +205,24 @@ export class ContextualMenu extends Component<
         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',
-          ) ? (
-            <span css={elementBeforeIconStyles}>
-              <EditorBackgroundColorIcon
-                label={formatMessage(messages.backgroundColor)}
-                size="medium"
-              />
-            </span>
-          ) : undefined,
+        elemBefore: isDragAndDropEnabled ? (
+          <span css={elementBeforeIconStyles}>
+            <EditorBackgroundColorIcon
+              label={formatMessage(messages.backgroundColor)}
+              size="medium"
+            />
+          </span>
+        ) : undefined,
         elemAfter: (
           <div className={DropdownMenuSharedCssClassName.SUBMENU}>
             <div
               css={cellColourPreviewStyles(background)}
               className={
-                isDragAndDropEnabled &&
-                getBooleanFF(
-                  'platform.editor.table.new-cell-context-menu-styling',
-                )
+                isDragAndDropEnabled
                   ? ClassName.CONTEXTUAL_MENU_ICON_SMALL
                   : ClassName.CONTEXTUAL_MENU_ICON
               }
@@ -280,29 +266,21 @@ export class ContextualMenu extends Component<
           content: formatMessage(messages.mergeCells),
           value: { name: 'merge' },
           isDisabled: !canMergeCells(state.tr),
-          elemBefore:
-            isDragAndDropEnabled &&
-            getBooleanFF(
-              'platform.editor.table.new-cell-context-menu-styling',
-            ) ? (
-              <span css={elementBeforeIconStyles}>
-                <MergeCellsIcon />
-              </span>
-            ) : undefined,
+          elemBefore: isDragAndDropEnabled ? (
+            <span css={elementBeforeIconStyles}>
+              <MergeCellsIcon />
+            </span>
+          ) : undefined,
         },
         {
           content: formatMessage(messages.splitCell),
           value: { name: 'split' },
           isDisabled: !splitCell(state),
-          elemBefore:
-            isDragAndDropEnabled &&
-            getBooleanFF(
-              'platform.editor.table.new-cell-context-menu-styling',
-            ) ? (
-              <span css={elementBeforeIconStyles}>
-                <SplitCellIcon />
-              </span>
-            ) : undefined,
+          elemBefore: isDragAndDropEnabled ? (
+            <span css={elementBeforeIconStyles}>
+              <SplitCellIcon />
+            </span>
+          ) : undefined,
         },
       ] as MenuItem[];
     }
@@ -318,20 +296,15 @@ export class ContextualMenu extends Component<
 
     return {
       content: formatMessage(
-        isDragAndDropEnabled &&
-          getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
-          ? messages.addColumnRight
-          : messages.insertColumn,
+        isDragAndDropEnabled ? messages.addColumnRight : messages.insertColumn,
       ),
       value: { name: 'insert_column' },
       elemAfter: <div css={shortcutStyle}>{tooltip(addColumnAfter)}</div>,
-      elemBefore:
-        isDragAndDropEnabled &&
-        getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? (
-          <span css={elementBeforeIconStyles}>
-            <AddColRightIcon />
-          </span>
-        ) : undefined,
+      elemBefore: isDragAndDropEnabled ? (
+        <span css={elementBeforeIconStyles}>
+          <AddColRightIcon />
+        </span>
+      ) : undefined,
     } as MenuItem;
   };
 
@@ -344,20 +317,15 @@ export class ContextualMenu extends Component<
 
     return {
       content: formatMessage(
-        isDragAndDropEnabled &&
-          getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
-          ? messages.addRowBelow
-          : messages.insertRow,
+        isDragAndDropEnabled ? messages.addRowBelow : messages.insertRow,
       ),
       value: { name: 'insert_row' },
       elemAfter: <div css={shortcutStyle}>{tooltip(addRowAfter)}</div>,
-      elemBefore:
-        isDragAndDropEnabled &&
-        getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? (
-          <span css={elementBeforeIconStyles}>
-            <AddRowBelowIcon />
-          </span>
-        ) : undefined,
+      elemBefore: isDragAndDropEnabled ? (
+        <span css={elementBeforeIconStyles}>
+          <AddRowBelowIcon />
+        </span>
+      ) : undefined,
     } as MenuItem;
   };
 
@@ -378,17 +346,15 @@ export class ContextualMenu extends Component<
       }),
       value: { name: 'clear' },
       elemAfter: <div css={shortcutStyle}>{tooltip(backspace)}</div>,
-      elemBefore:
-        isDragAndDropEnabled &&
-        getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? (
-          <span css={elementBeforeIconStyles}>
-            <CrossCircleIcon
-              label={formatMessage(messages.clearCells, {
-                0: Math.max(noOfColumns, noOfRows),
-              })}
-            />
-          </span>
-        ) : undefined,
+      elemBefore: isDragAndDropEnabled ? (
+        <span css={elementBeforeIconStyles}>
+          <CrossCircleIcon
+            label={formatMessage(messages.clearCells, {
+              0: Math.max(noOfColumns, noOfRows),
+            })}
+          />
+        </span>
+      ) : undefined,
     } as MenuItem;
   };
 
@@ -408,17 +374,15 @@ export class ContextualMenu extends Component<
         0: noOfColumns,
       }),
       value: { name: 'delete_column' },
-      elemBefore:
-        isDragAndDropEnabled &&
-        getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? (
-          <span css={elementBeforeIconStyles}>
-            <RemoveIcon
-              label={formatMessage(messages.removeColumns, {
-                0: noOfColumns,
-              })}
-            />
-          </span>
-        ) : undefined,
+      elemBefore: isDragAndDropEnabled ? (
+        <span css={elementBeforeIconStyles}>
+          <RemoveIcon
+            label={formatMessage(messages.removeColumns, {
+              0: noOfColumns,
+            })}
+          />
+        </span>
+      ) : undefined,
     } as MenuItem;
   };
 
@@ -438,17 +402,15 @@ export class ContextualMenu extends Component<
         0: noOfRows,
       }),
       value: { name: 'delete_row' },
-      elemBefore:
-        isDragAndDropEnabled &&
-        getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? (
-          <span css={elementBeforeIconStyles}>
-            <RemoveIcon
-              label={formatMessage(messages.removeRows, {
-                0: noOfRows,
-              })}
-            />
-          </span>
-        ) : undefined,
+      elemBefore: isDragAndDropEnabled ? (
+        <span css={elementBeforeIconStyles}>
+          <RemoveIcon
+            label={formatMessage(messages.removeRows, {
+              0: noOfRows,
+            })}
+          />
+        </span>
+      ) : undefined,
     } as MenuItem;
   };
 
@@ -463,11 +425,7 @@ export class ContextualMenu extends Component<
       isDragAndDropEnabled,
       pluginConfig: { allowDistributeColumns },
     } = getPluginState(editorView.state);
-    if (
-      allowDistributeColumns &&
-      (!isDragAndDropEnabled ||
-        !getBooleanFF('platform.editor.table.new-cell-context-menu-styling'))
-    ) {
+    if (allowDistributeColumns && !isDragAndDropEnabled) {
       const { isTableScalingEnabled = false } = getPluginState(
         editorView.state,
       );
@@ -498,11 +456,7 @@ export class ContextualMenu extends Component<
     } = this.props;
     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

package/src/ui/FloatingDragMenu/DragMenu.tsx

@@ -620,27 +620,18 @@ export const DragMenu = React.memo(
       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()] });