@atlaskit/editor-plugin-table 22.1.3 → 22.2.0

package/dist/es2019/pm-plugins/commands/column-resize.js

@@ -24,8 +24,7 @@ const updateResizeHandleAndStatePosition = (rowIndex, columnIndex, nextResizeHan
     pluginConfig: {
       allowColumnResizing
     },
-    getIntl,
-    isDragAndDropEnabled
+    getIntl
   } = getPluginState(state);
   const fakeDispatch = tr => {
     customTr = tr;
@@ -39,7 +38,7 @@ const updateResizeHandleAndStatePosition = (rowIndex, columnIndex, nextResizeHan
   });
   const decorationsWithWidgetAndHandle = updateDecorations(customTr.doc, decorationsWithWidget, createColumnLineResize(state.selection, {
     right: columnIndex
-  }, isDragAndDropEnabled), TableDecorations.COLUMN_RESIZING_HANDLE_LINE);
+  }), TableDecorations.COLUMN_RESIZING_HANDLE_LINE);
   getTablePluginCommand({
     type: 'START_KEYBOARD_COLUMN_RESIZE',
     data: {

package/dist/es2019/pm-plugins/commands/hover.js

@@ -33,13 +33,10 @@ export const hoverMergedCells = () => createCommand(state => {
 }, tr => tr.setMeta('addToHistory', false));
 export const hoverColumns = (hoveredColumns, isInDanger) => createCommand(state => {
   const cells = getCellsInColumn(hoveredColumns)(state.tr.selection);
-  const {
-    isDragAndDropEnabled
-  } = getPluginState(state);
   if (!cells) {
     return false;
   }
-  const decorations = createControlsHoverDecoration(cells, 'column', state.tr, isDragAndDropEnabled, hoveredColumns, isInDanger);
+  const decorations = createControlsHoverDecoration(cells, 'column', state.tr, hoveredColumns, isInDanger);
   return {
     type: 'HOVER_COLUMNS',
     data: {
@@ -54,10 +51,7 @@ export const hoverRows = (hoveredRows, isInDanger) => createCommand(state => {
   if (!cells) {
     return false;
   }
-  const {
-    isDragAndDropEnabled
-  } = getPluginState(state);
-  const decorations = createControlsHoverDecoration(cells, 'row', state.tr, isDragAndDropEnabled, hoveredRows, isInDanger);
+  const decorations = createControlsHoverDecoration(cells, 'row', state.tr, hoveredRows, isInDanger);
   return {
     type: 'HOVER_ROWS',
     data: {
@@ -79,10 +73,7 @@ export const hoverTable = (isInDanger, isSelected) => createCommand(state => {
   if (!cells) {
     return false;
   }
-  const {
-    isDragAndDropEnabled
-  } = getPluginState(state);
-  const decorations = createControlsHoverDecoration(cells, 'table', state.tr, isDragAndDropEnabled, [], isInDanger, isSelected);
+  const decorations = createControlsHoverDecoration(cells, 'table', state.tr, [], isInDanger, isSelected);
   return {
     type: 'HOVER_TABLE',
     data: {
@@ -103,13 +94,10 @@ export const clearHoverSelection = () => createCommand(state => ({
   }
 }));
 export const showResizeHandleLine = cellColumnPositioning => createCommand(state => {
-  const {
-    isDragAndDropEnabled
-  } = getPluginState(state);
   return {
     type: 'SHOW_RESIZE_HANDLE_LINE',
     data: {
-      decorationSet: updatePluginStateDecorations(state, createColumnLineResize(state.selection, cellColumnPositioning, isDragAndDropEnabled), TableDecorations.COLUMN_RESIZING_HANDLE_LINE)
+      decorationSet: updatePluginStateDecorations(state, createColumnLineResize(state.selection, cellColumnPositioning), TableDecorations.COLUMN_RESIZING_HANDLE_LINE)
     }
   };
 });

package/dist/es2019/pm-plugins/commands/misc.js

@@ -10,7 +10,7 @@ import { getDecorations } from '../decorations/plugin';
 import { buildColumnResizingDecorations, clearColumnResizingDecorations } from '../decorations/utils/column-resizing';
 import { createCommand, getPluginState } from '../plugin-factory';
 import { fixAutoSizedTable } from '../transforms/fix-tables';
-import { createColumnControlsDecoration, createColumnSelectedDecoration } from '../utils/decoration';
+import { createColumnSelectedDecoration } from '../utils/decoration';
 import { checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isIsolating } from '../utils/nodes';
 import { updatePluginStateDecorations } from '../utils/update-plugin-state-decorations';
 const DARK_MODE_CELL_COLOR = '#1f1f21';
@@ -27,9 +27,6 @@ export const setTableRef = ref => createCommand(state => {
   const tableNode = ref && foundTable ? foundTable.node : undefined;
   const tablePos = ref && foundTable ? foundTable.pos : undefined;
   const tableWrapperTarget = closestElement(tableRef, `.${ClassName.TABLE_NODE_WRAPPER}`) || undefined;
-  const {
-    isDragAndDropEnabled
-  } = getPluginState(state);
   return {
     type: 'SET_TABLE_REF',
     data: {
@@ -40,8 +37,6 @@ export const setTableRef = ref => createCommand(state => {
       isNumberColumnEnabled: checkIfNumberColumnEnabled(state.selection),
       isHeaderRowEnabled: checkIfHeaderRowEnabled(state.selection),
       isHeaderColumnEnabled: checkIfHeaderColumnEnabled(state.selection),
-      // decoration set is drawn by the decoration plugin, skip this for DnD as all controls are floating
-      decorationSet: !isDragAndDropEnabled ? updatePluginStateDecorations(state, createColumnControlsDecoration(state.selection), TableDecorations.COLUMN_CONTROLS_DECORATIONS) : undefined,
       resizeHandleRowIndex: undefined,
       resizeHandleColumnIndex: undefined
     }

package/dist/es2019/pm-plugins/decorations/plugin.js

@@ -14,7 +14,6 @@ export const handleDocOrSelectionChanged = (tr, decorationSet, oldState, newStat
   const isResizing = (_tableWidthPluginKey$ = tableWidthPluginKey.getState(newState)) === null || _tableWidthPluginKey$ === void 0 ? void 0 : _tableWidthPluginKey$.resizing;
   const wasResizing = (_tableWidthPluginKey$2 = tableWidthPluginKey.getState(oldState)) === null || _tableWidthPluginKey$2 === void 0 ? void 0 : _tableWidthPluginKey$2.resizing;
   const {
-    isDragAndDropEnabled = false,
     isInDanger,
     isTableHovered
   } = tablePluginKey.getState(newState) || {};
@@ -26,10 +25,7 @@ export const handleDocOrSelectionChanged = (tr, decorationSet, oldState, newStat
   } else if (tr.docChanged || tr.selection instanceof CellSelection || changedResizing) {
     return buildColumnControlsDecorations({
       decorationSet,
-      tr,
-      options: {
-        isDragAndDropEnabled
-      }
+      tr
     });
   } else if (tr.selectionSet) {
     var _findTable, _findTable2;
@@ -44,10 +40,7 @@ export const handleDocOrSelectionChanged = (tr, decorationSet, oldState, newStat
     if ((isInDanger || isTableHovered) && (!insideTable(newState) || ((_findTable = findTable(newState.selection)) === null || _findTable === void 0 ? void 0 : _findTable.node) !== ((_findTable2 = findTable(oldState.selection)) === null || _findTable2 === void 0 ? void 0 : _findTable2.node))) {
       return buildColumnControlsDecorations({
         decorationSet,
-        tr,
-        options: {
-          isDragAndDropEnabled
-        }
+        tr
       });
     }
   }

package/dist/es2019/pm-plugins/decorations/utils/column-controls.js

@@ -1,9 +1,8 @@
 // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
 
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { findTable } from '@atlaskit/editor-tables/utils';
 import { TableDecorations } from '../../../types';
-import { createColumnControlsDecoration, createColumnSelectedDecoration, findColumnControlSelectedDecoration, findControlsHoverDecoration, updateDecorations } from '../../utils/decoration';
+import { createColumnSelectedDecoration, findColumnControlSelectedDecoration, findControlsHoverDecoration, updateDecorations } from '../../utils/decoration';
 import { composeDecorations } from './compose-decorations';
 const isColumnSelected = tr => tr.selection instanceof CellSelection && tr.selection.isColSelection();
 
@@ -20,16 +19,6 @@ const maybeUpdateColumnSelectedDecoration = ({
   }
   return updateDecorations(tr.doc, decorationSet, createColumnSelectedDecoration(tr), TableDecorations.COLUMN_SELECTED);
 };
-const maybeUpdateColumnControlsDecoration = ({
-  decorationSet,
-  tr
-}) => {
-  const table = findTable(tr.selection);
-  if (!table) {
-    return decorationSet;
-  }
-  return updateDecorations(tr.doc, decorationSet, createColumnControlsDecoration(tr.selection), TableDecorations.COLUMN_CONTROLS_DECORATIONS);
-};
 
 // @see: https://product-fabric.atlassian.net/browse/ED-7304
 const removeColumnControlsSelectedDecoration = ({
@@ -50,16 +39,9 @@ export const maybeUpdateColumnControlsSelectedDecoration = ({
 };
 export const buildColumnControlsDecorations = ({
   decorationSet,
-  tr,
-  options
+  tr
 }) => {
-  if (options.isDragAndDropEnabled) {
-    return composeDecorations([removeColumnControlsSelectedDecoration, removeControlsHoverDecoration, maybeUpdateColumnSelectedDecoration])({
-      decorationSet,
-      tr
-    });
-  }
-  return composeDecorations([removeColumnControlsSelectedDecoration, removeControlsHoverDecoration, maybeUpdateColumnSelectedDecoration, maybeUpdateColumnControlsDecoration])({
+  return composeDecorations([removeColumnControlsSelectedDecoration, removeControlsHoverDecoration, maybeUpdateColumnSelectedDecoration])({
     decorationSet,
     tr
   });

package/dist/es2019/pm-plugins/utils/decoration.js

@@ -20,7 +20,7 @@ export const createCellHoverDecoration = cells => cells.map(cell => Decoration.n
 }, {
   key: TableDecorations.CELL_CONTROLS_HOVER
 }));
-export const createControlsHoverDecoration = (cells, type, tr, isDragAndDropEnable, hoveredIndexes, danger, selected) => {
+export const createControlsHoverDecoration = (cells, type, tr, hoveredIndexes, danger, selected) => {
   const table = findTable(tr.selection);
   if (!table) {
     return [];
@@ -64,13 +64,9 @@ export const createControlsHoverDecoration = (cells, type, tr, isDragAndDropEnab
     if (selected) {
       classes.push(ClassName.SELECTED_CELL);
     }
-    if (isDragAndDropEnable) {
-      if (type === 'column' || type === 'row') {
-        classes.pop();
-        classes.push(ClassName.HOVERED_NO_HIGHLIGHT);
-      }
-    } else {
-      classes.push(type === 'column' ? ClassName.HOVERED_COLUMN : type === 'row' ? ClassName.HOVERED_ROW : ClassName.HOVERED_TABLE);
+    if (type === 'column' || type === 'row') {
+      classes.pop();
+      classes.push(ClassName.HOVERED_NO_HIGHLIGHT);
     }
     let key;
     switch (type) {
@@ -366,7 +362,7 @@ export const createResizeHandleDecoration = (tr, rowIndexTarget, columnEndIndexT
  * this function will return two decorations applying a new class `ClassName.WITH_RESIZE_LINE`
  * only on the cells: `C1` and `D1`.
  */
-export const createColumnLineResize = (selection, cellColumnPositioning, isDragAndDropEnabled) => {
+export const createColumnLineResize = (selection, cellColumnPositioning) => {
   const table = findTable(selection);
   if (!table || cellColumnPositioning.right === null) {
     return [];
@@ -377,7 +373,7 @@ export const createColumnLineResize = (selection, cellColumnPositioning, isDragA
   if (isLastColumn) {
     columnIndex -= 1;
   }
-  const decorationClassName = isDragAndDropEnabled ? isLastColumn ? ClassName.WITH_DRAG_RESIZE_LINE_LAST_COLUMN : ClassName.WITH_DRAG_RESIZE_LINE : isLastColumn ? ClassName.WITH_RESIZE_LINE_LAST_COLUMN : ClassName.WITH_RESIZE_LINE;
+  const decorationClassName = isLastColumn ? ClassName.WITH_DRAG_RESIZE_LINE_LAST_COLUMN : ClassName.WITH_DRAG_RESIZE_LINE;
   const cellPositions = makeArray(map.height).map(rowIndex => map.map[map.width * rowIndex + columnIndex]).filter((cellPosition, rowIndex) => {
     if (isLastColumn) {
       return true; // If is the last column no filter applied

package/dist/es2019/pm-plugins/utils/sticky-header.js

@@ -6,11 +6,11 @@ export const isAnchorSupported = memorizeOne(() => {
   }
   return false;
 });
-export const isNativeStickySupported = isDragAndDropEnabled => {
+export const isNativeStickySupported = () => {
   const safariVersion = getBrowserInfo().safari_version;
   const isBrowserSafari = !Number.isNaN(safariVersion);
   return (
     // Safari has a bug with position: sticky and content editable, so we don't support it
-    !isBrowserSafari && isAnchorSupported() && isDragAndDropEnabled
+    !isBrowserSafari && isAnchorSupported()
   );
 };

package/dist/es2019/pm-plugins/utils/tableMode.js

@@ -77,6 +77,49 @@ export const applyMeasuredWidthToAllTables = (view, pluginInjectionApi) => {
   }
 };
 
+/**
+ * Temporarily overrides inline styles on the table and its surrounding containers so the browser
+ * lays columns out with `table-layout: auto`, takes a content-width measurement, and then
+ * **resets every modified style** so no temporary overrides leak into the rendered output.
+ */
+export const measureTableWithAutoLayout = tableRef => {
+  const cols = Array.from(tableRef.querySelectorAll(':scope > colgroup > col'));
+  const contentWrap = tableRef.closest(`.${TableSharedCssClassName.TABLE_VIEW_CONTENT_WRAP}`);
+  const resizerContainer = contentWrap === null || contentWrap === void 0 ? void 0 : contentWrap.querySelector(`.${TableSharedCssClassName.TABLE_RESIZER_CONTAINER}`);
+  const resizerItem = resizerContainer === null || resizerContainer === void 0 ? void 0 : resizerContainer.querySelector('.resizer-item.display-handle');
+
+  // Capture current inline styles so we can restore them after measurement
+  const prevTableWidth = tableRef.style.width;
+  const prevTableLayout = tableRef.style.tableLayout;
+  const prevColWidths = cols.map(col => col.style.width);
+  const prevResizerItemWidth = resizerItem === null || resizerItem === void 0 ? void 0 : resizerItem.style.width;
+
+  // Apply temporary styles for content-based measurement
+  tableRef.style.width = '';
+  tableRef.style.tableLayout = 'auto';
+  cols.forEach(col => col.style.width = '');
+  if (resizerContainer) {
+    // favour CSS var to align with the table first render state, which gets reset
+    // once resized by user. By doing this we avoid the need to any 'reset' work after
+    // measurement and ensures it works if the table has been resized or not in the session.
+    resizerContainer.style.width = 'var(--ak-editor-table-width)';
+    resizerContainer.style.setProperty('--ak-editor-table-width', 'max-content');
+  }
+  if (resizerItem) {
+    resizerItem.style.width = 'max-content';
+  }
+  const measurement = getTableMeasurement(tableRef);
+
+  // Reset all inline styles back to their previous values
+  tableRef.style.width = prevTableWidth;
+  tableRef.style.tableLayout = prevTableLayout;
+  cols.forEach((col, i) => col.style.width = prevColWidths[i]);
+  if (resizerItem) {
+    resizerItem.style.width = prevResizerItemWidth !== null && prevResizerItemWidth !== void 0 ? prevResizerItemWidth : '';
+  }
+  return measurement;
+};
+
 /**
  * Used to measure a selected table width with it's content being laid out natively by the browser
  */
@@ -94,26 +137,11 @@ export const applyMeasuredWidthToSelectedTable = (view, api) => {
   if (!(tableState !== null && tableState !== void 0 && tableState.tableRef)) {
     return;
   }
-  const tableRef = tableState.tableRef;
 
   // Instead of dispatching a transaction to "strip widths" and then waiting
-  // for a rAF to measure natural column widths, instea directly update the DOM elements and
-  // take a measurement.
-  const cols = Array.from(tableRef.querySelectorAll(':scope > colgroup > col'));
-  const contentWrap = tableRef.closest(`.${TableSharedCssClassName.TABLE_VIEW_CONTENT_WRAP}`);
-  const resizerContainer = contentWrap === null || contentWrap === void 0 ? void 0 : contentWrap.querySelector(`.${TableSharedCssClassName.TABLE_RESIZER_CONTAINER}`);
-  const resizerItem = resizerContainer === null || resizerContainer === void 0 ? void 0 : resizerContainer.querySelector('.resizer-item.display-handle');
-  tableRef.style.width = '';
-  tableRef.style.tableLayout = 'auto';
-  cols.forEach(col => col.style.width = '');
-  if (resizerContainer) {
-    resizerContainer.style.width = 'max-content';
-    resizerContainer.style.setProperty('--ak-editor-table-width', 'max-content');
-  }
-  if (resizerItem) {
-    resizerItem.style.width = 'max-content';
-  }
-  const measurement = getTableMeasurement(tableRef);
+  // for a rAF to measure natural column widths, directly update the DOM elements,
+  // take a measurement, and reset styles so no temporary overrides persist.
+  const measurement = measureTableWithAutoLayout(tableState.tableRef);
   const tr = applyTableMeasurement(view.state.tr, node, measurement, pos);
   api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.attachAnalyticsEvent({
     action: TABLE_ACTION.FIT_TO_CONTENT_ON_DEMAND,

package/dist/es2019/tablePlugin.js

@@ -347,8 +347,7 @@ const tablePlugin = ({
                 },
                 eventType: EVENT_TYPE.TRACK
               })(tr);
-            },
-            dragAndDropEnabled: true
+            }
           });
         }
       }, {

package/dist/es2019/ui/FloatingContextualButton/index.js

@@ -42,7 +42,6 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
     tableWrapper,
     targetCellPosition,
     isCellMenuOpenByKeyboard,
-    isDragAndDropEnabled,
     intl: {
       formatMessage
     }
@@ -102,7 +101,7 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
   }));
   const parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
   const parentStickyNative = targetCellRef.parentElement && (fg('platform_editor_table_sticky_header_patch_4') ? tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.classList.contains(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW) : targetCellRef.parentElement.classList.contains(ClassName.NATIVE_STICKY));
-  if (parentStickyNative && targetCellRef.nodeName === 'TH' && isNativeStickySupported(isDragAndDropEnabled !== null && isDragAndDropEnabled !== void 0 ? isDragAndDropEnabled : false) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
+  if (parentStickyNative && targetCellRef.nodeName === 'TH' && isNativeStickySupported() && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
     var _targetCellRef$parent;
     /* We need to default to checking the anchor style because there may be a conflict with the block controls
      plugin not using the data attribute value and setting the `anchor-name` style property independently of the data attribute.

package/dist/es2019/ui/FloatingContextualMenu/index.js

@@ -8,7 +8,6 @@ import { Popup } from '@atlaskit/editor-common/ui';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD, contextualMenuTriggerSize, tablePopupMenuFitHeight } from '../consts';
 
@@ -31,25 +30,18 @@ const FloatingContextualMenu = ({
   api,
   isDragMenuOpen
 }) => {
-  if (expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) && !editorView) {
+  if (!editorView) {
     return null;
   }
 
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
-  // Remove ! during platform_editor_hydratable_ui cleanup
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const {
     targetCellPosition,
     isDragAndDropEnabled
   } = getPluginState(editorView.state);
-  // Remove ! during platform_editor_hydratable_ui cleanup
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }
-
-  // Remove ! during platform_editor_hydratable_ui cleanup
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const {
     selection
   } = editorView.state;
@@ -60,8 +52,6 @@ const FloatingContextualMenu = ({
   if (!selectionRect) {
     return null;
   }
-  // Remove ! during platform_editor_hydratable_ui cleanup
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const domAtPos = editorView.domAtPos.bind(editorView);
   const targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
   if (!targetCellRef) {
@@ -91,10 +81,7 @@ const FloatingContextualMenu = ({
     stick: true
   }, jsx("div", {
     css: tablePopupStyles(isDragAndDropEnabled)
-  }, jsx(ContextualMenu
-  // Remove ! during platform_editor_hydratable_ui cleanup
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  , {
+  }, jsx(ContextualMenu, {
     editorView: editorView
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,

package/dist/es2019/ui/TableFloatingColumnControls/index.js

@@ -74,7 +74,7 @@ const TableFloatingColumnControls = ({
     containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.style.removeProperty('top');
   }
   let anchorStyles = {};
-  if (isNativeStickySupported(isDragAndDropEnabled !== null && isDragAndDropEnabled !== void 0 ? isDragAndDropEnabled : false) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
+  if (isNativeStickySupported() && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
     var _tableRef$querySelect, _tableRef$querySelect2;
     const rowAnchorName = (_tableRef$querySelect = tableRef.querySelector('tr')) === null || _tableRef$querySelect === void 0 ? void 0 : _tableRef$querySelect.style.getPropertyValue('anchor-name');
     // cast here is due to CSSProperties missing valid positionAnchor property

package/dist/esm/nodeviews/TableComponent.js

@@ -134,18 +134,19 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var prevNode = _this.node;
       var node = getNode();
       var prevAttrs = prevNode.attrs;
-      var isNested = isTableNested(_this.props.view.state, _this.props.getPos());
       var tablePos = _this.props.getPos();
+      var isNested = isTableNested(_this.props.view.state, tablePos);
       var parentWidth = _this.getParentNodeWidth();
       var useMeasuredWidthForBodiedSyncBlock = isNested && typeof tablePos === 'number' && isTableNestedUnderBodiedSyncBlock(_this.props.view.state, tablePos) && fg('platform_synced_block_patch_9');
       if (useMeasuredWidthForBodiedSyncBlock) {
         // Prefer the live DOM measurement (`clientWidth`) over the ResizeObserver-cached
         // value (`wrapperWidth`) because clientWidth is synchronous and more up-to-date
         // at the time this handler runs. Fall back to `wrapperWidth` if the wrapper ref
-        // is not yet available. Both are guarded by `> 1` to ignore degenerate values
-        // that can appear before the element has been laid out.
+        // is not yet available.
+        // The clientWidth > 0 since DOM clientWidth is 0 before layout
+        // The > 1 guard for wrapperWidth was intentional to filter out the degenerate value of 1 that ResizeObserver reports during element unmounting.
         var measuredWrapperWidth;
-        if (_this.wrapper && _this.wrapper.clientWidth > 1) {
+        if (_this.wrapper && _this.wrapper.clientWidth > 0) {
           measuredWrapperWidth = _this.wrapper.clientWidth;
         } else if (_this.wrapperWidth && _this.wrapperWidth > 1) {
           measuredWrapperWidth = _this.wrapperWidth;
@@ -156,7 +157,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           parentWidth = measuredWrapperWidth;
         }
       }
-      if (!useMeasuredWidthForBodiedSyncBlock && isNested && isTableNestedInMoreThanOneNode(_this.props.view.state, _this.props.getPos())) {
+      if (!useMeasuredWidthForBodiedSyncBlock && isNested && isTableNestedInMoreThanOneNode(_this.props.view.state, tablePos)) {
         var resizeObsWrapperWidth = _this.wrapperWidth || 0;
         var wrapperWidthDiffBetweenRerenders = Math.abs(resizeObsWrapperWidth - (_this.state.parentWidth || 0));
         var isOusideOfThreshold = wrapperWidthDiffBetweenRerenders <= NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MIN_THRESHOLD || wrapperWidthDiffBetweenRerenders > NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MAX_THRESHOLD;

package/dist/esm/nodeviews/table-node-views.js

@@ -24,8 +24,7 @@ export var tableHeaderView = function tableHeaderView(options) {
 };
 export var tableRowView = function tableRowView(options) {
   return function (node, view, getPos) {
-    var _options$isDragAndDro;
-    if (isNativeStickySupported((_options$isDragAndDro = options.isDragAndDropEnabled) !== null && _options$isDragAndDro !== void 0 ? _options$isDragAndDro : false) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
+    if (isNativeStickySupported() && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
       return new TableRowNativeStickyWithFallback(node, view, getPos, options.eventDispatcher, options.pluginInjectionApi);
     } else {
       return new TableRow(node, view, getPos, options.eventDispatcher, options.pluginInjectionApi);

package/dist/esm/pm-plugins/commands/column-resize.js

@@ -27,8 +27,7 @@ var updateResizeHandleAndStatePosition = function updateResizeHandleAndStatePosi
     var customTr = state.tr;
     var _getPluginState = getPluginState(state),
       allowColumnResizing = _getPluginState.pluginConfig.allowColumnResizing,
-      getIntl = _getPluginState.getIntl,
-      isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
+      getIntl = _getPluginState.getIntl;
     var fakeDispatch = function fakeDispatch(tr) {
       customTr = tr;
     };
@@ -41,7 +40,7 @@ var updateResizeHandleAndStatePosition = function updateResizeHandleAndStatePosi
     });
     var decorationsWithWidgetAndHandle = updateDecorations(customTr.doc, decorationsWithWidget, createColumnLineResize(state.selection, {
       right: columnIndex
-    }, isDragAndDropEnabled), TableDecorations.COLUMN_RESIZING_HANDLE_LINE);
+    }), TableDecorations.COLUMN_RESIZING_HANDLE_LINE);
     getTablePluginCommand({
       type: 'START_KEYBOARD_COLUMN_RESIZE',
       data: {

package/dist/esm/pm-plugins/commands/hover.js

@@ -42,12 +42,10 @@ export var hoverMergedCells = function hoverMergedCells() {
 export var hoverColumns = function hoverColumns(hoveredColumns, isInDanger) {
   return createCommand(function (state) {
     var cells = getCellsInColumn(hoveredColumns)(state.tr.selection);
-    var _getPluginState = getPluginState(state),
-      isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
     if (!cells) {
       return false;
     }
-    var decorations = createControlsHoverDecoration(cells, 'column', state.tr, isDragAndDropEnabled, hoveredColumns, isInDanger);
+    var decorations = createControlsHoverDecoration(cells, 'column', state.tr, hoveredColumns, isInDanger);
     return {
       type: 'HOVER_COLUMNS',
       data: {
@@ -66,9 +64,7 @@ export var hoverRows = function hoverRows(hoveredRows, isInDanger) {
     if (!cells) {
       return false;
     }
-    var _getPluginState2 = getPluginState(state),
-      isDragAndDropEnabled = _getPluginState2.isDragAndDropEnabled;
-    var decorations = createControlsHoverDecoration(cells, 'row', state.tr, isDragAndDropEnabled, hoveredRows, isInDanger);
+    var decorations = createControlsHoverDecoration(cells, 'row', state.tr, hoveredRows, isInDanger);
     return {
       type: 'HOVER_ROWS',
       data: {
@@ -94,9 +90,7 @@ export var hoverTable = function hoverTable(isInDanger, isSelected) {
     if (!cells) {
       return false;
     }
-    var _getPluginState3 = getPluginState(state),
-      isDragAndDropEnabled = _getPluginState3.isDragAndDropEnabled;
-    var decorations = createControlsHoverDecoration(cells, 'table', state.tr, isDragAndDropEnabled, [], isInDanger, isSelected);
+    var decorations = createControlsHoverDecoration(cells, 'table', state.tr, [], isInDanger, isSelected);
     return {
       type: 'HOVER_TABLE',
       data: {
@@ -125,12 +119,10 @@ export var clearHoverSelection = function clearHoverSelection() {
 };
 export var showResizeHandleLine = function showResizeHandleLine(cellColumnPositioning) {
   return createCommand(function (state) {
-    var _getPluginState4 = getPluginState(state),
-      isDragAndDropEnabled = _getPluginState4.isDragAndDropEnabled;
     return {
       type: 'SHOW_RESIZE_HANDLE_LINE',
       data: {
-        decorationSet: updatePluginStateDecorations(state, createColumnLineResize(state.selection, cellColumnPositioning, isDragAndDropEnabled), TableDecorations.COLUMN_RESIZING_HANDLE_LINE)
+        decorationSet: updatePluginStateDecorations(state, createColumnLineResize(state.selection, cellColumnPositioning), TableDecorations.COLUMN_RESIZING_HANDLE_LINE)
       }
     };
   });
@@ -159,8 +151,8 @@ export var setTableHovered = function setTableHovered(hovered) {
 };
 export var hoverCell = function hoverCell(rowIndex, colIndex) {
   return createCommand(function (state) {
-    var _getPluginState5 = getPluginState(state),
-      prevHoveredCell = _getPluginState5.hoveredCell;
+    var _getPluginState = getPluginState(state),
+      prevHoveredCell = _getPluginState.hoveredCell;
 
     // If no arguments have been passed then the intention it to reset the hover cell data
     var clear = rowIndex === undefined && colIndex === undefined;

package/dist/esm/pm-plugins/commands/misc.js

@@ -14,7 +14,7 @@ import { getDecorations } from '../decorations/plugin';
 import { buildColumnResizingDecorations, clearColumnResizingDecorations } from '../decorations/utils/column-resizing';
 import { createCommand, getPluginState } from '../plugin-factory';
 import { fixAutoSizedTable } from '../transforms/fix-tables';
-import { createColumnControlsDecoration, createColumnSelectedDecoration } from '../utils/decoration';
+import { createColumnSelectedDecoration } from '../utils/decoration';
 import { checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isIsolating } from '../utils/nodes';
 import { updatePluginStateDecorations } from '../utils/update-plugin-state-decorations';
 var DARK_MODE_CELL_COLOR = '#1f1f21';
@@ -34,8 +34,6 @@ export var setTableRef = function setTableRef(ref) {
     var tableNode = ref && foundTable ? foundTable.node : undefined;
     var tablePos = ref && foundTable ? foundTable.pos : undefined;
     var tableWrapperTarget = closestElement(tableRef, ".".concat(ClassName.TABLE_NODE_WRAPPER)) || undefined;
-    var _getPluginState = getPluginState(state),
-      isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
     return {
       type: 'SET_TABLE_REF',
       data: {
@@ -46,8 +44,6 @@ export var setTableRef = function setTableRef(ref) {
         isNumberColumnEnabled: checkIfNumberColumnEnabled(state.selection),
         isHeaderRowEnabled: checkIfHeaderRowEnabled(state.selection),
         isHeaderColumnEnabled: checkIfHeaderColumnEnabled(state.selection),
-        // decoration set is drawn by the decoration plugin, skip this for DnD as all controls are floating
-        decorationSet: !isDragAndDropEnabled ? updatePluginStateDecorations(state, createColumnControlsDecoration(state.selection), TableDecorations.COLUMN_CONTROLS_DECORATIONS) : undefined,
         resizeHandleRowIndex: undefined,
         resizeHandleColumnIndex: undefined
       }
@@ -332,8 +328,8 @@ export var setMultipleCellAttrs = function setMultipleCellAttrs(attrs, editorVie
   return function (state, dispatch) {
     var cursorPos;
     var tr = state.tr;
-    var _getPluginState2 = getPluginState(state),
-      targetCellPosition = _getPluginState2.targetCellPosition;
+    var _getPluginState = getPluginState(state),
+      targetCellPosition = _getPluginState.targetCellPosition;
     if (isSelectionType(tr.selection, 'cell')) {
       // Ignored via go/ees005
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -494,9 +490,9 @@ export var hideInsertColumnOrRowButton = function hideInsertColumnOrRowButton()
 export var addResizeHandleDecorations = function addResizeHandleDecorations(rowIndex, columnIndex, includeTooltip, nodeViewPortalProviderAPI, isKeyboardResize) {
   return createCommand(function (state) {
     var tableNode = findTable(state.selection);
-    var _getPluginState3 = getPluginState(state),
-      allowColumnResizing = _getPluginState3.pluginConfig.allowColumnResizing,
-      getIntl = _getPluginState3.getIntl;
+    var _getPluginState2 = getPluginState(state),
+      allowColumnResizing = _getPluginState2.pluginConfig.allowColumnResizing,
+      getIntl = _getPluginState2.getIntl;
     if (!tableNode || !allowColumnResizing) {
       return false;
     }
@@ -520,12 +516,12 @@ export var addResizeHandleDecorations = function addResizeHandleDecorations(rowI
 export var updateResizeHandleDecorations = function updateResizeHandleDecorations(nodeViewPortalProviderAPI, rowIndex, columnIndex, includeTooltip) {
   return createCommand(function (state) {
     var tableNode = findTable(state.selection);
-    var _getPluginState4 = getPluginState(state),
-      resizeHandleRowIndex = _getPluginState4.resizeHandleRowIndex,
-      resizeHandleColumnIndex = _getPluginState4.resizeHandleColumnIndex,
-      resizeHandleIncludeTooltip = _getPluginState4.resizeHandleIncludeTooltip,
-      allowColumnResizing = _getPluginState4.pluginConfig.allowColumnResizing,
-      getIntl = _getPluginState4.getIntl;
+    var _getPluginState3 = getPluginState(state),
+      resizeHandleRowIndex = _getPluginState3.resizeHandleRowIndex,
+      resizeHandleColumnIndex = _getPluginState3.resizeHandleColumnIndex,
+      resizeHandleIncludeTooltip = _getPluginState3.resizeHandleIncludeTooltip,
+      allowColumnResizing = _getPluginState3.pluginConfig.allowColumnResizing,
+      getIntl = _getPluginState3.getIntl;
     if (!tableNode || !allowColumnResizing) {
       return false;
     }
@@ -599,8 +595,8 @@ export var addBoldInEmptyHeaderCells = function addBoldInEmptyHeaderCells(tableC
 };
 export var updateWidthToWidest = function updateWidthToWidest(widthToWidest) {
   return createCommand(function (state) {
-    var _getPluginState5 = getPluginState(state),
-      prevWidthToWidest = _getPluginState5.widthToWidest;
+    var _getPluginState4 = getPluginState(state),
+      prevWidthToWidest = _getPluginState4.widthToWidest;
     if (isEqual(widthToWidest, prevWidthToWidest)) {
       return false;
     }