@atlaskit/editor-plugin-table 0.0.0 → 0.0.1

package/dist/esm/plugins/table/ui/ui-styles.js

@@ -0,0 +1,73 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
+
+import { css } from '@emotion/react';
+import { tableCellBorderWidth, tableMarginBottom, tableMarginTop } from '@atlaskit/editor-common/styles';
+import { akEditorShadowZIndex, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
+import { N40A, B300, N300, R300, N20A, N60A, N0, Y50, Y200 } from '@atlaskit/theme/colors';
+import { tableToolbarColor, tableBorderColor, tableToolbarSelectedColor, tableBorderSelectedColor, tableCellDeleteColor, tableBorderDeleteColor, tableToolbarDeleteColor, lineMarkerOffsetFromColumnControls, lineMarkerSize, columnControlsDecorationHeight, columnControlsZIndex, columnControlsSelectedZIndex, resizeHandlerAreaWidth, resizeLineWidth, resizeHandlerZIndex, tableToolbarSize, tableInsertColumnButtonSize, tableDeleteButtonSize, tableControlsSpacing } from './consts';
+import { TableCssClassName as ClassName } from '../types';
+import { borderRadius } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
+
+var InsertLine = function InsertLine(cssString) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    background: ", ";\n    display: none;\n    position: absolute;\n    z-index: ", ";\n    ", "\n  }\n"])), ClassName.CONTROLS_INSERT_LINE, tableBorderSelectedColor, akEditorUnitZIndex, cssString);
+};
+
+var Marker = function Marker(props) {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  position: absolute;\n  height: ", "px;\n  width: ", "px;\n  border-radius: 50%;\n  pointer-events: none;\n"])), tableBorderColor(props), lineMarkerSize, lineMarkerSize);
+};
+
+export var InsertMarker = function InsertMarker(props, cssString) {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .", " {\n    ", ";\n    ", "\n  }\n"])), ClassName.CONTROLS_INSERT_MARKER, Marker(props), cssString);
+};
+
+var Button = function Button(cssString) {
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  border-width: 0px;\n  display: inline-flex;\n  max-width: 100%;\n  text-align: center;\n  margin: 0px;\n  padding: 0px;\n  text-decoration: none;\n  transition: background 0.1s ease-out 0s,\n    box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\n  outline: none !important;\n  cursor: none;\n\n  > .", " {\n    display: inline-flex;\n    max-height: 100%;\n    max-width: 100%;\n  }\n  ", "\n"])), borderRadius(), ClassName.CONTROLS_BUTTON_ICON, cssString);
+};
+
+export var HeaderButton = function HeaderButton(props, cssString) {
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  .", " {\n    background: ", ";\n    border: 1px solid ", ";\n    display: block;\n    box-sizing: border-box;\n    padding: 0;\n\n    :focus {\n      outline: none;\n    }\n    ", "\n  }\n\n  .", "::after {\n    content: ' ';\n    background-color: transparent;\n    left: -15px;\n    top: 0;\n    position: absolute;\n    width: 15px;\n    height: 100%;\n    z-index: 1;\n  }\n\n  .active .", " {\n    color: ", ";\n    background-color: ", ";\n    border-color: ", ";\n  }\n"])), ClassName.CONTROLS_BUTTON, tableToolbarColor(props), tableBorderColor(props), cssString, ClassName.ROW_CONTROLS_BUTTON, ClassName.CONTROLS_BUTTON, token('color.icon.inverse', N0), tableToolbarSelectedColor, tableBorderSelectedColor);
+};
+export var HeaderButtonHover = function HeaderButtonHover() {
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  .", ":hover {\n    color: ", ";\n    background-color: ", ";\n    border-color: ", ";\n    cursor: pointer;\n  }\n"])), ClassName.CONTROLS_BUTTON, token('color.icon.inverse', N0), tableToolbarSelectedColor, tableBorderSelectedColor);
+};
+export var HeaderButtonDanger = function HeaderButtonDanger() {
+  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  .", " .", " {\n    background-color: ", ";\n    border-color: ", ";\n    position: relative;\n    z-index: ", ";\n  }\n"])), ClassName.HOVERED_CELL_IN_DANGER, ClassName.CONTROLS_BUTTON, tableToolbarDeleteColor, tableBorderDeleteColor, akEditorUnitZIndex);
+};
+
+var InsertButton = function InsertButton() {
+  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  .", " {\n    position: absolute;\n    z-index: ", ";\n    bottom: 0;\n  }\n  .", ",\n    .", " {\n    height: ", "px;\n    width: ", "px;\n  }\n  .", " {\n    ", "\n  }\n  .", " {\n    display: none;\n  }\n  &:hover .", " {\n    display: flex;\n  }\n"])), ClassName.CONTROLS_INSERT_BUTTON_INNER, akEditorUnitZIndex + 10, ClassName.CONTROLS_INSERT_BUTTON_INNER, ClassName.CONTROLS_INSERT_BUTTON, tableInsertColumnButtonSize, tableInsertColumnButtonSize, ClassName.CONTROLS_INSERT_BUTTON, Button("\n      background: ".concat(token('elevation.surface.overlay', 'white'), ";\n      box-shadow: ").concat(token('elevation.shadow.overlay', "0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A)), ";\n      color: ").concat(token('color.icon', N300), ";\n    ")), ClassName.CONTROLS_INSERT_LINE, ClassName.CONTROLS_INSERT_LINE);
+};
+
+var InsertButtonHover = function InsertButtonHover() {
+  return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  .", ":hover {\n    background: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), ClassName.CONTROLS_INSERT_BUTTON, token('color.background.brand.bold', B300), token('color.icon.inverse', 'white'));
+};
+
+export var insertColumnButtonWrapper = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", "\n"])), InsertButton(), InsertButtonHover(), InsertLine("\n    width: 2px;\n    left: 9px;\n  "));
+export var insertRowButtonWrapper = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", "\n"])), InsertButton(), InsertButtonHover(), InsertLine("\n    height: 2px;\n    top: -11px;\n    left: ".concat(tableInsertColumnButtonSize - 1, "px;\n  ")));
+export var columnControlsLineMarker = function columnControlsLineMarker(props) {
+  return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  .", ".", "\n    table\n    tr:first-of-type\n    td,\n  .", ".", "\n    table\n    tr:first-of-type\n    th {\n    position: relative;\n\n    &::before {\n      content: ' ';\n      ", ";\n      top: -", "px;\n      right: -", "px;\n    }\n  }\n"])), ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS, ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS, Marker(props), tableToolbarSize + lineMarkerOffsetFromColumnControls, lineMarkerSize / 2);
+};
+export var DeleteButton = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  .", ",\n    .", " {\n    height: ", "px;\n    width: ", "px;\n  }\n  .", " {\n    .", " {\n      ", "\n    }\n  }\n\n  .", ":hover {\n    background: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), ClassName.CONTROLS_DELETE_BUTTON_WRAP, ClassName.CONTROLS_DELETE_BUTTON, tableDeleteButtonSize, tableDeleteButtonSize, ClassName.CONTROLS_DELETE_BUTTON_WRAP, ClassName.CONTROLS_DELETE_BUTTON, Button("\n        background: ".concat(token('color.background.neutral', N20A), ";\n        color: ").concat(token('color.icon', N300), ";\n      ")), ClassName.CONTROLS_DELETE_BUTTON, token('color.background.danger.bold', R300), token('color.icon.inverse', 'white')); // TODO: https://product-fabric.atlassian.net/browse/DSP-4451
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
+export var OverflowShadow = function OverflowShadow(props) {
+  return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  .", ", .", " {\n    display: block;\n    height: calc(\n      100% - ", "px\n    );\n    position: absolute;\n    pointer-events: none;\n    top: ", "px;\n    z-index: ", ";\n    width: 8px;\n  }\n  .", " {\n    background: linear-gradient(to left, rgba(99, 114, 130, 0) 0, ", " 100%);\n    left: 0px;\n  }\n  .", "[data-number-column='true'] > :not(.", ").", " {\n    left: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n      to right,\n      rgba(99, 114, 130, 0) 0,\n      ", " 100%\n    );\n    left: calc(100% + 2px);\n  }\n  .", " {\n    .", ", .", " {\n      height: calc(100% - ", "px);\n      top: ", "px;\n    }\n    .", " {\n      border-left: 1px solid ", ";\n    }\n  }\n  .", ".", " {\n    .", ", .", " {\n      top: ", "px;\n    }\n  }\n"])), ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_LEFT_SHADOW, tableMarginTop + tableMarginBottom + tableToolbarSize - 2, tableMarginTop + tableToolbarSize - 1, akEditorShadowZIndex, ClassName.TABLE_LEFT_SHADOW, N40A, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY_SHADOW, ClassName.TABLE_LEFT_SHADOW, akEditorTableNumberColumnWidth - 1, ClassName.TABLE_RIGHT_SHADOW, N40A, ClassName.WITH_CONTROLS, ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_LEFT_SHADOW, tableMarginTop + tableMarginBottom - 2, tableMarginTop - 1, ClassName.TABLE_LEFT_SHADOW, tableBorderColor(props), ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_RIGHT_SHADOW, ClassName.TABLE_LEFT_SHADOW, tableControlsSpacing);
+};
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
+var columnHeaderButton = function columnHeaderButton(props, cssString) {
+  return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  background: ", ";\n  border: 1px solid ", ";\n  display: block;\n  box-sizing: border-box;\n  padding: 0;\n\n  :focus {\n    outline: none;\n  }\n\n  ", "\n"])), tableToolbarColor(props), tableBorderColor(props), cssString);
+};
+
+var columnHeaderButtonSelected = css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  color: ", ";\n  background-color: ", ";\n  border-color: ", ";\n  z-index: ", ";\n"])), token('color.text.inverse', N0), tableToolbarSelectedColor, tableBorderSelectedColor, columnControlsSelectedZIndex);
+export var columnControlsDecoration = function columnControlsDecoration(props) {
+  return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  .", " {\n    display: none;\n    cursor: pointer;\n    position: absolute;\n    width: calc(100% + ", "px);\n    left: -1px;\n    top: -", "px;\n    height: ", "px;\n\n    &::after {\n      content: ' ';\n\n      ", "\n    }\n  }\n\n  .", " .", " {\n    display: block;\n  }\n\n  table\n    tr:first-of-type\n    td.", ",\n    table\n    tr:first-of-type\n    th.", " {\n    &.", ",\n      &.", ",\n      &.", " {\n      .", "::after {\n        ", ";\n      }\n\n      &.", "\n        .", "::after {\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-bottom: none;\n        z-index: ", ";\n      }\n    }\n  }\n\n  .", "\n    table\n    tr:first-of-type\n    td.", ",\n    .", "\n    table\n    tr:first-of-type\n    th.", " {\n    .", "::after {\n      ", ";\n    }\n  }\n"])), ClassName.COLUMN_CONTROLS_DECORATIONS, tableCellBorderWidth * 2, columnControlsDecorationHeight + tableCellBorderWidth, columnControlsDecorationHeight, columnHeaderButton(props, "\n        border-right: ".concat(tableCellBorderWidth, "px solid ").concat(tableBorderColor(props), ";\n        border-bottom: none;\n        height: ").concat(tableToolbarSize, "px;\n        width: 100%;\n        position: absolute;\n        top: ").concat(columnControlsDecorationHeight - tableToolbarSize, "px;\n        left: 0px;\n        z-index: ").concat(columnControlsZIndex, ";\n      ")), ClassName.WITH_CONTROLS, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_COLUMN, ClassName.HOVERED_TABLE, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected, ClassName.HOVERED_CELL_IN_DANGER, ClassName.COLUMN_CONTROLS_DECORATIONS, tableToolbarDeleteColor, tableBorderDeleteColor, akEditorUnitZIndex * 100, ClassName.TABLE_SELECTED, ClassName.TABLE_CELL, ClassName.TABLE_SELECTED, ClassName.TABLE_HEADER_CELL, ClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected);
+};
+export var hoveredDeleteButton = css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  .", ".", " {\n    .", ",\n      .", ",\n      .", " {\n      border: 1px solid ", ";\n    }\n    .", "::after {\n      background: ", ";\n    }\n  }\n"])), ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.SELECTED_CELL, ClassName.COLUMN_SELECTED, ClassName.HOVERED_CELL, tableBorderDeleteColor, ClassName.SELECTED_CELL, tableCellDeleteColor);
+export var hoveredCell = css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  :not(.", ")\n    .", ":not(.", ") {\n    .", " {\n      position: relative;\n      border: 1px solid ", ";\n    }\n  }\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL, tableBorderSelectedColor);
+export var hoveredWarningCell = css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  :not(.", ")\n    .", ":not(.", ") {\n    td.", " {\n      background-color: ", " !important; // We need to override the background-color added to the cell\n      border: 1px solid ", ";\n    }\n  }\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL_WARNING, token('color.background.warning', Y50), token('color.border.warning', Y200));
+export var resizeHandle = css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n  .", " {\n    .", " {\n      background-color: transparent;\n      position: absolute;\n      width: ", "px;\n      height: 100%;\n      top: 0;\n      right: -", "px;\n      cursor: col-resize;\n      z-index: ", ";\n    }\n\n    td.", ", th.", " {\n      .", "::after {\n        content: ' ';\n        right: ", "px;\n        position: absolute;\n        width: ", "px;\n        height: calc(100% + 1px);\n        background-color: ", ";\n        z-index: ", ";\n        top: 0;\n      }\n    }\n\n    table\n      tr:first-of-type\n      th.", "\n      .", "::after,\n      table\n      tr:first-of-type\n      td.", "\n      .", "::after {\n      top: -", "px;\n      height: calc(100% + ", "px);\n    }\n  }\n"])), ClassName.TABLE_CONTAINER, ClassName.RESIZE_HANDLE_DECORATION, resizeHandlerAreaWidth, resizeHandlerAreaWidth / 2, resizeHandlerZIndex, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, resizeLineWidth, tableBorderSelectedColor, columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, tableToolbarSize + tableCellBorderWidth, tableToolbarSize + tableCellBorderWidth);

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

@@ -0,0 +1,71 @@
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { findTable, getSelectionRect } from '@atlaskit/editor-tables/utils';
+export function getSelectedTableInfo(selection) {
+  var map;
+  var totalRowCount = 0;
+  var totalColumnCount = 0;
+  var table = findTable(selection);
+
+  if (table) {
+    map = TableMap.get(table.node);
+    totalRowCount = map.height;
+    totalColumnCount = map.width;
+  }
+
+  return {
+    table: table,
+    map: map,
+    totalRowCount: totalRowCount,
+    totalColumnCount: totalColumnCount
+  };
+}
+export function getSelectedCellInfo(selection) {
+  var horizontalCells = 1;
+  var verticalCells = 1;
+  var totalCells = 1;
+
+  var _getSelectedTableInfo = getSelectedTableInfo(selection),
+      table = _getSelectedTableInfo.table,
+      map = _getSelectedTableInfo.map,
+      totalRowCount = _getSelectedTableInfo.totalRowCount,
+      totalColumnCount = _getSelectedTableInfo.totalColumnCount;
+
+  if (table && map) {
+    var rect = getSelectionRect(selection);
+
+    if (rect) {
+      totalCells = map.cellsInRect(rect).length;
+      horizontalCells = rect.right - rect.left;
+      verticalCells = rect.bottom - rect.top;
+    }
+  }
+
+  return {
+    totalRowCount: totalRowCount,
+    totalColumnCount: totalColumnCount,
+    horizontalCells: horizontalCells,
+    verticalCells: verticalCells,
+    totalCells: totalCells
+  };
+}
+export var withEditorAnalyticsAPI = function withEditorAnalyticsAPI(payload) {
+  return function (editorAnalyticsAPI) {
+    return function (command) {
+      return function (state, dispatch, view) {
+        return command(state, function (tr) {
+          var dynamicPayload = payload instanceof Function ? payload(state) : payload;
+
+          if (dynamicPayload) {
+            editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(dynamicPayload)(tr);
+          }
+
+          if (dispatch) {
+            dispatch(tr);
+          }
+
+          return true;
+        }, view);
+      };
+    };
+  };
+};

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

@@ -0,0 +1,84 @@
+import { NodeRange } from 'prosemirror-model';
+import { findWrapping } from 'prosemirror-transform';
+import { findTable } from '@atlaskit/editor-tables/utils';
+
+var bail = function bail() {
+  return {
+    tableIsCollapsible: false
+  };
+};
+/**
+ * Checks whether we can wrap the selected table into an expand via
+ * prosemirror-transform's `findWrapping` helper
+ */
+
+
+export var isTableCollapsible = function isTableCollapsible(tr) {
+  var selection = tr.selection;
+  var schema = tr.doc.type.schema;
+  var nodePos = findTable(selection);
+
+  if (!nodePos) {
+    return bail();
+  }
+
+  var expand = schema.nodes.expand;
+  var node = nodePos.node,
+      pos = nodePos.pos;
+  var $pos = tr.doc.resolve(pos);
+  var range = new NodeRange($pos, tr.doc.resolve(pos + node.nodeSize), $pos.depth);
+
+  if (!range) {
+    return bail();
+  }
+
+  var canWrap = findWrapping(range, expand);
+
+  if (canWrap === null) {
+    return bail();
+  }
+
+  return {
+    tableIsCollapsible: true,
+    range: range,
+
+    /**
+     * Do we ever want to deal with the result of `findWrapping`? Probably not,
+     * but we have it anyway.
+     */
+    findWrappingRes: canWrap
+  };
+};
+/**
+ * Collapses the selected table into an expand given a transaction via
+ * `Transform.wrap`.
+ *
+ * Will return undefined if it cannot determine the relevant table from a
+ * selection, or if the table itself isn't collapsible.
+ *
+ * @param tr
+ * @returns Transaction | undefined
+ */
+
+export var collapseSelectedTable = function collapseSelectedTable(tr) {
+  var canCollapse = isTableCollapsible(tr);
+  var expand = tr.doc.type.schema.nodes.expand;
+
+  if (!canCollapse.range || !canCollapse.tableIsCollapsible) {
+    return undefined;
+  }
+  /**
+   * TODO: add attrs: { __expanded: false } when
+   * - it is working with new collab (CEMS-1204)
+   * - synchrony is no longer used
+   *
+   *   (via confluence-frontend, "this feature" referencing allowInteractiveExpand)
+   *   `we can NEVER allow this feature to be enabled for the synchrony-powered editor
+   */
+
+
+  tr.wrap(canCollapse.range, [{
+    type: expand
+  }]).setMeta('scrollIntoView', true);
+  return tr;
+};

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

@@ -0,0 +1,202 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { findDomRefAtPos } from 'prosemirror-utils';
+import { findTable, getCellsInColumn, getSelectionRect, isColumnSelected, isTableSelected } from '@atlaskit/editor-tables/utils';
+// import { maphElem } from '@atlaskit/editor-core/src/utils/dom';
+import { maphElem } from '@atlaskit/editor-common/utils';
+import { TableCssClassName as ClassName } from '../types';
+import { tableDeleteButtonSize } from '../ui/consts';
+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
+
+    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();
+        widths[i] = (rect ? rect.width : cellRef.offsetWidth) + 1;
+        i += cell.node.attrs.colspan - 1;
+      }
+    }
+  }
+
+  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
+
+  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 - tableDeleteButtonSize / 2;
+  return {
+    left: left,
+    indexes: indexes
+  };
+};
+export 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 (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
+
+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);
+  });
+};
+
+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
+  // 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 = 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, _toConsumableArray(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(' ');
+};