@atlaskit/editor-plugin-table 7.31.0 → 7.31.1

package/src/event-handlers.ts

@@ -2,6 +2,7 @@ import rafSchedule from 'raf-schd';
 
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import {
 	browser,
 	closestElement,
@@ -347,8 +348,8 @@ export const handleMouseLeave = (view: EditorView, event: Event): boolean => {
 
 // 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: EditorView, event: MouseEvent, offsetX: number) => {
+const handleMouseMoveDebounce = (nodeViewPortalProviderAPI: PortalProviderAPI) =>
+	rafSchedule((view: EditorView, event: MouseEvent, offsetX: number) => {
 		if (!(event.target instanceof HTMLElement)) {
 			return false;
 		}
@@ -413,6 +414,7 @@ const handleMouseMoveDebounce = rafSchedule(
 							rowIndexTarget,
 							columnEndIndexTarget,
 							true,
+							nodeViewPortalProviderAPI,
 						)(state, dispatch);
 					}
 				}
@@ -420,26 +422,26 @@ const handleMouseMoveDebounce = rafSchedule(
 		}
 
 		return false;
-	},
-);
+	});
 
-export const handleMouseMove = (view: EditorView, event: Event) => {
-	if (!(event.target instanceof HTMLElement)) {
-		return false;
-	}
+export const handleMouseMove =
+	(nodeViewPortalProviderAPI: PortalProviderAPI) => (view: EditorView, event: Event) => {
+		if (!(event.target instanceof HTMLElement)) {
+			return false;
+		}
 
-	// NOTE: When accessing offsetX in gecko from a deferred callback, it will return 0. However it will be non-zero if accessed
-	// within the scope of it's initial mouse move handler. Also Chrome does return the correct value, however it could trigger
-	// a reflow. So for now this will just grab the offsetX value immediately for gecko and chrome will calculate later
-	// in the deferred callback handler.
-	// Bug Tracking: https://bugzilla.mozilla.org/show_bug.cgi?id=1882903
-	handleMouseMoveDebounce(
-		view,
-		event as MouseEvent,
-		browser.gecko ? (event as MouseEvent).offsetX : NaN,
-	);
-	return false;
-};
+		// NOTE: When accessing offsetX in gecko from a deferred callback, it will return 0. However it will be non-zero if accessed
+		// within the scope of it's initial mouse move handler. Also Chrome does return the correct value, however it could trigger
+		// a reflow. So for now this will just grab the offsetX value immediately for gecko and chrome will calculate later
+		// in the deferred callback handler.
+		// Bug Tracking: https://bugzilla.mozilla.org/show_bug.cgi?id=1882903
+		handleMouseMoveDebounce(nodeViewPortalProviderAPI)(
+			view,
+			event as MouseEvent,
+			browser.gecko ? (event as MouseEvent).offsetX : NaN,
+		);
+		return false;
+	};
 
 export function handleTripleClick(view: EditorView, pos: number) {
 	const { state, dispatch } = view;

package/src/plugin.tsx

@@ -335,6 +335,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 						dispatchAnalyticsEvent,
 						dispatch,
 						portalProviderAPI,
+						nodeViewPortalProviderAPI,
 						eventDispatcher,
 						getIntl,
 					}) => {
@@ -356,6 +357,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 							dispatchAnalyticsEvent,
 							dispatch,
 							portalProviderAPI,
+							nodeViewPortalProviderAPI,
 							eventDispatcher,
 							pluginConfig(tableOptions),
 							defaultGetEditorContainerWidth,
@@ -377,7 +379,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 				},
 				{
 					name: 'tablePMColResizing',
-					plugin: ({ dispatch }) => {
+					plugin: ({ dispatch, nodeViewPortalProviderAPI }) => {
 						const {
 							fullWidthEnabled,
 							tableOptions,
@@ -396,6 +398,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 									defaultGetEditorContainerWidth,
 									getEditorFeatureFlags || defaultGetEditorFeatureFlags,
 									api,
+									nodeViewPortalProviderAPI,
 									editorAnalyticsAPI,
 									isTableScalingEnabled || false,
 									isNewColumnResizingEnabled,
@@ -410,7 +413,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 				// plugin as it is currently swallowing backspace events inside tables
 				{
 					name: 'tableKeymap',
-					plugin: ({ getIntl }) => {
+					plugin: ({ getIntl, nodeViewPortalProviderAPI }) => {
 						const {
 							dragAndDropEnabled,
 							isTableScalingEnabled = false,
@@ -424,6 +427,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 						return keymapPlugin(
 							defaultGetEditorContainerWidth,
 							api,
+							nodeViewPortalProviderAPI,
 							editorAnalyticsAPI,
 							dragAndDropEnabled,
 							isTableScalingEnabled,
@@ -488,8 +492,10 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 				},
 				{
 					name: 'tableViewModeSort',
-					plugin: () => {
-						return api?.editorViewMode ? createViewModeSortPlugin(api) : undefined;
+					plugin: ({ nodeViewPortalProviderAPI }) => {
+						return api?.editorViewMode
+							? createViewModeSortPlugin(api, nodeViewPortalProviderAPI)
+							: undefined;
 					},
 				},
 				{

package/src/pm-plugins/decorations/utils/column-resizing.ts

@@ -1,5 +1,6 @@
 import type { IntlShape } from 'react-intl-next';
 
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 
 import { TableDecorations } from '../../../types';
@@ -36,6 +37,7 @@ export const buildColumnResizingDecorations =
 		columnEndIndex: number,
 		includeTooltip: boolean,
 		getIntl: () => IntlShape,
+		nodeViewPortalProviderAPI: PortalProviderAPI,
 	): DecorationTransformer =>
 	({ tr, decorationSet }): DecorationSet => {
 		const [columnResizesDecorations, lastCellElementsDecorations] =
@@ -49,6 +51,7 @@ export const buildColumnResizingDecorations =
 						},
 						includeTooltip,
 						getIntl,
+						nodeViewPortalProviderAPI,
 					);
 
 		return composeDecorations([

package/src/pm-plugins/keymap.ts

@@ -30,6 +30,7 @@ import {
 	startColumnResizing,
 	toggleTable,
 } from '@atlaskit/editor-common/keymaps';
+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 { chainCommands } from '@atlaskit/editor-prosemirror/commands';
@@ -59,6 +60,7 @@ import type { PluginInjectionAPI, PluginInjectionAPIWithA11y } from '../types';
 export function keymapPlugin(
 	getEditorContainerWidth: GetEditorContainerWidth,
 	api: PluginInjectionAPI | undefined | null,
+	nodeViewPortalProviderAPI: PortalProviderAPI,
 	editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
 	dragAndDropEnabled?: boolean,
 	isTableScalingEnabled = false,
@@ -263,6 +265,7 @@ export function keymapPlugin(
 		initiateKeyboardColumnResizing({
 			ariaNotify: ariaNotifyPlugin,
 			getIntl: getIntl,
+			nodeViewPortalProviderAPI,
 		}),
 		list,
 	);
@@ -273,6 +276,7 @@ export function keymapPlugin(
 			direction: 1,
 			ariaNotify: ariaNotifyPlugin,
 			getIntl: getIntl,
+			nodeViewPortalProviderAPI,
 		}),
 		list,
 	);
@@ -283,6 +287,7 @@ export function keymapPlugin(
 			direction: -1,
 			ariaNotify: ariaNotifyPlugin,
 			getIntl: getIntl,
+			nodeViewPortalProviderAPI,
 		}),
 		list,
 	);

package/src/pm-plugins/main.ts

@@ -79,6 +79,7 @@ export const createPlugin = (
 	dispatchAnalyticsEvent: DispatchAnalyticsEvent,
 	dispatch: Dispatch,
 	portalProviderAPI: PortalProviderAPI,
+	nodeViewPortalProviderAPI: PortalProviderAPI,
 	eventDispatcher: EventDispatcher,
 	pluginConfig: PluginConfig,
 	getEditorContainerWidth: GetEditorContainerWidth,
@@ -381,7 +382,7 @@ export const createPlugin = (
 				blur: handleBlur,
 				mousedown: withCellTracking(handleMouseDown),
 				mouseleave: handleMouseLeave,
-				mousemove: whenTableInFocus(handleMouseMove),
+				mousemove: whenTableInFocus(handleMouseMove(nodeViewPortalProviderAPI)),
 				mouseenter: handleMouseEnter,
 				mouseup: whenTableInFocus(handleMouseUp),
 				click: withCellTracking(whenTableInFocus(handleClick)),

package/src/pm-plugins/table-resizing/event-handlers.ts

@@ -8,6 +8,7 @@ import {
 	TABLE_OVERFLOW_CHANGE_TRIGGER,
 } from '@atlaskit/editor-common/analytics';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -50,6 +51,7 @@ export const handleMouseDown = (
 	getEditorFeatureFlags: GetEditorFeatureFlags,
 	isTableScalingEnabled: boolean,
 	api: PluginInjectionAPI | undefined | null,
+	nodeViewPortalProviderAPI: PortalProviderAPI,
 	editorAnalyticsAPI?: EditorAnalyticsAPI,
 	isNewColumnResizingEnabled?: boolean,
 	isTableAlignmentEnabled?: boolean,
@@ -150,7 +152,12 @@ export const handleMouseDown = (
 
 	// 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/src/pm-plugins/table-resizing/plugin.ts

@@ -2,6 +2,7 @@ import classnames from 'classnames';
 
 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';
 
@@ -21,6 +22,7 @@ export function createPlugin(
 	getEditorContainerWidth: GetEditorContainerWidth,
 	getEditorFeatureFlags: GetEditorFeatureFlags,
 	api: PluginInjectionAPI | undefined | null,
+	nodeViewPortalProviderAPI: PortalProviderAPI,
 	editorAnalyticsAPI?: EditorAnalyticsAPI,
 	isTableScalingEnabled?: boolean,
 	isNewColumnResizingEnabled?: boolean,
@@ -76,6 +78,7 @@ export function createPlugin(
 								getEditorFeatureFlags,
 								isTableScalingEnabled || false,
 								api,
+								nodeViewPortalProviderAPI,
 								editorAnalyticsAPI,
 								isNewColumnResizingEnabled,
 								isTableAlignmentEnabled,

package/src/pm-plugins/view-mode-sort/index.ts

@@ -8,12 +8,15 @@ import { createElement } from 'react';
 
 import ReactDOM from 'react-dom';
 import { RawIntlProvider } from 'react-intl-next';
+import uuid from 'uuid/v4';
 
+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 { 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 type tablePlugin from '../../plugin';
 import { SortingIconWrapper } from '../../ui/icons/SortingIconWrapper';
@@ -28,7 +31,10 @@ import { tableViewModeSortPluginKey as key } from './plugin-key';
 import type { ViewModeSortPluginState } from './types';
 import { getTableElements, toggleSort } from './utils';
 
-export const createPlugin = (api: ExtractInjectionAPI<typeof tablePlugin>) => {
+export const createPlugin = (
+	api: ExtractInjectionAPI<typeof tablePlugin>,
+	nodeViewPortalProviderAPI: PortalProviderAPI,
+) => {
 	return new SafePlugin({
 		state: {
 			init: () => ({
@@ -84,40 +90,73 @@ export const createPlugin = (api: ExtractInjectionAPI<typeof tablePlugin>) => {
 						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, () => {
-									const element = document.createElement('div');
-									element.setAttribute(SORT_INDEX_DATA_ATTRIBUTE, `${index}`);
-									element.classList.add(SORTING_ICON_CLASS_NAME);
-									if (hasMergedCells) {
-										element.classList.add(IS_DISABLED_CLASS_NAME);
-									}
-
-									let sortOrdered;
-									if (index === sort[tableId]?.index) {
-										sortOrdered = sort[tableId]?.direction;
-									} else {
-										sortOrdered = SortOrder.NO_ORDER;
-									}
-
-									const { getIntl } = getPluginState(oldState);
-
-									ReactDOM.render(
-										createElement(
-											RawIntlProvider,
-											{ value: getIntl() },
-											createElement(SortingIconWrapper, {
-												isSortingAllowed: !hasMergedCells,
-												sortOrdered,
-												onClick: () => {},
-												onKeyDown: () => {},
-												api,
-											}),
-										),
-										element,
-									);
-									return element;
-								}),
+								Decoration.widget(
+									cell + pos + 2,
+									() => {
+										const element = document.createElement('div');
+										element.setAttribute(SORT_INDEX_DATA_ATTRIBUTE, `${index}`);
+										element.classList.add(SORTING_ICON_CLASS_NAME);
+										if (hasMergedCells) {
+											element.classList.add(IS_DISABLED_CLASS_NAME);
+										}
+
+										let sortOrdered;
+										if (index === sort[tableId]?.index) {
+											sortOrdered = sort[tableId]?.direction;
+										} else {
+											sortOrdered = SortOrder.NO_ORDER;
+										}
+
+										const { getIntl } = getPluginState(oldState);
+
+										if (fg('platform_editor_react18_plugin_portalprovider')) {
+											nodeViewPortalProviderAPI.render(
+												() =>
+													createElement(
+														RawIntlProvider,
+														{ value: getIntl() },
+														createElement(SortingIconWrapper, {
+															isSortingAllowed: !hasMergedCells,
+															sortOrdered,
+															onClick: () => {},
+															onKeyDown: () => {},
+															api,
+														}),
+													),
+												element,
+												decorationRenderKey,
+											);
+										} else {
+											ReactDOM.render(
+												createElement(
+													RawIntlProvider,
+													{ value: getIntl() },
+													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 as HTMLDivElement);
+											}
+										},
+									},
+								),
 							);
 						});
 					});

package/src/utils/decoration.ts

@@ -3,8 +3,10 @@ import { createElement } from 'react';
 import ReactDOM from 'react-dom';
 import { RawIntlProvider } from 'react-intl-next';
 import type { IntlShape } from 'react-intl-next';
+import uuid from 'uuid/v4';
 
 import type { CellAttributes } from '@atlaskit/adf-schema';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { nonNullable } from '@atlaskit/editor-common/utils';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
@@ -18,6 +20,7 @@ import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 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 type { Cell, CellColumnPositioning } from '../types';
 import { TableCssClassName as ClassName, TableDecorations } from '../types';
@@ -308,6 +311,7 @@ export const createResizeHandleDecoration = (
 	columnEndIndexTarget: Omit<CellColumnPositioning, 'left'>,
 	includeTooltip: boolean = false,
 	getIntl: () => IntlShape,
+	nodeViewPortalProviderAPI: PortalProviderAPI,
 ): [Decoration[], Decoration[]] => {
 	const emptyResult: [Decoration[], Decoration[]] = [[], []];
 	const table = findTable(tr.selection);
@@ -327,23 +331,41 @@ export const createResizeHandleDecoration = (
 		cellPos: number,
 		cellNode: PmNode,
 	): Decoration => {
+		const decorationRenderKey = uuid();
 		const position = cellPos + cellNode.nodeSize - 1;
 		return Decoration.widget(
 			position,
 			() => {
 				const element = document.createElement('div');
-				ReactDOM.render(
-					createElement(
-						RawIntlProvider,
-						{ value: getIntl() },
-						createElement(ColumnResizeWidget, {
-							startIndex: cellColumnPositioning.left,
-							endIndex: cellColumnPositioning.right,
-							includeTooltip,
-						}),
-					),
-					element,
-				);
+				if (fg('platform_editor_react18_plugin_portalprovider')) {
+					nodeViewPortalProviderAPI.render(
+						() =>
+							createElement(
+								RawIntlProvider,
+								{ value: getIntl() },
+								createElement(ColumnResizeWidget, {
+									startIndex: cellColumnPositioning.left,
+									endIndex: cellColumnPositioning.right,
+									includeTooltip,
+								}),
+							),
+						element,
+						decorationRenderKey,
+					);
+				} else {
+					ReactDOM.render(
+						createElement(
+							RawIntlProvider,
+							{ value: getIntl() },
+							createElement(ColumnResizeWidget, {
+								startIndex: cellColumnPositioning.left,
+								endIndex: cellColumnPositioning.right,
+								includeTooltip,
+							}),
+						),
+						element,
+					);
+				}
 				return element;
 			},
 			{
@@ -351,7 +373,11 @@ export const createResizeHandleDecoration = (
 					TableDecorations.COLUMN_RESIZING_HANDLE_WIDGET
 				}_${rowIndex}_${columnIndex}_${includeTooltip ? 'with' : 'no'}-tooltip`,
 				destroy: (node) => {
-					ReactDOM.unmountComponentAtNode(node as HTMLDivElement);
+					if (fg('platform_editor_react18_plugin_portalprovider')) {
+						nodeViewPortalProviderAPI.remove(decorationRenderKey);
+					} else {
+						ReactDOM.unmountComponentAtNode(node as HTMLDivElement);
+					}
 				},
 			},
 		);