@atlaskit/editor-plugin-table 7.16.11 → 7.16.13

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

@@ -1,30 +1,20 @@
 import type { CellAttributes } from '@atlaskit/adf-schema';
 import {
-  getParentNodeWidth,
-  getTableContainerWidth,
-  layoutToWidth,
+	getParentNodeWidth,
+	getTableContainerWidth,
+	layoutToWidth,
 } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
-import {
-  getBreakpoint,
-  mapBreakpointToLayoutMaxWidth,
-} from '@atlaskit/editor-common/ui';
-import {
-  calcTableColumnWidths,
-  containsClassName,
-} from '@atlaskit/editor-common/utils';
-import type {
-  NodeSpec,
-  Node as PMNode,
-  ResolvedPos,
-} from '@atlaskit/editor-prosemirror/model';
+import { getBreakpoint, mapBreakpointToLayoutMaxWidth } from '@atlaskit/editor-common/ui';
+import { calcTableColumnWidths, containsClassName } from '@atlaskit/editor-common/utils';
+import type { NodeSpec, Node as PMNode, ResolvedPos } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import {
-  akEditorFullWidthLayoutWidth,
-  akEditorGutterPadding,
-  akEditorTableNumberColumnWidth,
+	akEditorFullWidthLayoutWidth,
+	akEditorGutterPadding,
+	akEditorTableNumberColumnWidth,
 } from '@atlaskit/editor-shared-styles';
 
 import type { TableOptions } from '../../../nodeviews/types';
@@ -34,108 +24,99 @@ import { MAX_SCALING_PERCENT } from './consts';
 
 // Translates named layouts in number values.
 export function getLayoutSize(
-  tableLayout: 'default' | 'wide' | 'full-width',
-  containerWidth: number = 0,
-  options: TableOptions,
+	tableLayout: 'default' | 'wide' | 'full-width',
+	containerWidth: number = 0,
+	options: TableOptions,
 ): number {
-  const { isFullWidthModeEnabled } = options;
-
-  if (isFullWidthModeEnabled) {
-    return containerWidth
-      ? Math.min(
-          containerWidth - akEditorGutterPadding * 2,
-          akEditorFullWidthLayoutWidth,
-        )
-      : akEditorFullWidthLayoutWidth;
-  }
-
-  const calculatedTableWidth = calcTableWidth(
-    tableLayout,
-    containerWidth,
-    true,
-  );
-  if (calculatedTableWidth !== 'inherit') {
-    return calculatedTableWidth;
-  }
-
-  return layoutToWidth[tableLayout] || containerWidth;
+	const { isFullWidthModeEnabled } = options;
+
+	if (isFullWidthModeEnabled) {
+		return containerWidth
+			? Math.min(containerWidth - akEditorGutterPadding * 2, akEditorFullWidthLayoutWidth)
+			: akEditorFullWidthLayoutWidth;
+	}
+
+	const calculatedTableWidth = calcTableWidth(tableLayout, containerWidth, true);
+	if (calculatedTableWidth !== 'inherit') {
+		return calculatedTableWidth;
+	}
+
+	return layoutToWidth[tableLayout] || containerWidth;
 }
 
 export function getDefaultLayoutMaxWidth(containerWidth?: number): number {
-  return mapBreakpointToLayoutMaxWidth(getBreakpoint(containerWidth));
+	return mapBreakpointToLayoutMaxWidth(getBreakpoint(containerWidth));
 }
 
 // Does the current position point at a cell.
 export function pointsAtCell($pos: ResolvedPos) {
-  return (
-    ($pos.parent.type.spec as NodeSpec & { tableRole: string }).tableRole ===
-      'row' && $pos.nodeAfter
-  );
+	return (
+		($pos.parent.type.spec as NodeSpec & { tableRole: string }).tableRole === 'row' &&
+		$pos.nodeAfter
+	);
 }
 
 // Get the current col width, handles colspan.
 export function currentColWidth(
-  view: EditorView,
-  cellPos: number,
-  { colspan, colwidth }: CellAttributes,
+	view: EditorView,
+	cellPos: number,
+	{ colspan, colwidth }: CellAttributes,
 ): number {
-  let width = colwidth && colwidth[colwidth.length - 1];
-  if (width) {
-    return width;
-  }
-  // Not fixed, read current width from DOM
-  let domWidth = (view.domAtPos(cellPos + 1).node as HTMLElement).offsetWidth;
-  let parts = colspan || 0;
-  if (colwidth) {
-    for (let i = 0; i < (colspan || 0); i++) {
-      if (colwidth[i]) {
-        domWidth -= colwidth[i];
-        parts--;
-      }
-    }
-  }
-
-  return domWidth / parts;
+	let width = colwidth && colwidth[colwidth.length - 1];
+	if (width) {
+		return width;
+	}
+	// Not fixed, read current width from DOM
+	let domWidth = (view.domAtPos(cellPos + 1).node as HTMLElement).offsetWidth;
+	let parts = colspan || 0;
+	if (colwidth) {
+		for (let i = 0; i < (colspan || 0); i++) {
+			if (colwidth[i]) {
+				domWidth -= colwidth[i];
+				parts--;
+			}
+		}
+	}
+
+	return domWidth / parts;
 }
 
 // Attempts to find a parent TD/TH depending on target element.
 export function domCellAround(target: HTMLElement | null): HTMLElement | null {
-  while (target && target.nodeName !== 'TD' && target.nodeName !== 'TH') {
-    target = containsClassName(target, 'ProseMirror')
-      ? null
-      : (target.parentNode as HTMLElement | null);
-  }
-  return target;
+	while (target && target.nodeName !== 'TD' && target.nodeName !== 'TH') {
+		target = containsClassName(target, 'ProseMirror')
+			? null
+			: (target.parentNode as HTMLElement | null);
+	}
+	return target;
 }
 
 interface getTableMaxWidthProps {
-  table: PMNode;
-  tableStart: number;
-  state: EditorState;
-  layout: 'default' | 'wide' | 'full-width';
-  getEditorContainerWidth: GetEditorContainerWidth;
+	table: PMNode;
+	tableStart: number;
+	state: EditorState;
+	layout: 'default' | 'wide' | 'full-width';
+	getEditorContainerWidth: GetEditorContainerWidth;
 }
 
 export const getTableMaxWidth = ({
-  table,
-  tableStart,
-  state,
-  layout,
-  getEditorContainerWidth,
+	table,
+	tableStart,
+	state,
+	layout,
+	getEditorContainerWidth,
 }: getTableMaxWidthProps) => {
-  const containerWidth = getEditorContainerWidth();
-  const parentWidth = getParentNodeWidth(tableStart, state, containerWidth);
+	const containerWidth = getEditorContainerWidth();
+	const parentWidth = getParentNodeWidth(tableStart, state, containerWidth);
 
-  let maxWidth =
-    parentWidth ||
-    table.attrs.width ||
-    getLayoutSize(layout, containerWidth.width, {});
+	let maxWidth =
+		parentWidth || table.attrs.width || getLayoutSize(layout, containerWidth.width, {});
 
-  if (table.attrs.isNumberColumnEnabled) {
-    maxWidth -= akEditorTableNumberColumnWidth;
-  }
+	if (table.attrs.isNumberColumnEnabled) {
+		maxWidth -= akEditorTableNumberColumnWidth;
+	}
 
-  return maxWidth as number;
+	return maxWidth as number;
 };
 
 /**
@@ -144,37 +125,31 @@ export const getTableMaxWidth = ({
  * @returns calculated width of <table /> element derived from sum of colwidths on tableCell or tableHeader nodes or falls back to container width
  */
 export const getTableElementWidth = (table: PMNode) => {
-  if (hasTableBeenResized(table)) {
-    // TODO: is there a scenario where ADF columns are SMALLER than container width?
-    return calcTableColumnWidths(table).reduce((sum, width) => sum + width, 0);
-  }
+	if (hasTableBeenResized(table)) {
+		// TODO: is there a scenario where ADF columns are SMALLER than container width?
+		return calcTableColumnWidths(table).reduce((sum, width) => sum + width, 0);
+	}
 
-  return getTableContainerElementWidth(table);
+	return getTableContainerElementWidth(table);
 };
 
 export const getTableContainerElementWidth = (table: PMNode) => {
-  return getTableContainerWidth(table);
+	return getTableContainerWidth(table);
 };
 
-export const getTableScalingPercent = (
-  table: PMNode,
-  tableRef: HTMLElement | null,
-) => {
-  const tableWidth = getTableContainerElementWidth(table);
-  let renderWidth = tableRef?.parentElement?.clientWidth || tableWidth;
-  // minus 1 here to avoid any 1px scroll in Firefox
-  let scalePercent = (renderWidth - 1) / tableWidth;
-  scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
-  return Math.min(scalePercent, 1);
+export const getTableScalingPercent = (table: PMNode, tableRef: HTMLElement | null) => {
+	const tableWidth = getTableContainerElementWidth(table);
+	let renderWidth = tableRef?.parentElement?.clientWidth || tableWidth;
+	// minus 1 here to avoid any 1px scroll in Firefox
+	let scalePercent = (renderWidth - 1) / tableWidth;
+	scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
+	return Math.min(scalePercent, 1);
 };
 
-export const getStaticTableScalingPercent = (
-  table: PMNode,
-  tableRenderWidth: number,
-) => {
-  const tableWidth = getTableContainerElementWidth(table);
-  // minus 1 here to avoid any 1px scroll in Firefox
-  let scalePercent = (tableRenderWidth - 1) / tableWidth;
-  scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
-  return Math.min(scalePercent, 1);
+export const getStaticTableScalingPercent = (table: PMNode, tableRenderWidth: number) => {
+	const tableWidth = getTableContainerElementWidth(table);
+	// minus 1 here to avoid any 1px scroll in Firefox
+	let scalePercent = (tableRenderWidth - 1) / tableWidth;
+	scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
+	return Math.min(scalePercent, 1);
 };

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

@@ -9,124 +9,111 @@ import { updateColgroup } from './resize-state';
 import type { ResizeState } from './types';
 
 export const resizeColumn = (
-  resizeState: ResizeState,
-  colIndex: number,
-  amount: number,
-  tableRef: HTMLElement | null,
-  tableNode: PmNode,
-  selectedColumns?: number[],
-  isTableScalingEnabled = false,
+	resizeState: ResizeState,
+	colIndex: number,
+	amount: number,
+	tableRef: HTMLElement | null,
+	tableNode: PmNode,
+	selectedColumns?: number[],
+	isTableScalingEnabled = false,
 ): ResizeState => {
-  let scalePercent = 1;
-  let resizeAmount = amount;
+	let scalePercent = 1;
+	let resizeAmount = amount;
 
-  if (isTableScalingEnabled) {
-    scalePercent = getTableScalingPercent(tableNode, tableRef);
-    resizeAmount = amount / scalePercent;
-  }
+	if (isTableScalingEnabled) {
+		scalePercent = getTableScalingPercent(tableNode, tableRef);
+		resizeAmount = amount / scalePercent;
+	}
 
-  const newState =
-    resizeAmount > 0
-      ? growColumn(resizeState, colIndex, resizeAmount, selectedColumns)
-      : resizeAmount < 0
-        ? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns)
-        : resizeState;
+	const newState =
+		resizeAmount > 0
+			? growColumn(resizeState, colIndex, resizeAmount, selectedColumns)
+			: resizeAmount < 0
+				? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns)
+				: resizeState;
 
-  updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled);
+	updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled);
 
-  return newState;
+	return newState;
 };
 
 // try not scale table during resize
 export const resizeColumnAndTable = (
-  resizeState: ResizeState,
-  colIndex: number,
-  amount: number,
-  tableRef: HTMLElement,
-  tableNode: PmNode,
-  selectedColumns?: number[],
-  isTableScalingEnabled = false,
-  originalTableWidth?: number,
+	resizeState: ResizeState,
+	colIndex: number,
+	amount: number,
+	tableRef: HTMLElement,
+	tableNode: PmNode,
+	selectedColumns?: number[],
+	isTableScalingEnabled = false,
+	originalTableWidth?: number,
 ): ResizeState => {
-  // TODO: can we use document state, and apply scaling factor?
-  const tableWidth = tableRef.clientWidth;
-  const tableContainerWidth = tableRef.closest(
-    '.pm-table-container',
-  )?.clientWidth;
-
-  const isOverflowed = !!(
-    tableWidth &&
-    tableContainerWidth &&
-    tableWidth > tableContainerWidth
-  );
-
-  let resizeAmount = amount * 2;
-
-  // todo: reimplement - use getTableScalingPercentFrozen to get scaled percent before table width changes dynamically
-  // let scalePercent = 1;
-  // if (isTableScalingEnabled) {
-  // import from ./misc
-  //   scalePercent = getStaticTableScalingPercent(
-  //     tableNode,
-  //     originalTableWidth || resizeState.maxSize,
-  //   );
-  //   resizeAmount = amount / scalePercent;
-  // }
-
-  // need to look at the resize amount and try to adjust the colgroups
-  if (isOverflowed) {
-    resizeAmount =
-      amount < 0
-        ? amount
-        : resizeAmount -
-          (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2;
-  } else {
-    resizeAmount =
-      amount > 0 && tableContainerWidth
-        ? resizeAmount -
-          (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2
-        : resizeAmount;
-  }
-
-  const newState = updateAffectedColumn(resizeState, colIndex, resizeAmount);
-
-  // this function only updates the colgroup in DOM, it reverses the scalePercent
-  // todo: change isScalingEnabled to true when reimplementing scaling
-  updateColgroup(newState, tableRef, tableNode, false);
-
-  // use the difference in width from affected column to update overall table width
-  const delta =
-    newState.cols[colIndex].width - resizeState.cols[colIndex].width;
-
-  if (!isOverflowed) {
-    updateTablePreview(delta, tableRef, tableNode);
-  }
-
-  return {
-    ...newState,
-    tableWidth: isOverflowed
-      ? tableContainerWidth
-      : resizeState.tableWidth + delta,
-  };
+	// TODO: can we use document state, and apply scaling factor?
+	const tableWidth = tableRef.clientWidth;
+	const tableContainerWidth = tableRef.closest('.pm-table-container')?.clientWidth;
+
+	const isOverflowed = !!(tableWidth && tableContainerWidth && tableWidth > tableContainerWidth);
+
+	let resizeAmount = amount * 2;
+
+	// todo: reimplement - use getTableScalingPercentFrozen to get scaled percent before table width changes dynamically
+	// let scalePercent = 1;
+	// if (isTableScalingEnabled) {
+	// import from ./misc
+	//   scalePercent = getStaticTableScalingPercent(
+	//     tableNode,
+	//     originalTableWidth || resizeState.maxSize,
+	//   );
+	//   resizeAmount = amount / scalePercent;
+	// }
+
+	// need to look at the resize amount and try to adjust the colgroups
+	if (isOverflowed) {
+		resizeAmount =
+			amount < 0
+				? amount
+				: resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2;
+	} else {
+		resizeAmount =
+			amount > 0 && tableContainerWidth
+				? resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2
+				: resizeAmount;
+	}
+
+	const newState = updateAffectedColumn(resizeState, colIndex, resizeAmount);
+
+	// this function only updates the colgroup in DOM, it reverses the scalePercent
+	// todo: change isScalingEnabled to true when reimplementing scaling
+	updateColgroup(newState, tableRef, tableNode, false);
+
+	// use the difference in width from affected column to update overall table width
+	const delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
+
+	if (!isOverflowed) {
+		updateTablePreview(delta, tableRef, tableNode);
+	}
+
+	return {
+		...newState,
+		tableWidth: isOverflowed ? tableContainerWidth : resizeState.tableWidth + delta,
+	};
 };
 
 const updateTablePreview = (
-  resizeAmount: number,
-  tableRef: HTMLElement | null,
-  tableNode: PmNode,
+	resizeAmount: number,
+	tableRef: HTMLElement | null,
+	tableNode: PmNode,
 ) => {
-  const currentWidth = getTableContainerElementWidth(tableNode);
-  const resizingContainer = tableRef?.closest(
-    `.${ClassName.TABLE_RESIZER_CONTAINER}`,
-  );
-  const resizingItem = resizingContainer?.querySelector('.resizer-item');
-
-  if (resizingItem) {
-    const newWidth = `${currentWidth + resizeAmount}px`;
-    if (tableRef) {
-      tableRef.style.width = newWidth;
-    }
-    (resizingContainer as HTMLElement).style.width = newWidth;
-    (resizingItem as HTMLElement).style.width = newWidth;
-  }
+	const currentWidth = getTableContainerElementWidth(tableNode);
+	const resizingContainer = tableRef?.closest(`.${ClassName.TABLE_RESIZER_CONTAINER}`);
+	const resizingItem = resizingContainer?.querySelector('.resizer-item');
+
+	if (resizingItem) {
+		const newWidth = `${currentWidth + resizeAmount}px`;
+		if (tableRef) {
+			tableRef.style.width = newWidth;
+		}
+		(resizingContainer as HTMLElement).style.width = newWidth;
+		(resizingItem as HTMLElement).style.width = newWidth;
+	}
 };