@atlaskit/editor-plugin-table 7.31.0 → 7.31.1

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

@@ -11,10 +11,12 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _reactIntlNext = require("react-intl-next");
+var _v = _interopRequireDefault(require("uuid/v4"));
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _types = require("@atlaskit/editor-common/types");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _SortingIconWrapper = require("../../ui/icons/SortingIconWrapper");
 var _pluginFactory = require("../plugin-factory");
 var _consts = require("./consts");
@@ -29,7 +31,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * Instead of making changes to the ProseMirror document, the plugin sorts the table rows in the DOM. This allows the sorting to be
  * visible to the user without affecting the document's content.
  */
-var createPlugin = exports.createPlugin = function createPlugin(api) {
+var createPlugin = exports.createPlugin = function createPlugin(api, nodeViewPortalProviderAPI) {
   return new _safePlugin.SafePlugin({
     state: {
       init: function init() {
@@ -102,6 +104,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
             var map = _tableMap.TableMap.get(tableNode);
             var hasMergedCells = new Set(map.map).size !== map.map.length;
             map.mapByRow[0].forEach(function (cell, index) {
+              var decorationRenderKey = (0, _v.default)();
               decs.push(_view.Decoration.widget(cell + pos + 2, function () {
                 var _sort$tableId;
                 var element = document.createElement('div');
@@ -119,16 +122,38 @@ var createPlugin = exports.createPlugin = function createPlugin(api) {
                 }
                 var _getPluginState = (0, _pluginFactory.getPluginState)(oldState),
                   getIntl = _getPluginState.getIntl;
-                _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_reactIntlNext.RawIntlProvider, {
-                  value: getIntl()
-                }, /*#__PURE__*/(0, _react.createElement)(_SortingIconWrapper.SortingIconWrapper, {
-                  isSortingAllowed: !hasMergedCells,
-                  sortOrdered: sortOrdered,
-                  onClick: function onClick() {},
-                  onKeyDown: function onKeyDown() {},
-                  api: api
-                })), element);
+                if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
+                  nodeViewPortalProviderAPI.render(function () {
+                    return /*#__PURE__*/(0, _react.createElement)(_reactIntlNext.RawIntlProvider, {
+                      value: getIntl()
+                    }, /*#__PURE__*/(0, _react.createElement)(_SortingIconWrapper.SortingIconWrapper, {
+                      isSortingAllowed: !hasMergedCells,
+                      sortOrdered: sortOrdered,
+                      onClick: function onClick() {},
+                      onKeyDown: function onKeyDown() {},
+                      api: api
+                    }));
+                  }, element, decorationRenderKey);
+                } else {
+                  _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_reactIntlNext.RawIntlProvider, {
+                    value: getIntl()
+                  }, /*#__PURE__*/(0, _react.createElement)(_SortingIconWrapper.SortingIconWrapper, {
+                    isSortingAllowed: !hasMergedCells,
+                    sortOrdered: sortOrdered,
+                    onClick: function onClick() {},
+                    onKeyDown: function onKeyDown() {},
+                    api: api
+                  })), element);
+                }
                 return element;
+              }, {
+                destroy: function destroy(node) {
+                  if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
+                    nodeViewPortalProviderAPI.remove(decorationRenderKey);
+                  } else {
+                    _reactDom.default.unmountComponentAtNode(node);
+                  }
+                }
               }));
             });
           });

package/dist/cjs/utils/decoration.js

@@ -9,10 +9,12 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _reactIntlNext = require("react-intl-next");
+var _v = _interopRequireDefault(require("uuid/v4"));
 var _utils = require("@atlaskit/editor-common/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils2 = require("@atlaskit/editor-tables/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _types = require("../types");
 var _ColumnResizeWidget = require("../ui/ColumnResizeWidget");
 // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
@@ -251,6 +253,7 @@ var makeArray = function makeArray(n) {
 var createResizeHandleDecoration = exports.createResizeHandleDecoration = function createResizeHandleDecoration(tr, rowIndexTarget, columnEndIndexTarget) {
   var includeTooltip = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   var getIntl = arguments.length > 4 ? arguments[4] : undefined;
+  var nodeViewPortalProviderAPI = arguments.length > 5 ? arguments[5] : undefined;
   var emptyResult = [[], []];
   var table = (0, _utils2.findTable)(tr.selection);
   if (!table || !table.node) {
@@ -261,21 +264,38 @@ var createResizeHandleDecoration = exports.createResizeHandleDecoration = functi
     return emptyResult;
   }
   var createResizerHandleDecoration = function createResizerHandleDecoration(cellColumnPositioning, columnIndex, rowIndex, cellPos, cellNode) {
+    var decorationRenderKey = (0, _v.default)();
     var position = cellPos + cellNode.nodeSize - 1;
     return _view.Decoration.widget(position, function () {
       var element = document.createElement('div');
-      _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_reactIntlNext.RawIntlProvider, {
-        value: getIntl()
-      }, /*#__PURE__*/(0, _react.createElement)(_ColumnResizeWidget.ColumnResizeWidget, {
-        startIndex: cellColumnPositioning.left,
-        endIndex: cellColumnPositioning.right,
-        includeTooltip: includeTooltip
-      })), element);
+      if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
+        nodeViewPortalProviderAPI.render(function () {
+          return /*#__PURE__*/(0, _react.createElement)(_reactIntlNext.RawIntlProvider, {
+            value: getIntl()
+          }, /*#__PURE__*/(0, _react.createElement)(_ColumnResizeWidget.ColumnResizeWidget, {
+            startIndex: cellColumnPositioning.left,
+            endIndex: cellColumnPositioning.right,
+            includeTooltip: includeTooltip
+          }));
+        }, element, decorationRenderKey);
+      } else {
+        _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_reactIntlNext.RawIntlProvider, {
+          value: getIntl()
+        }, /*#__PURE__*/(0, _react.createElement)(_ColumnResizeWidget.ColumnResizeWidget, {
+          startIndex: cellColumnPositioning.left,
+          endIndex: cellColumnPositioning.right,
+          includeTooltip: includeTooltip
+        })), element);
+      }
       return element;
     }, {
       key: "".concat(_types.TableDecorations.COLUMN_RESIZING_HANDLE_WIDGET, "_").concat(rowIndex, "_").concat(columnIndex, "_").concat(includeTooltip ? 'with' : 'no', "-tooltip"),
       destroy: function destroy(node) {
-        _reactDom.default.unmountComponentAtNode(node);
+        if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
+          nodeViewPortalProviderAPI.remove(decorationRenderKey);
+        } else {
+          _reactDom.default.unmountComponentAtNode(node);
+        }
       }
     });
   };

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

@@ -15,7 +15,7 @@ import { createColumnLineResize, getSelectedColumnIndexes, updateDecorations } f
 const getTablePluginCommand = (actionPayload, originalTr) => {
   return createCommand(() => actionPayload, tr => (originalTr || tr).setMeta('addToHistory', false));
 };
-const updateResizeHandleAndStatePosition = (rowIndex, columnIndex, nextResizeHandlePos) => (state, dispatch) => {
+const updateResizeHandleAndStatePosition = (rowIndex, columnIndex, nextResizeHandlePos, nodeViewPortalProviderAPI) => (state, dispatch) => {
   let customTr = state.tr;
   const {
     pluginConfig: {
@@ -29,7 +29,7 @@ const updateResizeHandleAndStatePosition = (rowIndex, columnIndex, nextResizeHan
   if (!allowColumnResizing) {
     return false;
   }
-  const decorationsWithWidget = buildColumnResizingDecorations(rowIndex, columnIndex, true, getIntl)({
+  const decorationsWithWidget = buildColumnResizingDecorations(rowIndex, columnIndex, true, getIntl, nodeViewPortalProviderAPI)({
     tr: customTr,
     decorationSet: getDecorations(state)
   });
@@ -60,7 +60,8 @@ const updateResizeHandleAndStatePosition = (rowIndex, columnIndex, nextResizeHan
 };
 export const initiateKeyboardColumnResizing = ({
   ariaNotify,
-  getIntl
+  getIntl,
+  nodeViewPortalProviderAPI
 }) => (state, dispatch, view) => {
   const {
     selection
@@ -73,14 +74,15 @@ export const initiateKeyboardColumnResizing = ({
     });
   }
   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;
 };
 export const activateNextResizeArea = ({
   direction,
   ariaNotify,
-  getIntl
+  getIntl,
+  nodeViewPortalProviderAPI
 }) => (state, dispatch, view) => {
   const {
     resizeHandlePos
@@ -129,17 +131,17 @@ export const activateNextResizeArea = ({
     // we are somewhere in between the side columns of the table
     const offset = $nextCell.pos - $nextCell.start(-1);
     const 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) {
       const lastCellInCurrentRow = tableMap.positionAt(currentCellRect.top, tableMap.width - 1, tableNode) + closestTable.start;
       const $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) {
       const firsCellInCurrentRow = tableMap.positionAt(currentCellRect.top, 0, tableNode) + closestTable.start;
       const $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/es2019/commands/misc.js

@@ -437,7 +437,7 @@ export const showInsertRowButton = rowIndex => createCommand(_ => rowIndex > -1
 export const hideInsertColumnOrRowButton = () => createCommand({
   type: 'HIDE_INSERT_COLUMN_OR_ROW_BUTTON'
 }, tr => tr.setMeta('addToHistory', false));
-export const addResizeHandleDecorations = (rowIndex, columnIndex, includeTooltip, isKeyboardResize) => createCommand(state => {
+export const addResizeHandleDecorations = (rowIndex, columnIndex, includeTooltip, nodeViewPortalProviderAPI, isKeyboardResize) => createCommand(state => {
   const tableNode = findTable(state.selection);
   const {
     pluginConfig: {
@@ -451,7 +451,7 @@ export const addResizeHandleDecorations = (rowIndex, columnIndex, includeTooltip
   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)
       }),
@@ -462,7 +462,7 @@ export const addResizeHandleDecorations = (rowIndex, columnIndex, includeTooltip
     }
   };
 }, tr => tr.setMeta('addToHistory', false));
-export const updateResizeHandleDecorations = (rowIndex, columnIndex, includeTooltip) => createCommand(state => {
+export const updateResizeHandleDecorations = (nodeViewPortalProviderAPI, rowIndex, columnIndex, includeTooltip) => createCommand(state => {
   const tableNode = findTable(state.selection);
   const {
     resizeHandleRowIndex,
@@ -485,7 +485,7 @@ export const updateResizeHandleDecorations = (rowIndex, columnIndex, includeTool
   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/es2019/event-handlers.js

@@ -257,7 +257,7 @@ export const 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.
-const handleMouseMoveDebounce = rafSchedule((view, event, offsetX) => {
+const handleMouseMoveDebounce = nodeViewPortalProviderAPI => rafSchedule((view, event, offsetX) => {
   if (!(event.target instanceof HTMLElement)) {
     return false;
   }
@@ -313,14 +313,14 @@ const handleMouseMoveDebounce = rafSchedule((view, event, offsetX) => {
           columnEndIndexTarget
         })) && !isKeyboardResize // if initiated by keyboard don't need to react on hover for other resize sliders
         ) {
-          return addResizeHandleDecorations(rowIndexTarget, columnEndIndexTarget, true)(state, dispatch);
+          return addResizeHandleDecorations(rowIndexTarget, columnEndIndexTarget, true, nodeViewPortalProviderAPI)(state, dispatch);
         }
       }
     }
   }
   return false;
 });
-export const handleMouseMove = (view, event) => {
+export const handleMouseMove = nodeViewPortalProviderAPI => (view, event) => {
   if (!(event.target instanceof HTMLElement)) {
     return false;
   }
@@ -330,7 +330,7 @@ export const handleMouseMove = (view, event) => {
   // 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);
+  handleMouseMoveDebounce(nodeViewPortalProviderAPI)(view, event, browser.gecko ? event.offsetX : NaN);
   return false;
 };
 export function handleTripleClick(view, pos) {

package/dist/es2019/plugin.js

@@ -198,6 +198,7 @@ const tablesPlugin = ({
           dispatchAnalyticsEvent,
           dispatch,
           portalProviderAPI,
+          nodeViewPortalProviderAPI,
           eventDispatcher,
           getIntl
         }) => {
@@ -213,12 +214,13 @@ const tablesPlugin = ({
             isCommentEditor,
             isChromelessEditor
           } = options || {};
-          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: ({
-          dispatch
+          dispatch,
+          nodeViewPortalProviderAPI
         }) => {
           const {
             fullWidthEnabled,
@@ -233,7 +235,7 @@ const tablesPlugin = ({
           } = pluginConfig(tableOptions);
           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 @@ const tablesPlugin = ({
       {
         name: 'tableKeymap',
         plugin: ({
-          getIntl
+          getIntl,
+          nodeViewPortalProviderAPI
         }) => {
           const {
             dragAndDropEnabled,
@@ -255,7 +258,7 @@ const tablesPlugin = ({
             isChromelessEditor = false,
             tableResizingEnabled = false
           } = options || {};
-          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',
@@ -301,8 +304,10 @@ const tablesPlugin = ({
         }
       }, {
         name: 'tableViewModeSort',
-        plugin: () => {
-          return api !== null && api !== void 0 && api.editorViewMode ? createViewModeSortPlugin(api) : undefined;
+        plugin: ({
+          nodeViewPortalProviderAPI
+        }) => {
+          return api !== null && api !== void 0 && api.editorViewMode ? createViewModeSortPlugin(api, nodeViewPortalProviderAPI) : undefined;
         }
       }, {
         name: 'tableLocalId',

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

@@ -10,13 +10,13 @@ const updateLastCellElement = lastCellElementsDecorations => ({
   decorationSet,
   tr
 }) => updateDecorations(tr.doc, decorationSet, lastCellElementsDecorations, TableDecorations.LAST_CELL_ELEMENT);
-export const buildColumnResizingDecorations = (rowEndIndex, columnEndIndex, includeTooltip, getIntl) => ({
+export const buildColumnResizingDecorations = (rowEndIndex, columnEndIndex, includeTooltip, getIntl, nodeViewPortalProviderAPI) => ({
   tr,
   decorationSet
 }) => {
   const [columnResizesDecorations, lastCellElementsDecorations] = columnEndIndex < 0 ? emptyDecorations : createResizeHandleDecoration(tr, rowEndIndex, {
     right: columnEndIndex
-  }, includeTooltip, getIntl);
+  }, includeTooltip, getIntl, nodeViewPortalProviderAPI);
   return composeDecorations([updateColumnResizeHandle(columnResizesDecorations), updateLastCellElement(lastCellElementsDecorations)])({
     decorationSet,
     tr

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

@@ -7,7 +7,7 @@ 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, isTableScalingEnabled = false, isTableAlignmentEnabled = false, isFullWidthEnabled, pluginInjectionApi, getIntl, isCellBackgroundDuplicated = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, isTableResizingEnabled) {
+export function keymapPlugin(getEditorContainerWidth, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled = false, isTableAlignmentEnabled = false, isFullWidthEnabled, pluginInjectionApi, getIntl, isCellBackgroundDuplicated = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, isTableResizingEnabled) {
   var _pluginInjectionApi$a;
   const list = {};
   const ariaNotifyPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.ariaNotify;
@@ -46,17 +46,20 @@ export function keymapPlugin(getEditorContainerWidth, api, editorAnalyticsAPI, d
   }
   bindKeymapWithCommand(startColumnResizing.common, initiateKeyboardColumnResizing({
     ariaNotify: ariaNotifyPlugin,
-    getIntl: getIntl
+    getIntl: getIntl,
+    nodeViewPortalProviderAPI
   }), list);
   bindKeymapWithCommand(moveRight.common, activateNextResizeArea({
     direction: 1,
     ariaNotify: ariaNotifyPlugin,
-    getIntl: getIntl
+    getIntl: getIntl,
+    nodeViewPortalProviderAPI
   }), list);
   bindKeymapWithCommand(moveLeft.common, activateNextResizeArea({
     direction: -1,
     ariaNotify: ariaNotifyPlugin,
-    getIntl: getIntl
+    getIntl: getIntl,
+    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/es2019/pm-plugins/main.js

@@ -19,7 +19,7 @@ import { isHeaderRowRequired, transformSliceTableLayoutDefaultToCenter } from '.
 import { defaultHoveredCell, defaultTableSelection } from './default-table-selection';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
-export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor) => {
+export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor) => {
   var _accessibilityUtils;
   const state = createPluginState(dispatch, {
     pluginConfig,
@@ -283,7 +283,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
         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/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/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);
+        }
       }
     });
   };