@atlaskit/editor-plugin-table 10.10.7 → 10.11.1

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);

package/src/tablePluginType.ts

@@ -14,6 +14,7 @@ import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmo
 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 { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 
@@ -82,6 +83,7 @@ export type TablePluginDependencies = [
 	OptionalPlugin<EditorViewModePlugin>,
 	OptionalPlugin<FeatureFlagsPlugin>,
 	OptionalPlugin<ExtensionPlugin>,
+	OptionalPlugin<InteractionPlugin>,
 ];
 
 export type TablePlugin = NextEditorPlugin<

package/tsconfig.app.json

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