@atlaskit/editor-plugin-table 0.0.0 → 0.0.1

package/src/plugins/table/utils/index.ts

@@ -0,0 +1,69 @@
+export {
+  getSelectedColumnIndexes,
+  getSelectedRowIndexes,
+  normalizeSelection,
+  isSelectionUpdated,
+} from './selection';
+export {
+  findControlsHoverDecoration,
+  createControlsHoverDecoration,
+  createColumnControlsDecoration,
+  createColumnSelectedDecoration,
+  createCellHoverDecoration,
+  updateDecorations,
+  createResizeHandleDecoration,
+  createColumnLineResize,
+} from './decoration';
+export {
+  isIsolating,
+  containsHeaderColumn,
+  containsHeaderRow,
+  checkIfHeaderColumnEnabled,
+  checkIfHeaderRowEnabled,
+  checkIfNumberColumnEnabled,
+  isLayoutSupported,
+  getTableWidth,
+  tablesHaveDifferentColumnWidths,
+  tablesHaveDifferentNoOfColumns,
+} from './nodes';
+export {
+  unwrapContentFromTable,
+  removeTableFromFirstChild,
+  removeTableFromLastChild,
+  transformSliceToRemoveOpenTable,
+  transformSliceToCorrectEmptyTableCells,
+  transformSliceToFixHardBreakProblemOnCopyFromCell,
+} from './paste';
+export {
+  isCell,
+  isCornerButton,
+  isInsertRowButton,
+  isColumnControlsDecorations,
+  isTableControlsButton,
+  isTableContainerOrWrapper,
+  isRowControlsButton,
+  getColumnOrRowIndex,
+  getMousePositionHorizontalRelativeByElement,
+  getMousePositionVerticalRelativeByElement,
+  updateResizeHandles,
+  isResizeHandleDecoration,
+  hasResizeHandler,
+} from './dom';
+export {
+  getColumnsWidths,
+  isColumnDeleteButtonVisible,
+  getColumnDeleteButtonParams,
+  getColumnClassNames,
+} from './column-controls';
+export {
+  getRowHeights,
+  isRowDeleteButtonVisible,
+  getRowDeleteButtonParams,
+  getRowsParams,
+  getRowClassNames,
+  copyPreviousRow,
+} from './row-controls';
+export type { RowParams } from './row-controls';
+export { getSelectedTableInfo, getSelectedCellInfo } from './analytics';
+export { getMergedCellsPositions } from './table';
+export { updatePluginStateDecorations } from './update-plugin-state-decorations';

package/src/plugins/table/utils/nodes.ts

@@ -0,0 +1,140 @@
+import { Node as PmNode } from 'prosemirror-model';
+import { EditorState, Selection } from 'prosemirror-state';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { hasParentNodeOfType } from 'prosemirror-utils';
+import { findTable } from '@atlaskit/editor-tables/utils';
+
+import { pluginKey } from '../pm-plugins/plugin-key';
+
+export const isIsolating = (node: PmNode): boolean => {
+  return !!node.type.spec.isolating;
+};
+
+export const containsHeaderColumn = (table: PmNode): boolean => {
+  const map = TableMap.get(table);
+  // Get cell positions for first column.
+  const cellPositions = map.cellsInRect({
+    left: 0,
+    top: 0,
+    right: 1,
+    bottom: map.height,
+  });
+
+  for (let i = 0; i < cellPositions.length; i++) {
+    try {
+      const cell = table.nodeAt(cellPositions[i]);
+      if (cell && cell.type !== table.type.schema.nodes.tableHeader) {
+        return false;
+      }
+    } catch (e) {
+      return false;
+    }
+  }
+
+  return true;
+};
+
+export const containsHeaderRow = (table: PmNode): boolean => {
+  const map = TableMap.get(table);
+  for (let i = 0; i < map.width; i++) {
+    const cell = table.nodeAt(map.map[i]);
+    if (cell && cell.type !== table.type.schema.nodes.tableHeader) {
+      return false;
+    }
+  }
+  return true;
+};
+
+export const checkIfHeaderColumnEnabled = (selection: Selection): boolean =>
+  filterNearSelection(selection, findTable, containsHeaderColumn, false);
+
+export const checkIfHeaderRowEnabled = (selection: Selection): boolean =>
+  filterNearSelection(selection, findTable, containsHeaderRow, false);
+
+export const checkIfNumberColumnEnabled = (selection: Selection): boolean =>
+  filterNearSelection(
+    selection,
+    findTable,
+    (table) => !!table.attrs.isNumberColumnEnabled,
+    false,
+  );
+
+export const isLayoutSupported = (state: EditorState): boolean => {
+  const { permittedLayouts } = pluginKey.getState(state).pluginConfig;
+  const { bodiedExtension, layoutSection, expand } = state.schema.nodes;
+
+  return (
+    !hasParentNodeOfType([expand, layoutSection, bodiedExtension])(
+      state.selection,
+    ) &&
+    permittedLayouts &&
+    (permittedLayouts === 'all' ||
+      (permittedLayouts.indexOf('default') > -1 &&
+        permittedLayouts.indexOf('wide') > -1 &&
+        permittedLayouts.indexOf('full-page') > -1))
+  );
+};
+
+export const getTableWidth = (node: PmNode) => {
+  return getTableWidths(node).reduce((acc, current) => acc + current, 0);
+};
+
+export const tablesHaveDifferentColumnWidths = (
+  currentTable: PmNode,
+  previousTable: PmNode,
+): boolean => {
+  let currentTableWidths = getTableWidths(currentTable);
+  let previousTableWidths = getTableWidths(previousTable);
+
+  if (currentTableWidths.length !== previousTableWidths.length) {
+    return true;
+  }
+
+  const sameWidths = currentTableWidths.every(
+    (value: number, index: number) => {
+      return value === previousTableWidths[index];
+    },
+  );
+
+  return sameWidths === false;
+};
+
+export const tablesHaveDifferentNoOfColumns = (
+  currentTable: PmNode,
+  previousTable: PmNode,
+): boolean => {
+  const prevMap = TableMap.get(previousTable);
+  const currentMap = TableMap.get(currentTable);
+
+  return prevMap.width !== currentMap.width;
+};
+
+function filterNearSelection<T, U>(
+  selection: Selection,
+  findNode: (selection: Selection) => { pos: number; node: PmNode } | undefined,
+  predicate: (node: PmNode, pos?: number) => T,
+  defaultValue: U,
+): T | U {
+  const found = findNode(selection);
+  if (!found) {
+    return defaultValue;
+  }
+
+  return predicate(found.node, found.pos);
+}
+
+function getTableWidths(node: PmNode): number[] {
+  if (!node.content.firstChild) {
+    return [];
+  }
+
+  let tableWidths: Array<number> = [];
+  node.content.firstChild.content.forEach((cell) => {
+    if (Array.isArray(cell.attrs.colwidth)) {
+      const colspan = cell.attrs.colspan || 1;
+      tableWidths.push(...cell.attrs.colwidth.slice(0, colspan));
+    }
+  });
+
+  return tableWidths;
+}

package/src/plugins/table/utils/paste.ts

@@ -0,0 +1,164 @@
+import { Fragment, Node as PMNode, Schema, Slice } from 'prosemirror-model';
+import { EditorState } from 'prosemirror-state';
+import { flatten } from 'prosemirror-utils';
+
+// import { flatmap, mapSlice } from '@atlaskit/editor-core/src/utils/slice';
+import { flatmap, mapSlice } from '@atlaskit/editor-common/utils';
+
+import { getPluginState } from '../pm-plugins/plugin-factory';
+
+// lifts up the content of each cell, returning an array of nodes
+export const unwrapContentFromTable = (
+  maybeTable: PMNode,
+): PMNode | PMNode[] => {
+  const { schema } = maybeTable.type;
+  if (maybeTable.type === schema.nodes.table) {
+    const content: PMNode[] = [];
+    const { tableCell, tableHeader } = schema.nodes;
+    maybeTable.descendants((maybeCell) => {
+      if (maybeCell.type === tableCell || maybeCell.type === tableHeader) {
+        content.push(...flatten(maybeCell, false).map((child) => child.node));
+      }
+      return true;
+    });
+    return content;
+  }
+  return maybeTable;
+};
+
+export const removeTableFromFirstChild = (
+  node: PMNode,
+  i: number,
+): PMNode | PMNode[] => {
+  return i === 0 ? unwrapContentFromTable(node) : node;
+};
+
+export const removeTableFromLastChild = (
+  node: PMNode,
+  i: number,
+  fragment: Fragment,
+): PMNode | PMNode[] => {
+  return i === fragment.childCount - 1 ? unwrapContentFromTable(node) : node;
+};
+
+/**
+ * When we copy from a table cell with a hardBreak at the end,
+ * the slice generated will come with a hardBreak outside of the table.
+ * This code will look for that pattern and fix it.
+ */
+export const transformSliceToFixHardBreakProblemOnCopyFromCell = (
+  slice: Slice,
+  schema: Schema,
+): Slice => {
+  const { paragraph, table, hardBreak } = schema.nodes;
+  const emptyParagraphNode = paragraph.createAndFill();
+
+  const hardBreakNode = hardBreak?.createAndFill();
+  const paragraphNodeSize = emptyParagraphNode
+    ? emptyParagraphNode.nodeSize
+    : 0;
+  const hardBreakNodeSize = hardBreakNode ? hardBreakNode.nodeSize : 0;
+  const paragraphWithHardBreakSize = paragraphNodeSize + hardBreakNodeSize;
+
+  if (
+    slice.content.childCount === 2 &&
+    slice.content.firstChild &&
+    slice.content.lastChild &&
+    slice.content.firstChild.type === table &&
+    slice.content.lastChild.type === paragraph &&
+    slice.content.lastChild.nodeSize === paragraphWithHardBreakSize
+  ) {
+    const nodes = unwrapContentFromTable(slice.content.firstChild);
+    if (nodes instanceof Array) {
+      return new Slice(
+        Fragment.from(
+          // keep only the content and discard the hardBreak
+          nodes[0],
+        ),
+        slice.openStart,
+        slice.openEnd,
+      );
+    }
+  }
+
+  return slice;
+};
+
+export const transformSliceToRemoveOpenTable = (
+  slice: Slice,
+  schema: Schema,
+): Slice => {
+  // we're removing the table, tableRow and tableCell reducing the open depth by 3
+  const depthDecrement = 3;
+
+  // Case 1: A slice entirely within a single CELL
+  if (
+    // starts and ends inside of a cell
+    slice.openStart >= 4 &&
+    slice.openEnd >= 4 &&
+    // slice is a table node
+    slice.content.childCount === 1 &&
+    slice.content.firstChild!.type === schema.nodes.table
+  ) {
+    // prosemirror-view has a bug that it duplicates table entry when selecting multiple paragraphs in a table cell.
+    // https://github.com/ProseMirror/prosemirror/issues/1270
+    // The structure becomes
+    // table(genuine) > tableRow(genuine) > table(duplicated) > tableRow(duplicated) > tableCell/tableHeader(genuine) > contents(genuine)
+    // As we are removing wrapping table anyway, we keep duplicated table and tableRow for simplicity
+    let cleaned = slice;
+    if (
+      slice.content.firstChild?.content?.firstChild?.content?.firstChild
+        ?.type === schema.nodes.table
+    ) {
+      cleaned = new Slice(
+        slice.content.firstChild.content.firstChild.content,
+        slice.openStart - 2,
+        slice.openEnd - 2,
+      );
+    }
+
+    return new Slice(
+      flatmap(cleaned.content, unwrapContentFromTable),
+      cleaned.openStart - depthDecrement,
+      cleaned.openEnd - depthDecrement,
+    );
+  }
+
+  // Case 2: A slice starting within a CELL and ending outside the table
+  if (
+    // starts inside of a cell but ends outside of the starting table
+    slice.openStart >= 4 &&
+    // slice starts from a table node (and spans across more than one node)
+    slice.content.childCount > 1 &&
+    slice.content.firstChild?.type === schema.nodes.table
+  ) {
+    // repoint the slice's cutting depth so that cell content where the slice starts
+    // does not get lifted out of the cell on paste
+    return new Slice(slice.content, 1, slice.openEnd);
+  }
+
+  return slice;
+};
+
+export const transformSliceToCorrectEmptyTableCells = (
+  slice: Slice,
+  schema: Schema,
+): Slice => {
+  const { tableCell, tableHeader } = schema.nodes;
+  return mapSlice(slice, (node) => {
+    if (
+      node &&
+      (node.type === tableCell || node.type === tableHeader) &&
+      !node.content.childCount
+    ) {
+      return node.type.createAndFill(node.attrs) || node;
+    }
+
+    return node;
+  });
+};
+
+export function isHeaderRowRequired(state: EditorState) {
+  const tableState = getPluginState(state);
+  return tableState && tableState.pluginConfig.isHeaderRowRequired;
+}

package/src/plugins/table/utils/referentiality.ts

@@ -0,0 +1,24 @@
+import { EditorState } from 'prosemirror-state';
+
+export const isReferencedSource = (state: EditorState, localId: string) => {
+  let found = false;
+
+  state.doc.descendants((node) => {
+    if (found) {
+      return false;
+    }
+
+    const dataConsumer = node.marks.find(
+      (mark) => mark.type === state.schema.marks.dataConsumer,
+    );
+
+    if (!dataConsumer) {
+      return true;
+    }
+
+    found = (dataConsumer.attrs.sources || []).includes(localId);
+    return !found;
+  });
+
+  return found;
+};

package/src/plugins/table/utils/row-controls.ts

@@ -0,0 +1,238 @@
+import { Node as PMNode, Schema } from 'prosemirror-model';
+import { Selection, Transaction } from 'prosemirror-state';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { safeInsert } from 'prosemirror-utils';
+import {
+  findTable,
+  getSelectionRect,
+  isRowSelected,
+  isTableSelected,
+} from '@atlaskit/editor-tables/utils';
+
+// import { parsePx } from '@atlaskit/editor-core/src/utils/dom';
+import { parsePx } from '@atlaskit/editor-common/utils';
+import { TableCssClassName as ClassName } from '../types';
+import { tableDeleteButtonSize } from '../ui/consts';
+
+export interface RowParams {
+  startIndex: number;
+  endIndex: number;
+  height: number;
+}
+
+export const getRowHeights = (tableRef: HTMLTableElement): number[] => {
+  const heights: number[] = [];
+  if (tableRef.lastChild) {
+    const rows = tableRef.lastChild.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;
+};
+
+export const getRowDeleteButtonParams = (
+  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 };
+};
+
+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,
+): 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(' ');
+};
+
+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 = [];
+  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);
+};