@atlaskit/editor-plugin-table 5.4.11 → 5.4.13

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-table
 
+## 5.4.13
+
+### Patch Changes
+
+- [#58379](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58379) [`985c068738e8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/985c068738e8) - [ux] Add a util to convert cell index into actula colIndex to fix column drag handle position.
+- Updated dependencies
+
+## 5.4.12
+
+### Patch Changes
+
+- [#58717](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58717) [`d65ee171dc89`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d65ee171dc89) - Return focus to editor when a mouse up event on drag handle is called - this allows copying of table selection to still work
+- [#58763](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58763) [`0fdbd64522bf`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0fdbd64522bf) - update ADF schema
+- Updated dependencies
+
 ## 5.4.11
 
 ### Patch Changes

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

@@ -348,13 +348,19 @@ var trackCellLocation = function trackCellLocation(view, mouseEvent) {
   if (!maybeTableCell || !tableRef) {
     return;
   }
-  var colIndex = maybeTableCell.cellIndex;
+  var htmlColIndex = maybeTableCell.cellIndex;
   var rowElement = (0, _utils.closestElement)(target, 'tr');
-  var rowIndex = rowElement && rowElement.rowIndex;
+  var htmlRowIndex = rowElement && rowElement.rowIndex;
   var colHeight = tableRef.offsetHeight;
   var colWidth = maybeTableCell.offsetWidth;
-  if (hoveredCell.colIndex !== colIndex || hoveredCell.rowIndex !== rowIndex || hoveredCell.colWidth !== colWidth || hoveredCell.colHeight !== colHeight) {
-    (0, _commands.hoverCell)(rowIndex, colIndex, colWidth, colHeight)(view.state, view.dispatch);
+  var tableMap = tableNode && _tableMap.TableMap.get(tableNode);
+  var colIndex = htmlColIndex;
+  if (tableMap) {
+    var convertedColIndex = (0, _utils3.convertHTMLCellIndexToColumnIndex)(htmlColIndex, htmlRowIndex, tableMap);
+    colIndex = (0, _utils3.getColumnIndexMappedToColumnIndexInFirstRow)(convertedColIndex, htmlRowIndex, tableMap);
+  }
+  if (hoveredCell.colIndex !== colIndex || hoveredCell.rowIndex !== htmlRowIndex || hoveredCell.colWidth !== colWidth || hoveredCell.colHeight !== colHeight) {
+    (0, _commands.hoverCell)(htmlRowIndex, colIndex, colWidth, colHeight)(view.state, view.dispatch);
   }
 };
 var withCellTracking = exports.withCellTracking = function withCellTracking(eventHandler, elementContentRects) {

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getToolbarMenuConfig = exports.getToolbarConfig = exports.getToolbarCellOptionsConfig = exports.getClosestSelectionRect = void 0;
-var _react = require("@emotion/react");
 var _customSteps = require("@atlaskit/custom-steps");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
@@ -30,8 +29,6 @@ var _types = require("./types");
 var _utils4 = require("./utils");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-/** @jsx jsx */
-
 var getToolbarMenuConfig = exports.getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _ref, editorAnalyticsAPI) {
   var formatMessage = _ref.formatMessage;
   var options = [{
@@ -98,7 +95,7 @@ var getToolbarCellOptionsConfig = exports.getToolbarCellOptionsConfig = function
     },
     selected: false,
     disabled: false,
-    elemAfter: (0, _react.jsx)("div", {
+    elemAfter: /*#__PURE__*/React.createElement("div", {
       css: _shortcut.shortcutStyle
     }, (0, _keymaps.tooltip)(_keymaps.addColumnAfter))
   }, {
@@ -117,7 +114,7 @@ var getToolbarCellOptionsConfig = exports.getToolbarCellOptionsConfig = function
     },
     selected: false,
     disabled: false,
-    elemAfter: (0, _react.jsx)("div", {
+    elemAfter: /*#__PURE__*/React.createElement("div", {
       css: _shortcut.shortcutStyle
     }, (0, _keymaps.tooltip)(_keymaps.addRowAfter))
   }, {
@@ -249,7 +246,7 @@ var getToolbarCellOptionsConfig = exports.getToolbarCellOptionsConfig = function
     },
     selected: false,
     disabled: false,
-    elemAfter: (0, _react.jsx)("div", {
+    elemAfter: /*#__PURE__*/React.createElement("div", {
       css: _shortcut.shortcutStyle
     }, (0, _keymaps.tooltip)(_keymaps.backspace))
   });

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

@@ -7,13 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.ColumnResizeWidget = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _types = require("../../types");
-/** @jsx jsx */
-
 var ColumnResizeWidget = exports.ColumnResizeWidget = function ColumnResizeWidget(_ref) {
   var startIndex = _ref.startIndex,
     endIndex = _ref.endIndex,
@@ -21,20 +18,20 @@ var ColumnResizeWidget = exports.ColumnResizeWidget = function ColumnResizeWidge
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   if (!includeTooltip) {
-    return (0, _react2.jsx)("div", {
+    return /*#__PURE__*/_react.default.createElement("div", {
       className: _types.TableCssClassName.RESIZE_HANDLE_DECORATION,
       "data-start-index": startIndex,
       "data-end-index": endIndex
     });
   }
-  return (0, _react2.jsx)(_tooltip.default, {
+  return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     content: formatMessage(_messages.tableMessages.adjustColumns),
     hideTooltipOnClick: true,
     hideTooltipOnMouseDown: true,
     position: "mouse",
     mousePosition: "auto-start"
   }, function (tooltipProps) {
-    return (0, _react2.jsx)("div", (0, _extends2.default)({
+    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
       className: _types.TableCssClassName.RESIZE_HANDLE_DECORATION,
       "data-start-index": startIndex,
       "data-end-index": endIndex

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

@@ -6,9 +6,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DragHandle = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
+var _classnames2 = _interopRequireDefault(require("classnames"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
 var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview");
@@ -31,7 +32,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     previewHeight = _ref.previewHeight,
     onMouseOver = _ref.onMouseOver,
     onMouseOut = _ref.onMouseOut,
-    onMouseUp = _ref.onMouseUp,
+    _onMouseUp = _ref.onMouseUp,
     onClick = _ref.onClick,
     editorView = _ref.editorView;
   var dragHandleDivRef = (0, _react.useRef)(null);
@@ -112,8 +113,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       });
     }
   }, [tableLocalId, direction, indexes, editorView.state.selection, hasMergedCells]);
-  return /*#__PURE__*/_react.default.createElement("button", {
-    className: (0, _classnames.default)(_types.TableCssClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance, isDragAndDropEnabled && hasMergedCells && _types.TableCssClassName.DRAG_HANDLE_DISABLED),
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+    className: (0, _classnames2.default)(_types.TableCssClassName.DRAG_HANDLE_BUTTON_CONTAINER, _types.TableCssClassName.CONTROLS_BUTTON, appearance, (0, _defineProperty2.default)({}, _types.TableCssClassName.DRAG_HANDLE_DISABLED, isDragAndDropEnabled && hasMergedCells)),
     ref: dragHandleDivRef,
     style: {
       transform: direction === 'column' ? 'none' : 'rotate(90deg)',
@@ -122,9 +123,14 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     "data-testid": "table-floating-column-controls-drag-handle",
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
-    onMouseUp: onMouseUp,
+    onMouseUp: function onMouseUp(e) {
+      // return focus to editor so copying table selections whilst still works, i cannot call e.preventDefault in a mousemove event as this stops dragstart events from firing
+      // -> this is bad for a11y but is the current standard new copy/paste keyboard shortcuts should be introduced instead
+      editorView.focus();
+      _onMouseUp && _onMouseUp(e);
+    },
     onClick: onClick
-  }, /*#__PURE__*/_react.default.createElement(_HandleIconComponent.HandleIconComponent, handleIconProps), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_DragPreview.DragPreview, {
+  }, /*#__PURE__*/_react.default.createElement(_HandleIconComponent.HandleIconComponent, handleIconProps)), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_DragPreview.DragPreview, {
     direction: direction,
     width: previewWidth,
     height: previewHeight

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

@@ -1,3 +1,4 @@
+/* index.tsx generated by @compiled/babel-plugin v0.26.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DragPreview = void 0;
+var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _primitives = require("@atlaskit/primitives");
 var _DragInMotionIcon = require("../icons/DragInMotionIcon");

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = _default;
 var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
@@ -20,8 +19,6 @@ var _commands = require("../../commands");
 var _types = require("../../types");
 var _FixedButton = _interopRequireDefault(require("./FixedButton"));
 var _styles = require("./styles");
-/** @jsx jsx */
-
 var BUTTON_OFFSET = 3;
 var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (props) {
   var editorView = props.editorView,
@@ -52,7 +49,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
     return null;
   }
   var labelCellOptions = formatMessage(_messages.tableMessages.cellOptions);
-  var button = (0, _react2.jsx)("div", {
+  var button = /*#__PURE__*/_react.default.createElement("div", {
     css: function css(theme) {
       return [(0, _styles.tableFloatingCellButtonStyles)({
         theme: theme
@@ -60,19 +57,19 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
         theme: theme
       })];
     }
-  }, (0, _react2.jsx)(_uiMenu.ToolbarButton, {
+  }, /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarButton, {
     className: _types.TableCssClassName.CONTEXTUAL_MENU_BUTTON,
     selected: isContextualMenuOpen,
     title: labelCellOptions,
     onClick: handleClick,
-    iconBefore: (0, _react2.jsx)(_chevronDown.default, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
       label: ""
     }),
     "aria-label": labelCellOptions
   }));
   var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
   if (stickyHeader && parentSticky && tableWrapper) {
-    return (0, _react2.jsx)(_FixedButton.default, {
+    return /*#__PURE__*/_react.default.createElement(_FixedButton.default, {
       offset: BUTTON_OFFSET,
       stickyHeader: stickyHeader,
       tableWrapper: tableWrapper,
@@ -82,7 +79,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
       isContextualMenuOpen: isContextualMenuOpen
     }, button);
   }
-  return (0, _react2.jsx)(_ui.Popup, {
+  return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
     alignX: "right",
     alignY: "start",
     target: targetCellRef,
@@ -97,9 +94,9 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
 });
 var FloatingContextualButton = (0, _reactIntlNext.injectIntl)(FloatingContextualButtonInner);
 function _default(props) {
-  return (0, _react2.jsx)(_errorBoundary.ErrorBoundary, {
+  return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
     component: _analytics.ACTION_SUBJECT.FLOATING_CONTEXTUAL_BUTTON,
     dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
     fallbackComponent: null
-  }, (0, _react2.jsx)(FloatingContextualButton, props));
+  }, /*#__PURE__*/_react.default.createElement(FloatingContextualButton, props));
 }

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

@@ -13,7 +13,6 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
-var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _customSteps = require("@atlaskit/custom-steps");
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -38,7 +37,7 @@ var _styles2 = require("./styles");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ContextualMenu, _Component);
   var _super = _createSuper(ContextualMenu);
@@ -88,15 +87,15 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
           value: {
             name: 'background'
           },
-          elemAfter: (0, _react2.jsx)("div", {
+          elemAfter: /*#__PURE__*/React.createElement("div", {
             className: _styles.DropdownMenuSharedCssClassName.SUBMENU
-          }, (0, _react2.jsx)("div", {
+          }, /*#__PURE__*/React.createElement("div", {
             css: (0, _styles2.cellColourPreviewStyles)(background),
             className: _types.TableCssClassName.CONTEXTUAL_MENU_ICON
-          }), isSubmenuOpen && (0, _react2.jsx)("div", {
+          }), isSubmenuOpen && /*#__PURE__*/React.createElement("div", {
             className: _types.TableCssClassName.CONTEXTUAL_SUBMENU,
             ref: _this.handleSubMenuRef
-          }, (0, _react2.jsx)(_uiColor.ColorPalette, {
+          }, /*#__PURE__*/React.createElement(_uiColor.ColorPalette, {
             cols: 7,
             onClick: _this.setColor,
             selectedColor: background,
@@ -113,7 +112,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         value: {
           name: 'insert_column'
         },
-        elemAfter: (0, _react2.jsx)("div", {
+        elemAfter: /*#__PURE__*/React.createElement("div", {
           css: _shortcut.shortcutStyle
         }, (0, _keymaps.tooltip)(_keymaps.addColumnAfter))
       });
@@ -122,7 +121,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         value: {
           name: 'insert_row'
         },
-        elemAfter: (0, _react2.jsx)("div", {
+        elemAfter: /*#__PURE__*/React.createElement("div", {
           css: _shortcut.shortcutStyle
         }, (0, _keymaps.tooltip)(_keymaps.addRowAfter))
       });
@@ -202,7 +201,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         value: {
           name: 'clear'
         },
-        elemAfter: (0, _react2.jsx)("div", {
+        elemAfter: /*#__PURE__*/React.createElement("div", {
           css: _shortcut.shortcutStyle
         }, (0, _keymaps.tooltip)(_keymaps.backspace))
       });
@@ -364,10 +363,10 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       if (!items) {
         return null;
       }
-      return (0, _react2.jsx)("div", {
+      return /*#__PURE__*/React.createElement("div", {
         "data-testid": "table-cell-contextual-menu",
         onMouseLeave: this.closeSubmenu
-      }, (0, _react2.jsx)(_uiMenu.DropdownMenu, {
+      }, /*#__PURE__*/React.createElement(_uiMenu.DropdownMenu, {
         mountTo: mountPoint
         //This needs be removed when the a11y is completely handled
         //Disabling key navigation now as it works only partially

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("@emotion/react");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -14,8 +13,6 @@ var _pluginFactory = require("../../pm-plugins/plugin-factory");
 var _consts = require("../consts");
 var _ContextualMenu = _interopRequireDefault(require("./ContextualMenu"));
 var _styles = require("./styles");
-/** @jsx jsx */
-
 var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
   var mountPoint = _ref.mountPoint,
     boundariesElement = _ref.boundariesElement,
@@ -42,7 +39,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     return null;
   }
   var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
-  return (0, _react.jsx)(_ui.Popup, {
+  return /*#__PURE__*/React.createElement(_ui.Popup, {
     alignX: "right",
     alignY: "top",
     target: targetCellRef,
@@ -58,9 +55,9 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     forcePlacement: true,
     offset: [-7, 0],
     stick: true
-  }, (0, _react.jsx)("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     css: _styles.tablePopupStyles
-  }, (0, _react.jsx)(_ContextualMenu.default, {
+  }, /*#__PURE__*/React.createElement(_ContextualMenu.default, {
     editorView: editorView,
     offset: [_consts.contextualMenuTriggerSize / 2, -_consts.contextualMenuTriggerSize],
     isOpen: isOpen,

package/dist/cjs/plugins/table/ui/FloatingDragMenu/DragMenu.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DragMenu = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _react = require("@emotion/react");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
@@ -17,8 +16,6 @@ var _pluginFactory = require("../../pm-plugins/drag-and-drop/plugin-factory");
 var _utils2 = require("../../utils");
 var _dragMenu = require("../../utils/drag-menu");
 var _consts = require("../consts");
-/** @jsx jsx */
-
 var groupedDragMenuConfig = [['add_row_above', 'add_row_below', 'add_column_left', 'add_column_right', 'distribute_columns', 'clear_cells', 'delete_row', 'delete_column'], ['move_column_left', 'move_column_right', 'move_row_up', 'move_row_down'], ['sort_column_asc', 'sort_column_desc']];
 var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig) {
   var menuItemsArr = (0, _toConsumableArray2.default)(Array(groupedDragMenuConfig.length)).map(function () {
@@ -39,15 +36,15 @@ var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig) {
         name: item.id
       },
       isDisabled: item.disabled,
-      elemBefore: item.icon ? (0, _react.jsx)("div", {
+      elemBefore: item.icon ? /*#__PURE__*/React.createElement("div", {
         style: {
           marginRight: "var(--ds-space-negative-075, -6px)",
           display: 'flex'
         }
-      }, (0, _react.jsx)(item.icon, {
+      }, /*#__PURE__*/React.createElement(item.icon, {
         label: item.title
       })) : undefined,
-      elemAfter: item.keymap ? (0, _react.jsx)("div", {
+      elemAfter: item.keymap ? /*#__PURE__*/React.createElement("div", {
         css: _shortcut.shortcutStyle
       }, item.keymap) : undefined
     });
@@ -139,7 +136,7 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
   if (!menuItems) {
     return null;
   }
-  return (0, _react.jsx)(_uiMenu.DropdownMenu, {
+  return /*#__PURE__*/React.createElement(_uiMenu.DropdownMenu, {
     mountTo: mountPoint
     //This needs be removed when the a11y is completely handled
     //Disabling key navigation now as it works only partially

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

@@ -99,14 +99,11 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
     }
     return [0];
   }, [tableRef, tableRect.height]);
-  if (!tableRef) {
+  if (!tableRef || !tableActive) {
     return null;
   }
   var colWidths = (0, _utils.getColumnsWidths)(editorView);
   var stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
-  if (!tableActive) {
-    return null;
-  }
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER,
     "data-testid": "table-floating-column-controls-wrapper"

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isColumnDeleteButtonVisible = exports.getColumnsWidths = exports.getColumnDeleteButtonParams = exports.getColumnClassNames = exports.colWidthsForRow = void 0;
+exports.isColumnDeleteButtonVisible = exports.getColumnsWidths = exports.getColumnIndexMappedToColumnIndexInFirstRow = exports.getColumnDeleteButtonParams = exports.getColumnClassNames = exports.convertHTMLCellIndexToColumnIndex = exports.colWidthsForRow = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _utils = require("@atlaskit/editor-common/utils");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
@@ -189,4 +189,66 @@ var colWidthsForRow = exports.colWidthsForRow = function colWidthsForRow(tr) {
   return pctWidths.map(function (pct) {
     return "".concat(pct, "%");
   }).join(' ');
+};
+var convertHTMLCellIndexToColumnIndex = exports.convertHTMLCellIndexToColumnIndex = function convertHTMLCellIndexToColumnIndex(htmlColIndex, htmlRowIndex, tableMap) {
+  // Same numbers (positions) in tableMap.map array mean that there are merged cells.
+  // Cells can be merged across columns. So we need to check if the cell on the left and current cell have the same value.
+  // Cells can be merged acroll rows. So we need to check if the cell above has the same value as current cell.
+  // When cell has the same value as the cell above it or the cell to the left of it, html cellIndex won't count it a separete column.
+  var width = tableMap.width;
+  var map = tableMap.map;
+  var htmlColCount = 0;
+  if (htmlRowIndex === 0) {
+    for (var colIndex = 0; colIndex < width; colIndex++) {
+      if (colIndex === 0 || map[colIndex] !== map[colIndex - 1]) {
+        htmlColCount++;
+      }
+      if (htmlColCount - 1 === htmlColIndex) {
+        return colIndex;
+      }
+    }
+  } else {
+    for (var _colIndex = 0; _colIndex < width; _colIndex++) {
+      var currentCellMapIndex = htmlRowIndex * width + _colIndex;
+      var cellAboveMapIndex = (htmlRowIndex - 1) * width + _colIndex;
+      if (_colIndex > 0) {
+        if (map[currentCellMapIndex] !== map[currentCellMapIndex - 1] && map[currentCellMapIndex] !== map[cellAboveMapIndex]) {
+          htmlColCount++;
+        }
+      } else {
+        if (map[currentCellMapIndex] !== map[cellAboveMapIndex]) {
+          htmlColCount++;
+        }
+      }
+      if (htmlColCount - 1 === htmlColIndex) {
+        return _colIndex;
+      }
+    }
+  }
+  return 0;
+};
+
+// When first row has merged cells, our converted column index needs to be mapped.
+var getColumnIndexMappedToColumnIndexInFirstRow = exports.getColumnIndexMappedToColumnIndexInFirstRow = function getColumnIndexMappedToColumnIndexInFirstRow(convertedColIndex, htmlRowIndex, tableMap) {
+  var width = tableMap.width;
+  var map = tableMap.map;
+  var mapColIndexToFistRowColIndex = [];
+  var htmlColCounFirstRow = 0;
+  var colSpan = 0;
+  if (htmlRowIndex === 0) {
+    return convertedColIndex;
+  }
+  for (var colIndex = 0; colIndex < width; colIndex++) {
+    if (colIndex === 0 || map[colIndex] !== map[colIndex - 1]) {
+      if (colSpan > 0) {
+        htmlColCounFirstRow += colSpan;
+        colSpan = 0;
+      }
+      htmlColCounFirstRow++;
+    } else if (map[colIndex] === map[colIndex - 1]) {
+      colSpan++;
+    }
+    mapColIndexToFistRowColIndex[colIndex] = htmlColCounFirstRow - 1;
+  }
+  return mapColIndexToFistRowColIndex[convertedColIndex];
 };

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

@@ -39,6 +39,12 @@ Object.defineProperty(exports, "containsHeaderRow", {
     return _nodes.containsHeaderRow;
   }
 });
+Object.defineProperty(exports, "convertHTMLCellIndexToColumnIndex", {
+  enumerable: true,
+  get: function get() {
+    return _columnControls.convertHTMLCellIndexToColumnIndex;
+  }
+});
 Object.defineProperty(exports, "copyPreviousRow", {
   enumerable: true,
   get: function get() {
@@ -111,6 +117,12 @@ Object.defineProperty(exports, "getColumnDeleteButtonParams", {
     return _columnControls.getColumnDeleteButtonParams;
   }
 });
+Object.defineProperty(exports, "getColumnIndexMappedToColumnIndexInFirstRow", {
+  enumerable: true,
+  get: function get() {
+    return _columnControls.getColumnIndexMappedToColumnIndexInFirstRow;
+  }
+});
 Object.defineProperty(exports, "getColumnOrRowIndex", {
   enumerable: true,
   get: function get() {

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

@@ -10,7 +10,7 @@ import { getPluginState } from './pm-plugins/plugin-factory';
 import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
 import { deleteColumns, deleteRows } from './transforms';
 import { RESIZE_HANDLE_AREA_DECORATION_GAP } from './types';
-import { getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, getSelectedCellInfo, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isDragColumnFloatingInsertDot, isDragCornerButton, isDragRowFloatingInsertDot, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableContainerOrWrapper, isTableControlsButton } from './utils';
+import { convertHTMLCellIndexToColumnIndex, getColumnIndexMappedToColumnIndexInFirstRow, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, getSelectedCellInfo, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isDragColumnFloatingInsertDot, isDragCornerButton, isDragRowFloatingInsertDot, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableContainerOrWrapper, isTableControlsButton } from './utils';
 import { getAllowAddColumnCustomStep } from './utils/get-allow-add-column-custom-step';
 const isFocusingCalendar = event => event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.getAttribute('aria-label') === 'calendar';
 const isFocusingModal = event => event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('[role="dialog"]');
@@ -356,13 +356,19 @@ const trackCellLocation = (view, mouseEvent) => {
   if (!maybeTableCell || !tableRef) {
     return;
   }
-  const colIndex = maybeTableCell.cellIndex;
+  const htmlColIndex = maybeTableCell.cellIndex;
   const rowElement = closestElement(target, 'tr');
-  const rowIndex = rowElement && rowElement.rowIndex;
+  const htmlRowIndex = rowElement && rowElement.rowIndex;
   const colHeight = tableRef.offsetHeight;
   const colWidth = maybeTableCell.offsetWidth;
-  if (hoveredCell.colIndex !== colIndex || hoveredCell.rowIndex !== rowIndex || hoveredCell.colWidth !== colWidth || hoveredCell.colHeight !== colHeight) {
-    hoverCell(rowIndex, colIndex, colWidth, colHeight)(view.state, view.dispatch);
+  const tableMap = tableNode && TableMap.get(tableNode);
+  let colIndex = htmlColIndex;
+  if (tableMap) {
+    const convertedColIndex = convertHTMLCellIndexToColumnIndex(htmlColIndex, htmlRowIndex, tableMap);
+    colIndex = getColumnIndexMappedToColumnIndexInFirstRow(convertedColIndex, htmlRowIndex, tableMap);
+  }
+  if (hoveredCell.colIndex !== colIndex || hoveredCell.rowIndex !== htmlRowIndex || hoveredCell.colWidth !== colWidth || hoveredCell.colHeight !== colHeight) {
+    hoverCell(htmlRowIndex, colIndex, colWidth, colHeight)(view.state, view.dispatch);
   }
 };
 export const withCellTracking = (eventHandler, elementContentRects) => (view, mouseEvent) => {

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

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
 import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
@@ -89,7 +87,7 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
     },
     selected: false,
     disabled: false,
-    elemAfter: jsx("div", {
+    elemAfter: /*#__PURE__*/React.createElement("div", {
       css: shortcutStyle
     }, tooltip(addColumnAfter))
   }, {
@@ -108,7 +106,7 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
     },
     selected: false,
     disabled: false,
-    elemAfter: jsx("div", {
+    elemAfter: /*#__PURE__*/React.createElement("div", {
       css: shortcutStyle
     }, tooltip(addRowAfter))
   }, {
@@ -241,7 +239,7 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
     },
     selected: false,
     disabled: false,
-    elemAfter: jsx("div", {
+    elemAfter: /*#__PURE__*/React.createElement("div", {
       css: shortcutStyle
     }, tooltip(backspace))
   });

package/dist/es2019/plugins/table/ui/ColumnResizeWidget/index.js

@@ -1,7 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-/** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import Tooltip from '@atlaskit/tooltip';
@@ -15,19 +13,19 @@ export const ColumnResizeWidget = ({
     formatMessage
   } = useIntl();
   if (!includeTooltip) {
-    return jsx("div", {
+    return /*#__PURE__*/React.createElement("div", {
       className: TableCssClassName.RESIZE_HANDLE_DECORATION,
       "data-start-index": startIndex,
       "data-end-index": endIndex
     });
   }
-  return jsx(Tooltip, {
+  return /*#__PURE__*/React.createElement(Tooltip, {
     content: formatMessage(messages.adjustColumns),
     hideTooltipOnClick: true,
     hideTooltipOnMouseDown: true,
     position: "mouse",
     mousePosition: "auto-start"
-  }, tooltipProps => jsx("div", _extends({
+  }, tooltipProps => /*#__PURE__*/React.createElement("div", _extends({
     className: TableCssClassName.RESIZE_HANDLE_DECORATION,
     "data-start-index": startIndex,
     "data-end-index": endIndex