@atlaskit/editor-plugin-table 0.0.10 → 0.1.1

package/dist/cjs/plugins/table/toolbar.js

@@ -9,6 +9,8 @@ exports.messages = exports.getToolbarMenuConfig = exports.getToolbarConfig = exp
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
+var _react = require("@emotion/react");
+
 var _reactIntlNext = require("react-intl-next");
 
 var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
@@ -25,11 +27,13 @@ var _tableResizing = require("./pm-plugins/table-resizing");
 
 var _types = require("./types");
 
+var _utils = require("./utils");
+
 var _referentiality = require("./utils/referentiality");
 
 var _analytics = require("@atlaskit/editor-common/analytics");
 
-var _utils = require("@atlaskit/editor-tables/utils");
+var _utils2 = require("@atlaskit/editor-tables/utils");
 
 var _transforms = require("./transforms");
 
@@ -39,8 +43,19 @@ var _ContextualMenu = require("./ui/FloatingContextualMenu/ContextualMenu");
 
 var _prosemirrorUtils = require("prosemirror-utils");
 
-var _utils2 = require("@atlaskit/editor-common/utils");
+var _utils3 = require("@atlaskit/editor-common/utils");
+
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+
+var _resizeState = require("./pm-plugins/table-resizing/utils/resize-state");
+
+var _steps = require("@atlaskit/adf-schema/steps");
 
+var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
+
+var _uiColor = require("@atlaskit/editor-common/ui-color");
+
+/** @jsx jsx */
 var messages = (0, _reactIntlNext.defineMessages)({
   tableOptions: {
     id: 'fabric.editor.tableOptions',
@@ -115,6 +130,8 @@ var getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _ref, ed
 exports.getToolbarMenuConfig = getToolbarMenuConfig;
 
 var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(editorState, initialSelectionRect, _ref2, getEditorContainerWidth, editorAnalyticsAPI) {
+  var _pluginState$pluginCo, _pluginState$pluginCo2;
+
   var formatMessage = _ref2.formatMessage;
   var top = initialSelectionRect.top,
       bottom = initialSelectionRect.bottom,
@@ -122,6 +139,7 @@ var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(editorSta
       left = initialSelectionRect.left;
   var numberOfColumns = right - left;
   var numberOfRows = bottom - top;
+  var pluginState = (0, _pluginFactory.getPluginState)(editorState);
   var options = [{
     id: 'editor.table.insertColumn',
     title: formatMessage(_messages2.default.insertColumn),
@@ -136,7 +154,10 @@ var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(editorSta
       return true;
     },
     selected: false,
-    disabled: false
+    disabled: false,
+    elemAfter: (0, _react.jsx)("div", {
+      css: _shortcut.shortcutStyle
+    }, (0, _keymaps.tooltip)(_keymaps.addColumnAfter))
   }, {
     id: 'editor.table.insertRow',
     title: formatMessage(_messages2.default.insertRow),
@@ -154,7 +175,10 @@ var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(editorSta
       return true;
     },
     selected: false,
-    disabled: false
+    disabled: false,
+    elemAfter: (0, _react.jsx)("div", {
+      css: _shortcut.shortcutStyle
+    }, (0, _keymaps.tooltip)(_keymaps.addRowAfter))
   }, {
     id: 'editor.table.removeColumns',
     title: formatMessage(_messages2.default.removeColumns, {
@@ -190,16 +214,63 @@ var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(editorSta
   }, {
     id: 'editor.table.mergeCells',
     title: formatMessage(_ContextualMenu.messages.mergeCells),
-    onClick: (0, _commandsWithAnalytics.mergeCellsWithAnalytics)(editorAnalyticsAPI),
+    onClick: (0, _commandsWithAnalytics.mergeCellsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB),
     selected: false,
     disabled: !(0, _transforms.canMergeCells)(editorState.tr)
   }, {
     id: 'editor.table.splitCell',
     title: formatMessage(_ContextualMenu.messages.splitCell),
-    onClick: (0, _commandsWithAnalytics.splitCellWithAnalytics)(editorAnalyticsAPI),
+    onClick: (0, _commandsWithAnalytics.splitCellWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB),
     selected: false,
-    disabled: !(0, _utils.splitCell)(editorState)
-  }, {
+    disabled: !(0, _utils2.splitCell)(editorState)
+  }];
+
+  if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo = pluginState.pluginConfig) !== null && _pluginState$pluginCo !== void 0 && _pluginState$pluginCo.allowDistributeColumns) {
+    var distributeColumnWidths = function distributeColumnWidths(state, dispatch, view) {
+      var newResizeStateWithAnalytics = view ? (0, _resizeState.getNewResizeStateFromSelectedColumns)(initialSelectionRect, editorState, view.domAtPos.bind(view), getEditorContainerWidth) : undefined;
+
+      if (newResizeStateWithAnalytics) {
+        (0, _commandsWithAnalytics.distributeColumnsWidthsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB, newResizeStateWithAnalytics)(state, dispatch);
+        return true;
+      }
+
+      return false;
+    };
+
+    options.push({
+      id: 'editor.table.distributeColumns',
+      title: formatMessage(_ContextualMenu.messages.distributeColumns),
+      onClick: distributeColumnWidths,
+      selected: false,
+      disabled: numberOfColumns <= 1
+    });
+  }
+
+  if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo2 = pluginState.pluginConfig) !== null && _pluginState$pluginCo2 !== void 0 && _pluginState$pluginCo2.allowColumnSorting) {
+    var hasMergedCellsInTable = (0, _utils.getMergedCellsPositions)(editorState.tr).length > 0;
+    options.push({
+      id: 'editor.table.sortColumnAsc',
+      title: formatMessage(_ContextualMenu.messages.sortColumnASC),
+      onClick: function onClick(state, dispatch) {
+        (0, _commandsWithAnalytics.sortColumnWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB, initialSelectionRect.left, _steps.TableSortOrder.ASC)(state, dispatch);
+        return true;
+      },
+      selected: false,
+      disabled: hasMergedCellsInTable
+    });
+    options.push({
+      id: 'editor.table.sortColumnDesc',
+      title: formatMessage(_ContextualMenu.messages.sortColumnDESC),
+      onClick: function onClick(state, dispatch) {
+        (0, _commandsWithAnalytics.sortColumnWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB, initialSelectionRect.left, _steps.TableSortOrder.DESC)(state, dispatch);
+        return true;
+      },
+      selected: false,
+      disabled: hasMergedCellsInTable
+    });
+  }
+
+  options.push({
     id: 'editor.table.clearCells',
     title: formatMessage(_ContextualMenu.messages.clearCells, {
       0: Math.max(numberOfColumns, numberOfRows)
@@ -212,14 +283,19 @@ var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(editorSta
       return true;
     },
     selected: false,
-    disabled: false
-  }];
+    disabled: false,
+    elemAfter: (0, _react.jsx)("div", {
+      css: _shortcut.shortcutStyle
+    }, (0, _keymaps.tooltip)(_keymaps.backspace))
+  });
   return {
     id: 'editor.table.cellOptions',
     type: 'dropdown',
     title: formatMessage(_messages2.default.cellOptions),
-    hidden: true,
-    options: options
+    options: options,
+    // Increased dropdown item width to prevent labels from being truncated
+    dropdownWidth: 230,
+    showSelected: false
   };
 };
 
@@ -227,13 +303,13 @@ exports.getToolbarCellOptionsConfig = getToolbarCellOptionsConfig;
 
 var getClosestSelectionRect = function getClosestSelectionRect(state) {
   var selection = state.selection;
-  return (0, _utils.isSelectionType)(selection, 'cell') ? (0, _utils.getSelectionRect)(selection) : (0, _utils.findCellRectClosestToPos)(selection.$from);
+  return (0, _utils2.isSelectionType)(selection, 'cell') ? (0, _utils2.getSelectionRect)(selection) : (0, _utils2.findCellRectClosestToPos)(selection.$from);
 };
 
-var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editorAnalyticsAPI) {
+var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags) {
   return function (config) {
     return function (state, intl) {
-      var tableObject = (0, _utils.findTable)(state.selection);
+      var tableObject = (0, _utils2.findTable)(state.selection);
       var pluginState = (0, _pluginFactory.getPluginState)(state);
 
       var resizeState = _tableResizing.pluginKey.getState(state);
@@ -241,7 +317,12 @@ var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editor
       if (tableObject && pluginState.editorHasFocus) {
         var nodeType = state.schema.nodes.table;
         var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
-        var cellItems = getCellItems(config, state, intl, getEditorContainerWidth, editorAnalyticsAPI); // Check if we need to show confirm dialog for delete button
+
+        var _ref3 = getEditorFeatureFlags() || {},
+            tableCellOptionsInFloatingToolbar = _ref3.tableCellOptionsInFloatingToolbar;
+
+        var cellItems = getCellItems(config, state, intl, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar);
+        var colorPicker = getColorPicker(state, menu, intl, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar); // Check if we need to show confirm dialog for delete button
 
         var confirmDialog;
         var localId = tableObject.node.attrs.localId;
@@ -262,7 +343,7 @@ var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editor
             var tableRef = parent.querySelector('table') || undefined;
 
             if (tableRef) {
-              element = (0, _utils2.closestElement)(tableRef, ".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER)) || undefined;
+              element = (0, _utils3.closestElement)(tableRef, ".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER)) || undefined;
             }
           }
 
@@ -274,9 +355,20 @@ var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editor
           getDomRef: getDomRef,
           nodeType: nodeType,
           offset: [0, 3],
-          items: [menu, separator(menu.hidden)].concat((0, _toConsumableArray2.default)(cellItems), [{
+          items: [menu, separator(menu.hidden)].concat((0, _toConsumableArray2.default)(cellItems), (0, _toConsumableArray2.default)(colorPicker), [{
             type: 'extensions-placeholder',
             separator: 'end'
+          }, {
+            type: 'copy-button',
+            items: [{
+              state: state,
+              formatMessage: intl.formatMessage,
+              nodeType: nodeType,
+              onMouseEnter: (0, _commands.hoverTable)(false, true),
+              onMouseLeave: (0, _commands.clearHoverSelection)()
+            }, {
+              type: 'separator'
+            }]
           }, {
             id: 'editor.table.delete',
             type: 'button',
@@ -288,7 +380,8 @@ var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editor
             onMouseLeave: (0, _commands.clearHoverSelection)(),
             title: intl.formatMessage(_messages.default.remove),
             confirmDialog: confirmDialog
-          }])
+          }]),
+          scrollable: true
         };
       }
 
@@ -306,10 +399,10 @@ var separator = function separator(hidden) {
   };
 };
 
-var getCellItems = function getCellItems(pluginConfig, state, _ref3, getEditorContainerWidth, editorAnalyticsAPI) {
-  var formatMessage = _ref3.formatMessage;
+var getCellItems = function getCellItems(pluginConfig, state, _ref4, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar) {
+  var formatMessage = _ref4.formatMessage;
 
-  if (pluginConfig.allowCellOptionsInFloatingToolbar) {
+  if (pluginConfig.allowCellOptionsInFloatingToolbar || tableCellOptionsInFloatingToolbar) {
     var initialSelectionRect = getClosestSelectionRect(state);
 
     if (initialSelectionRect) {
@@ -321,4 +414,39 @@ var getCellItems = function getCellItems(pluginConfig, state, _ref3, getEditorCo
   }
 
   return [];
+};
+
+var getColorPicker = function getColorPicker(state, menu, _ref5, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar) {
+  var _node$attrs;
+
+  var formatMessage = _ref5.formatMessage;
+
+  var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
+      targetCellPosition = _getPluginState2.targetCellPosition,
+      pluginConfig = _getPluginState2.pluginConfig;
+
+  if (!pluginConfig.allowBackgroundColor || !tableCellOptionsInFloatingToolbar) {
+    return [];
+  }
+
+  var node = targetCellPosition ? state.doc.nodeAt(targetCellPosition) : undefined;
+  var currentBackground = (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff';
+  var defaultPalette = _uiColor.cellBackgroundColorPalette.find(function (item) {
+    return item.value === currentBackground;
+  }) || {
+    label: 'Custom',
+    value: currentBackground,
+    border: _uiColor.DEFAULT_BORDER_COLOR
+  };
+  return [{
+    id: 'editor.panel.colorPicker',
+    title: formatMessage(_ContextualMenu.messages.cellBackground),
+    type: 'select',
+    selectType: 'color',
+    defaultValue: defaultPalette,
+    options: _uiColor.cellBackgroundColorPalette,
+    onChange: function onChange(option) {
+      return (0, _commandsWithAnalytics.setColorWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB, option.value, targetCellPosition);
+    }
+  }, separator(menu.hidden)];
 };

package/dist/cjs/plugins/table/transforms/fix-tables.js

@@ -13,9 +13,9 @@ var _styles = require("@atlaskit/editor-common/styles");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _todoStubs = require("../todo-stubs");
+var _utils = require("@atlaskit/editor-common/utils");
 
-var _utils = require("../pm-plugins/table-resizing/utils");
+var _utils2 = require("../pm-plugins/table-resizing/utils");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -23,7 +23,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var fireAnalytics = function fireAnalytics() {
   var properties = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _todoStubs.sendLogs)({
+  return (0, _utils.sendLogs)({
     events: [{
       name: 'atlaskit.fabric.editor.fixtable',
       product: 'atlaskit',
@@ -146,7 +146,7 @@ var fixAutoSizedTable = function fixAutoSizedTable(view, tableNode, tableRef, ta
     return acc + current;
   }, 0);
   var tableLayout = getLayoutBasedOnWidth(totalContentWidth);
-  var maxLayoutSize = (0, _utils.getLayoutSize)(tableLayout, opts.containerWidth, {}); // Content width will generally not meet the constraints of the layout
+  var maxLayoutSize = (0, _utils2.getLayoutSize)(tableLayout, opts.containerWidth, {}); // Content width will generally not meet the constraints of the layout
   // whether it be below or above, so we scale our columns widths
   // to meet these requirements
 
@@ -199,9 +199,9 @@ function parseDOMColumnWidths(domAtPos, tableNode, tableStart, tableRef) {
 
     for (var span = 0; span < colspan; span++) {
       var colIdx = col + span;
-      var cells = (0, _utils.getCellsRefsInColumn)(colIdx, tableNode, tableStart, domAtPos);
-      var colWidth = (0, _utils.calculateColumnWidth)(cells, function (_, col) {
-        return (0, _utils.contentWidth)(col, tableRef).width;
+      var cells = (0, _utils2.getCellsRefsInColumn)(colIdx, tableNode, tableStart, domAtPos);
+      var colWidth = (0, _utils2.calculateColumnWidth)(cells, function (_, col) {
+        return (0, _utils2.contentWidth)(col, tableRef).width;
       });
       cols[colIdx] = Math.max(colWidth, _styles.tableCellMinWidth);
     }

package/dist/cjs/plugins/table/ui/FloatingContextualButton/index.js

@@ -175,8 +175,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/function (_React$Component) {
     key: "shouldComponentUpdate",
     value: function shouldComponentUpdate(nextProps) {
       return this.props.tableNode !== nextProps.tableNode || this.props.targetCellPosition !== nextProps.targetCellPosition || this.props.layout !== nextProps.layout || this.props.isContextualMenuOpen !== nextProps.isContextualMenuOpen || this.props.isNumberColumnEnabled !== nextProps.isNumberColumnEnabled || this.props.stickyHeader !== nextProps.stickyHeader;
-    } // TODO: restore
-
+    }
   }]);
   return FloatingContextualButtonInner;
 }(_react.default.Component);

package/dist/cjs/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js

@@ -326,14 +326,14 @@ var ContextualMenu = /*#__PURE__*/function (_Component) {
           break;
 
         case 'merge':
-          (0, _commandsWithAnalytics.mergeCellsWithAnalytics)(editorAnalyticsAPI)(state, dispatch);
+          (0, _commandsWithAnalytics.mergeCellsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU)(state, dispatch);
 
           _this.toggleOpen();
 
           break;
 
         case 'split':
-          (0, _commandsWithAnalytics.splitCellWithAnalytics)(editorAnalyticsAPI)(state, dispatch);
+          (0, _commandsWithAnalytics.splitCellWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU)(state, dispatch);
 
           _this.toggleOpen();
 
@@ -474,10 +474,8 @@ var ContextualMenu = /*#__PURE__*/function (_Component) {
           targetCellPosition = _getPluginState4.targetCellPosition;
 
       var state = editorView.state,
-          dispatch = editorView.dispatch; // setColorWithAnalytics(color, targetCellPosition)(state, dispatch);
-      // TODO: restore
-
-      (0, _commandsWithAnalytics.setColorWithAnalytics)(editorAnalyticsAPI)(color, targetCellPosition)(state, dispatch);
+          dispatch = editorView.dispatch;
+      (0, _commandsWithAnalytics.setColorWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, color, targetCellPosition)(state, dispatch);
 
       _this.toggleOpen();
     });

package/dist/cjs/plugins/table/ui/FloatingDeleteButton/index.js

@@ -154,7 +154,8 @@ var FloatingDeleteButton = /*#__PURE__*/function (_Component) {
           dispatch = _this$props$editorVie2.dispatch;
       return (0, _commands.clearHoverSelection)()(state, dispatch);
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClick", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClick", function (event) {
+      event.preventDefault();
       var editorAnalyticsAPI = _this.props.editorAnalyticsAPI;
       var _this$props$editorVie3 = _this.props.editorView,
           state = _this$props$editorVie3.state,

package/dist/cjs/plugins/table/ui/LayoutButton/index.js

@@ -154,8 +154,7 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderSticky",
     value: function renderSticky(button, targetRef, tableRef) {
-      // const title = this.getTitle();
-      var title = 'TODO MISSING TITLE';
+      var title = this.getTitle();
 
       if (!(targetRef instanceof HTMLElement) || !(tableRef instanceof HTMLElement)) {
         return null;
@@ -184,10 +183,9 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
 
       if (!targetRef) {
         return null;
-      } // const title = this.getTitle();
-
+      }
 
-      var title = 'TODO MISSING TITLE';
+      var title = this.getTitle();
       return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
         ariaLabel: title,
         target: targetRef,

package/dist/cjs/plugins/table/ui/TableFloatingControls/CornerControls/index.js

@@ -125,7 +125,8 @@ var CornerControlComponent = /*#__PURE__*/function (_Component) {
         }),
         style: {
           top: this.props.stickyTop !== undefined ? "".concat(this.props.stickyTop, "px") : undefined
-        }
+        },
+        contentEditable: false
       }, /*#__PURE__*/_react.default.createElement("button", {
         "aria-label": formatMessage(messages.cornerControl),
         type: "button",

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

@@ -23,7 +23,6 @@ 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 = [];

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

@@ -1,10 +1,14 @@
 "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");
@@ -15,7 +19,6 @@ 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;
@@ -46,8 +49,54 @@ var createCellHoverDecoration = function createCellHoverDecoration(cells, type)
 
 exports.createCellHoverDecoration = createCellHoverDecoration;
 
-var createControlsHoverDecoration = function createControlsHoverDecoration(cells, type, danger, selected) {
-  return cells.map(function (cell) {
+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),
+        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 || max === null) {
+    return [];
+  }
+
+  var updatedCells = cells.map(function (x) {
+    return x.pos;
+  }); // 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
+
+  if (danger) {
+    var rect = map.rectBetween(min - table.start, max - table.start);
+    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) {
@@ -75,7 +124,7 @@ var createControlsHoverDecoration = function createControlsHoverDecoration(cells
         break;
     }
 
-    return _prosemirrorView.Decoration.node(cell.pos, cell.pos + cell.node.nodeSize, {
+    return _prosemirrorView.Decoration.node(pos, pos + cell.nodeSize, {
       class: classes.join(' ')
     }, {
       key: key

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

@@ -11,8 +11,6 @@ var _types = require("../types");
 
 var _consts = require("../ui/consts");
 
-// import { containsClassName } from '@atlaskit/editor-core/src/utils';
-// import { closestElement } from '@atlaskit/editor-core/src/utils/dom';
 var SELECTOR_TABLE_LEAFS = ".".concat(_types.TableCssClassName.TABLE_CELL, ", .").concat(_types.TableCssClassName.TABLE_HEADER_CELL);
 
 var isCell = function isCell(node) {

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

@@ -18,7 +18,6 @@ var _utils = require("@atlaskit/editor-common/utils");
 
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 
-// import { flatmap, mapSlice } from '@atlaskit/editor-core/src/utils/slice';
 // lifts up the content of each cell, returning an array of nodes
 var unwrapContentFromTable = function unwrapContentFromTable(maybeTable) {
   var schema = maybeTable.type.schema;

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "0.0.10"
+	"version": "0.1.1"
 }

package/dist/es2019/plugins/table/commands/hover.js

@@ -37,13 +37,13 @@ export const hoverMergedCells = () => createCommand(state => {
   };
 }, tr => tr.setMeta('addToHistory', false));
 export const hoverColumns = (hoveredColumns, isInDanger) => createCommand(state => {
-  const cells = getCellsInColumn(hoveredColumns)(state.selection);
+  const cells = getCellsInColumn(hoveredColumns)(state.tr.selection);
 
   if (!cells) {
     return false;
   }
 
-  const decorations = createControlsHoverDecoration(cells, 'column', isInDanger);
+  const decorations = createControlsHoverDecoration(cells, 'column', state.tr, isInDanger);
   return {
     type: 'HOVER_COLUMNS',
     data: {
@@ -60,7 +60,7 @@ export const hoverRows = (hoveredRows, isInDanger) => createCommand(state => {
     return false;
   }
 
-  const decorations = createControlsHoverDecoration(cells, 'row', isInDanger);
+  const decorations = createControlsHoverDecoration(cells, 'row', state.tr, isInDanger);
   return {
     type: 'HOVER_ROWS',
     data: {
@@ -86,7 +86,7 @@ export const hoverTable = (isInDanger, isSelected) => createCommand(state => {
     return false;
   }
 
-  const decorations = createControlsHoverDecoration(cells, 'table', isInDanger, isSelected);
+  const decorations = createControlsHoverDecoration(cells, 'table', state.tr, isInDanger, isSelected);
   return {
     type: 'HOVER_TABLE',
     data: {

package/dist/es2019/plugins/table/commands-with-analytics.js

@@ -44,7 +44,7 @@ export const emptyMultipleCellsWithAnalytics = editorAnalyticsAPI => (inputMetho
     eventType: EVENT_TYPE.TRACK
   };
 })(editorAnalyticsAPI)(clearMultipleCells(targetCellPosition));
-export const mergeCellsWithAnalytics = editorAnalyticsAPI => withEditorAnalyticsAPI(({
+export const mergeCellsWithAnalytics = editorAnalyticsAPI => inputMethod => withEditorAnalyticsAPI(({
   selection
 }) => {
   const {
@@ -59,8 +59,7 @@ export const mergeCellsWithAnalytics = editorAnalyticsAPI => withEditorAnalytics
     actionSubject: ACTION_SUBJECT.TABLE,
     actionSubjectId: null,
     attributes: {
-      inputMethod: INPUT_METHOD.CONTEXT_MENU,
-      // TODO: merge with floating toolbar once command is updated
+      inputMethod,
       horizontalCells,
       verticalCells,
       totalCells,
@@ -76,7 +75,7 @@ export const mergeCellsWithAnalytics = editorAnalyticsAPI => withEditorAnalytics
 
   return true;
 });
-export const splitCellWithAnalytics = editorAnalyticsAPI => withEditorAnalyticsAPI(({
+export const splitCellWithAnalytics = editorAnalyticsAPI => inputMethod => withEditorAnalyticsAPI(({
   selection
 }) => {
   const {
@@ -95,8 +94,7 @@ export const splitCellWithAnalytics = editorAnalyticsAPI => withEditorAnalyticsA
       actionSubject: ACTION_SUBJECT.TABLE,
       actionSubjectId: null,
       attributes: {
-        inputMethod: INPUT_METHOD.CONTEXT_MENU,
-        // TODO: merge with floating toolbar once command is updated
+        inputMethod,
         horizontalCells,
         verticalCells,
         totalCells: horizontalCells * verticalCells,
@@ -109,7 +107,7 @@ export const splitCellWithAnalytics = editorAnalyticsAPI => withEditorAnalyticsA
 
   return;
 })(editorAnalyticsAPI)(splitCell);
-export const setColorWithAnalytics = editorAnalyticsAPI => (cellColor, targetCellPosition) => withEditorAnalyticsAPI(({
+export const setColorWithAnalytics = editorAnalyticsAPI => (inputMethod, cellColor, targetCellPosition) => withEditorAnalyticsAPI(({
   selection
 }) => {
   const {
@@ -124,8 +122,7 @@ export const setColorWithAnalytics = editorAnalyticsAPI => (cellColor, targetCel
     actionSubject: ACTION_SUBJECT.TABLE,
     actionSubjectId: null,
     attributes: {
-      inputMethod: INPUT_METHOD.CONTEXT_MENU,
-      // TODO: merge with floating toolbar once command is updated
+      inputMethod,
       cellColor: (tableBackgroundColorPalette.get(cellColor.toLowerCase()) || cellColor).toLowerCase(),
       horizontalCells,
       verticalCells,

package/dist/es2019/plugins/table/event-handlers.js

@@ -3,8 +3,7 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { cellAround, findCellRectClosestToPos, findTable, getSelectionRect, removeTable } from '@atlaskit/editor-tables/utils';
 import { browser } from '@atlaskit/editor-common/utils';
-import { isElementInTableCell, isLastItemMediaGroup, setNodeSelection } from '@atlaskit/editor-common/utils'; // import { closestElement } from '@atlaskit/editor-core/src/utils/dom';
-
+import { isElementInTableCell, isLastItemMediaGroup, setNodeSelection } from '@atlaskit/editor-common/utils';
 import { closestElement } from '@atlaskit/editor-common/utils';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { addResizeHandleDecorations, clearHoverSelection, hideInsertColumnOrRowButton, hideResizeHandleLine, hoverColumns, selectColumn, setEditorFocus, showInsertColumnButton, showInsertRowButton, showResizeHandleLine } from './commands';