@atlaskit/editor-plugin-table 1.1.0 → 1.1.2

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

@@ -10,19 +10,17 @@ export var getColumnsWidths = function getColumnsWidths(view) {
   var selection = view.state.selection;
   var widths = [];
   var table = findTable(selection);
-
   if (table) {
     var map = TableMap.get(table.node);
-    var domAtPos = view.domAtPos.bind(view); // When there is no cell we need to fill it with undefined
+    var domAtPos = view.domAtPos.bind(view);
 
+    // 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 = getCellsInColumn(i)(selection);
       var cell = cells[0];
-
       if (cell) {
         var cellRef = findDomRefAtPos(cell.pos, domAtPos);
         var rect = cellRef.getBoundingClientRect();
@@ -31,46 +29,37 @@ export var getColumnsWidths = function getColumnsWidths(view) {
       }
     }
   }
-
   return widths;
 };
 export var isColumnDeleteButtonVisible = function isColumnDeleteButtonVisible(selection) {
   if (!isTableSelected(selection) && selection instanceof CellSelection && selection.isColSelection()) {
     return true;
   }
-
   return false;
 };
 export var getColumnDeleteButtonParams = function getColumnDeleteButtonParams(columnsWidths, selection) {
   var rect = 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 - tableDeleteButtonSize / 2;
   return {
     left: left,
@@ -82,19 +71,17 @@ export var getColumnClassNames = function getColumnClassNames(index, selection)
   var isInDanger = arguments.length > 3 ? arguments[3] : undefined;
   var isResizing = arguments.length > 4 ? arguments[4] : undefined;
   var classNames = [];
-
   if (isColumnSelected(index)(selection) || hoveredColumns.indexOf(index) > -1 && !isResizing) {
     classNames.push(ClassName.HOVERED_CELL_ACTIVE);
-
     if (isInDanger) {
       classNames.push(ClassName.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
 var mapTableColwidthsToRow = function mapTableColwidthsToRow(rowColSpans, tableColWidths) {
   var curColIdx = 0;
   var colWidths = [];
@@ -107,12 +94,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,
@@ -120,20 +105,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);
   });
@@ -144,14 +131,13 @@ var getRelativeDomCellWidths = function getRelativeDomCellWidths(_ref) {
     return width * (cellColWidth / totalCalculatedCellWidth);
   });
 };
-
 export var colWidthsForRow = function colWidthsForRow(colGroup, tr) {
   // get the colspans
   var rowColSpans = 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.
   //
@@ -159,9 +145,7 @@ export 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 = maphElem(copyTarget, function (cell) {
@@ -170,13 +154,13 @@ export 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, _toConsumableArray(getRelativeDomCellWidths(cell)));
     });
-
     if (cellInfos.reduce(function (acc, cell) {
       return acc + cell.width;
     }, 0) !== 0) {
@@ -185,10 +169,10 @@ export 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);

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

@@ -4,13 +4,11 @@ import { findTable, getCellsInRow, getSelectionRect } from '@atlaskit/editor-tab
 import { Decoration } from 'prosemirror-view';
 import { nonNullable } from '@atlaskit/editor-common/utils';
 import { TableCssClassName as ClassName, TableDecorations } from '../types';
-
 var filterDecorationByKey = function filterDecorationByKey(key, decorationSet) {
   return decorationSet.find(undefined, undefined, function (spec) {
     return spec.key.indexOf(key) > -1;
   });
 };
-
 export var findColumnControlSelectedDecoration = function findColumnControlSelectedDecoration(decorationSet) {
   return filterDecorationByKey(TableDecorations.COLUMN_SELECTED, decorationSet);
 };
@@ -28,39 +26,33 @@ export var createCellHoverDecoration = function createCellHoverDecoration(cells,
 };
 export var createControlsHoverDecoration = function createControlsHoverDecoration(cells, type, tr, danger, selected) {
   var table = findTable(tr.selection);
-
   if (!table) {
     return [];
   }
-
   var map = TableMap.get(table.node);
-
   var _cells$reduce = cells.reduce(function (_ref, cell) {
-    var _ref2 = _slicedToArray(_ref, 2),
+      var _ref2 = _slicedToArray(_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 = _slicedToArray(_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 = _slicedToArray(_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
@@ -69,68 +61,59 @@ export var createControlsHoverDecoration = function createControlsHoverDecoratio
     // 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 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 = [ClassName.HOVERED_CELL];
-
     if (danger) {
       classes.push(ClassName.HOVERED_CELL_IN_DANGER);
     }
-
     if (selected) {
       classes.push(ClassName.SELECTED_CELL);
     }
-
     classes.push(type === 'column' ? ClassName.HOVERED_COLUMN : type === 'row' ? ClassName.HOVERED_ROW : ClassName.HOVERED_TABLE);
     var key;
-
     switch (type) {
       case 'row':
         key = TableDecorations.ROW_CONTROLS_HOVER;
         break;
-
       case 'column':
         key = TableDecorations.COLUMN_CONTROLS_HOVER;
         break;
-
       default:
         key = TableDecorations.TABLE_CONTROLS_HOVER;
         break;
     }
-
     return Decoration.node(pos, pos + cell.nodeSize, {
       class: classes.join(' ')
     }, {
@@ -140,14 +123,12 @@ export var createControlsHoverDecoration = function createControlsHoverDecoratio
 };
 export var createColumnSelectedDecoration = function createColumnSelectedDecoration(tr) {
   var selection = tr.selection,
-      doc = tr.doc;
+    doc = tr.doc;
   var table = findTable(selection);
   var rect = getSelectionRect(selection);
-
   if (!table || !rect) {
     return [];
   }
-
   var map = TableMap.get(table.node);
   var cellPositions = map.cellsInRect(rect);
   return cellPositions.map(function (pos, index) {
@@ -163,12 +144,13 @@ export var createColumnControlsDecoration = function createColumnControlsDecorat
   var cells = 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 Decoration.widget(cell.pos + 1, function () {
       var element = document.createElement('div');
@@ -188,10 +170,10 @@ export var updateDecorations = function updateDecorations(node, decorationSet, d
   var decorationSetFiltered = decorationSet.remove(filteredDecorations);
   return decorationSetFiltered.add(node, decorations);
 };
-
 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:
@@ -271,22 +253,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`
  */
-
-
 export var createResizeHandleDecoration = function createResizeHandleDecoration(tr, rowIndexTarget, columnEndIndexTarget) {
   var emptyResult = [[], []];
   var table = findTable(tr.selection);
-
   if (!table || !table.node) {
     return emptyResult;
   }
-
   var map = 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 Decoration.widget(position, function () {
@@ -299,7 +275,6 @@ export var createResizeHandleDecoration = function createResizeHandleDecoration(
       key: "".concat(TableDecorations.COLUMN_RESIZING_HANDLE, "_").concat(rowIndex, "_").concat(columnIndex)
     });
   };
-
   var createLastCellElementDecoration = function createLastCellElementDecoration(cellColumnPositioning, cellPos, cellNode) {
     var lastItemPositions;
     cellNode.forEach(function (childNode, offset, index) {
@@ -311,51 +286,39 @@ export var createResizeHandleDecoration = function createResizeHandleDecoration(
         };
       }
     });
-
     if (!lastItemPositions) {
       return null;
     }
-
     return Decoration.node(lastItemPositions.from, lastItemPositions.to, {
       class: ClassName.LAST_ITEM_IN_CELL
     }, {
       key: "".concat(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
@@ -368,9 +331,9 @@ export var createResizeHandleDecoration = function createResizeHandleDecoration(
       lastCellElementsDecorations.push(lastCellDec);
     }
   }
-
   return [resizeHandleCellDecorations, lastCellElementsDecorations.filter(nonNullable)];
 };
+
 /*
  * This function will create a decoration for each cell using the right position on the CellColumnPositioning
  * for example given that table:
@@ -413,22 +376,17 @@ export var createResizeHandleDecoration = function createResizeHandleDecoration(
  * this function will return two decorations applying a new class `ClassName.WITH_RESIZE_LINE`
  * only on the cells: `C1` and `D1`.
  */
-
 export var createColumnLineResize = function createColumnLineResize(selection, cellColumnPositioning) {
   var table = findTable(selection);
-
   if (!table || cellColumnPositioning.right === null) {
     return [];
   }
-
   var columnIndex = cellColumnPositioning.right;
   var map = TableMap.get(table.node);
   var isLastColumn = columnIndex === map.width;
-
   if (isLastColumn) {
     columnIndex -= 1;
   }
-
   var decorationClassName = isLastColumn ? ClassName.WITH_RESIZE_LINE_LAST_COLUMN : ClassName.WITH_RESIZE_LINE;
   var cellPositions = makeArray(map.height).map(function (rowIndex) {
     return map.map[map.width * rowIndex + columnIndex];
@@ -440,6 +398,7 @@ export var createColumnLineResize = function createColumnLineResize(selection, c
     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,
@@ -450,7 +409,6 @@ export var createColumnLineResize = function createColumnLineResize(selection, c
     if (!cell || !cell.node) {
       return;
     }
-
     return Decoration.node(cell.pos, cell.pos + cell.node.nodeSize, {
       class: decorationClassName
     }, {

package/dist/esm/plugins/table/utils/dom.js

@@ -29,6 +29,7 @@ export var isTableControlsButton = function isTableControlsButton(node) {
 export var isTableContainerOrWrapper = function isTableContainerOrWrapper(node) {
   return containsClassName(node, ClassName.TABLE_CONTAINER) || containsClassName(node, ClassName.TABLE_NODE_WRAPPER);
 };
+
 /*
  * This function returns which side of a given element the mouse cursor is,
  * using as a base the half of the width by default, for example:
@@ -85,14 +86,11 @@ export var isTableContainerOrWrapper = function isTableContainerOrWrapper(node)
 
 export var getMousePositionHorizontalRelativeByElement = function getMousePositionHorizontalRelativeByElement(mouseEvent, mouseMoveOptimization, elementContentRects, gapInPixels) {
   var element = mouseEvent.target;
-
   if (element instanceof HTMLElement) {
     var width, x;
     var closestCell = element.closest(SELECTOR_TABLE_LEAFS);
-
     if (mouseMoveOptimization) {
       var _closestCell$id, _elementContentRects$, _elementContentRects$2;
-
       var id = (_closestCell$id = closestCell === null || closestCell === void 0 ? void 0 : closestCell.id) !== null && _closestCell$id !== void 0 ? _closestCell$id : '';
       width = (_elementContentRects$ = elementContentRects === null || elementContentRects === void 0 ? void 0 : (_elementContentRects$2 = elementContentRects[id]) === null || _elementContentRects$2 === void 0 ? void 0 : _elementContentRects$2.width) !== null && _elementContentRects$ !== void 0 ? _elementContentRects$ : 0;
       x = mouseEvent.offsetX;
@@ -102,11 +100,9 @@ export var getMousePositionHorizontalRelativeByElement = function getMousePositi
       var left = elementRect.left;
       x = mouseEvent.clientX - left;
     }
-
     if (width <= 0) {
       return null;
     }
-
     if (!gapInPixels) {
       return x / width > 0.5 ? 'right' : 'left';
     } else {
@@ -117,57 +113,45 @@ export var getMousePositionHorizontalRelativeByElement = function getMousePositi
       }
     }
   }
-
   return null;
 };
 export var getMousePositionVerticalRelativeByElement = function getMousePositionVerticalRelativeByElement(mouseEvent) {
   var element = mouseEvent.target;
-
   if (element instanceof HTMLElement) {
     var elementRect = element.getBoundingClientRect();
-
     if (elementRect.height <= 0) {
       return null;
     }
-
     var y = mouseEvent.clientY - elementRect.top;
     return y / elementRect.height > 0.5 ? 'bottom' : 'top';
   }
-
   return null;
 };
 export var updateResizeHandles = function updateResizeHandles(tableRef) {
   if (!tableRef) {
     return;
   }
-
-  var height = tableRef.offsetHeight + tableToolbarSize; // see ED-7600
-
+  var height = tableRef.offsetHeight + tableToolbarSize;
+  // see ED-7600
   var nodes = Array.from(tableRef.querySelectorAll(".".concat(ClassName.RESIZE_HANDLE)));
-
   if (!nodes || !nodes.length) {
     return;
   }
-
   nodes.forEach(function (node) {
     node.style.height = "".concat(height, "px");
   });
 };
 export var hasResizeHandler = function hasResizeHandler(_ref) {
   var columnEndIndexTarget = _ref.columnEndIndexTarget,
-      target = _ref.target;
+    target = _ref.target;
   var tableElement = closestElement(target, 'table');
-
   if (!tableElement) {
     return false;
   }
-
   var query = [".".concat(ClassName.RESIZE_HANDLE_DECORATION), "[data-end-index=\"".concat(columnEndIndexTarget, "\"]")];
   var decorationElement = tableElement.querySelectorAll(query.join(''));
-
   if (!decorationElement || decorationElement.length === 0) {
     return false;
   }
-
   return true;
 };