@atlaskit/editor-plugin-table 12.2.6 → 12.3.0

package/src/pm-plugins/safari-delete-composition-text-issue-workaround.ts

@@ -1,102 +0,0 @@
-/**
- * Fix an issue that composition text replacement in Safari removes empty nodes during text composition text deletion.
- * https://github.com/ProseMirror/prosemirror/issues/934
- * We will remove this plugin when Webkit fix the problem itself.
- */
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
-
-interface SafariDeleteCompositionTextIssueWorkaroundPluginState {
-	renderSpan: boolean;
-	decorations: DecorationSet;
-}
-
-const tableSafariDeleteCompositionTextIssueWorkaroundKey =
-	new PluginKey<SafariDeleteCompositionTextIssueWorkaroundPluginState>(
-		'tableSafariDeleteCompositionTextIssueWorkaround',
-	);
-
-export const createPlugin = () => {
-	return new SafePlugin<SafariDeleteCompositionTextIssueWorkaroundPluginState>({
-		key: tableSafariDeleteCompositionTextIssueWorkaroundKey,
-		state: {
-			init: (): SafariDeleteCompositionTextIssueWorkaroundPluginState => ({
-				renderSpan: false,
-				decorations: DecorationSet.empty,
-			}),
-			apply: (tr, value): SafariDeleteCompositionTextIssueWorkaroundPluginState => {
-				const renderSpan: boolean = tr.getMeta(tableSafariDeleteCompositionTextIssueWorkaroundKey);
-				if (typeof renderSpan === 'undefined') {
-					return value;
-				}
-
-				let decorations;
-				if (renderSpan) {
-					// Find position of the first text node in case it has multiple text nodes created by Japanese IME
-					const { $from } = tr.selection;
-					const pos = $from.before($from.depth);
-					const spanDecoration = Decoration.widget(pos, () => {
-						const spanElement = document.createElement('span');
-						return spanElement;
-					});
-					decorations = DecorationSet.create(tr.doc, [spanDecoration]);
-				} else {
-					decorations = DecorationSet.empty;
-				}
-
-				return {
-					renderSpan,
-					decorations,
-				};
-			},
-		},
-		props: {
-			decorations: (state) =>
-				tableSafariDeleteCompositionTextIssueWorkaroundKey.getState(state)?.decorations,
-			handleDOMEvents: {
-				beforeinput: (view: EditorView, event: Event): boolean => {
-					if ((event as InputEvent)?.inputType !== 'deleteCompositionText') {
-						return false;
-					}
-					const selection = window.getSelection();
-					if (!selection || selection.rangeCount <= 0 || selection.type !== 'Range') {
-						return false;
-					}
-					const range = selection.getRangeAt(0);
-					const { startContainer, endContainer, endOffset, startOffset } = range;
-					/**
-					 * On Safari when composition text is deleted, it deletes any empty elements it finds up the dom tree. Prosemirror can sometimes be confused by this
-					 * and will think that we meant to delete those elements. This fix forces the resulting node to not be empty.
-					 * The condition here checks to see if the entire text node is about to be swapped inside of an element
-					 */
-					if (
-						startContainer.nodeType === Node.TEXT_NODE &&
-						startContainer === endContainer &&
-						startOffset === 0 &&
-						endOffset === (startContainer as Text).length
-					) {
-						const { tr } = view.state;
-						tr.setMeta(tableSafariDeleteCompositionTextIssueWorkaroundKey, true);
-						view.dispatch(tr);
-					}
-					return false;
-				},
-				input: (view: EditorView, event: Event): boolean => {
-					if ((event as InputEvent)?.inputType !== 'deleteCompositionText') {
-						return false;
-					}
-					const selection = window.getSelection();
-					if (!selection) {
-						return false;
-					}
-					const { tr } = view.state;
-					tr.setMeta(tableSafariDeleteCompositionTextIssueWorkaroundKey, false);
-					view.dispatch(tr);
-					return false;
-				},
-			},
-		},
-	});
-};

package/src/pm-plugins/sticky-headers/commands.ts

@@ -1,8 +0,0 @@
-import { createCommand } from './plugin-state';
-import type { RowStickyState } from './types';
-
-export const updateStickyState = (rowState: RowStickyState) =>
-	createCommand({ name: 'UPDATE', state: rowState }, (tr) => tr.setMeta('addToHistory', false));
-
-export const removeStickyState = (pos: number) =>
-	createCommand({ name: 'REMOVE', pos }, (tr) => tr.setMeta('addToHistory', false));

package/src/pm-plugins/sticky-headers/plugin-key.ts

@@ -1,5 +0,0 @@
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-
-import type { StickyPluginState } from './types';
-
-export const pluginKey = new PluginKey<StickyPluginState>('stickyHeadersPlugin');

package/src/pm-plugins/sticky-headers/plugin-state.ts

@@ -1,52 +0,0 @@
-import { pluginFactory } from '@atlaskit/editor-common/utils';
-
-import { pluginKey } from './plugin-key';
-import type { StickyPluginAction, StickyPluginState } from './types';
-
-const reducer = (pluginState: StickyPluginState, action: StickyPluginAction): StickyPluginState => {
-	if (action.name === 'UPDATE') {
-		let updated = false;
-		const updatedState = pluginState.map((oldTableState) => {
-			const replace = oldTableState.pos === action.state.pos;
-
-			if (replace) {
-				updated = true;
-			}
-
-			return replace ? action.state : oldTableState;
-		});
-
-		if (!updated) {
-			// new, add it
-			updatedState.push(action.state);
-		}
-
-		return updatedState;
-	} else if (action.name === 'REMOVE') {
-		return pluginState.filter((rowState) => rowState.pos !== action.pos);
-	}
-
-	return pluginState;
-};
-
-const { createPluginState, createCommand } = pluginFactory(pluginKey, reducer, {
-	mapping: (tr, pluginState) => {
-		if (tr.docChanged) {
-			return pluginState
-				.map((rowInfo) => {
-					const remapped = tr.mapping.mapResult(rowInfo.pos);
-					return remapped
-						? {
-								...rowInfo,
-								pos: remapped.pos,
-							}
-						: undefined;
-				})
-				.filter((f) => f !== undefined) as StickyPluginState;
-		}
-
-		return pluginState;
-	},
-});
-
-export { createPluginState, createCommand };

package/src/pm-plugins/sticky-headers/plugin.ts

@@ -1,12 +0,0 @@
-import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-
-import { pluginKey } from './plugin-key';
-import { createPluginState } from './plugin-state';
-
-export const createPlugin = (dispatch: Dispatch, initialState = () => []) => {
-	return new SafePlugin({
-		state: createPluginState(dispatch, initialState),
-		key: pluginKey,
-	});
-};

package/src/pm-plugins/sticky-headers/types.ts

@@ -1,20 +0,0 @@
-export type RowStickyState = {
-	pos: number;
-	top: number;
-	padding: number;
-	sticky: boolean;
-};
-
-export type StickyPluginState = RowStickyState[];
-
-type UpdateSticky = {
-	name: 'UPDATE';
-	state: RowStickyState;
-};
-
-type RemoveSticky = {
-	name: 'REMOVE';
-	pos: number;
-};
-
-export type StickyPluginAction = UpdateSticky | RemoveSticky;

package/src/pm-plugins/sticky-headers/util.ts

@@ -1,18 +0,0 @@
-import type { StickyPluginState } from './types';
-
-// only worry about the first row for now
-export const findStickyHeaderForTable = (
-	state: StickyPluginState,
-	tablePos: number | undefined,
-) => {
-	if (!state || tablePos === undefined) {
-		return undefined;
-	}
-
-	const rowInfo = state.find((rowInfo) => rowInfo.pos === tablePos + 1);
-	if (!rowInfo) {
-		return undefined;
-	}
-
-	return rowInfo.sticky ? rowInfo : undefined;
-};

package/src/pm-plugins/table-analytics.ts

@@ -1,100 +0,0 @@
-/**
- * A plugin is created for collecting payload data for tableOverflowChanged analytics event
- */
-import {
-	ACTION_SUBJECT,
-	EVENT_TYPE,
-	TABLE_ACTION,
-	TABLE_OVERFLOW_CHANGE_TRIGGER,
-} from '@atlaskit/editor-common/analytics';
-import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
-import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-
-interface LastTrigger {
-	name: TABLE_OVERFLOW_CHANGE_TRIGGER;
-}
-
-type TableAnalyticsPluginState = {
-	lastTrigger: LastTrigger | undefined;
-};
-
-const pluginKey = new PluginKey<TableAnalyticsPluginState>('tableOverflowAnalyticsPlugin');
-
-export const META_KEYS = {
-	OVERFLOW_TRIGGER: 'tableOverflowTrigger',
-	OVERFLOW_STATE_CHANGED: 'tableOverflowStateChanged',
-};
-
-const createPlugin = (
-	dispatch: Dispatch,
-	dispatchAnalyticsEvent: DispatchAnalyticsEvent,
-	tableResizingEnabled: boolean,
-) =>
-	new SafePlugin({
-		key: pluginKey,
-		state: {
-			init() {
-				return {
-					lastTrigger: undefined,
-				};
-			},
-			apply(tr, pluginState) {
-				const meta = tr.getMeta(META_KEYS.OVERFLOW_TRIGGER);
-				const newState = { ...pluginState };
-				if (meta) {
-					newState.lastTrigger = { ...meta };
-					dispatch(pluginKey, newState);
-					return newState;
-				}
-
-				return pluginState;
-			},
-		},
-		appendTransaction: (transactions, oldState, newState) => {
-			const newPluginState = pluginKey.getState(newState);
-			let hasAnalyticsBeenDispatched = false;
-			const lastTriggerName =
-				newPluginState?.lastTrigger?.name ||
-				// NOTE: We assume that we know and can correctly differentiate
-				// between all triggers of table overflow state change.
-				// The only trigger we can't identify is viewport width change.
-				// However, since there is still a chance that there are other triggers we didn't think of,
-				// all these unknown triggers and viwport width change trigger are captured as EXTERNAL.
-				TABLE_OVERFLOW_CHANGE_TRIGGER.EXTERNAL;
-
-			transactions.forEach((tr) => {
-				const payload = tr.getMeta(META_KEYS.OVERFLOW_STATE_CHANGED);
-
-				if (payload) {
-					dispatchAnalyticsEvent({
-						action: TABLE_ACTION.OVERFLOW_CHANGED,
-						actionSubject: ACTION_SUBJECT.TABLE,
-						actionSubjectId: null,
-						eventType: EVENT_TYPE.TRACK,
-						attributes: {
-							editorWidth: payload.editorWidth,
-							parentWidth: payload.parentWidth,
-							isOverflowing: payload.isOverflowing,
-							wasOverflowing: payload.wasOverflowing,
-							width: payload.width,
-							tableResizingEnabled,
-							trigger: lastTriggerName,
-						},
-					});
-
-					hasAnalyticsBeenDispatched = true;
-				}
-			});
-
-			if (hasAnalyticsBeenDispatched) {
-				const tr = newState.tr;
-				return tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {});
-			}
-
-			return undefined;
-		},
-	});
-
-export { createPlugin };

package/src/pm-plugins/table-local-id.ts

@@ -1,213 +0,0 @@
-/**
- * A plugin for ensuring tables always have unique local IDs, and to
- * preserve/not regenerate them when they are being cut and paste around the
- * document.
- *
- * More broadly, this plugin should be generalised so it can solve this ‘unique
- * id’ problem across the codebase for any node, but for now this will live on
- * its own solving only for tables.
- *
- * TODO: https://product-fabric.atlassian.net/browse/ED-12714
- *
- */
-import rafSchedule from 'raf-schd';
-
-import { uuid } from '@atlaskit/adf-schema';
-import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { stepHasSlice } from '@atlaskit/editor-common/utils';
-import type { Node as ProsemirrorNode } from '@atlaskit/editor-prosemirror/model';
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-
-interface TableLocalIdPluginState {
-	// One time parse for initial load with existing tables without localIds
-	parsedForLocalIds: boolean;
-}
-
-const pluginKey = new PluginKey<TableLocalIdPluginState>('tableLocalIdPlugin');
-const getPluginState = (state: EditorState): TableLocalIdPluginState | undefined | null =>
-	state && pluginKey.getState(state);
-
-/**
- * Ensures uniqueness of `localId`s on tables being created or edited
- */
-const createPlugin = (dispatch: Dispatch) =>
-	new SafePlugin<TableLocalIdPluginState>({
-		key: pluginKey,
-		state: {
-			init() {
-				return {
-					parsedForLocalIds: false,
-				};
-			},
-			apply(tr, pluginState) {
-				const meta = tr.getMeta(pluginKey);
-				if (meta) {
-					const keys = Object.keys(meta) as Array<keyof TableLocalIdPluginState>;
-					const changed = keys.some((key) => {
-						return pluginState[key] !== meta[key];
-					});
-
-					if (changed) {
-						const newState = { ...pluginState, ...meta };
-
-						dispatch(pluginKey, newState);
-						return newState;
-					}
-				}
-
-				return pluginState;
-			},
-		},
-		view: () => {
-			return {
-				/**
-				 * Utilise the update cycle for _one_ scan through an initial doc
-				 * to ensure existing tables without IDs get them when this plugin is
-				 * enabled.
-				 *
-				 * This entire block can be skipped if we simply remove the `checkIsAddingTable`
-				 * check in appendTransaction, but that comes with 2 cons:
-				 *
-				 * 1. require a transaction before we actually add the local IDs
-				 * 2. ever slightly more unncessary checks
-				 *
-				 * Finally, this never happens in practice when utilising this in
-				 * confluence, as the collab/synchrony initialisation process will
-				 * trigger a transaction which adds tables, and thus this plugin will
-				 * add/dedupe the necessary IDs. But general usage of the editor
-				 * without collab should still solve for IDs.
-				 */
-				update(editorView) {
-					const { state } = editorView;
-					const pluginState = getPluginState(state);
-					if (!pluginState) {
-						return;
-					}
-					const parsed = pluginState.parsedForLocalIds;
-					if (parsed) {
-						return;
-					}
-
-					const { table } = state.schema.nodes;
-					rafSchedule(() => {
-						const tr = editorView.state.tr;
-						let tableIdWasAdded = false;
-						editorView.state.doc.descendants((node, pos) => {
-							const isTable = node.type === table;
-							const localId = node.attrs.localId;
-							if (isTable && !localId) {
-								tableIdWasAdded = true;
-								tr.setNodeMarkup(pos, undefined, {
-									...node.attrs,
-									localId: uuid.generate(),
-								});
-								return false;
-							}
-							/**
-							 * Otherwise continue traversing, we can encounter tables nested in
-							 * expands/bodiedExtensions
-							 */
-							return true;
-						});
-						if (tableIdWasAdded) {
-							tr.setMeta('addToHistory', false);
-							editorView.dispatch(tr);
-						}
-					})();
-
-					editorView.dispatch(
-						state.tr.setMeta(pluginKey, {
-							parsedForLocalIds: true,
-						}),
-					);
-				},
-			};
-		},
-		appendTransaction: (transactions, _oldState, newState) => {
-			let modified = false;
-			const tr = newState.tr;
-			const { table } = newState.schema.nodes;
-
-			const addedTableNodes: Set<ProsemirrorNode> = new Set();
-			const addedTableNodePos: Map<ProsemirrorNode, number> = new Map();
-			const localIds: Set<string> = new Set();
-
-			transactions.forEach((transaction) => {
-				if (!transaction.docChanged) {
-					return;
-				}
-
-				// Don't interfere with cut as it clashes with fixTables & we don't need
-				// to handle any extra cut cases in this plugin
-				const uiEvent = transaction.getMeta('uiEvent');
-				if (uiEvent === 'cut') {
-					return;
-				}
-
-				/** Get the tables we are adding and their position */
-				for (const step of transaction.steps) {
-					if (!stepHasSlice(step)) {
-						continue;
-					}
-
-					step.slice.content.descendants((node) => {
-						if (node.type === table) {
-							addedTableNodes.add(node);
-						}
-
-						return true;
-					});
-				}
-			});
-
-			if (!addedTableNodes.size) {
-				return;
-			}
-
-			// Get the existing localIds on the page
-			newState.doc.descendants((node, pos) => {
-				// Skip if this is position of added table
-				if (addedTableNodes.has(node)) {
-					addedTableNodePos.set(node, pos);
-					return false;
-				}
-
-				if (node.type !== table) {
-					return true;
-				}
-
-				localIds.add(node.attrs.localId);
-
-				// can't have table within a table
-				return false;
-			});
-
-			// If the added nodes have duplicate id, generate a new one
-			for (const node of addedTableNodes) {
-				if (!node.attrs.localId || localIds.has(node.attrs.localId)) {
-					const pos = addedTableNodePos.get(node);
-
-					if (pos === undefined) {
-						continue;
-					}
-
-					tr.setNodeMarkup(pos, undefined, {
-						...node.attrs,
-						localId: uuid.generate(),
-					});
-
-					modified = true;
-				}
-			}
-
-			if (modified) {
-				return tr;
-			}
-
-			return;
-		},
-	});
-
-export { createPlugin };

package/src/pm-plugins/table-resizing/commands.ts

@@ -1,116 +0,0 @@
-import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
-import type { Command } from '@atlaskit/editor-common/types';
-import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { Transaction } from '@atlaskit/editor-prosemirror/state';
-import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
-import { isTableSelected } from '@atlaskit/editor-tables/utils';
-
-import type { PluginInjectionAPI } from '../../types';
-import { META_KEYS } from '../table-analytics';
-import { updateColumnWidths } from '../transforms/column-width';
-
-import { createCommand, getPluginState } from './plugin-factory';
-import { isClickNear } from './utils/dom';
-import { evenAllColumnsWidths } from './utils/resize-state';
-import type { ResizeState } from './utils/types';
-
-export const evenColumns =
-	({
-		resizeState,
-		table,
-		start,
-		event,
-		api,
-	}: {
-		api: PluginInjectionAPI | undefined | null;
-		resizeState: ResizeState;
-		table: PMNode;
-		start: number;
-		event: MouseEvent;
-	}): Command =>
-	(state, dispatch) => {
-		if (!isTableSelected(state.selection)) {
-			return false;
-		}
-
-		// double click detection logic
-		// Note: ProseMirror's handleDoubleClick doesn't quite work with DOM mousedown event handler
-		const { lastClick } = getPluginState(state);
-		const now = Date.now();
-		if (lastClick && now - lastClick.time < 500 && isClickNear(event, lastClick)) {
-			const newState = evenAllColumnsWidths(resizeState);
-			setLastClick(null, (tr) => updateColumnWidths(newState, table, start, api)(tr))(
-				state,
-				dispatch,
-			);
-
-			return true;
-		}
-
-		setLastClick({ x: event.clientX, y: event.clientY, time: now })(state, dispatch);
-
-		return false;
-	};
-
-export const distributeColumnsWidths =
-	(
-		newResizeState: ResizeState,
-		table: ContentNodeWithPos,
-		api: PluginInjectionAPI | undefined | null,
-	): Command =>
-	(state, dispatch) => {
-		if (dispatch) {
-			const tr = updateColumnWidths(newResizeState, table.node, table.start, api)(state.tr);
-			tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
-				name: TABLE_OVERFLOW_CHANGE_TRIGGER.DISTRIBUTED_COLUMNS,
-			});
-			stopResizing(tr)(state, dispatch);
-		}
-
-		return true;
-	};
-
-export const setResizeHandlePos = (resizeHandlePos: number | null) =>
-	createCommand({
-		type: 'SET_RESIZE_HANDLE_POSITION',
-		data: {
-			resizeHandlePos,
-		},
-	});
-
-export const stopResizing = (tr?: Transaction) =>
-	createCommand(
-		{
-			type: 'STOP_RESIZING',
-		},
-		(originalTr) =>
-			(tr || originalTr).setMeta('scrollIntoView', false).setMeta('is-resizer-resizing', false),
-	);
-
-export const setDragging = (
-	dragging: { startX: number; startWidth: number } | null,
-	tr?: Transaction,
-) =>
-	createCommand(
-		{
-			type: 'SET_DRAGGING',
-			data: {
-				dragging,
-			},
-		},
-		(originalTr) => (tr || originalTr).setMeta('is-resizer-resizing', true),
-	);
-
-const setLastClick = (
-	lastClick: { x: number; y: number; time: number } | null,
-	transform?: (tr: Transaction) => Transaction,
-) =>
-	createCommand(
-		{
-			type: 'SET_LAST_CLICK',
-			data: {
-				lastClick,
-			},
-		},
-		transform,
-	);