@atlaskit/editor-plugin-table 7.5.4 → 7.5.5

package/src/nodeviews/TableComponent.tsx

@@ -22,11 +22,7 @@ import type {
   EditorContainerWidth,
   GetEditorFeatureFlags,
 } from '@atlaskit/editor-common/types';
-import {
-  browser,
-  calcTableColumnWidths,
-  isValidPosition,
-} from '@atlaskit/editor-common/utils';
+import { browser, 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 {
@@ -59,6 +55,7 @@ import {
   updateColgroup,
 } from '../pm-plugins/table-resizing/utils';
 import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup';
+import { TABLE_EDITOR_MARGIN } from '../pm-plugins/table-resizing/utils/consts';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import type { PluginInjectionAPI } from '../types';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
@@ -102,13 +99,13 @@ export interface ComponentProps {
   isHeaderColumnEnabled: boolean;
   isMediaFullscreen?: boolean;
   isDragAndDropEnabled?: boolean;
+  isTableScalingEnabled?: boolean;
   tableActive: boolean;
   ordering: TableColumnOrdering;
   isResizing?: boolean;
   getEditorFeatureFlags: GetEditorFeatureFlags;
   dispatchAnalyticsEvent: DispatchAnalyticsEvent;
   pluginInjectionApi?: PluginInjectionAPI;
-  tableRef?: HTMLElement | undefined;
 }
 
 interface TableState {
@@ -142,8 +139,6 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
   private dragAndDropCleanupFn?: CleanupFn;
 
-  private tableColumnWidths?: number[];
-
   constructor(props: ComponentProps) {
     super(props);
     const { options, containerWidth, getNode } = props;
@@ -182,8 +177,13 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       isDragAndDropEnabled,
       getNode,
       getEditorFeatureFlags,
+      isTableScalingEnabled,
     } = this.props;
 
+    if (isTableScalingEnabled) {
+      this.handleColgroupUpdates(true);
+    }
+
     if (allowColumnResizing && this.wrapper && !isIE11) {
       this.wrapper.addEventListener('scroll', this.handleScrollDebounced, {
         passive: true,
@@ -288,20 +288,17 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     }
   }
 
-  handleColgroupUpdates() {
-    const { getNode, containerWidth, isResizing, view, getPos, tableRef } =
-      this.props;
+  handleColgroupUpdates(force = false) {
+    const { getNode, containerWidth, isResizing, view, getPos } = this.props;
 
-    if (!tableRef) {
+    if (!this.table) {
       return;
     }
 
-    const TABLE_MARGIN = 76;
-
     // Remove any widths styles after resizing preview is completed
-    tableRef.style.width = '';
+    this.table.style.width = '';
 
-    const tableRenderWidth = containerWidth.width - TABLE_MARGIN;
+    const tableRenderWidth = containerWidth.width - TABLE_EDITOR_MARGIN;
     const tableNode = getNode();
     const start = getPos() || 0;
     const depth = view.state.doc.resolve(start).depth;
@@ -312,39 +309,25 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     }
 
     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)
-    ) {
+    if (force || (shouldTableScale && !isResizing && isWidthChanged)) {
       const resizeState = getResizeState({
         minWidth: COLUMN_MIN_WIDTH,
         maxSize: tableRenderWidth,
         table: tableNode,
-        tableRef: this.table as HTMLTableElement,
+        tableRef: this.table,
         start,
         domAtPos: view.domAtPos,
-        tablePreserveWidth: true,
-      });
-
-      requestAnimationFrame(() => {
-        updateColgroup(resizeState, this.table!, true);
+        isTableScalingEnabled: true,
       });
 
-      this.tableColumnWidths = tableColumnWidths;
-      this.containerWidth = containerWidth;
+      updateColgroup(resizeState, this.table!, tableNode, true);
     }
+    this.containerWidth = containerWidth;
   }
 
   componentDidUpdate(_: any, prevState: TableState) {
@@ -355,13 +338,12 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       allowColumnResizing,
       isResizing,
       options,
-      getEditorFeatureFlags,
+      isTableScalingEnabled,
     } = this.props;
     const { isInDanger } = getPluginState(view.state);
-    const { tablePreserveWidth = false } = getEditorFeatureFlags();
     const table = findTable(view.state.selection);
 
-    if (tablePreserveWidth) {
+    if (isTableScalingEnabled) {
       this.handleColgroupUpdates();
     }
 
@@ -424,7 +406,11 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
             isResizing);
 
         if (shouldRecreateResizeCols) {
-          insertColgroupFromNode(this.table, currentTable, tablePreserveWidth);
+          insertColgroupFromNode(
+            this.table,
+            currentTable,
+            isTableScalingEnabled,
+          );
         }
 
         updateControls()(view.state);
@@ -517,6 +503,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       pluginInjectionApi,
       isDragAndDropEnabled,
       getEditorFeatureFlags,
+      isTableScalingEnabled,
     } = this.props;
 
     const { showBeforeShadow, showAfterShadow } = this.state;
@@ -610,7 +597,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
           shadowPadding +
           2;
 
-    const { stickyScrollbar, tablePreserveWidth } = getEditorFeatureFlags();
+    const { stickyScrollbar } = getEditorFeatureFlags();
 
     return (
       <TableContainer
@@ -630,7 +617,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         pluginInjectionApi={pluginInjectionApi}
         isTableResizingEnabled={options?.isTableResizingEnabled}
         isResizing={isResizing}
-        tablePreserveWidth={tablePreserveWidth}
+        isTableScalingEnabled={isTableScalingEnabled}
       >
         <div
           className={ClassName.TABLE_STICKY_SENTINEL_TOP}
@@ -860,7 +847,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       getPos,
       containerWidth,
       options,
-      getEditorFeatureFlags,
+      isTableScalingEnabled,
     } = this.props;
     const node = getNode();
     const { state, dispatch } = view;
@@ -874,8 +861,6 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
     this.scaleTableDebounced.cancel();
 
-    const { tablePreserveWidth = false } = getEditorFeatureFlags();
-
     const tr = scaleTable(
       this.table,
       {
@@ -888,7 +873,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         ...options,
       },
       domAtPos,
-      tablePreserveWidth,
+      isTableScalingEnabled,
     )(state.tr);
 
     dispatch(tr);

package/src/nodeviews/TableContainer.tsx

@@ -77,7 +77,7 @@ type ResizableTableContainerProps = {
   tableRef: HTMLTableElement;
   isResizing?: boolean;
   pluginInjectionApi?: PluginInjectionAPI;
-  tablePreserveWidth?: boolean;
+  isTableScalingEnabled?: boolean;
 };
 
 export const ResizableTableContainer = React.memo(
@@ -91,7 +91,7 @@ export const ResizableTableContainer = React.memo(
     tableRef,
     isResizing,
     pluginInjectionApi,
-    tablePreserveWidth,
+    isTableScalingEnabled,
   }: PropsWithChildren<ResizableTableContainerProps>) => {
     const containerRef = useRef<HTMLDivElement | null>(null);
     const tableWidthRef = useRef<number>(akEditorDefaultLayoutWidth);
@@ -191,7 +191,7 @@ export const ResizableTableContainer = React.memo(
 
     const tableWidth = getTableContainerWidth(node);
     // 76 is currently an accepted padding value considering the spacing for resizer handle
-    const responsiveContainerWidth = tablePreserveWidth
+    const responsiveContainerWidth = isTableScalingEnabled
       ? containerWidth -
         akEditorGutterPadding * 2 -
         akEditorMediaResizeHandlerPaddingWide / 2
@@ -218,7 +218,7 @@ export const ResizableTableContainer = React.memo(
       displayGuideline,
       attachAnalyticsEvent,
       displayGapCursor,
-      tablePreserveWidth,
+      isTableScalingEnabled,
     };
 
     if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
@@ -266,7 +266,7 @@ type TableContainerProps = {
   isNested: boolean;
   isResizing?: boolean;
   pluginInjectionApi?: PluginInjectionAPI;
-  tablePreserveWidth?: boolean;
+  isTableScalingEnabled?: boolean;
 };
 
 export const TableContainer = ({
@@ -282,7 +282,7 @@ export const TableContainer = ({
   isNested,
   isResizing,
   pluginInjectionApi,
-  tablePreserveWidth,
+  isTableScalingEnabled,
 }: PropsWithChildren<TableContainerProps>) => {
   if (isTableResizingEnabled && !isNested) {
     return (
@@ -295,7 +295,7 @@ export const TableContainer = ({
         tableRef={tableRef}
         isResizing={isResizing}
         pluginInjectionApi={pluginInjectionApi}
-        tablePreserveWidth={tablePreserveWidth}
+        isTableScalingEnabled={isTableScalingEnabled}
       >
         {children}
       </ResizableTableContainer>

package/src/nodeviews/TableResizer.tsx

@@ -75,7 +75,7 @@ interface TableResizerProps {
     payload: TableEventPayload,
   ) => ((tr: Transaction) => boolean) | undefined;
   displayGapCursor: (toggle: boolean) => boolean;
-  tablePreserveWidth?: boolean;
+  isTableScalingEnabled?: boolean;
 }
 
 export interface TableResizerImprovementProps extends TableResizerProps {
@@ -170,7 +170,7 @@ export const TableResizer = ({
   displayGuideline,
   attachAnalyticsEvent,
   displayGapCursor,
-  tablePreserveWidth,
+  isTableScalingEnabled,
 }: PropsWithChildren<TableResizerImprovementProps>) => {
   const currentGap = useRef(0);
   // track resizing state - use ref over state to avoid re-render
@@ -218,7 +218,7 @@ export const TableResizer = ({
       if (gap !== currentGap.current) {
         currentGap.current = gap;
         const visibleGuidelines = getVisibleGuidelines(
-          tablePreserveWidth
+          isTableScalingEnabled
             ? defaultGuidelinesForPreserveTable(containerWidth)
             : defaultGuidelines,
           containerWidth,
@@ -234,19 +234,19 @@ export const TableResizer = ({
         );
       }
     },
-    [tablePreserveWidth, containerWidth, displayGuideline],
+    [isTableScalingEnabled, containerWidth, displayGuideline],
   );
 
   const guidelineSnaps = useMemo(
     () =>
       snappingEnabled
         ? {
-            x: tablePreserveWidth
+            x: isTableScalingEnabled
               ? defaultTablePreserveSnappingWidths(containerWidth)
               : defaultSnappingWidths,
           }
         : undefined,
-    [snappingEnabled, tablePreserveWidth, containerWidth],
+    [snappingEnabled, isTableScalingEnabled, containerWidth],
   );
 
   useEffect(() => {
@@ -282,7 +282,7 @@ export const TableResizer = ({
     dispatch(tr);
 
     const visibleGuidelines = getVisibleGuidelines(
-      tablePreserveWidth
+      isTableScalingEnabled
         ? defaultGuidelinesForPreserveTable(containerWidth)
         : defaultGuidelines,
       containerWidth,
@@ -299,7 +299,7 @@ export const TableResizer = ({
     startMeasure,
     editorView,
     displayGapCursor,
-    tablePreserveWidth,
+    isTableScalingEnabled,
     containerWidth,
     displayGuideline,
     onResizeStart,
@@ -328,16 +328,16 @@ export const TableResizer = ({
           parentWidth: newWidth,
         },
         editorView.domAtPos.bind(editorView),
-        tablePreserveWidth,
+        isTableScalingEnabled,
       );
 
       updateActiveGuidelines(
         findClosestSnap(
           newWidth,
-          tablePreserveWidth
+          isTableScalingEnabled
             ? defaultTablePreserveSnappingWidths(containerWidth)
             : defaultSnappingWidths,
-          tablePreserveWidth
+          isTableScalingEnabled
             ? defaultGuidelinesForPreserveTable(containerWidth)
             : defaultGuidelines,
           TABLE_HIGHLIGHT_GAP,
@@ -350,7 +350,7 @@ export const TableResizer = ({
     },
     [
       countFrames,
-      tablePreserveWidth,
+      isTableScalingEnabled,
       tableRef,
       node,
       editorView,
@@ -400,7 +400,7 @@ export const TableResizer = ({
             parentWidth: newWidth,
           },
           editorView.domAtPos.bind(editorView),
-          tablePreserveWidth,
+          isTableScalingEnabled,
         )(tr);
 
         const scaledNode = tr.doc.nodeAt(pos)!;
@@ -441,7 +441,7 @@ export const TableResizer = ({
       attachAnalyticsEvent,
       endMeasure,
       onResizeStop,
-      tablePreserveWidth,
+      isTableScalingEnabled,
     ],
   );
 

package/src/nodeviews/table.tsx

@@ -102,7 +102,7 @@ export default class TableView extends ReactNodeView<Props> {
   private resizeObserver?: ResizeObserver;
   eventDispatcher?: EventDispatcher;
   getPos: getPosHandlerNode;
-  getEditorFeatureFlags: GetEditorFeatureFlags;
+  options;
 
   constructor(props: Props) {
     super(
@@ -119,7 +119,7 @@ export default class TableView extends ReactNodeView<Props> {
     );
     this.getPos = props.getPos;
     this.eventDispatcher = props.eventDispatcher;
-    this.getEditorFeatureFlags = props.getEditorFeatureFlags;
+    this.options = props.options;
   }
 
   getContentDOM() {
@@ -133,9 +133,8 @@ export default class TableView extends ReactNodeView<Props> {
 
     if (rendered.dom) {
       this.table = rendered.dom;
-      const { tablePreserveWidth = false } = this.getEditorFeatureFlags();
       // Preserve Table Width cannot have inline width set on the table
-      if (!tablePreserveWidth) {
+      if (!this.options?.isTableScalingEnabled) {
         const tableInlineWidth = getInlineWidth(
           this.node,
           this.reactComponentProps.options,
@@ -255,6 +254,7 @@ export default class TableView extends ReactNodeView<Props> {
               isHeaderRowEnabled={pluginState!.isHeaderRowEnabled}
               isHeaderColumnEnabled={pluginState!.isHeaderColumnEnabled}
               isDragAndDropEnabled={pluginState!.isDragAndDropEnabled}
+              isTableScalingEnabled={pluginState!.isTableScalingEnabled}
               tableActive={tableActive}
               ordering={pluginState!.ordering as TableColumnOrdering}
               isResizing={isResizing}
@@ -264,7 +264,6 @@ export default class TableView extends ReactNodeView<Props> {
               getEditorFeatureFlags={props.getEditorFeatureFlags}
               dispatchAnalyticsEvent={props.dispatchAnalyticsEvent}
               pluginInjectionApi={props.pluginInjectionApi}
-              tableRef={this.table}
             />
           );
         }}
@@ -362,6 +361,7 @@ export const createTableView = (
     wasFullWidthModeEnabled,
     isTableResizingEnabled,
     isDragAndDropEnabled,
+    isTableScalingEnabled,
   } = getPluginState(view.state);
   const { allowColumnResizing } = getPluginConfig(pluginConfig);
   const hasIntlContext = true;
@@ -379,6 +379,7 @@ export const createTableView = (
       wasFullWidthModeEnabled,
       isTableResizingEnabled,
       isDragAndDropEnabled,
+      isTableScalingEnabled,
     },
     getEditorContainerWidth,
     getEditorFeatureFlags,

package/src/nodeviews/types.ts

@@ -16,6 +16,7 @@ export type TableOptions = {
   wasFullWidthModeEnabled?: boolean;
   isTableResizingEnabled?: boolean;
   isDragAndDropEnabled?: boolean;
+  isTableScalingEnabled?: boolean;
 };
 
 export interface Props {

package/src/plugin.tsx

@@ -52,6 +52,7 @@ import {
 } from './pm-plugins/drag-and-drop';
 import { keymapPlugin } from './pm-plugins/keymap';
 import { createPlugin } from './pm-plugins/main';
+import { getPluginState } from './pm-plugins/plugin-factory';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { createPlugin as createTableSafariDeleteCompositionTextIssueWorkaroundPlugin } from './pm-plugins/safari-delete-composition-text-issue-workaround';
 import {
@@ -92,6 +93,7 @@ export interface TablePluginOptions {
   fullWidthEnabled?: boolean;
   wasFullWidthEnabled?: boolean;
   getEditorFeatureFlags?: GetEditorFeatureFlags;
+  isTableScalingEnabled?: boolean;
 }
 
 type InsertTableAction = (analyticsPayload: AnalyticsEventPayload) => Command;
@@ -157,8 +159,8 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
         (analyticsPayload): Command =>
         (state, dispatch) => {
           const node = createTableWithWidth(
+            options?.isTableScalingEnabled,
             options?.fullWidthEnabled,
-            options?.getEditorFeatureFlags,
           )(state.schema);
 
           return (
@@ -179,7 +181,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
     commands: {
       insertTableWithSize: insertTableWithSize(
         options?.fullWidthEnabled,
-        options?.getEditorFeatureFlags,
+        options?.isTableScalingEnabled,
         api?.analytics?.actions,
       ),
     },
@@ -216,6 +218,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
               tableOptions,
               getEditorFeatureFlags,
               dragAndDropEnabled,
+              isTableScalingEnabled,
             } = options || ({} as TablePluginOptions);
             return createPlugin(
               dispatchAnalyticsEvent,
@@ -233,6 +236,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
               dragAndDropEnabled,
               editorAnalyticsAPI,
               api,
+              isTableScalingEnabled,
             );
           },
         },
@@ -261,14 +265,14 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
         {
           name: 'tableKeymap',
           plugin: () => {
-            const { dragAndDropEnabled, getEditorFeatureFlags } =
+            const { dragAndDropEnabled, isTableScalingEnabled = false } =
               options || ({} as TablePluginOptions);
 
             return keymapPlugin(
               defaultGetEditorContainerWidth,
               editorAnalyticsAPI,
-              getEditorFeatureFlags,
               dragAndDropEnabled,
+              isTableScalingEnabled,
             );
           },
         },
@@ -308,26 +312,14 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
           name: 'tableStickyHeaders',
           plugin: ({ dispatch, eventDispatcher }) =>
             options && options.tableOptions.stickyHeaders
-              ? createStickyHeadersPlugin(
-                  dispatch,
-                  eventDispatcher,
-                  () => [],
-                  options?.getEditorFeatureFlags ||
-                    defaultGetEditorFeatureFlags,
-                )
+              ? createStickyHeadersPlugin(dispatch, () => [])
               : undefined,
         },
         {
           name: 'tableDragAndDrop',
           plugin: ({ dispatch }) => {
-            const { getEditorFeatureFlags } =
-              options || ({} as TablePluginOptions);
             return options?.dragAndDropEnabled
-              ? createDragAndDropPlugin(
-                  dispatch,
-                  getEditorFeatureFlags,
-                  editorAnalyticsAPI,
-                )
+              ? createDragAndDropPlugin(dispatch, editorAnalyticsAPI)
               : undefined;
           },
         },
@@ -343,7 +335,6 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                   dispatch,
                   dispatchAnalyticsEvent,
                   options?.fullWidthEnabled ?? false,
-                  options?.getEditorFeatureFlags,
                 )
               : undefined,
         },
@@ -511,10 +502,6 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                       dispatchAnalyticsEvent={dispatchAnalyticsEvent}
                       editorAnalyticsAPI={editorAnalyticsAPI}
                       getEditorContainerWidth={defaultGetEditorContainerWidth}
-                      getEditorFeatureFlags={
-                        options?.getEditorFeatureFlags ||
-                        defaultGetEditorFeatureFlags
-                      }
                     />
                   )}
                   {options?.allowContextualMenu && (
@@ -548,10 +535,6 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                       editorAnalyticsAPI={editorAnalyticsAPI}
                       stickyHeaders={stickyHeader}
                       pluginConfig={pluginConfig}
-                      getEditorFeatureFlags={
-                        options?.getEditorFeatureFlags ||
-                        defaultGetEditorFeatureFlags
-                      }
                     />
                   )}
                   {allowControls && !isDragAndDropEnabled && !isResizing && (
@@ -591,11 +574,12 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
           action(insert, state) {
             // see comment on tablesPlugin.getSharedState on usage
             const tableState = api?.table?.sharedState.currentState();
+            const { isTableScalingEnabled = false } = getPluginState(state);
 
             const tr = insert(
               createTableWithWidth(
+                isTableScalingEnabled,
                 tableState?.isFullWidthModeEnabled,
-                options?.getEditorFeatureFlags,
               )(state.schema),
             );
             editorAnalyticsAPI?.attachAnalyticsEvent({

package/src/pm-plugins/drag-and-drop/plugin.ts

@@ -2,7 +2,6 @@ import { INPUT_METHOD, TABLE_STATUS } from '@atlaskit/editor-common/analytics';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
@@ -34,11 +33,7 @@ import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
 import { getDraggableDataFromEvent } from './utils/monitor';
 
-const destroyFn = (
-  editorView: EditorView,
-  editorAnalyticsAPI: any,
-  getEditorFeatureFlags?: GetEditorFeatureFlags,
-) => {
+const destroyFn = (editorView: EditorView, editorAnalyticsAPI: any) => {
   const editorPageScrollContainer = document.querySelector(
     '.fabric-editor-popup-scroll-parent',
   );
@@ -223,9 +218,14 @@ const destroyFn = (
               editorView.state,
             );
             if (tableRef && tableNode) {
-              const { tablePreserveWidth = false } =
-                getEditorFeatureFlags?.() || {};
-              insertColgroupFromNode(tableRef, tableNode, tablePreserveWidth);
+              const { isTableScalingEnabled = false } = getTablePluginState(
+                editorView.state,
+              );
+              insertColgroupFromNode(
+                tableRef,
+                tableNode,
+                isTableScalingEnabled,
+              );
             }
           }
 
@@ -238,7 +238,6 @@ const destroyFn = (
 
 export const createPlugin = (
   dispatch: Dispatch,
-  getEditorFeatureFlags?: GetEditorFeatureFlags,
   editorAnalyticsAPI?: EditorAnalyticsAPI,
 ) => {
   return new SafePlugin({
@@ -311,11 +310,7 @@ export const createPlugin = (
     },
     view: (editorView: EditorView) => {
       return {
-        destroy: destroyFn(
-          editorView,
-          editorAnalyticsAPI,
-          getEditorFeatureFlags,
-        ),
+        destroy: destroyFn(editorView, editorAnalyticsAPI),
       };
     },
     props: {