@atlaskit/editor-plugin-table 0.1.0 → 0.1.1

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

@@ -9,173 +9,175 @@ 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 deleteColumnsCustomStep =
+  (rect: Rect) =>
+  (tr: Transaction): Transaction => {
+    const table = findTable(tr.selection);
+    if (!table) {
+      return tr;
+    }
 
-  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)));
+    // 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))!);
     }
-  }
 
-  return tr;
-};
+    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)));
+      }
+    }
 
-const deleteColumnsLegacy = (rect: Rect) => (tr: Transaction): Transaction => {
-  const table = findTable(tr.selection);
-  if (!table) {
     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);
-  }
+    const columnsToDelete: number[] = [];
+    for (let i = rect.left; i < rect.right; i++) {
+      columnsToDelete.push(i);
+    }
 
-  if (!columnsToDelete.length) {
-    return tr;
-  }
+    if (!columnsToDelete.length) {
+      return tr;
+    }
 
-  const map = TableMap.get(table.node);
-  const rows: PMNode[] = [];
-  const seen: { [key: string]: boolean } = {};
-  const deletedCells: { [key: string]: boolean } = {};
+    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;
+    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;
             }
-          });
-          if (overlappingCols > 0) {
+          } 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: cell.attrs.colspan - overlappingCols,
+              colspan: 1,
+              rowspan: 1,
             };
             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 pos = colIndex > 0 ? colIndex - map.colCount(cellPos) : 0;
+              attrs.colwidth = cell.attrs.colwidth.slice().splice(pos, 1);
             }
             const newCell = cell.type.createChecked(
               attrs,
-              cell.content,
+              cell.type.schema.nodes.paragraph.createChecked(),
               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);
+
+          // normal cells that we want to keep
+          if (!seen[cellPos]) {
+            seen[cellPos] = true;
+            rowCells.push(cell);
           }
-          const newCell = cell.type.createChecked(
-            attrs,
-            cell.type.schema.nodes.paragraph.createChecked(),
-            cell.marks,
-          );
-          rowCells.push(newCell);
-          continue;
+        } else if (cellsInColumn.indexOf(cellPos) > -1) {
+          deletedCells[cellPos] = true;
         }
+      }
 
-        // 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 (rowCells.length) {
-      rows.push(row.type.createChecked(row.attrs, rowCells, row.marks));
+    if (!rows.length) {
+      return setMeta({ type: 'DELETE_COLUMNS', problem: 'EMPTY_TABLE' })(tr);
     }
-  }
-
-  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 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 fixedTable = fixRowSpans(newTable);
+    if (fixedTable === null) {
+      return setMeta({ type: 'DELETE_COLUMNS', problem: 'FIX_ROWSPANS' })(tr);
+    }
 
-  const cursorPos = getNextCursorPos(newTable, columnsToDelete);
+    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))),
-  );
-};
+    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);
@@ -241,11 +243,11 @@ function fixRowSpans(table: PMNode): PMNode | 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);
-};
+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

@@ -8,139 +8,138 @@ 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) {
+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);
       }
-    } else {
-      rowsToDelete.push(i);
     }
-  }
 
-  if (!rowsToDelete.length) {
-    return tr;
-  }
+    if (!rowsToDelete.length) {
+      return tr;
+    }
 
-  const rows: PMNode[] = [];
-  const seen: { [key: string]: boolean } = {};
-  const deletedCells: { [key: string]: boolean } = {};
+    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 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;
+      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);
             }
-          });
-          if (overlappingRows > 0) {
             const newCell = cell.type.createChecked(
-              {
-                ...cell.attrs,
-                rowspan: cell.attrs.rowspan - overlappingRows,
-              },
-              cell.content,
+              attrs,
+              cell.type.schema.nodes.paragraph.createChecked(),
               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);
+
+          // normal cells that we want to keep
+          if (!seen[cellPos]) {
+            seen[cellPos] = true;
+            rowCells.push(cell);
           }
-          const newCell = cell.type.createChecked(
-            attrs,
-            cell.type.schema.nodes.paragraph.createChecked(),
-            cell.marks,
-          );
-          rowCells.push(newCell);
-          continue;
+        } else if (cellsInRow.indexOf(cellPos) > -1) {
+          deletedCells[cellPos] = true;
         }
+      }
 
-        // 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 (rowCells.length) {
-      rows.push(row.type.createChecked(row.attrs, rowCells, row.marks));
+    if (!rows.length) {
+      return setMeta({ type: 'DELETE_ROWS', problem: 'EMPTY_TABLE' })(tr);
     }
-  }
-
-  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 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))),
     );
-  }
-  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);

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

@@ -24,12 +24,12 @@ export type TableMetaData =
       problem?: TableProblems;
     };
 
-export const setMeta = (meta: TableMetaData) => (
-  tr: Transaction,
-): Transaction => {
-  if ('problem' in meta) {
-    // Send analytics event whenever we encounter with a problem
-    fireAnalytics(meta);
-  }
-  return tr.setMeta(pluginKey, meta);
-};
+export const setMeta =
+  (meta: TableMetaData) =>
+  (tr: Transaction): Transaction => {
+    if ('problem' in meta) {
+      // Send analytics event whenever we encounter with a problem
+      fireAnalytics(meta);
+    }
+    return tr.setMeta(pluginKey, meta);
+  };

package/src/plugins/table/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -377,12 +377,13 @@ export class ContextualMenu extends Component<
         this.toggleOpen();
         break;
       case 'distribute_columns':
-        const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(
-          selectionRect,
-          state,
-          editorView.domAtPos.bind(editorView),
-          getEditorContainerWidth,
-        );
+        const newResizeStateWithAnalytics =
+          getNewResizeStateFromSelectedColumns(
+            selectionRect,
+            state,
+            editorView.domAtPos.bind(editorView),
+            getEditorContainerWidth,
+          );
 
         if (newResizeStateWithAnalytics) {
           distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(

package/src/plugins/table/ui/FloatingDeleteButton/index.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, SyntheticEvent } from 'react';
 
 import { Selection } from 'prosemirror-state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
@@ -263,7 +263,8 @@ class FloatingDeleteButton extends Component<Props, State> {
    * @private
    * @memberof FloatingDeleteButton
    */
-  private handleClick = () => {
+  private handleClick = (event: SyntheticEvent) => {
+    event.preventDefault();
     const { editorAnalyticsAPI } = this.props;
     let { state, dispatch } = this.props.editorView;
     const {

package/src/plugins/table/ui/FloatingInsertButton/index.tsx

@@ -202,11 +202,8 @@ export class FloatingInsertButton extends React.Component<
   }
 
   private getCellPosition(type: 'column' | 'row'): number | null {
-    const {
-      tableNode,
-      insertColumnButtonIndex,
-      insertRowButtonIndex,
-    } = this.props;
+    const { tableNode, insertColumnButtonIndex, insertRowButtonIndex } =
+      this.props;
     const tableMap = TableMap.get(tableNode!);
 
     if (type === 'column') {