@atlaskit/editor-plugin-table 2.3.0 → 2.4.0

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

@@ -1,20 +1,22 @@
 import React, { CSSProperties } from 'react';
+
 import classnames from 'classnames';
+import memoizeOne from 'memoize-one';
 import { Node as PmNode } from 'prosemirror-model';
-import { isTableSelected } from '@atlaskit/editor-tables/utils';
 import { EditorView } from 'prosemirror-view';
 import rafSchedule from 'raf-schd';
-import { findTable } from '@atlaskit/editor-tables/utils';
 
+import type { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
 import { tableMarginSides } from '@atlaskit/editor-common/styles';
+import type {
+  EditorContainerWidth,
+  GetEditorFeatureFlags,
+} from '@atlaskit/editor-common/types';
 import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
-import {
-  akEditorMobileBreakoutPoint,
-  akEditorTableToolbarSize as tableToolbarSize,
-} from '@atlaskit/editor-shared-styles';
-
-import type { EditorContainerWidth } from '@atlaskit/editor-common/types';
-import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
+import { akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
+import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 
 import { autoSizeTable, clearHoverSelection } from '../commands';
 import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -30,29 +32,23 @@ import {
   scaleTable,
 } from '../pm-plugins/table-resizing/utils';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
-
-import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import {
   TableCssClassName as ClassName,
   PluginInjectionAPI,
   ShadowEvent,
 } from '../types';
-import type { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
 import TableFloatingControls from '../ui/TableFloatingControls';
 import {
   containsHeaderRow,
+  isTableNested,
   tablesHaveDifferentColumnWidths,
   tablesHaveDifferentNoOfColumns,
-  isTableNested,
 } from '../utils';
 
-import type { TableOptions } from './types';
-import { updateOverflowShadows } from './update-overflow-shadows';
-import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
-import memoizeOne from 'memoize-one';
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
 import { TableContainer } from './TableContainer';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import type { TableOptions } from './types';
+import { updateOverflowShadows } from './update-overflow-shadows';
 
 const isIE11 = browser.ie_version === 11;
 const NOOP = () => undefined;
@@ -142,7 +138,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
   }
 
   componentDidMount() {
-    const { allowColumnResizing, eventDispatcher } = this.props;
+    const { allowColumnResizing, eventDispatcher, options } = this.props;
     if (allowColumnResizing && this.wrapper && !isIE11) {
       this.wrapper.addEventListener('scroll', this.handleScrollDebounced);
     }
@@ -152,7 +148,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
        * We no longer use `containerWidth` as a variable to determine an update for table resizing (avoids unnecessary updates).
        * Instead we use the resize event to only trigger updates when necessary.
        */
-      if (!getBooleanFF('platform.editor.custom-table-width')) {
+      if (!options?.isTableResizingEnabled) {
         window.addEventListener('resize', this.handleWindowResizeDebounced);
       }
       this.handleTableResizingDebounced();
@@ -170,6 +166,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
   }
 
   componentWillUnmount() {
+    const { allowColumnResizing, eventDispatcher, options } = this.props;
     if (this.wrapper && !isIE11) {
       this.wrapper.removeEventListener('scroll', this.handleScrollDebounced);
     }
@@ -178,14 +175,11 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     this.scaleTableDebounced.cancel();
     this.handleTableResizingDebounced.cancel();
     this.handleAutoSizeDebounced.cancel();
-    if (!getBooleanFF('platform.editor.custom-table-width')) {
+    if (!options?.isTableResizingEnabled) {
       this.handleWindowResizeDebounced.cancel();
     }
 
-    if (
-      !getBooleanFF('platform.editor.custom-table-width') &&
-      this.props.allowColumnResizing
-    ) {
+    if (!options?.isTableResizingEnabled && allowColumnResizing) {
       window.removeEventListener('resize', this.handleWindowResizeDebounced);
     }
 
@@ -193,7 +187,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       this.overflowShadowsObserver.dispose();
     }
 
-    this.props.eventDispatcher.off(
+    eventDispatcher.off(
       (stickyHeadersPluginKey as any).key,
       this.onStickyState,
     );
@@ -396,17 +390,16 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
           [ClassName.TABLE_STICKY]: this.state.stickyHeader && hasHeaderRow,
           [ClassName.HOVERED_DELETE_BUTTON]: isInDanger,
           [ClassName.TABLE_SELECTED]: isTableSelected(view.state.selection),
-          'less-padding': containerWidth.width < akEditorMobileBreakoutPoint,
         })}
         editorView={view}
         getPos={getPos}
         node={node}
         tableRef={tableRef!}
         containerWidth={containerWidth}
-        isFullWidthModeEnabled={options?.isFullWidthModeEnabled}
         isBreakoutEnabled={options?.isBreakoutEnabled}
         isNested={isNested}
         pluginInjectionApi={pluginInjectionApi}
+        isTableResizingEnabled={options?.isTableResizingEnabled}
       >
         {stickyHeadersOptimization && (
           <div
@@ -562,8 +555,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       noOfColumnsChanged
     ) {
       const shouldScaleTable =
-        (!getBooleanFF('platform.editor.custom-table-width') ||
-          (getBooleanFF('platform.editor.custom-table-width') && isNested)) &&
+        (!options?.isTableResizingEnabled ||
+          (options?.isTableResizingEnabled && isNested)) &&
         !hasNumberedColumnChanged &&
         !noOfColumnsChanged;
 

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

@@ -1,21 +1,24 @@
 import React, {
+  forwardRef,
   PropsWithChildren,
   useCallback,
   useRef,
-  forwardRef,
 } from 'react';
+
+import classNames from 'classnames';
 import { Node as PMNode } from 'prosemirror-model';
 import { EditorView } from 'prosemirror-view';
 
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
-import { EditorContainerWidth } from '@atlaskit/editor-common/types';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
+import { EditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { GuidelineConfig } from '@atlaskit/editor-plugin-guideline';
+import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 
-import { PluginInjectionAPI, TableCssClassName as ClassName } from '../types';
-import { TableResizer } from './TableResizer';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
+import { TableCssClassName as ClassName, PluginInjectionAPI } from '../types';
+
+import { TableResizer } from './TableResizer';
 
 const getMarginLeft = (lineLength: number, tableWidth: number | 'inherit') => {
   let marginLeft;
@@ -80,12 +83,11 @@ export const ResizableTableContainer = ({
   pluginInjectionApi,
 }: PropsWithChildren<ResizableTableContainerProps>) => {
   const containerRef = useRef<HTMLDivElement | null>(null);
-  const innerContainerRef = useRef<HTMLDivElement | null>(null);
   const marginLeftRef = useRef<number | undefined>(0);
 
   const updateWidth = useCallback(
     (width: number) => {
-      if (!containerRef.current || !innerContainerRef.current) {
+      if (!containerRef.current) {
         return;
       }
 
@@ -140,11 +142,7 @@ export const ResizableTableContainer = ({
         tableRef={tableRef}
         displayGuideline={displayGuideline}
       >
-        <InnerContainer
-          ref={innerContainerRef}
-          className={className}
-          node={node}
-        >
+        <InnerContainer className={className} node={node}>
           {children}
         </InnerContainer>
       </TableResizer>
@@ -156,10 +154,7 @@ type TableContainerProps = {
   node: PMNode;
   className: string;
   containerWidth: EditorContainerWidth;
-  // TODO: passing through both isFullWidthModeEnabled and isBreakoutEnabled to support custom table widths and
-  //  exiting breakout behaviour. In the future these values will be removed and replaced
-  // with a single table plugin option - requires changes to editor-core
-  isFullWidthModeEnabled: boolean | undefined;
+  isTableResizingEnabled: boolean | undefined;
   isBreakoutEnabled: boolean | undefined;
   editorView: EditorView;
   getPos: () => number | undefined;
@@ -173,7 +168,7 @@ export const TableContainer = ({
   node,
   className,
   containerWidth: { lineLength, width: editorWidth },
-  isFullWidthModeEnabled,
+  isTableResizingEnabled,
   isBreakoutEnabled,
   editorView,
   getPos,
@@ -181,11 +176,7 @@ export const TableContainer = ({
   isNested,
   pluginInjectionApi,
 }: PropsWithChildren<TableContainerProps>) => {
-  if (
-    (isFullWidthModeEnabled || isBreakoutEnabled) &&
-    getBooleanFF('platform.editor.custom-table-width') &&
-    !isNested
-  ) {
+  if (isTableResizingEnabled && !isNested) {
     return (
       <ResizableTableContainer
         className={className}
@@ -209,7 +200,9 @@ export const TableContainer = ({
   return (
     <InnerContainer
       node={node}
-      className={className}
+      className={classNames(className, {
+        'less-padding': editorWidth < akEditorMobileBreakoutPoint,
+      })}
       style={{
         width: tableWidth,
         marginLeft: getMarginLeft(lineLength!, tableWidth),

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

@@ -1,32 +1,33 @@
 import React, {
   PropsWithChildren,
   useCallback,
-  useRef,
   useMemo,
+  useRef,
   useState,
 } from 'react';
-import { EditorView } from 'prosemirror-view';
+
 import { Node as PMNode } from 'prosemirror-model';
+import { EditorView } from 'prosemirror-view';
 import rafSchd from 'raf-schd';
 
+import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import {
   HandleHeightSizeType,
   HandleResize,
   ResizerNext,
 } from '@atlaskit/editor-common/resizer';
-import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import type { GuidelineConfig } from '@atlaskit/editor-plugin-guideline';
 
 import {
-  scaleTable,
-  previewScaleTable,
-  getColgroupChildrenLength,
   COLUMN_MIN_WIDTH,
+  getColgroupChildrenLength,
+  previewScaleTable,
+  scaleTable,
 } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
+import { TABLE_HIGHLIGHT_GAP, TABLE_SNAP_GAP } from '../ui/consts';
 import { defaultGuidelines, defaultGuidelineWidths } from '../utils/guidelines';
 import { findClosestSnap } from '../utils/snapping';
-import { TABLE_SNAP_GAP, TABLE_HIGHLIGHT_GAP } from '../ui/consts';
 
 interface TableResizerProps {
   width: number;

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

@@ -1,50 +1,52 @@
 import React from 'react';
+
 import {
   DOMOutputSpec,
   DOMSerializer,
   Node as PmNode,
 } from 'prosemirror-model';
+import { EditorState, PluginKey } from 'prosemirror-state';
 import { EditorView, NodeView } from 'prosemirror-view';
-import { PluginKey, EditorState } from 'prosemirror-state';
-import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
-import type {
-  getPosHandler,
-  getPosHandlerNode,
-} from '@atlaskit/editor-common/types';
 
-import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+import type { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
+import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import type {
   GetEditorContainerWidth,
   GetEditorFeatureFlags,
+  getPosHandler,
+  getPosHandlerNode,
 } from '@atlaskit/editor-common/types';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
 
 import { pluginConfig as getPluginConfig } from '../create-plugin-config';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey } from '../pm-plugins/plugin-key';
 import { pluginKey as tableResizingPluginKey } from '../pm-plugins/table-resizing';
-import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { generateColgroup } from '../pm-plugins/table-resizing/utils';
-import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
+import { PluginInjectionAPI } from '../types';
+import { isTableNested } from '../utils';
+
 import TableComponent from './TableComponent';
 import { Props, TableOptions } from './types';
-import type { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
-import { isTableNested } from '../utils';
-import { PluginInjectionAPI } from '../types';
 
 type ForwardRef = (node: HTMLElement | null) => void;
 
 const tableAttributes = (
   node: PmNode,
+  options: Props['options'],
   state: EditorState,
   pos: number | undefined,
 ) => {
+  // provide a width for tables when custom table width is supported
+  // this is to ensure 'responsive' tables (colgroup widths are undefined) become fixed to
+  // support screen size adjustments
   const shouldHaveInlineWidth =
-    getBooleanFF('platform.editor.custom-table-width') &&
-    !isTableNested(state, pos);
+    options?.isTableResizingEnabled && !isTableNested(state, pos);
 
   let style = shouldHaveInlineWidth
     ? `width: ${getTableContainerWidth(node)}px`
@@ -69,7 +71,7 @@ const toDOM = (node: PmNode, props: Props) => {
 
   return [
     'table',
-    tableAttributes(node, props.view.state, props.getPos()),
+    tableAttributes(node, props.options, props.view.state, props.getPos()),
     colgroup,
     ['tbody', 0],
   ] as DOMOutputSpec;
@@ -122,7 +124,12 @@ export default class TableView extends ReactNodeView<Props> {
       return;
     }
 
-    const attrs = tableAttributes(node, this.view.state, this.getPos());
+    const attrs = tableAttributes(
+      node,
+      (this.reactComponentProps as Props).options,
+      this.view.state,
+      this.getPos(),
+    );
     (Object.keys(attrs) as Array<keyof typeof attrs>).forEach((attr) => {
       this.table!.setAttribute(attr, attrs[attr]);
     });

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

@@ -1,15 +1,17 @@
-import uuid from 'uuid';
-import { Node, DOMSerializer } from 'prosemirror-model';
+import { DOMSerializer, Node } from 'prosemirror-model';
 import { EditorView, NodeView } from 'prosemirror-view';
-import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
-import type { getPosHandler } from '@atlaskit/editor-common/types';
+import uuid from 'uuid';
 
 import {
-  getCellDomAttrs,
-  getCellAttrs,
   CellDomAttrs,
+  getCellAttrs,
+  getCellDomAttrs,
 } from '@atlaskit/adf-schema';
-import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type {
+  GetEditorFeatureFlags,
+  getPosHandler,
+} from '@atlaskit/editor-common/types';
 
 const DEFAULT_COL_SPAN = 1;
 const DEFAULT_ROW_SPAN = 1;

package/src/plugins/table/nodeviews/types.ts

@@ -1,18 +1,20 @@
 import { Node as PmNode } from 'prosemirror-model';
 import { EditorView } from 'prosemirror-view';
 
+import { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
 import type {
   GetEditorContainerWidth,
   GetEditorFeatureFlags,
 } from '@atlaskit/editor-common/types';
-import { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
-import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
+
 import type { PluginInjectionAPI } from '../types';
 
 export type TableOptions = {
   isBreakoutEnabled?: boolean;
   isFullWidthModeEnabled?: boolean;
   wasFullWidthModeEnabled?: boolean;
+  isTableResizingEnabled?: boolean;
 };
 
 export interface Props {

package/src/plugins/table/nodeviews/update-overflow-shadows.ts

@@ -1,5 +1,7 @@
-import { TableCssClassName as ClassName } from '../types';
 import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+
+import { TableCssClassName as ClassName } from '../types';
+
 export const updateShadowListForStickyStyles = (
   heightStyle: string,
 

package/src/plugins/table/pm-plugins/decorations/plugin.ts

@@ -1,14 +1,15 @@
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import {
   EditorState,
   PluginKey,
-  Transaction,
   // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
   ReadonlyTransaction,
+  Transaction,
 } from 'prosemirror-state';
-import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { DecorationSet } from 'prosemirror-view';
 
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+
 import { pluginKey as tablePluginKey } from '../plugin-key';
 import { pluginKey as tableWidthPluginKey } from '../table-width';
 

package/src/plugins/table/pm-plugins/decorations/utils/column-controls.ts

@@ -1,8 +1,9 @@
 // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
 import { ReadonlyTransaction, Transaction } from 'prosemirror-state';
+import { DecorationSet } from 'prosemirror-view';
+
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { findTable } from '@atlaskit/editor-tables/utils';
-import { DecorationSet } from 'prosemirror-view';
 
 import { TableDecorations } from '../../../types';
 import {

package/src/plugins/table/pm-plugins/keymap.ts

@@ -1,31 +1,31 @@
-import { keymap } from 'prosemirror-keymap';
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { chainCommands } from 'prosemirror-commands';
+import { keymap } from 'prosemirror-keymap';
 
-import * as keymaps from '@atlaskit/editor-common/keymaps';
 import {
   ACTION,
   ACTION_SUBJECT,
   ACTION_SUBJECT_ID,
+  EditorAnalyticsAPI,
   EVENT_TYPE,
   INPUT_METHOD,
 } from '@atlaskit/editor-common/analytics';
+import * as keymaps from '@atlaskit/editor-common/keymaps';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+
 import {
-  triggerUnlessTableHeader,
   createTable,
   goToNextCell,
   moveCursorBackward,
+  triggerUnlessTableHeader,
 } from '../commands';
 import {
   addRowAroundSelection,
-  emptyMultipleCellsWithAnalytics,
   deleteTableIfSelectedWithAnalytics,
+  emptyMultipleCellsWithAnalytics,
 } from '../commands-with-analytics';
 import { addColumnAfter, addColumnBefore } from '../commands/insert';
-
 import { withEditorAnalyticsAPI } from '../utils/analytics';
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
-import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 
 const createTableWithAnalytics = (
   editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,

package/src/plugins/table/pm-plugins/main.ts

@@ -1,27 +1,51 @@
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { Node as ProseMirrorNode } from 'prosemirror-model';
 import { EditorState, TextSelection, Transaction } from 'prosemirror-state';
 import {
   findParentDomRefOfType,
   findParentNodeOfType,
 } from 'prosemirror-utils';
-import { Node as ProseMirrorNode } from 'prosemirror-model';
-import { findTable } from '@atlaskit/editor-tables/utils';
 import { EditorView } from 'prosemirror-view';
-import { browser } from '@atlaskit/editor-common/utils';
 
+import {
+  ACTION,
+  ACTION_SUBJECT,
+  EVENT_TYPE,
+  INPUT_METHOD,
+} from '@atlaskit/editor-common/analytics';
+import type {
+  DispatchAnalyticsEvent,
+  EditorAnalyticsAPI,
+} from '@atlaskit/editor-common/analytics';
+import { insideTable } from '@atlaskit/editor-common/core-utils';
 import type {
   Dispatch,
   EventDispatcher,
 } from '@atlaskit/editor-common/event-dispatcher';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
-
-import { closestElement } from '@atlaskit/editor-common/utils';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import {
+  transformSliceToRemoveOpenBodiedExtension,
+  transformSliceToRemoveOpenExpand,
+  transformSliceToRemoveOpenLayoutNodes,
+} from '@atlaskit/editor-common/transforms';
+import type {
+  GetEditorContainerWidth,
+  GetEditorFeatureFlags,
+  getPosHandler,
+} from '@atlaskit/editor-common/types';
+import { browser, closestElement } from '@atlaskit/editor-common/utils';
+import { findTable } from '@atlaskit/editor-tables/utils';
 
 import {
   addBoldInEmptyHeaderCells,
   clearHoverSelection,
   setTableRef,
 } from '../commands';
+import {
+  transformSliceRemoveCellBackgroundColor,
+  transformSliceToAddTableHeaders,
+  transformSliceToRemoveColumnsWidths,
+} from '../commands/misc';
 import {
   handleBlur,
   handleClick,
@@ -36,13 +60,15 @@ import {
   whenTableInFocus,
 } from '../event-handlers';
 import { createTableView } from '../nodeviews/table';
+import TableCellNodeView from '../nodeviews/tableCell';
 import { pluginKey as decorationsPluginKey } from '../pm-plugins/decorations/plugin';
 import { fixTables, replaceSelectedTable } from '../transforms';
 import {
   TableCssClassName as ClassName,
-  PluginConfig,
   ElementContentRects,
   InvalidNodeAttr,
+  PluginConfig,
+  PluginInjectionAPI,
 } from '../types';
 import {
   findControlsHoverDecoration,
@@ -51,40 +77,16 @@ import {
   transformSliceToRemoveOpenTable,
   updateResizeHandles,
 } from '../utils';
-import {
-  ACTION,
-  ACTION_SUBJECT,
-  EVENT_TYPE,
-  INPUT_METHOD,
-} from '@atlaskit/editor-common/analytics';
-import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import { isHeaderRowRequired } from '../utils/paste';
 
 import { defaultTableSelection } from './default-table-selection';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
-import TableCellNodeView from '../nodeviews/tableCell';
-
-import {
-  transformSliceRemoveCellBackgroundColor,
-  transformSliceToRemoveColumnsWidths,
-  transformSliceToAddTableHeaders,
-} from '../commands/misc';
-import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
-import { transformSliceToRemoveOpenLayoutNodes } from '@atlaskit/editor-common/transforms';
-import { transformSliceToRemoveOpenExpand } from '@atlaskit/editor-common/transforms';
-import { transformSliceToRemoveOpenBodiedExtension } from '@atlaskit/editor-common/transforms';
-import { insideTable } from '@atlaskit/editor-common/core-utils';
-import { isHeaderRowRequired } from '../utils/paste';
-import type {
-  GetEditorContainerWidth,
-  GetEditorFeatureFlags,
-} from '@atlaskit/editor-common/types';
-import type { getPosHandler } from '@atlaskit/editor-common/types';
-import type { PluginInjectionAPI } from '../types';
 
 let isBreakoutEnabled: boolean | undefined;
 let isFullWidthModeEnabled: boolean | undefined;
 let wasFullWidthModeEnabled: boolean | undefined;
+let isTableResizingEnabled: boolean | undefined;
 
 export const createPlugin = (
   dispatchAnalyticsEvent: DispatchAnalyticsEvent,
@@ -96,6 +98,7 @@ export const createPlugin = (
   getEditorFeatureFlags: GetEditorFeatureFlags,
   breakoutEnabled?: boolean,
   fullWidthModeEnabled?: boolean,
+  tableResizingEnabled?: boolean,
   previousFullWidthModeEnabled?: boolean,
   editorAnalyticsAPI?: EditorAnalyticsAPI,
   pluginInjectionApi?: PluginInjectionAPI,
@@ -103,6 +106,7 @@ export const createPlugin = (
   isBreakoutEnabled = breakoutEnabled;
   isFullWidthModeEnabled = fullWidthModeEnabled;
   wasFullWidthModeEnabled = previousFullWidthModeEnabled;
+  isTableResizingEnabled = tableResizingEnabled;
 
   const state = createPluginState(dispatch, {
     pluginConfig,
@@ -373,6 +377,7 @@ export const createPlugin = (
               isBreakoutEnabled,
               isFullWidthModeEnabled,
               wasFullWidthModeEnabled,
+              isTableResizingEnabled,
             },
             getEditorContainerWidth,
             getEditorFeatureFlags,

package/src/plugins/table/pm-plugins/plugin-factory.ts

@@ -1,6 +1,8 @@
 import { pluginFactory } from '@atlaskit/editor-common/utils';
+
 import { handleDocOrSelectionChanged } from '../handlers';
 import reducer from '../reducer';
+
 import { pluginKey } from './plugin-key';
 
 export const { createPluginState, createCommand, getPluginState } =

package/src/plugins/table/pm-plugins/plugin-key.ts

@@ -1,4 +1,5 @@
 import { PluginKey } from 'prosemirror-state';
+
 import { TablePluginState } from '../types';
 
 export const pluginKey = new PluginKey<TablePluginState>('tablePlugin');