@atlaskit/editor-plugin-table 7.30.0 → 7.31.0

package/src/plugin.tsx

@@ -22,6 +22,10 @@ import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { IconTable } from '@atlaskit/editor-common/icons';
 import { toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import {
+	getParentOfTypeCount,
+	getPositionAfterTopParentNodeOfType,
+} from '@atlaskit/editor-common/nesting';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type {
 	Command,
@@ -42,11 +46,14 @@ import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
+import { type Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import { hasParentNodeOfType, safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import { insertTableWithSize } from './commands/insert';
 import { pluginConfig } from './create-plugin-config';
@@ -233,12 +240,32 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 						isTableResizingEnabled: options?.tableResizingEnabled,
 					})(state.schema);
 
+					// If the cursor is inside a table
+					let insertAt: Selection | undefined;
+					if (
+						hasParentNodeOfType(state.schema.nodes.table)(state.selection) &&
+						fg('platform_editor_use_nested_table_pm_nodes')
+					) {
+						// If the experiment is disabled, or we're trying to nest deeper than one level, we insert the table after the top table
+						if (
+							editorExperiment('nested-tables-in-tables', false, { exposure: true }) ||
+							getParentOfTypeCount(state.schema.nodes.table)(state.selection) > 1
+						) {
+							const positionAfterTopTable = getPositionAfterTopParentNodeOfType(
+								state.schema.nodes.table,
+							)(state.selection);
+							if (!positionAfterTopTable) {
+								return false;
+							}
+							insertAt = TextSelection.create(state.doc, positionAfterTopTable);
+						}
+					}
+
 					return (
 						api?.contentInsertion?.actions?.insert({
 							state,
 							dispatch,
 							node,
-
 							options: {
 								selectNodeInserted: false,
 								analyticsPayload: {
@@ -248,6 +275,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 										localId: node.attrs.localId,
 									},
 								},
+								insertAt,
 							},
 						}) ?? false
 					);
@@ -749,7 +777,30 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 							isTableResizingEnabled: options?.tableResizingEnabled,
 						})(state.schema);
 
-						const tr = insert(tableNode);
+						let { tr } = state;
+						// If the cursor is inside a table
+						if (
+							hasParentNodeOfType(state.schema.nodes.table)(state.selection) &&
+							fg('platform_editor_use_nested_table_pm_nodes')
+						) {
+							// If the experiment is disabled, or we're trying to nest deeper than one level, we insert the table after the top table
+							if (
+								editorExperiment('nested-tables-in-tables', false, { exposure: true }) ||
+								getParentOfTypeCount(state.schema.nodes.table)(state.selection) > 1
+							) {
+								// Nesting is too deep insert table after the top parent table
+								const positionAfterTopTable = getPositionAfterTopParentNodeOfType(
+									state.schema.nodes.table,
+								)(state.selection);
+								tr = safeInsert(tableNode, positionAfterTopTable)(tr);
+								tr.scrollIntoView();
+							} else {
+								// Table can be nested in parent table
+								tr = insert(tableNode);
+							}
+						} else {
+							tr = insert(tableNode);
+						}
 
 						editorAnalyticsAPI?.attachAnalyticsEvent({
 							action: ACTION.INSERTED,

package/src/pm-plugins/keymap.ts

@@ -316,7 +316,7 @@ export function keymapPlugin(
 		),
 		list,
 	);
-	
+
 	bindKeymapWithCommand(
 		escape.common!,
 		stopKeyboardColumnResizing({

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,9 +21,9 @@ 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';
 import { token } from '@atlaskit/tokens';
 
 import { SORTING_ICON_CLASS_NAME } from '../pm-plugins/view-mode-sort/consts';
@@ -192,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 {
@@ -284,7 +271,7 @@ export const baseTableStyles = (props: { featureFlags?: FeatureFlags }) => css`
 	${hoveredDeleteButton()};
 	${hoveredCell()};
 	${hoveredWarningCell};
-	${props.featureFlags?.tableDragAndDrop && insertLine()};
+	${insertLine()};
 	${resizeHandle(props.featureFlags?.tableDragAndDrop)};
 	${rangeSelectionStyles};
 	${viewModeSortStyles()};
@@ -401,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;
 
@@ -848,7 +832,10 @@ export const baseTableStyles = (props: { featureFlags?: FeatureFlags }) => css`
 		position: relative;
 		float: right;
 		margin-left: ${akEditorTableToolbarSize}px;
-		top: ${props.featureFlags?.tableDragAndDrop ? 0 : akEditorTableToolbarSize}px;
+		top: ${props.featureFlags?.tableDragAndDrop ||
+		editorExperiment('support_table_in_comment_jira', true)
+			? 0
+			: akEditorTableToolbarSize}px;
 		width: ${akEditorTableNumberColumnWidth + 1}px;
 		box-sizing: border-box;
 	}