@atlaskit/editor-plugin-table 0.0.0 → 0.0.1

package/dist/es2019/plugins/table/transforms/delete-rows.js

@@ -0,0 +1,135 @@
+import { Selection } from 'prosemirror-state';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { findTable } from '@atlaskit/editor-tables/utils';
+import { removeEmptyColumns } from './merge';
+import { setMeta } from './metadata';
+export const deleteRows = (rect, isHeaderRowRequired = false) => tr => {
+  const table = findTable(tr.selection);
+
+  if (!table) {
+    return tr;
+  }
+
+  const rowsToDelete = [];
+  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 = [];
+  const seen = {};
+  const deletedCells = {};
+
+  for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
+    const rowCells = [];
+    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 = { ...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, deletedRows) {
+  const minRow = Math.min(...deletedRows);
+  const nextRowWithCursor = minRow > 0 ? minRow - 1 : 0;
+  const map = TableMap.get(table);
+  return map.map[nextRowWithCursor * map.width];
+}

package/dist/es2019/plugins/table/transforms/fix-tables.js

@@ -0,0 +1,218 @@
+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';
+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
+}, reportInvalidTableCellSpanAttrs) => {
+  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, basePos, tr, reportInvalidTableCellSpanAttrs) => {
+  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, reportInvalidTableCellSpanAttrs) => {
+  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, tableNode, tableRef, tablePos, opts) => {
+  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 => {
+  if (totalWidth > akEditorWideLayoutWidth) {
+    return 'full-width';
+  } else if (totalWidth > akEditorDefaultLayoutWidth && totalWidth < akEditorWideLayoutWidth) {
+    return 'wide';
+  } else {
+    return 'default';
+  }
+};
+
+function parseDOMColumnWidths(domAtPos, tableNode, tableStart, tableRef) {
+  const row = tableRef.querySelector('tr');
+
+  if (!row) {
+    return [];
+  }
+
+  let cols = [];
+
+  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, tableRef).width;
+      });
+      cols[colIdx] = Math.max(colWidth, tableCellMinWidth);
+    }
+  }
+
+  return cols;
+} // TODO: move to prosemirror-utils
+
+
+const replaceCells = (tr, table, tablePos, modifyCell) => {
+  const rows = [];
+  let modifiedCells = 0;
+
+  for (let rowIndex = 0; rowIndex < table.childCount; rowIndex++) {
+    const row = table.child(rowIndex);
+    const cells = [];
+
+    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/dist/es2019/plugins/table/transforms/index.js

@@ -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';

package/dist/es2019/plugins/table/transforms/merge.js

@@ -0,0 +1,312 @@
+import { Fragment } from 'prosemirror-model';
+import { Selection } from 'prosemirror-state';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { findTable, getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { setMeta } from './metadata'; // re-creates table node with merged cells
+
+export function mergeCells(tr) {
+  const {
+    selection
+  } = tr;
+
+  if (!(selection instanceof CellSelection) || !canMergeCells(tr)) {
+    return tr;
+  }
+
+  const rect = getSelectionRect(selection);
+  const table = findTable(selection);
+  const map = TableMap.get(table.node);
+  const seen = [];
+  const selectedCells = map.cellsInRect(rect);
+  let mergedCellPos;
+  const rows = [];
+
+  for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
+    const rowCells = [];
+    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 || seen.indexOf(cellPos) > -1) {
+        continue;
+      }
+
+      seen.push(cellPos); // merged cell
+
+      if (colIndex === rect.left && rowIndex === rect.top) {
+        mergedCellPos = cellPos; // merge content of the selected cells, dropping empty cells
+
+        let content = isEmptyCell(cell) ? Fragment.empty : cell.content;
+        const seenContent = [mergedCellPos];
+
+        for (let i = rect.top; i < rect.bottom; i++) {
+          for (let j = rect.left; j < rect.right; j++) {
+            const pos = map.map[i * map.width + j];
+
+            if (seenContent.indexOf(pos) === -1) {
+              seenContent.push(pos);
+              const copyCell = table.node.nodeAt(pos);
+
+              if (copyCell && !isEmptyCell(copyCell)) {
+                content = content.append(copyCell.content);
+              }
+            }
+          }
+        }
+
+        const rowspan = rect.bottom - rect.top;
+
+        if (rowspan < 1) {
+          return setMeta({
+            type: 'MERGE_CELLS',
+            problem: 'NEGATIVE_ROWSPAN'
+          })(tr);
+        } // update colspan and rowspan of the merged cell to span the selection
+
+
+        const attrs = addColSpan({ ...cell.attrs,
+          rowspan
+        }, cell.attrs.colspan, rect.right - rect.left - cell.attrs.colspan);
+        const newCell = content === Fragment.empty ? cell.type.createAndFill(attrs, content, cell.marks) : cell.type.createChecked(attrs, content, cell.marks);
+        rowCells.push(newCell);
+      } else if (selectedCells.indexOf(cellPos) === -1) {
+        // if its one of the selected cells, but not the merged cell, we get rid of it
+        // otherwise we keep the cell
+        rowCells.push(cell);
+      }
+    }
+
+    if (rowCells.length) {
+      rows.push(row.type.createChecked(row.attrs, rowCells, row.marks));
+    } else {
+      // empty row, we need to fix rowspans for rows above the current one
+      for (let i = rows.length - 1; i >= 0; i--) {
+        const prevRow = rows[i];
+        const cells = [];
+        let rowChanged = false;
+
+        for (let j = 0; j < prevRow.childCount; j++) {
+          const cell = prevRow.child(j);
+          const {
+            rowspan
+          } = cell.attrs;
+
+          if (rowspan && rowspan + i - 1 >= rows.length) {
+            rowChanged = true;
+
+            if (rowspan < 2) {
+              return setMeta({
+                type: 'MERGE_CELLS',
+                problem: 'NEGATIVE_ROWSPAN'
+              })(tr);
+            }
+
+            cells.push(cell.type.createChecked({ ...cell.attrs,
+              rowspan: rowspan - 1
+            }, cell.content, cell.marks));
+          } else {
+            cells.push(cell);
+          }
+        }
+
+        if (rowChanged) {
+          rows[i] = row.type.createChecked(prevRow.attrs, cells, prevRow.marks);
+        }
+      }
+    }
+  } // empty tables? cancel merging like nothing happened
+
+
+  if (!rows.length) {
+    return setMeta({
+      type: 'MERGE_CELLS',
+      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: 'MERGE_CELLS',
+      problem: 'REMOVE_EMPTY_COLUMNS'
+    })(tr);
+  }
+
+  return setMeta({
+    type: 'MERGE_CELLS'
+  })(tr.replaceWith(table.pos, table.pos + table.node.nodeSize, fixedTable).setSelection(Selection.near(tr.doc.resolve((mergedCellPos || 0) + table.start))));
+}
+export function canMergeCells(tr) {
+  const {
+    selection
+  } = tr;
+
+  if (!(selection instanceof CellSelection) || selection.$anchorCell.pos === selection.$headCell.pos) {
+    return false;
+  }
+
+  const rect = getSelectionRect(selection);
+
+  if (!rect) {
+    return false;
+  }
+
+  const table = selection.$anchorCell.node(-1);
+  const map = TableMap.get(table);
+
+  if (cellsOverlapRectangle(map, rect)) {
+    return false;
+  }
+
+  return true;
+}
+
+function isEmptyCell(cell) {
+  const {
+    content
+  } = cell;
+  return content.childCount === 1 && content.firstChild && content.firstChild.isTextblock && content.firstChild.childCount === 0;
+}
+
+function addColSpan(attrs, pos, span = 1) {
+  const newAttrs = { ...attrs,
+    colspan: (attrs.colspan || 1) + span
+  };
+
+  if (newAttrs.colwidth) {
+    newAttrs.colwidth = newAttrs.colwidth.slice();
+
+    for (let i = 0; i < span; i++) {
+      newAttrs.colwidth.splice(pos, 0, 0);
+    }
+  }
+
+  return newAttrs;
+}
+
+function cellsOverlapRectangle({
+  width,
+  height,
+  map
+}, rect) {
+  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 true;
+    }
+
+    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 true;
+    }
+
+    indexTop++;
+    indexBottom++;
+  }
+
+  return false;
+} // returns an array of numbers, each number indicates the minimum colSpan in each column
+
+
+function getMinColSpans(table) {
+  const map = TableMap.get(table);
+  const minColspans = [];
+
+  for (let colIndex = map.width - 1; colIndex >= 0; colIndex--) {
+    const cellsPositions = map.cellsInRect({
+      left: colIndex,
+      right: colIndex + 1,
+      top: 0,
+      bottom: map.height
+    });
+
+    if (cellsPositions.length) {
+      const colspans = cellsPositions.map(cellPos => {
+        const cell = table.nodeAt(cellPos);
+
+        if (cell) {
+          return cell.attrs.colspan;
+        }
+      });
+      const minColspan = Math.min(...colspans); // only care about the case when the next column is invisible
+
+      if (!minColspans[colIndex + 1]) {
+        minColspans[colIndex] = minColspan;
+      } else {
+        minColspans[colIndex] = 1;
+      }
+    }
+  }
+
+  return minColspans;
+}
+
+export function removeEmptyColumns(table) {
+  const map = TableMap.get(table);
+  const minColSpans = getMinColSpans(table);
+
+  if (!minColSpans.some(colspan => colspan > 1)) {
+    return table;
+  }
+
+  const rows = [];
+
+  for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
+    const cellsByCols = {};
+    const cols = Object.keys(minColSpans).map(Number);
+
+    for (let idx in cols) {
+      const colIndex = cols[idx];
+      const cellPos = map.map[colIndex + rowIndex * map.width];
+      const rect = map.findCell(cellPos);
+      const cell = cellsByCols[rect.left] || table.nodeAt(cellPos);
+
+      if (cell && rect.top === rowIndex) {
+        if (minColSpans[colIndex] > 1) {
+          const colspan = cell.attrs.colspan - minColSpans[colIndex] + 1;
+
+          if (colspan < 1) {
+            return null;
+          }
+
+          const {
+            colwidth
+          } = cell.attrs;
+          const newCell = cell.type.createChecked({ ...cell.attrs,
+            colspan,
+            colwidth: colwidth ? colwidth.slice(0, colspan) : null
+          }, cell.content, cell.marks);
+          cellsByCols[rect.left] = newCell;
+        } else {
+          cellsByCols[rect.left] = cell;
+        }
+      }
+    }
+
+    const rowCells = Object.keys(cellsByCols).map(col => cellsByCols[col]);
+    const row = table.child(rowIndex);
+
+    if (row) {
+      rows.push(row.type.createChecked(row.attrs, rowCells, row.marks));
+    }
+  }
+
+  if (!rows.length) {
+    return null;
+  }
+
+  return table.type.createChecked(table.attrs, rows, table.marks);
+}

package/dist/es2019/plugins/table/transforms/metadata.js

@@ -0,0 +1,11 @@
+import { pluginKey } from '../pm-plugins/plugin-key';
+import { fireAnalytics } from './fix-tables'; // Set metadata on a ProseMirror transaction for debugging purposes in Synchrony
+
+export const setMeta = meta => tr => {
+  if ('problem' in meta) {
+    // Send analytics event whenever we encounter with a problem
+    fireAnalytics(meta);
+  }
+
+  return tr.setMeta(pluginKey, meta);
+};