@atlaskit/editor-plugin-table 7.31.0 → 7.31.2

package/dist/esm/plugin.js

@@ -201,6 +201,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 || {},
@@ -214,12 +215,13 @@ var tablesPlugin = function tablesPlugin(_ref) {
             isTableAlignmentEnabled = _ref3.isTableAlignmentEnabled,
             isCommentEditor = _ref3.isCommentEditor,
             isChromelessEditor = _ref3.isChromelessEditor;
-          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor);
+          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, 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,
@@ -231,7 +233,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
             allowColumnResizing = _pluginConfig2.allowColumnResizing;
           return allowColumnResizing ? createFlexiResizingPlugin(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',
@@ -244,7 +246,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,
@@ -259,7 +262,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 keymapPlugin(defaultGetEditorContainerWidth, api, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, isTableAlignmentEnabled, fullWidthEnabled, api, getIntl, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, tableResizingEnabled);
+          return keymapPlugin(defaultGetEditorContainerWidth, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, isTableAlignmentEnabled, fullWidthEnabled, api, getIntl, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, tableResizingEnabled);
         }
       }, {
         name: 'tableSelectionKeymap',
@@ -306,45 +309,46 @@ var tablesPlugin = function tablesPlugin(_ref) {
         }
       }, {
         name: 'tableViewModeSort',
-        plugin: function plugin() {
-          return api !== null && api !== void 0 && api.editorViewMode ? createViewModeSortPlugin(api) : undefined;
+        plugin: function plugin(_ref13) {
+          var nodeViewPortalProviderAPI = _ref13.nodeViewPortalProviderAPI;
+          return api !== null && api !== void 0 && api.editorViewMode ? createViewModeSortPlugin(api, nodeViewPortalProviderAPI) : undefined;
         }
       }, {
         name: 'tableLocalId',
-        plugin: function plugin(_ref13) {
-          var dispatch = _ref13.dispatch;
+        plugin: function plugin(_ref14) {
+          var dispatch = _ref14.dispatch;
           return createTableLocalIdPlugin(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 ? createTableWidthPlugin(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 ? createTableWidthInCommentFixPlugin(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 createTableOverflowAnalyticsPlugin(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 createTableAnalyticsPlugin(dispatch, dispatchAnalyticsEvent);
         }
       }, {
@@ -375,13 +379,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.createElement(ErrorBoundary, {
         component: ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -397,32 +401,32 @@ var tablesPlugin = function tablesPlugin(_ref) {
           stickyHeadersState: stickyHeadersPluginKey,
           dragAndDropState: dragAndDropPluginKey
         },
-        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 ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
           return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
@@ -515,8 +519,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.table),

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

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

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

@@ -7,19 +7,19 @@ import { addRowAroundSelection, changeColumnWidthByStepWithAnalytics, deleteSele
 import { activateNextResizeArea, initiateKeyboardColumnResizing, stopKeyboardColumnResizing } from '../commands/column-resize';
 import { addColumnAfter as addColumnAfterCommand, addColumnBefore as addColumnBeforeCommand, createTable } from '../commands/insert';
 import { moveSourceWithAnalyticsViaShortcut } from '../pm-plugins/drag-and-drop/commands-with-analytics';
-export function keymapPlugin(getEditorContainerWidth, api, editorAnalyticsAPI, dragAndDropEnabled) {
+export 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;
   bindKeymapWithCommand(nextCell.common, goToNextCell(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(1), list);
@@ -57,17 +57,20 @@ export function keymapPlugin(getEditorContainerWidth, api, editorAnalyticsAPI, d
   }
   bindKeymapWithCommand(startColumnResizing.common, initiateKeyboardColumnResizing({
     ariaNotify: ariaNotifyPlugin,
-    getIntl: getIntl
+    getIntl: getIntl,
+    nodeViewPortalProviderAPI: nodeViewPortalProviderAPI
   }), list);
   bindKeymapWithCommand(moveRight.common, activateNextResizeArea({
     direction: 1,
     ariaNotify: ariaNotifyPlugin,
-    getIntl: getIntl
+    getIntl: getIntl,
+    nodeViewPortalProviderAPI: nodeViewPortalProviderAPI
   }), list);
   bindKeymapWithCommand(moveLeft.common, activateNextResizeArea({
     direction: -1,
     ariaNotify: ariaNotifyPlugin,
-    getIntl: getIntl
+    getIntl: getIntl,
+    nodeViewPortalProviderAPI: nodeViewPortalProviderAPI
   }), list);
   bindKeymapWithCommand(decreaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI, api)(-10, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, !!isCommentEditor, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
   bindKeymapWithCommand(increaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI, api)(10, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, !!isCommentEditor, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);

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

@@ -22,7 +22,7 @@ import { isHeaderRowRequired, transformSliceTableLayoutDefaultToCenter } from '.
 import { defaultHoveredCell, defaultTableSelection } from './default-table-selection';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
-export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor) {
+export var 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 = createPluginState(dispatch, _objectSpread(_objectSpread(_objectSpread({
     pluginConfig: pluginConfig,
@@ -278,7 +278,7 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
         blur: handleBlur,
         mousedown: withCellTracking(handleMouseDown),
         mouseleave: handleMouseLeave,
-        mousemove: whenTableInFocus(handleMouseMove),
+        mousemove: whenTableInFocus(handleMouseMove(nodeViewPortalProviderAPI)),
         mouseenter: handleMouseEnter,
         mouseup: whenTableInFocus(handleMouseUp),
         click: withCellTracking(whenTableInFocus(handleClick))

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

@@ -18,7 +18,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 var handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, api, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor) {
+export var 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;
@@ -103,7 +103,7 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
 
   // 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/esm/pm-plugins/table-resizing/plugin.js

@@ -8,7 +8,7 @@ import { handleMouseDown } from './event-handlers';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
 import { getResizeCellPos } from './utils';
-export function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorFeatureFlags, api, editorAnalyticsAPI, isTableScalingEnabled, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor) {
+export 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({
@@ -46,7 +46,7 @@ export function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorF
             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)) {
               var _state = view.state,
                 _dispatch = view.dispatch;
               return setResizeHandlePos(resizeHandlePos)(_state, _dispatch);

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

@@ -15,16 +15,18 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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 var createPlugin = function createPlugin(api) {
+export var createPlugin = function createPlugin(api, nodeViewPortalProviderAPI) {
   return new SafePlugin({
     state: {
       init: function init() {
@@ -97,6 +99,7 @@ export var createPlugin = function createPlugin(api) {
             var map = TableMap.get(tableNode);
             var hasMergedCells = new Set(map.map).size !== map.map.length;
             map.mapByRow[0].forEach(function (cell, index) {
+              var decorationRenderKey = uuid();
               decs.push(Decoration.widget(cell + pos + 2, function () {
                 var _sort$tableId;
                 var element = document.createElement('div');
@@ -114,16 +117,38 @@ export var createPlugin = function createPlugin(api) {
                 }
                 var _getPluginState = getPluginState(oldState),
                   getIntl = _getPluginState.getIntl;
-                ReactDOM.render( /*#__PURE__*/createElement(RawIntlProvider, {
-                  value: getIntl()
-                }, /*#__PURE__*/createElement(SortingIconWrapper, {
-                  isSortingAllowed: !hasMergedCells,
-                  sortOrdered: sortOrdered,
-                  onClick: function onClick() {},
-                  onKeyDown: function onKeyDown() {},
-                  api: api
-                })), element);
+                if (fg('platform_editor_react18_plugin_portalprovider')) {
+                  nodeViewPortalProviderAPI.render(function () {
+                    return /*#__PURE__*/createElement(RawIntlProvider, {
+                      value: getIntl()
+                    }, /*#__PURE__*/createElement(SortingIconWrapper, {
+                      isSortingAllowed: !hasMergedCells,
+                      sortOrdered: sortOrdered,
+                      onClick: function onClick() {},
+                      onKeyDown: function onKeyDown() {},
+                      api: api
+                    }));
+                  }, element, decorationRenderKey);
+                } else {
+                  ReactDOM.render( /*#__PURE__*/createElement(RawIntlProvider, {
+                    value: getIntl()
+                  }, /*#__PURE__*/createElement(SortingIconWrapper, {
+                    isSortingAllowed: !hasMergedCells,
+                    sortOrdered: sortOrdered,
+                    onClick: function onClick() {},
+                    onKeyDown: function onKeyDown() {},
+                    api: api
+                  })), element);
+                }
                 return element;
+              }, {
+                destroy: function destroy(node) {
+                  if (fg('platform_editor_react18_plugin_portalprovider')) {
+                    nodeViewPortalProviderAPI.remove(decorationRenderKey);
+                  } else {
+                    ReactDOM.unmountComponentAtNode(node);
+                  }
+                }
               }));
             });
           });

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

@@ -416,14 +416,10 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
     });
     _defineProperty(_assertThisInitialized(_this), "createOriginalContextMenuItems", function () {
       var items = [];
-      var getEditorFeatureFlags = _this.props.getEditorFeatureFlags;
-      var _ref2 = getEditorFeatureFlags ? getEditorFeatureFlags() : {},
-        _ref2$tableSortColumn = _ref2.tableSortColumnReorder,
-        tableSortColumnReorder = _ref2$tableSortColumn === void 0 ? false : _ref2$tableSortColumn;
       var sortColumnItems = _this.createSortColumnItems();
       var backgroundColorItem = _this.createBackgroundColorItem();
       var distributeColumnsItem = _this.createDistributeColumnsItem();
-      tableSortColumnReorder && sortColumnItems && items.push.apply(items, _toConsumableArray(sortColumnItems));
+      sortColumnItems && items.push.apply(items, _toConsumableArray(sortColumnItems));
       backgroundColorItem && items.push(backgroundColorItem);
       items.push(_this.createInsertColumnItem());
       items.push(_this.createInsertRowItem());
@@ -431,7 +427,6 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
       items.push(_this.createDeleteRowItem());
       items.push.apply(items, _toConsumableArray(_this.createMergeSplitCellItems()));
       distributeColumnsItem && items.push(distributeColumnsItem);
-      !tableSortColumnReorder && sortColumnItems && items.push.apply(items, _toConsumableArray(sortColumnItems));
       items.push(_this.createClearCellsItem());
       return [{
         items: items
@@ -462,8 +457,8 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
       items[1].items.push(deleteRowItem);
       return items;
     });
-    _defineProperty(_assertThisInitialized(_this), "onMenuItemActivated", function (_ref3) {
-      var item = _ref3.item;
+    _defineProperty(_assertThisInitialized(_this), "onMenuItemActivated", function (_ref2) {
+      var item = _ref2.item;
       var _this$props10 = _this.props,
         editorView = _this$props10.editorView,
         selectionRect = _this$props10.selectionRect,
@@ -479,11 +474,11 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         targetCellPosition = _getPluginState11.targetCellPosition,
         _getPluginState11$isT = _getPluginState11.isTableScalingEnabled,
         isTableScalingEnabled = _getPluginState11$isT === void 0 ? false : _getPluginState11$isT;
-      var _ref4 = getEditorFeatureFlags ? getEditorFeatureFlags() : {},
-        _ref4$tableDuplicateC = _ref4.tableDuplicateCellColouring,
-        tableDuplicateCellColouring = _ref4$tableDuplicateC === void 0 ? false : _ref4$tableDuplicateC,
-        _ref4$tableWithFixedC = _ref4.tableWithFixedColumnWidthsOption,
-        tableWithFixedColumnWidthsOption = _ref4$tableWithFixedC === void 0 ? false : _ref4$tableWithFixedC;
+      var _ref3 = getEditorFeatureFlags ? getEditorFeatureFlags() : {},
+        _ref3$tableDuplicateC = _ref3.tableDuplicateCellColouring,
+        tableDuplicateCellColouring = _ref3$tableDuplicateC === void 0 ? false : _ref3$tableDuplicateC,
+        _ref3$tableWithFixedC = _ref3.tableWithFixedColumnWidthsOption,
+        tableWithFixedColumnWidthsOption = _ref3$tableWithFixedC === void 0 ? false : _ref3$tableWithFixedC;
       // context menu opened by keyboard and any item except 'background' activated
       // or color has been chosen from color palette
       if (isCellMenuOpenByKeyboard && (item.value.name !== 'background' || item.value.name === 'background' && _this.state.isSubmenuOpen)) {
@@ -612,8 +607,8 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         }
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "handleItemMouseEnter", function (_ref5) {
-      var item = _ref5.item;
+    _defineProperty(_assertThisInitialized(_this), "handleItemMouseEnter", function (_ref4) {
+      var item = _ref4.item;
       var _this$props13 = _this.props,
         _this$props13$editorV = _this$props13.editorView,
         state = _this$props13$editorV.state,
@@ -636,8 +631,8 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         hoverMergedCells()(state, dispatch);
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "handleItemMouseLeave", function (_ref6) {
-      var item = _ref6.item;
+    _defineProperty(_assertThisInitialized(_this), "handleItemMouseLeave", function (_ref5) {
+      var item = _ref5.item;
       var _this$props$editorVie = _this.props.editorView,
         state = _this$props$editorVie.state,
         dispatch = _this$props$editorVie.dispatch;

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

@@ -94,20 +94,18 @@ var MapDragMenuOptionIdToMessage = {
     plural: null
   }
 };
-var getGroupedDragMenuConfig = function getGroupedDragMenuConfig(tableSortColumnReorder) {
+var getGroupedDragMenuConfig = function getGroupedDragMenuConfig() {
   var 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']];
   var sortColumnItems = ['sort_column_asc', 'sort_column_desc'];
-  tableSortColumnReorder ? groupedDragMenuConfig.unshift(sortColumnItems) : groupedDragMenuConfig.push(sortColumnItems);
+  groupedDragMenuConfig.unshift(sortColumnItems);
   return groupedDragMenuConfig;
 };
 var elementBeforeIconStyles = xcss({
   marginRight: 'space.negative.075',
   display: 'flex'
 });
-var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig, formatMessage) {
-  var tableSortColumnReorder = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  var selectionRect = arguments.length > 3 ? arguments[3] : undefined;
-  var groupedDragMenuConfig = getGroupedDragMenuConfig(tableSortColumnReorder);
+var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig, formatMessage, selectionRect) {
+  var groupedDragMenuConfig = getGroupedDragMenuConfig();
   var menuItemsArr = _toConsumableArray(Array(groupedDragMenuConfig.length)).map(function () {
     return [];
   });
@@ -205,7 +203,6 @@ var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
     tableDuplicateCellColouring = _ref.tableDuplicateCellColouring,
     shouldUseIncreasedScalingPercent = _ref.shouldUseIncreasedScalingPercent,
     isTableFixedColumnWidthsOptionEnabled = _ref.isTableFixedColumnWidthsOptionEnabled,
-    tableSortColumnReorder = _ref.tableSortColumnReorder,
     ariaNotifyPlugin = _ref.ariaNotifyPlugin,
     isCommentEditor = _ref.isCommentEditor;
   var state = editorView.state,
@@ -221,8 +218,8 @@ var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
   var selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
   var hasMergedCellsInTable = (_tableMap$hasMergedCe = tableMap === null || tableMap === void 0 ? void 0 : tableMap.hasMergedCells()) !== null && _tableMap$hasMergedCe !== void 0 ? _tableMap$hasMergedCe : false;
   var allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
-  var 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);
-  var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig, formatMessage, tableSortColumnReorder, selectionRect),
+  var 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);
+  var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig, formatMessage, selectionRect),
     menuItems = _convertToDropdownIte.menuItems,
     menuCallback = _convertToDropdownIte.menuCallback;
   var handleSubMenuRef = function handleSubMenuRef(ref) {
@@ -271,7 +268,7 @@ var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
         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)
@@ -469,7 +466,7 @@ var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
     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/esm/ui/FloatingDragMenu/index.js

@@ -36,9 +36,7 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     _ref2$tableDuplicateC = _ref2.tableDuplicateCellColouring,
     tableDuplicateCellColouring = _ref2$tableDuplicateC === void 0 ? false : _ref2$tableDuplicateC,
     _ref2$tableWithFixedC = _ref2.tableWithFixedColumnWidthsOption,
-    tableWithFixedColumnWidthsOption = _ref2$tableWithFixedC === void 0 ? false : _ref2$tableWithFixedC,
-    _ref2$tableSortColumn = _ref2.tableSortColumnReorder,
-    tableSortColumnReorder = _ref2$tableSortColumn === void 0 ? false : _ref2$tableSortColumn;
+    tableWithFixedColumnWidthsOption = _ref2$tableWithFixedC === void 0 ? false : _ref2$tableWithFixedC;
   var shouldUseIncreasedScalingPercent = isTableScalingEnabled && (tableWithFixedColumnWidthsOption || isCommentEditor);
   return /*#__PURE__*/React.createElement(Popup, {
     alignX: direction === 'row' ? 'right' : undefined,
@@ -77,7 +75,6 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     tableDuplicateCellColouring: tableDuplicateCellColouring,
     shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
     isTableFixedColumnWidthsOptionEnabled: tableWithFixedColumnWidthsOption,
-    tableSortColumnReorder: tableSortColumnReorder,
     ariaNotifyPlugin: ariaNotifyPlugin,
     api: api,
     isCommentEditor: isCommentEditor || false

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

@@ -17,8 +17,7 @@ export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedCo
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 export var dragMenuBackgroundColorStyles = function dragMenuBackgroundColorStyles() {
-  var tableSortColumnReorder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: ", "px; // move the submenu down when 'sort increasing/decreasing' appear before background color picker\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), ClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), tableSortColumnReorder ? TABLE_DRAG_MENU_PADDING_TOP + TABLE_DRAG_MENU_SORT_GROUP_HEIGHT + TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT : 0, dragMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.DRAG_SUBMENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: ", "px; // move the submenu down when 'sort increasing/decreasing' appear before background color picker\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), ClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), TABLE_DRAG_MENU_PADDING_TOP + TABLE_DRAG_MENU_SORT_GROUP_HEIGHT + TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT, dragMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.DRAG_SUBMENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
 };
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766