@atlaskit/editor-plugin-table 7.16.11 → 7.16.13

package/src/utils/dom.ts

@@ -1,66 +1,62 @@
-import {
-  closestElement,
-  containsClassName,
-} from '@atlaskit/editor-common/utils';
+import { closestElement, containsClassName } from '@atlaskit/editor-common/utils';
 
 import { TableCssClassName as ClassName } from '../types';
 
 export const isCell = (node: HTMLElement | null): boolean => {
-  return Boolean(
-    node &&
-      (['TH', 'TD'].indexOf(node.tagName) > -1 ||
-        !!closestElement(node, `.${ClassName.TABLE_HEADER_CELL}`) ||
-        !!closestElement(node, `.${ClassName.TABLE_CELL}`)),
-  );
+	return Boolean(
+		node &&
+			(['TH', 'TD'].indexOf(node.tagName) > -1 ||
+				!!closestElement(node, `.${ClassName.TABLE_HEADER_CELL}`) ||
+				!!closestElement(node, `.${ClassName.TABLE_CELL}`)),
+	);
 };
 
 export const isCornerButton = (node: HTMLElement | null): boolean =>
-  containsClassName(node, ClassName.CONTROLS_CORNER_BUTTON);
+	containsClassName(node, ClassName.CONTROLS_CORNER_BUTTON);
 
 export const isInsertRowButton = (node: HTMLElement | null) =>
-  containsClassName(node, ClassName.CONTROLS_INSERT_ROW) ||
-  closestElement(node, `.${ClassName.CONTROLS_INSERT_ROW}`) ||
-  (containsClassName(node, ClassName.CONTROLS_BUTTON_OVERLAY) &&
-    closestElement(node, `.${ClassName.ROW_CONTROLS}`));
+	containsClassName(node, ClassName.CONTROLS_INSERT_ROW) ||
+	closestElement(node, `.${ClassName.CONTROLS_INSERT_ROW}`) ||
+	(containsClassName(node, ClassName.CONTROLS_BUTTON_OVERLAY) &&
+		closestElement(node, `.${ClassName.ROW_CONTROLS}`));
 
 export const getColumnOrRowIndex = (target: HTMLElement): [number, number] => [
-  parseInt(target.getAttribute('data-start-index') || '-1', 10),
-  parseInt(target.getAttribute('data-end-index') || '-1', 10),
+	parseInt(target.getAttribute('data-start-index') || '-1', 10),
+	parseInt(target.getAttribute('data-end-index') || '-1', 10),
 ];
 
-export const isColumnControlsDecorations = (
-  node: HTMLElement | null,
-): boolean => containsClassName(node, ClassName.COLUMN_CONTROLS_DECORATIONS);
+export const isColumnControlsDecorations = (node: HTMLElement | null): boolean =>
+	containsClassName(node, ClassName.COLUMN_CONTROLS_DECORATIONS);
 
 export const isRowControlsButton = (node: HTMLElement | null): boolean =>
-  containsClassName(node, ClassName.ROW_CONTROLS_BUTTON) ||
-  containsClassName(node, ClassName.NUMBERED_COLUMN_BUTTON);
+	containsClassName(node, ClassName.ROW_CONTROLS_BUTTON) ||
+	containsClassName(node, ClassName.NUMBERED_COLUMN_BUTTON);
 
 export const isResizeHandleDecoration = (node: HTMLElement | null): boolean =>
-  containsClassName(node, ClassName.RESIZE_HANDLE_DECORATION);
+	containsClassName(node, ClassName.RESIZE_HANDLE_DECORATION);
 
 export const isTableControlsButton = (node: HTMLElement | null): boolean =>
-  containsClassName(node, ClassName.CONTROLS_BUTTON) ||
-  containsClassName(node, ClassName.ROW_CONTROLS_BUTTON_WRAP);
+	containsClassName(node, ClassName.CONTROLS_BUTTON) ||
+	containsClassName(node, ClassName.ROW_CONTROLS_BUTTON_WRAP);
 
 export const isTableContainerOrWrapper = (node: HTMLElement | null): boolean =>
-  containsClassName(node, ClassName.TABLE_CONTAINER) ||
-  containsClassName(node, ClassName.TABLE_NODE_WRAPPER);
+	containsClassName(node, ClassName.TABLE_CONTAINER) ||
+	containsClassName(node, ClassName.TABLE_NODE_WRAPPER);
 
 /** drag-and-drop classes */
 export const isDragRowControlsButton = (node: HTMLElement | null) =>
-  containsClassName(node, ClassName.DRAG_ROW_CONTROLS) ||
-  closestElement(node, `.${ClassName.DRAG_ROW_CONTROLS}`);
+	containsClassName(node, ClassName.DRAG_ROW_CONTROLS) ||
+	closestElement(node, `.${ClassName.DRAG_ROW_CONTROLS}`);
 
 export const isDragRowFloatingInsertDot = (node: HTMLElement | null) =>
-  containsClassName(node, ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER);
+	containsClassName(node, ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER);
 
 export const isDragColumnFloatingInsertDot = (node: HTMLElement | null) =>
-  containsClassName(node, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER);
+	containsClassName(node, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER);
 
 export const isDragCornerButton = (node: HTMLElement | null) =>
-  containsClassName(node, ClassName.DRAG_CORNER_BUTTON) ||
-  containsClassName(node, ClassName.DRAG_CORNER_BUTTON_INNER);
+	containsClassName(node, ClassName.DRAG_CORNER_BUTTON) ||
+	containsClassName(node, ClassName.DRAG_CORNER_BUTTON_INNER);
 
 /*
  * This function returns which side of a given element the mouse cursor is,
@@ -125,134 +121,131 @@ export const isDragCornerButton = (node: HTMLElement | null) =>
  * @returns
  */
 export const getMousePositionHorizontalRelativeByElement = (
-  mouseEvent: MouseEvent,
-  offsetX: number,
-  gapInPixels?: number,
+	mouseEvent: MouseEvent,
+	offsetX: number,
+	gapInPixels?: number,
 ): 'left' | 'right' | null => {
-  const element = mouseEvent.target;
-
-  if (element instanceof HTMLElement) {
-    const width = element.clientWidth; // reflow
-    const x = !Number.isNaN(offsetX) ? offsetX : mouseEvent.offsetX; // reflow
-
-    if (width <= 0) {
-      return null;
-    }
-
-    if (!gapInPixels) {
-      return x / width > 0.5 ? 'right' : 'left';
-    } else {
-      if (x <= gapInPixels) {
-        return 'left';
-      } else if (x >= width - gapInPixels) {
-        return 'right';
-      }
-    }
-  }
-
-  return null;
+	const element = mouseEvent.target;
+
+	if (element instanceof HTMLElement) {
+		const width = element.clientWidth; // reflow
+		const x = !Number.isNaN(offsetX) ? offsetX : mouseEvent.offsetX; // reflow
+
+		if (width <= 0) {
+			return null;
+		}
+
+		if (!gapInPixels) {
+			return x / width > 0.5 ? 'right' : 'left';
+		} else {
+			if (x <= gapInPixels) {
+				return 'left';
+			} else if (x >= width - gapInPixels) {
+				return 'right';
+			}
+		}
+	}
+
+	return null;
 };
 
 export const getMousePositionVerticalRelativeByElement = (
-  mouseEvent: MouseEvent,
+	mouseEvent: MouseEvent,
 ): 'top' | 'bottom' | null => {
-  const element = mouseEvent.target;
-  if (element instanceof HTMLElement) {
-    const elementRect = element.getBoundingClientRect();
-    if (elementRect.height <= 0) {
-      return null;
-    }
-
-    const y = mouseEvent.clientY - elementRect.top;
-    return y / elementRect.height > 0.5 ? 'bottom' : 'top';
-  }
-
-  return null;
+	const element = mouseEvent.target;
+	if (element instanceof HTMLElement) {
+		const elementRect = element.getBoundingClientRect();
+		if (elementRect.height <= 0) {
+			return null;
+		}
+
+		const y = mouseEvent.clientY - elementRect.top;
+		return y / elementRect.height > 0.5 ? 'bottom' : 'top';
+	}
+
+	return null;
 };
 
 export const hasResizeHandler = ({
-  columnEndIndexTarget,
-  target,
+	columnEndIndexTarget,
+	target,
 }: {
-  columnEndIndexTarget: number;
-  target: HTMLElement;
+	columnEndIndexTarget: number;
+	target: HTMLElement;
 }): boolean => {
-  const tableElement = closestElement(target, 'table');
+	const tableElement = closestElement(target, 'table');
 
-  if (!tableElement) {
-    return false;
-  }
+	if (!tableElement) {
+		return false;
+	}
 
-  const query = [
-    `.${ClassName.RESIZE_HANDLE_DECORATION}`,
-    `[data-end-index="${columnEndIndexTarget}"]`,
-  ];
+	const query = [
+		`.${ClassName.RESIZE_HANDLE_DECORATION}`,
+		`[data-end-index="${columnEndIndexTarget}"]`,
+	];
 
-  const decorationElement = tableElement.querySelectorAll(query.join(''));
+	const decorationElement = tableElement.querySelectorAll(query.join(''));
 
-  if (!decorationElement || decorationElement.length === 0) {
-    return false;
-  }
+	if (!decorationElement || decorationElement.length === 0) {
+		return false;
+	}
 
-  return true;
+	return true;
 };
 
 export type TableDOMElements = {
-  wrapper: HTMLDivElement;
-  table: HTMLTableElement;
+	wrapper: HTMLDivElement;
+	table: HTMLTableElement;
 };
 
 export const getTree = (tr: HTMLTableRowElement): TableDOMElements | null => {
-  // pm renders into tbody, owned by react
-  const tbody = tr.parentElement;
-  if (!tbody) {
-    return null;
-  }
-
-  // rendered by react
-  const table = tbody.parentElement;
-  if (!table) {
-    return null;
-  }
-
-  // rendered by react
-  const wrapper = table.parentElement;
-  if (!wrapper) {
-    return null;
-  }
-
-  return {
-    wrapper: wrapper as HTMLDivElement,
-    table: table as HTMLTableElement,
-  };
+	// pm renders into tbody, owned by react
+	const tbody = tr.parentElement;
+	if (!tbody) {
+		return null;
+	}
+
+	// rendered by react
+	const table = tbody.parentElement;
+	if (!table) {
+		return null;
+	}
+
+	// rendered by react
+	const wrapper = table.parentElement;
+	if (!wrapper) {
+		return null;
+	}
+
+	return {
+		wrapper: wrapper as HTMLDivElement,
+		table: table as HTMLTableElement,
+	};
 };
 
 export const getTop = (element: HTMLElement | Window | undefined): number => {
-  if (!element || element instanceof Window) {
-    return 0;
-  }
+	if (!element || element instanceof Window) {
+		return 0;
+	}
 
-  return element?.getBoundingClientRect?.()?.top ?? 0;
+	return element?.getBoundingClientRect?.()?.top ?? 0;
 };
 
 export const findNearestCellIndexToPoint = (
-  x: number,
-  y: number,
+	x: number,
+	y: number,
 ): { row: number; col: number } | undefined => {
-  const elements = document.elementsFromPoint(x, y);
-  const cell = elements.find(
-    (el) =>
-      el.nodeName.toUpperCase() === 'TD' || el.nodeName.toUpperCase() === 'TH',
-  ) as HTMLTableCellElement | undefined;
-  const row = (cell?.parentElement ?? undefined) as
-    | HTMLTableRowElement
-    | undefined;
-
-  if (!Number.isFinite(row?.rowIndex) || !Number.isFinite(cell?.cellIndex)) {
-    return undefined;
-  }
-  return {
-    row: row!.rowIndex,
-    col: cell!.cellIndex,
-  };
+	const elements = document.elementsFromPoint(x, y);
+	const cell = elements.find(
+		(el) => el.nodeName.toUpperCase() === 'TD' || el.nodeName.toUpperCase() === 'TH',
+	) as HTMLTableCellElement | undefined;
+	const row = (cell?.parentElement ?? undefined) as HTMLTableRowElement | undefined;
+
+	if (!Number.isFinite(row?.rowIndex) || !Number.isFinite(cell?.cellIndex)) {
+		return undefined;
+	}
+	return {
+		row: row!.rowIndex,
+		col: cell!.cellIndex,
+	};
 };