@atlaskit/editor-plugin-table 7.5.4 → 7.5.6

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';
@@ -87,6 +84,12 @@ const isIE11 = browser.ie_version === 11;
 // To make sure we capture the last update, we use setTimeout.
 const initialOverflowCaptureTimeroutDelay = 300;
 
+// This is a hard switch for controlling whether the overflow analytics should be dispatched. There has been 6months of data
+// already collected which we could use but have not. This has been disabled rather then removed entirely in the event that
+// the current collected data becomes stale and we want to start collecting fresh data again in future.
+// PLEASE NOTE: that the current way this alaytics has been configured WILL cause reflows to occur. This is why the has been disabled.
+const isOverflowAnalyticsEnabled = false;
+
 export interface ComponentProps {
   view: EditorView;
   getNode: () => PmNode;
@@ -102,13 +105,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 {
@@ -117,6 +120,8 @@ interface TableState {
   stickyHeader?: RowStickyState;
   [ShadowEvent.SHOW_BEFORE_SHADOW]: boolean;
   [ShadowEvent.SHOW_AFTER_SHADOW]: boolean;
+  tableWrapperWidth?: number;
+  tableWrapperHeight?: number;
 }
 
 class TableComponent extends React.Component<ComponentProps, TableState> {
@@ -127,6 +132,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     parentWidth: undefined,
     [ShadowEvent.SHOW_BEFORE_SHADOW]: false,
     [ShadowEvent.SHOW_AFTER_SHADOW]: false,
+    tableWrapperWidth: undefined,
+    tableWrapperHeight: undefined,
   };
 
   private wrapper?: HTMLDivElement | null;
@@ -139,11 +146,10 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
   private isInitialOverflowSent: boolean;
   private initialOverflowCaptureTimerId?: ReturnType<typeof setTimeout>;
+  private resizeObserver?: ResizeObserver;
 
   private dragAndDropCleanupFn?: CleanupFn;
 
-  private tableColumnWidths?: number[];
-
   constructor(props: ComponentProps) {
     super(props);
     const { options, containerWidth, getNode } = props;
@@ -163,6 +169,21 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       },
     );
 
+    this.resizeObserver = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        this.setState((prev) => {
+          return prev?.tableWrapperWidth === entry.contentRect?.width &&
+            prev?.tableWrapperHeight === entry.contentRect?.height
+            ? prev
+            : {
+                ...prev,
+                tableWrapperWidth: entry.contentRect.width,
+                tableWrapperHeight: entry.contentRect.height,
+              };
+        });
+      }
+    });
+
     // Disable inline table editing and resizing controls in Firefox
     // https://github.com/ProseMirror/prosemirror/issues/432
     if ('execCommand' in document) {
@@ -182,8 +203,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,
@@ -231,11 +257,13 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
     eventDispatcher.on((stickyHeadersPluginKey as any).key, this.onStickyState);
 
-    const initialIsOveflowing =
-      this.state[ShadowEvent.SHOW_BEFORE_SHADOW] ||
-      this.state[ShadowEvent.SHOW_AFTER_SHADOW];
+    if (isOverflowAnalyticsEnabled) {
+      const initialIsOveflowing =
+        this.state[ShadowEvent.SHOW_BEFORE_SHADOW] ||
+        this.state[ShadowEvent.SHOW_AFTER_SHADOW];
 
-    this.setTimerToSendInitialOverflowCaptured(initialIsOveflowing);
+      this.setTimerToSendInitialOverflowCaptured(initialIsOveflowing);
+    }
   }
 
   componentWillUnmount() {
@@ -254,6 +282,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       this.dragAndDropCleanupFn();
     }
 
+    this.resizeObserver?.disconnect();
+
     const { stickyScrollbar } = getEditorFeatureFlags();
 
     if (stickyScrollbar) {
@@ -288,20 +318,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 +339,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,
+        isTableScalingEnabled: true,
       });
 
-      requestAnimationFrame(() => {
-        updateColgroup(resizeState, this.table!, true);
-      });
-
-      this.tableColumnWidths = tableColumnWidths;
-      this.containerWidth = containerWidth;
+      updateColgroup(resizeState, this.table!, tableNode, true);
     }
+    this.containerWidth = containerWidth;
   }
 
   componentDidUpdate(_: any, prevState: TableState) {
@@ -355,13 +368,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 +436,11 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
             isResizing);
 
         if (shouldRecreateResizeCols) {
-          insertColgroupFromNode(this.table, currentTable, tablePreserveWidth);
+          insertColgroupFromNode(
+            this.table,
+            currentTable,
+            isTableScalingEnabled,
+          );
         }
 
         updateControls()(view.state);
@@ -432,38 +448,42 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
       this.handleTableResizingDebounced();
     }
+    if (isOverflowAnalyticsEnabled) {
+      const newIsOverflowing =
+        this.state[ShadowEvent.SHOW_BEFORE_SHADOW] ||
+        this.state[ShadowEvent.SHOW_AFTER_SHADOW];
 
-    const newIsOverflowing =
-      this.state[ShadowEvent.SHOW_BEFORE_SHADOW] ||
-      this.state[ShadowEvent.SHOW_AFTER_SHADOW];
+      const prevIsOverflowing =
+        prevState[ShadowEvent.SHOW_BEFORE_SHADOW] ||
+        prevState[ShadowEvent.SHOW_AFTER_SHADOW];
 
-    const prevIsOverflowing =
-      prevState[ShadowEvent.SHOW_BEFORE_SHADOW] ||
-      prevState[ShadowEvent.SHOW_AFTER_SHADOW];
-
-    if (this.initialOverflowCaptureTimerId) {
-      clearTimeout(this.initialOverflowCaptureTimerId);
-    }
-
-    if (!this.isInitialOverflowSent) {
-      this.setTimerToSendInitialOverflowCaptured(newIsOverflowing);
-    }
+      if (this.initialOverflowCaptureTimerId) {
+        clearTimeout(this.initialOverflowCaptureTimerId);
+      }
 
-    if (this.isInitialOverflowSent && prevIsOverflowing !== newIsOverflowing) {
-      const {
-        dispatch,
-        state: { tr },
-      } = this.props.view;
+      if (!this.isInitialOverflowSent) {
+        this.setTimerToSendInitialOverflowCaptured(newIsOverflowing);
+      }
 
-      dispatch(
-        tr.setMeta(META_KEYS.OVERFLOW_STATE_CHANGED, {
-          isOverflowing: newIsOverflowing,
-          wasOverflowing: prevIsOverflowing,
-          editorWidth: this.props.containerWidth.width || 0,
-          width: this.node.attrs.width || 0,
-          parentWidth: this.state?.parentWidth || 0,
-        }),
-      );
+      if (
+        this.isInitialOverflowSent &&
+        prevIsOverflowing !== newIsOverflowing
+      ) {
+        const {
+          dispatch,
+          state: { tr },
+        } = this.props.view;
+
+        dispatch(
+          tr.setMeta(META_KEYS.OVERFLOW_STATE_CHANGED, {
+            isOverflowing: newIsOverflowing,
+            wasOverflowing: prevIsOverflowing,
+            editorWidth: this.props.containerWidth.width || 0,
+            width: this.node.attrs.width || 0,
+            parentWidth: this.state?.parentWidth || 0,
+          }),
+        );
+      }
     }
   }
 
@@ -485,6 +505,12 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     }
   };
 
+  private observeTable(table: HTMLTableElement | null) {
+    if (table) {
+      this.resizeObserver?.observe(table);
+    }
+  }
+
   onStickyState = (state: StickyPluginState) => {
     const pos = this.props.getPos();
     if (!isValidPosition(pos, this.props.view.state)) {
@@ -517,6 +543,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       pluginInjectionApi,
       isDragAndDropEnabled,
       getEditorFeatureFlags,
+      isTableScalingEnabled,
     } = this.props;
 
     const { showBeforeShadow, showAfterShadow } = this.state;
@@ -552,6 +579,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         selection={view.state.selection}
         headerRowHeight={headerRow ? headerRow.offsetHeight : undefined}
         stickyHeader={this.state.stickyHeader}
+        tableWrapperWidth={this.state.tableWrapperWidth}
       />
     );
     const tableContainerWidth = getTableContainerWidth(node);
@@ -576,6 +604,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         tableContainerWidth={tableContainerWidth}
         isNumberColumnEnabled={node.attrs.isNumberColumnEnabled}
         getScrollOffset={() => this.wrapper?.scrollLeft || 0}
+        tableWrapperHeight={this.state.tableWrapperHeight}
       />
     ) : null;
 
@@ -610,7 +639,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
           shadowPadding +
           2;
 
-    const { stickyScrollbar, tablePreserveWidth } = getEditorFeatureFlags();
+    const { stickyScrollbar } = getEditorFeatureFlags();
 
     return (
       <TableContainer
@@ -628,9 +657,10 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         isBreakoutEnabled={options?.isBreakoutEnabled}
         isNested={isNested}
         pluginInjectionApi={pluginInjectionApi}
+        tableWrapperHeight={this.state.tableWrapperHeight}
         isTableResizingEnabled={options?.isTableResizingEnabled}
         isResizing={isResizing}
-        tablePreserveWidth={tablePreserveWidth}
+        isTableScalingEnabled={isTableScalingEnabled}
       >
         <div
           className={ClassName.TABLE_STICKY_SENTINEL_TOP}
@@ -681,6 +711,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
               if (tableElement !== this.table) {
                 this.table = tableElement;
                 this.createShadowSentinels(this.table);
+                this.observeTable(this.table);
               }
             }
           }}
@@ -860,7 +891,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       getPos,
       containerWidth,
       options,
-      getEditorFeatureFlags,
+      isTableScalingEnabled,
     } = this.props;
     const node = getNode();
     const { state, dispatch } = view;
@@ -874,8 +905,6 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
     this.scaleTableDebounced.cancel();
 
-    const { tablePreserveWidth = false } = getEditorFeatureFlags();
-
     const tr = scaleTable(
       this.table,
       {
@@ -888,7 +917,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         ...options,
       },
       domAtPos,
-      tablePreserveWidth,
+      isTableScalingEnabled,
     )(state.tr);
 
     dispatch(tr);

package/src/nodeviews/TableContainer.tsx

@@ -1,5 +1,5 @@
 import type { PropsWithChildren } from 'react';
-import React, { forwardRef, useCallback, useRef } from 'react';
+import React, { forwardRef, useCallback, useRef, useState } from 'react';
 
 import classNames from 'classnames';
 
@@ -77,7 +77,8 @@ type ResizableTableContainerProps = {
   tableRef: HTMLTableElement;
   isResizing?: boolean;
   pluginInjectionApi?: PluginInjectionAPI;
-  tablePreserveWidth?: boolean;
+  isTableScalingEnabled?: boolean;
+  tableWrapperHeight?: number;
 };
 
 export const ResizableTableContainer = React.memo(
@@ -91,10 +92,12 @@ export const ResizableTableContainer = React.memo(
     tableRef,
     isResizing,
     pluginInjectionApi,
-    tablePreserveWidth,
+    isTableScalingEnabled,
+    tableWrapperHeight,
   }: PropsWithChildren<ResizableTableContainerProps>) => {
     const containerRef = useRef<HTMLDivElement | null>(null);
     const tableWidthRef = useRef<number>(akEditorDefaultLayoutWidth);
+    const [resizing, setIsResizing] = useState(false);
 
     const updateContainerHeight = useCallback((height: number | 'auto') => {
       // current StickyHeader State is not stable to be fetch.
@@ -108,41 +111,26 @@ export const ResizableTableContainer = React.memo(
         //    1px is border width but collapse make it 0.5.
         // -- When sticky header appear, we should add first row height but reduce
         //    collapsed border
-        containerRef.current?.style.setProperty(
-          'height',
-          typeof height === 'number' ? `${height + 40.5}px` : 'auto',
-        );
+        return typeof height === 'number' ? `${height + 40.5}px` : 'auto';
       } else {
         const stickyHeaderHeight =
           containerRef.current
             ?.getElementsByTagName('th')[0]
             .getBoundingClientRect().height || 0;
-        containerRef.current?.style.setProperty(
-          'height',
-          typeof height === 'number'
-            ? `${height + stickyHeaderHeight + 39.5}px`
-            : 'auto',
-        );
+
+        return typeof height === 'number'
+          ? `${height + stickyHeaderHeight + 39.5}px`
+          : 'auto';
       }
     }, []);
 
-    const resizeObserverRef = useRef(
-      new ResizeObserver((entries) => {
-        updateContainerHeight(entries[entries.length - 1].contentRect.height);
-      }),
-    );
-
     const onResizeStart = useCallback(() => {
-      if (tableRef) {
-        resizeObserverRef.current.observe(tableRef);
-      }
-    }, [tableRef]);
+      setIsResizing(true);
+    }, []);
 
     const onResizeStop = useCallback(() => {
-      updateContainerHeight('auto');
-
-      resizeObserverRef.current.disconnect();
-    }, [updateContainerHeight]);
+      setIsResizing(false);
+    }, []);
 
     const updateWidth = useCallback((width: number) => {
       if (!containerRef.current) {
@@ -191,7 +179,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 +206,7 @@ export const ResizableTableContainer = React.memo(
       displayGuideline,
       attachAnalyticsEvent,
       displayGapCursor,
-      tablePreserveWidth,
+      isTableScalingEnabled,
     };
 
     if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
@@ -239,6 +227,9 @@ export const ResizableTableContainer = React.memo(
         <div
           style={{
             width: tableWidthRef.current,
+            height: resizing
+              ? updateContainerHeight(tableWrapperHeight ?? 'auto')
+              : 'auto',
           }}
           className={ClassName.TABLE_RESIZER_CONTAINER}
           ref={containerRef}
@@ -266,7 +257,8 @@ type TableContainerProps = {
   isNested: boolean;
   isResizing?: boolean;
   pluginInjectionApi?: PluginInjectionAPI;
-  tablePreserveWidth?: boolean;
+  isTableScalingEnabled?: boolean;
+  tableWrapperHeight?: number;
 };
 
 export const TableContainer = ({
@@ -280,9 +272,10 @@ export const TableContainer = ({
   getPos,
   tableRef,
   isNested,
+  tableWrapperHeight,
   isResizing,
   pluginInjectionApi,
-  tablePreserveWidth,
+  isTableScalingEnabled,
 }: PropsWithChildren<TableContainerProps>) => {
   if (isTableResizingEnabled && !isNested) {
     return (
@@ -293,9 +286,10 @@ export const TableContainer = ({
         editorView={editorView}
         getPos={getPos}
         tableRef={tableRef}
+        tableWrapperHeight={tableWrapperHeight}
         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 {
@@ -125,10 +125,7 @@ const getResizerHandleHeight = (
 
 const getResizerMinWidth = (node: PMNode) => {
   const currentColumnCount = getColgroupChildrenLength(node);
-  const minColumnWidth =
-    currentColumnCount <= 3
-      ? currentColumnCount * COLUMN_MIN_WIDTH
-      : 3 * COLUMN_MIN_WIDTH;
+  const minColumnWidth = Math.min(3, currentColumnCount) * COLUMN_MIN_WIDTH;
   // add an extra pixel as the scale table logic will scale columns to be tableContainerWidth - 1
   // the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
   return minColumnWidth + 1;
@@ -170,7 +167,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 +215,7 @@ export const TableResizer = ({
       if (gap !== currentGap.current) {
         currentGap.current = gap;
         const visibleGuidelines = getVisibleGuidelines(
-          tablePreserveWidth
+          isTableScalingEnabled
             ? defaultGuidelinesForPreserveTable(containerWidth)
             : defaultGuidelines,
           containerWidth,
@@ -234,19 +231,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 +279,7 @@ export const TableResizer = ({
     dispatch(tr);
 
     const visibleGuidelines = getVisibleGuidelines(
-      tablePreserveWidth
+      isTableScalingEnabled
         ? defaultGuidelinesForPreserveTable(containerWidth)
         : defaultGuidelines,
       containerWidth,
@@ -299,7 +296,7 @@ export const TableResizer = ({
     startMeasure,
     editorView,
     displayGapCursor,
-    tablePreserveWidth,
+    isTableScalingEnabled,
     containerWidth,
     displayGuideline,
     onResizeStart,
@@ -328,16 +325,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 +347,7 @@ export const TableResizer = ({
     },
     [
       countFrames,
-      tablePreserveWidth,
+      isTableScalingEnabled,
       tableRef,
       node,
       editorView,
@@ -400,7 +397,7 @@ export const TableResizer = ({
             parentWidth: newWidth,
           },
           editorView.domAtPos.bind(editorView),
-          tablePreserveWidth,
+          isTableScalingEnabled,
         )(tr);
 
         const scaledNode = tr.doc.nodeAt(pos)!;
@@ -441,7 +438,7 @@ export const TableResizer = ({
       attachAnalyticsEvent,
       endMeasure,
       onResizeStop,
-      tablePreserveWidth,
+      isTableScalingEnabled,
     ],
   );