@atlaskit/editor-plugin-table 7.16.10 → 7.16.12

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

@@ -8,20 +8,20 @@ import { pluginKey } from './plugin-key';
 import reducer from './reducer';
 
 function mapping(
-  tr: ReadonlyTransaction,
-  pluginState: ColumnResizingPluginState,
+	tr: ReadonlyTransaction,
+	pluginState: ColumnResizingPluginState,
 ): ColumnResizingPluginState {
-  if (pluginState && pluginState.resizeHandlePos !== null) {
-    return {
-      ...pluginState,
-      resizeHandlePos: tr.mapping.map(pluginState.resizeHandlePos),
-    };
-  }
-  return pluginState;
+	if (pluginState && pluginState.resizeHandlePos !== null) {
+		return {
+			...pluginState,
+			resizeHandlePos: tr.mapping.map(pluginState.resizeHandlePos),
+		};
+	}
+	return pluginState;
 }
 
 const factory = pluginFactory(pluginKey, reducer, {
-  mapping,
+	mapping,
 });
 
 export const createCommand = factory.createCommand;

package/src/pm-plugins/table-resizing/plugin-key.ts

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

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

@@ -3,10 +3,7 @@ import classnames from 'classnames';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import type {
-  GetEditorContainerWidth,
-  GetEditorFeatureFlags,
-} from '@atlaskit/editor-common/types';
+import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { TableCssClassName as ClassName } from '../../types';
@@ -20,78 +17,74 @@ import { pluginKey } from './plugin-key';
 import { getResizeCellPos } from './utils';
 
 export function createPlugin(
-  dispatch: Dispatch<ColumnResizingPluginState>,
-  { lastColumnResizable = true }: ColumnResizingPluginState,
-  getEditorContainerWidth: GetEditorContainerWidth,
-  getEditorFeatureFlags: GetEditorFeatureFlags,
-  editorAnalyticsAPI?: EditorAnalyticsAPI,
-  isTableScalingEnabled?: boolean,
+	dispatch: Dispatch<ColumnResizingPluginState>,
+	{ lastColumnResizable = true }: ColumnResizingPluginState,
+	getEditorContainerWidth: GetEditorContainerWidth,
+	getEditorFeatureFlags: GetEditorFeatureFlags,
+	editorAnalyticsAPI?: EditorAnalyticsAPI,
+	isTableScalingEnabled?: boolean,
 ) {
-  return new SafePlugin({
-    key: pluginKey,
-    state: createPluginState(dispatch, {
-      lastColumnResizable,
-      resizeHandlePos: null,
-      dragging: null,
-      lastClick: null,
-    }),
+	return new SafePlugin({
+		key: pluginKey,
+		state: createPluginState(dispatch, {
+			lastColumnResizable,
+			resizeHandlePos: null,
+			dragging: null,
+			lastClick: null,
+		}),
 
-    props: {
-      attributes(state) {
-        const pluginState = getPluginState(state);
+		props: {
+			attributes(state) {
+				const pluginState = getPluginState(state);
 
-        return {
-          class: classnames(ClassName.RESIZING_PLUGIN, {
-            [ClassName.RESIZE_CURSOR]: pluginState.resizeHandlePos !== null,
-            [ClassName.IS_RESIZING]: !!pluginState.dragging,
-          }),
-        };
-      },
+				return {
+					class: classnames(ClassName.RESIZING_PLUGIN, {
+						[ClassName.RESIZE_CURSOR]: pluginState.resizeHandlePos !== null,
+						[ClassName.IS_RESIZING]: !!pluginState.dragging,
+					}),
+				};
+			},
 
-      handleDOMEvents: {
-        mousedown(view, event) {
-          const { state } = view;
-          const resizeHandlePos =
-            // we're setting `resizeHandlePos` via command in unit tests
-            getPluginState(state).resizeHandlePos ||
-            getResizeCellPos(view, event as MouseEvent);
+			handleDOMEvents: {
+				mousedown(view, event) {
+					const { state } = view;
+					const resizeHandlePos =
+						// we're setting `resizeHandlePos` via command in unit tests
+						getPluginState(state).resizeHandlePos || getResizeCellPos(view, event as MouseEvent);
 
-          const { dragging } = getPluginState(state);
-          let isColumnKeyboardResizeStarted = false;
-          if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-            /*
+					const { dragging } = getPluginState(state);
+					let isColumnKeyboardResizeStarted = false;
+					if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+						/*
               We need to start listening mouse events if column resize started from keyboard.
               This will allow continue resizing via mouse
             */
-            const { isKeyboardResize } = getTablePluginState(state);
-            if (isKeyboardResize) {
-              isColumnKeyboardResizeStarted = isKeyboardResize;
-            }
-          }
+						const { isKeyboardResize } = getTablePluginState(state);
+						if (isKeyboardResize) {
+							isColumnKeyboardResizeStarted = isKeyboardResize;
+						}
+					}
 
-          if (
-            resizeHandlePos !== null &&
-            (!dragging || isColumnKeyboardResizeStarted)
-          ) {
-            if (
-              handleMouseDown(
-                view,
-                event as MouseEvent,
-                resizeHandlePos,
-                getEditorContainerWidth,
-                getEditorFeatureFlags,
-                isTableScalingEnabled || false,
-                editorAnalyticsAPI,
-              )
-            ) {
-              const { state, dispatch } = view;
-              return setResizeHandlePos(resizeHandlePos)(state, dispatch);
-            }
-          }
+					if (resizeHandlePos !== null && (!dragging || isColumnKeyboardResizeStarted)) {
+						if (
+							handleMouseDown(
+								view,
+								event as MouseEvent,
+								resizeHandlePos,
+								getEditorContainerWidth,
+								getEditorFeatureFlags,
+								isTableScalingEnabled || false,
+								editorAnalyticsAPI,
+							)
+						) {
+							const { state, dispatch } = view;
+							return setResizeHandlePos(resizeHandlePos)(state, dispatch);
+						}
+					}
 
-          return false;
-        },
-      },
-    },
-  });
+					return false;
+				},
+			},
+		},
+	});
 }

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

@@ -1,40 +1,37 @@
-import type {
-  ColumnResizingPluginAction,
-  ColumnResizingPluginState,
-} from '../../types';
+import type { ColumnResizingPluginAction, ColumnResizingPluginState } from '../../types';
 
 export default (
-  pluginState: ColumnResizingPluginState,
-  action: ColumnResizingPluginAction,
+	pluginState: ColumnResizingPluginState,
+	action: ColumnResizingPluginAction,
 ): ColumnResizingPluginState => {
-  switch (action.type) {
-    case 'STOP_RESIZING':
-      return {
-        ...pluginState,
-        resizeHandlePos: null,
-        dragging: null,
-      };
+	switch (action.type) {
+		case 'STOP_RESIZING':
+			return {
+				...pluginState,
+				resizeHandlePos: null,
+				dragging: null,
+			};
 
-    case 'SET_RESIZE_HANDLE_POSITION':
-      return {
-        ...pluginState,
-        resizeHandlePos: action.data.resizeHandlePos,
-      };
+		case 'SET_RESIZE_HANDLE_POSITION':
+			return {
+				...pluginState,
+				resizeHandlePos: action.data.resizeHandlePos,
+			};
 
-    case 'SET_DRAGGING':
-      return {
-        ...pluginState,
-        dragging: action.data.dragging,
-      };
+		case 'SET_DRAGGING':
+			return {
+				...pluginState,
+				dragging: action.data.dragging,
+			};
 
-    case 'SET_LAST_CLICK':
-      const { lastClick } = action.data;
-      return {
-        ...pluginState,
-        lastClick,
-        resizeHandlePos: lastClick ? pluginState.resizeHandlePos : null,
-      };
-    default:
-      return pluginState;
-  }
+		case 'SET_LAST_CLICK':
+			const { lastClick } = action.data;
+			return {
+				...pluginState,
+				lastClick,
+				resizeHandlePos: lastClick ? pluginState.resizeHandlePos : null,
+			};
+		default:
+			return pluginState;
+	}
 };

package/src/pm-plugins/table-resizing/utils/colgroup.ts

@@ -15,85 +15,85 @@ type Col = Array<string | { [name: string]: string }>;
  * overflow.
  */
 export const getColWidthFix = (colwidth: number, tableColumnCount: number) =>
-  colwidth - 1 / tableColumnCount;
+	colwidth - 1 / tableColumnCount;
 
 export const generateColgroup = (table: PmNode, tableRef?: HTMLElement) => {
-  const cols: Col[] = [];
+	const cols: Col[] = [];
 
-  const map = TableMap.get(table);
-  table.content.firstChild!.content.forEach((cell) => {
-    const colspan = cell.attrs.colspan || 1;
-    if (Array.isArray(cell.attrs.colwidth)) {
-      // We slice here to guard against our colwidth array having more entries
-      // Than the we actually span. We'll patch the document at a later point.
-      if (tableRef) {
-        const scalePercent = getTableScalingPercent(table, tableRef);
-        cell.attrs.colwidth.slice(0, colspan).forEach((width) => {
-          const fixedColWidth = getColWidthFix(width, map.width);
-          const scaledWidth = fixedColWidth * scalePercent;
-          const finalWidth = Math.max(scaledWidth, tableCellMinWidth);
-          cols.push([
-            'col',
-            {
-              style: `width: ${finalWidth}px;`,
-            },
-          ]);
-        });
-      } else {
-        cell.attrs.colwidth.slice(0, colspan).forEach((width) => {
-          cols.push([
-            'col',
-            {
-              style: `width: ${getColWidthFix(
-                width ? Math.max(width, tableCellMinWidth) : tableCellMinWidth,
-                map.width,
-              )}px;`,
-            },
-          ]);
-        });
-      }
-    } else {
-      // When we have merged cells on the first row (firstChild),
-      // We want to ensure we're creating the appropriate amount of
-      // cols the table still has.
-      cols.push(
-        ...Array.from({ length: colspan }, (_) => [
-          'col',
-          { style: `width: ${tableCellMinWidth}px;` },
-        ]),
-      );
-    }
-  });
+	const map = TableMap.get(table);
+	table.content.firstChild!.content.forEach((cell) => {
+		const colspan = cell.attrs.colspan || 1;
+		if (Array.isArray(cell.attrs.colwidth)) {
+			// We slice here to guard against our colwidth array having more entries
+			// Than the we actually span. We'll patch the document at a later point.
+			if (tableRef) {
+				const scalePercent = getTableScalingPercent(table, tableRef);
+				cell.attrs.colwidth.slice(0, colspan).forEach((width) => {
+					const fixedColWidth = getColWidthFix(width, map.width);
+					const scaledWidth = fixedColWidth * scalePercent;
+					const finalWidth = Math.max(scaledWidth, tableCellMinWidth);
+					cols.push([
+						'col',
+						{
+							style: `width: ${finalWidth}px;`,
+						},
+					]);
+				});
+			} else {
+				cell.attrs.colwidth.slice(0, colspan).forEach((width) => {
+					cols.push([
+						'col',
+						{
+							style: `width: ${getColWidthFix(
+								width ? Math.max(width, tableCellMinWidth) : tableCellMinWidth,
+								map.width,
+							)}px;`,
+						},
+					]);
+				});
+			}
+		} else {
+			// When we have merged cells on the first row (firstChild),
+			// We want to ensure we're creating the appropriate amount of
+			// cols the table still has.
+			cols.push(
+				...Array.from({ length: colspan }, (_) => [
+					'col',
+					{ style: `width: ${tableCellMinWidth}px;` },
+				]),
+			);
+		}
+	});
 
-  return cols;
+	return cols;
 };
 
 export const insertColgroupFromNode = (
-  tableRef: HTMLTableElement | null,
-  table: PmNode,
-  isTableScalingEnabled = false,
-  shouldRemove = true,
+	tableRef: HTMLTableElement | null,
+	table: PmNode,
+	isTableScalingEnabled = false,
+	shouldRemove = true,
 ): HTMLCollection => {
-  let colgroup = tableRef?.querySelector('colgroup') as HTMLElement;
-  if (colgroup && shouldRemove) {
-    tableRef?.removeChild(colgroup);
-  }
+	let colgroup = tableRef?.querySelector('colgroup') as HTMLElement;
+	if (colgroup && shouldRemove) {
+		tableRef?.removeChild(colgroup);
+	}
 
-  colgroup = renderColgroupFromNode(
-    table,
-    isTableScalingEnabled ? tableRef ?? undefined : undefined,
-  );
-  if (shouldRemove) {
-    tableRef?.insertBefore(colgroup, tableRef?.firstChild);
-  }
+	colgroup = renderColgroupFromNode(
+		table,
+		isTableScalingEnabled ? tableRef ?? undefined : undefined,
+	);
+	if (shouldRemove) {
+		tableRef?.insertBefore(colgroup, tableRef?.firstChild);
+	}
 
-  return colgroup.children;
+	return colgroup.children;
 };
 
 export const hasTableBeenResized = (table: PmNode) => {
-  return !!getFragmentBackingArray(table.content.firstChild!.content).find(
-    (cell) => cell.attrs.colwidth,
-  );
+	return !!getFragmentBackingArray(table.content.firstChild!.content).find(
+		(cell) => cell.attrs.colwidth,
+	);
 };
 
 /**
@@ -103,31 +103,31 @@ export const hasTableBeenResized = (table: PmNode) => {
  * @returns true if all column width is equal to tableCellMinWidth or null, false otherwise
  */
 export const isMinCellWidthTable = (table: PmNode) => {
-  const cellArray = getFragmentBackingArray(table.content.firstChild!.content);
-  const isTableMinCellWidth = cellArray.every((cell) => {
-    return (
-      (cell.attrs.colwidth && cell.attrs.colwidth[0] === tableCellMinWidth) ||
-      cell.attrs.colwidth === null
-    );
-  });
+	const cellArray = getFragmentBackingArray(table.content.firstChild!.content);
+	const isTableMinCellWidth = cellArray.every((cell) => {
+		return (
+			(cell.attrs.colwidth && cell.attrs.colwidth[0] === tableCellMinWidth) ||
+			cell.attrs.colwidth === null
+		);
+	});
 
-  return isTableMinCellWidth;
+	return isTableMinCellWidth;
 };
 
 function renderColgroupFromNode(
-  table: PmNode,
-  maybeTableRef: HTMLElement | undefined,
+	table: PmNode,
+	maybeTableRef: HTMLElement | undefined,
 ): HTMLElement {
-  const rendered = DOMSerializer.renderSpec(document, [
-    'colgroup',
-    {},
-    ...generateColgroup(table, maybeTableRef),
-  ]);
+	const rendered = DOMSerializer.renderSpec(document, [
+		'colgroup',
+		{},
+		...generateColgroup(table, maybeTableRef),
+	]);
 
-  return rendered.dom as HTMLElement;
+	return rendered.dom as HTMLElement;
 }
 
 export const getColgroupChildrenLength = (table: PmNode): number => {
-  const map = TableMap.get(table);
-  return map.width;
+	const map = TableMap.get(table);
+	return map.width;
 };

package/src/pm-plugins/table-resizing/utils/column-state.ts

@@ -7,115 +7,112 @@ import { contentWidth } from './content-width';
 import { unitToNumber } from './unit-to-number';
 
 export interface ColumnState {
-  index: number;
-  width: number;
-  minWidth: number;
+	index: number;
+	width: number;
+	minWidth: number;
 }
 
 // Reads `width` and `minWidth` of each column from DOM and returns `ColumnState` containing those values
 export const getColumnStateFromDOM = (
-  cells: HTMLElement[],
-  index: number,
-  minWidth: number,
+	cells: HTMLElement[],
+	index: number,
+	minWidth: number,
 ): ColumnState => {
-  const width = calculateColumnWidth(cells, calculateColumnWidthCallback);
-
-  const minColumnWidth =
-    width < minWidth
-      ? // for newly created column (where width < minWidth) we set minWidth = tableNewColumnMinWidth (140px atm)
-        tableNewColumnMinWidth
-      : calculateColumnWidth(cells, calculateColumnMinWidthCallback(minWidth));
-
-  return {
-    index,
-    width: width < minWidth ? tableNewColumnMinWidth : width,
-    minWidth: minColumnWidth,
-  };
+	const width = calculateColumnWidth(cells, calculateColumnWidthCallback);
+
+	const minColumnWidth =
+		width < minWidth
+			? // for newly created column (where width < minWidth) we set minWidth = tableNewColumnMinWidth (140px atm)
+				tableNewColumnMinWidth
+			: calculateColumnWidth(cells, calculateColumnMinWidthCallback(minWidth));
+
+	return {
+		index,
+		width: width < minWidth ? tableNewColumnMinWidth : width,
+		minWidth: minColumnWidth,
+	};
 };
 
 export const getFreeSpace = (state: ColumnState) => {
-  return Math.max(state.width - state.minWidth, 0);
+	return Math.max(state.width - state.minWidth, 0);
 };
 
 // Returns DOM refs of all cells in a column by `columnIndex`
 export const getCellsRefsInColumn = (
-  columnIndex: number,
-  table: PMNode,
-  tableStart: number,
-  domAtPos: (pos: number) => { node: Node; offset: number },
+	columnIndex: number,
+	table: PMNode,
+	tableStart: number,
+	domAtPos: (pos: number) => { node: Node; offset: number },
 ): HTMLElement[] => {
-  const map = TableMap.get(table);
-  const cellsPositions = map.cellsInRect({
-    left: columnIndex,
-    right: columnIndex + 1,
-    top: 0,
-    bottom: map.height,
-  });
-  const cells: HTMLElement[] = [];
-  cellsPositions.forEach((pos) => {
-    const col = findDomRefAtPos(pos + tableStart, domAtPos) as HTMLElement;
-    if (col) {
-      cells.push(col);
-    }
-  });
-  return cells;
+	const map = TableMap.get(table);
+	const cellsPositions = map.cellsInRect({
+		left: columnIndex,
+		right: columnIndex + 1,
+		top: 0,
+		bottom: map.height,
+	});
+	const cells: HTMLElement[] = [];
+	cellsPositions.forEach((pos) => {
+		const col = findDomRefAtPos(pos + tableStart, domAtPos) as HTMLElement;
+		if (col) {
+			cells.push(col);
+		}
+	});
+	return cells;
 };
 
 // calculates column widths based on `cells` DOM refs
 export const calculateColumnWidth = (
-  cells: HTMLElement[],
-  calculateColumnWidthCb: (
-    css: CSSStyleDeclaration,
-    cellRef: HTMLElement,
-    colSpan: number,
-  ) => number,
+	cells: HTMLElement[],
+	calculateColumnWidthCb: (
+		css: CSSStyleDeclaration,
+		cellRef: HTMLElement,
+		colSpan: number,
+	) => number,
 ): number => {
-  let maxColWidth = 0;
-  let colSpanWidth = 0;
+	let maxColWidth = 0;
+	let colSpanWidth = 0;
 
-  cells.forEach((cellRef) => {
-    const css = getComputedStyle(cellRef);
-    const colspan = Number(cellRef.getAttribute('colspan') || 1);
+	cells.forEach((cellRef) => {
+		const css = getComputedStyle(cellRef);
+		const colspan = Number(cellRef.getAttribute('colspan') || 1);
 
-    if (colspan > 1) {
-      colSpanWidth = calculateColumnWidthCb(css, cellRef, colspan);
-      return;
-    }
+		if (colspan > 1) {
+			colSpanWidth = calculateColumnWidthCb(css, cellRef, colspan);
+			return;
+		}
 
-    if (css) {
-      const colWidth = calculateColumnWidthCb(css, cellRef, colspan);
-      maxColWidth = Math.max(colWidth, maxColWidth);
-    }
-  });
+		if (css) {
+			const colWidth = calculateColumnWidthCb(css, cellRef, colspan);
+			maxColWidth = Math.max(colWidth, maxColWidth);
+		}
+	});
 
-  return maxColWidth || colSpanWidth;
+	return maxColWidth || colSpanWidth;
 };
 
-export const addContainerLeftRightPadding = (
-  amount: number,
-  css: CSSStyleDeclaration,
-): number =>
-  amount + unitToNumber(css.paddingLeft) + unitToNumber(css.paddingRight);
+export const addContainerLeftRightPadding = (amount: number, css: CSSStyleDeclaration): number =>
+	amount + unitToNumber(css.paddingLeft) + unitToNumber(css.paddingRight);
 
 function calculateColumnWidthCallback(css: CSSStyleDeclaration): number {
-  return unitToNumber(css.width);
+	return unitToNumber(css.width);
 }
 
 function calculateColumnMinWidthCallback(
-  minColumnWidth: number,
+	minColumnWidth: number,
 ): (css: CSSStyleDeclaration, cellRef: HTMLElement, colSpan: number) => number {
-  return (css, cellRef, colSpan) => {
-    if (colSpan && colSpan > 1) {
-      return unitToNumber(css.width);
-    }
-
-    const { minWidth: minContentWidth } = contentWidth(cellRef, cellRef);
-    // Override the min width, if there is content that can't collapse
-    // Past a certain width.
-    return Math.max(
-      addContainerLeftRightPadding(minContentWidth, css),
-      minContentWidth,
-      minColumnWidth,
-    );
-  };
+	return (css, cellRef, colSpan) => {
+		if (colSpan && colSpan > 1) {
+			return unitToNumber(css.width);
+		}
+
+		const { minWidth: minContentWidth } = contentWidth(cellRef, cellRef);
+		// Override the min width, if there is content that can't collapse
+		// Past a certain width.
+		return Math.max(
+			addContainerLeftRightPadding(minContentWidth, css),
+			minContentWidth,
+			minColumnWidth,
+		);
+	};
 }