@atlaskit/editor-plugin-table 7.30.2 → 7.31.1

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/toDOM.ts

@@ -2,7 +2,7 @@ import kebabCase from 'lodash/kebabCase';
 
 import { table, tableWithNestedTable } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/src/types';
+import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { DOMOutputSpec, NodeSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';

package/src/toolbar.tsx

@@ -11,7 +11,7 @@ import { CHANGE_ALIGNMENT_REASON, INPUT_METHOD } from '@atlaskit/editor-common/a
 import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
 import commonMessages, { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
-import type { typeOption } from '@atlaskit/editor-common/src/types/floating-toolbar';
+import type { typeOption } from '@atlaskit/editor-common/types';
 import type {
 	Command,
 	CommandDispatch,

package/src/ui/FloatingContextualButton/FixedButton.tsx

@@ -137,7 +137,7 @@ export const FixedButton = ({
 			return 0;
 		}
 
-		const container = targetCellRef.closest('[data-testid="ak-editor-fp-content-area"]');
+		const container = targetCellRef.closest('[data-editor-container="true"]');
 		return container?.getBoundingClientRect().left || 0;
 	}, [targetCellRef]);
 

package/src/ui/common-styles.ts

@@ -21,7 +21,6 @@ import {
 	SelectionStyle,
 } from '@atlaskit/editor-shared-styles';
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N40A, R500 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -193,19 +192,6 @@ const breakoutWidthStyling = () => {
 	`;
 };
 
-const stickyHeaderMarginTop = () => {
-	// Exceptional case: can't add this FF to package.json as a new ratcheting rule was added to prevent new LD flags.
-	// This LD flag existed in other packages before the rule was introduced.
-	// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration
-	if (!fg('platform.confluence.frontend.narrow-full-page-editor-toolbar')) {
-		return css`
-			margin-top: 2px;
-		`;
-	}
-
-	return css``;
-};
-
 const viewModeSortStyles = () => {
 	return css`
 		th {
@@ -402,9 +388,6 @@ export const baseTableStyles = (props: { featureFlags?: FeatureFlags }) => css`
 		/* background for where controls apply */
 		background: ${token('elevation.surface', 'white')};
 		box-sizing: content-box;
-
-		${stickyHeaderMarginTop()}
-
 		box-shadow: 0 6px 4px -4px ${token('elevation.shadow.overflow.perimeter', N40A)};
 		margin-left: -1px;
 

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);
+					}
 				},
 			},
 		);