@atlaskit/editor-plugin-table 12.2.6 → 12.2.7

package/src/nodeviews/OverflowShadowsObserver.ts

@@ -1,156 +0,0 @@
-import rafSchedule from 'raf-schd';
-
-import { TableCssClassName as ClassName, ShadowEvent } from '../types';
-
-import { updateShadowListForStickyStyles } from './update-overflow-shadows';
-
-export class OverflowShadowsObserver {
-	private tableIntersectionObserver?: IntersectionObserver;
-	private updateShadowState: (shadowKey: ShadowEvent, value: boolean) => void;
-	private table: HTMLElement;
-	private wrapper: HTMLDivElement;
-
-	private leftShadowSentinel: HTMLElement | null = null;
-	private rightShadowSentinel: HTMLElement | null = null;
-	private shadowsObserved: boolean = false;
-
-	private isSticky = false;
-	private stickyRowHeight = 0;
-
-	// updateShadowState is a method to update shadow key
-	constructor(
-		updateShadowState: (shadowKey: ShadowEvent, value: boolean) => void,
-		table: HTMLElement,
-		wrapper: HTMLDivElement,
-	) {
-		this.updateShadowState = updateShadowState;
-		this.table = table;
-		this.wrapper = wrapper;
-
-		this.init();
-	}
-
-	private init = () => {
-		const table = this.table;
-
-		if (!this.wrapper || !table) {
-			return;
-		}
-
-		if (!this.tableIntersectionObserver) {
-			const intersectonOnbserverCallback = (entry: IntersectionObserverEntry) => {
-				if (entry.target !== this.leftShadowSentinel && entry.target !== this.rightShadowSentinel) {
-					return;
-				}
-
-				this.updateStickyShadowsHeightIfChanged();
-				this.updateShadowState(
-					this.leftShadowSentinel === entry.target
-						? ShadowEvent.SHOW_BEFORE_SHADOW
-						: ShadowEvent.SHOW_AFTER_SHADOW,
-					entry.intersectionRatio !== 1,
-				);
-			};
-
-			this.tableIntersectionObserver = new IntersectionObserver(
-				(entries: IntersectionObserverEntry[], _: IntersectionObserver) => {
-					entries.forEach((entry) => intersectonOnbserverCallback(entry));
-				},
-				{
-					threshold: [0, 1],
-					root: this.wrapper,
-					rootMargin: '0px',
-				},
-			);
-			return;
-		}
-	};
-
-	private updateStickyShadowsHeightIfChanged() {
-		if (!this.isSticky) {
-			return;
-		}
-		const stickyCell = this.getStickyCell();
-		if (!stickyCell) {
-			return;
-		}
-
-		this.updateStickyShadows();
-	}
-
-	private getStickyCell() {
-		const stickyRow = this.wrapper?.querySelector('tr.sticky');
-		const stickyCell = stickyRow && stickyRow.firstElementChild;
-		return stickyCell;
-	}
-
-	observeShadowSentinels = (isSticky?: boolean) => {
-		if (this.isSticky === isSticky) {
-			return;
-		}
-
-		this.isSticky = !!isSticky;
-
-		// reset height
-		this.stickyRowHeight = 0;
-		// update sticky shadows
-		this.updateStickyShadowsHeightIfChanged();
-
-		this.leftShadowSentinel = this.table?.querySelector(`.${ClassName.TABLE_SHADOW_SENTINEL_LEFT}`);
-		this.rightShadowSentinel = this.table?.querySelector(
-			`.${ClassName.TABLE_SHADOW_SENTINEL_RIGHT}`,
-		);
-
-		if (
-			this.tableIntersectionObserver &&
-			this.leftShadowSentinel &&
-			this.rightShadowSentinel &&
-			!this.shadowsObserved
-		) {
-			this.tableIntersectionObserver.disconnect();
-			this.tableIntersectionObserver.observe(this.leftShadowSentinel);
-			this.tableIntersectionObserver.observe(this.rightShadowSentinel);
-			this.shadowsObserved = true;
-		}
-	};
-
-	/**
-	 * Takes a heightStyle if it can be computed in a less expensive manner,
-	 * e.g. bounds on an IntersectionObserverEntry, otherwise proceed with
-	 * reading it from sticky cell
-	 */
-	updateStickyShadows = rafSchedule((stickyRowHeight?: number) => {
-		if (!this.isSticky) {
-			return;
-		}
-		const stickyCell = this.getStickyCell();
-		if (!stickyCell || !this.wrapper?.parentElement) {
-			return;
-		}
-
-		// Reflow Warning! - stickyCell.clientHeight
-		const newStickyRowHeight = stickyRowHeight || stickyCell.clientHeight + 1;
-
-		if (newStickyRowHeight !== this.stickyRowHeight) {
-			this.stickyRowHeight = newStickyRowHeight;
-			const heightStyleOrCompute = `${newStickyRowHeight}px`;
-			// Use getElementsByClassName here for a live node list to capture
-			// sticky shadows
-			const liveRightShadows = this.wrapper?.parentElement?.getElementsByClassName(
-				`${ClassName.TABLE_RIGHT_SHADOW}`,
-			);
-			const liveLeftShadows = this.wrapper?.parentElement?.getElementsByClassName(
-				`${ClassName.TABLE_LEFT_SHADOW}`,
-			);
-			updateShadowListForStickyStyles(heightStyleOrCompute, liveLeftShadows);
-			updateShadowListForStickyStyles(heightStyleOrCompute, liveRightShadows);
-		}
-	});
-
-	dispose() {
-		if (this.tableIntersectionObserver) {
-			this.tableIntersectionObserver.disconnect();
-			this.tableIntersectionObserver = undefined;
-		}
-	}
-}

package/src/nodeviews/TableCell.ts

@@ -1,134 +0,0 @@
-import type { CellDomAttrs } from '@atlaskit/adf-schema';
-import { getCellAttrs, getCellDomAttrs } from '@atlaskit/adf-schema';
-import {
-	ACTION_SUBJECT,
-	type EditorAnalyticsAPI,
-	EVENT_TYPE,
-	TABLE_ACTION,
-} from '@atlaskit/editor-common/analytics';
-import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
-import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
-
-import TableNodeView from './TableNodeViewBase';
-
-const DEFAULT_COL_SPAN = 1;
-const DEFAULT_ROW_SPAN = 1;
-
-/**
- * For performance reasons we do this in the background - it shouldn't block the main thread
- */
-function delayUntilIdle(cb: Function) {
-	if (typeof window === 'undefined') {
-		return;
-	}
-	// eslint-disable-next-line compat/compat
-	if (window.requestIdleCallback !== undefined) {
-		// eslint-disable-next-line compat/compat
-		return window.requestIdleCallback(() => cb(), { timeout: 500 });
-	}
-	return window.requestAnimationFrame(() => cb());
-}
-
-// Ignored via go/ees005
-// eslint-disable-next-line require-unicode-regexp
-const cssVariablePattern = /^VAR\(--.*\)$/;
-
-export default class TableCell extends TableNodeView<HTMLElement> implements NodeView {
-	private delayHandle: number | undefined;
-
-	constructor(
-		node: PMNode,
-		view: EditorView,
-		getPos: () => number | undefined,
-		eventDispatcher: EventDispatcher,
-		editorAnalyticsAPI: EditorAnalyticsAPI | undefined,
-	) {
-		super(node, view, getPos, eventDispatcher);
-
-		// CONFCLOUD-78239: Previously we had a bug which tried to invert the heading colour of a table
-		// Obviously design tokens can't be inverted and so it would result in `VAR(--DS-BACKGROUND-ACCENT-GRAY-SUBTLEST, #F4F5F7)`
-		// which is not a valid CSS variable.
-		//
-		// We should follow-up and remove this in TODO-xx in 6 months once we're confident
-		// that this has fixed most of the cases in the wild.
-		//
-		// This is a workaround to fix those cases on the fly. Note it is super specific on purpose
-		// so that it just fixes the heading token (other tokens should be unaffected)
-		// At some point in the future
-		if (cssVariablePattern.test(node.attrs.background)) {
-			this.delayHandle = delayUntilIdle(() => {
-				const pos = getPos();
-				if (pos) {
-					const tr = view.state.tr;
-					tr.setNodeAttribute(pos, 'background', node.attrs.background.toLowerCase())
-						// Ensures dispatch does not contribute to undo history (otherwise user requires multiple undo's to revert table)
-						.setMeta('addToHistory', false);
-					editorAnalyticsAPI?.attachAnalyticsEvent({
-						action: TABLE_ACTION.TABLE_CELL_BACKGROUND_FIXED,
-						actionSubject: ACTION_SUBJECT.TABLE,
-						actionSubjectId: null,
-						eventType: EVENT_TYPE.TRACK,
-					})(tr);
-					view.dispatch(tr);
-				}
-			});
-		}
-	}
-
-	destroy = () => {
-		if (this.delayHandle && typeof window !== 'undefined') {
-			// eslint-disable-next-line compat/compat
-			window?.cancelIdleCallback?.(this.delayHandle);
-			window?.cancelAnimationFrame?.(this.delayHandle);
-		}
-	};
-
-	update(node: PMNode) {
-		const didUpdate = this.updateNodeView(node);
-		if (didUpdate) {
-			this.node = node;
-		}
-		return didUpdate;
-	}
-
-	private updateNodeView(node: PMNode) {
-		if (this.node.type !== node.type) {
-			return false;
-		}
-
-		const attrs = getCellDomAttrs(this.node);
-		const nextAttrs = getCellDomAttrs(node);
-
-		const { colspan, rowspan } = getCellAttrs(this.dom);
-
-		// need to rerender when colspan/rowspan in dom are different from the node attrs
-		// this can happen when undoing merge cells
-		if (
-			colspan !== (node.attrs.colspan || DEFAULT_COL_SPAN) ||
-			rowspan !== (node.attrs.rowspan || DEFAULT_ROW_SPAN)
-		) {
-			return false;
-		}
-
-		// added + changed attributes
-		const addedAttrs = Object.entries(nextAttrs).filter(
-			([key, value]) => attrs[key as keyof CellDomAttrs] !== value,
-		);
-
-		const removedAttrs = Object.keys(attrs).filter((key) => !nextAttrs.hasOwnProperty(key));
-
-		if (addedAttrs.length || removedAttrs.length) {
-			addedAttrs.forEach(([key, value]) => this.dom.setAttribute(key, value || ''));
-			removedAttrs.forEach((key) => this.dom.removeAttribute(key));
-			return true;
-		}
-
-		// Return true to not re-render this node view
-		if (this.node.sameMarkup(node)) {
-			return true;
-		}
-
-		return false;
-	}
-}