@atlaskit/editor-plugin-table 7.16.10 → 7.16.12

package/src/pm-plugins/table-resizing/utils/content-width.ts

@@ -2,129 +2,109 @@ import { unitToNumber } from './unit-to-number';
 
 // calculates content width of a cell
 export function contentWidth(
-  elem: HTMLElement,
-  container: HTMLElement,
-  colWidths: number[] = [],
-  canvas: HTMLCanvasElement = document.createElement('canvas'),
+	elem: HTMLElement,
+	container: HTMLElement,
+	colWidths: number[] = [],
+	canvas: HTMLCanvasElement = document.createElement('canvas'),
 ): { minWidth: number; width: number } {
-  return calcContentWidth(elem, container || elem, canvas, colWidths);
+	return calcContentWidth(elem, container || elem, canvas, colWidths);
 }
 
 function calcContentWidth(
-  elem: HTMLElement,
-  container: HTMLElement,
-  canvas: HTMLCanvasElement,
-  colWidths: number[],
+	elem: HTMLElement,
+	container: HTMLElement,
+	canvas: HTMLCanvasElement,
+	colWidths: number[],
 ): { minWidth: number; width: number } {
-  const flowWidths = [] as number[];
-  let curWidth = 0;
-
-  for (let i = 0; i < elem.childNodes.length; i++) {
-    const child = elem.childNodes[i] as HTMLElement;
-
-    if (child.nodeType === Node.COMMENT_NODE) {
-      continue;
-    }
-
-    if (child.nodeType === Node.TEXT_NODE) {
-      const parent = child.parentNode as HTMLElement;
-      const parentStyle = getComputedStyle(parent);
-      let contentLength = 0;
-
-      if (parent.nodeName === 'CODE' || parent.nodeName === 'PRE') {
-        contentLength = handlePreText(
-          canvas,
-          parent,
-          child.textContent,
-          parentStyle.font,
-        );
-      } else {
-        contentLength = measureText(
-          canvas,
-          child.textContent,
-          parentStyle.font,
-        );
-      }
-
-      const left = parent.offsetLeft - container.offsetLeft;
-      flowWidths.push(curWidth);
-
-      curWidth += contentLength + left;
-
-      // If the text isn't meant to wrap, we should set that as a hard limit.
-      if (parentStyle.whiteSpace === 'nowrap') {
-        // + 3 is for date offset plus cursor
-        // TODO There should be a programmatic way to get this.
-        colWidths.push(parent.offsetWidth + 3);
-      }
-    } else {
-      // FIXME: doesn't quite work right with spacing
-      const style = getComputedStyle(child);
-
-      if (
-        style.minWidth &&
-        style.minWidth.endsWith('px') &&
-        style.minWidth !== '0px'
-      ) {
-        colWidths.push(unitToNumber(style.minWidth));
-      }
-
-      const { width } = contentWidth(child, container, colWidths, canvas);
-      if (style.display && style.display.indexOf('inline') > -1) {
-        // is inline element, add to curWidth
-        curWidth += width;
-      } else {
-        // block element, reset curWidth
-        flowWidths.push(curWidth);
-        curWidth = width;
-      }
-    }
-  }
-
-  flowWidths.push(curWidth);
-
-  return {
-    minWidth: colWidths.reduce((oldMax, width) => Math.max(width, oldMax), 0),
-    width: flowWidths.reduce((oldMax, width) => Math.max(width, oldMax), 0),
-  };
+	const flowWidths = [] as number[];
+	let curWidth = 0;
+
+	for (let i = 0; i < elem.childNodes.length; i++) {
+		const child = elem.childNodes[i] as HTMLElement;
+
+		if (child.nodeType === Node.COMMENT_NODE) {
+			continue;
+		}
+
+		if (child.nodeType === Node.TEXT_NODE) {
+			const parent = child.parentNode as HTMLElement;
+			const parentStyle = getComputedStyle(parent);
+			let contentLength = 0;
+
+			if (parent.nodeName === 'CODE' || parent.nodeName === 'PRE') {
+				contentLength = handlePreText(canvas, parent, child.textContent, parentStyle.font);
+			} else {
+				contentLength = measureText(canvas, child.textContent, parentStyle.font);
+			}
+
+			const left = parent.offsetLeft - container.offsetLeft;
+			flowWidths.push(curWidth);
+
+			curWidth += contentLength + left;
+
+			// If the text isn't meant to wrap, we should set that as a hard limit.
+			if (parentStyle.whiteSpace === 'nowrap') {
+				// + 3 is for date offset plus cursor
+				// TODO There should be a programmatic way to get this.
+				colWidths.push(parent.offsetWidth + 3);
+			}
+		} else {
+			// FIXME: doesn't quite work right with spacing
+			const style = getComputedStyle(child);
+
+			if (style.minWidth && style.minWidth.endsWith('px') && style.minWidth !== '0px') {
+				colWidths.push(unitToNumber(style.minWidth));
+			}
+
+			const { width } = contentWidth(child, container, colWidths, canvas);
+			if (style.display && style.display.indexOf('inline') > -1) {
+				// is inline element, add to curWidth
+				curWidth += width;
+			} else {
+				// block element, reset curWidth
+				flowWidths.push(curWidth);
+				curWidth = width;
+			}
+		}
+	}
+
+	flowWidths.push(curWidth);
+
+	return {
+		minWidth: colWidths.reduce((oldMax, width) => Math.max(width, oldMax), 0),
+		width: flowWidths.reduce((oldMax, width) => Math.max(width, oldMax), 0),
+	};
 }
 
-function measureText(
-  canvas: HTMLCanvasElement,
-  text: string | null,
-  font: string | null,
-): number {
-  const ctx = canvas.getContext('2d');
-  if (!ctx) {
-    return 0;
-  }
-  if (font) {
-    ctx.font = font;
-  }
-  return Math.round(ctx.measureText(text || '').width);
+function measureText(canvas: HTMLCanvasElement, text: string | null, font: string | null): number {
+	const ctx = canvas.getContext('2d');
+	if (!ctx) {
+		return 0;
+	}
+	if (font) {
+		ctx.font = font;
+	}
+	return Math.round(ctx.measureText(text || '').width);
 }
 
 function handlePreText(
-  canvas: HTMLCanvasElement,
-  node: HTMLElement,
-  textContent: string | null,
-  font: string | null,
+	canvas: HTMLCanvasElement,
+	node: HTMLElement,
+	textContent: string | null,
+	font: string | null,
 ): number {
-  let parent = node;
-  if (node.nodeName === 'CODE') {
-    parent = node.parentNode! as HTMLElement;
-  }
-
-  const computedStyle = getComputedStyle(parent!);
-  if (textContent && computedStyle.whiteSpace === 'pre') {
-    // If white space is pre grab the longest line in the block.
-    return textContent
-      .split('\n')
-      .reduce(
-        (acc, current) => Math.max(measureText(canvas, current, font), acc),
-        0,
-      );
-  }
-
-  return measureText(canvas, textContent, font);
+	let parent = node;
+	if (node.nodeName === 'CODE') {
+		parent = node.parentNode! as HTMLElement;
+	}
+
+	const computedStyle = getComputedStyle(parent!);
+	if (textContent && computedStyle.whiteSpace === 'pre') {
+		// If white space is pre grab the longest line in the block.
+		return textContent
+			.split('\n')
+			.reduce((acc, current) => Math.max(measureText(canvas, current, font), acc), 0);
+	}
+
+	return measureText(canvas, textContent, font);
 }

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

@@ -1,12 +1,5 @@
-import {
-  tableCellBorderWidth,
-  tableMarginTop,
-} from '@atlaskit/editor-common/styles';
-import {
-  closestElement,
-  containsClassName,
-  parsePx,
-} from '@atlaskit/editor-common/utils';
+import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/styles';
+import { closestElement, containsClassName, parsePx } from '@atlaskit/editor-common/utils';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 
@@ -16,134 +9,124 @@ import { getRowHeights } from '../../../utils/row-controls';
 import { getPluginState as getMainPluginState } from '../../plugin-factory';
 
 export const updateControls = () => (state: EditorState) => {
-  const { tableRef } = getMainPluginState(state);
-  if (!tableRef) {
-    return;
-  }
-  const tr = tableRef.querySelector('tr');
-  if (!tr) {
-    return;
-  }
-  const wrapper = tableRef.parentElement;
-  if (!(wrapper && wrapper.parentElement)) {
-    return;
-  }
-
-  const rowControls = wrapper.parentElement.querySelectorAll<HTMLElement>(
-    `.${ClassName.ROW_CONTROLS_BUTTON_WRAP}`,
-  );
-  const numberedRows = wrapper.parentElement.querySelectorAll<HTMLElement>(
-    ClassName.NUMBERED_COLUMN_BUTTON,
-  );
-
-  syncStickyRowToTable(tableRef);
-
-  const rowHeights = getRowHeights(tableRef);
-
-  // update rows controls height on resize
-  for (let i = 0, count = rowControls.length; i < count; i++) {
-    const height = rowHeights[i];
-    if (height) {
-      rowControls[i].style.height = `${height}px`;
-
-      if (numberedRows.length) {
-        numberedRows[i].style.height = `${height}px`;
-      }
-    }
-  }
+	const { tableRef } = getMainPluginState(state);
+	if (!tableRef) {
+		return;
+	}
+	const tr = tableRef.querySelector('tr');
+	if (!tr) {
+		return;
+	}
+	const wrapper = tableRef.parentElement;
+	if (!(wrapper && wrapper.parentElement)) {
+		return;
+	}
+
+	const rowControls = wrapper.parentElement.querySelectorAll<HTMLElement>(
+		`.${ClassName.ROW_CONTROLS_BUTTON_WRAP}`,
+	);
+	const numberedRows = wrapper.parentElement.querySelectorAll<HTMLElement>(
+		ClassName.NUMBERED_COLUMN_BUTTON,
+	);
+
+	syncStickyRowToTable(tableRef);
+
+	const rowHeights = getRowHeights(tableRef);
+
+	// update rows controls height on resize
+	for (let i = 0, count = rowControls.length; i < count; i++) {
+		const height = rowHeights[i];
+		if (height) {
+			rowControls[i].style.height = `${height}px`;
+
+			if (numberedRows.length) {
+				numberedRows[i].style.height = `${height}px`;
+			}
+		}
+	}
 };
 
-export const isClickNear = (
-  event: MouseEvent,
-  click: { x: number; y: number },
-): boolean => {
-  const dx = click.x - event.clientX,
-    dy = click.y - event.clientY;
-  return dx * dx + dy * dy < 100;
+export const isClickNear = (event: MouseEvent, click: { x: number; y: number }): boolean => {
+	const dx = click.x - event.clientX,
+		dy = click.y - event.clientY;
+	return dx * dx + dy * dy < 100;
 };
 
-export const getResizeCellPos = (
-  view: EditorView,
-  event: MouseEvent,
-): number | null => {
-  const target = event.target as HTMLElement;
+export const getResizeCellPos = (view: EditorView, event: MouseEvent): number | null => {
+	const target = event.target as HTMLElement;
 
-  if (!containsClassName(target, ClassName.RESIZE_HANDLE_DECORATION)) {
-    return null;
-  }
+	if (!containsClassName(target, ClassName.RESIZE_HANDLE_DECORATION)) {
+		return null;
+	}
 
-  const tableCell = closestElement(target, 'td, th');
+	const tableCell = closestElement(target, 'td, th');
 
-  if (!tableCell) {
-    return null;
-  }
+	if (!tableCell) {
+		return null;
+	}
 
-  const cellStartPosition = view.posAtDOM(tableCell, 0);
-  return cellStartPosition - 1;
+	const cellStartPosition = view.posAtDOM(tableCell, 0);
+	return cellStartPosition - 1;
 };
 
 export const updateStickyMargins = (table: HTMLElement) => {
-  const row = table.querySelector('tr.sticky');
-  if (!row) {
-    table.style.marginTop = '';
-    return;
-  }
+	const row = table.querySelector('tr.sticky');
+	if (!row) {
+		table.style.marginTop = '';
+		return;
+	}
 
-  const paddingTop =
-    parsePx(window.getComputedStyle(row).paddingTop || '') || 0;
+	const paddingTop = parsePx(window.getComputedStyle(row).paddingTop || '') || 0;
 
-  const firstRowHeight =
-    row.getBoundingClientRect().height - paddingTop - tableCellBorderWidth;
+	const firstRowHeight = row.getBoundingClientRect().height - paddingTop - tableCellBorderWidth;
 
-  table.style.marginTop = `${tableMarginTop + firstRowHeight}px`;
+	table.style.marginTop = `${tableMarginTop + firstRowHeight}px`;
 };
 
 export const applyColWidthsToStickyRow = (
-  // @ts-ignore - CCFE error TS6133: 'colGroup' is declared but its value is never read.
-  colGroup: HTMLTableColElement | null,
-  headerRow: HTMLTableRowElement,
+	// @ts-ignore - CCFE error TS6133: 'colGroup' is declared but its value is never read.
+	colGroup: HTMLTableColElement | null,
+	headerRow: HTMLTableRowElement,
 ) => {
-  // sync column widths for the sticky row
-  const newCols = colWidthsForRow(headerRow);
+	// sync column widths for the sticky row
+	const newCols = colWidthsForRow(headerRow);
 
-  if (newCols) {
-    headerRow.style.gridTemplateColumns = newCols;
-  }
+	if (newCols) {
+		headerRow.style.gridTemplateColumns = newCols;
+	}
 };
 
 export const syncStickyRowToTable = (tableRef?: HTMLElement | null) => {
-  if (!tableRef) {
-    return;
-  }
+	if (!tableRef) {
+		return;
+	}
 
-  const headerRow = tableRef.querySelector(
-    'tr[data-header-row]',
-  ) as HTMLTableRowElement;
+	const headerRow = tableRef.querySelector('tr[data-header-row]') as HTMLTableRowElement;
 
-  if (!headerRow) {
-    return;
-  }
+	if (!headerRow) {
+		return;
+	}
 
-  applyColWidthsToStickyRow(tableRef.querySelector('colgroup'), headerRow);
-  applyTableWidthToStickyRow(tableRef, headerRow);
+	applyColWidthsToStickyRow(tableRef.querySelector('colgroup'), headerRow);
+	applyTableWidthToStickyRow(tableRef, headerRow);
 };
 
 export const applyTableWidthToStickyRow = (
-  tableRef: HTMLElement,
-  headerRow: HTMLTableRowElement,
+	tableRef: HTMLElement,
+	headerRow: HTMLTableRowElement,
 ) => {
-  const tbody = tableRef.querySelector('tbody')!;
-  const wrapper = tableRef.parentElement;
-
-  if (tbody && wrapper) {
-    // when resizing in Chrome, clientWidth will give us 759px
-    // but toggling the sticky class will reset it to 760px.
-    //
-    // both elements in the dom + inspector will
-    // be the same width but at layout will be different..
-    const newWidth = Math.min(tbody.offsetWidth + 1, wrapper.offsetWidth);
-
-    headerRow.style.width = `${newWidth}px`;
-    headerRow.scrollLeft = wrapper.scrollLeft;
-  }
+	const tbody = tableRef.querySelector('tbody')!;
+	const wrapper = tableRef.parentElement;
+
+	if (tbody && wrapper) {
+		// when resizing in Chrome, clientWidth will give us 759px
+		// but toggling the sticky class will reset it to 760px.
+		//
+		// both elements in the dom + inspector will
+		// be the same width but at layout will be different..
+		const newWidth = Math.min(tbody.offsetWidth + 1, wrapper.offsetWidth);
+
+		headerRow.style.width = `${newWidth}px`;
+		headerRow.scrollLeft = wrapper.scrollLeft;
+	}
 };

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

@@ -1,51 +1,46 @@
 export {
-  generateColgroup,
-  insertColgroupFromNode,
-  hasTableBeenResized,
-  getColgroupChildrenLength,
+	generateColgroup,
+	insertColgroupFromNode,
+	hasTableBeenResized,
+	getColgroupChildrenLength,
 } from './colgroup';
 export { contentWidth } from './content-width';
 export {
-  getColumnStateFromDOM,
-  getFreeSpace,
-  getCellsRefsInColumn,
-  calculateColumnWidth,
-  addContainerLeftRightPadding,
+	getColumnStateFromDOM,
+	getFreeSpace,
+	getCellsRefsInColumn,
+	calculateColumnWidth,
+	addContainerLeftRightPadding,
 } from './column-state';
 export type { ColumnState } from './column-state';
 export { growColumn, shrinkColumn, reduceSpace } from './resize-logic';
 export {
-  getResizeState,
-  updateColgroup,
-  getTotalWidth,
-  evenAllColumnsWidths,
-  bulkColumnsResize,
-  areColumnsEven,
-  adjustColumnsWidths,
+	getResizeState,
+	updateColgroup,
+	getTotalWidth,
+	evenAllColumnsWidths,
+	bulkColumnsResize,
+	areColumnsEven,
+	adjustColumnsWidths,
 } from './resize-state';
 export {
-  getLayoutSize,
-  getDefaultLayoutMaxWidth,
-  pointsAtCell,
-  currentColWidth,
-  domCellAround,
-  getTableMaxWidth,
-  getTableElementWidth,
-  getTableContainerElementWidth,
+	getLayoutSize,
+	getDefaultLayoutMaxWidth,
+	pointsAtCell,
+	currentColWidth,
+	domCellAround,
+	getTableMaxWidth,
+	getTableElementWidth,
+	getTableContainerElementWidth,
 } from './misc';
 export { updateControls, isClickNear, getResizeCellPos } from './dom';
-export {
-  scale,
-  scaleWithParent,
-  scaleTable,
-  previewScaleTable,
-} from './scale-table';
+export { scale, scaleWithParent, scaleTable, previewScaleTable } from './scale-table';
 export type { ScaleOptions } from './scale-table';
 export type { ResizeState, ResizeStateWithAnalytics } from './types';
 export { resizeColumn, resizeColumnAndTable } from './resize-column';
 export {
-  COLUMN_MIN_WIDTH,
-  TABLE_MAX_WIDTH,
-  TABLE_DEFAULT_WIDTH,
-  MAX_SCALING_PERCENT,
+	COLUMN_MIN_WIDTH,
+	TABLE_MAX_WIDTH,
+	TABLE_DEFAULT_WIDTH,
+	MAX_SCALING_PERCENT,
 } from './consts';