@atlaskit/editor-plugin-table 7.16.11 → 7.16.13

package/src/pm-plugins/plugin-factory.ts

@@ -5,41 +5,39 @@ import reducer from '../reducer';
 
 import { pluginKey } from './plugin-key';
 
-export const { createPluginState, createCommand, getPluginState } =
-  pluginFactory(pluginKey, reducer, {
-    mapping: (tr, pluginState) => {
-      if (tr.docChanged) {
-        let updatedTargetCell = {};
-        if (pluginState.targetCellPosition) {
-          const { pos, deleted } = tr.mapping.mapResult(
-            pluginState.targetCellPosition,
-          );
+export const { createPluginState, createCommand, getPluginState } = pluginFactory(
+	pluginKey,
+	reducer,
+	{
+		mapping: (tr, pluginState) => {
+			if (tr.docChanged) {
+				let updatedTargetCell = {};
+				if (pluginState.targetCellPosition) {
+					const { pos, deleted } = tr.mapping.mapResult(pluginState.targetCellPosition);
 
-          updatedTargetCell = {
-            targetCellPosition: deleted ? undefined : pos,
-          };
-        }
+					updatedTargetCell = {
+						targetCellPosition: deleted ? undefined : pos,
+					};
+				}
 
-        let updatedTablePos = {};
-        if (pluginState.tablePos) {
-          const { pos, deleted } = tr.mapping.mapResult(
-            pluginState.tablePos,
-            -1,
-          );
+				let updatedTablePos = {};
+				if (pluginState.tablePos) {
+					const { pos, deleted } = tr.mapping.mapResult(pluginState.tablePos, -1);
 
-          updatedTablePos = {
-            tablePos: deleted ? undefined : pos,
-          };
-        }
+					updatedTablePos = {
+						tablePos: deleted ? undefined : pos,
+					};
+				}
 
-        return {
-          ...pluginState,
-          ...updatedTargetCell,
-          ...updatedTablePos,
-        };
-      }
-      return pluginState;
-    },
-    onDocChanged: handleDocOrSelectionChanged,
-    onSelectionChanged: handleDocOrSelectionChanged,
-  });
+				return {
+					...pluginState,
+					...updatedTargetCell,
+					...updatedTablePos,
+				};
+			}
+			return pluginState;
+		},
+		onDocChanged: handleDocOrSelectionChanged,
+		onSelectionChanged: handleDocOrSelectionChanged,
+	},
+);

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

@@ -9,108 +9,94 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 
 interface SafariDeleteCompositionTextIssueWorkaroundPluginState {
-  renderSpan: boolean;
-  decorations: DecorationSet;
+	renderSpan: boolean;
+	decorations: DecorationSet;
 }
 
 export const tableSafariDeleteCompositionTextIssueWorkaroundKey =
-  new PluginKey<SafariDeleteCompositionTextIssueWorkaroundPluginState>(
-    'tableSafariDeleteCompositionTextIssueWorkaround',
-  );
+	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;
-        }
+	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;
-        }
+				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;
-        },
-      },
-    },
-  });
+				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

@@ -2,11 +2,7 @@ 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),
-  );
+	createCommand({ name: 'UPDATE', state: rowState }, (tr) => tr.setMeta('addToHistory', false));
 
 export const removeStickyState = (pos: number) =>
-  createCommand({ name: 'REMOVE', pos }, (tr) =>
-    tr.setMeta('addToHistory', false),
-  );
+	createCommand({ name: 'REMOVE', pos }, (tr) => tr.setMeta('addToHistory', false));

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

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

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

@@ -3,53 +3,50 @@ 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 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;
-  },
+	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

@@ -5,8 +5,8 @@ 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,
-  });
+	return new SafePlugin({
+		state: createPluginState(dispatch, initialState),
+		key: pluginKey,
+	});
 };

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

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

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

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

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

@@ -2,10 +2,10 @@
  * A plugin is created for collecting payload data for tableOverflowChanged analytics event
  */
 import {
-  ACTION_SUBJECT,
-  EVENT_TYPE,
-  TABLE_ACTION,
-  TABLE_OVERFLOW_CHANGE_TRIGGER,
+	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';
@@ -13,90 +13,88 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 
 interface LastTrigger {
-  name: TABLE_OVERFLOW_CHANGE_TRIGGER;
+	name: TABLE_OVERFLOW_CHANGE_TRIGGER;
 }
 
 type TableAnalyticsPluginState = {
-  lastTrigger: LastTrigger | undefined;
+	lastTrigger: LastTrigger | undefined;
 };
 
-export const pluginKey = new PluginKey<TableAnalyticsPluginState>(
-  'tableOverflowAnalyticsPlugin',
-);
+export const pluginKey = new PluginKey<TableAnalyticsPluginState>('tableOverflowAnalyticsPlugin');
 
 export const META_KEYS = {
-  OVERFLOW_TRIGGER: 'tableOverflowTrigger',
-  OVERFLOW_STATE_CHANGED: 'tableOverflowStateChanged',
+	OVERFLOW_TRIGGER: 'tableOverflowTrigger',
+	OVERFLOW_STATE_CHANGED: 'tableOverflowStateChanged',
 };
 
 const createPlugin = (
-  dispatch: Dispatch,
-  dispatchAnalyticsEvent: DispatchAnalyticsEvent,
-  tableResizingEnabled: boolean,
+	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;
-        }
+	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;
-      let 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;
+				return pluginState;
+			},
+		},
+		appendTransaction: (transactions, oldState, newState) => {
+			const newPluginState = pluginKey.getState(newState);
+			let hasAnalyticsBeenDispatched = false;
+			let 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);
+			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,
-            },
-          });
+				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;
-        }
-      });
+					hasAnalyticsBeenDispatched = true;
+				}
+			});
 
-      if (hasAnalyticsBeenDispatched) {
-        const tr = newState.tr;
-        return tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {});
-      }
+			if (hasAnalyticsBeenDispatched) {
+				const tr = newState.tr;
+				return tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {});
+			}
 
-      return undefined;
-    },
-  });
+			return undefined;
+		},
+	});
 
 export { createPlugin };