@atlaskit/editor-plugin-table 12.1.13 → 12.1.15

package/src/nodeviews/TableComponent.tsx

@@ -136,6 +136,7 @@ interface ComponentProps {
 	isTableHovered?: boolean;
 	isWholeTableInDanger?: boolean;
 	selection?: Selection;
+	limitedMode?: boolean;
 }
 
 interface TableState {
@@ -917,7 +918,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 				// pass `selection` and `tableHeight` to control re-render
 				selection={view.state.selection}
 				headerRowHeight={headerRow ? headerRow.offsetHeight : undefined}
-				stickyHeader={this.state.stickyHeader}
+				stickyHeader={!this.props.limitedMode ? this.state.stickyHeader : undefined}
 				tableWrapperWidth={this.state.tableWrapperWidth}
 				api={pluginInjectionApi}
 				isChromelessEditor={options?.isChromelessEditor}
@@ -940,7 +941,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 				// pass `selection` to control re-render
 				selection={view.state.selection}
 				headerRowHeight={headerRow ? headerRow.offsetHeight : undefined}
-				stickyHeader={this.state.stickyHeader}
+				stickyHeader={!this.props.limitedMode ? this.state.stickyHeader : undefined}
 				getEditorFeatureFlags={getEditorFeatureFlags}
 				tableContainerWidth={tableContainerWidth}
 				isNumberColumnEnabled={node.attrs.isNumberColumnEnabled}
@@ -975,7 +976,9 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 		const topOffset = 0;
 
 		const topStickyShadowPosition =
-			this.state.stickyHeader && topOffset + this.state.stickyHeader.padding + topShadowPadding + 2;
+			!this.props.limitedMode &&
+			this.state.stickyHeader &&
+			topOffset + this.state.stickyHeader.padding + topShadowPadding + 2;
 
 		const { tableWithFixedColumnWidthsOption = false } = getEditorFeatureFlags();
 
@@ -988,7 +991,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 				// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
 				className={classnames(ClassName.TABLE_CONTAINER, {
 					[ClassName.WITH_CONTROLS]: allowControls && tableActive,
-					[ClassName.TABLE_STICKY]: this.state.stickyHeader && hasHeaderRow,
+					[ClassName.TABLE_STICKY]:
+						!this.props.limitedMode && this.state.stickyHeader && hasHeaderRow,
 					[ClassName.HOVERED_DELETE_BUTTON]: isInDanger,
 					[ClassName.TABLE_SELECTED]: isTableSelected(selection ?? view.state.selection),
 					[ClassName.NESTED_TABLE_WITH_CONTROLS]:

package/src/nodeviews/TableRow.ts

@@ -20,7 +20,11 @@ import type { TableDOMElements } from '../pm-plugins/utils/dom';
 import { getTop, getTree } from '../pm-plugins/utils/dom';
 import { supportedHeaderRow } from '../pm-plugins/utils/nodes';
 import type { TablePluginState } from '../types';
-import { TableCssClassName as ClassName, TableCssClassName } from '../types';
+import {
+	TableCssClassName as ClassName,
+	TableCssClassName,
+	type PluginInjectionAPI,
+} from '../types';
 import {
 	stickyHeaderBorderBottomWidth,
 	stickyRowOffsetTop,
@@ -46,11 +50,31 @@ const HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT = 400;
 export default class TableRow extends TableNodeView<HTMLTableRowElement> implements NodeView {
 	private nodeVisibilityObserverCleanupFn?: () => void;
 
+	cleanup = () => {
+		if (this.isStickyHeaderEnabled) {
+			this.unsubscribe();
+
+			this.nodeVisibilityObserverCleanupFn && this.nodeVisibilityObserverCleanupFn();
+
+			const tree = getTree(this.dom);
+			if (tree) {
+				this.makeRowHeaderNotSticky(tree.table, true);
+			}
+
+			this.emitOff(false);
+		}
+
+		if (this.tableContainerObserver) {
+			this.tableContainerObserver.disconnect();
+		}
+	};
+
 	constructor(
 		node: PMNode,
 		view: EditorView,
 		getPos: () => number | undefined,
 		eventDispatcher: EventDispatcher,
+		api?: PluginInjectionAPI,
 	) {
 		super(node, view, getPos, eventDispatcher);
 
@@ -60,6 +84,16 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
 		const { pluginConfig } = getPluginState(view.state);
 
 		this.isStickyHeaderEnabled = !!pluginConfig.stickyHeaders;
+
+		if (
+			api?.limitedMode?.sharedState.currentState()?.limitedModePluginKey.getState(view.state)
+				?.documentSizeBreachesThreshold
+		) {
+			this.isStickyHeaderEnabled = false;
+			// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+			document.addEventListener('limited-mode-activated', this.cleanup);
+		}
+
 		const pos = this.getPos();
 		this.isInNestedTable = false;
 		if (pos) {
@@ -177,6 +211,9 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
 			this.emitOff(true);
 		}
 
+		// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+		document.removeEventListener('limited-mode-activated', this.cleanup);
+
 		if (this.tableContainerObserver) {
 			this.tableContainerObserver.disconnect();
 		}

package/src/nodeviews/table-node-views.ts

@@ -71,6 +71,6 @@ export const tableHeaderView = (options: TableCellViewOptions) => {
 
 export const tableRowView = (options: TableCellViewOptions) => {
 	return (node: PMNode, view: EditorView, getPos: () => number | undefined) => {
-		return new TableRow(node, view, getPos, options.eventDispatcher);
+		return new TableRow(node, view, getPos, options.eventDispatcher, options.pluginInjectionApi);
 	};
 };

package/src/nodeviews/table.tsx

@@ -13,6 +13,7 @@ import type {
 	getPosHandlerNode,
 } from '@atlaskit/editor-common/types';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
+import type { LimitedModePluginState } from '@atlaskit/editor-plugin-limited-mode';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import {
@@ -104,6 +105,10 @@ export default class TableView extends ReactNodeView<Props> {
 			props.portalProviderAPI,
 			props.eventDispatcher,
 			props,
+			undefined,
+			undefined,
+			// @portal-render-immediately
+			true,
 		);
 		this.getPos = props.getPos;
 		this.eventDispatcher = props.eventDispatcher;
@@ -306,6 +311,9 @@ export default class TableView extends ReactNodeView<Props> {
 					widthPlugin: fakePluginKey,
 					mediaState: fakeMediaPluginKey,
 					tableDragAndDropState: tableDragAndDropPluginKey,
+
+					limitedModePlugin: props.pluginInjectionApi?.limitedMode?.sharedState.currentState()
+						?.limitedModePluginKey as PluginKey<LimitedModePluginState>,
 				}}
 				editorView={props.view}
 				render={(pluginStates) => {
@@ -370,6 +378,7 @@ export default class TableView extends ReactNodeView<Props> {
 							getEditorFeatureFlags={props.getEditorFeatureFlags}
 							dispatchAnalyticsEvent={props.dispatchAnalyticsEvent}
 							pluginInjectionApi={props.pluginInjectionApi}
+							limitedMode={pluginStates.limitedModePlugin?.documentSizeBreachesThreshold ?? false}
 						/>
 					);
 				}}

package/src/pm-plugins/main.ts

@@ -145,7 +145,7 @@ export const createPlugin = (
 						isCommentEditor,
 						isChromelessEditor,
 					}),
-					tableRow: tableRowView({ eventDispatcher }),
+					tableRow: tableRowView({ eventDispatcher, pluginInjectionApi }),
 					tableCell: tableCellView({ eventDispatcher, pluginInjectionApi }),
 					tableHeader: tableHeaderView({ eventDispatcher, pluginInjectionApi }),
 				};

package/src/tablePluginType.ts

@@ -15,6 +15,7 @@ import type { ExtensionPlugin } from '@atlaskit/editor-plugin-extension';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
+import type { LimitedModePlugin } from '@atlaskit/editor-plugin-limited-mode';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 
@@ -76,6 +77,7 @@ export type TablePluginDependencies = [
 	ContentInsertionPlugin,
 	WidthPlugin,
 	SelectionPlugin,
+	OptionalPlugin<LimitedModePlugin>,
 	OptionalPlugin<GuidelinePlugin>,
 	OptionalPlugin<BatchAttributeUpdatesPlugin>,
 	OptionalPlugin<AccessibilityUtilsPlugin>,

package/src/ui/TableFloatingControls/NumberColumn/index.tsx

@@ -5,7 +5,6 @@ import classnames from 'classnames';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { isRowSelected } from '@atlaskit/editor-tables/utils';
-import { fg } from '@atlaskit/platform-feature-flags';
 
 import { clearHoverSelection } from '../../../pm-plugins/commands';
 import { getRowHeights } from '../../../pm-plugins/utils/row-controls';
@@ -142,18 +141,10 @@ export default class NumberColumn extends Component<Props, any> {
 			isRowSelected(index)(editorView.state.selection) ||
 			((hoveredRows || []).indexOf(index) !== -1 && !isResizing);
 
-		if (fg('platform_editor_nested_tables_number_column_fixes')) {
-			return classnames(ClassName.NUMBERED_COLUMN_BUTTON, {
-				[ClassName.NUMBERED_COLUMN_BUTTON_DISABLED]: isButtonDisabled,
-				[ClassName.HOVERED_CELL_IN_DANGER]: tableActive && isActive && isInDanger,
-				[ClassName.HOVERED_CELL_ACTIVE]: tableActive && isActive,
-			});
-		} else {
-			return classnames(ClassName.NUMBERED_COLUMN_BUTTON, {
-				[ClassName.NUMBERED_COLUMN_BUTTON_DISABLED]: isButtonDisabled,
-				[ClassName.HOVERED_CELL_IN_DANGER]: isActive && isInDanger,
-				[ClassName.HOVERED_CELL_ACTIVE]: isActive,
-			});
-		}
+		return classnames(ClassName.NUMBERED_COLUMN_BUTTON, {
+			[ClassName.NUMBERED_COLUMN_BUTTON_DISABLED]: isButtonDisabled,
+			[ClassName.HOVERED_CELL_IN_DANGER]: tableActive && isActive && isInDanger,
+			[ClassName.HOVERED_CELL_ACTIVE]: tableActive && isActive,
+		});
 	};
 }

package/tsconfig.app.json

@@ -71,6 +71,9 @@
 		{
 			"path": "../editor-plugin-interaction/tsconfig.app.json"
 		},
+		{
+			"path": "../editor-plugin-limited-mode/tsconfig.app.json"
+		},
 		{
 			"path": "../editor-plugin-selection/tsconfig.app.json"
 		},