@atlaskit/editor-plugin-table 1.1.1 → 1.1.3

package/dist/cjs/plugins/table/utils/column-controls.js

@@ -1,46 +1,33 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.isColumnDeleteButtonVisible = exports.getColumnsWidths = exports.getColumnDeleteButtonParams = exports.getColumnClassNames = exports.colWidthsForRow = void 0;
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _tableMap = require("@atlaskit/editor-tables/table-map");
-
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
-
 var _prosemirrorUtils = require("prosemirror-utils");
-
 var _utils = require("@atlaskit/editor-tables/utils");
-
 var _utils2 = require("@atlaskit/editor-common/utils");
-
 var _types = require("../types");
-
 var _consts = require("../ui/consts");
-
 var getColumnsWidths = function getColumnsWidths(view) {
   var selection = view.state.selection;
   var widths = [];
   var table = (0, _utils.findTable)(selection);
-
   if (table) {
     var map = _tableMap.TableMap.get(table.node);
+    var domAtPos = view.domAtPos.bind(view);
 
-    var domAtPos = view.domAtPos.bind(view); // When there is no cell we need to fill it with undefined
-
+    // When there is no cell we need to fill it with undefined
     widths = Array.from({
       length: map.width
     });
-
     for (var i = 0; i < map.width; i++) {
       var cells = (0, _utils.getCellsInColumn)(i)(selection);
       var cell = cells[0];
-
       if (cell) {
         var cellRef = (0, _prosemirrorUtils.findDomRefAtPos)(cell.pos, domAtPos);
         var rect = cellRef.getBoundingClientRect();
@@ -49,82 +36,63 @@ var getColumnsWidths = function getColumnsWidths(view) {
       }
     }
   }
-
   return widths;
 };
-
 exports.getColumnsWidths = getColumnsWidths;
-
 var isColumnDeleteButtonVisible = function isColumnDeleteButtonVisible(selection) {
   if (!(0, _utils.isTableSelected)(selection) && selection instanceof _cellSelection.CellSelection && selection.isColSelection()) {
     return true;
   }
-
   return false;
 };
-
 exports.isColumnDeleteButtonVisible = isColumnDeleteButtonVisible;
-
 var getColumnDeleteButtonParams = function getColumnDeleteButtonParams(columnsWidths, selection) {
   var rect = (0, _utils.getSelectionRect)(selection);
-
   if (!rect) {
     return null;
   }
-
   var width = 0;
-  var offset = 0; // find the columns before the selection
-
+  var offset = 0;
+  // find the columns before the selection
   for (var i = 0; i < rect.left; i++) {
     var colWidth = columnsWidths[i];
-
     if (colWidth) {
       offset += colWidth - 1;
     }
-  } // these are the selected columns widths
-
-
+  }
+  // these are the selected columns widths
   var indexes = [];
-
   for (var _i = rect.left; _i < rect.right; _i++) {
     var _colWidth = columnsWidths[_i];
-
     if (_colWidth) {
       width += _colWidth;
       indexes.push(_i);
     }
   }
-
   var left = offset + width / 2 - _consts.tableDeleteButtonSize / 2;
   return {
     left: left,
     indexes: indexes
   };
 };
-
 exports.getColumnDeleteButtonParams = getColumnDeleteButtonParams;
-
 var getColumnClassNames = function getColumnClassNames(index, selection) {
   var hoveredColumns = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
   var isInDanger = arguments.length > 3 ? arguments[3] : undefined;
   var isResizing = arguments.length > 4 ? arguments[4] : undefined;
   var classNames = [];
-
   if ((0, _utils.isColumnSelected)(index)(selection) || hoveredColumns.indexOf(index) > -1 && !isResizing) {
     classNames.push(_types.TableCssClassName.HOVERED_CELL_ACTIVE);
-
     if (isInDanger) {
       classNames.push(_types.TableCssClassName.HOVERED_CELL_IN_DANGER);
     }
   }
-
   return classNames.join(' ');
-}; // give a row colspan and a colwidths
-// and map to a row's colwidths
-
+};
 
+// give a row colspan and a colwidths
+// and map to a row's colwidths
 exports.getColumnClassNames = getColumnClassNames;
-
 var mapTableColwidthsToRow = function mapTableColwidthsToRow(rowColSpans, tableColWidths) {
   var curColIdx = 0;
   var colWidths = [];
@@ -137,12 +105,10 @@ var mapTableColwidthsToRow = function mapTableColwidthsToRow(rowColSpans, tableC
   });
   return colWidths;
 };
-
 var getRelativeDomCellWidths = function getRelativeDomCellWidths(_ref) {
   var width = _ref.width,
-      colspan = _ref.colspan,
-      colwidth = _ref.colwidth;
-
+    colspan = _ref.colspan,
+    colwidth = _ref.colwidth;
   // For cells with colSpan 1
   // or
   // for cells in a table with unchanged column widths,
@@ -150,20 +116,22 @@ var getRelativeDomCellWidths = function getRelativeDomCellWidths(_ref) {
   // return equally partitioned total cell width in DOM for each cell.
   if (colspan === 1 || !colwidth) {
     return new Array(colspan).fill(width / colspan);
-  } // For cells that have colSpan > 1 and
+  }
+
+  // For cells that have colSpan > 1 and
   // are part of a table with resized columns
   // return the current total DOM width of the cell multiplied
   // by the percentage of the each individual cell's size.
   // The cell size percentage is calculated using individual colwidth of the cell,
   // from data-colwidth attribute on the cell,
   // divided by the total width of the cells from colwidths for merged cells.
+
   // Ex:
   // colwidth = ‘201,102’
   // Total colWidth = 303
   // returned cellWidths = [303 * (201/303), 303 * (102/303)]
-  // For merged cells we get back colwidth as `201,102`
-
 
+  // For merged cells we get back colwidth as `201,102`
   var cellColWidths = colwidth.split(',').map(function (colwidth) {
     return Number(colwidth);
   });
@@ -174,14 +142,13 @@ var getRelativeDomCellWidths = function getRelativeDomCellWidths(_ref) {
     return width * (cellColWidth / totalCalculatedCellWidth);
   });
 };
-
 var colWidthsForRow = function colWidthsForRow(colGroup, tr) {
   // get the colspans
   var rowColSpans = (0, _utils2.maphElem)(tr, function (cell) {
-    return Number(cell.getAttribute('colspan') || 1
-    /* default to span of 1 */
-    );
-  }); // Chrome has trouble aligning borders with auto tables
+    return Number(cell.getAttribute('colspan') || 1 /* default to span of 1 */);
+  });
+
+  // Chrome has trouble aligning borders with auto tables
   // and the rest of the page grid. tables with defined
   // column widths align fine.
   //
@@ -189,9 +156,7 @@ var colWidthsForRow = function colWidthsForRow(colGroup, tr) {
   //
   // prefer copying the widths via the DOM
   // or inferring from the next row if one exists
-
   var copyTarget = tr.nextElementSibling || tr;
-
   if (copyTarget) {
     // either from the first row while it's still in the table
     var cellInfos = (0, _utils2.maphElem)(copyTarget, function (cell) {
@@ -200,13 +165,13 @@ var colWidthsForRow = function colWidthsForRow(colGroup, tr) {
         colspan: Number(cell.getAttribute('colspan') || 1),
         colwidth: cell.dataset.colwidth
       };
-    }); // reverse engineer cell widths from table widths
+    });
 
+    // reverse engineer cell widths from table widths
     var domBasedCellWidths = [];
     cellInfos.map(function (cell, idx) {
       domBasedCellWidths.push.apply(domBasedCellWidths, (0, _toConsumableArray2.default)(getRelativeDomCellWidths(cell)));
     });
-
     if (cellInfos.reduce(function (acc, cell) {
       return acc + cell.width;
     }, 0) !== 0) {
@@ -215,10 +180,10 @@ var colWidthsForRow = function colWidthsForRow(colGroup, tr) {
         return "".concat(px, "px");
       }).join(' ');
     }
-  } // as a fallback, just calculate a %, and hope that
-  // it aligns perfectly in the user's browser
-
+  }
 
+  // as a fallback, just calculate a %, and hope that
+  // it aligns perfectly in the user's browser
   var visualColCount = rowColSpans.reduce(function (acc, val) {
     return acc + val;
   }, 0);
@@ -229,5 +194,4 @@ var colWidthsForRow = function colWidthsForRow(colGroup, tr) {
     return "".concat(pct, "%");
   }).join(' ');
 };
-
 exports.colWidthsForRow = colWidthsForRow;

package/dist/cjs/plugins/table/utils/decoration.js

@@ -1,42 +1,29 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.updateDecorations = exports.findControlsHoverDecoration = exports.findColumnControlSelectedDecoration = exports.createResizeHandleDecoration = exports.createControlsHoverDecoration = exports.createColumnSelectedDecoration = exports.createColumnLineResize = exports.createColumnControlsDecoration = exports.createCellHoverDecoration = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _tableMap = require("@atlaskit/editor-tables/table-map");
-
 var _utils = require("@atlaskit/editor-tables/utils");
-
 var _prosemirrorView = require("prosemirror-view");
-
 var _utils2 = require("@atlaskit/editor-common/utils");
-
 var _types = require("../types");
-
 var filterDecorationByKey = function filterDecorationByKey(key, decorationSet) {
   return decorationSet.find(undefined, undefined, function (spec) {
     return spec.key.indexOf(key) > -1;
   });
 };
-
 var findColumnControlSelectedDecoration = function findColumnControlSelectedDecoration(decorationSet) {
   return filterDecorationByKey(_types.TableDecorations.COLUMN_SELECTED, decorationSet);
 };
-
 exports.findColumnControlSelectedDecoration = findColumnControlSelectedDecoration;
-
 var findControlsHoverDecoration = function findControlsHoverDecoration(decorationSet) {
   return filterDecorationByKey(_types.TableDecorations.ALL_CONTROLS_HOVER, decorationSet);
 };
-
 exports.findControlsHoverDecoration = findControlsHoverDecoration;
-
 var createCellHoverDecoration = function createCellHoverDecoration(cells, type) {
   return cells.map(function (cell) {
     return _prosemirrorView.Decoration.node(cell.pos, cell.pos + cell.node.nodeSize, {
@@ -46,44 +33,36 @@ var createCellHoverDecoration = function createCellHoverDecoration(cells, type)
     });
   });
 };
-
 exports.createCellHoverDecoration = createCellHoverDecoration;
-
 var createControlsHoverDecoration = function createControlsHoverDecoration(cells, type, tr, danger, selected) {
   var table = (0, _utils.findTable)(tr.selection);
-
   if (!table) {
     return [];
   }
-
   var map = _tableMap.TableMap.get(table.node);
-
   var _cells$reduce = cells.reduce(function (_ref, cell) {
-    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+      var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
         min = _ref2[0],
         max = _ref2[1];
-
-    if (min === null || cell.pos < min) {
-      min = cell.pos;
-    }
-
-    if (max === null || cell.pos > max) {
-      max = cell.pos;
-    }
-
-    return [min, max];
-  }, [null, null]),
-      _cells$reduce2 = (0, _slicedToArray2.default)(_cells$reduce, 2),
-      min = _cells$reduce2[0],
-      max = _cells$reduce2[1];
-
+      if (min === null || cell.pos < min) {
+        min = cell.pos;
+      }
+      if (max === null || cell.pos > max) {
+        max = cell.pos;
+      }
+      return [min, max];
+    }, [null, null]),
+    _cells$reduce2 = (0, _slicedToArray2.default)(_cells$reduce, 2),
+    min = _cells$reduce2[0],
+    max = _cells$reduce2[1];
   if (min === null || max === null) {
     return [];
   }
-
   var updatedCells = cells.map(function (x) {
     return x.pos;
-  }); // ED-15246 fixed trello card table overflow issue
+  });
+
+  // ED-15246 fixed trello card table overflow issue
   // If columns / rows have been merged the hovered selection is different to the actual selection
   // So If the table cells are in danger we want to create a "rectangle" selection
   // to match the "clicked" selection
@@ -92,68 +71,59 @@ var createControlsHoverDecoration = function createControlsHoverDecoration(cells
     // Find the bounding rectangle of all the given cells, also considering
     // merged cells.
     var _cells$reduce3 = cells.reduce(function (acc, cell) {
-      var _map$findCell = map.findCell(cell.pos - table.start),
+        var _map$findCell = map.findCell(cell.pos - table.start),
           left = _map$findCell.left,
           right = _map$findCell.right,
           bottom = _map$findCell.bottom,
-          top = _map$findCell.top; // Finding the bounding rect requires finding the min left and top positions,
-      // and the max right and bottom positions of the cells
-
-
-      return {
-        recLeft: Math.min(acc.recLeft, left),
-        recTop: Math.min(acc.recTop, top),
-        recRight: Math.max(acc.recRight, right),
-        recBottom: Math.max(acc.recBottom, bottom)
-      };
-    }, // +-Infinity as initialisation vars which will always be overwritten
-    // by smaller/larger values respectively
-    {
-      recLeft: Infinity,
-      recTop: Infinity,
-      recRight: -Infinity,
-      recBottom: -Infinity
-    }),
-        recLeft = _cells$reduce3.recLeft,
-        recTop = _cells$reduce3.recTop,
-        recRight = _cells$reduce3.recRight,
-        recBottom = _cells$reduce3.recBottom;
-
+          top = _map$findCell.top;
+        // Finding the bounding rect requires finding the min left and top positions,
+        // and the max right and bottom positions of the cells
+        return {
+          recLeft: Math.min(acc.recLeft, left),
+          recTop: Math.min(acc.recTop, top),
+          recRight: Math.max(acc.recRight, right),
+          recBottom: Math.max(acc.recBottom, bottom)
+        };
+      },
+      // +-Infinity as initialisation vars which will always be overwritten
+      // by smaller/larger values respectively
+      {
+        recLeft: Infinity,
+        recTop: Infinity,
+        recRight: -Infinity,
+        recBottom: -Infinity
+      }),
+      recLeft = _cells$reduce3.recLeft,
+      recTop = _cells$reduce3.recTop,
+      recRight = _cells$reduce3.recRight,
+      recBottom = _cells$reduce3.recBottom;
     var rect = new _tableMap.Rect(recLeft, recTop, recRight, recBottom);
     updatedCells = map.cellsInRect(rect).map(function (x) {
       return x + table.start;
     });
   }
-
   return updatedCells.map(function (pos) {
     var cell = tr.doc.nodeAt(pos);
     var classes = [_types.TableCssClassName.HOVERED_CELL];
-
     if (danger) {
       classes.push(_types.TableCssClassName.HOVERED_CELL_IN_DANGER);
     }
-
     if (selected) {
       classes.push(_types.TableCssClassName.SELECTED_CELL);
     }
-
     classes.push(type === 'column' ? _types.TableCssClassName.HOVERED_COLUMN : type === 'row' ? _types.TableCssClassName.HOVERED_ROW : _types.TableCssClassName.HOVERED_TABLE);
     var key;
-
     switch (type) {
       case 'row':
         key = _types.TableDecorations.ROW_CONTROLS_HOVER;
         break;
-
       case 'column':
         key = _types.TableDecorations.COLUMN_CONTROLS_HOVER;
         break;
-
       default:
         key = _types.TableDecorations.TABLE_CONTROLS_HOVER;
         break;
     }
-
     return _prosemirrorView.Decoration.node(pos, pos + cell.nodeSize, {
       class: classes.join(' ')
     }, {
@@ -161,21 +131,16 @@ var createControlsHoverDecoration = function createControlsHoverDecoration(cells
     });
   });
 };
-
 exports.createControlsHoverDecoration = createControlsHoverDecoration;
-
 var createColumnSelectedDecoration = function createColumnSelectedDecoration(tr) {
   var selection = tr.selection,
-      doc = tr.doc;
+    doc = tr.doc;
   var table = (0, _utils.findTable)(selection);
   var rect = (0, _utils.getSelectionRect)(selection);
-
   if (!table || !rect) {
     return [];
   }
-
   var map = _tableMap.TableMap.get(table.node);
-
   var cellPositions = map.cellsInRect(rect);
   return cellPositions.map(function (pos, index) {
     var cell = doc.nodeAt(pos + table.start);
@@ -186,19 +151,18 @@ var createColumnSelectedDecoration = function createColumnSelectedDecoration(tr)
     });
   });
 };
-
 exports.createColumnSelectedDecoration = createColumnSelectedDecoration;
-
 var createColumnControlsDecoration = function createColumnControlsDecoration(selection) {
   var cells = (0, _utils.getCellsInRow)(0)(selection) || [];
   var index = 0;
   return cells.map(function (cell) {
-    var colspan = cell.node.attrs.colspan || 1; // It's important these values are scoped locally as the widget callback could be executed anytime in the future
+    var colspan = cell.node.attrs.colspan || 1;
+    // It's important these values are scoped locally as the widget callback could be executed anytime in the future
     // and we want to avoid value leak
-
     var startIndex = index;
-    var endIndex = startIndex + colspan; // The next cell start index will commence from the current cell end index.
+    var endIndex = startIndex + colspan;
 
+    // The next cell start index will commence from the current cell end index.
     index = endIndex;
     return _prosemirrorView.Decoration.widget(cell.pos + 1, function () {
       var element = document.createElement('div');
@@ -213,20 +177,17 @@ var createColumnControlsDecoration = function createColumnControlsDecoration(sel
     });
   });
 };
-
 exports.createColumnControlsDecoration = createColumnControlsDecoration;
-
 var updateDecorations = function updateDecorations(node, decorationSet, decorations, key) {
   var filteredDecorations = filterDecorationByKey(key, decorationSet);
   var decorationSetFiltered = decorationSet.remove(filteredDecorations);
   return decorationSetFiltered.add(node, decorations);
 };
-
 exports.updateDecorations = updateDecorations;
-
 var makeArray = function makeArray(n) {
   return Array.from(Array(n).keys());
 };
+
 /*
  * This function will create two specific decorations for each cell in a column index target,
  * for example given that table:
@@ -306,22 +267,16 @@ var makeArray = function makeArray(n) {
  *   we will add a new class on the last item for each cell,
  *   hence the second media will receive this class `ClassName.LAST_ITEM_IN_CELL`
  */
-
-
 var createResizeHandleDecoration = function createResizeHandleDecoration(tr, rowIndexTarget, columnEndIndexTarget) {
   var emptyResult = [[], []];
   var table = (0, _utils.findTable)(tr.selection);
-
   if (!table || !table.node) {
     return emptyResult;
   }
-
   var map = _tableMap.TableMap.get(table.node);
-
   if (!map.width) {
     return emptyResult;
   }
-
   var createResizerHandleDecoration = function createResizerHandleDecoration(cellColumnPositioning, columnIndex, rowIndex, cellPos, cellNode) {
     var position = cellPos + cellNode.nodeSize - 1;
     return _prosemirrorView.Decoration.widget(position, function () {
@@ -334,7 +289,6 @@ var createResizeHandleDecoration = function createResizeHandleDecoration(tr, row
       key: "".concat(_types.TableDecorations.COLUMN_RESIZING_HANDLE, "_").concat(rowIndex, "_").concat(columnIndex)
     });
   };
-
   var createLastCellElementDecoration = function createLastCellElementDecoration(cellColumnPositioning, cellPos, cellNode) {
     var lastItemPositions;
     cellNode.forEach(function (childNode, offset, index) {
@@ -346,51 +300,39 @@ var createResizeHandleDecoration = function createResizeHandleDecoration(tr, row
         };
       }
     });
-
     if (!lastItemPositions) {
       return null;
     }
-
     return _prosemirrorView.Decoration.node(lastItemPositions.from, lastItemPositions.to, {
       class: _types.TableCssClassName.LAST_ITEM_IN_CELL
     }, {
       key: "".concat(_types.TableDecorations.LAST_CELL_ELEMENT, "_").concat(cellColumnPositioning.left, "_").concat(cellColumnPositioning.right)
     });
   };
-
   var resizeHandleCellDecorations = [];
   var lastCellElementsDecorations = [];
-
   for (var rowIndex = 0; rowIndex < map.height; rowIndex++) {
     var seen = {};
-
     if (rowIndex !== rowIndexTarget) {
       continue;
     }
-
     for (var columnIndex = 0; columnIndex < map.width; columnIndex++) {
       var cellPosition = map.map[map.width * rowIndex + columnIndex];
-
       if (seen[cellPosition]) {
         continue;
       }
-
       seen[cellPosition] = true;
       var cellPos = table.start + cellPosition;
       var cell = tr.doc.nodeAt(cellPos);
-
       if (!cell) {
         continue;
       }
-
       var colspan = cell.attrs.colspan || 1;
       var startIndex = columnIndex;
       var endIndex = colspan + startIndex;
-
       if (endIndex !== columnEndIndexTarget.right) {
         continue;
       }
-
       var resizerHandleDec = createResizerHandleDecoration({
         left: startIndex,
         right: endIndex
@@ -403,9 +345,9 @@ var createResizeHandleDecoration = function createResizeHandleDecoration(tr, row
       lastCellElementsDecorations.push(lastCellDec);
     }
   }
-
   return [resizeHandleCellDecorations, lastCellElementsDecorations.filter(_utils2.nonNullable)];
 };
+
 /*
  * This function will create a decoration for each cell using the right position on the CellColumnPositioning
  * for example given that table:
@@ -448,27 +390,18 @@ var createResizeHandleDecoration = function createResizeHandleDecoration(tr, row
  * this function will return two decorations applying a new class `ClassName.WITH_RESIZE_LINE`
  * only on the cells: `C1` and `D1`.
  */
-
-
 exports.createResizeHandleDecoration = createResizeHandleDecoration;
-
 var createColumnLineResize = function createColumnLineResize(selection, cellColumnPositioning) {
   var table = (0, _utils.findTable)(selection);
-
   if (!table || cellColumnPositioning.right === null) {
     return [];
   }
-
   var columnIndex = cellColumnPositioning.right;
-
   var map = _tableMap.TableMap.get(table.node);
-
   var isLastColumn = columnIndex === map.width;
-
   if (isLastColumn) {
     columnIndex -= 1;
   }
-
   var decorationClassName = isLastColumn ? _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN : _types.TableCssClassName.WITH_RESIZE_LINE;
   var cellPositions = makeArray(map.height).map(function (rowIndex) {
     return map.map[map.width * rowIndex + columnIndex];
@@ -480,6 +413,7 @@ var createColumnLineResize = function createColumnLineResize(selection, cellColu
     var nextPosition = map.map[map.width * rowIndex + columnIndex - 1];
     return cellPosition !== nextPosition; // Removed it if next position is merged
   });
+
   var cells = cellPositions.map(function (pos) {
     return {
       pos: pos + table.start,
@@ -490,7 +424,6 @@ var createColumnLineResize = function createColumnLineResize(selection, cellColu
     if (!cell || !cell.node) {
       return;
     }
-
     return _prosemirrorView.Decoration.node(cell.pos, cell.pos + cell.node.nodeSize, {
       class: decorationClassName
     }, {
@@ -498,5 +431,4 @@ var createColumnLineResize = function createColumnLineResize(selection, cellColu
     });
   }).filter(_utils2.nonNullable);
 };
-
 exports.createColumnLineResize = createColumnLineResize;