@atlaskit/editor-plugin-table 0.0.10 → 0.1.1

package/src/plugins/table/transforms/column-width.ts

@@ -22,109 +22,107 @@ import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { scaleTableTo } from '../pm-plugins/table-resizing/utils/scale-table';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 
-export const updateColumnWidths = (
-  resizeState: ResizeState,
-  table: PMNode,
-  start: number,
-) => (tr: Transaction): Transaction => {
-  const map = TableMap.get(table);
-  const updatedCellsAttrs: { [key: number]: CellAttributes } = {};
-
-  // calculating new attributes for each cell
-  for (let columnIndex = 0; columnIndex < map.width; columnIndex++) {
-    for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
-      const { width } = resizeState.cols[columnIndex];
-      const mapIndex = rowIndex * map.width + columnIndex;
-      const cellPos = map.map[mapIndex];
-      const attrs = updatedCellsAttrs[cellPos] || {
-        ...table.nodeAt(cellPos)!.attrs,
-      };
-      const colspan = attrs.colspan || 1;
-
-      if (attrs.colwidth && attrs.colwidth.length > colspan) {
-        tr = setMeta({
-          type: 'UPDATE_COLUMN_WIDTHS',
-          problem: 'COLWIDTHS_BEFORE_UPDATE',
-          data: { colwidths: attrs.colwidth, colspan },
-        })(tr);
-        attrs.colwidth = attrs.colwidth.slice(0, colspan);
-      }
-
-      // Rowspanning cell that has already been handled
-      if (rowIndex && map.map[mapIndex] === map.map[mapIndex - map.width]) {
-        continue;
-      }
-      const colspanIndex =
-        colspan === 1 ? 0 : columnIndex - map.colCount(cellPos);
-      if (attrs.colwidth && attrs.colwidth[colspanIndex] === width) {
-        continue;
-      }
+export const updateColumnWidths =
+  (resizeState: ResizeState, table: PMNode, start: number) =>
+  (tr: Transaction): Transaction => {
+    const map = TableMap.get(table);
+    const updatedCellsAttrs: { [key: number]: CellAttributes } = {};
 
-      let colwidths = attrs.colwidth
-        ? attrs.colwidth.slice()
-        : Array.from({ length: colspan }, (_) => 0);
-
-      colwidths[colspanIndex] = width;
-      if (colwidths.length > colspan) {
-        tr = setMeta({
-          type: 'UPDATE_COLUMN_WIDTHS',
-          problem: 'COLWIDTHS_AFTER_UPDATE',
-          data: { colwidths, colspan },
-        })(tr);
-        colwidths = colwidths.slice(0, colspan);
+    // calculating new attributes for each cell
+    for (let columnIndex = 0; columnIndex < map.width; columnIndex++) {
+      for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
+        const { width } = resizeState.cols[columnIndex];
+        const mapIndex = rowIndex * map.width + columnIndex;
+        const cellPos = map.map[mapIndex];
+        const attrs = updatedCellsAttrs[cellPos] || {
+          ...table.nodeAt(cellPos)!.attrs,
+        };
+        const colspan = attrs.colspan || 1;
+
+        if (attrs.colwidth && attrs.colwidth.length > colspan) {
+          tr = setMeta({
+            type: 'UPDATE_COLUMN_WIDTHS',
+            problem: 'COLWIDTHS_BEFORE_UPDATE',
+            data: { colwidths: attrs.colwidth, colspan },
+          })(tr);
+          attrs.colwidth = attrs.colwidth.slice(0, colspan);
+        }
+
+        // Rowspanning cell that has already been handled
+        if (rowIndex && map.map[mapIndex] === map.map[mapIndex - map.width]) {
+          continue;
+        }
+        const colspanIndex =
+          colspan === 1 ? 0 : columnIndex - map.colCount(cellPos);
+        if (attrs.colwidth && attrs.colwidth[colspanIndex] === width) {
+          continue;
+        }
+
+        let colwidths = attrs.colwidth
+          ? attrs.colwidth.slice()
+          : Array.from({ length: colspan }, (_) => 0);
+
+        colwidths[colspanIndex] = width;
+        if (colwidths.length > colspan) {
+          tr = setMeta({
+            type: 'UPDATE_COLUMN_WIDTHS',
+            problem: 'COLWIDTHS_AFTER_UPDATE',
+            data: { colwidths, colspan },
+          })(tr);
+          colwidths = colwidths.slice(0, colspan);
+        }
+        updatedCellsAttrs[cellPos] = {
+          ...attrs,
+          colwidth: colwidths.includes(0) ? undefined : colwidths,
+        };
       }
-      updatedCellsAttrs[cellPos] = {
-        ...attrs,
-        colwidth: colwidths.includes(0) ? undefined : colwidths,
-      };
     }
-  }
-
-  // updating all cells with new attributes
-  const rows: PMNode[] = [];
-  const seen: { [key: number]: boolean } = {};
-  for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
-    const row = table.child(rowIndex);
-    const cells: PMNode[] = [];
 
-    for (let columnIndex = 0; columnIndex < map.width; columnIndex++) {
-      const mapIndex = rowIndex * map.width + columnIndex;
-      const pos = map.map[mapIndex];
-      const cell = table.nodeAt(pos);
-      if (!seen[pos] && cell) {
-        cells.push(
-          cell.type.createChecked(
-            updatedCellsAttrs[pos] || cell.attrs,
-            cell.content,
-            cell.marks,
-          ),
-        );
-        seen[pos] = true;
+    // updating all cells with new attributes
+    const rows: PMNode[] = [];
+    const seen: { [key: number]: boolean } = {};
+    for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
+      const row = table.child(rowIndex);
+      const cells: PMNode[] = [];
+
+      for (let columnIndex = 0; columnIndex < map.width; columnIndex++) {
+        const mapIndex = rowIndex * map.width + columnIndex;
+        const pos = map.map[mapIndex];
+        const cell = table.nodeAt(pos);
+        if (!seen[pos] && cell) {
+          cells.push(
+            cell.type.createChecked(
+              updatedCellsAttrs[pos] || cell.attrs,
+              cell.content,
+              cell.marks,
+            ),
+          );
+          seen[pos] = true;
+        }
       }
+      rows.push(row.type.createChecked(row.attrs, cells, row.marks));
     }
-    rows.push(row.type.createChecked(row.attrs, cells, row.marks));
-  }
-
-  const tablePos = start - 1;
-  const selectionBookmark = tr.selection.getBookmark();
-
-  tr.replaceWith(
-    tablePos,
-    tablePos + table.nodeSize,
-    table.type.createChecked(table.attrs, rows, table.marks),
-  );
-  /**
-   * We want to restore to the original selection but w/o applying the mapping. Function
-   * tr.replaceWith puts the selection after the inserted content. We need to manually
-   * set the selection back to original state. Mapping in this case doesn't quite work
-   * e.g. if we change the content before a selection. This is because mapping
-   * means moving it if the content in front of it changed. Instead we can get
-   * bookmark of selection.
-   *
-   * @see https://github.com/ProseMirror/prosemirror/issues/645
-   */
-  return tr.setSelection(selectionBookmark.resolve(tr.doc));
-};
+
+    const tablePos = start - 1;
+    const selectionBookmark = tr.selection.getBookmark();
+
+    tr.replaceWith(
+      tablePos,
+      tablePos + table.nodeSize,
+      table.type.createChecked(table.attrs, rows, table.marks),
+    );
+    /**
+     * We want to restore to the original selection but w/o applying the mapping. Function
+     * tr.replaceWith puts the selection after the inserted content. We need to manually
+     * set the selection back to original state. Mapping in this case doesn't quite work
+     * e.g. if we change the content before a selection. This is because mapping
+     * means moving it if the content in front of it changed. Instead we can get
+     * bookmark of selection.
+     *
+     * @see https://github.com/ProseMirror/prosemirror/issues/645
+     */
+    return tr.setSelection(selectionBookmark.resolve(tr.doc));
+  };
 
 /**
  * This function is called when user inserts/deletes a column in a table to;
@@ -136,52 +134,51 @@ export const updateColumnWidths = (
  * @param view
  * @returns Updated transaction with rescaled columns for a given table
  */
-export const rescaleColumns = (
-  getEditorContainerWidth: GetEditorContainerWidth,
-) => (table: ContentNodeWithPos, view: EditorView | undefined) => (
-  tr: Transaction,
-): Transaction => {
-  // If the table has been not been resized we skip updating the size
-  // of columns here.
-  if (!view || !hasTableBeenResized(table.node)) {
-    return tr;
-  }
-
-  const { state } = view;
-  const domAtPos = view.domAtPos.bind(view);
-
-  const maybeTable = domAtPos(table.start).node as HTMLElement;
-  const tableRef = maybeTable.closest('table');
-
-  if (!tableRef) {
-    return tr;
-  }
-
-  const layout = normaliseTableLayout(tableRef?.dataset.layout);
-  // The is the width the table can reach before overflowing
-  const maxSize = getTableMaxWidth({
-    table: table.node,
-    tableStart: table.start,
-    state,
-    layout,
-    getEditorContainerWidth,
-  });
-  let resizeState = getResizeState({
-    minWidth: tableCellMinWidth,
-    table: table.node,
-    start: table.start,
-    tableRef,
-    domAtPos,
-    maxSize,
-  });
-  const previousTableWidth = resizeState.tableWidth - tableNewColumnMinWidth;
-  const tableDidntPreviouslyOverflow = previousTableWidth <= maxSize;
-
-  // If the new table width will result in the table going into an overflow state
-  // we resize the cells to avoid the overflow occuring
-  if (tableDidntPreviouslyOverflow && resizeState.overflow) {
-    resizeState = scaleTableTo(resizeState, maxSize);
-  }
-
-  return updateColumnWidths(resizeState, table.node, table.start)(tr);
-};
+export const rescaleColumns =
+  (getEditorContainerWidth: GetEditorContainerWidth) =>
+  (table: ContentNodeWithPos, view: EditorView | undefined) =>
+  (tr: Transaction): Transaction => {
+    // If the table has been not been resized we skip updating the size
+    // of columns here.
+    if (!view || !hasTableBeenResized(table.node)) {
+      return tr;
+    }
+
+    const { state } = view;
+    const domAtPos = view.domAtPos.bind(view);
+
+    const maybeTable = domAtPos(table.start).node as HTMLElement;
+    const tableRef = maybeTable.closest('table');
+
+    if (!tableRef) {
+      return tr;
+    }
+
+    const layout = normaliseTableLayout(tableRef?.dataset.layout);
+    // The is the width the table can reach before overflowing
+    const maxSize = getTableMaxWidth({
+      table: table.node,
+      tableStart: table.start,
+      state,
+      layout,
+      getEditorContainerWidth,
+    });
+    let resizeState = getResizeState({
+      minWidth: tableCellMinWidth,
+      table: table.node,
+      start: table.start,
+      tableRef,
+      domAtPos,
+      maxSize,
+    });
+    const previousTableWidth = resizeState.tableWidth - tableNewColumnMinWidth;
+    const tableDidntPreviouslyOverflow = previousTableWidth <= maxSize;
+
+    // If the new table width will result in the table going into an overflow state
+    // we resize the cells to avoid the overflow occuring
+    if (tableDidntPreviouslyOverflow && resizeState.overflow) {
+      resizeState = scaleTableTo(resizeState, maxSize);
+    }
+
+    return updateColumnWidths(resizeState, table.node, table.start)(tr);
+  };

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);
+  };