@atlaskit/editor-plugin-table 0.0.0 → 0.0.1

package/src/plugins/table/pm-plugins/table-resizing/plugin.ts

@@ -0,0 +1,79 @@
+import classnames from 'classnames';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+
+import { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import {
+  TableCssClassName as ClassName,
+  ColumnResizingPluginState,
+} from '../../types';
+
+import { setResizeHandlePos } from './commands';
+import { handleMouseDown } from './event-handlers';
+import { createPluginState, getPluginState } from './plugin-factory';
+import { pluginKey } from './plugin-key';
+import { getResizeCellPos } from './utils';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type {
+  GetEditorContainerWidth,
+  GetEditorFeatureFlags,
+} from '@atlaskit/editor-common/types';
+
+export function createPlugin(
+  dispatch: Dispatch<ColumnResizingPluginState>,
+  { lastColumnResizable = true }: ColumnResizingPluginState,
+  getEditorContainerWidth: GetEditorContainerWidth,
+  getEditorFeatureFlags: GetEditorFeatureFlags,
+  editorAnalyticsAPI?: EditorAnalyticsAPI,
+) {
+  return new SafePlugin({
+    key: pluginKey,
+    state: createPluginState(dispatch, {
+      lastColumnResizable,
+      resizeHandlePos: null,
+      dragging: null,
+      lastClick: null,
+    }),
+
+    props: {
+      attributes(state) {
+        const pluginState = getPluginState(state);
+
+        return {
+          class: classnames(ClassName.RESIZING_PLUGIN, {
+            [ClassName.RESIZE_CURSOR]: pluginState.resizeHandlePos !== null,
+            [ClassName.IS_RESIZING]: !!pluginState.dragging,
+          }),
+        };
+      },
+
+      handleDOMEvents: {
+        mousedown(view, event) {
+          const { state } = view;
+          const resizeHandlePos =
+            // we're setting `resizeHandlePos` via command in unit tests
+            getPluginState(state).resizeHandlePos ||
+            getResizeCellPos(view, event as MouseEvent, lastColumnResizable);
+
+          const { dragging } = getPluginState(state);
+          if (resizeHandlePos !== null && !dragging) {
+            if (
+              handleMouseDown(
+                view,
+                event as MouseEvent,
+                resizeHandlePos,
+                getEditorContainerWidth,
+                getEditorFeatureFlags,
+                editorAnalyticsAPI,
+              )
+            ) {
+              const { state, dispatch } = view;
+              return setResizeHandlePos(resizeHandlePos)(state, dispatch);
+            }
+          }
+
+          return false;
+        },
+      },
+    },
+  });
+}

package/src/plugins/table/pm-plugins/table-resizing/reducer.ts

@@ -0,0 +1,40 @@
+import {
+  ColumnResizingPluginAction,
+  ColumnResizingPluginState,
+} from '../../types';
+
+export default (
+  pluginState: ColumnResizingPluginState,
+  action: ColumnResizingPluginAction,
+): ColumnResizingPluginState => {
+  switch (action.type) {
+    case 'STOP_RESIZING':
+      return {
+        ...pluginState,
+        resizeHandlePos: null,
+        dragging: null,
+      };
+
+    case 'SET_RESIZE_HANDLE_POSITION':
+      return {
+        ...pluginState,
+        resizeHandlePos: action.data.resizeHandlePos,
+      };
+
+    case 'SET_DRAGGING':
+      return {
+        ...pluginState,
+        dragging: action.data.dragging,
+      };
+
+    case 'SET_LAST_CLICK':
+      const { lastClick } = action.data;
+      return {
+        ...pluginState,
+        lastClick,
+        resizeHandlePos: lastClick ? pluginState.resizeHandlePos : null,
+      };
+    default:
+      return pluginState;
+  }
+};

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

@@ -0,0 +1,58 @@
+import { DOMSerializer, Node as PmNode } from 'prosemirror-model';
+
+import { getFragmentBackingArray } from '@atlaskit/editor-common/utils';
+
+type Col = Array<string | { [name: string]: string }>;
+
+export const generateColgroup = (table: PmNode): Col[] => {
+  const cols: Col[] = [];
+
+  table.content.firstChild!.content.forEach((cell) => {
+    const colspan = cell.attrs.colspan || 1;
+    if (Array.isArray(cell.attrs.colwidth)) {
+      // We slice here to guard against our colwidth array having more entries
+      // Than the we actually span. We'll patch the document at a later point.
+      cell.attrs.colwidth.slice(0, colspan).forEach((width) => {
+        cols.push(['col', width ? { style: `width: ${width}px;` } : {}]);
+      });
+    } else {
+      // When we have merged cells on the first row (firstChild),
+      // We want to ensure we're creating the appropriate amount of
+      // cols the table still has.
+      cols.push(...Array.from({ length: colspan }, (_) => ['col', {}]));
+    }
+  });
+
+  return cols;
+};
+
+export const insertColgroupFromNode = (
+  tableRef: HTMLTableElement,
+  table: PmNode,
+): HTMLCollection => {
+  let colgroup = tableRef.querySelector('colgroup') as HTMLElement;
+  if (colgroup) {
+    tableRef.removeChild(colgroup);
+  }
+
+  colgroup = renderColgroupFromNode(table);
+  tableRef.insertBefore(colgroup, tableRef.firstChild);
+
+  return colgroup.children;
+};
+
+export const hasTableBeenResized = (table: PmNode) => {
+  return !!getFragmentBackingArray(table.content.firstChild!.content).find(
+    (cell) => cell.attrs.colwidth,
+  );
+};
+
+function renderColgroupFromNode(table: PmNode): HTMLElement {
+  const rendered = DOMSerializer.renderSpec(document, [
+    'colgroup',
+    {},
+    ...generateColgroup(table),
+  ]);
+
+  return rendered.dom as HTMLElement;
+}

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

@@ -0,0 +1,122 @@
+import { Node as PMNode } from 'prosemirror-model';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { findDomRefAtPos } from 'prosemirror-utils';
+
+import { tableNewColumnMinWidth } from '@atlaskit/editor-common/styles';
+
+import { contentWidth } from './content-width';
+import { unitToNumber } from './unit-to-number';
+
+export interface ColumnState {
+  index: number;
+  width: number;
+  minWidth: number;
+}
+
+// Reads `width` and `minWidth` of each column from DOM and returns `ColumnState` containing those values
+export const getColumnStateFromDOM = (
+  cells: HTMLElement[],
+  index: number,
+  minWidth: number,
+): ColumnState => {
+  const width = calculateColumnWidth(cells, calculateColumnWidthCallback);
+
+  const minColumnWidth =
+    width < minWidth
+      ? // for newly created column (where width < minWidth) we set minWidth = tableNewColumnMinWidth (140px atm)
+        tableNewColumnMinWidth
+      : calculateColumnWidth(cells, calculateColumnMinWidthCallback(minWidth));
+
+  return {
+    index,
+    width: width < minWidth ? tableNewColumnMinWidth : width,
+    minWidth: minColumnWidth,
+  };
+};
+
+export const getFreeSpace = (state: ColumnState) => {
+  return Math.max(state.width - state.minWidth, 0);
+};
+
+// Returns DOM refs of all cells in a column by `columnIndex`
+export const getCellsRefsInColumn = (
+  columnIndex: number,
+  table: PMNode,
+  tableStart: number,
+  domAtPos: (pos: number) => { node: Node; offset: number },
+): HTMLElement[] => {
+  const map = TableMap.get(table);
+  const cellsPositions = map.cellsInRect({
+    left: columnIndex,
+    right: columnIndex + 1,
+    top: 0,
+    bottom: map.height,
+  });
+  const cells: HTMLElement[] = [];
+  cellsPositions.forEach((pos) => {
+    const col = findDomRefAtPos(pos + tableStart, domAtPos) as HTMLElement;
+    if (col) {
+      cells.push(col);
+    }
+  });
+  return cells;
+};
+
+// calculates column withs based on `cells` DOM refs
+export const calculateColumnWidth = (
+  cells: HTMLElement[],
+  calculateColumnWidthCb: (
+    css: CSSStyleDeclaration,
+    cellRef: HTMLElement,
+    colSpan: number,
+  ) => number,
+): number => {
+  let maxColWidth = 0;
+  let colSpanWidth = 0;
+
+  cells.forEach((cellRef) => {
+    const css = getComputedStyle(cellRef);
+    const colspan = Number(cellRef.getAttribute('colspan') || 1);
+
+    if (colspan > 1) {
+      colSpanWidth = calculateColumnWidthCb(css, cellRef, colspan);
+      return;
+    }
+
+    if (css) {
+      const colWidth = calculateColumnWidthCb(css, cellRef, colspan);
+      maxColWidth = Math.max(colWidth, maxColWidth);
+    }
+  });
+
+  return maxColWidth || colSpanWidth;
+};
+
+export const addContainerLeftRightPadding = (
+  amount: number,
+  css: CSSStyleDeclaration,
+): number =>
+  amount + unitToNumber(css.paddingLeft) + unitToNumber(css.paddingRight);
+
+function calculateColumnWidthCallback(css: CSSStyleDeclaration): number {
+  return unitToNumber(css.width);
+}
+
+function calculateColumnMinWidthCallback(
+  minColumnWidth: number,
+): (css: CSSStyleDeclaration, cellRef: HTMLElement, colSpan: number) => number {
+  return (css, cellRef, colSpan) => {
+    if (colSpan && colSpan > 1) {
+      return unitToNumber(css.width);
+    }
+
+    const { minWidth: minContentWidth } = contentWidth(cellRef, cellRef);
+    // Override the min width, if there is content that can't collapse
+    // Past a certain width.
+    return Math.max(
+      addContainerLeftRightPadding(minContentWidth, css),
+      minContentWidth,
+      minColumnWidth,
+    );
+  };
+}

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

@@ -0,0 +1,130 @@
+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'),
+): { minWidth: number; width: number } {
+  return calcContentWidth(elem, container || elem, canvas, colWidths);
+}
+
+function calcContentWidth(
+  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),
+  };
+}
+
+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,
+): 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);
+}

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

@@ -0,0 +1,176 @@
+import { EditorState } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+
+import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import {
+  tableCellBorderWidth,
+  tableCellPadding,
+  tableMarginTop,
+} from '@atlaskit/editor-common/styles';
+import { browser } from '@atlaskit/editor-common/utils';
+
+import {
+  closestElement,
+  containsClassName,
+  parsePx,
+} from '@atlaskit/editor-common/utils';
+import { updateOverflowShadows } from '../../../nodeviews/update-overflow-shadows';
+import { TableCssClassName as ClassName } from '../../../types';
+import { getRowHeights } from '../../../utils/row-controls';
+import { colWidthsForRow } from '../../../utils/column-controls';
+import { getPluginState as getMainPluginState } from '../../plugin-factory';
+
+export const updateControls = (
+  getEditorFeatureFlags: GetEditorFeatureFlags,
+) => (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 rightShadows = wrapper.parentElement.querySelectorAll<HTMLElement>(
+    `.${ClassName.TABLE_RIGHT_SHADOW}`,
+  );
+
+  const leftShadows = wrapper.parentElement.querySelectorAll<HTMLElement>(
+    `.${ClassName.TABLE_LEFT_SHADOW}`,
+  );
+
+  updateOverflowShadows(getEditorFeatureFlags)(
+    state,
+    wrapper,
+    tableRef,
+    rightShadows,
+    leftShadows,
+  );
+};
+
+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,
+  lastColumnResizable: boolean,
+): number | null => {
+  const target = event.target as HTMLElement;
+
+  if (!containsClassName(target, ClassName.RESIZE_HANDLE_DECORATION)) {
+    return null;
+  }
+
+  const tableCell = closestElement(target, 'td, th');
+
+  if (!tableCell) {
+    return null;
+  }
+
+  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 paddingTop =
+    parsePx(window.getComputedStyle(row).paddingTop || '') || 0;
+  const firstRowHeight = row.clientHeight - paddingTop - 2; /* border */
+
+  // firefox handles margin and padding differently
+  // when applied with tables
+  table.style.marginTop = `${
+    browser.gecko
+      ? firstRowHeight + tableCellPadding - tableCellBorderWidth
+      : tableMarginTop + firstRowHeight
+  }px`;
+};
+
+export const applyColWidthsToStickyRow = (
+  colGroup: HTMLTableColElement | null,
+  headerRow: HTMLTableRowElement,
+) => {
+  // sync column widths for the sticky row
+  const newCols = colWidthsForRow(colGroup, headerRow);
+
+  if (newCols) {
+    headerRow.style.gridTemplateColumns = newCols;
+  }
+};
+
+export const syncStickyRowToTable = (tableRef?: HTMLElement | null) => {
+  if (!tableRef) {
+    return;
+  }
+
+  const headerRow = tableRef.querySelector(
+    'tr[data-header-row]',
+  ) as HTMLTableRowElement;
+
+  if (!headerRow) {
+    return;
+  }
+
+  applyColWidthsToStickyRow(tableRef.querySelector('colgroup'), headerRow);
+  applyTableWidthToStickyRow(tableRef, headerRow);
+};
+
+export const applyTableWidthToStickyRow = (
+  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;
+  }
+};

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

@@ -0,0 +1,37 @@
+export {
+  generateColgroup,
+  insertColgroupFromNode,
+  hasTableBeenResized,
+} from './colgroup';
+export { contentWidth } from './content-width';
+export {
+  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,
+} from './resize-state';
+export {
+  tableLayoutToSize,
+  getLayoutSize,
+  getDefaultLayoutMaxWidth,
+  pointsAtCell,
+  currentColWidth,
+  domCellAround,
+} from './misc';
+export { updateControls, isClickNear, getResizeCellPos } from './dom';
+export { scale, scaleWithParent } from './scale-table';
+export type { ScaleOptions } from './scale-table';
+export type { ResizeState, ResizeStateWithAnalytics } from './types';
+export { resizeColumn } from './resize-column';