@atlaskit/editor-tables 2.2.3 → 2.2.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-tables
 
+## 2.2.4
+
+### Patch Changes
+
+- [`4080eb013ef`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4080eb013ef) - [ux] Fix bug where pasting inside a table did not respect the table's headers. Pasted cells are formatted based on the table they are being pasted into.
+- [`4f6a895f1d5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4f6a895f1d5) - Set selectable property for selectable nodes
+- [`4f6a895f1d5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4f6a895f1d5) - Fix arrow shift selection coming from outside of the table
+
 ## 2.2.3
 
 ### Patch Changes

package/dist/cjs/pm-plugins/input.js

@@ -100,12 +100,27 @@ function shiftArrow(axis, dir) {
     var sel = state.selection;
 
     if (!(sel instanceof _cellSelection.CellSelection)) {
+      var _maybeTableCell$paren;
+
       var end = view ? atEndOfCell(view, axis, dir) : null;
 
       if (end === null) {
         return false;
       }
 
+      var _state$selection = state.selection,
+          _$head = _state$selection.$head,
+          $anchor = _state$selection.$anchor;
+
+      var maybeTableCell = _$head.blockRange($anchor); // Make sure the selection is coming from the same cell
+
+
+      var sameCell = ['tableCell', 'tableHeader'].includes((maybeTableCell === null || maybeTableCell === void 0 ? void 0 : (_maybeTableCell$paren = maybeTableCell.parent) === null || _maybeTableCell$paren === void 0 ? void 0 : _maybeTableCell$paren.type.name) || '');
+
+      if (!sameCell) {
+        return false;
+      }
+
       sel = new _cellSelection.CellSelection(state.doc.resolve(end));
     }
 

package/dist/cjs/utils/copy-paste.js

@@ -22,16 +22,41 @@ var _tableMap = require("../table-map");
 
 var _colspan = require("./colspan");
 
+var _selectionRect = require("./selection-rect");
+
 var _tableNodeTypes = require("./table-node-types");
 
+var _toggleHeader = require("./toggle-header");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 // Utilities to help with copying and pasting table cells
-// : (Slice) → ?{width: number, height: number, rows: [Fragment]}
+
+/**
+ * Replace any header cells with table cells.
+ *
+ * @param schema
+ * @param cells
+ * @returns Fragment with header cells converted to table cells
+ */
+function stripHeaderType(schema, cells) {
+  var newCells = [];
+  cells.forEach(function (cell) {
+    var _cellNodeType$createA;
+
+    // Convert to cell type if not already
+    var cellNodeType = (0, _tableNodeTypes.tableNodeTypes)(schema).cell;
+    var tableCell = cell.type === cellNodeType ? cell : (_cellNodeType$createA = cellNodeType.createAndFill(cell.attrs, cell.content, cell.marks)) !== null && _cellNodeType$createA !== void 0 ? _cellNodeType$createA : cell;
+    newCells.push(tableCell);
+  });
+  return _prosemirrorModel.Fragment.from(newCells);
+} // : (Slice) → ?{width: number, height: number, rows: [Fragment]}
 // Get a rectangular area of cells from a slice, or null if the outer
 // nodes of the slice aren't table cells or rows.
+
+
 function pastedCells(slice) {
   if (!slice.size) {
     return null;
@@ -78,7 +103,10 @@ function pastedCells(slice) {
     return null;
   }
 
-  return ensureRectangular(schema, rows);
+  var rowsWithoutHeaders = rows.map(function (row) {
+    return stripHeaderType(schema, row);
+  });
+  return ensureRectangular(schema, rowsWithoutHeaders);
 } // : (Schema, [Fragment]) → {width: number, height: number, rows: [Fragment]}
 // Compute the width and height of a set of cells, and make sure each
 // row has the same number of cells.
@@ -364,12 +392,45 @@ function isolateVertical(tr, map, table, start, top, bottom, left, mapFrom) {
   }
 
   return found;
+}
+
+function applyHeaderCells(tr, tableMap, state, tableStart, table, headerRowEnabled, headerColumnEnabled) {
+  var schema = state.schema;
+
+  var setMarkup = function setMarkup(tr, row, col, headerEnabled) {
+    var cellPos = tableStart + tableMap.positionAt(row, col, table);
+    var cell = tr.doc.nodeAt(cellPos);
+    var newType = headerEnabled ? schema.nodes.tableHeader : schema.nodes.tableCell;
+    var isCellTypeChanged = newType !== (cell === null || cell === void 0 ? void 0 : cell.type);
+    var isCellTypeValid = [schema.nodes.tableCell, schema.nodes.tableHeader].includes(cell === null || cell === void 0 ? void 0 : cell.type);
+
+    if (isCellTypeChanged && isCellTypeValid) {
+      tr.setNodeMarkup(cellPos, newType, cell === null || cell === void 0 ? void 0 : cell.attrs, cell === null || cell === void 0 ? void 0 : cell.marks);
+    }
+  }; // For row === 0 && col === 0 it is enabled if either are enabled
+
+
+  setMarkup(tr, 0, 0, headerColumnEnabled || headerRowEnabled); // Header Column
+
+  for (var col = 1; col < tableMap.width; col++) {
+    setMarkup(tr, 0, col, headerRowEnabled);
+  } // Header Row
+
+
+  for (var row = 1; row < tableMap.height; row++) {
+    setMarkup(tr, row, 0, headerColumnEnabled);
+  }
 } // Insert the given set of cells (as returned by `pastedCells`) into a
 // table, at the position pointed at by rect.
 
 
 function insertCells(state, dispatch, tableStart, rect, cells) {
   var table = state.doc;
+  var newRect = (0, _selectionRect.selectedRect)(state);
+  var types = (0, _tableNodeTypes.tableNodeTypes)(state.schema); // Get if the header row and column are enabled on the original table
+
+  var headerRowEnabled = (0, _toggleHeader.isHeaderEnabledByType)('row', newRect, types);
+  var headerColumnEnabled = (0, _toggleHeader.isHeaderEnabledByType)('column', newRect, types);
 
   if (tableStart) {
     table = state.doc.nodeAt(tableStart - 1);
@@ -425,6 +486,7 @@ function insertCells(state, dispatch, tableStart, rect, cells) {
   }
 
   recomp();
+  applyHeaderCells(tr, map, state, tableStart, table, headerRowEnabled, headerColumnEnabled);
   tr.setSelection(new _cellSelection.CellSelection(tr.doc.resolve(tableStart + map.positionAt(top, left, table)), tr.doc.resolve(tableStart + map.positionAt(bottom - 1, right - 1, table))));
   dispatch(tr);
 }

package/dist/cjs/utils/toggle-header.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.isHeaderEnabledByType = isHeaderEnabledByType;
 exports.toggleHeader = toggleHeader;
 
 var _tableMap = require("../table-map");

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-tables",
-	"version": "2.2.3",
+	"version": "2.2.4",
 	"sideEffects": false
 }

package/dist/es2019/pm-plugins/input.js

@@ -82,12 +82,28 @@ function shiftArrow(axis, dir) {
     let sel = state.selection;
 
     if (!(sel instanceof CellSelection)) {
+      var _maybeTableCell$paren;
+
       const end = view ? atEndOfCell(view, axis, dir) : null;
 
       if (end === null) {
         return false;
       }
 
+      const {
+        selection: {
+          $head,
+          $anchor
+        }
+      } = state;
+      const maybeTableCell = $head.blockRange($anchor); // Make sure the selection is coming from the same cell
+
+      const sameCell = ['tableCell', 'tableHeader'].includes((maybeTableCell === null || maybeTableCell === void 0 ? void 0 : (_maybeTableCell$paren = maybeTableCell.parent) === null || _maybeTableCell$paren === void 0 ? void 0 : _maybeTableCell$paren.type.name) || '');
+
+      if (!sameCell) {
+        return false;
+      }
+
       sel = new CellSelection(state.doc.resolve(end));
     }
 

package/dist/es2019/utils/copy-paste.js

@@ -14,11 +14,34 @@ import { Transform } from 'prosemirror-transform';
 import { CellSelection } from '../cell-selection';
 import { TableMap } from '../table-map';
 import { removeColSpan } from './colspan';
-import { tableNodeTypes } from './table-node-types'; // Utilities to help with copying and pasting table cells
-// : (Slice) → ?{width: number, height: number, rows: [Fragment]}
+import { selectedRect } from './selection-rect';
+import { tableNodeTypes } from './table-node-types';
+import { isHeaderEnabledByType } from './toggle-header'; // Utilities to help with copying and pasting table cells
+
+/**
+ * Replace any header cells with table cells.
+ *
+ * @param schema
+ * @param cells
+ * @returns Fragment with header cells converted to table cells
+ */
+
+function stripHeaderType(schema, cells) {
+  const newCells = [];
+  cells.forEach(cell => {
+    var _cellNodeType$createA;
+
+    // Convert to cell type if not already
+    const cellNodeType = tableNodeTypes(schema).cell;
+    const tableCell = cell.type === cellNodeType ? cell : (_cellNodeType$createA = cellNodeType.createAndFill(cell.attrs, cell.content, cell.marks)) !== null && _cellNodeType$createA !== void 0 ? _cellNodeType$createA : cell;
+    newCells.push(tableCell);
+  });
+  return Fragment.from(newCells);
+} // : (Slice) → ?{width: number, height: number, rows: [Fragment]}
 // Get a rectangular area of cells from a slice, or null if the outer
 // nodes of the slice aren't table cells or rows.
 
+
 export function pastedCells(slice) {
   if (!slice.size) {
     return null;
@@ -69,7 +92,8 @@ export function pastedCells(slice) {
     return null;
   }
 
-  return ensureRectangular(schema, rows);
+  const rowsWithoutHeaders = rows.map(row => stripHeaderType(schema, row));
+  return ensureRectangular(schema, rowsWithoutHeaders);
 } // : (Schema, [Fragment]) → {width: number, height: number, rows: [Fragment]}
 // Compute the width and height of a set of cells, and make sure each
 // row has the same number of cells.
@@ -356,12 +380,47 @@ function isolateVertical(tr, map, table, start, top, bottom, left, mapFrom) {
   }
 
   return found;
+}
+
+function applyHeaderCells(tr, tableMap, state, tableStart, table, headerRowEnabled, headerColumnEnabled) {
+  const {
+    schema
+  } = state;
+
+  const setMarkup = (tr, row, col, headerEnabled) => {
+    const cellPos = tableStart + tableMap.positionAt(row, col, table);
+    const cell = tr.doc.nodeAt(cellPos);
+    const newType = headerEnabled ? schema.nodes.tableHeader : schema.nodes.tableCell;
+    const isCellTypeChanged = newType !== (cell === null || cell === void 0 ? void 0 : cell.type);
+    const isCellTypeValid = [schema.nodes.tableCell, schema.nodes.tableHeader].includes(cell === null || cell === void 0 ? void 0 : cell.type);
+
+    if (isCellTypeChanged && isCellTypeValid) {
+      tr.setNodeMarkup(cellPos, newType, cell === null || cell === void 0 ? void 0 : cell.attrs, cell === null || cell === void 0 ? void 0 : cell.marks);
+    }
+  }; // For row === 0 && col === 0 it is enabled if either are enabled
+
+
+  setMarkup(tr, 0, 0, headerColumnEnabled || headerRowEnabled); // Header Column
+
+  for (let col = 1; col < tableMap.width; col++) {
+    setMarkup(tr, 0, col, headerRowEnabled);
+  } // Header Row
+
+
+  for (let row = 1; row < tableMap.height; row++) {
+    setMarkup(tr, row, 0, headerColumnEnabled);
+  }
 } // Insert the given set of cells (as returned by `pastedCells`) into a
 // table, at the position pointed at by rect.
 
 
 export function insertCells(state, dispatch, tableStart, rect, cells) {
   let table = state.doc;
+  const newRect = selectedRect(state);
+  const types = tableNodeTypes(state.schema); // Get if the header row and column are enabled on the original table
+
+  const headerRowEnabled = isHeaderEnabledByType('row', newRect, types);
+  const headerColumnEnabled = isHeaderEnabledByType('column', newRect, types);
 
   if (tableStart) {
     table = state.doc.nodeAt(tableStart - 1);
@@ -420,6 +479,7 @@ export function insertCells(state, dispatch, tableStart, rect, cells) {
   }
 
   recomp();
+  applyHeaderCells(tr, map, state, tableStart, table, headerRowEnabled, headerColumnEnabled);
   tr.setSelection(new CellSelection(tr.doc.resolve(tableStart + map.positionAt(top, left, table)), tr.doc.resolve(tableStart + map.positionAt(bottom - 1, right - 1, table))));
   dispatch(tr);
 }

package/dist/es2019/utils/toggle-header.js

@@ -2,8 +2,7 @@ import { Rect } from '../table-map';
 import { selectedRect } from './selection-rect';
 import { tableNodeTypes } from './table-node-types';
 import { isInTable } from './tables';
-
-function isHeaderEnabledByType(type, rect, types) {
+export function isHeaderEnabledByType(type, rect, types) {
   // Get cell positions for first row or first column
   const cellPositions = rect.map.cellsInRect({
     left: 0,
@@ -23,7 +22,6 @@ function isHeaderEnabledByType(type, rect, types) {
   return true;
 } // Toggles between row/column header and normal cells (Only applies to first row/column).
 
-
 export function toggleHeader(type) {
   return function (state, dispatch) {
     if (!isInTable(state)) {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-tables",
-	"version": "2.2.3",
+	"version": "2.2.4",
 	"sideEffects": false
 }

package/dist/esm/pm-plugins/input.js

@@ -82,12 +82,27 @@ function shiftArrow(axis, dir) {
     var sel = state.selection;
 
     if (!(sel instanceof CellSelection)) {
+      var _maybeTableCell$paren;
+
       var end = view ? atEndOfCell(view, axis, dir) : null;
 
       if (end === null) {
         return false;
       }
 
+      var _state$selection = state.selection,
+          _$head = _state$selection.$head,
+          $anchor = _state$selection.$anchor;
+
+      var maybeTableCell = _$head.blockRange($anchor); // Make sure the selection is coming from the same cell
+
+
+      var sameCell = ['tableCell', 'tableHeader'].includes((maybeTableCell === null || maybeTableCell === void 0 ? void 0 : (_maybeTableCell$paren = maybeTableCell.parent) === null || _maybeTableCell$paren === void 0 ? void 0 : _maybeTableCell$paren.type.name) || '');
+
+      if (!sameCell) {
+        return false;
+      }
+
       sel = new CellSelection(state.doc.resolve(end));
     }
 

package/dist/esm/utils/copy-paste.js

@@ -20,11 +20,34 @@ import { Transform } from 'prosemirror-transform';
 import { CellSelection } from '../cell-selection';
 import { TableMap } from '../table-map';
 import { removeColSpan } from './colspan';
-import { tableNodeTypes } from './table-node-types'; // Utilities to help with copying and pasting table cells
-// : (Slice) → ?{width: number, height: number, rows: [Fragment]}
+import { selectedRect } from './selection-rect';
+import { tableNodeTypes } from './table-node-types';
+import { isHeaderEnabledByType } from './toggle-header'; // Utilities to help with copying and pasting table cells
+
+/**
+ * Replace any header cells with table cells.
+ *
+ * @param schema
+ * @param cells
+ * @returns Fragment with header cells converted to table cells
+ */
+
+function stripHeaderType(schema, cells) {
+  var newCells = [];
+  cells.forEach(function (cell) {
+    var _cellNodeType$createA;
+
+    // Convert to cell type if not already
+    var cellNodeType = tableNodeTypes(schema).cell;
+    var tableCell = cell.type === cellNodeType ? cell : (_cellNodeType$createA = cellNodeType.createAndFill(cell.attrs, cell.content, cell.marks)) !== null && _cellNodeType$createA !== void 0 ? _cellNodeType$createA : cell;
+    newCells.push(tableCell);
+  });
+  return Fragment.from(newCells);
+} // : (Slice) → ?{width: number, height: number, rows: [Fragment]}
 // Get a rectangular area of cells from a slice, or null if the outer
 // nodes of the slice aren't table cells or rows.
 
+
 export function pastedCells(slice) {
   if (!slice.size) {
     return null;
@@ -71,7 +94,10 @@ export function pastedCells(slice) {
     return null;
   }
 
-  return ensureRectangular(schema, rows);
+  var rowsWithoutHeaders = rows.map(function (row) {
+    return stripHeaderType(schema, row);
+  });
+  return ensureRectangular(schema, rowsWithoutHeaders);
 } // : (Schema, [Fragment]) → {width: number, height: number, rows: [Fragment]}
 // Compute the width and height of a set of cells, and make sure each
 // row has the same number of cells.
@@ -354,12 +380,45 @@ function isolateVertical(tr, map, table, start, top, bottom, left, mapFrom) {
   }
 
   return found;
+}
+
+function applyHeaderCells(tr, tableMap, state, tableStart, table, headerRowEnabled, headerColumnEnabled) {
+  var schema = state.schema;
+
+  var setMarkup = function setMarkup(tr, row, col, headerEnabled) {
+    var cellPos = tableStart + tableMap.positionAt(row, col, table);
+    var cell = tr.doc.nodeAt(cellPos);
+    var newType = headerEnabled ? schema.nodes.tableHeader : schema.nodes.tableCell;
+    var isCellTypeChanged = newType !== (cell === null || cell === void 0 ? void 0 : cell.type);
+    var isCellTypeValid = [schema.nodes.tableCell, schema.nodes.tableHeader].includes(cell === null || cell === void 0 ? void 0 : cell.type);
+
+    if (isCellTypeChanged && isCellTypeValid) {
+      tr.setNodeMarkup(cellPos, newType, cell === null || cell === void 0 ? void 0 : cell.attrs, cell === null || cell === void 0 ? void 0 : cell.marks);
+    }
+  }; // For row === 0 && col === 0 it is enabled if either are enabled
+
+
+  setMarkup(tr, 0, 0, headerColumnEnabled || headerRowEnabled); // Header Column
+
+  for (var col = 1; col < tableMap.width; col++) {
+    setMarkup(tr, 0, col, headerRowEnabled);
+  } // Header Row
+
+
+  for (var row = 1; row < tableMap.height; row++) {
+    setMarkup(tr, row, 0, headerColumnEnabled);
+  }
 } // Insert the given set of cells (as returned by `pastedCells`) into a
 // table, at the position pointed at by rect.
 
 
 export function insertCells(state, dispatch, tableStart, rect, cells) {
   var table = state.doc;
+  var newRect = selectedRect(state);
+  var types = tableNodeTypes(state.schema); // Get if the header row and column are enabled on the original table
+
+  var headerRowEnabled = isHeaderEnabledByType('row', newRect, types);
+  var headerColumnEnabled = isHeaderEnabledByType('column', newRect, types);
 
   if (tableStart) {
     table = state.doc.nodeAt(tableStart - 1);
@@ -414,6 +473,7 @@ export function insertCells(state, dispatch, tableStart, rect, cells) {
   }
 
   recomp();
+  applyHeaderCells(tr, map, state, tableStart, table, headerRowEnabled, headerColumnEnabled);
   tr.setSelection(new CellSelection(tr.doc.resolve(tableStart + map.positionAt(top, left, table)), tr.doc.resolve(tableStart + map.positionAt(bottom - 1, right - 1, table))));
   dispatch(tr);
 }

package/dist/esm/utils/toggle-header.js

@@ -2,8 +2,7 @@ import { Rect } from '../table-map';
 import { selectedRect } from './selection-rect';
 import { tableNodeTypes } from './table-node-types';
 import { isInTable } from './tables';
-
-function isHeaderEnabledByType(type, rect, types) {
+export function isHeaderEnabledByType(type, rect, types) {
   // Get cell positions for first row or first column
   var cellPositions = rect.map.cellsInRect({
     left: 0,
@@ -23,7 +22,6 @@ function isHeaderEnabledByType(type, rect, types) {
   return true;
 } // Toggles between row/column header and normal cells (Only applies to first row/column).
 
-
 export function toggleHeader(type) {
   return function (state, dispatch) {
     if (!isInTable(state)) {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-tables",
-	"version": "2.2.3",
+	"version": "2.2.4",
 	"sideEffects": false
 }

package/dist/types/utils/toggle-header.d.ts

@@ -1,3 +1,6 @@
 import { Command } from '../types';
+import { SelectionRect } from './selection-rect';
+import { TableNodeCache } from './table-node-types';
 export declare type ToggleType = 'column' | 'row';
+export declare function isHeaderEnabledByType(type: ToggleType, rect: SelectionRect, types: TableNodeCache): boolean;
 export declare function toggleHeader(type: ToggleType): Command;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-tables",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "description": "A package that contains common classes and utility functions for editor tables",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
     "prosemirror-view": "1.23.2"
   },
   "devDependencies": {
-    "@atlaskit/adf-schema": "^25.0.0",
+    "@atlaskit/adf-schema": "^25.1.0",
     "@atlaskit/editor-test-helpers": "^18.0.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1"
   },
@@ -49,4 +49,4 @@
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
-}
+}

package/report.api.md

@@ -8,6 +8,7 @@
 ### Table of contents
 
 - [Main Entry Types](#main-entry-types)
+- [Peer Dependencies](#peer-dependencies)
 
 ### Main Entry Types
 
@@ -211,3 +212,13 @@ export const uuid: {
 ```
 
 <!--SECTION END: Main Entry Types-->
+
+### Peer Dependencies
+
+<!--SECTION START: Peer Dependencies-->
+
+```json
+{}
+```
+
+<!--SECTION END: Peer Dependencies-->