@atlaskit/editor-plugin-table 7.5.4 → 7.5.6

package/dist/es2019/nodeviews/TableComponent.js

@@ -6,7 +6,7 @@ import rafSchedule from 'raf-schd';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { getParentNodeWidth, getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableMarginSides } from '@atlaskit/editor-common/styles';
-import { browser, calcTableColumnWidths, isValidPosition } from '@atlaskit/editor-common/utils';
+import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
 import { MAX_BROWSER_SCROLLBAR_HEIGHT, akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -18,6 +18,7 @@ import { findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from '.
 import { META_KEYS } from '../pm-plugins/table-analytics';
 import { COLUMN_MIN_WIDTH, getLayoutSize, getResizeState, insertColgroupFromNode, scaleTable, 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 { TableCssClassName as ClassName, ShadowEvent } from '../types';
 import { tableOverflowShadowWidth, tableOverflowShadowWidthWide } from '../ui/consts';
@@ -33,6 +34,12 @@ const isIE11 = browser.ie_version === 11;
 // componentDidUpdate is called multiple times. The isOverflowing value is correct only on the last update.
 // 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;
 class TableComponent extends React.Component {
   constructor(props) {
     super(props);
@@ -40,7 +47,9 @@ class TableComponent extends React.Component {
       scroll: 0,
       parentWidth: undefined,
       [ShadowEvent.SHOW_BEFORE_SHADOW]: false,
-      [ShadowEvent.SHOW_AFTER_SHADOW]: false
+      [ShadowEvent.SHOW_AFTER_SHADOW]: false,
+      tableWrapperWidth: undefined,
+      tableWrapperHeight: undefined
     });
     _defineProperty(this, "updateShadowState", (shadowKey, value) => {
       if (this.state[shadowKey] === value) {
@@ -161,7 +170,7 @@ class TableComponent extends React.Component {
         getPos,
         containerWidth,
         options,
-        getEditorFeatureFlags
+        isTableScalingEnabled
       } = this.props;
       const node = getNode();
       const {
@@ -177,9 +186,6 @@ class TableComponent extends React.Component {
         width
       } = containerWidth;
       this.scaleTableDebounced.cancel();
-      const {
-        tablePreserveWidth = false
-      } = getEditorFeatureFlags();
       const tr = scaleTable(this.table, {
         ...scaleOptions,
         node,
@@ -188,7 +194,7 @@ class TableComponent extends React.Component {
         containerWidth: width,
         previousContainerWidth: this.containerWidth.width || width,
         ...options
-      }, domAtPos, tablePreserveWidth)(state.tr);
+      }, domAtPos, isTableScalingEnabled)(state.tr);
       dispatch(tr);
     });
     _defineProperty(this, "setTimerToSendInitialOverflowCaptured", isOverflowing => {
@@ -295,6 +301,18 @@ class TableComponent extends React.Component {
     this.layoutSize = this.tableNodeLayoutSize(this.node, _containerWidth.width, {
       isFullWidthModeEnabled
     });
+    this.resizeObserver = new ResizeObserver(entries => {
+      for (let entry of entries) {
+        this.setState(prev => {
+          var _entry$contentRect, _entry$contentRect2;
+          return (prev === null || prev === void 0 ? void 0 : prev.tableWrapperWidth) === ((_entry$contentRect = entry.contentRect) === null || _entry$contentRect === void 0 ? void 0 : _entry$contentRect.width) && (prev === null || prev === void 0 ? void 0 : prev.tableWrapperHeight) === ((_entry$contentRect2 = entry.contentRect) === null || _entry$contentRect2 === void 0 ? void 0 : _entry$contentRect2.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
@@ -313,8 +331,12 @@ class TableComponent extends React.Component {
       options,
       isDragAndDropEnabled,
       getNode,
-      getEditorFeatureFlags
+      getEditorFeatureFlags,
+      isTableScalingEnabled
     } = this.props;
+    if (isTableScalingEnabled) {
+      this.handleColgroupUpdates(true);
+    }
     if (allowColumnResizing && this.wrapper && !isIE11) {
       this.wrapper.addEventListener('scroll', this.handleScrollDebounced, {
         passive: true
@@ -349,10 +371,13 @@ class TableComponent extends React.Component {
       this.onStickyState(currentStickyState);
     }
     eventDispatcher.on(stickyHeadersPluginKey.key, this.onStickyState);
-    const initialIsOveflowing = this.state[ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[ShadowEvent.SHOW_AFTER_SHADOW];
-    this.setTimerToSendInitialOverflowCaptured(initialIsOveflowing);
+    if (isOverflowAnalyticsEnabled) {
+      const initialIsOveflowing = this.state[ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[ShadowEvent.SHOW_AFTER_SHADOW];
+      this.setTimerToSendInitialOverflowCaptured(initialIsOveflowing);
+    }
   }
   componentWillUnmount() {
+    var _this$resizeObserver;
     const {
       allowColumnResizing,
       eventDispatcher,
@@ -366,6 +391,7 @@ class TableComponent extends React.Component {
     if (isDragAndDropEnabled && this.dragAndDropCleanupFn) {
       this.dragAndDropCleanupFn();
     }
+    (_this$resizeObserver = this.resizeObserver) === null || _this$resizeObserver === void 0 ? void 0 : _this$resizeObserver.disconnect();
     const {
       stickyScrollbar
     } = getEditorFeatureFlags();
@@ -392,24 +418,22 @@ class TableComponent extends React.Component {
       clearTimeout(this.initialOverflowCaptureTimerId);
     }
   }
-  handleColgroupUpdates() {
+  handleColgroupUpdates(force = false) {
     var _this$containerWidth;
     const {
       getNode,
       containerWidth,
       isResizing,
       view,
-      getPos,
-      tableRef
+      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 = '';
-    const tableRenderWidth = containerWidth.width - TABLE_MARGIN;
+    this.table.style.width = '';
+    const tableRenderWidth = containerWidth.width - TABLE_EDITOR_MARGIN;
     const tableNode = getNode();
     const start = getPos() || 0;
     const depth = view.state.doc.resolve(start).depth;
@@ -421,17 +445,12 @@ class TableComponent extends React.Component {
     const {
       width: tableNodeWidth
     } = tableNode.attrs;
-    const tableColumnWidths = calcTableColumnWidths(tableNode);
     const shouldTableScale = tableRenderWidth < tableNodeWidth;
-    let isTableColumnWidthsSame = false;
-    if (this.tableColumnWidths) {
-      isTableColumnWidthsSame = tableColumnWidths === null || tableColumnWidths === void 0 ? void 0 : tableColumnWidths.every((width, index) => width === this.tableColumnWidths[index]);
-    }
     const {
       width: containerWidthValue
     } = containerWidth;
     const isWidthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.width) !== containerWidthValue;
-    if (shouldTableScale && !isResizing && (!isTableColumnWidthsSame || isWidthChanged)) {
+    if (force || shouldTableScale && !isResizing && isWidthChanged) {
       const resizeState = getResizeState({
         minWidth: COLUMN_MIN_WIDTH,
         maxSize: tableRenderWidth,
@@ -439,14 +458,11 @@ class TableComponent extends React.Component {
         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(_, prevState) {
     var _this$wrapper;
@@ -457,16 +473,13 @@ class TableComponent extends React.Component {
       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();
     }
     if (isInDanger && !table) {
@@ -505,35 +518,43 @@ class TableComponent extends React.Component {
         } = this.props;
         const shouldRecreateResizeCols = !(options !== null && options !== void 0 && options.isTableResizingEnabled) || !isResizing || tablesHaveDifferentNoOfColumns(currentTable, previousTable) && isResizing;
         if (shouldRecreateResizeCols) {
-          insertColgroupFromNode(this.table, currentTable, tablePreserveWidth);
+          insertColgroupFromNode(this.table, currentTable, isTableScalingEnabled);
         }
         updateControls()(view.state);
       }
       this.handleTableResizingDebounced();
     }
-    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];
-    if (this.initialOverflowCaptureTimerId) {
-      clearTimeout(this.initialOverflowCaptureTimerId);
-    }
-    if (!this.isInitialOverflowSent) {
-      this.setTimerToSendInitialOverflowCaptured(newIsOverflowing);
+    if (isOverflowAnalyticsEnabled) {
+      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];
+      if (this.initialOverflowCaptureTimerId) {
+        clearTimeout(this.initialOverflowCaptureTimerId);
+      }
+      if (!this.isInitialOverflowSent) {
+        this.setTimerToSendInitialOverflowCaptured(newIsOverflowing);
+      }
+      if (this.isInitialOverflowSent && prevIsOverflowing !== newIsOverflowing) {
+        var _this$state2;
+        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$state2 = this.state) === null || _this$state2 === void 0 ? void 0 : _this$state2.parentWidth) || 0
+        }));
+      }
     }
-    if (this.isInitialOverflowSent && prevIsOverflowing !== newIsOverflowing) {
-      var _this$state2;
-      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$state2 = this.state) === null || _this$state2 === void 0 ? void 0 : _this$state2.parentWidth) || 0
-      }));
+  }
+  observeTable(table) {
+    if (table) {
+      var _this$resizeObserver2;
+      (_this$resizeObserver2 = this.resizeObserver) === null || _this$resizeObserver2 === void 0 ? void 0 : _this$resizeObserver2.observe(table);
     }
   }
   render() {
@@ -551,7 +572,8 @@ class TableComponent extends React.Component {
       getPos,
       pluginInjectionApi,
       isDragAndDropEnabled,
-      getEditorFeatureFlags
+      getEditorFeatureFlags,
+      isTableScalingEnabled
     } = this.props;
     const {
       showBeforeShadow,
@@ -588,7 +610,8 @@ class TableComponent extends React.Component {
       ,
       selection: view.state.selection,
       headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
-      stickyHeader: this.state.stickyHeader
+      stickyHeader: this.state.stickyHeader,
+      tableWrapperWidth: this.state.tableWrapperWidth
     });
     const tableContainerWidth = getTableContainerWidth(node);
     const colControls = isDragAndDropEnabled ? /*#__PURE__*/React.createElement(TableFloatingColumnControls, {
@@ -614,7 +637,8 @@ class TableComponent extends React.Component {
       getScrollOffset: () => {
         var _this$wrapper2;
         return ((_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.scrollLeft) || 0;
-      }
+      },
+      tableWrapperHeight: this.state.tableWrapperHeight
     }) : null;
     const shadowPadding = allowControls && tableActive ? -tableToolbarSize : tableMarginSides;
     const shadowStyle = memoizeOne(visible => ({
@@ -635,8 +659,7 @@ class TableComponent extends React.Component {
     const isNested = isTableNested(view.state, tablePos);
     const topStickyShadowPosition = isDragAndDropEnabled ? this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + 2 : this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2;
     const {
-      stickyScrollbar,
-      tablePreserveWidth
+      stickyScrollbar
     } = getEditorFeatureFlags();
     return /*#__PURE__*/React.createElement(TableContainer, {
       className: classnames(ClassName.TABLE_CONTAINER, {
@@ -653,9 +676,10 @@ class TableComponent extends React.Component {
       isBreakoutEnabled: options === null || options === void 0 ? void 0 : options.isBreakoutEnabled,
       isNested: isNested,
       pluginInjectionApi: pluginInjectionApi,
+      tableWrapperHeight: this.state.tableWrapperHeight,
       isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled,
       isResizing: isResizing,
-      tablePreserveWidth: tablePreserveWidth
+      isTableScalingEnabled: isTableScalingEnabled
     }, /*#__PURE__*/React.createElement("div", {
       className: ClassName.TABLE_STICKY_SENTINEL_TOP,
       "data-testid": "sticky-sentinel-top"
@@ -693,6 +717,7 @@ class TableComponent extends React.Component {
           if (tableElement !== this.table) {
             this.table = tableElement;
             this.createShadowSentinels(this.table);
+            this.observeTable(this.table);
           }
         }
       }

package/dist/es2019/nodeviews/TableContainer.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useRef } from 'react';
+import React, { forwardRef, useCallback, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
@@ -42,10 +42,12 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   tableRef,
   isResizing,
   pluginInjectionApi,
-  tablePreserveWidth
+  isTableScalingEnabled,
+  tableWrapperHeight
 }) => {
   const containerRef = useRef(null);
   const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
+  const [resizing, setIsResizing] = useState(false);
   const updateContainerHeight = useCallback(height => {
     var _containerRef$current;
     // current StickyHeader State is not stable to be fetch.
@@ -53,31 +55,24 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     //    consistently fetch and refactor below
     const stickyHeaders = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getElementsByClassName('pm-table-sticky');
     if (!stickyHeaders || stickyHeaders.length < 1) {
-      var _containerRef$current2;
       // when starting to drag, we need to keep the original space,
       // -- When sticky header not appear, margin top(24px) and margin bottom(16px), should be 40px,
       //    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$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.style.setProperty('height', typeof height === 'number' ? `${height + 40.5}px` : 'auto');
+      return typeof height === 'number' ? `${height + 40.5}px` : 'auto';
     } else {
-      var _containerRef$current3, _containerRef$current4;
-      const stickyHeaderHeight = ((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.getElementsByTagName('th')[0].getBoundingClientRect().height) || 0;
-      (_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.style.setProperty('height', typeof height === 'number' ? `${height + stickyHeaderHeight + 39.5}px` : 'auto');
+      var _containerRef$current2;
+      const stickyHeaderHeight = ((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.getElementsByTagName('th')[0].getBoundingClientRect().height) || 0;
+      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 => {
     if (!containerRef.current) {
       return;
@@ -107,7 +102,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   }, [pluginInjectionApi]);
   const tableWidth = getTableContainerWidth(node);
   // 76 is currently an accepted padding value considering the spacing for resizer handle
-  const responsiveContainerWidth = tablePreserveWidth ? containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide / 2 : containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide;
+  const responsiveContainerWidth = isTableScalingEnabled ? containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide / 2 : containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide;
   const width = Math.min(tableWidth, responsiveContainerWidth);
   if (!isResizing) {
     tableWidthRef.current = width;
@@ -125,7 +120,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     displayGuideline,
     attachAnalyticsEvent,
     displayGapCursor,
-    tablePreserveWidth
+    isTableScalingEnabled
   };
   if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
     tableResizerProps = {
@@ -141,7 +136,8 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      width: tableWidthRef.current
+      width: tableWidthRef.current,
+      height: resizing ? updateContainerHeight(tableWrapperHeight !== null && tableWrapperHeight !== void 0 ? tableWrapperHeight : 'auto') : 'auto'
     },
     className: ClassName.TABLE_RESIZER_CONTAINER,
     ref: containerRef
@@ -164,9 +160,10 @@ export const TableContainer = ({
   getPos,
   tableRef,
   isNested,
+  tableWrapperHeight,
   isResizing,
   pluginInjectionApi,
-  tablePreserveWidth
+  isTableScalingEnabled
 }) => {
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/React.createElement(ResizableTableContainer, {
@@ -176,9 +173,10 @@ export const TableContainer = ({
       editorView: editorView,
       getPos: getPos,
       tableRef: tableRef,
+      tableWrapperHeight: tableWrapperHeight,
       isResizing: isResizing,
       pluginInjectionApi: pluginInjectionApi,
-      tablePreserveWidth: tablePreserveWidth
+      isTableScalingEnabled: isTableScalingEnabled
     }, children);
   }
   const tableWidth = isBreakoutEnabled ? calcTableWidth(node.attrs.layout, editorWidth) : 'inherit';

package/dist/es2019/nodeviews/TableResizer.js

@@ -51,7 +51,7 @@ const getResizerHandleHeight = tableRef => {
 };
 const getResizerMinWidth = node => {
   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;
@@ -83,7 +83,7 @@ export const TableResizer = ({
   displayGuideline,
   attachAnalyticsEvent,
   displayGapCursor,
-  tablePreserveWidth
+  isTableScalingEnabled
 }) => {
   var _findTable, _editorView$state;
   const currentGap = useRef(0);
@@ -130,13 +130,13 @@ export const TableResizer = ({
   }) => {
     if (gap !== currentGap.current) {
       currentGap.current = gap;
-      const visibleGuidelines = getVisibleGuidelines(tablePreserveWidth ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, containerWidth);
+      const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, containerWidth);
       displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, visibleGuidelines));
     }
-  }, [tablePreserveWidth, containerWidth, displayGuideline]);
+  }, [isTableScalingEnabled, containerWidth, displayGuideline]);
   const guidelineSnaps = useMemo(() => snappingEnabled ? {
-    x: tablePreserveWidth ? defaultTablePreserveSnappingWidths(containerWidth) : defaultSnappingWidths
-  } : undefined, [snappingEnabled, tablePreserveWidth, containerWidth]);
+    x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth) : defaultSnappingWidths
+  } : undefined, [snappingEnabled, isTableScalingEnabled, containerWidth]);
   useEffect(() => {
     return () => {
       // only bring back the cursor if this table was deleted - i.e. if a user was resizing, then another
@@ -174,12 +174,12 @@ export const TableResizer = ({
       name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
     });
     dispatch(tr);
-    const visibleGuidelines = getVisibleGuidelines(tablePreserveWidth ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, containerWidth);
+    const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));
     if (getBooleanFF('platform.editor.resizing-table-height-improvement') && onResizeStart) {
       onResizeStart();
     }
-  }, [startMeasure, editorView, displayGapCursor, tablePreserveWidth, containerWidth, displayGuideline, onResizeStart]);
+  }, [startMeasure, editorView, displayGapCursor, isTableScalingEnabled, containerWidth, displayGuideline, onResizeStart]);
   const handleResize = useCallback((originalState, delta) => {
     countFrames();
     const newWidth = originalState.width + delta.width;
@@ -197,11 +197,11 @@ export const TableResizer = ({
       prevNode: node,
       start: pos + 1,
       parentWidth: newWidth
-    }, editorView.domAtPos.bind(editorView), tablePreserveWidth);
-    updateActiveGuidelines(findClosestSnap(newWidth, tablePreserveWidth ? defaultTablePreserveSnappingWidths(containerWidth) : defaultSnappingWidths, tablePreserveWidth ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE));
+    }, editorView.domAtPos.bind(editorView), isTableScalingEnabled);
+    updateActiveGuidelines(findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE));
     updateWidth(newWidth);
     return newWidth;
-  }, [countFrames, tablePreserveWidth, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos]);
+  }, [countFrames, isTableScalingEnabled, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos]);
   const scheduleResize = useMemo(() => rafSchd(handleResize), [handleResize]);
   const handleResizeStop = useCallback((originalState, delta) => {
     isResizing.current = false;
@@ -238,7 +238,7 @@ export const TableResizer = ({
         prevNode: node,
         start: pos + 1,
         parentWidth: newWidth
-      }, editorView.domAtPos.bind(editorView), tablePreserveWidth)(tr);
+      }, editorView.domAtPos.bind(editorView), isTableScalingEnabled)(tr);
       const scaledNode = tr.doc.nodeAt(pos);
       (_attachAnalyticsEvent2 = attachAnalyticsEvent(generateResizedPayload({
         originalNode: node,
@@ -256,7 +256,7 @@ export const TableResizer = ({
       onResizeStop();
     }
     return newWidth;
-  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, tablePreserveWidth]);
+  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled]);
   const handleTableSizeChangeOnKeypress = useCallback(step => {
     const newWidth = width + step;
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {

package/dist/es2019/nodeviews/table.js

@@ -57,17 +57,15 @@ export default class TableView extends ReactNodeView {
     _defineProperty(this, "hasHoveredRows", false);
     this.getPos = props.getPos;
     this.eventDispatcher = props.eventDispatcher;
-    this.getEditorFeatureFlags = props.getEditorFeatureFlags;
+    this.options = props.options;
   }
   getContentDOM() {
     const rendered = DOMSerializer.renderSpec(document, toDOM(this.node, this.reactComponentProps));
     if (rendered.dom) {
+      var _this$options;
       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 = this.options) !== null && _this$options !== void 0 && _this$options.isTableScalingEnabled)) {
         const tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos());
         if (tableInlineWidth) {
           handleInlineTableWidth(this.table, tableInlineWidth);
@@ -157,6 +155,7 @@ export default class TableView extends ReactNodeView {
           isHeaderRowEnabled: pluginState.isHeaderRowEnabled,
           isHeaderColumnEnabled: pluginState.isHeaderColumnEnabled,
           isDragAndDropEnabled: pluginState.isDragAndDropEnabled,
+          isTableScalingEnabled: pluginState.isTableScalingEnabled,
           tableActive: tableActive,
           ordering: pluginState.ordering,
           isResizing: isResizing,
@@ -165,8 +164,7 @@ export default class TableView extends ReactNodeView {
           contentDOM: forwardRef,
           getEditorFeatureFlags: props.getEditorFeatureFlags,
           dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
-          pluginInjectionApi: props.pluginInjectionApi,
-          tableRef: this.table
+          pluginInjectionApi: props.pluginInjectionApi
         });
       }
     });
@@ -234,7 +232,8 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
     isFullWidthModeEnabled,
     wasFullWidthModeEnabled,
     isTableResizingEnabled,
-    isDragAndDropEnabled
+    isDragAndDropEnabled,
+    isTableScalingEnabled
   } = getPluginState(view.state);
   const {
     allowColumnResizing
@@ -252,7 +251,8 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
       isFullWidthModeEnabled,
       wasFullWidthModeEnabled,
       isTableResizingEnabled,
-      isDragAndDropEnabled
+      isDragAndDropEnabled,
+      isTableScalingEnabled
     },
     getEditorContainerWidth,
     getEditorFeatureFlags,