@atlaskit/editor-plugin-table 7.31.0 → 7.31.2

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/ui/FloatingContextualMenu/ContextualMenu.js

@@ -423,14 +423,10 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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, (0, _toConsumableArray2.default)(sortColumnItems));
+      sortColumnItems && items.push.apply(items, (0, _toConsumableArray2.default)(sortColumnItems));
       backgroundColorItem && items.push(backgroundColorItem);
       items.push(_this.createInsertColumnItem());
       items.push(_this.createInsertRowItem());
@@ -438,7 +434,6 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       items.push(_this.createDeleteRowItem());
       items.push.apply(items, (0, _toConsumableArray2.default)(_this.createMergeSplitCellItems()));
       distributeColumnsItem && items.push(distributeColumnsItem);
-      !tableSortColumnReorder && sortColumnItems && items.push.apply(items, (0, _toConsumableArray2.default)(sortColumnItems));
       items.push(_this.createClearCellsItem());
       return [{
         items: items
@@ -469,8 +464,8 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       items[1].items.push(deleteRowItem);
       return items;
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMenuItemActivated", function (_ref3) {
-      var item = _ref3.item;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMenuItemActivated", function (_ref2) {
+      var item = _ref2.item;
       var _this$props10 = _this.props,
         editorView = _this$props10.editorView,
         selectionRect = _this$props10.selectionRect,
@@ -486,11 +481,11 @@ var ContextualMenu = exports.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)) {
@@ -619,8 +614,8 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         }
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleItemMouseEnter", function (_ref5) {
-      var item = _ref5.item;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleItemMouseEnter", function (_ref4) {
+      var item = _ref4.item;
       var _this$props13 = _this.props,
         _this$props13$editorV = _this$props13.editorView,
         state = _this$props13$editorV.state,
@@ -643,8 +638,8 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         (0, _commands.hoverMergedCells)()(state, dispatch);
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleItemMouseLeave", function (_ref6) {
-      var item = _ref6.item;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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/cjs/ui/FloatingDragMenu/DragMenu.js

@@ -105,20 +105,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 = (0, _primitives.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 = (0, _toConsumableArray2.default)(Array(groupedDragMenuConfig.length)).map(function () {
     return [];
   });
@@ -216,7 +214,6 @@ var DragMenu = /*#__PURE__*/_react.default.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,
@@ -232,8 +229,8 @@ var DragMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
   var selectionRect = (0, _utils2.isSelectionType)(selection, 'cell') ? (0, _utils2.getSelectionRect)(selection) : (0, _utils2.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 = (0, _dragMenu.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 = (0, _dragMenu.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) {
@@ -282,7 +279,7 @@ var DragMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
         className: _styles.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: (0, _styles2.dragMenuBackgroundColorStyles)(tableSortColumnReorder)
+        css: (0, _styles2.dragMenuBackgroundColorStyles)()
       }, (0, _react2.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: (0, _styles2.cellColourPreviewStyles)(background)
@@ -480,7 +477,7 @@ var DragMenu = /*#__PURE__*/_react.default.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/cjs/ui/FloatingDragMenu/index.js

@@ -43,9 +43,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.default.createElement(_ui.Popup, {
     alignX: direction === 'row' ? 'right' : undefined,
@@ -84,7 +82,6 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     tableDuplicateCellColouring: tableDuplicateCellColouring,
     shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
     isTableFixedColumnWidthsOptionEnabled: tableWithFixedColumnWidthsOption,
-    tableSortColumnReorder: tableSortColumnReorder,
     ariaNotifyPlugin: ariaNotifyPlugin,
     api: api,
     isCommentEditor: isCommentEditor || false

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

@@ -23,8 +23,7 @@ var cellColourPreviewStyles = exports.cellColourPreviewStyles = function cellCol
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 var dragMenuBackgroundColorStyles = exports.dragMenuBackgroundColorStyles = function dragMenuBackgroundColorStyles() {
-  var tableSortColumnReorder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _types.TableCssClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), tableSortColumnReorder ? _consts.TABLE_DRAG_MENU_PADDING_TOP + _consts.TABLE_DRAG_MENU_SORT_GROUP_HEIGHT + _consts.TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT : 0, _consts.dragMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.DRAG_SUBMENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _types.TableCssClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), _consts.TABLE_DRAG_MENU_PADDING_TOP + _consts.TABLE_DRAG_MENU_SORT_GROUP_HEIGHT + _consts.TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT, _consts.dragMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.DRAG_SUBMENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
 };
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766

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/cjs/utils/drag-menu.js

@@ -88,9 +88,8 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
   var tableDuplicateCellColouring = arguments.length > 12 && arguments[12] !== undefined ? arguments[12] : false;
   var isTableFixedColumnWidthsOptionEnabled = arguments.length > 13 && arguments[13] !== undefined ? arguments[13] : false;
   var shouldUseIncreasedScalingPercent = arguments.length > 14 && arguments[14] !== undefined ? arguments[14] : false;
-  var tableSortColumnReorder = arguments.length > 15 && arguments[15] !== undefined ? arguments[15] : false;
-  var ariaNotifyPlugin = arguments.length > 16 ? arguments[16] : undefined;
-  var isCommentEditor = arguments.length > 17 && arguments[17] !== undefined ? arguments[17] : false;
+  var ariaNotifyPlugin = arguments.length > 15 ? arguments[15] : undefined;
+  var isCommentEditor = arguments.length > 16 && arguments[16] !== undefined ? arguments[16] : false;
   var selection = editorView.state.selection;
   var _getTablePluginState = (0, _pluginFactory.getPluginState)(editorView.state),
     getIntl = _getTablePluginState.getIntl;
@@ -281,6 +280,6 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
     };
   })));
   var allConfigs = (0, _toConsumableArray2.default)(restConfigs);
-  tableSortColumnReorder ? allConfigs.unshift.apply(allConfigs, (0, _toConsumableArray2.default)(sortConfigs)) : allConfigs.push.apply(allConfigs, (0, _toConsumableArray2.default)(sortConfigs));
+  allConfigs.unshift.apply(allConfigs, (0, _toConsumableArray2.default)(sortConfigs));
   return allConfigs.filter(Boolean);
 };

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))