@atlaskit/editor-plugin-table 0.0.0 → 0.0.1

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

@@ -0,0 +1,234 @@
+"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");
+
+// import { maphElem } from '@atlaskit/editor-core/src/utils/dom';
+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); // 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();
+        widths[i] = (rect ? rect.width : cellRef.offsetWidth) + 1;
+        i += cell.node.attrs.colspan - 1;
+      }
+    }
+  }
+
+  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
+
+  for (var i = 0; i < rect.left; i++) {
+    var colWidth = columnsWidths[i];
+
+    if (colWidth) {
+      offset += colWidth - 1;
+    }
+  } // 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
+
+
+exports.getColumnClassNames = getColumnClassNames;
+
+var mapTableColwidthsToRow = function mapTableColwidthsToRow(rowColSpans, tableColWidths) {
+  var curColIdx = 0;
+  var colWidths = [];
+  rowColSpans.forEach(function (cellColSpan) {
+    var colWidth = tableColWidths.slice(curColIdx, curColIdx + cellColSpan).reduce(function (acc, val) {
+      return acc + val;
+    }, 0);
+    curColIdx += cellColSpan;
+    colWidths.push(colWidth);
+  });
+  return colWidths;
+};
+
+var getRelativeDomCellWidths = function getRelativeDomCellWidths(_ref) {
+  var width = _ref.width,
+      colspan = _ref.colspan,
+      colwidth = _ref.colwidth;
+
+  // For cells with colSpan 1
+  // or
+  // for cells in a table with unchanged column widths,
+  // these are identified by the lack of colwidth data attribute,
+  // 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
+  // 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`
+
+
+  var cellColWidths = colwidth.split(',').map(function (colwidth) {
+    return Number(colwidth);
+  });
+  var totalCalculatedCellWidth = cellColWidths.reduce(function (acc, cellColWidth) {
+    return acc + cellColWidth;
+  }, 0);
+  return cellColWidths.map(function (cellColWidth) {
+    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
+  // and the rest of the page grid. tables with defined
+  // column widths align fine.
+  //
+  // eg a 4x25% table might end up as 189px 190px 190px 190px
+  //
+  // 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) {
+      return {
+        width: cell.offsetWidth,
+        colspan: Number(cell.getAttribute('colspan') || 1),
+        colwidth: cell.dataset.colwidth
+      };
+    }); // 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) {
+      var newWidths = mapTableColwidthsToRow(rowColSpans, domBasedCellWidths);
+      return newWidths.map(function (px) {
+        return "".concat(px, "px");
+      }).join(' ');
+    }
+  } // 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);
+  var pctWidths = rowColSpans.map(function (cellColSpan) {
+    return cellColSpan / visualColCount * 100;
+  });
+  return pctWidths.map(function (pct) {
+    return "".concat(pct, "%");
+  }).join(' ');
+};
+
+exports.colWidthsForRow = colWidthsForRow;

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

@@ -0,0 +1,405 @@
+"use strict";
+
+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 _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");
+
+// import { nonNullable } from '@atlaskit/editor-core/src/utils';
+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, {
+      class: _types.TableCssClassName.HOVERED_CELL_WARNING
+    }, {
+      key: _types.TableDecorations.CELL_CONTROLS_HOVER
+    });
+  });
+};
+
+exports.createCellHoverDecoration = createCellHoverDecoration;
+
+var createControlsHoverDecoration = function createControlsHoverDecoration(cells, type, danger, selected) {
+  return cells.map(function (cell) {
+    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(cell.pos, cell.pos + cell.node.nodeSize, {
+      class: classes.join(' ')
+    }, {
+      key: key
+    });
+  });
+};
+
+exports.createControlsHoverDecoration = createControlsHoverDecoration;
+
+var createColumnSelectedDecoration = function createColumnSelectedDecoration(tr) {
+  var selection = tr.selection,
+      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);
+    return _prosemirrorView.Decoration.node(pos + table.start, pos + table.start + cell.nodeSize, {
+      class: _types.TableCssClassName.COLUMN_SELECTED
+    }, {
+      key: "".concat(_types.TableDecorations.COLUMN_SELECTED, "_").concat(index)
+    });
+  });
+};
+
+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;
+    var element = document.createElement('div');
+    element.classList.add(_types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS);
+    element.dataset.startIndex = "".concat(index);
+    index += colspan;
+    element.dataset.endIndex = "".concat(index);
+    return _prosemirrorView.Decoration.widget(cell.pos + 1, function () {
+      return element;
+    }, {
+      key: "".concat(_types.TableDecorations.COLUMN_CONTROLS_DECORATIONS, "_").concat(index),
+      // this decoration should be the first one, even before gap cursor.
+      side: -100
+    });
+  });
+};
+
+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:
+ *
+ * ```
+ *    0       1      2      3
+ * _____________________ _______
+ * |      |             |      |
+ * |  B1  |     C1      |  A1  |
+ * |______|______ ______|______|
+ * |             |      |      |
+ * |     B2      |      |  A2  |
+ * |______ ______|      |______|
+ * |      |      |  D1  |      |
+ * |  B3  |  C2  |      |  A3  |
+ * |______|______|______|______|
+ *        ^      ^      ^      ^
+ *        |      |      |      |
+ *        |      |      |      |
+ *        |      |      |      |
+ *        0      1      3      4
+ *         \     |      |     /
+ *          \    |      |    /
+ *           \   |      |   /
+ *            \  |      |  /
+ *             \ |      | /
+ *         columnEndIndexTarget === CellColumnPositioning.right
+ * ```
+ *
+ * When a user wants to resize a cell,
+ * they need to grab and hold the end of that column,
+ * and this will be the `columnEndIndexTarget` using
+ * the CellColumnPositioning interface.
+ *
+ * Let's say the `columnEndIndexTarget.right` is 3,
+ * so this function will return two types of decorations for each cell on that column,
+ * that means 2 `resizerHandle` and 2 `lastCellElement`,
+ * here is the explanation for each one of them :
+ *
+ * - resizerHandle:
+ *
+ *   Given the cell C1, this decoration will add a div to create this area
+ * ```
+ *    ▁▁▁▁▁▁▁▁▁▁▁▁▁
+ *   |           ▒▒|
+ *   |     C1    ▒▒|
+ *   |           ▒▒|
+ *    ▔▔▔▔▔▔▔▔▔▔▔▔▔
+ * ```
+ *   This ▒ represents the area where table resizing will start,
+ *   and you can follow that using checking the class name `ClassName.RESIZE_HANDLE_DECORATION` on the code
+ *
+ * - lastCellElementDecoration
+ *
+ *   Given the content of the cell C1
+ *    ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁
+ *   |                   |
+ *   |   _____________   |
+ *   |  |             |  |
+ *   |  |     <p>     |  |
+ *   |  |_____________|  |
+ *   |                   |
+ *   |   _____________   |
+ *   |  |             |  |
+ *   |  |   <media>   |  |
+ *   |  |_____________|  |
+ *   |                   |
+ *   |   _____________   |
+ *   |  |             |  |
+ *   |  |   <media>   |  |
+ *   |  |_____________|  |
+ *   |                   |
+ *    ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
+ *   Currently, we are removing the margin-bottom from the last media using this kind of CSS rule:
+ *   `div:last-of-type`; This is quite unstable, and after we create the `resizerHandle` div,
+ *   that logic will apply the margin in the wrong element, to avoid that,
+ *   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, 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 element = document.createElement('div');
+    element.classList.add(_types.TableCssClassName.RESIZE_HANDLE_DECORATION);
+    element.dataset.startIndex = "".concat(cellColumnPositioning.left);
+    element.dataset.endIndex = "".concat(cellColumnPositioning.right);
+    var position = cellPos + cellNode.nodeSize - 1;
+    return _prosemirrorView.Decoration.widget(position, element, {
+      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) {
+      if (index === cellNode.childCount - 1) {
+        var from = offset + cellPos + 1;
+        lastItemPositions = {
+          from: from,
+          to: from + childNode.nodeSize
+        };
+      }
+    });
+
+    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 = {};
+
+    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
+      }, columnIndex, rowIndex, cellPos, cell);
+      var lastCellDec = createLastCellElementDecoration({
+        left: startIndex,
+        right: endIndex
+      }, cellPos, cell);
+      resizeHandleCellDecorations.push(resizerHandleDec);
+      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:
+ *
+ * ```
+ *    0       1      2      3   <--- column indexes
+ * _____________________ _______
+ * |      |             |      |
+ * |  B1  |     C1      |  A1  |
+ * |______|______ ______|______|
+ * |             |      |      |
+ * |     B2      |  D1  |  A2  |
+ * |______ ______|______|______|
+ * |      |      |             |
+ * |  B3  |  C2  |      D2     |
+ * |______|______|_____________|
+ * ```
+ *
+ * and given the left and right represents the C1 cell:
+ *
+ * ```
+ *      left          right
+ *        1             3
+ *        |             |
+ *        |             |
+ *        |             |
+ * _______∨_____________∨_______
+ * |      |             |      |
+ * |  B1  |     C1      |  A1  |
+ * |______|______ ______|______|
+ * |             |      |      |
+ * |     B2      |  D1  |  A2  |
+ * |______ ______|______|______|
+ * |      |      |             |
+ * |  B3  |  C2  |      D2     |
+ * |______|______|_____________|
+ * ```
+ *
+ * Taking that table, and the right as parameters,
+ * 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 - 1;
+
+  var map = _tableMap.TableMap.get(table.node);
+
+  var cellPositions = makeArray(map.height).map(function (rowIndex) {
+    return map.map[map.width * rowIndex + columnIndex];
+  }).filter(function (cellPosition, rowIndex) {
+    if (columnIndex === map.width) {
+      return true; // If is the last column no filter applied
+    }
+
+    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,
+      node: table.node.nodeAt(pos)
+    };
+  });
+  return cells.map(function (cell, index) {
+    if (!cell || !cell.node) {
+      return;
+    }
+
+    return _prosemirrorView.Decoration.node(cell.pos, cell.pos + cell.node.nodeSize, {
+      class: _types.TableCssClassName.WITH_RESIZE_LINE
+    }, {
+      key: "".concat(_types.TableDecorations.COLUMN_RESIZING_HANDLE_LINE, "_").concat(cellColumnPositioning.right, "_").concat(index)
+    });
+  }).filter(_utils2.nonNullable);
+};
+
+exports.createColumnLineResize = createColumnLineResize;