@atlaskit/editor-plugin-table 0.0.0 → 0.0.1

package/src/plugins/table/transforms/delete-columns.ts

@@ -0,0 +1,251 @@
+import { Node as PMNode } from 'prosemirror-model';
+import { Selection, Transaction } from 'prosemirror-state';
+import { TableMap, Rect } from '@atlaskit/editor-tables/table-map';
+import { findTable } from '@atlaskit/editor-tables/utils';
+
+import { CellAttributes } from '@atlaskit/adf-schema';
+import { AddColumnStep } from '@atlaskit/adf-schema/steps';
+
+import { setMeta } from './metadata';
+import { splitCellsInColumns } from './split';
+
+const deleteColumnsCustomStep = (rect: Rect) => (
+  tr: Transaction,
+): Transaction => {
+  const table = findTable(tr.selection);
+  if (!table) {
+    return tr;
+  }
+
+  // Need to split all the merge in the ranges (this is the current behaviour)
+  // Maybe is better to split only the last column?
+  // TODO: After talking with Roto about this behaviour, he likes when we dont split the columns, I am keeping this for consistency of the current implementation.
+  splitCellsInColumns(tr, table.pos, rect.left, rect.right);
+
+  // Delete the columns
+  let mapStart = tr.mapping.maps.length;
+  const originalDoc = tr.doc;
+  const deletedColumns = [];
+  for (let i = rect.left; i < rect.right; i++) {
+    const step = AddColumnStep.create(originalDoc, table.pos, i, true);
+    deletedColumns.push(i);
+    tr.step(step.map(tr.mapping.slice(mapStart))!);
+  }
+
+  const tablePosResult = tr.mapping.mapResult(table.pos);
+  if (tablePosResult.deleted) {
+    const pos = Math.min(tablePosResult.pos, tr.doc.nodeSize - 1);
+    tr.setSelection(Selection.near(tr.doc.resolve(pos)));
+  } else {
+    const newTable = tr.doc.nodeAt(tablePosResult.pos);
+    if (newTable) {
+      const cursorPos = getNextCursorPos(newTable, deletedColumns);
+      tr.setSelection(Selection.near(tr.doc.resolve(table.pos + cursorPos)));
+    }
+  }
+
+  return tr;
+};
+
+const deleteColumnsLegacy = (rect: Rect) => (tr: Transaction): Transaction => {
+  const table = findTable(tr.selection);
+  if (!table) {
+    return tr;
+  }
+
+  const columnsToDelete: number[] = [];
+  for (let i = rect.left; i < rect.right; i++) {
+    columnsToDelete.push(i);
+  }
+
+  if (!columnsToDelete.length) {
+    return tr;
+  }
+
+  const map = TableMap.get(table.node);
+  const rows: PMNode[] = [];
+  const seen: { [key: string]: boolean } = {};
+  const deletedCells: { [key: string]: boolean } = {};
+
+  for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
+    const rowCells: PMNode[] = [];
+    const row = table.node.child(rowIndex);
+
+    for (let colIndex = 0; colIndex < map.width; colIndex++) {
+      const cellPos = map.map[rowIndex * map.width + colIndex];
+      const cell = table.node.nodeAt(cellPos);
+      if (!cell) {
+        continue;
+      }
+      const cellsInColumn = map.cellsInRect({
+        left: colIndex,
+        top: 0,
+        right: colIndex + 1,
+        bottom: map.height,
+      });
+      if (columnsToDelete.indexOf(colIndex) === -1) {
+        // decrement colspans for col-spanning cells that overlap deleted columns
+        if (cellsInColumn.indexOf(cellPos) > -1 && !seen[cellPos]) {
+          let overlappingCols = 0;
+          columnsToDelete.forEach((colIndexToDelete) => {
+            if (
+              colIndex < colIndexToDelete &&
+              cell.attrs.colspan + colIndex - 1 >= colIndexToDelete
+            ) {
+              overlappingCols += 1;
+            }
+          });
+          if (overlappingCols > 0) {
+            const attrs: CellAttributes = {
+              ...cell.attrs,
+              colspan: cell.attrs.colspan - overlappingCols,
+            };
+            if (cell.attrs.colwidth) {
+              const minColIndex = Math.min(...columnsToDelete);
+              const pos =
+                minColIndex > 0 ? minColIndex - map.colCount(cellPos) : 0;
+              const colwidth = cell.attrs.colwidth.slice() || [];
+              colwidth.splice(pos, overlappingCols);
+              attrs.colwidth = colwidth;
+            }
+            const newCell = cell.type.createChecked(
+              attrs,
+              cell.content,
+              cell.marks,
+            );
+            rowCells.push(newCell);
+            seen[cellPos] = true;
+            continue;
+          }
+        } else if (deletedCells[cellPos]) {
+          // if we're removing a col-spanning cell, we need to add missing cells to columns to the right
+          const attrs: CellAttributes = {
+            ...cell.attrs,
+            colspan: 1,
+            rowspan: 1,
+          };
+          if (cell.attrs.colwidth) {
+            const pos = colIndex > 0 ? colIndex - map.colCount(cellPos) : 0;
+            attrs.colwidth = cell.attrs.colwidth.slice().splice(pos, 1);
+          }
+          const newCell = cell.type.createChecked(
+            attrs,
+            cell.type.schema.nodes.paragraph.createChecked(),
+            cell.marks,
+          );
+          rowCells.push(newCell);
+          continue;
+        }
+
+        // normal cells that we want to keep
+        if (!seen[cellPos]) {
+          seen[cellPos] = true;
+          rowCells.push(cell);
+        }
+      } else if (cellsInColumn.indexOf(cellPos) > -1) {
+        deletedCells[cellPos] = true;
+      }
+    }
+
+    if (rowCells.length) {
+      rows.push(row.type.createChecked(row.attrs, rowCells, row.marks));
+    }
+  }
+
+  if (!rows.length) {
+    return setMeta({ type: 'DELETE_COLUMNS', problem: 'EMPTY_TABLE' })(tr);
+  }
+
+  const newTable = table.node.type.createChecked(
+    table.node.attrs,
+    rows,
+    table.node.marks,
+  );
+
+  const fixedTable = fixRowSpans(newTable);
+  if (fixedTable === null) {
+    return setMeta({ type: 'DELETE_COLUMNS', problem: 'FIX_ROWSPANS' })(tr);
+  }
+
+  const cursorPos = getNextCursorPos(newTable, columnsToDelete);
+
+  return setMeta({ type: 'DELETE_COLUMNS' })(
+    tr
+      .replaceWith(table.pos, table.pos + table.node.nodeSize, fixedTable)
+      // move cursor to the left of the deleted columns if possible, otherwise - to the first column
+      .setSelection(Selection.near(tr.doc.resolve(table.pos + cursorPos))),
+  );
+};
+
+function getNextCursorPos(table: PMNode, deletedColumns: number[]): number {
+  const minColumn = Math.min(...deletedColumns);
+  const nextColumnWithCursor = minColumn > 0 ? minColumn - 1 : 0;
+  const map = TableMap.get(table);
+  return map.map[nextColumnWithCursor];
+}
+
+// returns an array of numbers, each number indicates the minimum rowSpan in each row
+function getMinRowSpans(table: PMNode): number[] {
+  const minRowSpans: number[] = [];
+  for (let rowIndex = 0; rowIndex < table.childCount; rowIndex++) {
+    const rowSpans: number[] = [];
+    const row = table.child(rowIndex);
+    for (let colIndex = 0; colIndex < row.childCount; colIndex++) {
+      const cell = row.child(colIndex);
+      rowSpans.push(cell.attrs.rowspan);
+    }
+    minRowSpans[rowIndex] = Math.min(...rowSpans);
+  }
+
+  return minRowSpans;
+}
+
+function fixRowSpans(table: PMNode): PMNode | null {
+  const map = TableMap.get(table);
+  const minRowSpans = getMinRowSpans(table);
+  if (!minRowSpans.some((rowspan) => rowspan > 1)) {
+    return table;
+  }
+
+  const rows: PMNode[] = [];
+  for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
+    const row = table.child(rowIndex);
+    if (minRowSpans[rowIndex] === 1) {
+      rows.push(row);
+    } else {
+      const rowCells: PMNode[] = [];
+      for (let colIndex = 0; colIndex < row.childCount; colIndex++) {
+        const cell = row.child(colIndex);
+        const rowspan = cell.attrs.rowspan - minRowSpans[rowIndex] + 1;
+        if (rowspan < 1) {
+          return null;
+        }
+        const newCell = cell.type.createChecked(
+          {
+            ...cell.attrs,
+            rowspan,
+          },
+          cell.content,
+          cell.marks,
+        );
+        rowCells.push(newCell);
+      }
+      rows.push(row.type.createChecked(row.attrs, rowCells, row.marks));
+    }
+  }
+
+  if (!rows.length) {
+    return null;
+  }
+
+  return table.type.createChecked(table.attrs, rows, table.marks);
+}
+
+export const deleteColumns = (rect: Rect, allowAddColumnCustomStep = false) => (
+  tr: Transaction,
+): Transaction => {
+  if (allowAddColumnCustomStep) {
+    return deleteColumnsCustomStep(rect)(tr);
+  }
+  return deleteColumnsLegacy(rect)(tr);
+};

package/src/plugins/table/transforms/delete-rows.ts

@@ -0,0 +1,150 @@
+import { Node as PMNode } from 'prosemirror-model';
+import { Selection, Transaction } from 'prosemirror-state';
+import { TableMap, Rect } from '@atlaskit/editor-tables/table-map';
+import { findTable } from '@atlaskit/editor-tables/utils';
+
+import { CellAttributes } from '@atlaskit/adf-schema';
+
+import { removeEmptyColumns } from './merge';
+import { setMeta } from './metadata';
+
+export const deleteRows = (
+  rect: Rect,
+  isHeaderRowRequired: boolean = false,
+) => (tr: Transaction): Transaction => {
+  const table = findTable(tr.selection);
+  if (!table) {
+    return tr;
+  }
+
+  const rowsToDelete: number[] = [];
+
+  const map = TableMap.get(table.node);
+
+  for (let i = rect.top; i < rect.bottom; i++) {
+    // skip header row if its required
+    if (isHeaderRowRequired) {
+      const cell = table.node.nodeAt(map.map[i * map.width]);
+      if (cell && cell.type !== cell.type.schema.nodes.tableHeader) {
+        rowsToDelete.push(i);
+      }
+    } else {
+      rowsToDelete.push(i);
+    }
+  }
+
+  if (!rowsToDelete.length) {
+    return tr;
+  }
+
+  const rows: PMNode[] = [];
+  const seen: { [key: string]: boolean } = {};
+  const deletedCells: { [key: string]: boolean } = {};
+
+  for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
+    const rowCells: PMNode[] = [];
+    const row = table.node.child(rowIndex);
+
+    for (let colIndex = 0; colIndex < map.width; colIndex++) {
+      const cellPos = map.map[rowIndex * map.width + colIndex];
+      const cell = table.node.nodeAt(cellPos);
+      if (!cell) {
+        continue;
+      }
+      const cellsInRow = map.cellsInRect({
+        left: 0,
+        top: rowIndex,
+        right: map.width,
+        bottom: rowIndex + 1,
+      });
+      if (rowsToDelete.indexOf(rowIndex) === -1 && !seen[cellPos]) {
+        // decrement rowspans for row-spanning cells that overlap deleted rows
+        if (cellsInRow.indexOf(cellPos) > -1) {
+          let overlappingRows = 0;
+          rowsToDelete.forEach((rowIndexToDelete) => {
+            if (
+              rowIndex < rowIndexToDelete &&
+              cell.attrs.rowspan + rowIndex - 1 >= rowIndexToDelete
+            ) {
+              overlappingRows += 1;
+            }
+          });
+          if (overlappingRows > 0) {
+            const newCell = cell.type.createChecked(
+              {
+                ...cell.attrs,
+                rowspan: cell.attrs.rowspan - overlappingRows,
+              },
+              cell.content,
+              cell.marks,
+            );
+            rowCells.push(newCell);
+            seen[cellPos] = true;
+            continue;
+          }
+        } else if (deletedCells[cellPos]) {
+          // if we're removing a row-spanning cell, we need to add missing cells to rows below
+          const attrs: CellAttributes = {
+            ...cell.attrs,
+            colspan: 1,
+            rowspan: 1,
+          };
+          if (cell.attrs.colwidth) {
+            const pos = colIndex > 0 ? colIndex - map.colCount(cellPos) : 0;
+            attrs.colwidth = cell.attrs.colwidth.slice().splice(pos, 1);
+          }
+          const newCell = cell.type.createChecked(
+            attrs,
+            cell.type.schema.nodes.paragraph.createChecked(),
+            cell.marks,
+          );
+          rowCells.push(newCell);
+          continue;
+        }
+
+        // normal cells that we want to keep
+        if (!seen[cellPos]) {
+          seen[cellPos] = true;
+          rowCells.push(cell);
+        }
+      } else if (cellsInRow.indexOf(cellPos) > -1) {
+        deletedCells[cellPos] = true;
+      }
+    }
+
+    if (rowCells.length) {
+      rows.push(row.type.createChecked(row.attrs, rowCells, row.marks));
+    }
+  }
+
+  if (!rows.length) {
+    return setMeta({ type: 'DELETE_ROWS', problem: 'EMPTY_TABLE' })(tr);
+  }
+
+  const newTable = table.node.type.createChecked(
+    table.node.attrs,
+    rows,
+    table.node.marks,
+  );
+  const fixedTable = removeEmptyColumns(newTable);
+  if (fixedTable === null) {
+    return setMeta({ type: 'DELETE_ROWS', problem: 'REMOVE_EMPTY_COLUMNS' })(
+      tr,
+    );
+  }
+  const cursorPos = getNextCursorPos(newTable, rowsToDelete);
+
+  return setMeta({ type: 'DELETE_ROWS' })(
+    tr
+      .replaceWith(table.pos, table.pos + table.node.nodeSize, fixedTable)
+      // move cursor before the deleted rows if possible, otherwise - to the first row
+      .setSelection(Selection.near(tr.doc.resolve(table.pos + cursorPos))),
+  );
+};
+
+function getNextCursorPos(table: PMNode, deletedRows: number[]): number {
+  const minRow = Math.min(...deletedRows);
+  const nextRowWithCursor = minRow > 0 ? minRow - 1 : 0;
+  const map = TableMap.get(table);
+  return map.map[nextRowWithCursor * map.width];
+}

package/src/plugins/table/transforms/fix-tables.ts

@@ -0,0 +1,296 @@
+import { Node as PMNode } from 'prosemirror-model';
+import { Transaction } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+
+import { TableLayout } from '@atlaskit/adf-schema';
+import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
+import {
+  akEditorDefaultLayoutWidth,
+  akEditorWideLayoutWidth,
+} from '@atlaskit/editor-shared-styles';
+
+// import { sendLogs } from '../../../utils/sendLogs';
+// import { sendLogs } from '@atlaskit/editor-core/src/utils/sendLogs';
+import { sendLogs } from '../todo-stubs';
+import {
+  calculateColumnWidth,
+  contentWidth,
+  getCellsRefsInColumn,
+  getLayoutSize,
+} from '../pm-plugins/table-resizing/utils';
+import { ReportInvalidNodeAttrs } from '../types';
+
+export const fireAnalytics = (properties = {}) =>
+  sendLogs({
+    events: [
+      {
+        name: 'atlaskit.fabric.editor.fixtable',
+        product: 'atlaskit',
+        properties,
+        serverTime: new Date().getTime(),
+        server: 'local',
+        user: '-',
+      },
+    ],
+  });
+
+const validateTableCellNodeAttrs = (
+  {
+    colspan,
+    rowspan,
+    tableLocalId,
+  }: { colspan?: number; rowspan?: number; tableLocalId: string },
+  reportInvalidTableCellSpanAttrs: ReportInvalidNodeAttrs,
+): void => {
+  if (colspan && colspan < 0) {
+    reportInvalidTableCellSpanAttrs({
+      nodeType: 'tableCell',
+      attribute: 'colspan',
+      reason: 'negative value',
+      tableLocalId,
+      spanValue: colspan,
+    });
+  }
+
+  if (rowspan && rowspan < 0) {
+    reportInvalidTableCellSpanAttrs({
+      nodeType: 'tableCell',
+      attribute: 'rowspan',
+      reason: 'negative value',
+      tableLocalId,
+      spanValue: rowspan,
+    });
+  }
+  return;
+};
+
+// We attempt to patch the document when we have extra, unneeded, column widths
+// Take this node for example:
+//
+//    ['td', { colwidth: [100, 100, 100], colspan: 2 }]
+//
+// This row only spans two columns, yet it contains widths for 3.
+// We remove the third width here, assumed duplicate content.
+export const removeExtraneousColumnWidths = (
+  node: PMNode,
+  basePos: number,
+  tr: Transaction,
+  reportInvalidTableCellSpanAttrs?: ReportInvalidNodeAttrs,
+): boolean => {
+  let hasProblems = false;
+
+  tr = replaceCells(tr, node, basePos, (cell) => {
+    const { colwidth, colspan, rowspan } = cell.attrs;
+
+    if (reportInvalidTableCellSpanAttrs) {
+      validateTableCellNodeAttrs(
+        { colspan, rowspan, tableLocalId: node.attrs.localId },
+        reportInvalidTableCellSpanAttrs,
+      );
+    }
+
+    if (colwidth && colwidth.length > colspan) {
+      hasProblems = true;
+      return cell.type.createChecked(
+        {
+          ...cell.attrs,
+          colwidth: colwidth.slice(0, colspan),
+        },
+        cell.content,
+        cell.marks,
+      );
+    }
+
+    return cell;
+  });
+
+  if (hasProblems) {
+    fireAnalytics({ message: 'removeExtraneousColumnWidths' });
+    return true;
+  }
+
+  return false;
+};
+
+export const fixTables = (
+  tr: Transaction,
+  reportInvalidTableCellSpanAttrs?: ReportInvalidNodeAttrs,
+): Transaction | undefined => {
+  let hasProblems = false;
+  tr.doc.descendants((node, pos) => {
+    if (node.type.name === 'table') {
+      // in the unlikely event of having to fix multiple tables at the same time
+      hasProblems = removeExtraneousColumnWidths(
+        node,
+        tr.mapping.map(pos),
+        tr,
+        reportInvalidTableCellSpanAttrs,
+      );
+    }
+  });
+
+  if (hasProblems) {
+    return tr;
+  }
+};
+
+// When we get a table with an 'auto' attribute, we want to:
+// 1. render with table-layout: auto
+// 2. capture the column widths
+// 3. set the column widths as attributes, and remove the 'auto' attribute,
+//    so the table renders the same, but is now fixed-width
+//
+// This can be used to migrate table appearances from other sources that are
+// usually rendered with 'auto'.
+//
+// We use this when migrating TinyMCE tables for Confluence, for example:
+// https://pug.jira-dev.com/wiki/spaces/AEC/pages/3362882215/How+do+we+map+TinyMCE+tables+to+Fabric+tables
+export const fixAutoSizedTable = (
+  view: EditorView,
+  tableNode: PMNode,
+  tableRef: HTMLTableElement,
+  tablePos: number,
+  opts: { containerWidth: number },
+): Transaction => {
+  let { tr } = view.state;
+  const domAtPos = view.domAtPos.bind(view);
+  const tableStart = tablePos + 1;
+  const colWidths = parseDOMColumnWidths(
+    domAtPos,
+    tableNode,
+    tableStart,
+    tableRef,
+  );
+  const totalContentWidth = colWidths.reduce(
+    (acc, current) => acc + current,
+    0,
+  );
+  const tableLayout = getLayoutBasedOnWidth(totalContentWidth);
+  const maxLayoutSize = getLayoutSize(tableLayout, opts.containerWidth, {});
+
+  // Content width will generally not meet the constraints of the layout
+  // whether it be below or above, so we scale our columns widths
+  // to meet these requirements
+  let scale = 1;
+  if (totalContentWidth !== maxLayoutSize) {
+    scale = maxLayoutSize / totalContentWidth;
+  }
+
+  const scaledColumnWidths = colWidths.map((width) =>
+    Math.floor(width * scale),
+  );
+
+  tr = replaceCells(tr, tableNode, tablePos, (cell, _rowIndex, colIndex) => {
+    const newColWidths = scaledColumnWidths.slice(
+      colIndex,
+      colIndex + cell.attrs.colspan,
+    );
+    return cell.type.createChecked(
+      {
+        ...cell.attrs,
+        colwidth: newColWidths.length ? newColWidths : null,
+      },
+      cell.content,
+      cell.marks,
+    );
+  });
+
+  // clear autosizing on the table node
+  return tr
+    .setNodeMarkup(tablePos, undefined, {
+      ...tableNode.attrs,
+      layout: tableLayout,
+      __autoSize: false,
+    })
+    .setMeta('addToHistory', false);
+};
+
+const getLayoutBasedOnWidth = (totalWidth: number): TableLayout => {
+  if (totalWidth > akEditorWideLayoutWidth) {
+    return 'full-width';
+  } else if (
+    totalWidth > akEditorDefaultLayoutWidth &&
+    totalWidth < akEditorWideLayoutWidth
+  ) {
+    return 'wide';
+  } else {
+    return 'default';
+  }
+};
+
+function parseDOMColumnWidths(
+  domAtPos: (pos: number) => { node: Node; offset: number },
+  tableNode: PMNode,
+  tableStart: number,
+  tableRef: HTMLTableElement,
+): Array<number> {
+  const row = tableRef.querySelector('tr');
+
+  if (!row) {
+    return [];
+  }
+
+  let cols: Array<number> = [];
+
+  for (let col = 0; col < row.childElementCount; col++) {
+    const currentCol = row.children[col];
+    const colspan = Number(currentCol.getAttribute('colspan') || 1);
+    for (let span = 0; span < colspan; span++) {
+      const colIdx = col + span;
+      const cells = getCellsRefsInColumn(
+        colIdx,
+        tableNode,
+        tableStart,
+        domAtPos,
+      );
+      const colWidth = calculateColumnWidth(cells, (_, col) => {
+        return contentWidth(col as HTMLElement, tableRef).width;
+      });
+
+      cols[colIdx] = Math.max(colWidth, tableCellMinWidth);
+    }
+  }
+
+  return cols;
+}
+
+// TODO: move to prosemirror-utils
+const replaceCells = (
+  tr: Transaction,
+  table: PMNode,
+  tablePos: number,
+  modifyCell: (cell: PMNode, rowIndex: number, colIndex: number) => PMNode,
+): Transaction => {
+  const rows: PMNode[] = [];
+  let modifiedCells = 0;
+  for (let rowIndex = 0; rowIndex < table.childCount; rowIndex++) {
+    const row = table.child(rowIndex);
+    const cells: PMNode[] = [];
+
+    for (let colIndex = 0; colIndex < row.childCount; colIndex++) {
+      const cell = row.child(colIndex);
+
+      // FIXME
+      // The rowIndex and colIndex are not accurate in a merged cell scenario
+      // e.g. table with 5 columns might have only one cell in a row, colIndex will be 1, where it should be 4
+      const node = modifyCell(cell, rowIndex, colIndex);
+      if (node.sameMarkup(cell) === false) {
+        modifiedCells++;
+      }
+      cells.push(node);
+    }
+
+    if (cells.length) {
+      rows.push(row.type.createChecked(row.attrs, cells, row.marks));
+    }
+  }
+
+  // Check if the table has changed before replacing.
+  // If no cells are modified our counter will be zero.
+  if (rows.length && modifiedCells !== 0) {
+    const newTable = table.type.createChecked(table.attrs, rows, table.marks);
+    return tr.replaceWith(tablePos, tablePos + table.nodeSize, newTable);
+  }
+
+  return tr;
+};

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

@@ -0,0 +1,7 @@
+export { mergeCells, canMergeCells, removeEmptyColumns } from './merge';
+export { fireAnalytics, fixTables, fixAutoSizedTable } from './fix-tables';
+export { deleteColumns } from './delete-columns';
+export { deleteRows } from './delete-rows';
+export { updateColumnWidths } from './column-width';
+export { setMeta } from './metadata';
+export { replaceSelectedTable } from './replace-table';