@atlaskit/editor-plugin-table 7.4.9 → 7.5.1

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

@@ -24,8 +24,9 @@ type DragMenuProps = {
     mountPoint?: HTMLElement;
     boundariesElement?: HTMLElement;
     scrollableElement?: HTMLElement;
+    tablePreserveWidth?: boolean;
 };
-export declare const DragMenu: React.MemoExoticComponent<({ direction, index, target, isOpen, editorView, tableNode, targetCellPosition, getEditorContainerWidth, editorAnalyticsAPI, pluginConfig, intl: { formatMessage }, fitHeight, fitWidth, mountPoint, scrollableElement, boundariesElement, }: DragMenuProps & WrappedComponentProps) => jsx.JSX.Element | null>;
+export declare const DragMenu: React.MemoExoticComponent<({ direction, index, target, isOpen, editorView, tableNode, targetCellPosition, getEditorContainerWidth, editorAnalyticsAPI, pluginConfig, intl: { formatMessage }, fitHeight, fitWidth, mountPoint, scrollableElement, boundariesElement, tablePreserveWidth, }: DragMenuProps & WrappedComponentProps) => jsx.JSX.Element | null>;
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<DragMenuProps & WrappedComponentProps<"intl">>> & {
     WrappedComponent: React.ComponentType<DragMenuProps & WrappedComponentProps<"intl">>;
 };

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type { GetEditorContainerWidth, GetEditorFeatureFlags } 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';
@@ -20,9 +20,10 @@ export interface Props {
     editorAnalyticsAPI?: EditorAnalyticsAPI;
     stickyHeaders?: RowStickyState;
     pluginConfig?: PluginConfig;
+    getEditorFeatureFlags: GetEditorFeatureFlags;
 }
 declare const FloatingDragMenu: {
-    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, editorAnalyticsAPI, stickyHeaders, pluginConfig, }: Props): JSX.Element | null;
+    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, editorAnalyticsAPI, stickyHeaders, pluginConfig, getEditorFeatureFlags, }: Props): JSX.Element | null;
     displayName: string;
 };
 export default FloatingDragMenu;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import type { DispatchAnalyticsEvent, EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export interface Props {
@@ -20,6 +20,7 @@ export interface Props {
     hasStickyHeaders?: boolean;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
     editorAnalyticsAPI?: EditorAnalyticsAPI;
+    getEditorFeatureFlags?: GetEditorFeatureFlags;
 }
 export declare class FloatingInsertButton extends React.Component<Props & WrappedComponentProps, any> {
     static displayName: string;

package/dist/types-ts4.5/utils/drag-menu.d.ts

@@ -13,4 +13,4 @@ export interface DragMenuConfig extends DropdownOptionT<Command> {
     icon?: React.ComponentType<IconProps>;
     keymap?: string;
 }
-export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, hasMergedCellsInTable: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI, isHeaderRowRequired?: boolean) => DragMenuConfig[];
+export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, hasMergedCellsInTable: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI, isHeaderRowRequired?: boolean, tablePreserveWidth?: boolean) => DragMenuConfig[];

package/docs/0-intro.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { AtlassianInternalWarning, code, md } from '@atlaskit/docs';
-import { createEditorUseOnlyNotice } from '@atlaskit/editor-core/docs/editor-use-only';
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+import { createEditorUseOnlyNotice } from '@atlaskit/editor-common/doc-utils';
 import { token } from '@atlaskit/tokens';
 
 export default md`
@@ -23,7 +24,7 @@ ${createEditorUseOnlyNotice('Editor Plugin Table', [
 ---
 
 The \`dependencies\`, \`configuration\`, \`state\`, \`actions\`, and \`commands\` of the plugin are defined
-below:  
+below:
 
 ${code`
 type TablePlugin = NextEditorPlugin<

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.4.9",
+  "version": "7.5.1",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -145,4 +145,4 @@
       "type": "boolean"
     }
   }
-}
+}

package/src/commands/column-resize.ts

@@ -228,6 +228,7 @@ export const changeColumnWidthByStep =
   (
     stepSize: number,
     getEditorContainerWidth: GetEditorContainerWidth,
+    tablePreserveWidth = false,
   ): Command =>
   (state, dispatch, view) => {
     let customTr = state.tr;
@@ -289,6 +290,7 @@ export const changeColumnWidthByStep =
       tableRef: dom,
       start: tableStartPosition,
       domAtPos,
+      tablePreserveWidth,
     });
 
     updateControls()(state);
@@ -307,6 +309,7 @@ export const changeColumnWidthByStep =
       stepSize,
       dom,
       resizingSelectedColumns ? selectedColumns : undefined,
+      tablePreserveWidth,
     );
 
     customTr = updateColumnWidths(

package/src/commands/delete.ts

@@ -5,12 +5,13 @@ import { deleteColumns } from '../transforms/delete-columns';
 import { getAllowAddColumnCustomStep } from '../utils/get-allow-add-column-custom-step';
 
 export const deleteColumnsCommand =
-  (rect: Rect): Command =>
+  (rect: Rect, tablePreserveWidth = false): Command =>
   (state, dispatch, view) => {
     const tr = deleteColumns(
       rect,
       getAllowAddColumnCustomStep(state),
       view,
+      tablePreserveWidth,
     )(state.tr);
     if (dispatch) {
       dispatch(tr);

package/src/commands/insert.ts

@@ -50,7 +50,10 @@ function addColumnAtCustomStep(column: number) {
   };
 }
 
-export function addColumnAt(getEditorContainerWidth: GetEditorContainerWidth) {
+export function addColumnAt(
+  getEditorContainerWidth: GetEditorContainerWidth,
+  tablePreserveWidth = false,
+) {
   return (
     column: number,
     allowAddColumnCustomStep: boolean = false,
@@ -66,7 +69,7 @@ export function addColumnAt(getEditorContainerWidth: GetEditorContainerWidth) {
       const table = findTable(updatedTr.selection);
       if (table) {
         // [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
-        updatedTr = rescaleColumns()(table, view)(updatedTr);
+        updatedTr = rescaleColumns(tablePreserveWidth)(table, view)(updatedTr);
       }
 
       if (
@@ -91,7 +94,10 @@ export function addColumnAt(getEditorContainerWidth: GetEditorContainerWidth) {
 // :: (EditorState, dispatch: ?(tr: Transaction)) → bool
 // Command to add a column before the column with the selection.
 export const addColumnBefore =
-  (getEditorContainerWidth: GetEditorContainerWidth): Command =>
+  (
+    getEditorContainerWidth: GetEditorContainerWidth,
+    tablePreserveWidth = false,
+  ): Command =>
   (state, dispatch, view) => {
     const table = findTable(state.selection);
     if (!table) {
@@ -100,7 +106,7 @@ export const addColumnBefore =
     if (dispatch) {
       let rect = selectedRect(state);
       dispatch(
-        addColumnAt(getEditorContainerWidth)(
+        addColumnAt(getEditorContainerWidth, tablePreserveWidth)(
           rect.left,
           getAllowAddColumnCustomStep(state),
           view,
@@ -133,10 +139,13 @@ export const addColumnAfter =
   };
 
 export const insertColumn =
-  (getEditorContainerWidth: GetEditorContainerWidth) =>
+  (
+    getEditorContainerWidth: GetEditorContainerWidth,
+    tablePreserveWidth = false,
+  ) =>
   (column: number): Command =>
   (state, dispatch, view) => {
-    let tr = addColumnAt(getEditorContainerWidth)(
+    let tr = addColumnAt(getEditorContainerWidth, tablePreserveWidth)(
       column,
       getAllowAddColumnCustomStep(state),
       view,

package/src/commands-with-analytics.ts

@@ -255,6 +255,7 @@ export const insertColumnWithAnalytics =
   (
     getEditorContainerWidth: GetEditorContainerWidth,
     editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+    tablePreserveWidth = false,
   ) =>
   (
     inputMethod:
@@ -281,7 +282,9 @@ export const insertColumnWithAnalytics =
         },
         eventType: EVENT_TYPE.TRACK,
       };
-    })(editorAnalyticsAPI)(insertColumn(getEditorContainerWidth)(position));
+    })(editorAnalyticsAPI)(
+      insertColumn(getEditorContainerWidth, tablePreserveWidth)(position),
+    );
 
 export const deleteRowsWithAnalytics =
   (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>
@@ -320,7 +323,10 @@ export const deleteRowsWithAnalytics =
     });
 
 export const deleteColumnsWithAnalytics =
-  (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>
+  (
+    editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+    tablePreserveWidth = false,
+  ) =>
   (
     inputMethod:
       | INPUT_METHOD.CONTEXT_MENU
@@ -347,7 +353,7 @@ export const deleteColumnsWithAnalytics =
         },
         eventType: EVENT_TYPE.TRACK,
       };
-    })(editorAnalyticsAPI)(deleteColumnsCommand(rect));
+    })(editorAnalyticsAPI)(deleteColumnsCommand(rect, tablePreserveWidth));
 
 export const deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut =
   (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null): Command =>

package/src/event-handlers.ts

@@ -538,6 +538,7 @@ export const handleCut = (
   newState: EditorState,
   editorAnalyticsAPI?: EditorAnalyticsAPI,
   editorView?: EditorView,
+  tablePreserveWidth = false,
 ): Transaction => {
   const oldSelection = oldState.tr.selection;
   let { tr } = newState;
@@ -594,6 +595,7 @@ export const handleCut = (
               rect,
               getAllowAddColumnCustomStep(oldState),
               editorView,
+              tablePreserveWidth,
             )(tr);
           }
         }

package/src/nodeviews/TableComponent.tsx

@@ -22,7 +22,11 @@ import type {
   EditorContainerWidth,
   GetEditorFeatureFlags,
 } from '@atlaskit/editor-common/types';
-import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
+import {
+  browser,
+  calcTableColumnWidths,
+  isValidPosition,
+} from '@atlaskit/editor-common/utils';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import {
@@ -47,9 +51,12 @@ import {
 } from '../pm-plugins/sticky-headers';
 import { META_KEYS } from '../pm-plugins/table-analytics';
 import {
+  COLUMN_MIN_WIDTH,
   getLayoutSize,
-  insertColgroupFromNode as recreateResizeColsByNode,
+  getResizeState,
+  insertColgroupFromNode,
   scaleTable,
+  updateColgroup,
 } from '../pm-plugins/table-resizing/utils';
 import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
@@ -101,6 +108,7 @@ export interface ComponentProps {
   getEditorFeatureFlags: GetEditorFeatureFlags;
   dispatchAnalyticsEvent: DispatchAnalyticsEvent;
   pluginInjectionApi?: PluginInjectionAPI;
+  tableRef?: HTMLElement | undefined;
 }
 
 interface TableState {
@@ -134,6 +142,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
   private dragAndDropCleanupFn?: CleanupFn;
 
+  private tableColumnWidths?: number[];
+
   constructor(props: ComponentProps) {
     super(props);
     const { options, containerWidth, getNode } = props;
@@ -278,6 +288,65 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     }
   }
 
+  handleColgroupUpdates() {
+    const { getNode, containerWidth, isResizing, view, getPos, tableRef } =
+      this.props;
+
+    if (!tableRef) {
+      return;
+    }
+
+    const TABLE_MARGIN = 76;
+
+    // Remove any widths styles after resizing preview is completed
+    tableRef.style.width = '';
+
+    const tableRenderWidth = containerWidth.width - TABLE_MARGIN;
+    const tableNode = getNode();
+    const start = getPos() || 0;
+    const depth = view.state.doc.resolve(start).depth;
+
+    // TODO - remove this when support is added for nested tables
+    if (depth !== 0) {
+      return;
+    }
+
+    const { width: tableNodeWidth } = tableNode.attrs;
+    const tableColumnWidths = calcTableColumnWidths(tableNode);
+    const shouldTableScale = tableRenderWidth < tableNodeWidth;
+    let isTableColumnWidthsSame = false;
+    if (this.tableColumnWidths) {
+      isTableColumnWidthsSame = tableColumnWidths?.every(
+        (width, index) => width === this.tableColumnWidths![index],
+      );
+    }
+    const { width: containerWidthValue } = containerWidth;
+    const isWidthChanged = this.containerWidth?.width !== containerWidthValue;
+
+    if (
+      shouldTableScale &&
+      !isResizing &&
+      (!isTableColumnWidthsSame || isWidthChanged)
+    ) {
+      const resizeState = getResizeState({
+        minWidth: COLUMN_MIN_WIDTH,
+        maxSize: tableRenderWidth,
+        table: tableNode,
+        tableRef: this.table as HTMLTableElement,
+        start,
+        domAtPos: view.domAtPos,
+        tablePreserveWidth: true,
+      });
+
+      requestAnimationFrame(() => {
+        updateColgroup(resizeState, this.table!, true);
+      });
+
+      this.tableColumnWidths = tableColumnWidths;
+      this.containerWidth = containerWidth;
+    }
+  }
+
   componentDidUpdate(_: any, prevState: TableState) {
     const {
       view,
@@ -286,10 +355,16 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       allowColumnResizing,
       isResizing,
       options,
+      getEditorFeatureFlags,
     } = this.props;
     const { isInDanger } = getPluginState(view.state);
+    const { tablePreserveWidth = false } = getEditorFeatureFlags();
     const table = findTable(view.state.selection);
 
+    if (tablePreserveWidth) {
+      this.handleColgroupUpdates();
+    }
+
     if (isInDanger && !table) {
       clearHoverSelection()(view.state, view.dispatch);
     }
@@ -349,7 +424,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
             isResizing);
 
         if (shouldRecreateResizeCols) {
-          recreateResizeColsByNode(this.table, currentTable);
+          insertColgroupFromNode(this.table, currentTable, tablePreserveWidth);
         }
 
         updateControls()(view.state);
@@ -535,7 +610,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
           shadowPadding +
           2;
 
-    const { stickyScrollbar } = getEditorFeatureFlags();
+    const { stickyScrollbar, tablePreserveWidth } = getEditorFeatureFlags();
 
     return (
       <TableContainer
@@ -555,6 +630,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         pluginInjectionApi={pluginInjectionApi}
         isTableResizingEnabled={options?.isTableResizingEnabled}
         isResizing={isResizing}
+        tablePreserveWidth={tablePreserveWidth}
       >
         <div
           className={ClassName.TABLE_STICKY_SENTINEL_TOP}
@@ -778,7 +854,14 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     layoutChanged: boolean;
     parentWidth?: number;
   }) => {
-    const { view, getNode, getPos, containerWidth, options } = this.props;
+    const {
+      view,
+      getNode,
+      getPos,
+      containerWidth,
+      options,
+      getEditorFeatureFlags,
+    } = this.props;
     const node = getNode();
     const { state, dispatch } = view;
     const pos = getPos();
@@ -791,6 +874,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
     this.scaleTableDebounced.cancel();
 
+    const { tablePreserveWidth = false } = getEditorFeatureFlags();
+
     const tr = scaleTable(
       this.table,
       {
@@ -803,6 +888,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         ...options,
       },
       domAtPos,
+      tablePreserveWidth,
     )(state.tr);
 
     dispatch(tr);

package/src/nodeviews/TableContainer.tsx

@@ -75,6 +75,7 @@ type ResizableTableContainerProps = {
   tableRef: HTMLTableElement;
   isResizing?: boolean;
   pluginInjectionApi?: PluginInjectionAPI;
+  tablePreserveWidth?: boolean;
 };
 
 export const ResizableTableContainer = React.memo(
@@ -88,6 +89,7 @@ export const ResizableTableContainer = React.memo(
     tableRef,
     isResizing,
     pluginInjectionApi,
+    tablePreserveWidth,
   }: PropsWithChildren<ResizableTableContainerProps>) => {
     const containerRef = useRef<HTMLDivElement | null>(null);
     const tableWidthRef = useRef<number>(akEditorDefaultLayoutWidth);
@@ -175,7 +177,7 @@ export const ResizableTableContainer = React.memo(
     );
 
     const displayGapCursor = useCallback(
-      (toggle) => {
+      (toggle: boolean) => {
         return (
           pluginInjectionApi?.core?.actions.execute(
             pluginInjectionApi?.selection?.commands.displayGapCursor(toggle),
@@ -207,6 +209,7 @@ export const ResizableTableContainer = React.memo(
       displayGuideline,
       attachAnalyticsEvent,
       displayGapCursor,
+      tablePreserveWidth,
     };
 
     if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
@@ -254,6 +257,7 @@ type TableContainerProps = {
   isNested: boolean;
   isResizing?: boolean;
   pluginInjectionApi?: PluginInjectionAPI;
+  tablePreserveWidth?: boolean;
 };
 
 export const TableContainer = ({
@@ -269,6 +273,7 @@ export const TableContainer = ({
   isNested,
   isResizing,
   pluginInjectionApi,
+  tablePreserveWidth,
 }: PropsWithChildren<TableContainerProps>) => {
   if (isTableResizingEnabled && !isNested) {
     return (
@@ -281,6 +286,7 @@ export const TableContainer = ({
         tableRef={tableRef}
         isResizing={isResizing}
         pluginInjectionApi={pluginInjectionApi}
+        tablePreserveWidth={tablePreserveWidth}
       >
         {children}
       </ResizableTableContainer>

package/src/nodeviews/TableResizer.tsx

@@ -68,6 +68,7 @@ interface TableResizerProps {
     payload: TableEventPayload,
   ) => ((tr: Transaction) => boolean) | undefined;
   displayGapCursor: (toggle: boolean) => boolean;
+  tablePreserveWidth?: boolean;
 }
 
 export interface TableResizerImprovementProps extends TableResizerProps {
@@ -162,6 +163,7 @@ export const TableResizer = ({
   displayGuideline,
   attachAnalyticsEvent,
   displayGapCursor,
+  tablePreserveWidth,
 }: PropsWithChildren<TableResizerImprovementProps>) => {
   const currentGap = useRef(0);
   // track resizing state - use ref over state to avoid re-render
@@ -288,7 +290,7 @@ export const TableResizer = ({
   ]);
 
   const handleResize = useCallback(
-    (originalState, delta) => {
+    (originalState: any, delta: any) => {
       countFrames();
       const newWidth = originalState.width + delta.width;
       let pos: number | undefined;
@@ -310,6 +312,7 @@ export const TableResizer = ({
           parentWidth: newWidth,
         },
         editorView.domAtPos.bind(editorView),
+        tablePreserveWidth,
       );
 
       updateActiveGuidelines(
@@ -334,6 +337,7 @@ export const TableResizer = ({
       updateWidth,
       updateActiveGuidelines,
       countFrames,
+      tablePreserveWidth,
     ],
   );
 
@@ -376,6 +380,7 @@ export const TableResizer = ({
             parentWidth: newWidth,
           },
           editorView.domAtPos.bind(editorView),
+          tablePreserveWidth,
         )(tr);
 
         const scaledNode = tr.doc.nodeAt(pos)!;
@@ -416,6 +421,7 @@ export const TableResizer = ({
       attachAnalyticsEvent,
       endMeasure,
       onResizeStop,
+      tablePreserveWidth,
     ],
   );
 

package/src/nodeviews/table.tsx

@@ -101,8 +101,8 @@ export default class TableView extends ReactNodeView<Props> {
   private table: HTMLElement | undefined;
   private resizeObserver?: ResizeObserver;
   eventDispatcher?: EventDispatcher;
-
   getPos: getPosHandlerNode;
+  getEditorFeatureFlags: GetEditorFeatureFlags;
 
   constructor(props: Props) {
     super(
@@ -119,6 +119,7 @@ export default class TableView extends ReactNodeView<Props> {
     );
     this.getPos = props.getPos;
     this.eventDispatcher = props.eventDispatcher;
+    this.getEditorFeatureFlags = props.getEditorFeatureFlags;
   }
 
   getContentDOM() {
@@ -130,17 +131,20 @@ export default class TableView extends ReactNodeView<Props> {
       contentDOM?: HTMLElement;
     };
 
-    const tableInlineWidth = getInlineWidth(
-      this.node,
-      this.reactComponentProps.options,
-      this.reactComponentProps.view.state,
-      this.reactComponentProps.getPos(),
-    );
-
     if (rendered.dom) {
       this.table = rendered.dom;
-      if (tableInlineWidth) {
-        handleInlineTableWidth(this.table, tableInlineWidth);
+      const { tablePreserveWidth = false } = this.getEditorFeatureFlags();
+      // Preserve Table Width cannot have inline width set on the table
+      if (!tablePreserveWidth) {
+        const tableInlineWidth = getInlineWidth(
+          this.node,
+          this.reactComponentProps.options,
+          this.reactComponentProps.view.state,
+          this.reactComponentProps.getPos(),
+        );
+        if (tableInlineWidth) {
+          handleInlineTableWidth(this.table, tableInlineWidth);
+        }
       }
     }
 
@@ -260,6 +264,7 @@ export default class TableView extends ReactNodeView<Props> {
               getEditorFeatureFlags={props.getEditorFeatureFlags}
               dispatchAnalyticsEvent={props.dispatchAnalyticsEvent}
               pluginInjectionApi={props.pluginInjectionApi}
+              tableRef={this.table}
             />
           );
         }}

package/src/plugin.tsx

@@ -261,12 +261,13 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
         {
           name: 'tableKeymap',
           plugin: () => {
-            const { dragAndDropEnabled } =
+            const { dragAndDropEnabled, getEditorFeatureFlags } =
               options || ({} as TablePluginOptions);
 
             return keymapPlugin(
               defaultGetEditorContainerWidth,
               editorAnalyticsAPI,
+              getEditorFeatureFlags,
               dragAndDropEnabled,
             );
           },
@@ -318,14 +319,17 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
         },
         {
           name: 'tableDragAndDrop',
-          plugin: ({ dispatch, eventDispatcher, dispatchAnalyticsEvent }) =>
-            options?.dragAndDropEnabled
+          plugin: ({ dispatch }) => {
+            const { getEditorFeatureFlags } =
+              options || ({} as TablePluginOptions);
+            return options?.dragAndDropEnabled
               ? createDragAndDropPlugin(
                   dispatch,
-                  eventDispatcher,
+                  getEditorFeatureFlags,
                   editorAnalyticsAPI,
                 )
-              : undefined,
+              : undefined;
+          },
         },
         {
           name: 'tableLocalId',
@@ -507,6 +511,10 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                       dispatchAnalyticsEvent={dispatchAnalyticsEvent}
                       editorAnalyticsAPI={editorAnalyticsAPI}
                       getEditorContainerWidth={defaultGetEditorContainerWidth}
+                      getEditorFeatureFlags={
+                        options?.getEditorFeatureFlags ||
+                        defaultGetEditorFeatureFlags
+                      }
                     />
                   )}
                   {options?.allowContextualMenu && (
@@ -540,6 +548,10 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                       editorAnalyticsAPI={editorAnalyticsAPI}
                       stickyHeaders={stickyHeader}
                       pluginConfig={pluginConfig}
+                      getEditorFeatureFlags={
+                        options?.getEditorFeatureFlags ||
+                        defaultGetEditorFeatureFlags
+                      }
                     />
                   )}
                   {allowControls && !isDragAndDropEnabled && !isResizing && (