@atlaskit/editor-plugin-table 7.16.10 → 7.16.12

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

@@ -11,10 +11,10 @@ import { getTableWidth } from '../../../utils';
 import { getLayoutSize } from '../utils/misc';
 import { reduceSpace } from '../utils/resize-logic';
 import {
-  adjustColumnsWidths,
-  getResizeState,
-  getTotalWidth,
-  updateColgroup,
+	adjustColumnsWidths,
+	getResizeState,
+	getTotalWidth,
+	updateColgroup,
 } from '../utils/resize-state';
 import type { ResizeState } from '../utils/types';
 
@@ -22,232 +22,227 @@ import { hasTableBeenResized, insertColgroupFromNode } from './colgroup';
 import { syncStickyRowToTable } from './dom';
 
 export interface ScaleOptions {
-  node: PMNode;
-  prevNode: PMNode;
-  start: number;
-  containerWidth?: number;
-  previousContainerWidth?: number;
-  parentWidth?: number;
-  layoutChanged?: boolean;
-  isFullWidthModeEnabled?: boolean;
-  isTableResizingEnabled?: boolean;
+	node: PMNode;
+	prevNode: PMNode;
+	start: number;
+	containerWidth?: number;
+	previousContainerWidth?: number;
+	parentWidth?: number;
+	layoutChanged?: boolean;
+	isFullWidthModeEnabled?: boolean;
+	isTableResizingEnabled?: boolean;
 }
 
 // Base function to trigger the actual scale on a table node.
 // Will only resize/scale if a table has been previously resized.
 export const scale = (
-  tableRef: HTMLTableElement,
-  options: ScaleOptions,
-  domAtPos: DomAtPos,
-  isTableScalingEnabledOnCurrentTable = false,
+	tableRef: HTMLTableElement,
+	options: ScaleOptions,
+	domAtPos: DomAtPos,
+	isTableScalingEnabledOnCurrentTable = false,
 ): ResizeState | undefined => {
-  const {
-    node,
-    containerWidth,
-    previousContainerWidth,
-    prevNode,
-    start,
-    layoutChanged,
-    isTableResizingEnabled,
-  } = options;
-
-  const maxSize = isTableResizingEnabled
-    ? getTableContainerWidth(node)
-    : getLayoutSize(node.attrs.layout, containerWidth, {});
-
-  const prevTableWidth = getTableWidth(prevNode);
-  const previousMaxSize = isTableResizingEnabled
-    ? getTableContainerWidth(node)
-    : getLayoutSize(prevNode.attrs.layout, previousContainerWidth, {});
-
-  let newWidth = maxSize;
-
-  // adjust table width if layout is updated
-  const hasOverflow = prevTableWidth > previousMaxSize;
-
-  if (layoutChanged && hasOverflow) {
-    // No keep overflow if the old content can be in the new size
-    const canFitInNewSize = prevTableWidth < maxSize;
-    if (canFitInNewSize) {
-      newWidth = maxSize;
-    } else {
-      // Keep the same scale.
-      const overflowScale = prevTableWidth / previousMaxSize;
-      newWidth = Math.floor(newWidth * overflowScale);
-    }
-  }
-
-  if (node.attrs.isNumberColumnEnabled) {
-    newWidth -= akEditorTableNumberColumnWidth;
-  }
-
-  const resizeState = getResizeState({
-    minWidth: tableCellMinWidth,
-    maxSize,
-    table: node,
-    tableRef,
-    start,
-    domAtPos,
-    isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
-  });
-
-  return scaleTableTo(resizeState, newWidth);
+	const {
+		node,
+		containerWidth,
+		previousContainerWidth,
+		prevNode,
+		start,
+		layoutChanged,
+		isTableResizingEnabled,
+	} = options;
+
+	const maxSize = isTableResizingEnabled
+		? getTableContainerWidth(node)
+		: getLayoutSize(node.attrs.layout, containerWidth, {});
+
+	const prevTableWidth = getTableWidth(prevNode);
+	const previousMaxSize = isTableResizingEnabled
+		? getTableContainerWidth(node)
+		: getLayoutSize(prevNode.attrs.layout, previousContainerWidth, {});
+
+	let newWidth = maxSize;
+
+	// adjust table width if layout is updated
+	const hasOverflow = prevTableWidth > previousMaxSize;
+
+	if (layoutChanged && hasOverflow) {
+		// No keep overflow if the old content can be in the new size
+		const canFitInNewSize = prevTableWidth < maxSize;
+		if (canFitInNewSize) {
+			newWidth = maxSize;
+		} else {
+			// Keep the same scale.
+			const overflowScale = prevTableWidth / previousMaxSize;
+			newWidth = Math.floor(newWidth * overflowScale);
+		}
+	}
+
+	if (node.attrs.isNumberColumnEnabled) {
+		newWidth -= akEditorTableNumberColumnWidth;
+	}
+
+	const resizeState = getResizeState({
+		minWidth: tableCellMinWidth,
+		maxSize,
+		table: node,
+		tableRef,
+		start,
+		domAtPos,
+		isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
+	});
+
+	return scaleTableTo(resizeState, newWidth);
 };
 
 export const scaleWithParent = (
-  tableRef: HTMLTableElement,
-  parentWidth: number,
-  table: PMNode,
-  start: number,
-  domAtPos: DomAtPos,
-  isTableScalingEnabledOnCurrentTable = false,
+	tableRef: HTMLTableElement,
+	parentWidth: number,
+	table: PMNode,
+	start: number,
+	domAtPos: DomAtPos,
+	isTableScalingEnabledOnCurrentTable = false,
 ) => {
-  const resizeState = getResizeState({
-    minWidth: tableCellMinWidth,
-    maxSize: parentWidth,
-    table,
-    tableRef,
-    start,
-    domAtPos,
-    isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
-  });
-
-  if (table.attrs.isNumberColumnEnabled) {
-    parentWidth -= akEditorTableNumberColumnWidth;
-  }
-
-  return scaleTableTo(resizeState, Math.floor(parentWidth));
+	const resizeState = getResizeState({
+		minWidth: tableCellMinWidth,
+		maxSize: parentWidth,
+		table,
+		tableRef,
+		start,
+		domAtPos,
+		isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
+	});
+
+	if (table.attrs.isNumberColumnEnabled) {
+		parentWidth -= akEditorTableNumberColumnWidth;
+	}
+
+	return scaleTableTo(resizeState, Math.floor(parentWidth));
 };
 
 // Scales the table to a given size and updates its colgroup DOM node
 export function scaleTableTo(state: ResizeState, maxSize: number): ResizeState {
-  const scaleFactor = maxSize / getTotalWidth(state);
-
-  let newState = {
-    ...state,
-    maxSize,
-    cols: state.cols.map((col) => {
-      const { minWidth, width } = col;
-      let newColWidth = Math.floor(width * scaleFactor);
-      if (newColWidth < minWidth) {
-        newColWidth = minWidth;
-      }
-      return { ...col, width: newColWidth };
-    }),
-  };
-
-  let newTotalWidth = getTotalWidth(newState);
-  if (newTotalWidth > maxSize) {
-    newState = reduceSpace(newState, newTotalWidth - maxSize);
-  }
-
-  return adjustColumnsWidths(newState, maxSize);
+	const scaleFactor = maxSize / getTotalWidth(state);
+
+	let newState = {
+		...state,
+		maxSize,
+		cols: state.cols.map((col) => {
+			const { minWidth, width } = col;
+			let newColWidth = Math.floor(width * scaleFactor);
+			if (newColWidth < minWidth) {
+				newColWidth = minWidth;
+			}
+			return { ...col, width: newColWidth };
+		}),
+	};
+
+	let newTotalWidth = getTotalWidth(newState);
+	if (newTotalWidth > maxSize) {
+		newState = reduceSpace(newState, newTotalWidth - maxSize);
+	}
+
+	return adjustColumnsWidths(newState, maxSize);
 }
 
 export const previewScaleTable = (
-  tableRef: HTMLTableElement | null | undefined,
-  options: ScaleOptions,
-  domAtPos: DomAtPos,
-  isTableScalingEnabled: boolean = false,
+	tableRef: HTMLTableElement | null | undefined,
+	options: ScaleOptions,
+	domAtPos: DomAtPos,
+	isTableScalingEnabled: boolean = false,
 ) => {
-  const { node, start, parentWidth } = options;
-
-  if (!tableRef) {
-    return;
-  }
-
-  if (parentWidth) {
-    const isNumberColumnEnabled = node.attrs.isNumberColumnEnabled;
-    const width = isNumberColumnEnabled
-      ? parentWidth - akEditorTableNumberColumnWidth
-      : parentWidth;
-    tableRef.style.width = `${width}px`;
-  }
-
-  let isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
-  if (
-    isTableScalingEnabled &&
-    getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')
-  ) {
-    isTableScalingEnabledOnCurrentTable =
-      isTableScalingEnabled && node.attrs.displayMode !== 'fixed';
-  }
-  // If the table hasn't been resize, the colgroup 48px width values will gracefully scale down.
-  // If we are scaling the table down with isTableScalingEnabled, the colgroup widths may be scaled to a value that is not 48px.
-  if (!hasTableBeenResized(node) && !isTableScalingEnabledOnCurrentTable) {
-    syncStickyRowToTable(tableRef);
-    return;
-  }
-
-  const resizeState = parentWidth
-    ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos, false) // Here last value is isTableScalingEnabled = false
-    : scale(tableRef, options, domAtPos, false);
-
-  if (resizeState) {
-    updateColgroup(resizeState, tableRef, node, false);
-  }
+	const { node, start, parentWidth } = options;
+
+	if (!tableRef) {
+		return;
+	}
+
+	if (parentWidth) {
+		const isNumberColumnEnabled = node.attrs.isNumberColumnEnabled;
+		const width = isNumberColumnEnabled
+			? parentWidth - akEditorTableNumberColumnWidth
+			: parentWidth;
+		tableRef.style.width = `${width}px`;
+	}
+
+	let isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
+	if (
+		isTableScalingEnabled &&
+		getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')
+	) {
+		isTableScalingEnabledOnCurrentTable =
+			isTableScalingEnabled && node.attrs.displayMode !== 'fixed';
+	}
+	// If the table hasn't been resize, the colgroup 48px width values will gracefully scale down.
+	// If we are scaling the table down with isTableScalingEnabled, the colgroup widths may be scaled to a value that is not 48px.
+	if (!hasTableBeenResized(node) && !isTableScalingEnabledOnCurrentTable) {
+		syncStickyRowToTable(tableRef);
+		return;
+	}
+
+	const resizeState = parentWidth
+		? scaleWithParent(tableRef, parentWidth, node, start, domAtPos, false) // Here last value is isTableScalingEnabled = false
+		: scale(tableRef, options, domAtPos, false);
+
+	if (resizeState) {
+		updateColgroup(resizeState, tableRef, node, false);
+	}
 };
 
 // Scale the table to meet new requirements (col, layout change etc)
 export const scaleTable =
-  (
-    tableRef: HTMLTableElement | null | undefined,
-    options: ScaleOptions,
-    domAtPos: DomAtPos,
-    isTableScalingEnabledOnCurrentTable = false,
-  ) =>
-  (tr: Transaction) => {
-    if (!tableRef) {
-      return tr;
-    }
-
-    const { node, start, parentWidth, layoutChanged } = options;
-    // If a table has not been resized yet, columns should be auto.
-    if (hasTableBeenResized(node) === false) {
-      // If its not a re-sized table, we still want to re-create cols
-      // To force reflow of columns upon delete.
-      if (!isTableScalingEnabledOnCurrentTable) {
-        insertColgroupFromNode(tableRef, node);
-      }
-      tr.setMeta('scrollIntoView', false);
-      return tr;
-    }
-
-    let resizeState;
-    if (parentWidth) {
-      resizeState = scaleWithParent(
-        tableRef,
-        parentWidth,
-        node,
-        start,
-        domAtPos,
-        isTableScalingEnabledOnCurrentTable,
-      );
-    } else {
-      resizeState = scale(
-        tableRef,
-        options,
-        domAtPos,
-        isTableScalingEnabledOnCurrentTable,
-      );
-    }
-
-    if (resizeState) {
-      tr = updateColumnWidths(resizeState, node, start)(tr);
-
-      if (tr.docChanged) {
-        tr.setMeta('scrollIntoView', false);
-        // TODO: ED-8995
-        // We need to do this check to reduce the number of race conditions when working with tables.
-        // This metadata is been used in the sendTransaction function in the Collab plugin
-        /* Added !layoutChanged check here to solve unnecessary scroll bar after publish when click on breakout button multiple times and publish
+	(
+		tableRef: HTMLTableElement | null | undefined,
+		options: ScaleOptions,
+		domAtPos: DomAtPos,
+		isTableScalingEnabledOnCurrentTable = false,
+	) =>
+	(tr: Transaction) => {
+		if (!tableRef) {
+			return tr;
+		}
+
+		const { node, start, parentWidth, layoutChanged } = options;
+		// If a table has not been resized yet, columns should be auto.
+		if (hasTableBeenResized(node) === false) {
+			// If its not a re-sized table, we still want to re-create cols
+			// To force reflow of columns upon delete.
+			if (!isTableScalingEnabledOnCurrentTable) {
+				insertColgroupFromNode(tableRef, node);
+			}
+			tr.setMeta('scrollIntoView', false);
+			return tr;
+		}
+
+		let resizeState;
+		if (parentWidth) {
+			resizeState = scaleWithParent(
+				tableRef,
+				parentWidth,
+				node,
+				start,
+				domAtPos,
+				isTableScalingEnabledOnCurrentTable,
+			);
+		} else {
+			resizeState = scale(tableRef, options, domAtPos, isTableScalingEnabledOnCurrentTable);
+		}
+
+		if (resizeState) {
+			tr = updateColumnWidths(resizeState, node, start)(tr);
+
+			if (tr.docChanged) {
+				tr.setMeta('scrollIntoView', false);
+				// TODO: ED-8995
+				// We need to do this check to reduce the number of race conditions when working with tables.
+				// This metadata is been used in the sendTransaction function in the Collab plugin
+				/* Added !layoutChanged check here to solve unnecessary scroll bar after publish when click on breakout button multiple times and publish
            scaleTable is only called once every time a breakout button is clicked, so it is safe not to add the meta 'scaleTable' to the tr.
            Leaving the tr.setMeta('scaleTable', true) here for race conditions that we aren't aware of.
          */
-        !layoutChanged && tr.setMeta('scaleTable', true);
-        return tr;
-      }
-    }
+				!layoutChanged && tr.setMeta('scaleTable', true);
+				return tr;
+			}
+		}
 
-    return tr;
-  };
+		return tr;
+	};

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

@@ -3,23 +3,23 @@ import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 import type { ColumnState } from './column-state';
 
 export interface ResizeState {
-  cols: ColumnState[];
-  widths: number[];
-  maxSize: number;
-  overflow: boolean;
-  tableWidth: number;
-  isScaled?: boolean;
+	cols: ColumnState[];
+	widths: number[];
+	maxSize: number;
+	overflow: boolean;
+	tableWidth: number;
+	isScaled?: boolean;
 }
 export interface ResizeStateWithAnalytics {
-  resizeState: ResizeState;
-  table: ContentNodeWithPos;
-  changed: boolean;
-  attributes: {
-    position: number;
-    count: number;
-    totalRowCount: number;
-    totalColumnCount: number;
-    widthsBefore: number[];
-    widthsAfter: number[];
-  };
+	resizeState: ResizeState;
+	table: ContentNodeWithPos;
+	changed: boolean;
+	attributes: {
+		position: number;
+		count: number;
+		totalRowCount: number;
+		totalColumnCount: number;
+		widthsBefore: number[];
+		widthsAfter: number[];
+	};
 }

package/src/pm-plugins/table-resizing/utils/unit-to-number.ts

@@ -1,2 +1 @@
-export const unitToNumber = (unit: string | null): number =>
-  unit ? parseInt(unit, 10) : 0;
+export const unitToNumber = (unit: string | null): number => (unit ? parseInt(unit, 10) : 0);

package/src/pm-plugins/table-selection-keymap.ts

@@ -1,12 +1,12 @@
 import {
-  bindKeymapArrayWithCommand,
-  bindKeymapWithCommand,
-  moveLeft,
-  moveRight,
-  selectColumn,
-  selectRow,
-  selectTable,
-  shiftArrowUp,
+	bindKeymapArrayWithCommand,
+	bindKeymapWithCommand,
+	moveLeft,
+	moveRight,
+	selectColumn,
+	selectRow,
+	selectTable,
+	shiftArrowUp,
 } from '@atlaskit/editor-common/keymaps';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
@@ -14,61 +14,35 @@ import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import {
-  arrowLeftFromTable,
-  arrowRightFromTable,
-  modASelectTable,
-  selectColumns,
-  selectRows,
-  shiftArrowUpFromTable,
+	arrowLeftFromTable,
+	arrowRightFromTable,
+	modASelectTable,
+	selectColumns,
+	selectRows,
+	shiftArrowUpFromTable,
 } from '../commands/selection';
 import type tablePlugin from '../plugin';
 
 export function tableSelectionKeymapPlugin(
-  editorSelectionAPI:
-    | ExtractInjectionAPI<typeof tablePlugin>['selection']
-    | undefined,
+	editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined,
 ): SafePlugin {
-  const list = {};
+	const list = {};
 
-  bindKeymapWithCommand(
-    moveRight.common!,
-    arrowRightFromTable(editorSelectionAPI)(),
-    list,
-  );
+	bindKeymapWithCommand(moveRight.common!, arrowRightFromTable(editorSelectionAPI)(), list);
 
-  bindKeymapWithCommand(
-    moveLeft.common!,
-    arrowLeftFromTable(editorSelectionAPI)(),
-    list,
-  );
+	bindKeymapWithCommand(moveLeft.common!, arrowLeftFromTable(editorSelectionAPI)(), list);
 
-  bindKeymapArrayWithCommand(
-    selectColumn,
-    selectColumns(editorSelectionAPI)(true),
-    list,
-  );
+	bindKeymapArrayWithCommand(selectColumn, selectColumns(editorSelectionAPI)(true), list);
 
-  bindKeymapArrayWithCommand(
-    selectRow,
-    selectRows(editorSelectionAPI)(true),
-    list,
-  );
+	bindKeymapArrayWithCommand(selectRow, selectRows(editorSelectionAPI)(true), list);
 
-  bindKeymapWithCommand(
-    shiftArrowUp.common!,
-    shiftArrowUpFromTable(editorSelectionAPI)(),
-    list,
-  );
+	bindKeymapWithCommand(shiftArrowUp.common!, shiftArrowUpFromTable(editorSelectionAPI)(), list);
 
-  if (getBooleanFF('platform.editor.table.cmd-a-select-table')) {
-    bindKeymapWithCommand(
-      selectTable.common!,
-      modASelectTable(editorSelectionAPI)(),
-      list,
-    );
-  }
+	if (getBooleanFF('platform.editor.table.cmd-a-select-table')) {
+		bindKeymapWithCommand(selectTable.common!, modASelectTable(editorSelectionAPI)(), list);
+	}
 
-  return keymap(list) as SafePlugin;
+	return keymap(list) as SafePlugin;
 }
 
 export default tableSelectionKeymapPlugin;