@atlaskit/editor-plugin-table 5.7.10 → 5.8.1

package/dist/esm/ui/FloatingDragMenu/index.js

@@ -17,7 +17,8 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     getEditorContainerWidth = _ref.getEditorContainerWidth,
     canDrag = _ref.canDrag,
     editorAnalyticsAPI = _ref.editorAnalyticsAPI,
-    stickyHeaders = _ref.stickyHeaders;
+    stickyHeaders = _ref.stickyHeaders,
+    pluginConfig = _ref.pluginConfig;
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }
@@ -55,7 +56,8 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     targetCellPosition: targetCellPosition,
     getEditorContainerWidth: getEditorContainerWidth,
     canDrag: canDrag,
-    editorAnalyticsAPI: editorAnalyticsAPI
+    editorAnalyticsAPI: editorAnalyticsAPI,
+    pluginConfig: pluginConfig
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

package/dist/esm/ui/FloatingDragMenu/styles.js

@@ -0,0 +1,12 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import { css } from '@emotion/react';
+import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
+import { N60A, N90 } from '@atlaskit/theme/colors';
+import { TableCssClassName as ClassName } from '../../types';
+import { dragMenuDropdownWidth } from '../consts';
+export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &::before {\n    background: ", ";\n  }\n"])), selectedColor);
+};
+export var dragMenuBackgroundColorStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), ClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), dragMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.DRAG_SUBMENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
+export var toggleStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  input[type='checkbox'] {\n    width: 30px;\n    height: 14px;\n    pointer-events: initial;\n    cursor: pointer;\n  }\n  > label {\n    margin: 0px;\n    pointer-events: none;\n    > span {\n      pointer-events: none;\n    }\n  }\n"])));

package/dist/esm/ui/consts.js

@@ -1,5 +1,6 @@
 import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/styles';
 import { akEditorTableBorder, akEditorTableBorderSelected, akEditorTableCellBlanketDeleted, akEditorTableCellBlanketSelected, akEditorTableHeaderCellBackground, akEditorTableToolbar, akEditorTableToolbarSize, akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B200, N0, N20, N200, N20A, N300, R300, R400, R75 } from '@atlaskit/theme/colors';
 import { RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
 
@@ -49,7 +50,7 @@ export var resizeHandlerAreaWidth = RESIZE_HANDLE_AREA_DECORATION_GAP / 3;
 export var resizeLineWidth = 2;
 export var resizeHandlerZIndex = columnControlsZIndex + akRichMediaResizeZIndex;
 export var contextualMenuTriggerSize = 16;
-export var contextualMenuDropdownWidth = 180;
+export var contextualMenuDropdownWidth = getBooleanFF('platform.editor.table.drag-and-drop') ? 250 : 180;
 export var stickyRowZIndex = resizeHandlerZIndex + 2;
 export var stickyRowOffsetTop = 8;
 export var stickyHeaderBorderBottomWidth = 1;

package/dist/types/commands/column-resize.d.ts

@@ -0,0 +1,5 @@
+import type { Command, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type { Direction } from '@atlaskit/editor-tables/src/types';
+export declare const initiateKeyboardColumnResizing: Command;
+export declare const activateNextResizeArea: (direction: Direction) => Command;
+export declare const changeColumnWidthByStep: (stepSize: number, getEditorContainerWidth: GetEditorContainerWidth) => Command;

package/dist/types/pm-plugins/table-resizing/utils/index.d.ts

@@ -4,7 +4,7 @@ export { getColumnStateFromDOM, getFreeSpace, getCellsRefsInColumn, calculateCol
 export type { ColumnState } from './column-state';
 export { growColumn, shrinkColumn, reduceSpace } from './resize-logic';
 export { getResizeState, updateColgroup, getTotalWidth, evenAllColumnsWidths, bulkColumnsResize, areColumnsEven, adjustColumnsWidths, } from './resize-state';
-export { getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth, domCellAround, } from './misc';
+export { getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth, domCellAround, getTableMaxWidth, } from './misc';
 export { updateControls, isClickNear, getResizeCellPos } from './dom';
 export { scale, scaleWithParent, scaleTable, previewScaleTable, } from './scale-table';
 export type { ScaleOptions } from './scale-table';

package/dist/types/types.d.ts

@@ -305,6 +305,8 @@ export declare const TableCssClassName: {
     DRAG_HANDLE_DISABLED: string;
     /** minimised handle class */
     DRAG_HANDLE_MINIMISED: string;
+    DRAG_SUBMENU: string;
+    DRAG_SUBMENU_ICON: string;
     /** Other classes */
     NUMBERED_COLUMN: string;
     NUMBERED_COLUMN_BUTTON: string;

package/dist/types/ui/FloatingDragMenu/DragMenu.d.ts

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
@@ -21,5 +20,5 @@ type DragMenuProps = {
     canDrag?: boolean;
     editorAnalyticsAPI?: EditorAnalyticsAPI;
 };
-export declare const DragMenu: ({ direction, index, isOpen, editorView, tableNode, mountPoint, boundariesElement, scrollableElement, targetCellPosition, getEditorContainerWidth, canDrag, editorAnalyticsAPI, }: DragMenuProps) => jsx.JSX.Element | null;
+export declare const DragMenu: ({ direction, index, isOpen, editorView, tableNode, mountPoint, boundariesElement, scrollableElement, targetCellPosition, getEditorContainerWidth, canDrag, editorAnalyticsAPI, pluginConfig, }: DragMenuProps) => jsx.JSX.Element | null;
 export {};

package/dist/types/ui/FloatingDragMenu/index.d.ts

@@ -4,7 +4,7 @@ import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
-import type { TableDirection } from '../../types';
+import type { PluginConfig, TableDirection } from '../../types';
 export interface Props {
     editorView: EditorView;
     isOpen: boolean;
@@ -20,9 +20,10 @@ export interface Props {
     canDrag?: boolean;
     editorAnalyticsAPI?: EditorAnalyticsAPI;
     stickyHeaders?: RowStickyState;
+    pluginConfig?: PluginConfig;
 }
 declare const FloatingDragMenu: {
-    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, canDrag, editorAnalyticsAPI, stickyHeaders, }: Props): JSX.Element | null;
+    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, canDrag, editorAnalyticsAPI, stickyHeaders, pluginConfig, }: Props): JSX.Element | null;
     displayName: string;
 };
 export default FloatingDragMenu;

package/dist/types/ui/FloatingDragMenu/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const cellColourPreviewStyles: (selectedColor: string) => import("@emotion/react").SerializedStyles;
+export declare const dragMenuBackgroundColorStyles: import("@emotion/react").SerializedStyles;
+export declare const toggleStyles: import("@emotion/react").SerializedStyles;

package/dist/types/ui/consts.d.ts

@@ -40,7 +40,7 @@ export declare const resizeHandlerAreaWidth: number;
 export declare const resizeLineWidth = 2;
 export declare const resizeHandlerZIndex: number;
 export declare const contextualMenuTriggerSize = 16;
-export declare const contextualMenuDropdownWidth = 180;
+export declare const contextualMenuDropdownWidth: number;
 export declare const stickyRowZIndex: number;
 export declare const stickyRowOffsetTop = 8;
 export declare const stickyHeaderBorderBottomWidth = 1;

package/dist/types-ts4.5/commands/column-resize.d.ts

@@ -0,0 +1,5 @@
+import type { Command, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type { Direction } from '@atlaskit/editor-tables/src/types';
+export declare const initiateKeyboardColumnResizing: Command;
+export declare const activateNextResizeArea: (direction: Direction) => Command;
+export declare const changeColumnWidthByStep: (stepSize: number, getEditorContainerWidth: GetEditorContainerWidth) => Command;

package/dist/types-ts4.5/pm-plugins/table-resizing/utils/index.d.ts

@@ -4,7 +4,7 @@ export { getColumnStateFromDOM, getFreeSpace, getCellsRefsInColumn, calculateCol
 export type { ColumnState } from './column-state';
 export { growColumn, shrinkColumn, reduceSpace } from './resize-logic';
 export { getResizeState, updateColgroup, getTotalWidth, evenAllColumnsWidths, bulkColumnsResize, areColumnsEven, adjustColumnsWidths, } from './resize-state';
-export { getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth, domCellAround, } from './misc';
+export { getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth, domCellAround, getTableMaxWidth, } from './misc';
 export { updateControls, isClickNear, getResizeCellPos } from './dom';
 export { scale, scaleWithParent, scaleTable, previewScaleTable, } from './scale-table';
 export type { ScaleOptions } from './scale-table';

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

@@ -305,6 +305,8 @@ export declare const TableCssClassName: {
     DRAG_HANDLE_DISABLED: string;
     /** minimised handle class */
     DRAG_HANDLE_MINIMISED: string;
+    DRAG_SUBMENU: string;
+    DRAG_SUBMENU_ICON: string;
     /** Other classes */
     NUMBERED_COLUMN: string;
     NUMBERED_COLUMN_BUTTON: string;

package/dist/types-ts4.5/ui/FloatingDragMenu/DragMenu.d.ts

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
@@ -21,5 +20,5 @@ type DragMenuProps = {
     canDrag?: boolean;
     editorAnalyticsAPI?: EditorAnalyticsAPI;
 };
-export declare const DragMenu: ({ direction, index, isOpen, editorView, tableNode, mountPoint, boundariesElement, scrollableElement, targetCellPosition, getEditorContainerWidth, canDrag, editorAnalyticsAPI, }: DragMenuProps) => jsx.JSX.Element | null;
+export declare const DragMenu: ({ direction, index, isOpen, editorView, tableNode, mountPoint, boundariesElement, scrollableElement, targetCellPosition, getEditorContainerWidth, canDrag, editorAnalyticsAPI, pluginConfig, }: DragMenuProps) => jsx.JSX.Element | null;
 export {};

package/dist/types-ts4.5/ui/FloatingDragMenu/index.d.ts

@@ -4,7 +4,7 @@ import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
-import type { TableDirection } from '../../types';
+import type { PluginConfig, TableDirection } from '../../types';
 export interface Props {
     editorView: EditorView;
     isOpen: boolean;
@@ -20,9 +20,10 @@ export interface Props {
     canDrag?: boolean;
     editorAnalyticsAPI?: EditorAnalyticsAPI;
     stickyHeaders?: RowStickyState;
+    pluginConfig?: PluginConfig;
 }
 declare const FloatingDragMenu: {
-    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, canDrag, editorAnalyticsAPI, stickyHeaders, }: Props): JSX.Element | null;
+    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, canDrag, editorAnalyticsAPI, stickyHeaders, pluginConfig, }: Props): JSX.Element | null;
     displayName: string;
 };
 export default FloatingDragMenu;

package/dist/types-ts4.5/ui/FloatingDragMenu/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const cellColourPreviewStyles: (selectedColor: string) => import("@emotion/react").SerializedStyles;
+export declare const dragMenuBackgroundColorStyles: import("@emotion/react").SerializedStyles;
+export declare const toggleStyles: import("@emotion/react").SerializedStyles;

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

@@ -40,7 +40,7 @@ export declare const resizeHandlerAreaWidth: number;
 export declare const resizeLineWidth = 2;
 export declare const resizeHandlerZIndex: number;
 export declare const contextualMenuTriggerSize = 16;
-export declare const contextualMenuDropdownWidth = 180;
+export declare const contextualMenuDropdownWidth: number;
 export declare const stickyRowZIndex: number;
 export declare const stickyRowOffsetTop = 8;
 export declare const stickyHeaderBorderBottomWidth = 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.7.10",
+  "version": "5.8.1",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,12 +30,12 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.3.0",
     "@atlaskit/custom-steps": "^0.0.11",
-    "@atlaskit/editor-common": "^76.37.0",
+    "@atlaskit/editor-common": "^76.39.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",
     "@atlaskit/editor-plugin-guideline": "^0.5.0",
-    "@atlaskit/editor-plugin-selection": "^0.1.0",
+    "@atlaskit/editor-plugin-selection": "^0.2.0",
     "@atlaskit/editor-plugin-width": "^0.2.0",
     "@atlaskit/editor-prosemirror": "1.1.0",
     "@atlaskit/editor-shared-styles": "^2.9.0",
@@ -47,6 +47,7 @@
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^0.12.0",
     "@atlaskit/primitives": "^1.17.0",
     "@atlaskit/theme": "^12.6.0",
+    "@atlaskit/toggle": "^13.0.0",
     "@atlaskit/tokens": "^1.33.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@babel/runtime": "^7.0.0",
@@ -144,6 +145,9 @@
     },
     "platform.editor.table.in-danger-hover-merged-cells-fix": {
       "type": "boolean"
+    },
+    "platform.editor.a11y-column-resizing_emcvz": {
+      "type": "boolean"
     }
   }
 }

package/src/__tests__/unit/ui/FloatingDragMenu.tsx

@@ -188,5 +188,300 @@ describe('FloatingDragMenu', () => {
           ]
         `);
     });
+    // first row menu item check
+    ffTest(
+      'platform.editor.table.new-cell-context-menu-styling',
+      () => {
+        // Run test case when FF platform.editor.table.new-cell-context-menu-styling is true
+
+        const tableRef = editorView.dom.querySelector('table');
+        const editorRef = {
+          current: document.createElement('div'),
+        };
+        render(
+          <ReactEditorViewContext.Provider
+            value={{
+              editorRef,
+            }}
+          >
+            <div id="drag-handle-button-row">dragmenu anchor</div>
+            <DragMenu
+              editorView={editorView}
+              isOpen={true}
+              getEditorContainerWidth={jest.fn()}
+              tableRef={tableRef as HTMLTableElement}
+              tableNode={tableNode?.node}
+              direction="row"
+              index={0}
+            />
+          </ReactEditorViewContext.Provider>,
+        );
+
+        const items = screen.getAllByRole('menuitem');
+        const menuitemTextArray = items.map((item) => item.textContent);
+        expect(menuitemTextArray).toMatchInlineSnapshot(`
+              Array [
+                "Add row aboveCtrl+Alt+↑",
+                "Add row belowCtrl+Alt+↓",
+                "Clear cells⌫",
+                "Delete rowCtrl+⌫",
+                "Move row upCtrl+Alt+Shift+↑",
+                "Move row downCtrl+Alt+Shift+↓",
+                "Header row",
+                "Row numbers",
+              ]
+            `);
+      },
+      () => {
+        // Run test case when FF platform.editor.table.new-cell-context-menu-styling is false
+        const tableRef = editorView.dom.querySelector('table');
+        const editorRef = {
+          current: document.createElement('div'),
+        };
+        render(
+          <ReactEditorViewContext.Provider
+            value={{
+              editorRef,
+            }}
+          >
+            <div id="drag-handle-button-row">dragmenu anchor</div>
+            <DragMenu
+              editorView={editorView}
+              isOpen={true}
+              getEditorContainerWidth={jest.fn()}
+              tableRef={tableRef as HTMLTableElement}
+              tableNode={tableNode?.node}
+              direction="row"
+              index={0}
+            />
+          </ReactEditorViewContext.Provider>,
+        );
+
+        const items = screen.getAllByRole('menuitem');
+        const menuitemTextArray = items.map((item) => item.textContent);
+        expect(menuitemTextArray).toMatchInlineSnapshot(`
+              Array [
+                "Add row aboveCtrl+Alt+↑",
+                "Add row belowCtrl+Alt+↓",
+                "Clear cells⌫",
+                "Delete rowCtrl+⌫",
+                "Move row upCtrl+Alt+Shift+↑",
+                "Move row downCtrl+Alt+Shift+↓",
+              ]
+            `);
+      },
+    );
+    // second row menu item check
+    ffTest(
+      'platform.editor.table.new-cell-context-menu-styling',
+      () => {
+        // Run test case when FF platform.editor.table.new-cell-context-menu-styling is true
+
+        const tableRef = editorView.dom.querySelector('table');
+        const editorRef = {
+          current: document.createElement('div'),
+        };
+        render(
+          <ReactEditorViewContext.Provider
+            value={{
+              editorRef,
+            }}
+          >
+            <div id="drag-handle-button-row">dragmenu anchor</div>
+            <DragMenu
+              editorView={editorView}
+              isOpen={true}
+              getEditorContainerWidth={jest.fn()}
+              tableRef={tableRef as HTMLTableElement}
+              tableNode={tableNode?.node}
+              direction="row"
+              index={1}
+            />
+          </ReactEditorViewContext.Provider>,
+        );
+
+        const items = screen.getAllByRole('menuitem');
+        const menuitemTextArray = items.map((item) => item.textContent);
+        expect(menuitemTextArray).toMatchInlineSnapshot(`
+              Array [
+                "Add row aboveCtrl+Alt+↑",
+                "Add row belowCtrl+Alt+↓",
+                "Clear cells⌫",
+                "Delete rowCtrl+⌫",
+                "Move row upCtrl+Alt+Shift+↑",
+                "Move row downCtrl+Alt+Shift+↓",
+                "Row numbers",
+              ]
+            `);
+      },
+      () => {
+        // Run test case when FF platform.editor.table.new-cell-context-menu-styling is false
+        const tableRef = editorView.dom.querySelector('table');
+        const editorRef = {
+          current: document.createElement('div'),
+        };
+        render(
+          <ReactEditorViewContext.Provider
+            value={{
+              editorRef,
+            }}
+          >
+            <div id="drag-handle-button-row">dragmenu anchor</div>
+            <DragMenu
+              editorView={editorView}
+              isOpen={true}
+              getEditorContainerWidth={jest.fn()}
+              tableRef={tableRef as HTMLTableElement}
+              tableNode={tableNode?.node}
+              direction="row"
+              index={1}
+            />
+          </ReactEditorViewContext.Provider>,
+        );
+
+        const items = screen.getAllByRole('menuitem');
+        const menuitemTextArray = items.map((item) => item.textContent);
+        expect(menuitemTextArray).toMatchInlineSnapshot(`
+              Array [
+                "Add row aboveCtrl+Alt+↑",
+                "Add row belowCtrl+Alt+↓",
+                "Clear cells⌫",
+                "Delete rowCtrl+⌫",
+                "Move row upCtrl+Alt+Shift+↑",
+                "Move row downCtrl+Alt+Shift+↓",
+              ]
+            `);
+      },
+    );
+    // first column menu item check
+    ffTest(
+      'platform.editor.table.new-cell-context-menu-styling',
+      () => {
+        // Run test case when FF platform.editor.table.new-cell-context-menu-styling is true
+
+        const tableRef = editorView.dom.querySelector('table');
+        const editorRef = {
+          current: document.createElement('div'),
+        };
+        render(
+          <ReactEditorViewContext.Provider
+            value={{
+              editorRef,
+            }}
+          >
+            <div id="drag-handle-button-row">dragmenu anchor</div>
+            <DragMenu
+              editorView={editorView}
+              isOpen={true}
+              getEditorContainerWidth={jest.fn()}
+              tableRef={tableRef as HTMLTableElement}
+              tableNode={tableNode?.node}
+              direction="column"
+              index={0}
+            />
+          </ReactEditorViewContext.Provider>,
+        );
+
+        const items = screen.getAllByRole('menuitem');
+        const menuitemTextArray = items.map((item) => item.textContent);
+        expect(menuitemTextArray).toMatchInlineSnapshot(`
+              Array [
+                "Add column leftCtrl+Alt+←",
+                "Add column rightCtrl+Alt+→",
+                "Distribute columns",
+                "Clear cells⌫",
+                "Delete columnCtrl+⌫",
+                "Move column leftCtrl+Alt+Shift+←",
+                "Move column rightCtrl+Alt+Shift+→",
+                "Sort increasing",
+                "Sort decreasing",
+                "Header column",
+              ]
+            `);
+      },
+      () => {
+        // Run test case when FF platform.editor.table.new-cell-context-menu-styling is false
+        const tableRef = editorView.dom.querySelector('table');
+        const editorRef = {
+          current: document.createElement('div'),
+        };
+        render(
+          <ReactEditorViewContext.Provider
+            value={{
+              editorRef,
+            }}
+          >
+            <div id="drag-handle-button-row">dragmenu anchor</div>
+            <DragMenu
+              editorView={editorView}
+              isOpen={true}
+              getEditorContainerWidth={jest.fn()}
+              tableRef={tableRef as HTMLTableElement}
+              tableNode={tableNode?.node}
+              direction="column"
+              index={0}
+            />
+          </ReactEditorViewContext.Provider>,
+        );
+
+        const items = screen.getAllByRole('menuitem');
+        const menuitemTextArray = items.map((item) => item.textContent);
+        expect(menuitemTextArray).toMatchInlineSnapshot(`
+              Array [
+                "Add column leftCtrl+Alt+←",
+                "Add column rightCtrl+Alt+→",
+                "Distribute columns",
+                "Clear cells⌫",
+                "Delete columnCtrl+⌫",
+                "Move column leftCtrl+Alt+Shift+←",
+                "Move column rightCtrl+Alt+Shift+→",
+                "Sort increasing",
+                "Sort decreasing",
+              ]
+            `);
+      },
+    );
+    // second column menu item check
+    ffTest('platform.editor.table.new-cell-context-menu-styling', () => {
+      // Run test case when FF platform.editor.table.new-cell-context-menu-styling is true
+      const tableRef = editorView.dom.querySelector('table');
+      const editorRef = {
+        current: document.createElement('div'),
+      };
+      render(
+        <ReactEditorViewContext.Provider
+          value={{
+            editorRef,
+          }}
+        >
+          <div id="drag-handle-button-row">dragmenu anchor</div>
+          <DragMenu
+            editorView={editorView}
+            isOpen={true}
+            getEditorContainerWidth={jest.fn()}
+            tableRef={tableRef as HTMLTableElement}
+            tableNode={tableNode?.node}
+            direction="column"
+            index={1}
+          />
+        </ReactEditorViewContext.Provider>,
+      );
+
+      const items = screen.getAllByRole('menuitem');
+      const menuitemTextArray = items.map((item) => item.textContent);
+      expect(menuitemTextArray).toMatchInlineSnapshot(`
+              Array [
+                "Add column leftCtrl+Alt+←",
+                "Add column rightCtrl+Alt+→",
+                "Distribute columns",
+                "Clear cells⌫",
+                "Delete columnCtrl+⌫",
+                "Move column leftCtrl+Alt+Shift+←",
+                "Move column rightCtrl+Alt+Shift+→",
+                "Sort increasing",
+                "Sort decreasing",
+              ]
+            `);
+    });
   });
 });