@atlaskit/editor-plugin-table 10.10.6 → 10.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "10.10.6",
+	"version": "10.11.0",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,21 +32,21 @@
 		"@atlaskit/adf-schema": "^47.6.0",
 		"@atlaskit/button": "^23.2.0",
 		"@atlaskit/custom-steps": "^0.11.0",
-		"@atlaskit/editor-common": "^105.8.0",
+		"@atlaskit/editor-common": "^105.10.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.3.0",
 		"@atlaskit/editor-plugin-batch-attribute-updates": "^2.1.0",
 		"@atlaskit/editor-plugin-content-insertion": "^2.1.0",
-		"@atlaskit/editor-plugin-editor-viewmode": "^3.1.0",
-		"@atlaskit/editor-plugin-extension": "5.4.1",
+		"@atlaskit/editor-plugin-editor-viewmode": "^4.0.0",
+		"@atlaskit/editor-plugin-extension": "5.4.2",
 		"@atlaskit/editor-plugin-guideline": "^2.0.0",
 		"@atlaskit/editor-plugin-selection": "^2.2.0",
 		"@atlaskit/editor-plugin-width": "^3.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/icon": "^26.1.0",
+		"@atlaskit/icon": "^26.3.0",
 		"@atlaskit/menu": "^8.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
@@ -54,7 +54,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
 		"@atlaskit/primitives": "^14.8.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.25.0",
+		"@atlaskit/tmp-editor-statsig": "^5.0.0",
 		"@atlaskit/toggle": "^15.0.0",
 		"@atlaskit/tokens": "^4.9.0",
 		"@atlaskit/tooltip": "^20.0.0",

package/src/nodeviews/TableComponent.tsx

@@ -13,6 +13,7 @@ import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import { tintDirtyTransaction } from '@atlaskit/editor-common/collab';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { getParentOfTypeCount } from '@atlaskit/editor-common/nesting';
+import { nodeVisibilityManager } from '@atlaskit/editor-common/node-visibility';
 import { getParentNodeWidth, getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableMarginSides } from '@atlaskit/editor-common/styles';
 import type { EditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
@@ -28,6 +29,7 @@ import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import type { CleanupFn } from '@atlaskit/pragmatic-drag-and-drop/types';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { token } from '@atlaskit/tokens';
 
 import { autoSizeTable, clearHoverSelection } from '../pm-plugins/commands';
@@ -180,6 +182,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 	private updateColGroupFromFullWidthChange?: boolean;
 
 	private dragAndDropCleanupFn?: CleanupFn;
+	private nodeVisibilityObserverCleanupFn?: CleanupFn;
 
 	constructor(props: ComponentProps) {
 		super(props);
@@ -189,12 +192,11 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
 		const tablePos = props.getPos();
 
-		this.isNestedInTable =
-			tablePos && fg('nested_table_control_padding_with_css')
-				? getParentOfTypeCount(props.view.state.schema.nodes.table)(
-						props.view.state.doc.resolve(tablePos),
-					) > 0
-				: false;
+		this.isNestedInTable = tablePos
+			? getParentOfTypeCount(props.view.state.schema.nodes.table)(
+					props.view.state.doc.resolve(tablePos),
+				) > 0
+			: false;
 
 		this.isInitialOverflowSent = false;
 
@@ -250,6 +252,23 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 	};
 
 	componentDidMount() {
+		if (editorExperiment('platform_editor_nodevisibility', false)) {
+			this.initialiseEventListenersAfterMount();
+			return;
+		}
+
+		const { observe } = nodeVisibilityManager(this.props.view.dom);
+		if (this.table) {
+			this.nodeVisibilityObserverCleanupFn = observe({
+				element: this.table,
+				onFirstVisible: () => {
+					this.initialiseEventListenersAfterMount();
+				},
+			});
+		}
+	}
+
+	initialiseEventListenersAfterMount() {
 		const {
 			allowColumnResizing,
 			allowTableResizing,
@@ -367,6 +386,10 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 			this.dragAndDropCleanupFn();
 		}
 
+		if (this.nodeVisibilityObserverCleanupFn) {
+			this.nodeVisibilityObserverCleanupFn();
+		}
+
 		this.resizeObserver?.disconnect();
 		this.wrapperReisizeObserver?.disconnect();
 

package/src/nodeviews/TableRow.ts

@@ -3,11 +3,13 @@ import throttle from 'lodash/throttle';
 
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { getParentOfTypeCount } from '@atlaskit/editor-common/nesting';
+import { nodeVisibilityManager } from '@atlaskit/editor-common/node-visibility';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
@@ -44,6 +46,8 @@ const HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200;
 const HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT = 400;
 
 export default class TableRow extends TableNodeView<HTMLTableRowElement> implements NodeView {
+	private nodeVisibilityObserverCleanupFn?: () => void;
+
 	constructor(
 		node: PMNode,
 		view: EditorView,
@@ -66,13 +70,31 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
 		}
 
 		if (this.isHeaderRow) {
-			this.dom.setAttribute('data-header-row', 'true');
-			if (this.isStickyHeaderEnabled) {
-				this.subscribe();
+			if (editorExperiment('platform_editor_nodevisibility', false)) {
+				this.subscribeWhenRowVisible();
+			} else {
+				const { observe } = nodeVisibilityManager(view.dom);
+				this.nodeVisibilityObserverCleanupFn = observe({
+					element: this.contentDOM,
+					onFirstVisible: () => {
+						this.subscribeWhenRowVisible();
+					},
+				});
 			}
 		}
 	}
 
+	subscribeWhenRowVisible() {
+		if (this.listening) {
+			return;
+		}
+
+		this.dom.setAttribute('data-header-row', 'true');
+		if (this.isStickyHeaderEnabled) {
+			this.subscribe();
+		}
+	}
+
 	/**
 	 * Variables
 	 */
@@ -151,6 +173,8 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
 		if (this.isStickyHeaderEnabled) {
 			this.unsubscribe();
 
+			this.nodeVisibilityObserverCleanupFn && this.nodeVisibilityObserverCleanupFn();
+
 			const tree = getTree(this.dom);
 			if (tree) {
 				this.makeRowHeaderNotSticky(tree.table, true);
@@ -608,19 +632,6 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
 		const isTableInsideLayout =
 			parentContainer && parentContainer.getAttribute('data-layout-content');
 
-		const isNestedTable =
-			parentContainer &&
-			(parentContainer.className === 'pm-table-header-content-wrap' ||
-				parentContainer.className === 'pm-table-cell-content-wrap');
-
-		const isNestedDataTable =
-			parentContainer &&
-			parentContainer.getAttribute('data-mark-type') === 'fragment' &&
-			(parentContainer.parentElement?.className === 'pm-table-header-content-wrap' ||
-				parentContainer.parentElement?.className === 'pm-table-cell-content-wrap');
-
-		const isTableInsideTable = isNestedTable || isNestedDataTable;
-
 		if (tableContentWrapper) {
 			if (isCurrentTableSelected) {
 				this.colControlsOffset = tableControlsSpacing;
@@ -629,17 +640,11 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
 				// to provide spacing for table controls
 				if (isTableInsideLayout) {
 					tableContentWrapper.style.paddingLeft = '11px';
-				} else if (isTableInsideTable && !fg('nested_table_control_padding_with_css')) {
-					tableContentWrapper.style.paddingLeft = '15px';
-					tableContentWrapper.style.paddingRight = '4px';
 				}
 			} else {
 				this.colControlsOffset = 0;
 				if (isTableInsideLayout) {
 					tableContentWrapper.style.removeProperty('padding-left');
-				} else if (isTableInsideTable && !fg('nested_table_control_padding_with_css')) {
-					tableContentWrapper.style.removeProperty('padding-left');
-					tableContentWrapper.style.removeProperty('padding-right');
 				}
 			}
 		}
@@ -677,9 +682,6 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
 
 	private makeHeaderRowSticky(tree: TableDOMElements, scrollTop?: number) {
 		// If header row height is more than 50% of viewport height don't do this
-		// TODO: ED-26961 - When cleaning up 'nested_table_control_padding_with_css' FG
-		// move this check to the constructor of the TableRow so that we don't subscribe to
-		// clicks and scrolls for nested tables.
 		if (
 			this.isSticky ||
 			(this.stickyRowHeight && this.stickyRowHeight > window.innerHeight / 2) ||

package/src/ui/common-styles.ts

@@ -475,17 +475,15 @@ export const baseTableStyles = (props: {
 		padding-bottom: ${tableToolbarSize}px;
 	}
 
-	${fg('nested_table_control_padding_with_css')
-		? `
-		.tableView-content-wrap:has(.tableView-content-wrap):has(.${ClassName.NESTED_TABLE_WITH_CONTROLS}) {
-			padding-left: unset;
-		}
+	.tableView-content-wrap:has(.tableView-content-wrap):has(
+			.${ClassName.NESTED_TABLE_WITH_CONTROLS}
+		) {
+		padding-left: unset;
+	}
 
-		.tableView-content-wrap:has(.${ClassName.NESTED_TABLE_WITH_CONTROLS}) {
-			padding-left: 15px;
-		}
-		`
-		: ''}
+	.tableView-content-wrap:has(.${ClassName.NESTED_TABLE_WITH_CONTROLS}) {
+		padding-left: 15px;
+	}
 
 	tr.sticky th {
 		border-bottom: ${stickyHeaderBorderBottomWidth}px solid ${tableBorderColor};