@atlaskit/editor-plugin-table 7.31.0 → 7.31.1

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/utils/decoration.js

@@ -2,6 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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
@@ -9,6 +10,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';
 var filterDecorationByKey = function filterDecorationByKey(key, decorationSet) {
@@ -245,6 +247,7 @@ var makeArray = function makeArray(n) {
 export var 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 = findTable(tr.selection);
   if (!table || !table.node) {
@@ -255,21 +258,38 @@ export var createResizeHandleDecoration = function createResizeHandleDecoration(
     return emptyResult;
   }
   var createResizerHandleDecoration = function createResizerHandleDecoration(cellColumnPositioning, columnIndex, rowIndex, cellPos, cellNode) {
+    var decorationRenderKey = uuid();
     var position = cellPos + cellNode.nodeSize - 1;
     return Decoration.widget(position, function () {
       var element = document.createElement('div');
-      ReactDOM.render( /*#__PURE__*/createElement(RawIntlProvider, {
-        value: getIntl()
-      }, /*#__PURE__*/createElement(ColumnResizeWidget, {
-        startIndex: cellColumnPositioning.left,
-        endIndex: cellColumnPositioning.right,
-        includeTooltip: includeTooltip
-      })), element);
+      if (fg('platform_editor_react18_plugin_portalprovider')) {
+        nodeViewPortalProviderAPI.render(function () {
+          return /*#__PURE__*/createElement(RawIntlProvider, {
+            value: getIntl()
+          }, /*#__PURE__*/createElement(ColumnResizeWidget, {
+            startIndex: cellColumnPositioning.left,
+            endIndex: cellColumnPositioning.right,
+            includeTooltip: includeTooltip
+          }));
+        }, element, decorationRenderKey);
+      } else {
+        ReactDOM.render( /*#__PURE__*/createElement(RawIntlProvider, {
+          value: getIntl()
+        }, /*#__PURE__*/createElement(ColumnResizeWidget, {
+          startIndex: cellColumnPositioning.left,
+          endIndex: cellColumnPositioning.right,
+          includeTooltip: includeTooltip
+        })), element);
+      }
       return element;
     }, {
       key: "".concat(TableDecorations.COLUMN_RESIZING_HANDLE_WIDGET, "_").concat(rowIndex, "_").concat(columnIndex, "_").concat(includeTooltip ? 'with' : 'no', "-tooltip"),
       destroy: function destroy(node) {
-        ReactDOM.unmountComponentAtNode(node);
+        if (fg('platform_editor_react18_plugin_portalprovider')) {
+          nodeViewPortalProviderAPI.remove(decorationRenderKey);
+        } else {
+          ReactDOM.unmountComponentAtNode(node);
+        }
       }
     });
   };

package/dist/types/commands/column-resize.d.ts

@@ -1,17 +1,20 @@
 import type { IntlShape } from 'react-intl-next/src/types';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { Command, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { AriaLiveElementAttributes } from '@atlaskit/editor-plugin-accessibility-utils';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { Direction } from '@atlaskit/editor-tables/types';
 import type { PluginInjectionAPI } from '../types';
-export declare const initiateKeyboardColumnResizing: ({ ariaNotify, getIntl, }: {
+export declare const initiateKeyboardColumnResizing: ({ ariaNotify, getIntl, nodeViewPortalProviderAPI, }: {
     ariaNotify?: ((message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void) | undefined;
     getIntl?: (() => IntlShape) | undefined;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
 }) => Command;
-export declare const activateNextResizeArea: ({ direction, ariaNotify, getIntl, }: {
+export declare const activateNextResizeArea: ({ direction, ariaNotify, getIntl, nodeViewPortalProviderAPI, }: {
     direction: Direction;
     ariaNotify?: ((message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void) | undefined;
     getIntl?: (() => IntlShape) | undefined;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
 }) => Command;
 export declare const changeColumnWidthByStep: ({ stepSize, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor, ariaNotify, api, getIntl, }: {
     stepSize: number;

package/dist/types/commands/misc.d.ts

@@ -1,4 +1,5 @@
 import type { TableLayout } from '@atlaskit/adf-schema';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { Command, EditorCommand } from '@atlaskit/editor-common/types';
 import type { Node as PMNode, Schema, Slice } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
@@ -28,8 +29,8 @@ export declare const selectRows: (rowIndexes: number[]) => Command;
 export declare const showInsertColumnButton: (columnIndex: number) => Command;
 export declare const showInsertRowButton: (rowIndex: number) => Command;
 export declare const hideInsertColumnOrRowButton: () => Command;
-export declare const addResizeHandleDecorations: (rowIndex: number, columnIndex: number, includeTooltip: boolean, isKeyboardResize?: boolean) => Command;
-export declare const updateResizeHandleDecorations: (rowIndex?: number, columnIndex?: number, includeTooltip?: boolean) => Command;
+export declare const addResizeHandleDecorations: (rowIndex: number, columnIndex: number, includeTooltip: boolean, nodeViewPortalProviderAPI: PortalProviderAPI, isKeyboardResize?: boolean) => Command;
+export declare const updateResizeHandleDecorations: (nodeViewPortalProviderAPI: PortalProviderAPI, rowIndex?: number, columnIndex?: number, includeTooltip?: boolean) => Command;
 export declare const removeResizeHandleDecorations: () => Command;
 export declare const autoSizeTable: (view: EditorView, node: PMNode, table: HTMLTableElement, basePos: number | undefined, opts: {
     containerWidth: number;

package/dist/types/event-handlers.d.ts

@@ -1,4 +1,5 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { PluginInjectionAPI } from './types';
@@ -11,7 +12,7 @@ export declare const handleMouseDown: (_: EditorView, event: Event) => boolean;
 export declare const handleMouseOut: (view: EditorView, mouseEvent: Event) => boolean;
 export declare const handleMouseEnter: (view: EditorView, mouseEvent: Event) => boolean;
 export declare const handleMouseLeave: (view: EditorView, event: Event) => boolean;
-export declare const handleMouseMove: (view: EditorView, event: Event) => boolean;
+export declare const handleMouseMove: (nodeViewPortalProviderAPI: PortalProviderAPI) => (view: EditorView, event: Event) => boolean;
 export declare function handleTripleClick(view: EditorView, pos: number): boolean;
 export declare const handleCut: (oldTr: Transaction, oldState: EditorState, newState: EditorState, api: PluginInjectionAPI | undefined | null, editorAnalyticsAPI?: EditorAnalyticsAPI, editorView?: EditorView, isTableScalingEnabled?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean) => Transaction;
 export declare const isTableInFocus: (view: EditorView) => boolean;

package/dist/types/pm-plugins/decorations/utils/column-resizing.d.ts

@@ -1,4 +1,5 @@
 import type { IntlShape } from 'react-intl-next';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { DecorationTransformer } from './types';
-export declare const buildColumnResizingDecorations: (rowEndIndex: number, columnEndIndex: number, includeTooltip: boolean, getIntl: () => IntlShape) => DecorationTransformer;
+export declare const buildColumnResizingDecorations: (rowEndIndex: number, columnEndIndex: number, includeTooltip: boolean, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI) => DecorationTransformer;
 export declare const clearColumnResizingDecorations: () => DecorationTransformer;

package/dist/types/pm-plugins/keymap.d.ts

@@ -1,7 +1,8 @@
 import type { IntlShape } from 'react-intl-next/src/types';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { PluginInjectionAPI, PluginInjectionAPIWithA11y } from '../types';
-export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, api: PluginInjectionAPI | undefined | null, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, dragAndDropEnabled?: boolean, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isFullWidthEnabled?: boolean, pluginInjectionApi?: PluginInjectionAPIWithA11y, getIntl?: () => IntlShape, isCellBackgroundDuplicated?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean, isChromelessEditor?: boolean, isTableResizingEnabled?: boolean): SafePlugin;
+export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, api: PluginInjectionAPI | undefined | null, nodeViewPortalProviderAPI: PortalProviderAPI, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, dragAndDropEnabled?: boolean, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isFullWidthEnabled?: boolean, pluginInjectionApi?: PluginInjectionAPIWithA11y, getIntl?: () => IntlShape, isCellBackgroundDuplicated?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean, isChromelessEditor?: boolean, isTableResizingEnabled?: boolean): SafePlugin;
 export default keymapPlugin;

package/dist/types/pm-plugins/main.d.ts

@@ -5,4 +5,4 @@ import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { PluginConfig, PluginInjectionAPI } from '../types';
-export declare const createPlugin: (dispatchAnalyticsEvent: DispatchAnalyticsEvent, dispatch: Dispatch, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, pluginConfig: PluginConfig, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, getIntl: () => IntlShape, tableResizingEnabled?: boolean, fullWidthModeEnabled?: boolean, previousFullWidthModeEnabled?: boolean, dragAndDropEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, pluginInjectionApi?: PluginInjectionAPI, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean, isChromelessEditor?: boolean) => SafePlugin<import("../types").TablePluginState>;
+export declare const createPlugin: (dispatchAnalyticsEvent: DispatchAnalyticsEvent, dispatch: Dispatch, portalProviderAPI: PortalProviderAPI, nodeViewPortalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, pluginConfig: PluginConfig, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, getIntl: () => IntlShape, tableResizingEnabled?: boolean, fullWidthModeEnabled?: boolean, previousFullWidthModeEnabled?: boolean, dragAndDropEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, pluginInjectionApi?: PluginInjectionAPI, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean, isChromelessEditor?: boolean) => SafePlugin<import("../types").TablePluginState>;

package/dist/types/pm-plugins/table-resizing/event-handlers.d.ts

@@ -1,5 +1,6 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { PluginInjectionAPI } from '../../types';
-export declare const handleMouseDown: (view: EditorView, event: MouseEvent, localResizeHandlePos: number, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, isTableScalingEnabled: boolean, api: PluginInjectionAPI | undefined | null, editorAnalyticsAPI?: EditorAnalyticsAPI, isNewColumnResizingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isCommentEditor?: boolean) => boolean;
+export declare const handleMouseDown: (view: EditorView, event: MouseEvent, localResizeHandlePos: number, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, isTableScalingEnabled: boolean, api: PluginInjectionAPI | undefined | null, nodeViewPortalProviderAPI: PortalProviderAPI, editorAnalyticsAPI?: EditorAnalyticsAPI, isNewColumnResizingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isCommentEditor?: boolean) => boolean;

package/dist/types/pm-plugins/table-resizing/plugin.d.ts

@@ -1,6 +1,7 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { ColumnResizingPluginState, PluginInjectionAPI } from '../../types';
-export declare function createPlugin(dispatch: Dispatch<ColumnResizingPluginState>, { lastColumnResizable }: ColumnResizingPluginState, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, api: PluginInjectionAPI | undefined | null, editorAnalyticsAPI?: EditorAnalyticsAPI, isTableScalingEnabled?: boolean, isNewColumnResizingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isCommentEditor?: boolean): SafePlugin<ColumnResizingPluginState>;
+export declare function createPlugin(dispatch: Dispatch<ColumnResizingPluginState>, { lastColumnResizable }: ColumnResizingPluginState, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, api: PluginInjectionAPI | undefined | null, nodeViewPortalProviderAPI: PortalProviderAPI, editorAnalyticsAPI?: EditorAnalyticsAPI, isTableScalingEnabled?: boolean, isNewColumnResizingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isCommentEditor?: boolean): SafePlugin<ColumnResizingPluginState>;

package/dist/types/pm-plugins/view-mode-sort/index.d.ts

@@ -3,8 +3,9 @@
  * 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.
  */
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type tablePlugin from '../../plugin';
 import type { ViewModeSortPluginState } from './types';
-export declare const createPlugin: (api: ExtractInjectionAPI<typeof tablePlugin>) => SafePlugin<ViewModeSortPluginState>;
+export declare const createPlugin: (api: ExtractInjectionAPI<typeof tablePlugin>, nodeViewPortalProviderAPI: PortalProviderAPI) => SafePlugin<ViewModeSortPluginState>;

package/dist/types/utils/decoration.d.ts

@@ -1,4 +1,5 @@
 import type { IntlShape } from 'react-intl-next';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { ReadonlyTransaction, Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
@@ -12,7 +13,7 @@ export declare const createControlsHoverDecoration: (cells: Cell[], type: 'row'
 export declare const createColumnSelectedDecoration: (tr: Transaction | ReadonlyTransaction) => Decoration[];
 export declare const createColumnControlsDecoration: (selection: Selection) => Decoration[];
 export declare const updateDecorations: (node: PmNode, decorationSet: DecorationSet, decorations: Decoration[], key: TableDecorations) => DecorationSet;
-export declare const createResizeHandleDecoration: (tr: Transaction | ReadonlyTransaction, rowIndexTarget: number, columnEndIndexTarget: Omit<CellColumnPositioning, 'left'>, includeTooltip: boolean | undefined, getIntl: () => IntlShape) => [Decoration[], Decoration[]];
+export declare const createResizeHandleDecoration: (tr: Transaction | ReadonlyTransaction, rowIndexTarget: number, columnEndIndexTarget: Omit<CellColumnPositioning, 'left'>, includeTooltip: boolean | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI) => [Decoration[], Decoration[]];
 export declare const createColumnLineResize: (selection: Selection, cellColumnPositioning: Omit<CellColumnPositioning, 'left'>) => Decoration[];
 export declare const createColumnInsertLine: (columnIndex: number, selection: Selection, hasMergedCells: boolean) => Decoration[];
 export declare const createRowInsertLine: (rowIndex: number, selection: Selection, hasMergedCells: boolean) => Decoration[];

package/dist/types-ts4.5/commands/column-resize.d.ts

@@ -1,17 +1,20 @@
 import type { IntlShape } from 'react-intl-next/src/types';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { Command, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { AriaLiveElementAttributes } from '@atlaskit/editor-plugin-accessibility-utils';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { Direction } from '@atlaskit/editor-tables/types';
 import type { PluginInjectionAPI } from '../types';
-export declare const initiateKeyboardColumnResizing: ({ ariaNotify, getIntl, }: {
+export declare const initiateKeyboardColumnResizing: ({ ariaNotify, getIntl, nodeViewPortalProviderAPI, }: {
     ariaNotify?: ((message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void) | undefined;
     getIntl?: (() => IntlShape) | undefined;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
 }) => Command;
-export declare const activateNextResizeArea: ({ direction, ariaNotify, getIntl, }: {
+export declare const activateNextResizeArea: ({ direction, ariaNotify, getIntl, nodeViewPortalProviderAPI, }: {
     direction: Direction;
     ariaNotify?: ((message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void) | undefined;
     getIntl?: (() => IntlShape) | undefined;
+    nodeViewPortalProviderAPI: PortalProviderAPI;
 }) => Command;
 export declare const changeColumnWidthByStep: ({ stepSize, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor, ariaNotify, api, getIntl, }: {
     stepSize: number;

package/dist/types-ts4.5/commands/misc.d.ts

@@ -1,4 +1,5 @@
 import type { TableLayout } from '@atlaskit/adf-schema';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { Command, EditorCommand } from '@atlaskit/editor-common/types';
 import type { Node as PMNode, Schema, Slice } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
@@ -28,8 +29,8 @@ export declare const selectRows: (rowIndexes: number[]) => Command;
 export declare const showInsertColumnButton: (columnIndex: number) => Command;
 export declare const showInsertRowButton: (rowIndex: number) => Command;
 export declare const hideInsertColumnOrRowButton: () => Command;
-export declare const addResizeHandleDecorations: (rowIndex: number, columnIndex: number, includeTooltip: boolean, isKeyboardResize?: boolean) => Command;
-export declare const updateResizeHandleDecorations: (rowIndex?: number, columnIndex?: number, includeTooltip?: boolean) => Command;
+export declare const addResizeHandleDecorations: (rowIndex: number, columnIndex: number, includeTooltip: boolean, nodeViewPortalProviderAPI: PortalProviderAPI, isKeyboardResize?: boolean) => Command;
+export declare const updateResizeHandleDecorations: (nodeViewPortalProviderAPI: PortalProviderAPI, rowIndex?: number, columnIndex?: number, includeTooltip?: boolean) => Command;
 export declare const removeResizeHandleDecorations: () => Command;
 export declare const autoSizeTable: (view: EditorView, node: PMNode, table: HTMLTableElement, basePos: number | undefined, opts: {
     containerWidth: number;

package/dist/types-ts4.5/event-handlers.d.ts

@@ -1,4 +1,5 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { PluginInjectionAPI } from './types';
@@ -11,7 +12,7 @@ export declare const handleMouseDown: (_: EditorView, event: Event) => boolean;
 export declare const handleMouseOut: (view: EditorView, mouseEvent: Event) => boolean;
 export declare const handleMouseEnter: (view: EditorView, mouseEvent: Event) => boolean;
 export declare const handleMouseLeave: (view: EditorView, event: Event) => boolean;
-export declare const handleMouseMove: (view: EditorView, event: Event) => boolean;
+export declare const handleMouseMove: (nodeViewPortalProviderAPI: PortalProviderAPI) => (view: EditorView, event: Event) => boolean;
 export declare function handleTripleClick(view: EditorView, pos: number): boolean;
 export declare const handleCut: (oldTr: Transaction, oldState: EditorState, newState: EditorState, api: PluginInjectionAPI | undefined | null, editorAnalyticsAPI?: EditorAnalyticsAPI, editorView?: EditorView, isTableScalingEnabled?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean) => Transaction;
 export declare const isTableInFocus: (view: EditorView) => boolean;

package/dist/types-ts4.5/pm-plugins/decorations/utils/column-resizing.d.ts

@@ -1,4 +1,5 @@
 import type { IntlShape } from 'react-intl-next';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { DecorationTransformer } from './types';
-export declare const buildColumnResizingDecorations: (rowEndIndex: number, columnEndIndex: number, includeTooltip: boolean, getIntl: () => IntlShape) => DecorationTransformer;
+export declare const buildColumnResizingDecorations: (rowEndIndex: number, columnEndIndex: number, includeTooltip: boolean, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI) => DecorationTransformer;
 export declare const clearColumnResizingDecorations: () => DecorationTransformer;

package/dist/types-ts4.5/pm-plugins/keymap.d.ts

@@ -1,7 +1,8 @@
 import type { IntlShape } from 'react-intl-next/src/types';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { PluginInjectionAPI, PluginInjectionAPIWithA11y } from '../types';
-export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, api: PluginInjectionAPI | undefined | null, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, dragAndDropEnabled?: boolean, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isFullWidthEnabled?: boolean, pluginInjectionApi?: PluginInjectionAPIWithA11y, getIntl?: () => IntlShape, isCellBackgroundDuplicated?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean, isChromelessEditor?: boolean, isTableResizingEnabled?: boolean): SafePlugin;
+export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, api: PluginInjectionAPI | undefined | null, nodeViewPortalProviderAPI: PortalProviderAPI, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, dragAndDropEnabled?: boolean, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isFullWidthEnabled?: boolean, pluginInjectionApi?: PluginInjectionAPIWithA11y, getIntl?: () => IntlShape, isCellBackgroundDuplicated?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean, isChromelessEditor?: boolean, isTableResizingEnabled?: boolean): SafePlugin;
 export default keymapPlugin;

package/dist/types-ts4.5/pm-plugins/main.d.ts

@@ -5,4 +5,4 @@ import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { PluginConfig, PluginInjectionAPI } from '../types';
-export declare const createPlugin: (dispatchAnalyticsEvent: DispatchAnalyticsEvent, dispatch: Dispatch, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, pluginConfig: PluginConfig, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, getIntl: () => IntlShape, tableResizingEnabled?: boolean, fullWidthModeEnabled?: boolean, previousFullWidthModeEnabled?: boolean, dragAndDropEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, pluginInjectionApi?: PluginInjectionAPI, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean, isChromelessEditor?: boolean) => SafePlugin<import("../types").TablePluginState>;
+export declare const createPlugin: (dispatchAnalyticsEvent: DispatchAnalyticsEvent, dispatch: Dispatch, portalProviderAPI: PortalProviderAPI, nodeViewPortalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, pluginConfig: PluginConfig, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, getIntl: () => IntlShape, tableResizingEnabled?: boolean, fullWidthModeEnabled?: boolean, previousFullWidthModeEnabled?: boolean, dragAndDropEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, pluginInjectionApi?: PluginInjectionAPI, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean, isChromelessEditor?: boolean) => SafePlugin<import("../types").TablePluginState>;

package/dist/types-ts4.5/pm-plugins/table-resizing/event-handlers.d.ts

@@ -1,5 +1,6 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { PluginInjectionAPI } from '../../types';
-export declare const handleMouseDown: (view: EditorView, event: MouseEvent, localResizeHandlePos: number, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, isTableScalingEnabled: boolean, api: PluginInjectionAPI | undefined | null, editorAnalyticsAPI?: EditorAnalyticsAPI, isNewColumnResizingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isCommentEditor?: boolean) => boolean;
+export declare const handleMouseDown: (view: EditorView, event: MouseEvent, localResizeHandlePos: number, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, isTableScalingEnabled: boolean, api: PluginInjectionAPI | undefined | null, nodeViewPortalProviderAPI: PortalProviderAPI, editorAnalyticsAPI?: EditorAnalyticsAPI, isNewColumnResizingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isCommentEditor?: boolean) => boolean;

package/dist/types-ts4.5/pm-plugins/table-resizing/plugin.d.ts

@@ -1,6 +1,7 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { ColumnResizingPluginState, PluginInjectionAPI } from '../../types';
-export declare function createPlugin(dispatch: Dispatch<ColumnResizingPluginState>, { lastColumnResizable }: ColumnResizingPluginState, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, api: PluginInjectionAPI | undefined | null, editorAnalyticsAPI?: EditorAnalyticsAPI, isTableScalingEnabled?: boolean, isNewColumnResizingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isCommentEditor?: boolean): SafePlugin<ColumnResizingPluginState>;
+export declare function createPlugin(dispatch: Dispatch<ColumnResizingPluginState>, { lastColumnResizable }: ColumnResizingPluginState, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, api: PluginInjectionAPI | undefined | null, nodeViewPortalProviderAPI: PortalProviderAPI, editorAnalyticsAPI?: EditorAnalyticsAPI, isTableScalingEnabled?: boolean, isNewColumnResizingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isCommentEditor?: boolean): SafePlugin<ColumnResizingPluginState>;

package/dist/types-ts4.5/pm-plugins/view-mode-sort/index.d.ts

@@ -3,8 +3,9 @@
  * 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.
  */
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type tablePlugin from '../../plugin';
 import type { ViewModeSortPluginState } from './types';
-export declare const createPlugin: (api: ExtractInjectionAPI<typeof tablePlugin>) => SafePlugin<ViewModeSortPluginState>;
+export declare const createPlugin: (api: ExtractInjectionAPI<typeof tablePlugin>, nodeViewPortalProviderAPI: PortalProviderAPI) => SafePlugin<ViewModeSortPluginState>;

package/dist/types-ts4.5/utils/decoration.d.ts

@@ -1,4 +1,5 @@
 import type { IntlShape } from 'react-intl-next';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { ReadonlyTransaction, Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
@@ -12,7 +13,7 @@ export declare const createControlsHoverDecoration: (cells: Cell[], type: 'row'
 export declare const createColumnSelectedDecoration: (tr: Transaction | ReadonlyTransaction) => Decoration[];
 export declare const createColumnControlsDecoration: (selection: Selection) => Decoration[];
 export declare const updateDecorations: (node: PmNode, decorationSet: DecorationSet, decorations: Decoration[], key: TableDecorations) => DecorationSet;
-export declare const createResizeHandleDecoration: (tr: Transaction | ReadonlyTransaction, rowIndexTarget: number, columnEndIndexTarget: Omit<CellColumnPositioning, 'left'>, includeTooltip: boolean | undefined, getIntl: () => IntlShape) => [
+export declare const createResizeHandleDecoration: (tr: Transaction | ReadonlyTransaction, rowIndexTarget: number, columnEndIndexTarget: Omit<CellColumnPositioning, 'left'>, includeTooltip: boolean | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI) => [
     Decoration[],
     Decoration[]
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.31.0",
+	"version": "7.31.1",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
 		"@atlaskit/adf-schema": "^44.2.0",
 		"@atlaskit/button": "^20.3.0",
 		"@atlaskit/custom-steps": "^0.8.0",
-		"@atlaskit/editor-common": "^94.19.0",
+		"@atlaskit/editor-common": "^94.22.0",
 		"@atlaskit/editor-palette": "1.6.3",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
@@ -49,9 +49,9 @@
 		"@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
-		"@atlaskit/primitives": "^13.1.0",
+		"@atlaskit/primitives": "^13.2.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.14.0",
+		"@atlaskit/tmp-editor-statsig": "^2.17.0",
 		"@atlaskit/toggle": "^13.4.0",
 		"@atlaskit/tokens": "^2.2.0",
 		"@atlaskit/tooltip": "^18.9.0",
@@ -60,7 +60,8 @@
 		"classnames": "^2.2.5",
 		"lodash": "^4.17.21",
 		"memoize-one": "^6.0.0",
-		"raf-schd": "^4.0.3"
+		"raf-schd": "^4.0.3",
+		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
 		"react": "^16.8.0 || ^17.0.0 || ~18.2.0",
@@ -118,6 +119,9 @@
 		"platform-visual-refresh-icons": {
 			"type": "boolean"
 		},
+		"platform_editor_react18_plugin_portalprovider": {
+			"type": "boolean"
+		},
 		"platform_editor_use_nested_table_pm_nodes": {
 			"type": "boolean"
 		}

package/src/commands/column-resize.ts

@@ -1,6 +1,7 @@
 import type { IntlShape } from 'react-intl-next/src/types';
 
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import type { Command, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { AriaLiveElementAttributes } from '@atlaskit/editor-plugin-accessibility-utils';
@@ -54,7 +55,12 @@ const getTablePluginCommand = (
 };
 
 const updateResizeHandleAndStatePosition =
-	(rowIndex: number, columnIndex: number, nextResizeHandlePos: number): Command =>
+	(
+		rowIndex: number,
+		columnIndex: number,
+		nextResizeHandlePos: number,
+		nodeViewPortalProviderAPI: PortalProviderAPI,
+	): Command =>
 	(state, dispatch) => {
 		let customTr = state.tr;
 		const {
@@ -75,6 +81,7 @@ const updateResizeHandleAndStatePosition =
 			columnIndex,
 			true,
 			getIntl,
+			nodeViewPortalProviderAPI,
 		)({
 			tr: customTr,
 			decorationSet: getDecorations(state),
@@ -121,9 +128,11 @@ export const initiateKeyboardColumnResizing =
 	({
 		ariaNotify,
 		getIntl,
+		nodeViewPortalProviderAPI,
 	}: {
 		ariaNotify?: (message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void;
 		getIntl?: () => IntlShape;
+		nodeViewPortalProviderAPI: PortalProviderAPI;
 	}): Command =>
 	(state, dispatch, view) => {
 		const { selection } = state;
@@ -143,6 +152,7 @@ export const initiateKeyboardColumnResizing =
 				selectionRect.top,
 				selectionRect.right,
 				cell.pos,
+				nodeViewPortalProviderAPI,
 			)(state, dispatch);
 		}
 		return false;
@@ -153,10 +163,12 @@ export const activateNextResizeArea =
 		direction,
 		ariaNotify,
 		getIntl,
+		nodeViewPortalProviderAPI,
 	}: {
 		direction: Direction;
 		ariaNotify?: (message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void;
 		getIntl?: () => IntlShape;
+		nodeViewPortalProviderAPI: PortalProviderAPI;
 	}): Command =>
 	(state, dispatch, view) => {
 		const { resizeHandlePos } = getTableResizingPluginState(state) || {};
@@ -217,6 +229,8 @@ export const activateNextResizeArea =
 				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)
@@ -230,6 +244,7 @@ export const activateNextResizeArea =
 					currentCellRect.top,
 					tableMap.width,
 					$lastCell.pos,
+					nodeViewPortalProviderAPI,
 				)(state, dispatch, view);
 			} else if (tableMap.width === currentCellRect.right) {
 				const firsCellInCurrentRow =
@@ -240,6 +255,8 @@ export const activateNextResizeArea =
 					currentCellRect.top,
 					1,
 					$nextCell.pos,
+
+					nodeViewPortalProviderAPI,
 				)(state, dispatch);
 			}
 		}

package/src/commands/misc.ts

@@ -2,6 +2,7 @@ import isEqual from 'lodash/isEqual';
 
 import type { CellAttributes, TableAttributes, TableLayout } from '@atlaskit/adf-schema';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { Command, EditorCommand } from '@atlaskit/editor-common/types';
 import {
 	closestElement,
@@ -560,6 +561,7 @@ export const addResizeHandleDecorations = (
 	rowIndex: number,
 	columnIndex: number,
 	includeTooltip: boolean,
+	nodeViewPortalProviderAPI: PortalProviderAPI,
 	isKeyboardResize?: boolean,
 ) =>
 	createCommand(
@@ -582,6 +584,7 @@ export const addResizeHandleDecorations = (
 						columnIndex,
 						includeTooltip,
 						getIntl,
+						nodeViewPortalProviderAPI,
 					)({
 						tr: state.tr,
 						decorationSet: getDecorations(state),
@@ -597,6 +600,7 @@ export const addResizeHandleDecorations = (
 	);
 
 export const updateResizeHandleDecorations = (
+	nodeViewPortalProviderAPI: PortalProviderAPI,
 	rowIndex?: number,
 	columnIndex?: number,
 	includeTooltip?: boolean,
@@ -636,6 +640,7 @@ export const updateResizeHandleDecorations = (
 						resolvedColumnIndex,
 						resolvedIncludeTooltip,
 						getIntl,
+						nodeViewPortalProviderAPI,
 					)({
 						tr: state.tr,
 						decorationSet: getDecorations(state),