@atlaskit/editor-plugin-table 12.2.5 → 12.2.7

package/src/index.ts

@@ -1,21 +0,0 @@
-/* eslint-disable @atlaskit/editor/only-export-plugin */
-/* eslint-disable @atlaskit/editor/no-re-export */
-// Entry file in package.json
-
-// eslint-disable-next-line @atlaskit/editor/only-export-plugin
-export {
-	/**
-	 * @private
-	 * @deprecated Use {@link tablePlugin} instead.
-	 */
-	default as tablesPlugin,
-	default as tablePlugin,
-} from './tablePlugin';
-// eslint-disable-next-line @atlaskit/editor/only-export-plugin
-export type {
-	TablePlugin,
-	TablePluginOptions,
-	TablePluginDependencies,
-	TablePluginActions,
-	TablePluginCommands,
-} from './tablePluginType';

package/src/nodeviews/ExternalDropTargets.tsx

@@ -1,91 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-import { tableMarginTop } from '@atlaskit/editor-common/styles';
-import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-
-import { getColumnsWidths } from '../pm-plugins/utils/column-controls';
-import type { DraggableSourceData } from '../types';
-import { dropTargetExtendedWidth, dropTargetsZIndex } from '../ui/consts';
-import { ColumnDropTarget } from '../ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget';
-
-export const ExternalDropTargets = ({
-	editorView,
-	node,
-	getScrollOffset,
-	getTableWrapperWidth,
-}: {
-	editorView: EditorView;
-	node?: PMNode;
-	getScrollOffset: () => number;
-	getTableWrapperWidth: () => number;
-}) => {
-	const [isDragging, setIsDragging] = useState(false);
-	const currentNodeLocalId = node?.attrs.localId;
-
-	useEffect(() => {
-		return monitorForElements({
-			canMonitor({ source }) {
-				const { type, indexes, localId } = source.data as Partial<DraggableSourceData>;
-				return type === 'table-column' && !!indexes?.length && localId === currentNodeLocalId;
-			},
-			onDragStart() {
-				setIsDragging(true);
-			},
-			onDrop() {
-				setIsDragging(false);
-			},
-		});
-	}, [currentNodeLocalId, editorView]);
-
-	if (!isDragging) {
-		return null;
-	}
-
-	const colWidths = getColumnsWidths(editorView);
-
-	return (
-		<div
-			style={{
-				width: getTableWrapperWidth(),
-				// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-				overflow: 'hidden',
-				// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-				position: 'absolute',
-				// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-				top: `-${dropTargetExtendedWidth - tableMarginTop}px`,
-				// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-				pointerEvents: 'auto',
-				// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-				zIndex: `${dropTargetsZIndex}`,
-			}}
-			data-testid="table-floating-column-extended-drop-targets"
-		>
-			<div
-				style={{
-					// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-					display: 'flex',
-					// move drop targets based on table wrapper scroll
-					// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-					marginLeft: `-${getScrollOffset()}px`,
-				}}
-			>
-				{colWidths?.map((width, index) => {
-					return (
-						<ColumnDropTarget
-							// Ignored via go/ees005
-							// eslint-disable-next-line react/no-array-index-key
-							key={index}
-							index={index}
-							localId={currentNodeLocalId}
-							width={width}
-							height={dropTargetExtendedWidth}
-							marginTop={0}
-						/>
-					);
-				})}
-			</div>
-		</div>
-	);
-};

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