@atlaskit/editor-plugin-table 7.31.0 → 7.31.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-table
 
+## 7.31.2
+
+### Patch Changes
+
+- [#164992](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/164992)
+  [`16878c96150af`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/16878c96150af) -
+  tidy table sort order experiment
+
+## 7.31.1
+
+### Patch Changes
+
+- [#165078](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165078)
+  [`770231c1e2f01`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/770231c1e2f01) -
+  ED-25611: migrates table plugin from reactdom to portalprovider
+- Updated dependencies
+
 ## 7.31.0
 
 ### Minor Changes

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

@@ -25,7 +25,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 = (0, _pluginFactory.getPluginState)(state),
@@ -37,7 +37,7 @@ var updateResizeHandleAndStatePosition = function updateResizeHandleAndStatePosi
     if (!allowColumnResizing) {
       return false;
     }
-    var decorationsWithWidget = (0, _utils2.buildColumnResizingDecorations)(rowIndex, columnIndex, true, getIntl)({
+    var decorationsWithWidget = (0, _utils2.buildColumnResizingDecorations)(rowIndex, columnIndex, true, getIntl, nodeViewPortalProviderAPI)({
       tr: customTr,
       decorationSet: (0, _plugin.getDecorations)(state)
     });
@@ -69,7 +69,8 @@ var updateResizeHandleAndStatePosition = function updateResizeHandleAndStatePosi
 };
 var initiateKeyboardColumnResizing = exports.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 = (0, _utils.isSelectionType)(selection, 'cell') ? (0, _utils.getSelectionRect)(selection) : (0, _utils.findCellRectClosestToPos)(selection.$from);
@@ -80,7 +81,7 @@ var initiateKeyboardColumnResizing = exports.initiateKeyboardColumnResizing = fu
       });
     }
     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;
   };
@@ -88,7 +89,8 @@ var initiateKeyboardColumnResizing = exports.initiateKeyboardColumnResizing = fu
 var activateNextResizeArea = exports.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 = (0, _pluginFactory2.getPluginState)(state) || {},
       resizeHandlePos = _ref3.resizeHandlePos;
@@ -134,17 +136,17 @@ var activateNextResizeArea = exports.activateNextResizeArea = function activateN
       // 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/cjs/commands/misc.js

@@ -469,7 +469,7 @@ var hideInsertColumnOrRowButton = exports.hideInsertColumnOrRowButton = function
     return tr.setMeta('addToHistory', false);
   });
 };
-var addResizeHandleDecorations = exports.addResizeHandleDecorations = function addResizeHandleDecorations(rowIndex, columnIndex, includeTooltip, isKeyboardResize) {
+var addResizeHandleDecorations = exports.addResizeHandleDecorations = function addResizeHandleDecorations(rowIndex, columnIndex, includeTooltip, nodeViewPortalProviderAPI, isKeyboardResize) {
   return (0, _pluginFactory.createCommand)(function (state) {
     var tableNode = (0, _utils2.findTable)(state.selection);
     var _getPluginState3 = (0, _pluginFactory.getPluginState)(state),
@@ -481,7 +481,7 @@ var addResizeHandleDecorations = exports.addResizeHandleDecorations = function a
     return {
       type: 'ADD_RESIZE_HANDLE_DECORATIONS',
       data: {
-        decorationSet: (0, _utils3.buildColumnResizingDecorations)(rowIndex, columnIndex, includeTooltip, getIntl)({
+        decorationSet: (0, _utils3.buildColumnResizingDecorations)(rowIndex, columnIndex, includeTooltip, getIntl, nodeViewPortalProviderAPI)({
           tr: state.tr,
           decorationSet: (0, _plugin.getDecorations)(state)
         }),
@@ -495,7 +495,7 @@ var addResizeHandleDecorations = exports.addResizeHandleDecorations = function a
     return tr.setMeta('addToHistory', false);
   });
 };
-var updateResizeHandleDecorations = exports.updateResizeHandleDecorations = function updateResizeHandleDecorations(rowIndex, columnIndex, includeTooltip) {
+var updateResizeHandleDecorations = exports.updateResizeHandleDecorations = function updateResizeHandleDecorations(nodeViewPortalProviderAPI, rowIndex, columnIndex, includeTooltip) {
   return (0, _pluginFactory.createCommand)(function (state) {
     var tableNode = (0, _utils2.findTable)(state.selection);
     var _getPluginState4 = (0, _pluginFactory.getPluginState)(state),
@@ -516,7 +516,7 @@ var updateResizeHandleDecorations = exports.updateResizeHandleDecorations = func
     return {
       type: 'UPDATE_RESIZE_HANDLE_DECORATIONS',
       data: {
-        decorationSet: (0, _utils3.buildColumnResizingDecorations)(resolvedRowIndex, resolvedColumnIndex, resolvedIncludeTooltip, getIntl)({
+        decorationSet: (0, _utils3.buildColumnResizingDecorations)(resolvedRowIndex, resolvedColumnIndex, resolvedIncludeTooltip, getIntl, nodeViewPortalProviderAPI)({
           tr: state.tr,
           decorationSet: (0, _plugin.getDecorations)(state)
         }),

package/dist/cjs/event-handlers.js

@@ -254,78 +254,82 @@ var handleMouseLeave = exports.handleMouseLeave = function handleMouseLeave(view
 
 // 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 = (0, _rafSchd.default)(function (view, event, offsetX) {
-  if (!(event.target instanceof HTMLElement)) {
-    return false;
-  }
-  var element = event.target;
-  if ((0, _utils3.isColumnControlsDecorations)(element) || (0, _utils3.isDragColumnFloatingInsertDot)(element)) {
-    var state = view.state,
-      dispatch = view.dispatch;
-    var _getPluginState6 = (0, _pluginFactory2.getPluginState)(state),
-      insertColumnButtonIndex = _getPluginState6.insertColumnButtonIndex;
-    var _getColumnOrRowIndex9 = (0, _utils3.getColumnOrRowIndex)(element),
-      _getColumnOrRowIndex10 = (0, _slicedToArray2.default)(_getColumnOrRowIndex9, 2),
-      startIndex = _getColumnOrRowIndex10[0],
-      endIndex = _getColumnOrRowIndex10[1];
-    var positionColumn = (0, _utils3.getMousePositionHorizontalRelativeByElement)(event, offsetX, undefined) === 'right' ? endIndex : startIndex;
-    if (positionColumn !== insertColumnButtonIndex) {
-      return (0, _commands.showInsertColumnButton)(positionColumn)(state, dispatch);
+var handleMouseMoveDebounce = function handleMouseMoveDebounce(nodeViewPortalProviderAPI) {
+  return (0, _rafSchd.default)(function (view, event, offsetX) {
+    if (!(event.target instanceof HTMLElement)) {
+      return false;
     }
-  }
-  if ((0, _utils3.isRowControlsButton)(element) || (0, _utils3.isDragRowFloatingInsertDot)(element)) {
-    var _state3 = view.state,
-      _dispatch4 = view.dispatch;
-    var _getPluginState7 = (0, _pluginFactory2.getPluginState)(_state3),
-      insertRowButtonIndex = _getPluginState7.insertRowButtonIndex;
-    var _getColumnOrRowIndex11 = (0, _utils3.getColumnOrRowIndex)(element),
-      _getColumnOrRowIndex12 = (0, _slicedToArray2.default)(_getColumnOrRowIndex11, 2),
-      _startIndex3 = _getColumnOrRowIndex12[0],
-      _endIndex2 = _getColumnOrRowIndex12[1];
-    var positionRow = (0, _utils3.getMousePositionVerticalRelativeByElement)(event) === 'bottom' ? _endIndex2 : _startIndex3;
-    if (positionRow !== insertRowButtonIndex) {
-      return (0, _commands.showInsertRowButton)(positionRow)(_state3, _dispatch4);
+    var element = event.target;
+    if ((0, _utils3.isColumnControlsDecorations)(element) || (0, _utils3.isDragColumnFloatingInsertDot)(element)) {
+      var state = view.state,
+        dispatch = view.dispatch;
+      var _getPluginState6 = (0, _pluginFactory2.getPluginState)(state),
+        insertColumnButtonIndex = _getPluginState6.insertColumnButtonIndex;
+      var _getColumnOrRowIndex9 = (0, _utils3.getColumnOrRowIndex)(element),
+        _getColumnOrRowIndex10 = (0, _slicedToArray2.default)(_getColumnOrRowIndex9, 2),
+        startIndex = _getColumnOrRowIndex10[0],
+        endIndex = _getColumnOrRowIndex10[1];
+      var positionColumn = (0, _utils3.getMousePositionHorizontalRelativeByElement)(event, offsetX, undefined) === 'right' ? endIndex : startIndex;
+      if (positionColumn !== insertColumnButtonIndex) {
+        return (0, _commands.showInsertColumnButton)(positionColumn)(state, dispatch);
+      }
     }
-  }
-  if (!(0, _utils3.isResizeHandleDecoration)(element) && (0, _utils3.isCell)(element)) {
-    var _positionColumn = (0, _utils3.getMousePositionHorizontalRelativeByElement)(event, offsetX, _types.RESIZE_HANDLE_AREA_DECORATION_GAP);
-    if (_positionColumn !== null) {
-      var _state4 = view.state,
-        _dispatch5 = view.dispatch;
-      var _getPluginState8 = (0, _pluginFactory2.getPluginState)(_state4),
-        resizeHandleColumnIndex = _getPluginState8.resizeHandleColumnIndex,
-        resizeHandleRowIndex = _getPluginState8.resizeHandleRowIndex;
-      var isKeyboardResize = (0, _pluginFactory2.getPluginState)(_state4).isKeyboardResize;
-      var tableCell = (0, _utils.closestElement)(element, 'td, th');
-      var cellStartPosition = view.posAtDOM(tableCell, 0);
-      var rect = (0, _utils2.findCellRectClosestToPos)(_state4.doc.resolve(cellStartPosition));
-      if (rect) {
-        var columnEndIndexTarget = _positionColumn === 'left' ? rect.left : rect.right;
-        var rowIndexTarget = rect.top;
-        if ((columnEndIndexTarget !== resizeHandleColumnIndex || rowIndexTarget !== resizeHandleRowIndex || !(0, _utils3.hasResizeHandler)({
-          target: element,
-          columnEndIndexTarget: columnEndIndexTarget
-        })) && !isKeyboardResize // if initiated by keyboard don't need to react on hover for other resize sliders
-        ) {
-          return (0, _commands.addResizeHandleDecorations)(rowIndexTarget, columnEndIndexTarget, true)(_state4, _dispatch5);
+    if ((0, _utils3.isRowControlsButton)(element) || (0, _utils3.isDragRowFloatingInsertDot)(element)) {
+      var _state3 = view.state,
+        _dispatch4 = view.dispatch;
+      var _getPluginState7 = (0, _pluginFactory2.getPluginState)(_state3),
+        insertRowButtonIndex = _getPluginState7.insertRowButtonIndex;
+      var _getColumnOrRowIndex11 = (0, _utils3.getColumnOrRowIndex)(element),
+        _getColumnOrRowIndex12 = (0, _slicedToArray2.default)(_getColumnOrRowIndex11, 2),
+        _startIndex3 = _getColumnOrRowIndex12[0],
+        _endIndex2 = _getColumnOrRowIndex12[1];
+      var positionRow = (0, _utils3.getMousePositionVerticalRelativeByElement)(event) === 'bottom' ? _endIndex2 : _startIndex3;
+      if (positionRow !== insertRowButtonIndex) {
+        return (0, _commands.showInsertRowButton)(positionRow)(_state3, _dispatch4);
+      }
+    }
+    if (!(0, _utils3.isResizeHandleDecoration)(element) && (0, _utils3.isCell)(element)) {
+      var _positionColumn = (0, _utils3.getMousePositionHorizontalRelativeByElement)(event, offsetX, _types.RESIZE_HANDLE_AREA_DECORATION_GAP);
+      if (_positionColumn !== null) {
+        var _state4 = view.state,
+          _dispatch5 = view.dispatch;
+        var _getPluginState8 = (0, _pluginFactory2.getPluginState)(_state4),
+          resizeHandleColumnIndex = _getPluginState8.resizeHandleColumnIndex,
+          resizeHandleRowIndex = _getPluginState8.resizeHandleRowIndex;
+        var isKeyboardResize = (0, _pluginFactory2.getPluginState)(_state4).isKeyboardResize;
+        var tableCell = (0, _utils.closestElement)(element, 'td, th');
+        var cellStartPosition = view.posAtDOM(tableCell, 0);
+        var rect = (0, _utils2.findCellRectClosestToPos)(_state4.doc.resolve(cellStartPosition));
+        if (rect) {
+          var columnEndIndexTarget = _positionColumn === 'left' ? rect.left : rect.right;
+          var rowIndexTarget = rect.top;
+          if ((columnEndIndexTarget !== resizeHandleColumnIndex || rowIndexTarget !== resizeHandleRowIndex || !(0, _utils3.hasResizeHandler)({
+            target: element,
+            columnEndIndexTarget: columnEndIndexTarget
+          })) && !isKeyboardResize // if initiated by keyboard don't need to react on hover for other resize sliders
+          ) {
+            return (0, _commands.addResizeHandleDecorations)(rowIndexTarget, columnEndIndexTarget, true, nodeViewPortalProviderAPI)(_state4, _dispatch5);
+          }
         }
       }
     }
-  }
-  return false;
-});
-var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view, event) {
-  if (!(event.target instanceof HTMLElement)) {
     return false;
-  }
+  });
+};
+var handleMouseMove = exports.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, _utils.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, _utils.browser.gecko ? event.offsetX : NaN);
+    return false;
+  };
 };
 function handleTripleClick(view, pos) {
   var state = view.state,

package/dist/cjs/plugin.js

@@ -208,6 +208,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
           var dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
             dispatch = _ref2.dispatch,
             portalProviderAPI = _ref2.portalProviderAPI,
+            nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI,
             eventDispatcher = _ref2.eventDispatcher,
             getIntl = _ref2.getIntl;
           var _ref3 = options || {},
@@ -221,12 +222,13 @@ var tablesPlugin = function tablesPlugin(_ref) {
             isTableAlignmentEnabled = _ref3.isTableAlignmentEnabled,
             isCommentEditor = _ref3.isCommentEditor,
             isChromelessEditor = _ref3.isChromelessEditor;
-          return (0, _main.createPlugin)(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, (0, _createPluginConfig.pluginConfig)(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor);
+          return (0, _main.createPlugin)(dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, (0, _createPluginConfig.pluginConfig)(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor);
         }
       }, {
         name: 'tablePMColResizing',
         plugin: function plugin(_ref4) {
-          var dispatch = _ref4.dispatch;
+          var dispatch = _ref4.dispatch,
+            nodeViewPortalProviderAPI = _ref4.nodeViewPortalProviderAPI;
           var _ref5 = options || {},
             fullWidthEnabled = _ref5.fullWidthEnabled,
             tableOptions = _ref5.tableOptions,
@@ -238,7 +240,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
             allowColumnResizing = _pluginConfig2.allowColumnResizing;
           return allowColumnResizing ? (0, _tableResizing.createPlugin)(dispatch, {
             lastColumnResizable: !fullWidthEnabled
-          }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, api, editorAnalyticsAPI, isTableScalingEnabled || false, isNewColumnResizingEnabled, isTableAlignmentEnabled, !!(options !== null && options !== void 0 && options.isCommentEditor)) : undefined;
+          }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, isTableScalingEnabled || false, isNewColumnResizingEnabled, isTableAlignmentEnabled, !!(options !== null && options !== void 0 && options.isCommentEditor)) : undefined;
         }
       }, {
         name: 'tableEditing',
@@ -251,7 +253,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
       {
         name: 'tableKeymap',
         plugin: function plugin(_ref6) {
-          var getIntl = _ref6.getIntl;
+          var getIntl = _ref6.getIntl,
+            nodeViewPortalProviderAPI = _ref6.nodeViewPortalProviderAPI;
           var _ref7 = options || {},
             dragAndDropEnabled = _ref7.dragAndDropEnabled,
             _ref7$isTableScalingE = _ref7.isTableScalingEnabled,
@@ -266,7 +269,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
             isChromelessEditor = _ref7$isChromelessEdi === void 0 ? false : _ref7$isChromelessEdi,
             _ref7$tableResizingEn = _ref7.tableResizingEnabled,
             tableResizingEnabled = _ref7$tableResizingEn === void 0 ? false : _ref7$tableResizingEn;
-          return (0, _keymap.keymapPlugin)(defaultGetEditorContainerWidth, api, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, isTableAlignmentEnabled, fullWidthEnabled, api, getIntl, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, tableResizingEnabled);
+          return (0, _keymap.keymapPlugin)(defaultGetEditorContainerWidth, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, isTableAlignmentEnabled, fullWidthEnabled, api, getIntl, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, tableResizingEnabled);
         }
       }, {
         name: 'tableSelectionKeymap',
@@ -313,45 +316,46 @@ var tablesPlugin = function tablesPlugin(_ref) {
         }
       }, {
         name: 'tableViewModeSort',
-        plugin: function plugin() {
-          return api !== null && api !== void 0 && api.editorViewMode ? (0, _viewModeSort.createPlugin)(api) : undefined;
+        plugin: function plugin(_ref13) {
+          var nodeViewPortalProviderAPI = _ref13.nodeViewPortalProviderAPI;
+          return api !== null && api !== void 0 && api.editorViewMode ? (0, _viewModeSort.createPlugin)(api, nodeViewPortalProviderAPI) : undefined;
         }
       }, {
         name: 'tableLocalId',
-        plugin: function plugin(_ref13) {
-          var dispatch = _ref13.dispatch;
+        plugin: function plugin(_ref14) {
+          var dispatch = _ref14.dispatch;
           return (0, _tableLocalId.createPlugin)(dispatch);
         }
       }, {
         name: 'tableWidth',
-        plugin: function plugin(_ref14) {
+        plugin: function plugin(_ref15) {
           var _options$fullWidthEna, _options$isTableScali, _options$isTableAlign, _options$isCommentEdi;
-          var dispatchAnalyticsEvent = _ref14.dispatchAnalyticsEvent,
-            dispatch = _ref14.dispatch;
+          var dispatchAnalyticsEvent = _ref15.dispatchAnalyticsEvent,
+            dispatch = _ref15.dispatch;
           return options !== null && options !== void 0 && options.tableResizingEnabled ? (0, _tableWidth.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false, (_options$isTableScali = options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) !== null && _options$isTableScali !== void 0 ? _options$isTableScali : false, (_options$isTableAlign = options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled) !== null && _options$isTableAlign !== void 0 ? _options$isTableAlign : false, (_options$isCommentEdi = options === null || options === void 0 ? void 0 : options.isCommentEditor) !== null && _options$isCommentEdi !== void 0 ? _options$isCommentEdi : false) : undefined;
         }
       }, {
         name: 'tableWidthInCommentFix',
-        plugin: function plugin(_ref15) {
+        plugin: function plugin(_ref16) {
           var _options$isTableAlign2;
-          var dispatch = _ref15.dispatch;
+          var dispatch = _ref16.dispatch;
           return options !== null && options !== void 0 && options.tableResizingEnabled && options !== null && options !== void 0 && options.isCommentEditor ? (0, _tableWidthInCommentFix.createPlugin)(dispatch, (_options$isTableAlign2 = options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled) !== null && _options$isTableAlign2 !== void 0 ? _options$isTableAlign2 : false) : undefined;
         }
       },
       // TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
       {
         name: 'tableOverflowAnalyticsPlugin',
-        plugin: function plugin(_ref16) {
+        plugin: function plugin(_ref17) {
           var _options$tableResizin;
-          var dispatch = _ref16.dispatch,
-            dispatchAnalyticsEvent = _ref16.dispatchAnalyticsEvent;
+          var dispatch = _ref17.dispatch,
+            dispatchAnalyticsEvent = _ref17.dispatchAnalyticsEvent;
           return (0, _tableAnalytics.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$tableResizin = options === null || options === void 0 ? void 0 : options.tableResizingEnabled) !== null && _options$tableResizin !== void 0 ? _options$tableResizin : false);
         }
       }, {
         name: 'tableAnalyticsPlugin',
-        plugin: function plugin(_ref17) {
-          var dispatch = _ref17.dispatch,
-            dispatchAnalyticsEvent = _ref17.dispatchAnalyticsEvent;
+        plugin: function plugin(_ref18) {
+          var dispatch = _ref18.dispatch,
+            dispatchAnalyticsEvent = _ref18.dispatchAnalyticsEvent;
           return (0, _plugin.createPlugin)(dispatch, dispatchAnalyticsEvent);
         }
       }, {
@@ -382,13 +386,13 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }
       return plugins;
     },
-    contentComponent: function contentComponent(_ref18) {
+    contentComponent: function contentComponent(_ref19) {
       var _api$featureFlags;
-      var editorView = _ref18.editorView,
-        popupsMountPoint = _ref18.popupsMountPoint,
-        popupsBoundariesElement = _ref18.popupsBoundariesElement,
-        popupsScrollableElement = _ref18.popupsScrollableElement,
-        dispatchAnalyticsEvent = _ref18.dispatchAnalyticsEvent;
+      var editorView = _ref19.editorView,
+        popupsMountPoint = _ref19.popupsMountPoint,
+        popupsBoundariesElement = _ref19.popupsBoundariesElement,
+        popupsScrollableElement = _ref19.popupsScrollableElement,
+        dispatchAnalyticsEvent = _ref19.dispatchAnalyticsEvent;
       return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
         component: _analytics.ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -404,32 +408,32 @@ var tablesPlugin = function tablesPlugin(_ref) {
           stickyHeadersState: _stickyHeaders.pluginKey,
           dragAndDropState: _dragAndDrop.pluginKey
         },
-        render: function render(_ref19) {
-          var resizingPluginState = _ref19.tableResizingPluginState,
-            stickyHeadersState = _ref19.stickyHeadersState,
-            tablePluginState = _ref19.tablePluginState,
-            tableWidthPluginState = _ref19.tableWidthPluginState,
-            dragAndDropState = _ref19.dragAndDropState;
+        render: function render(_ref20) {
+          var resizingPluginState = _ref20.tableResizingPluginState,
+            stickyHeadersState = _ref20.stickyHeadersState,
+            tablePluginState = _ref20.tablePluginState,
+            tableWidthPluginState = _ref20.tableWidthPluginState,
+            dragAndDropState = _ref20.dragAndDropState;
           var isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
           var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
           var resizingTableLocalId = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableLocalId;
           var resizingTableRef = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableRef;
           var isResizing = isColumnResizing || isTableResizing;
           var widthToWidest = tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.widthToWidest;
-          var _ref20 = tablePluginState,
-            tableNode = _ref20.tableNode,
-            tablePos = _ref20.tablePos,
-            targetCellPosition = _ref20.targetCellPosition,
-            isContextualMenuOpen = _ref20.isContextualMenuOpen,
-            tableRef = _ref20.tableRef,
-            pluginConfig = _ref20.pluginConfig,
-            insertColumnButtonIndex = _ref20.insertColumnButtonIndex,
-            insertRowButtonIndex = _ref20.insertRowButtonIndex,
-            isHeaderColumnEnabled = _ref20.isHeaderColumnEnabled,
-            isHeaderRowEnabled = _ref20.isHeaderRowEnabled,
-            isDragAndDropEnabled = _ref20.isDragAndDropEnabled,
-            tableWrapperTarget = _ref20.tableWrapperTarget,
-            isCellMenuOpenByKeyboard = _ref20.isCellMenuOpenByKeyboard;
+          var _ref21 = tablePluginState,
+            tableNode = _ref21.tableNode,
+            tablePos = _ref21.tablePos,
+            targetCellPosition = _ref21.targetCellPosition,
+            isContextualMenuOpen = _ref21.isContextualMenuOpen,
+            tableRef = _ref21.tableRef,
+            pluginConfig = _ref21.pluginConfig,
+            insertColumnButtonIndex = _ref21.insertColumnButtonIndex,
+            insertRowButtonIndex = _ref21.insertRowButtonIndex,
+            isHeaderColumnEnabled = _ref21.isHeaderColumnEnabled,
+            isHeaderRowEnabled = _ref21.isHeaderRowEnabled,
+            isDragAndDropEnabled = _ref21.isDragAndDropEnabled,
+            tableWrapperTarget = _ref21.tableWrapperTarget,
+            isCellMenuOpenByKeyboard = _ref21.isCellMenuOpenByKeyboard;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? (0, _stickyHeaders.findStickyHeaderForTable)(stickyHeadersState, tablePos) : undefined;
           return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/_react.default.createElement(_FloatingContextualButton.default, {
@@ -522,8 +526,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }));
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref21) {
-        var formatMessage = _ref21.formatMessage;
+      quickInsert: function quickInsert(_ref22) {
+        var formatMessage = _ref22.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(_messages.toolbarInsertBlockMessages.table),

package/dist/cjs/pm-plugins/decorations/utils/column-resizing.js

@@ -24,13 +24,13 @@ var updateLastCellElement = function updateLastCellElement(lastCellElementsDecor
     return (0, _decoration.updateDecorations)(tr.doc, decorationSet, lastCellElementsDecorations, _types.TableDecorations.LAST_CELL_ELEMENT);
   };
 };
-var buildColumnResizingDecorations = exports.buildColumnResizingDecorations = function buildColumnResizingDecorations(rowEndIndex, columnEndIndex, includeTooltip, getIntl) {
+var buildColumnResizingDecorations = exports.buildColumnResizingDecorations = function buildColumnResizingDecorations(rowEndIndex, columnEndIndex, includeTooltip, getIntl, nodeViewPortalProviderAPI) {
   return function (_ref3) {
     var tr = _ref3.tr,
       decorationSet = _ref3.decorationSet;
     var _ref4 = columnEndIndex < 0 ? emptyDecorations : (0, _decoration.createResizeHandleDecoration)(tr, rowEndIndex, {
         right: columnEndIndex
-      }, includeTooltip, getIntl),
+      }, includeTooltip, getIntl, nodeViewPortalProviderAPI),
       _ref5 = (0, _slicedToArray2.default)(_ref4, 2),
       columnResizesDecorations = _ref5[0],
       lastCellElementsDecorations = _ref5[1];

package/dist/cjs/pm-plugins/keymap.js

@@ -14,19 +14,19 @@ var _commandsWithAnalytics = require("../commands-with-analytics");
 var _columnResize = require("../commands/column-resize");
 var _insert = require("../commands/insert");
 var _commandsWithAnalytics2 = require("../pm-plugins/drag-and-drop/commands-with-analytics");
-function keymapPlugin(getEditorContainerWidth, api, editorAnalyticsAPI, dragAndDropEnabled) {
+function keymapPlugin(getEditorContainerWidth, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, dragAndDropEnabled) {
   var _pluginInjectionApi$a;
-  var isTableScalingEnabled = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-  var isTableAlignmentEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
-  var isFullWidthEnabled = arguments.length > 6 ? arguments[6] : undefined;
-  var pluginInjectionApi = arguments.length > 7 ? arguments[7] : undefined;
-  var getIntl = arguments.length > 8 ? arguments[8] : undefined;
-  var isCellBackgroundDuplicated = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : false;
-  var isTableFixedColumnWidthsOptionEnabled = arguments.length > 10 && arguments[10] !== undefined ? arguments[10] : false;
-  var shouldUseIncreasedScalingPercent = arguments.length > 11 ? arguments[11] : undefined;
-  var isCommentEditor = arguments.length > 12 ? arguments[12] : undefined;
-  var isChromelessEditor = arguments.length > 13 ? arguments[13] : undefined;
-  var isTableResizingEnabled = arguments.length > 14 ? arguments[14] : undefined;
+  var isTableScalingEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  var isTableAlignmentEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
+  var isFullWidthEnabled = arguments.length > 7 ? arguments[7] : undefined;
+  var pluginInjectionApi = arguments.length > 8 ? arguments[8] : undefined;
+  var getIntl = arguments.length > 9 ? arguments[9] : undefined;
+  var isCellBackgroundDuplicated = arguments.length > 10 && arguments[10] !== undefined ? arguments[10] : false;
+  var isTableFixedColumnWidthsOptionEnabled = arguments.length > 11 && arguments[11] !== undefined ? arguments[11] : false;
+  var shouldUseIncreasedScalingPercent = arguments.length > 12 ? arguments[12] : undefined;
+  var isCommentEditor = arguments.length > 13 ? arguments[13] : undefined;
+  var isChromelessEditor = arguments.length > 14 ? arguments[14] : undefined;
+  var isTableResizingEnabled = arguments.length > 15 ? arguments[15] : undefined;
   var list = {};
   var ariaNotifyPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.ariaNotify;
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.nextCell.common, (0, _commands2.goToNextCell)(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(1), list);
@@ -64,17 +64,20 @@ function keymapPlugin(getEditorContainerWidth, api, editorAnalyticsAPI, dragAndD
   }
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.startColumnResizing.common, (0, _columnResize.initiateKeyboardColumnResizing)({
     ariaNotify: ariaNotifyPlugin,
-    getIntl: getIntl
+    getIntl: getIntl,
+    nodeViewPortalProviderAPI: nodeViewPortalProviderAPI
   }), list);
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveRight.common, (0, _columnResize.activateNextResizeArea)({
     direction: 1,
     ariaNotify: ariaNotifyPlugin,
-    getIntl: getIntl
+    getIntl: getIntl,
+    nodeViewPortalProviderAPI: nodeViewPortalProviderAPI
   }), list);
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.moveLeft.common, (0, _columnResize.activateNextResizeArea)({
     direction: -1,
     ariaNotify: ariaNotifyPlugin,
-    getIntl: getIntl
+    getIntl: getIntl,
+    nodeViewPortalProviderAPI: nodeViewPortalProviderAPI
   }), list);
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.decreaseMediaSize.common, (0, _commandsWithAnalytics.changeColumnWidthByStepWithAnalytics)(editorAnalyticsAPI, api)(-10, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, !!isCommentEditor, _analytics.INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.increaseMediaSize.common, (0, _commandsWithAnalytics.changeColumnWidthByStepWithAnalytics)(editorAnalyticsAPI, api)(10, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, !!isCommentEditor, _analytics.INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);

package/dist/cjs/pm-plugins/main.js

@@ -29,7 +29,7 @@ var _pluginFactory = require("./plugin-factory");
 var _pluginKey = require("./plugin-key");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor) {
+var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor) {
   var _accessibilityUtils;
   var state = (0, _pluginFactory.createPluginState)(dispatch, _objectSpread(_objectSpread(_objectSpread({
     pluginConfig: pluginConfig,
@@ -285,7 +285,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
         blur: _eventHandlers.handleBlur,
         mousedown: (0, _eventHandlers.withCellTracking)(_eventHandlers.handleMouseDown),
         mouseleave: _eventHandlers.handleMouseLeave,
-        mousemove: (0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleMouseMove),
+        mousemove: (0, _eventHandlers.whenTableInFocus)((0, _eventHandlers.handleMouseMove)(nodeViewPortalProviderAPI)),
         mouseenter: _eventHandlers.handleMouseEnter,
         mouseup: (0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleMouseUp),
         click: (0, _eventHandlers.withCellTracking)((0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleClick))

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

@@ -25,7 +25,7 @@ var _misc2 = require("./utils/misc");
 var _resizeColumn = require("./utils/resize-column");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, api, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor) {
+var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor) {
   var _originalTable$attrs;
   var state = view.state,
     dispatch = view.dispatch;
@@ -110,7 +110,7 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
 
   // 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.
-  (0, _misc.updateResizeHandleDecorations)(undefined, undefined, false)(state, dispatch);
+  (0, _misc.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/cjs/pm-plugins/table-resizing/plugin.js

@@ -15,7 +15,7 @@ var _eventHandlers = require("./event-handlers");
 var _pluginFactory2 = require("./plugin-factory");
 var _pluginKey = require("./plugin-key");
 var _utils = require("./utils");
-function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorFeatureFlags, api, editorAnalyticsAPI, isTableScalingEnabled, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor) {
+function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorFeatureFlags, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, isTableScalingEnabled, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor) {
   var _ref$lastColumnResiza = _ref.lastColumnResizable,
     lastColumnResizable = _ref$lastColumnResiza === void 0 ? true : _ref$lastColumnResiza;
   return new _safePlugin.SafePlugin({
@@ -53,7 +53,7 @@ function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorFeatureF
             isColumnKeyboardResizeStarted = isKeyboardResize;
           }
           if (resizeHandlePos !== null && (!dragging || isColumnKeyboardResizeStarted)) {
-            if ((0, _eventHandlers.handleMouseDown)(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled || false, api, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor)) {
+            if ((0, _eventHandlers.handleMouseDown)(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled || false, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor)) {
               var _state = view.state,
                 _dispatch = view.dispatch;
               return (0, _commands.setResizeHandlePos)(resizeHandlePos)(_state, _dispatch);