@atlaskit/editor-plugin-table 2.1.7 → 2.3.0

package/src/__tests__/unit/pm-plugins/decorations/plugin.ts

@@ -22,12 +22,15 @@ import {
   handleDocOrSelectionChanged,
 } from '../../../../plugins/table/pm-plugins/decorations/plugin';
 import { pluginKey } from '../../../../plugins/table/pm-plugins/plugin-key';
+import { pluginKey as tableWidthPluginKey } from '../../../../plugins/table/pm-plugins/table-width';
 import { TableDecorations } from '../../../../plugins/table/types';
 import tablePlugin from '../../../../plugins/table';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
+import { ffTest } from '@atlassian/feature-flags-test-utils';
 
 describe('decorations plugin', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -40,6 +43,7 @@ describe('decorations plugin', () => {
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
         .add(widthPlugin)
+        .add(guidelinePlugin)
         .add(tablePlugin),
       pluginKey,
     });
@@ -82,12 +86,14 @@ describe('decorations plugin', () => {
         editorView.state.tr,
         pluginState,
         editorView.state,
+        editorView.state,
       );
 
       const newState = handleDocOrSelectionChanged(
         editorView.state.tr,
         oldState,
         editorView.state,
+        editorView.state,
       );
 
       expect(newState).toEqual(oldState);
@@ -105,6 +111,7 @@ describe('decorations plugin', () => {
         editorView.state.tr,
         DecorationSet.empty,
         editorView.state,
+        state,
       );
 
       const { tr: transaction } = state;
@@ -114,6 +121,7 @@ describe('decorations plugin', () => {
         transaction,
         nextPluginState,
         editorView.state,
+        state,
       );
       const expectedDecorationSet = newState;
       const decorations = expectedDecorationSet.find(
@@ -136,14 +144,74 @@ describe('decorations plugin', () => {
         editorView.state.tr,
         DecorationSet.empty,
         editorView.state,
+        editorView.state,
       );
 
       const newPluginState = handleDocOrSelectionChanged(
         editorView.state.tr,
         oldPluginState,
         editorView.state,
+        editorView.state,
       );
       expect(oldPluginState).toEqual(newPluginState);
     });
   });
+
+  describe('table width resizing', () => {
+    describe('should remove column controls when resizing starts and add back when it ends', () => {
+      ffTest(
+        'platform.editor.custom-table-width',
+        () => {
+          const { editorView } = editor(
+            doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
+          );
+
+          const startTransaction = editorView.state.tr.setMeta(
+            tableWidthPluginKey,
+            {
+              resizing: true,
+            },
+          );
+          editorView.dispatch(startTransaction);
+          const startDecorationSet = getDecorations(editorView.state);
+          expect(startDecorationSet).toEqual(DecorationSet.empty);
+
+          const endTransaction = editorView.state.tr.setMeta(
+            tableWidthPluginKey,
+            {
+              resizing: false,
+            },
+          );
+          editorView.dispatch(endTransaction);
+          const endDecorationSet = getDecorations(editorView.state);
+          expect(endDecorationSet).not.toEqual(DecorationSet.empty);
+        },
+        () => {
+          const { editorView } = editor(
+            doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
+          );
+
+          const startTransaction = editorView.state.tr.setMeta(
+            tableWidthPluginKey,
+            {
+              resizing: true,
+            },
+          );
+          editorView.dispatch(startTransaction);
+          const startDecorationSet = getDecorations(editorView.state);
+          expect(startDecorationSet).not.toEqual(DecorationSet.empty);
+
+          const endTransaction = editorView.state.tr.setMeta(
+            tableWidthPluginKey,
+            {
+              resizing: false,
+            },
+          );
+          editorView.dispatch(endTransaction);
+          const endDecorationSet = getDecorations(editorView.state);
+          expect(endDecorationSet).not.toEqual(DecorationSet.empty);
+        },
+      );
+    });
+  });
 });

package/src/__tests__/unit/pm-plugins/main.ts

@@ -31,6 +31,7 @@ import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 
 describe('tables: main plugin', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -42,6 +43,7 @@ describe('tables: main plugin', () => {
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
         .add(widthPlugin)
+        .add(guidelinePlugin)
         .add(tablePlugin),
       pluginKey,
     });

package/src/__tests__/unit/pm-plugins/safari-delete-composition-text-issue-workaround.ts

@@ -17,6 +17,7 @@ import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 
 describe('table/safari-delete-composition-text-issue-workaround', () => {
   let editor: any;
@@ -30,6 +31,7 @@ describe('table/safari-delete-composition-text-issue-workaround', () => {
           .add([analyticsPlugin, {}])
           .add(contentInsertionPlugin)
           .add(widthPlugin)
+          .add(guidelinePlugin)
           .add([tablePlugin, { tableOptions: { allowColumnResizing: true } }]),
         pluginKey,
       });

package/src/__tests__/unit/pm-plugins/sticky-headers/tableRow.tsx

@@ -47,6 +47,7 @@ import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 
 describe('TableRowNodeView', () => {
   let tableRowNodeView: TableRowNodeView;
@@ -62,6 +63,7 @@ describe('TableRowNodeView', () => {
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
         .add(widthPlugin)
+        .add(guidelinePlugin)
         .add(tablePlugin),
       pluginKey,
       attachTo: document.body,
@@ -94,6 +96,7 @@ describe('TableRowNodeView', () => {
             .add([analyticsPlugin, {}])
             .add(contentInsertionPlugin)
             .add(widthPlugin)
+            .add(guidelinePlugin)
             .add(tablePlugin),
           pluginKey,
         });

package/src/__tests__/unit/pm-plugins/table-resizing/event-handlers.ts

@@ -23,6 +23,7 @@ import { pluginKey } from '../../../../plugins/table/pm-plugins/plugin-key';
 import { TextSelection, EditorState } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import {
   akEditorFullPageMaxWidth,
   akEditorDefaultLayoutWidth,
@@ -56,6 +57,7 @@ describe('table-resizing/event-handlers', () => {
           .add(contentInsertionPlugin)
           .add(decorationsPlugin)
           .add(widthPlugin)
+          .add(guidelinePlugin)
           .add([
             tablePlugin,
             {

package/src/__tests__/unit/sort-column.ts

@@ -26,6 +26,7 @@ import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 
 const TABLE_LOCAL_ID = 'test-table-local-id';
 
@@ -52,6 +53,7 @@ describe('table plugin', () => {
     .add([analyticsPlugin, {}])
     .add(contentInsertionPlugin)
     .add(widthPlugin)
+    .add(guidelinePlugin)
     .add([tablePlugin, { tableOptions }]);
 
   const editor = (doc: DocBuilder) => {

package/src/__tests__/unit/toolbar.ts

@@ -35,6 +35,7 @@ import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 
 jest.mock('@atlaskit/editor-tables/utils');
 jest.mock('../../plugins/table/transforms');
@@ -160,6 +161,7 @@ describe('getToolbarCellOptionsConfig', () => {
       .add([analyticsPlugin, {}])
       .add(contentInsertionPlugin)
       .add(widthPlugin)
+      .add(guidelinePlugin)
       .add([
         tablePlugin,
         {

package/src/__tests__/unit/transforms/delete-columns.ts

@@ -25,6 +25,7 @@ import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 
 const colsToRect = (cols: Array<number>, noOfRows: number): Rect => ({
   left: Math.min(...cols),
@@ -50,6 +51,7 @@ describe('table plugin -> transforms -> delete columns', () => {
     .add([analyticsPlugin, {}])
     .add(contentInsertionPlugin)
     .add(widthPlugin)
+    .add(guidelinePlugin)
     .add(tablePlugin);
 
   const editor = (doc: DocBuilder) =>

package/src/__tests__/unit/transforms/delete-rows.ts

@@ -26,6 +26,7 @@ import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 
 const rowsToRect = (rows: Array<number>, noOfColumns: number): Rect => ({
   left: 0,
@@ -50,6 +51,7 @@ describe('table plugin -> transforms -> delete rows', () => {
     .add([analyticsPlugin, {}])
     .add(contentInsertionPlugin)
     .add(widthPlugin)
+    .add(guidelinePlugin)
     .add(tablePlugin);
 
   const editor = (doc: DocBuilder) =>

package/src/__tests__/unit/transforms/merging.ts

@@ -22,6 +22,7 @@ import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 
 const TABLE_LOCAL_ID = 'test-table-local-id';
 
@@ -40,6 +41,7 @@ describe('table plugin -> transforms -> merge cells', () => {
     .add([analyticsPlugin, {}])
     .add(contentInsertionPlugin)
     .add(widthPlugin)
+    .add(guidelinePlugin)
     .add(tablePlugin);
 
   const editor = (doc: DocBuilder) =>

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

@@ -21,6 +21,7 @@ import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 
 import { ContextualMenu } from '../../../plugins/table/ui/FloatingContextualMenu/ContextualMenu';
 
@@ -38,6 +39,7 @@ describe('ContextualMenu', () => {
           .add([analyticsPlugin, {}])
           .add(contentInsertionPlugin)
           .add(widthPlugin)
+          .add(guidelinePlugin)
           .add([tablePlugin, { tableOptions: { advanced: true } }]),
       }));
     });

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

@@ -23,6 +23,7 @@ import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 
 describe('CornerControls', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -35,6 +36,7 @@ describe('CornerControls', () => {
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
         .add(widthPlugin)
+        .add(guidelinePlugin)
         .add(tablePlugin),
       pluginKey,
     });

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

@@ -27,6 +27,7 @@ import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 
 const createEditor = createProsemirrorEditorFactory();
 let createAnalyticsEvent = jest.fn(() => ({ fire() {} } as UIAnalyticsEvent));
@@ -38,6 +39,7 @@ const editor = (doc: DocBuilder) =>
       .add([analyticsPlugin, {}])
       .add(contentInsertionPlugin)
       .add(widthPlugin)
+      .add(guidelinePlugin)
       .add(tablePlugin),
   });
 

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

@@ -24,6 +24,7 @@ import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 
 describe('FloatingContextualMenu', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -37,6 +38,7 @@ describe('FloatingContextualMenu', () => {
           .add([analyticsPlugin, {}])
           .add(contentInsertionPlugin)
           .add(widthPlugin)
+          .add(guidelinePlugin)
           .add(tablePlugin),
       }));
     });

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

@@ -29,6 +29,7 @@ import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 
 describe('RowControls', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -61,6 +62,7 @@ describe('RowControls', () => {
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
         .add(widthPlugin)
+        .add(guidelinePlugin)
         .add(tablePlugin),
       pluginKey,
     });

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

@@ -28,6 +28,7 @@ import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 
 describe('TableFloatingControls', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -37,6 +38,7 @@ describe('TableFloatingControls', () => {
     .add([analyticsPlugin, {}])
     .add(contentInsertionPlugin)
     .add(widthPlugin)
+    .add(guidelinePlugin)
     .add(tablePlugin);
 
   const editor = (doc: DocBuilder) =>

package/src/__tests__/unit/undo-redo.ts

@@ -25,6 +25,7 @@ import sendKeyToPm from '@atlaskit/editor-test-helpers/send-key-to-pm';
 import clone from 'lodash/clone';
 import tablePlugin from '../../plugins/table';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
@@ -66,6 +67,7 @@ describe('undo/redo with tables', () => {
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
         .add(widthPlugin)
+        .add(guidelinePlugin)
         .add([tablePlugin, { tableOptions }]),
       pluginKey: tablePluginKey,
     });

package/src/__tests__/unit/utils/collapse.ts

@@ -13,6 +13,7 @@ import {
 
 import tablePlugin from '../../../plugins/table';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 
 import { isTableCollapsible } from '../../../plugins/table/utils/collapse';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
@@ -28,6 +29,7 @@ describe('collapse', () => {
       .add([analyticsPlugin, {}])
       .add(contentInsertionPlugin)
       .add(widthPlugin)
+      .add(guidelinePlugin)
       .add(tablePlugin);
 
     return createEditor({ doc, preset });

package/src/__tests__/unit/utils/nodes.ts

@@ -22,6 +22,7 @@ import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 
 describe('table merging logic', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -34,6 +35,7 @@ describe('table merging logic', () => {
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
         .add(widthPlugin)
+        .add(guidelinePlugin)
         .add(tablePlugin),
       pluginKey,
     });

package/src/__tests__/unit/utils/row-controls.ts

@@ -23,6 +23,7 @@ import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 
 const TABLE_LOCAL_ID = 'test-table-local-id';
 
@@ -44,6 +45,7 @@ describe('table plugin: utils/row-controls.js', () => {
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
         .add(widthPlugin)
+        .add(guidelinePlugin)
         .add(tablePlugin),
       pluginKey,
     });

package/src/__tests__/unit/utils.ts

@@ -32,6 +32,7 @@ import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 
 describe('table plugin: utils', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -40,6 +41,7 @@ describe('table plugin: utils', () => {
     .add([analyticsPlugin, {}])
     .add(contentInsertionPlugin)
     .add(widthPlugin)
+    .add(guidelinePlugin)
     .add(tablePlugin);
 
   const editor = (doc: DocBuilder) =>

package/src/plugins/table/handlers.ts

@@ -1,4 +1,5 @@
 // #region Imports
+// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
 import { Transaction, ReadonlyTransaction } from 'prosemirror-state';
 import { ContentNodeWithPos, findParentNodeOfType } from 'prosemirror-utils';
 import { findTable } from '@atlaskit/editor-tables/utils';

package/src/plugins/table/index.tsx

@@ -36,7 +36,10 @@ import type { EditorSelectionAPI } from '@atlaskit/editor-common/selection';
 
 import { pluginConfig } from './create-plugin-config';
 import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-local-id';
-import { createPlugin as createTableAddWidthPlugin } from './pm-plugins/table-add-width';
+import {
+  pluginKey as tableWidthPluginKey,
+  createPlugin as createTableWidthPlugin,
+} from './pm-plugins/table-width';
 import { createPlugin as createTableSafariDeleteCompositionTextIssueWorkaroundPlugin } from './pm-plugins/safari-delete-composition-text-issue-workaround';
 import { createPlugin as createDecorationsPlugin } from './pm-plugins/decorations/plugin';
 import { keymapPlugin } from './pm-plugins/keymap';
@@ -71,6 +74,7 @@ import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import type { widthPlugin } from '@atlaskit/editor-plugin-width';
+import type { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 
 interface TablePluginOptions {
   tableOptions: PluginConfig;
@@ -98,6 +102,7 @@ const tablesPlugin: NextEditorPlugin<
       typeof analyticsPlugin,
       typeof contentInsertionPlugin,
       typeof widthPlugin,
+      typeof guidelinePlugin,
     ];
   }
 > = (options?: TablePluginOptions, api?) => {
@@ -172,13 +177,13 @@ const tablesPlugin: NextEditorPlugin<
               portalProviderAPI,
               eventDispatcher,
               pluginConfig(tableOptions),
-
               defaultGetEditorContainerWidth,
               getEditorFeatureFlags || defaultGetEditorFeatureFlags,
               breakoutEnabled,
               fullWidthEnabled,
               wasFullWidthEnabled,
               editorAnalyticsAPI,
+              api,
             );
           },
         },
@@ -255,10 +260,13 @@ const tablesPlugin: NextEditorPlugin<
           plugin: ({ dispatch }) => createTableLocalIdPlugin(dispatch),
         },
         {
-          name: 'tableAddWidth',
-          plugin: () =>
-            getBooleanFF('platform.editor.custom-table-width') && options
-              ? createTableAddWidthPlugin(options.fullWidthEnabled || false)
+          name: 'tableWidth',
+          plugin: ({ dispatch }) =>
+            getBooleanFF('platform.editor.custom-table-width')
+              ? createTableWidthPlugin(
+                  dispatch,
+                  options?.fullWidthEnabled ?? false,
+                )
               : undefined,
         },
 
@@ -309,6 +317,7 @@ const tablesPlugin: NextEditorPlugin<
           <WithPluginState
             plugins={{
               tablePluginState: pluginKey,
+              tableWidthPluginState: tableWidthPluginKey,
               tableResizingPluginState: tableResizingPluginKey,
               stickyHeadersState: stickyHeadersPluginKey,
             }}
@@ -316,9 +325,13 @@ const tablesPlugin: NextEditorPlugin<
               tableResizingPluginState: resizingPluginState,
               stickyHeadersState,
               tablePluginState,
+              tableWidthPluginState,
             }) => {
               const { state } = editorView;
-              const isDragging = resizingPluginState?.dragging;
+              const isColumnResizing = resizingPluginState?.dragging;
+              const isTableResizing = tableWidthPluginState?.resizing;
+              const isResizing = isColumnResizing || isTableResizing;
+
               const {
                 tableNode,
                 tablePos,
@@ -364,7 +377,7 @@ const tablesPlugin: NextEditorPlugin<
                 <>
                   {targetCellPosition &&
                     tableRef &&
-                    !isDragging &&
+                    !isResizing &&
                     options &&
                     options.allowContextualMenu && (
                       <FloatingContextualButton
@@ -401,21 +414,23 @@ const tablesPlugin: NextEditorPlugin<
                       getEditorContainerWidth={defaultGetEditorContainerWidth}
                     />
                   )}
-                  <FloatingContextualMenu
-                    editorView={editorView}
-                    mountPoint={popupsMountPoint}
-                    boundariesElement={popupsBoundariesElement}
-                    targetCellPosition={targetCellPosition}
-                    isOpen={Boolean(isContextualMenuOpen)}
-                    pluginConfig={pluginConfig}
-                    editorAnalyticsAPI={editorAnalyticsAPI}
-                    getEditorContainerWidth={defaultGetEditorContainerWidth}
-                    getEditorFeatureFlags={
-                      options?.getEditorFeatureFlags ||
-                      defaultGetEditorFeatureFlags
-                    }
-                  />
-                  {allowControls && (
+                  {options?.allowContextualMenu && (
+                    <FloatingContextualMenu
+                      editorView={editorView}
+                      mountPoint={popupsMountPoint}
+                      boundariesElement={popupsBoundariesElement}
+                      targetCellPosition={targetCellPosition}
+                      isOpen={Boolean(isContextualMenuOpen) && !isResizing}
+                      pluginConfig={pluginConfig}
+                      editorAnalyticsAPI={editorAnalyticsAPI}
+                      getEditorContainerWidth={defaultGetEditorContainerWidth}
+                      getEditorFeatureFlags={
+                        options?.getEditorFeatureFlags ||
+                        defaultGetEditorFeatureFlags
+                      }
+                    />
+                  )}
+                  {allowControls && !isResizing && (
                     <FloatingDeleteButton
                       editorView={editorView}
                       selection={editorView.state.selection}

package/src/plugins/table/nodeviews/TableComponent.tsx

@@ -34,7 +34,7 @@ import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import {
   TableCssClassName as ClassName,
-  ColumnResizingPluginState,
+  PluginInjectionAPI,
   ShadowEvent,
 } from '../types';
 import type { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
@@ -72,8 +72,9 @@ export interface ComponentProps {
   isMediaFullscreen?: boolean;
   tableActive: boolean;
   ordering: TableColumnOrdering;
-  tableResizingPluginState?: ColumnResizingPluginState;
+  isResizing?: boolean;
   getEditorFeatureFlags: GetEditorFeatureFlags;
+  pluginInjectionApi?: PluginInjectionAPI;
 }
 
 interface TableState {
@@ -317,7 +318,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     const {
       view,
       getNode,
-      tableResizingPluginState,
+      isResizing,
       allowControls = true,
       isHeaderRowEnabled,
       ordering,
@@ -326,6 +327,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       containerWidth,
       options,
       getPos,
+      pluginInjectionApi,
     } = this.props;
     const { isLoading, showBeforeShadow, showAfterShadow } = this.state;
     const node = getNode();
@@ -340,8 +342,6 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     } = this.props.getEditorFeatureFlags();
 
     const tableRef = this.table || undefined;
-    const isResizing =
-      !!tableResizingPluginState && !!tableResizingPluginState.dragging;
     const headerRow = tableRef
       ? tableRef.querySelector<HTMLTableRowElement>('tr[data-header-row]')
       : undefined;
@@ -406,6 +406,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         isFullWidthModeEnabled={options?.isFullWidthModeEnabled}
         isBreakoutEnabled={options?.isBreakoutEnabled}
         isNested={isNested}
+        pluginInjectionApi={pluginInjectionApi}
       >
         {stickyHeadersOptimization && (
           <div