@atlaskit/editor-plugin-table 7.31.0 → 7.31.2

package/dist/es2019/pm-plugins/table-resizing/event-handlers.js

@@ -15,7 +15,7 @@ import { currentColWidth, getResizeState, getTableMaxWidth, pointsAtCell, resize
 import { TABLE_OFFSET_IN_COMMENT_EDITOR } from './utils/consts';
 import { getScalingPercentForTableWithoutWidth, getTableScalingPercent } from './utils/misc';
 import { scaleResizeState } from './utils/resize-column';
-export const handleMouseDown = (view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, api, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor) => {
+export const handleMouseDown = (view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor) => {
   var _originalTable$attrs;
   const {
     state,
@@ -104,7 +104,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
 
   // When we start resizing a column we need to ensure the underlying tooltip is removed from the decoration to avoid
   // unnecessary tooltips being displayed during drag.
-  updateResizeHandleDecorations(undefined, undefined, false)(state, dispatch);
+  updateResizeHandleDecorations(nodeViewPortalProviderAPI, undefined, undefined, false)(state, dispatch);
 
   // for new column resizing, take the current scaled version of table widths and use those as the basis for resizing
   // implication: the scaled version of the table becomes the source of truth

package/dist/es2019/pm-plugins/table-resizing/plugin.js

@@ -9,7 +9,7 @@ import { pluginKey } from './plugin-key';
 import { getResizeCellPos } from './utils';
 export function createPlugin(dispatch, {
   lastColumnResizable = true
-}, getEditorContainerWidth, getEditorFeatureFlags, api, editorAnalyticsAPI, isTableScalingEnabled, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor) {
+}, getEditorContainerWidth, getEditorFeatureFlags, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, isTableScalingEnabled, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor) {
   return new SafePlugin({
     key: pluginKey,
     state: createPluginState(dispatch, {
@@ -51,7 +51,7 @@ export function createPlugin(dispatch, {
             isColumnKeyboardResizeStarted = isKeyboardResize;
           }
           if (resizeHandlePos !== null && (!dragging || isColumnKeyboardResizeStarted)) {
-            if (handleMouseDown(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled || false, api, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor)) {
+            if (handleMouseDown(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled || false, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor)) {
               const {
                 state,
                 dispatch

package/dist/es2019/pm-plugins/view-mode-sort/index.js

@@ -7,16 +7,18 @@
 import { createElement } from 'react';
 import ReactDOM from 'react-dom';
 import { RawIntlProvider } from 'react-intl-next';
+import uuid from 'uuid/v4';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SortingIconWrapper } from '../../ui/icons/SortingIconWrapper';
 import { getPluginState } from '../plugin-factory';
 import { IS_DISABLED_CLASS_NAME, SORT_INDEX_DATA_ATTRIBUTE, SORTING_ICON_CLASS_NAME } from './consts';
 import { tableViewModeSortPluginKey as key } from './plugin-key';
 import { getTableElements, toggleSort } from './utils';
-export const createPlugin = api => {
+export const createPlugin = (api, nodeViewPortalProviderAPI) => {
   return new SafePlugin({
     state: {
       init: () => ({
@@ -78,6 +80,7 @@ export const createPlugin = api => {
             const map = TableMap.get(tableNode);
             const hasMergedCells = new Set(map.map).size !== map.map.length;
             map.mapByRow[0].forEach((cell, index) => {
+              const decorationRenderKey = uuid();
               decs.push(Decoration.widget(cell + pos + 2, () => {
                 var _sort$tableId;
                 const element = document.createElement('div');
@@ -96,16 +99,36 @@ export const createPlugin = api => {
                 const {
                   getIntl
                 } = getPluginState(oldState);
-                ReactDOM.render( /*#__PURE__*/createElement(RawIntlProvider, {
-                  value: getIntl()
-                }, /*#__PURE__*/createElement(SortingIconWrapper, {
-                  isSortingAllowed: !hasMergedCells,
-                  sortOrdered,
-                  onClick: () => {},
-                  onKeyDown: () => {},
-                  api
-                })), element);
+                if (fg('platform_editor_react18_plugin_portalprovider')) {
+                  nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(RawIntlProvider, {
+                    value: getIntl()
+                  }, /*#__PURE__*/createElement(SortingIconWrapper, {
+                    isSortingAllowed: !hasMergedCells,
+                    sortOrdered,
+                    onClick: () => {},
+                    onKeyDown: () => {},
+                    api
+                  })), element, decorationRenderKey);
+                } else {
+                  ReactDOM.render( /*#__PURE__*/createElement(RawIntlProvider, {
+                    value: getIntl()
+                  }, /*#__PURE__*/createElement(SortingIconWrapper, {
+                    isSortingAllowed: !hasMergedCells,
+                    sortOrdered,
+                    onClick: () => {},
+                    onKeyDown: () => {},
+                    api
+                  })), element);
+                }
                 return element;
+              }, {
+                destroy: node => {
+                  if (fg('platform_editor_react18_plugin_portalprovider')) {
+                    nodeViewPortalProviderAPI.remove(decorationRenderKey);
+                  } else {
+                    ReactDOM.unmountComponentAtNode(node);
+                  }
+                }
               }));
             });
           });

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

@@ -450,16 +450,10 @@ export class ContextualMenu extends Component {
     });
     _defineProperty(this, "createOriginalContextMenuItems", () => {
       let items = [];
-      const {
-        getEditorFeatureFlags
-      } = this.props;
-      const {
-        tableSortColumnReorder = false
-      } = getEditorFeatureFlags ? getEditorFeatureFlags() : {};
       const sortColumnItems = this.createSortColumnItems();
       const backgroundColorItem = this.createBackgroundColorItem();
       const distributeColumnsItem = this.createDistributeColumnsItem();
-      tableSortColumnReorder && sortColumnItems && items.push(...sortColumnItems);
+      sortColumnItems && items.push(...sortColumnItems);
       backgroundColorItem && items.push(backgroundColorItem);
       items.push(this.createInsertColumnItem());
       items.push(this.createInsertRowItem());
@@ -467,7 +461,6 @@ export class ContextualMenu extends Component {
       items.push(this.createDeleteRowItem());
       items.push(...this.createMergeSplitCellItems());
       distributeColumnsItem && items.push(distributeColumnsItem);
-      !tableSortColumnReorder && sortColumnItems && items.push(...sortColumnItems);
       items.push(this.createClearCellsItem());
       return [{
         items

package/dist/es2019/ui/FloatingDragMenu/DragMenu.js

@@ -92,18 +92,18 @@ const MapDragMenuOptionIdToMessage = {
     plural: null
   }
 };
-const getGroupedDragMenuConfig = tableSortColumnReorder => {
+const getGroupedDragMenuConfig = () => {
   let groupedDragMenuConfig = [['add_row_above', 'add_row_below', 'add_column_left', 'add_column_right', 'distribute_columns', 'clear_cells', 'delete_row', 'delete_column'], ['move_column_left', 'move_column_right', 'move_row_up', 'move_row_down']];
   const sortColumnItems = ['sort_column_asc', 'sort_column_desc'];
-  tableSortColumnReorder ? groupedDragMenuConfig.unshift(sortColumnItems) : groupedDragMenuConfig.push(sortColumnItems);
+  groupedDragMenuConfig.unshift(sortColumnItems);
   return groupedDragMenuConfig;
 };
 const elementBeforeIconStyles = xcss({
   marginRight: 'space.negative.075',
   display: 'flex'
 });
-const convertToDropdownItems = (dragMenuConfig, formatMessage, tableSortColumnReorder = false, selectionRect) => {
-  const groupedDragMenuConfig = getGroupedDragMenuConfig(tableSortColumnReorder);
+const convertToDropdownItems = (dragMenuConfig, formatMessage, selectionRect) => {
+  const groupedDragMenuConfig = getGroupedDragMenuConfig();
   let menuItemsArr = [...Array(groupedDragMenuConfig.length)].map(() => []);
   let menuCallback = {};
   dragMenuConfig.forEach(item => {
@@ -199,7 +199,6 @@ const DragMenu = /*#__PURE__*/React.memo(({
   tableDuplicateCellColouring,
   shouldUseIncreasedScalingPercent,
   isTableFixedColumnWidthsOptionEnabled,
-  tableSortColumnReorder,
   ariaNotifyPlugin,
   isCommentEditor
 }) => {
@@ -219,11 +218,11 @@ const DragMenu = /*#__PURE__*/React.memo(({
   const selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
   const hasMergedCellsInTable = (_tableMap$hasMergedCe = tableMap === null || tableMap === void 0 ? void 0 : tableMap.hasMergedCells()) !== null && _tableMap$hasMergedCe !== void 0 ? _tableMap$hasMergedCe : false;
   const allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
-  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, hasMergedCellsInTable, editorView, api, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled, tableDuplicateCellColouring, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, tableSortColumnReorder, ariaNotifyPlugin, isCommentEditor);
+  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, hasMergedCellsInTable, editorView, api, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled, tableDuplicateCellColouring, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, ariaNotifyPlugin, isCommentEditor);
   const {
     menuItems,
     menuCallback
-  } = convertToDropdownItems(dragMenuConfig, formatMessage, tableSortColumnReorder, selectionRect);
+  } = convertToDropdownItems(dragMenuConfig, formatMessage, selectionRect);
   const handleSubMenuRef = ref => {
     const parent = closestElement(editorView.dom, '.fabric-editor-popup-scroll-parent');
     if (!(parent && ref)) {
@@ -274,7 +273,7 @@ const DragMenu = /*#__PURE__*/React.memo(({
         className: DropdownMenuSharedCssClassName.SUBMENU
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
         ,
-        css: dragMenuBackgroundColorStyles(tableSortColumnReorder)
+        css: dragMenuBackgroundColorStyles()
       }, jsx("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
         css: cellColourPreviewStyles(background)
@@ -477,7 +476,7 @@ const DragMenu = /*#__PURE__*/React.memo(({
     return null;
   }
   if (allowBackgroundColor) {
-    tableSortColumnReorder ? menuItems[1].items.unshift(createBackgroundColorMenuItem()) : menuItems[0].items.unshift(createBackgroundColorMenuItem());
+    menuItems[1].items.unshift(createBackgroundColorMenuItem());
   }
 
   // If first row, add toggle for Header row, default is true

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

@@ -35,8 +35,7 @@ const FloatingDragMenu = ({
   }
   const {
     tableDuplicateCellColouring = false,
-    tableWithFixedColumnWidthsOption = false,
-    tableSortColumnReorder = false
+    tableWithFixedColumnWidthsOption = false
   } = getEditorFeatureFlags ? getEditorFeatureFlags() : {};
   const shouldUseIncreasedScalingPercent = isTableScalingEnabled && (tableWithFixedColumnWidthsOption || isCommentEditor);
   return /*#__PURE__*/React.createElement(Popup, {
@@ -76,7 +75,6 @@ const FloatingDragMenu = ({
     tableDuplicateCellColouring: tableDuplicateCellColouring,
     shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
     isTableFixedColumnWidthsOptionEnabled: tableWithFixedColumnWidthsOption,
-    tableSortColumnReorder: tableSortColumnReorder,
     ariaNotifyPlugin: ariaNotifyPlugin,
     api: api,
     isCommentEditor: isCommentEditor || false

package/dist/es2019/ui/FloatingDragMenu/styles.js

@@ -12,14 +12,14 @@ export const cellColourPreviewStyles = selectedColor => css({
 });
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-export const dragMenuBackgroundColorStyles = (tableSortColumnReorder = false) => css`
+export const dragMenuBackgroundColorStyles = () => css`
 	.${ClassName.DRAG_SUBMENU} {
 		border-radius: ${"var(--ds-border-radius, 3px)"};
 		background: ${"var(--ds-surface-overlay, white)"};
 		box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
 		display: block;
 		position: absolute;
-		top: ${tableSortColumnReorder ? TABLE_DRAG_MENU_PADDING_TOP + TABLE_DRAG_MENU_SORT_GROUP_HEIGHT + TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT : 0}px; // move the submenu down when 'sort increasing/decreasing' appear before background color picker
+		top: ${TABLE_DRAG_MENU_PADDING_TOP + TABLE_DRAG_MENU_SORT_GROUP_HEIGHT + TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT}px; // move the submenu down when 'sort increasing/decreasing' appear before background color picker
 		left: ${dragMenuDropdownWidth}px;
 		padding: ${"var(--ds-space-100, 8px)"};
 

package/dist/es2019/utils/decoration.js

@@ -1,6 +1,7 @@
 import { createElement } from 'react';
 import ReactDOM from 'react-dom';
 import { RawIntlProvider } from 'react-intl-next';
+import uuid from 'uuid/v4';
 import { nonNullable } from '@atlaskit/editor-common/utils';
 
 // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
@@ -8,6 +9,7 @@ import { nonNullable } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, getCellsInRow, getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { TableCssClassName as ClassName, TableDecorations } from '../types';
 import { ColumnResizeWidget } from '../ui/ColumnResizeWidget';
 const filterDecorationByKey = (key, decorationSet) => decorationSet.find(undefined, undefined, spec => spec.key.indexOf(key) > -1);
@@ -221,7 +223,7 @@ const makeArray = n => Array.from(Array(n).keys());
  *   we will add a new class on the last item for each cell,
  *   hence the second media will receive this class `ClassName.LAST_ITEM_IN_CELL`
  */
-export const createResizeHandleDecoration = (tr, rowIndexTarget, columnEndIndexTarget, includeTooltip = false, getIntl) => {
+export const createResizeHandleDecoration = (tr, rowIndexTarget, columnEndIndexTarget, includeTooltip = false, getIntl, nodeViewPortalProviderAPI) => {
   const emptyResult = [[], []];
   const table = findTable(tr.selection);
   if (!table || !table.node) {
@@ -232,21 +234,36 @@ export const createResizeHandleDecoration = (tr, rowIndexTarget, columnEndIndexT
     return emptyResult;
   }
   const createResizerHandleDecoration = (cellColumnPositioning, columnIndex, rowIndex, cellPos, cellNode) => {
+    const decorationRenderKey = uuid();
     const position = cellPos + cellNode.nodeSize - 1;
     return Decoration.widget(position, () => {
       const element = document.createElement('div');
-      ReactDOM.render( /*#__PURE__*/createElement(RawIntlProvider, {
-        value: getIntl()
-      }, /*#__PURE__*/createElement(ColumnResizeWidget, {
-        startIndex: cellColumnPositioning.left,
-        endIndex: cellColumnPositioning.right,
-        includeTooltip
-      })), element);
+      if (fg('platform_editor_react18_plugin_portalprovider')) {
+        nodeViewPortalProviderAPI.render(() => /*#__PURE__*/createElement(RawIntlProvider, {
+          value: getIntl()
+        }, /*#__PURE__*/createElement(ColumnResizeWidget, {
+          startIndex: cellColumnPositioning.left,
+          endIndex: cellColumnPositioning.right,
+          includeTooltip
+        })), element, decorationRenderKey);
+      } else {
+        ReactDOM.render( /*#__PURE__*/createElement(RawIntlProvider, {
+          value: getIntl()
+        }, /*#__PURE__*/createElement(ColumnResizeWidget, {
+          startIndex: cellColumnPositioning.left,
+          endIndex: cellColumnPositioning.right,
+          includeTooltip
+        })), element);
+      }
       return element;
     }, {
       key: `${TableDecorations.COLUMN_RESIZING_HANDLE_WIDGET}_${rowIndex}_${columnIndex}_${includeTooltip ? 'with' : 'no'}-tooltip`,
       destroy: node => {
-        ReactDOM.unmountComponentAtNode(node);
+        if (fg('platform_editor_react18_plugin_portalprovider')) {
+          nodeViewPortalProviderAPI.remove(decorationRenderKey);
+        } else {
+          ReactDOM.unmountComponentAtNode(node);
+        }
       }
     });
   };

package/dist/es2019/utils/drag-menu.js

@@ -72,7 +72,7 @@ const defaultSelectionRect = {
   right: 0,
   bottom: 0
 };
-export const getDragMenuConfig = (direction, getEditorContainerWidth, hasMergedCellsInTable, editorView, api, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, isHeaderRowRequired, isTableScalingEnabled = false, tableDuplicateCellColouring = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false, tableSortColumnReorder = false, ariaNotifyPlugin, isCommentEditor = false) => {
+export const getDragMenuConfig = (direction, getEditorContainerWidth, hasMergedCellsInTable, editorView, api, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, isHeaderRowRequired, isTableScalingEnabled = false, tableDuplicateCellColouring = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false, ariaNotifyPlugin, isCommentEditor = false) => {
   var _tableMap$height, _tableMap$height2, _tableMap$width, _tableMap$width2;
   const {
     selection
@@ -256,6 +256,6 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, hasMergedC
     keymap: keymap && tooltip(keymap)
   }))];
   let allConfigs = [...restConfigs];
-  tableSortColumnReorder ? allConfigs.unshift(...sortConfigs) : allConfigs.push(...sortConfigs);
+  allConfigs.unshift(...sortConfigs);
   return allConfigs.filter(Boolean);
 };

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

@@ -19,7 +19,7 @@ var getTablePluginCommand = function getTablePluginCommand(actionPayload, origin
     return (originalTr || tr).setMeta('addToHistory', false);
   });
 };
-var updateResizeHandleAndStatePosition = function updateResizeHandleAndStatePosition(rowIndex, columnIndex, nextResizeHandlePos) {
+var updateResizeHandleAndStatePosition = function updateResizeHandleAndStatePosition(rowIndex, columnIndex, nextResizeHandlePos, nodeViewPortalProviderAPI) {
   return function (state, dispatch) {
     var customTr = state.tr;
     var _getPluginState = getPluginState(state),
@@ -31,7 +31,7 @@ var updateResizeHandleAndStatePosition = function updateResizeHandleAndStatePosi
     if (!allowColumnResizing) {
       return false;
     }
-    var decorationsWithWidget = buildColumnResizingDecorations(rowIndex, columnIndex, true, getIntl)({
+    var decorationsWithWidget = buildColumnResizingDecorations(rowIndex, columnIndex, true, getIntl, nodeViewPortalProviderAPI)({
       tr: customTr,
       decorationSet: getDecorations(state)
     });
@@ -63,7 +63,8 @@ var updateResizeHandleAndStatePosition = function updateResizeHandleAndStatePosi
 };
 export var initiateKeyboardColumnResizing = function initiateKeyboardColumnResizing(_ref) {
   var ariaNotify = _ref.ariaNotify,
-    getIntl = _ref.getIntl;
+    getIntl = _ref.getIntl,
+    nodeViewPortalProviderAPI = _ref.nodeViewPortalProviderAPI;
   return function (state, dispatch, view) {
     var selection = state.selection;
     var selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
@@ -74,7 +75,7 @@ export var initiateKeyboardColumnResizing = function initiateKeyboardColumnResiz
       });
     }
     if (selectionRect && cell && view) {
-      return updateResizeHandleAndStatePosition(selectionRect.top, selectionRect.right, cell.pos)(state, dispatch);
+      return updateResizeHandleAndStatePosition(selectionRect.top, selectionRect.right, cell.pos, nodeViewPortalProviderAPI)(state, dispatch);
     }
     return false;
   };
@@ -82,7 +83,8 @@ export var initiateKeyboardColumnResizing = function initiateKeyboardColumnResiz
 export var activateNextResizeArea = function activateNextResizeArea(_ref2) {
   var direction = _ref2.direction,
     ariaNotify = _ref2.ariaNotify,
-    getIntl = _ref2.getIntl;
+    getIntl = _ref2.getIntl,
+    nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
   return function (state, dispatch, view) {
     var _ref3 = getTableResizingPluginState(state) || {},
       resizeHandlePos = _ref3.resizeHandlePos;
@@ -128,17 +130,17 @@ export var activateNextResizeArea = function activateNextResizeArea(_ref2) {
       // we are somewhere in between the side columns of the table
       var offset = $nextCell.pos - $nextCell.start(-1);
       var rectForNextCell = tableMap.findCell(offset);
-      return updateResizeHandleAndStatePosition(rectForNextCell.top, rectForNextCell.right, $nextCell.pos)(state, dispatch, view);
+      return updateResizeHandleAndStatePosition(rectForNextCell.top, rectForNextCell.right, $nextCell.pos, nodeViewPortalProviderAPI)(state, dispatch, view);
     } else {
       // current position is in the one of the side columns of the table(left or right)
       if (currentCellRect.left === 0) {
         var lastCellInCurrentRow = tableMap.positionAt(currentCellRect.top, tableMap.width - 1, tableNode) + closestTable.start;
         var $lastCell = state.doc.resolve(lastCellInCurrentRow);
-        return updateResizeHandleAndStatePosition(currentCellRect.top, tableMap.width, $lastCell.pos)(state, dispatch, view);
+        return updateResizeHandleAndStatePosition(currentCellRect.top, tableMap.width, $lastCell.pos, nodeViewPortalProviderAPI)(state, dispatch, view);
       } else if (tableMap.width === currentCellRect.right) {
         var firsCellInCurrentRow = tableMap.positionAt(currentCellRect.top, 0, tableNode) + closestTable.start;
         var _$nextCell = state.doc.resolve(firsCellInCurrentRow);
-        return updateResizeHandleAndStatePosition(currentCellRect.top, 1, _$nextCell.pos)(state, dispatch);
+        return updateResizeHandleAndStatePosition(currentCellRect.top, 1, _$nextCell.pos, nodeViewPortalProviderAPI)(state, dispatch);
       }
     }
     return false;

package/dist/esm/commands/misc.js

@@ -462,7 +462,7 @@ export var hideInsertColumnOrRowButton = function hideInsertColumnOrRowButton()
     return tr.setMeta('addToHistory', false);
   });
 };
-export var addResizeHandleDecorations = function addResizeHandleDecorations(rowIndex, columnIndex, includeTooltip, isKeyboardResize) {
+export var addResizeHandleDecorations = function addResizeHandleDecorations(rowIndex, columnIndex, includeTooltip, nodeViewPortalProviderAPI, isKeyboardResize) {
   return createCommand(function (state) {
     var tableNode = findTable(state.selection);
     var _getPluginState3 = getPluginState(state),
@@ -474,7 +474,7 @@ export var addResizeHandleDecorations = function addResizeHandleDecorations(rowI
     return {
       type: 'ADD_RESIZE_HANDLE_DECORATIONS',
       data: {
-        decorationSet: buildColumnResizingDecorations(rowIndex, columnIndex, includeTooltip, getIntl)({
+        decorationSet: buildColumnResizingDecorations(rowIndex, columnIndex, includeTooltip, getIntl, nodeViewPortalProviderAPI)({
           tr: state.tr,
           decorationSet: getDecorations(state)
         }),
@@ -488,7 +488,7 @@ export var addResizeHandleDecorations = function addResizeHandleDecorations(rowI
     return tr.setMeta('addToHistory', false);
   });
 };
-export var updateResizeHandleDecorations = function updateResizeHandleDecorations(rowIndex, columnIndex, includeTooltip) {
+export var updateResizeHandleDecorations = function updateResizeHandleDecorations(nodeViewPortalProviderAPI, rowIndex, columnIndex, includeTooltip) {
   return createCommand(function (state) {
     var tableNode = findTable(state.selection);
     var _getPluginState4 = getPluginState(state),
@@ -509,7 +509,7 @@ export var updateResizeHandleDecorations = function updateResizeHandleDecoration
     return {
       type: 'UPDATE_RESIZE_HANDLE_DECORATIONS',
       data: {
-        decorationSet: buildColumnResizingDecorations(resolvedRowIndex, resolvedColumnIndex, resolvedIncludeTooltip, getIntl)({
+        decorationSet: buildColumnResizingDecorations(resolvedRowIndex, resolvedColumnIndex, resolvedIncludeTooltip, getIntl, nodeViewPortalProviderAPI)({
           tr: state.tr,
           decorationSet: getDecorations(state)
         }),

package/dist/esm/event-handlers.js

@@ -245,78 +245,82 @@ export var handleMouseLeave = function handleMouseLeave(view, event) {
 
 // IMPORTANT: The mouse move handler has been setup with RAF schedule to avoid Reflows which will occur as some methods
 // need to access the mouse event offset position and also the target clientWidth vallue.
-var handleMouseMoveDebounce = rafSchedule(function (view, event, offsetX) {
-  if (!(event.target instanceof HTMLElement)) {
-    return false;
-  }
-  var element = event.target;
-  if (isColumnControlsDecorations(element) || isDragColumnFloatingInsertDot(element)) {
-    var state = view.state,
-      dispatch = view.dispatch;
-    var _getPluginState6 = getPluginState(state),
-      insertColumnButtonIndex = _getPluginState6.insertColumnButtonIndex;
-    var _getColumnOrRowIndex9 = getColumnOrRowIndex(element),
-      _getColumnOrRowIndex10 = _slicedToArray(_getColumnOrRowIndex9, 2),
-      startIndex = _getColumnOrRowIndex10[0],
-      endIndex = _getColumnOrRowIndex10[1];
-    var positionColumn = getMousePositionHorizontalRelativeByElement(event, offsetX, undefined) === 'right' ? endIndex : startIndex;
-    if (positionColumn !== insertColumnButtonIndex) {
-      return showInsertColumnButton(positionColumn)(state, dispatch);
+var handleMouseMoveDebounce = function handleMouseMoveDebounce(nodeViewPortalProviderAPI) {
+  return rafSchedule(function (view, event, offsetX) {
+    if (!(event.target instanceof HTMLElement)) {
+      return false;
     }
-  }
-  if (isRowControlsButton(element) || isDragRowFloatingInsertDot(element)) {
-    var _state3 = view.state,
-      _dispatch4 = view.dispatch;
-    var _getPluginState7 = getPluginState(_state3),
-      insertRowButtonIndex = _getPluginState7.insertRowButtonIndex;
-    var _getColumnOrRowIndex11 = getColumnOrRowIndex(element),
-      _getColumnOrRowIndex12 = _slicedToArray(_getColumnOrRowIndex11, 2),
-      _startIndex3 = _getColumnOrRowIndex12[0],
-      _endIndex2 = _getColumnOrRowIndex12[1];
-    var positionRow = getMousePositionVerticalRelativeByElement(event) === 'bottom' ? _endIndex2 : _startIndex3;
-    if (positionRow !== insertRowButtonIndex) {
-      return showInsertRowButton(positionRow)(_state3, _dispatch4);
+    var element = event.target;
+    if (isColumnControlsDecorations(element) || isDragColumnFloatingInsertDot(element)) {
+      var state = view.state,
+        dispatch = view.dispatch;
+      var _getPluginState6 = getPluginState(state),
+        insertColumnButtonIndex = _getPluginState6.insertColumnButtonIndex;
+      var _getColumnOrRowIndex9 = getColumnOrRowIndex(element),
+        _getColumnOrRowIndex10 = _slicedToArray(_getColumnOrRowIndex9, 2),
+        startIndex = _getColumnOrRowIndex10[0],
+        endIndex = _getColumnOrRowIndex10[1];
+      var positionColumn = getMousePositionHorizontalRelativeByElement(event, offsetX, undefined) === 'right' ? endIndex : startIndex;
+      if (positionColumn !== insertColumnButtonIndex) {
+        return showInsertColumnButton(positionColumn)(state, dispatch);
+      }
     }
-  }
-  if (!isResizeHandleDecoration(element) && isCell(element)) {
-    var _positionColumn = getMousePositionHorizontalRelativeByElement(event, offsetX, RESIZE_HANDLE_AREA_DECORATION_GAP);
-    if (_positionColumn !== null) {
-      var _state4 = view.state,
-        _dispatch5 = view.dispatch;
-      var _getPluginState8 = getPluginState(_state4),
-        resizeHandleColumnIndex = _getPluginState8.resizeHandleColumnIndex,
-        resizeHandleRowIndex = _getPluginState8.resizeHandleRowIndex;
-      var isKeyboardResize = getPluginState(_state4).isKeyboardResize;
-      var tableCell = closestElement(element, 'td, th');
-      var cellStartPosition = view.posAtDOM(tableCell, 0);
-      var rect = findCellRectClosestToPos(_state4.doc.resolve(cellStartPosition));
-      if (rect) {
-        var columnEndIndexTarget = _positionColumn === 'left' ? rect.left : rect.right;
-        var rowIndexTarget = rect.top;
-        if ((columnEndIndexTarget !== resizeHandleColumnIndex || rowIndexTarget !== resizeHandleRowIndex || !hasResizeHandler({
-          target: element,
-          columnEndIndexTarget: columnEndIndexTarget
-        })) && !isKeyboardResize // if initiated by keyboard don't need to react on hover for other resize sliders
-        ) {
-          return addResizeHandleDecorations(rowIndexTarget, columnEndIndexTarget, true)(_state4, _dispatch5);
+    if (isRowControlsButton(element) || isDragRowFloatingInsertDot(element)) {
+      var _state3 = view.state,
+        _dispatch4 = view.dispatch;
+      var _getPluginState7 = getPluginState(_state3),
+        insertRowButtonIndex = _getPluginState7.insertRowButtonIndex;
+      var _getColumnOrRowIndex11 = getColumnOrRowIndex(element),
+        _getColumnOrRowIndex12 = _slicedToArray(_getColumnOrRowIndex11, 2),
+        _startIndex3 = _getColumnOrRowIndex12[0],
+        _endIndex2 = _getColumnOrRowIndex12[1];
+      var positionRow = getMousePositionVerticalRelativeByElement(event) === 'bottom' ? _endIndex2 : _startIndex3;
+      if (positionRow !== insertRowButtonIndex) {
+        return showInsertRowButton(positionRow)(_state3, _dispatch4);
+      }
+    }
+    if (!isResizeHandleDecoration(element) && isCell(element)) {
+      var _positionColumn = getMousePositionHorizontalRelativeByElement(event, offsetX, RESIZE_HANDLE_AREA_DECORATION_GAP);
+      if (_positionColumn !== null) {
+        var _state4 = view.state,
+          _dispatch5 = view.dispatch;
+        var _getPluginState8 = getPluginState(_state4),
+          resizeHandleColumnIndex = _getPluginState8.resizeHandleColumnIndex,
+          resizeHandleRowIndex = _getPluginState8.resizeHandleRowIndex;
+        var isKeyboardResize = getPluginState(_state4).isKeyboardResize;
+        var tableCell = closestElement(element, 'td, th');
+        var cellStartPosition = view.posAtDOM(tableCell, 0);
+        var rect = findCellRectClosestToPos(_state4.doc.resolve(cellStartPosition));
+        if (rect) {
+          var columnEndIndexTarget = _positionColumn === 'left' ? rect.left : rect.right;
+          var rowIndexTarget = rect.top;
+          if ((columnEndIndexTarget !== resizeHandleColumnIndex || rowIndexTarget !== resizeHandleRowIndex || !hasResizeHandler({
+            target: element,
+            columnEndIndexTarget: columnEndIndexTarget
+          })) && !isKeyboardResize // if initiated by keyboard don't need to react on hover for other resize sliders
+          ) {
+            return addResizeHandleDecorations(rowIndexTarget, columnEndIndexTarget, true, nodeViewPortalProviderAPI)(_state4, _dispatch5);
+          }
         }
       }
     }
-  }
-  return false;
-});
-export var handleMouseMove = function handleMouseMove(view, event) {
-  if (!(event.target instanceof HTMLElement)) {
     return false;
-  }
+  });
+};
+export var handleMouseMove = function handleMouseMove(nodeViewPortalProviderAPI) {
+  return function (view, event) {
+    if (!(event.target instanceof HTMLElement)) {
+      return false;
+    }
 
-  // NOTE: When accessing offsetX in gecko from a deferred callback, it will return 0. However it will be non-zero if accessed
-  // within the scope of it's initial mouse move handler. Also Chrome does return the correct value, however it could trigger
-  // a reflow. So for now this will just grab the offsetX value immediately for gecko and chrome will calculate later
-  // in the deferred callback handler.
-  // Bug Tracking: https://bugzilla.mozilla.org/show_bug.cgi?id=1882903
-  handleMouseMoveDebounce(view, event, browser.gecko ? event.offsetX : NaN);
-  return false;
+    // NOTE: When accessing offsetX in gecko from a deferred callback, it will return 0. However it will be non-zero if accessed
+    // within the scope of it's initial mouse move handler. Also Chrome does return the correct value, however it could trigger
+    // a reflow. So for now this will just grab the offsetX value immediately for gecko and chrome will calculate later
+    // in the deferred callback handler.
+    // Bug Tracking: https://bugzilla.mozilla.org/show_bug.cgi?id=1882903
+    handleMouseMoveDebounce(nodeViewPortalProviderAPI)(view, event, browser.gecko ? event.offsetX : NaN);
+    return false;
+  };
 };
 export function handleTripleClick(view, pos) {
   var state = view.state,