@atlaskit/editor-plugin-table 7.16.11 → 7.16.13

package/src/utils/row-controls.ts

@@ -1,243 +1,229 @@
 import { parsePx } from '@atlaskit/editor-common/utils';
-import type {
-  Node as PMNode,
-  Schema,
-} from '@atlaskit/editor-prosemirror/model';
-import type {
-  Selection,
-  Transaction,
-} from '@atlaskit/editor-prosemirror/state';
+import type { Node as PMNode, Schema } from '@atlaskit/editor-prosemirror/model';
+import type { Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import {
-  findTable,
-  getSelectionRect,
-  isRowSelected,
-  isTableSelected,
+	findTable,
+	getSelectionRect,
+	isRowSelected,
+	isTableSelected,
 } from '@atlaskit/editor-tables/utils';
 
 import { TableCssClassName as ClassName } from '../types';
 import { tableDeleteButtonSize } from '../ui/consts';
 
 export interface RowParams {
-  startIndex: number;
-  endIndex: number;
-  height: number;
+	startIndex: number;
+	endIndex: number;
+	height: number;
 }
 
 export const getRowHeights = (tableRef: HTMLTableElement): number[] => {
-  const heights: number[] = [];
-  const tableBody = tableRef.querySelector('tbody');
-  if (tableBody) {
-    const rows = tableBody.childNodes;
-    for (let i = 0, count = rows.length; i < count; i++) {
-      const row = rows[i] as HTMLTableRowElement;
-      heights[i] = row.getBoundingClientRect().height + 1;
-
-      // padding only gets applied when the container has sticky
-      if (row.classList.contains('sticky') && i === 0) {
-        const styles = window.getComputedStyle(row);
-        const paddingTop = parsePx(styles.paddingTop || '');
-        heights[i] -= paddingTop ? paddingTop + 1 : +1;
-      }
-    }
-  }
-
-  return heights;
+	const heights: number[] = [];
+	const tableBody = tableRef.querySelector('tbody');
+	if (tableBody) {
+		const rows = tableBody.childNodes;
+		for (let i = 0, count = rows.length; i < count; i++) {
+			const row = rows[i] as HTMLTableRowElement;
+			heights[i] = row.getBoundingClientRect().height + 1;
+
+			// padding only gets applied when the container has sticky
+			if (row.classList.contains('sticky') && i === 0) {
+				const styles = window.getComputedStyle(row);
+				const paddingTop = parsePx(styles.paddingTop || '');
+				heights[i] -= paddingTop ? paddingTop + 1 : +1;
+			}
+		}
+	}
+
+	return heights;
 };
 
 export const isRowDeleteButtonVisible = (selection: Selection): boolean => {
-  if (
-    !isTableSelected(selection) &&
-    selection instanceof CellSelection &&
-    selection.isRowSelection()
-  ) {
-    return true;
-  }
-
-  return false;
+	if (
+		!isTableSelected(selection) &&
+		selection instanceof CellSelection &&
+		selection.isRowSelection()
+	) {
+		return true;
+	}
+
+	return false;
 };
 
 export const getRowDeleteButtonParams = (
-  rowsHeights: Array<number | undefined>,
-  selection: Selection,
-  offsetTop = 0,
+	rowsHeights: Array<number | undefined>,
+	selection: Selection,
+	offsetTop = 0,
 ): { top: number; indexes: number[] } | null => {
-  const rect = getSelectionRect(selection);
-  if (!rect) {
-    return null;
-  }
-  let height = 0;
-  let offset = offsetTop;
-  // find the rows before the selection
-  for (let i = 0; i < rect.top; i++) {
-    const rowHeight = rowsHeights[i];
-    if (rowHeight) {
-      offset += rowHeight - 1;
-    }
-  }
-  // these are the selected rows widths
-  const indexes: number[] = [];
-  for (let i = rect.top; i < rect.bottom; i++) {
-    const rowHeight = rowsHeights[i];
-    if (rowHeight) {
-      height += rowHeight - 1;
-      indexes.push(i);
-    }
-  }
-
-  const top = offset + height / 2 - tableDeleteButtonSize / 2;
-  return { top, indexes };
+	const rect = getSelectionRect(selection);
+	if (!rect) {
+		return null;
+	}
+	let height = 0;
+	let offset = offsetTop;
+	// find the rows before the selection
+	for (let i = 0; i < rect.top; i++) {
+		const rowHeight = rowsHeights[i];
+		if (rowHeight) {
+			offset += rowHeight - 1;
+		}
+	}
+	// these are the selected rows widths
+	const indexes: number[] = [];
+	for (let i = rect.top; i < rect.bottom; i++) {
+		const rowHeight = rowsHeights[i];
+		if (rowHeight) {
+			height += rowHeight - 1;
+			indexes.push(i);
+		}
+	}
+
+	const top = offset + height / 2 - tableDeleteButtonSize / 2;
+	return { top, indexes };
 };
 
-export const getRowsParams = (
-  rowsHeights: Array<number | undefined>,
-): RowParams[] => {
-  const rows: RowParams[] = [];
-  for (let i = 0, count = rowsHeights.length; i < count; i++) {
-    const height = rowsHeights[i];
-    if (!height) {
-      continue;
-    }
-    let endIndex = rowsHeights.length;
-    for (let k = i + 1, count = rowsHeights.length; k < count; k++) {
-      if (rowsHeights[k]) {
-        endIndex = k;
-        break;
-      }
-    }
-    rows.push({ startIndex: i, endIndex, height });
-  }
-  return rows;
+export const getRowsParams = (rowsHeights: Array<number | undefined>): RowParams[] => {
+	const rows: RowParams[] = [];
+	for (let i = 0, count = rowsHeights.length; i < count; i++) {
+		const height = rowsHeights[i];
+		if (!height) {
+			continue;
+		}
+		let endIndex = rowsHeights.length;
+		for (let k = i + 1, count = rowsHeights.length; k < count; k++) {
+			if (rowsHeights[k]) {
+				endIndex = k;
+				break;
+			}
+		}
+		rows.push({ startIndex: i, endIndex, height });
+	}
+	return rows;
 };
 
 export const getRowClassNames = (
-  index: number,
-  selection: Selection,
-  hoveredRows: number[] = [],
-  isInDanger?: boolean,
-  isResizing?: boolean,
+	index: number,
+	selection: Selection,
+	hoveredRows: number[] = [],
+	isInDanger?: boolean,
+	isResizing?: boolean,
 ): string => {
-  const classNames: string[] = [];
-  if (
-    isRowSelected(index)(selection) ||
-    (hoveredRows.indexOf(index) > -1 && !isResizing)
-  ) {
-    classNames.push(ClassName.HOVERED_CELL_ACTIVE);
-    if (isInDanger) {
-      classNames.push(ClassName.HOVERED_CELL_IN_DANGER);
-    }
-  }
-  return classNames.join(' ');
+	const classNames: string[] = [];
+	if (isRowSelected(index)(selection) || (hoveredRows.indexOf(index) > -1 && !isResizing)) {
+		classNames.push(ClassName.HOVERED_CELL_ACTIVE);
+		if (isInDanger) {
+			classNames.push(ClassName.HOVERED_CELL_IN_DANGER);
+		}
+	}
+	return classNames.join(' ');
 };
 
 export const copyPreviousRow =
-  (schema: Schema) => (insertNewRowIndex: number) => (tr: Transaction) => {
-    const table = findTable(tr.selection);
-    if (!table) {
-      return tr;
-    }
-
-    const map = TableMap.get(table.node);
-    const copyPreviousRowIndex = insertNewRowIndex - 1;
-
-    if (insertNewRowIndex <= 0) {
-      throw Error(
-        `Row Index less or equal 0 isn't not allowed since there is not a previous to copy`,
-      );
-    }
-
-    if (insertNewRowIndex > map.height) {
-      return tr;
-    }
-
-    const tableNode = table.node;
-    const {
-      nodes: { tableRow },
-    } = schema;
-
-    const cellsInRow = map.cellsInRect({
-      left: 0,
-      right: map.width,
-      top: copyPreviousRowIndex,
-      bottom: copyPreviousRowIndex + 1,
-    });
-    const offsetIndexPosition = copyPreviousRowIndex * map.width;
-    const offsetNextLineIndexPosition = insertNewRowIndex * map.width;
-    const cellsPositionsInOriginalRow = map.map.slice(
-      offsetIndexPosition,
-      offsetIndexPosition + map.width,
-    );
-
-    const cellsPositionsInNextRow = map.map.slice(
-      offsetNextLineIndexPosition,
-      offsetNextLineIndexPosition + map.width,
-    );
-
-    let cells = [] as PMNode[];
-    let fixRowspans: { pos: number; node: PMNode }[] = [];
-    for (let i = 0; i < cellsPositionsInOriginalRow.length; ) {
-      const pos = cellsPositionsInOriginalRow[i];
-      const documentCellPos = pos + table.start;
-      const node = tr.doc.nodeAt(documentCellPos);
-      if (!node) {
-        continue;
-      }
-
-      const attributes = {
-        ...node.attrs,
-        colspan: 1,
-        rowspan: 1,
-      };
-
-      const newCell = node.type.createAndFill(attributes);
-
-      if (!newCell) {
-        return tr;
-      }
-
-      if (cellsPositionsInNextRow.indexOf(pos) > -1) {
-        fixRowspans.push({ pos: documentCellPos, node });
-      } else if (cellsInRow.indexOf(pos) > -1) {
-        if (node.attrs.colspan > 1) {
-          const newCellWithColspanFixed = node.type.createAndFill({
-            ...attributes,
-            colspan: node.attrs.colspan,
-          });
-
-          if (!newCellWithColspanFixed) {
-            return tr;
-          }
-
-          cells.push(newCellWithColspanFixed);
-          i = i + node.attrs.colspan;
-
-          continue;
-        }
-        cells.push(newCell);
-      } else {
-        cells.push(newCell);
-      }
-
-      i++;
-    }
-
-    fixRowspans.forEach((cell) => {
-      tr.setNodeMarkup(cell.pos, undefined, {
-        ...cell.node.attrs,
-        rowspan: cell.node.attrs.rowspan + 1,
-      });
-    });
-
-    const cloneRow = tableNode.child(copyPreviousRowIndex);
-    let rowPos = table.start;
-    for (let i = 0; i < insertNewRowIndex; i++) {
-      rowPos += tableNode.child(i).nodeSize;
-    }
-
-    return safeInsert(
-      tableRow.createChecked(cloneRow.attrs, cells, cloneRow.marks),
-      rowPos,
-    )(tr);
-  };
+	(schema: Schema) => (insertNewRowIndex: number) => (tr: Transaction) => {
+		const table = findTable(tr.selection);
+		if (!table) {
+			return tr;
+		}
+
+		const map = TableMap.get(table.node);
+		const copyPreviousRowIndex = insertNewRowIndex - 1;
+
+		if (insertNewRowIndex <= 0) {
+			throw Error(
+				`Row Index less or equal 0 isn't not allowed since there is not a previous to copy`,
+			);
+		}
+
+		if (insertNewRowIndex > map.height) {
+			return tr;
+		}
+
+		const tableNode = table.node;
+		const {
+			nodes: { tableRow },
+		} = schema;
+
+		const cellsInRow = map.cellsInRect({
+			left: 0,
+			right: map.width,
+			top: copyPreviousRowIndex,
+			bottom: copyPreviousRowIndex + 1,
+		});
+		const offsetIndexPosition = copyPreviousRowIndex * map.width;
+		const offsetNextLineIndexPosition = insertNewRowIndex * map.width;
+		const cellsPositionsInOriginalRow = map.map.slice(
+			offsetIndexPosition,
+			offsetIndexPosition + map.width,
+		);
+
+		const cellsPositionsInNextRow = map.map.slice(
+			offsetNextLineIndexPosition,
+			offsetNextLineIndexPosition + map.width,
+		);
+
+		let cells = [] as PMNode[];
+		let fixRowspans: { pos: number; node: PMNode }[] = [];
+		for (let i = 0; i < cellsPositionsInOriginalRow.length; ) {
+			const pos = cellsPositionsInOriginalRow[i];
+			const documentCellPos = pos + table.start;
+			const node = tr.doc.nodeAt(documentCellPos);
+			if (!node) {
+				continue;
+			}
+
+			const attributes = {
+				...node.attrs,
+				colspan: 1,
+				rowspan: 1,
+			};
+
+			const newCell = node.type.createAndFill(attributes);
+
+			if (!newCell) {
+				return tr;
+			}
+
+			if (cellsPositionsInNextRow.indexOf(pos) > -1) {
+				fixRowspans.push({ pos: documentCellPos, node });
+			} else if (cellsInRow.indexOf(pos) > -1) {
+				if (node.attrs.colspan > 1) {
+					const newCellWithColspanFixed = node.type.createAndFill({
+						...attributes,
+						colspan: node.attrs.colspan,
+					});
+
+					if (!newCellWithColspanFixed) {
+						return tr;
+					}
+
+					cells.push(newCellWithColspanFixed);
+					i = i + node.attrs.colspan;
+
+					continue;
+				}
+				cells.push(newCell);
+			} else {
+				cells.push(newCell);
+			}
+
+			i++;
+		}
+
+		fixRowspans.forEach((cell) => {
+			tr.setNodeMarkup(cell.pos, undefined, {
+				...cell.node.attrs,
+				rowspan: cell.node.attrs.rowspan + 1,
+			});
+		});
+
+		const cloneRow = tableNode.child(copyPreviousRowIndex);
+		let rowPos = table.start;
+		for (let i = 0; i < insertNewRowIndex; i++) {
+			rowPos += tableNode.child(i).nodeSize;
+		}
+
+		return safeInsert(tableRow.createChecked(cloneRow.attrs, cells, cloneRow.marks), rowPos)(tr);
+	};

package/src/utils/selection.ts

@@ -1,111 +1,101 @@
-import type {
-  Selection,
-  Transaction,
-} from '@atlaskit/editor-prosemirror/state';
+import type { Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import {
-  findTable,
-  getSelectionRangeInColumn,
-  getSelectionRangeInRow,
-  getSelectionRect,
-  isSelectionType,
+	findTable,
+	getSelectionRangeInColumn,
+	getSelectionRangeInRow,
+	getSelectionRect,
+	isSelectionType,
 } from '@atlaskit/editor-tables/utils';
 
-export const isSelectionUpdated = (
-  oldSelection: Selection,
-  newSelection?: Selection,
-) =>
-  !!(!newSelection && oldSelection) ||
-  isSelectionType(oldSelection, 'cell') !==
-    isSelectionType(newSelection!, 'cell') ||
-  (isSelectionType(oldSelection, 'cell') &&
-    isSelectionType(newSelection!, 'cell') &&
-    oldSelection.ranges !== newSelection!.ranges);
+export const isSelectionUpdated = (oldSelection: Selection, newSelection?: Selection) =>
+	!!(!newSelection && oldSelection) ||
+	isSelectionType(oldSelection, 'cell') !== isSelectionType(newSelection!, 'cell') ||
+	(isSelectionType(oldSelection, 'cell') &&
+		isSelectionType(newSelection!, 'cell') &&
+		oldSelection.ranges !== newSelection!.ranges);
 
-const isRectangularCellSelection = (
-  selection: Selection,
-  rect: Rect,
-): boolean => {
-  const table = findTable(selection);
-  if (!table) {
-    return true;
-  }
-  const { width, height, map } = TableMap.get(table.node);
+const isRectangularCellSelection = (selection: Selection, rect: Rect): boolean => {
+	const table = findTable(selection);
+	if (!table) {
+		return true;
+	}
+	const { width, height, map } = TableMap.get(table.node);
 
-  let indexTop = rect.top * width + rect.left;
-  let indexLeft = indexTop;
-  let indexBottom = (rect.bottom - 1) * width + rect.left;
-  let indexRight = indexTop + (rect.right - rect.left - 1);
+	let indexTop = rect.top * width + rect.left;
+	let indexLeft = indexTop;
+	let indexBottom = (rect.bottom - 1) * width + rect.left;
+	let indexRight = indexTop + (rect.right - rect.left - 1);
 
-  for (let i = rect.top; i < rect.bottom; i++) {
-    if (
-      (rect.left > 0 && map[indexLeft] === map[indexLeft - 1]) ||
-      (rect.right < width && map[indexRight] === map[indexRight + 1])
-    ) {
-      return false;
-    }
-    indexLeft += width;
-    indexRight += width;
-  }
-  for (let i = rect.left; i < rect.right; i++) {
-    if (
-      (rect.top > 0 && map[indexTop] === map[indexTop - width]) ||
-      (rect.bottom < height && map[indexBottom] === map[indexBottom + width])
-    ) {
-      return false;
-    }
-    indexTop++;
-    indexBottom++;
-  }
+	for (let i = rect.top; i < rect.bottom; i++) {
+		if (
+			(rect.left > 0 && map[indexLeft] === map[indexLeft - 1]) ||
+			(rect.right < width && map[indexRight] === map[indexRight + 1])
+		) {
+			return false;
+		}
+		indexLeft += width;
+		indexRight += width;
+	}
+	for (let i = rect.left; i < rect.right; i++) {
+		if (
+			(rect.top > 0 && map[indexTop] === map[indexTop - width]) ||
+			(rect.bottom < height && map[indexBottom] === map[indexBottom + width])
+		) {
+			return false;
+		}
+		indexTop++;
+		indexBottom++;
+	}
 
-  return true;
+	return true;
 };
 
 export const normalizeSelection = (tr: Transaction): Transaction => {
-  const { selection } = tr;
-  const rect = getSelectionRect(selection);
+	const { selection } = tr;
+	const rect = getSelectionRect(selection);
 
-  if (
-    !rect ||
-    !(selection instanceof CellSelection) ||
-    isRectangularCellSelection(selection, rect)
-  ) {
-    return tr;
-  }
+	if (
+		!rect ||
+		!(selection instanceof CellSelection) ||
+		isRectangularCellSelection(selection, rect)
+	) {
+		return tr;
+	}
 
-  if (selection.isColSelection()) {
-    const $anchor = getSelectionRangeInColumn(rect.left)(tr)?.$anchor;
-    const $head = getSelectionRangeInColumn(rect.right - 1)(tr)?.$head;
-    if ($anchor && $head) {
-      return tr.setSelection(new CellSelection($anchor, $head) as any);
-    }
-  }
+	if (selection.isColSelection()) {
+		const $anchor = getSelectionRangeInColumn(rect.left)(tr)?.$anchor;
+		const $head = getSelectionRangeInColumn(rect.right - 1)(tr)?.$head;
+		if ($anchor && $head) {
+			return tr.setSelection(new CellSelection($anchor, $head) as any);
+		}
+	}
 
-  if (selection.isRowSelection()) {
-    const $anchor = getSelectionRangeInRow(rect.top)(tr)?.$anchor;
-    const $head = getSelectionRangeInRow(rect.bottom - 1)(tr)?.$head;
-    if ($anchor && $head) {
-      return tr.setSelection(new CellSelection($anchor, $head) as any);
-    }
-  }
+	if (selection.isRowSelection()) {
+		const $anchor = getSelectionRangeInRow(rect.top)(tr)?.$anchor;
+		const $head = getSelectionRangeInRow(rect.bottom - 1)(tr)?.$head;
+		if ($anchor && $head) {
+			return tr.setSelection(new CellSelection($anchor, $head) as any);
+		}
+	}
 
-  return tr;
+	return tr;
 };
 
 export const getSelectedColumnIndexes = (selectionRect: Rect): number[] => {
-  const columnIndexes: number[] = [];
-  for (let i = selectionRect.left; i < selectionRect.right; i++) {
-    columnIndexes.push(i);
-  }
-  return columnIndexes;
+	const columnIndexes: number[] = [];
+	for (let i = selectionRect.left; i < selectionRect.right; i++) {
+		columnIndexes.push(i);
+	}
+	return columnIndexes;
 };
 
 export const getSelectedRowIndexes = (selectionRect: Rect): number[] => {
-  const rowIndexes: number[] = [];
-  for (let i = selectionRect.top; i < selectionRect.bottom; i++) {
-    rowIndexes.push(i);
-  }
-  return rowIndexes;
+	const rowIndexes: number[] = [];
+	for (let i = selectionRect.top; i < selectionRect.bottom; i++) {
+		rowIndexes.push(i);
+	}
+	return rowIndexes;
 };