@atlaskit/editor-plugin-table 0.0.0 → 0.0.1

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

@@ -0,0 +1,529 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = exports.default = exports.ContextualMenu = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+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 _utils = require("@atlaskit/editor-tables/utils");
+
+var _reactIntlNext = require("react-intl-next");
+
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+
+var _uiColor = require("@atlaskit/editor-common/ui-color");
+
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+
+var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
+
+var _styles = require("./styles");
+
+var _utils2 = require("@atlaskit/editor-common/utils");
+
+var _analytics = require("@atlaskit/editor-common/analytics");
+
+var _commands = require("../../commands");
+
+var _commandsWithAnalytics = require("../../commands-with-analytics");
+
+var _pluginFactory = require("../../pm-plugins/plugin-factory");
+
+var _transforms = require("../../transforms");
+
+var _types = require("../../types");
+
+var _steps = require("@atlaskit/adf-schema/steps");
+
+var _utils3 = require("../../utils");
+
+var _messages = _interopRequireDefault(require("../messages"));
+
+var _consts = require("../consts");
+
+var _resizeState = require("../../pm-plugins/table-resizing/utils/resize-state");
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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; } }
+
+var messages = (0, _reactIntlNext.defineMessages)({
+  cellBackground: {
+    id: 'fabric.editor.cellBackground',
+    defaultMessage: 'Cell background',
+    description: 'Change the background color of a table cell.'
+  },
+  mergeCells: {
+    id: 'fabric.editor.mergeCells',
+    defaultMessage: 'Merge cells',
+    description: 'Merge tables cells together.'
+  },
+  splitCell: {
+    id: 'fabric.editor.splitCell',
+    defaultMessage: 'Split cell',
+    description: 'Split a merged table cell.'
+  },
+  clearCells: {
+    id: 'fabric.editor.clearCells',
+    defaultMessage: 'Clear {0, plural, one {cell} other {cells}}',
+    description: 'Clears the contents of the selected cells (this does not delete the cells themselves).'
+  },
+  sortColumnASC: {
+    id: 'fabric.editor.sortColumnASC',
+    defaultMessage: 'Sort column A → Z',
+    description: 'Sort column in ascending order'
+  },
+  sortColumnDESC: {
+    id: 'fabric.editor.sortColumnDESC',
+    defaultMessage: 'Sort column Z → A',
+    description: 'Sort column in descending order'
+  },
+  canNotSortTable: {
+    id: 'fabric.editor.canNotSortTable',
+    defaultMessage: "\u26A0\uFE0F You can't sort a table with merged cells",
+    description: "Split your cells to enable this feature"
+  },
+  distributeColumns: {
+    id: 'fabric.editor.distributeColumns',
+    defaultMessage: "Distribute columns",
+    description: "Distribute widths between selected columns"
+  }
+});
+exports.messages = messages;
+
+var ContextualMenu = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(ContextualMenu, _Component);
+
+  var _super = _createSuper(ContextualMenu);
+
+  function ContextualMenu() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, ContextualMenu);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      isSubmenuOpen: false
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSubMenuRef", function (ref) {
+      var parent = (0, _utils2.closestElement)(_this.props.editorView.dom, '.fabric-editor-popup-scroll-parent');
+
+      if (!(parent && ref)) {
+        return;
+      }
+
+      var boundariesRect = parent.getBoundingClientRect();
+      var rect = ref.getBoundingClientRect();
+
+      if (rect.left + rect.width > boundariesRect.width) {
+        ref.style.left = "-".concat(rect.width, "px");
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createItems", function () {
+      var _this$props = _this.props,
+          allowMergeCells = _this$props.allowMergeCells,
+          allowColumnSorting = _this$props.allowColumnSorting,
+          allowBackgroundColor = _this$props.allowBackgroundColor,
+          state = _this$props.editorView.state,
+          isOpen = _this$props.isOpen,
+          selectionRect = _this$props.selectionRect,
+          formatMessage = _this$props.intl.formatMessage,
+          editorView = _this$props.editorView;
+      var items = [];
+      var isSubmenuOpen = _this.state.isSubmenuOpen; // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
+
+      var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
+          targetCellPosition = _getPluginState.targetCellPosition,
+          allowDistributeColumns = _getPluginState.pluginConfig.allowDistributeColumns;
+
+      if (allowBackgroundColor) {
+        var _node$attrs;
+
+        var node = isOpen && targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
+        var background = (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff';
+        items.push({
+          content: formatMessage(messages.cellBackground),
+          value: {
+            name: 'background'
+          },
+          elemAfter: (0, _react2.jsx)("div", null, (0, _react2.jsx)("div", {
+            css: (0, _styles.cellColourPreviewStyles)(background),
+            className: _types.TableCssClassName.CONTEXTUAL_MENU_ICON
+          }), isSubmenuOpen && (0, _react2.jsx)("div", {
+            className: _types.TableCssClassName.CONTEXTUAL_SUBMENU,
+            ref: _this.handleSubMenuRef
+          }, (0, _react2.jsx)(_uiColor.ColorPalette, {
+            cols: 7,
+            palette: _uiColor.cellBackgroundColorPalette,
+            onClick: _this.setColor,
+            selectedColor: background
+          })))
+        });
+      }
+
+      items.push({
+        content: formatMessage(_messages.default.insertColumn),
+        value: {
+          name: 'insert_column'
+        },
+        elemAfter: (0, _react2.jsx)("div", {
+          css: _shortcut.shortcutStyle
+        }, (0, _keymaps.tooltip)(_keymaps.addColumnAfter))
+      });
+      items.push({
+        content: formatMessage(_messages.default.insertRow),
+        value: {
+          name: 'insert_row'
+        },
+        elemAfter: (0, _react2.jsx)("div", {
+          css: _shortcut.shortcutStyle
+        }, (0, _keymaps.tooltip)(_keymaps.addRowAfter))
+      });
+      var top = selectionRect.top,
+          bottom = selectionRect.bottom,
+          right = selectionRect.right,
+          left = selectionRect.left;
+      var noOfColumns = right - left;
+      var noOfRows = bottom - top;
+      items.push({
+        content: formatMessage(_messages.default.removeColumns, {
+          0: noOfColumns
+        }),
+        value: {
+          name: 'delete_column'
+        }
+      });
+      items.push({
+        content: formatMessage(_messages.default.removeRows, {
+          0: noOfRows
+        }),
+        value: {
+          name: 'delete_row'
+        }
+      });
+
+      if (allowMergeCells) {
+        items.push({
+          content: formatMessage(messages.mergeCells),
+          value: {
+            name: 'merge'
+          },
+          isDisabled: !(0, _transforms.canMergeCells)(state.tr)
+        });
+        items.push({
+          content: formatMessage(messages.splitCell),
+          value: {
+            name: 'split'
+          },
+          isDisabled: !(0, _utils.splitCell)(state)
+        });
+      }
+
+      if (allowDistributeColumns) {
+        var _newResizeState$chang;
+
+        var newResizeState = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionRect, state, editorView.domAtPos.bind(editorView), _this.props.getEditorContainerWidth);
+        var wouldChange = (_newResizeState$chang = newResizeState === null || newResizeState === void 0 ? void 0 : newResizeState.changed) !== null && _newResizeState$chang !== void 0 ? _newResizeState$chang : false;
+        items.push({
+          content: formatMessage(messages.distributeColumns),
+          value: {
+            name: 'distribute_columns'
+          },
+          isDisabled: !wouldChange
+        });
+      }
+
+      if (allowColumnSorting) {
+        var hasMergedCellsInTable = (0, _utils3.getMergedCellsPositions)(state.tr).length > 0;
+        var warning = hasMergedCellsInTable ? {
+          tooltipDescription: formatMessage(messages.canNotSortTable),
+          isDisabled: true
+        } : {};
+        items.push(_objectSpread({
+          content: formatMessage(messages.sortColumnASC),
+          value: {
+            name: 'sort_column_asc'
+          }
+        }, warning));
+        items.push(_objectSpread({
+          content: formatMessage(messages.sortColumnDESC),
+          value: {
+            name: 'sort_column_desc'
+          }
+        }, warning));
+      }
+
+      items.push({
+        content: formatMessage(messages.clearCells, {
+          0: Math.max(noOfColumns, noOfRows)
+        }),
+        value: {
+          name: 'clear'
+        },
+        elemAfter: (0, _react2.jsx)("div", {
+          css: _shortcut.shortcutStyle
+        }, (0, _keymaps.tooltip)(_keymaps.backspace))
+      });
+      return items.length ? [{
+        items: items
+      }] : null;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMenuItemActivated", function (_ref) {
+      var item = _ref.item;
+      var _this$props2 = _this.props,
+          editorView = _this$props2.editorView,
+          selectionRect = _this$props2.selectionRect,
+          editorAnalyticsAPI = _this$props2.editorAnalyticsAPI,
+          getEditorContainerWidth = _this$props2.getEditorContainerWidth; // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
+
+      var state = editorView.state,
+          dispatch = editorView.dispatch;
+
+      var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
+          targetCellPosition = _getPluginState2.targetCellPosition;
+
+      switch (item.value.name) {
+        case 'sort_column_desc':
+          (0, _commandsWithAnalytics.sortColumnWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, selectionRect.left, _steps.TableSortOrder.DESC)(state, dispatch);
+
+          _this.toggleOpen();
+
+          break;
+
+        case 'sort_column_asc':
+          (0, _commandsWithAnalytics.sortColumnWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, selectionRect.left, _steps.TableSortOrder.ASC)(state, dispatch);
+
+          _this.toggleOpen();
+
+          break;
+
+        case 'merge':
+          (0, _commandsWithAnalytics.mergeCellsWithAnalytics)(editorAnalyticsAPI)(state, dispatch);
+
+          _this.toggleOpen();
+
+          break;
+
+        case 'split':
+          (0, _commandsWithAnalytics.splitCellWithAnalytics)(editorAnalyticsAPI)(state, dispatch);
+
+          _this.toggleOpen();
+
+          break;
+
+        case 'distribute_columns':
+          var newResizeStateWithAnalytics = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
+
+          if (newResizeStateWithAnalytics) {
+            (0, _commandsWithAnalytics.distributeColumnsWidthsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, newResizeStateWithAnalytics)(state, dispatch);
+
+            _this.toggleOpen();
+          }
+
+          break;
+
+        case 'clear':
+          (0, _commandsWithAnalytics.emptyMultipleCellsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, targetCellPosition)(state, dispatch);
+
+          _this.toggleOpen();
+
+          break;
+
+        case 'insert_column':
+          (0, _commandsWithAnalytics.insertColumnWithAnalytics)(getEditorContainerWidth, editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
+
+          _this.toggleOpen();
+
+          break;
+
+        case 'insert_row':
+          (0, _commandsWithAnalytics.insertRowWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, {
+            index: selectionRect.bottom,
+            moveCursorToInsertedRow: true
+          })(state, dispatch);
+
+          _this.toggleOpen();
+
+          break;
+
+        case 'delete_column':
+          (0, _commandsWithAnalytics.deleteColumnsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, selectionRect)(state, dispatch);
+
+          _this.toggleOpen();
+
+          break;
+
+        case 'delete_row':
+          var _getPluginState3 = (0, _pluginFactory.getPluginState)(state),
+              isHeaderRowRequired = _getPluginState3.pluginConfig.isHeaderRowRequired;
+
+          (0, _commandsWithAnalytics.deleteRowsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, selectionRect, !!isHeaderRowRequired)(state, dispatch);
+
+          _this.toggleOpen();
+
+          break;
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleOpen", function () {
+      var _this$props3 = _this.props,
+          isOpen = _this$props3.isOpen,
+          _this$props3$editorVi = _this$props3.editorView,
+          state = _this$props3$editorVi.state,
+          dispatch = _this$props3$editorVi.dispatch;
+      (0, _commands.toggleContextualMenu)()(state, dispatch);
+
+      if (!isOpen) {
+        _this.setState({
+          isSubmenuOpen: false
+        });
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOpenChange", function () {
+      var _this$props$editorVie = _this.props.editorView,
+          state = _this$props$editorVie.state,
+          dispatch = _this$props$editorVie.dispatch;
+      (0, _commands.toggleContextualMenu)()(state, dispatch);
+
+      _this.setState({
+        isSubmenuOpen: false
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleItemMouseEnter", function (_ref2) {
+      var item = _ref2.item;
+      var _this$props4 = _this.props,
+          _this$props4$editorVi = _this$props4.editorView,
+          state = _this$props4$editorVi.state,
+          dispatch = _this$props4$editorVi.dispatch,
+          selectionRect = _this$props4.selectionRect;
+
+      if (item.value.name === 'background') {
+        if (!_this.state.isSubmenuOpen) {
+          _this.setState({
+            isSubmenuOpen: true
+          });
+        }
+      }
+
+      if (item.value.name === 'delete_column') {
+        (0, _commands.hoverColumns)((0, _utils3.getSelectedColumnIndexes)(selectionRect), true)(state, dispatch);
+      }
+
+      if (item.value.name === 'delete_row') {
+        (0, _commands.hoverRows)((0, _utils3.getSelectedRowIndexes)(selectionRect), true)(state, dispatch);
+      }
+
+      if (['sort_column_asc', 'sort_column_desc'].indexOf(item.value.name) > -1 && (0, _utils3.getMergedCellsPositions)(state.tr).length !== 0) {
+        (0, _commands.hoverMergedCells)()(state, dispatch);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleItemMouseLeave", function (_ref3) {
+      var item = _ref3.item;
+      var _this$props$editorVie2 = _this.props.editorView,
+          state = _this$props$editorVie2.state,
+          dispatch = _this$props$editorVie2.dispatch;
+
+      if (item.value.name === 'background') {
+        _this.closeSubmenu();
+      }
+
+      if (['sort_column_asc', 'sort_column_desc', 'delete_column', 'delete_row'].indexOf(item.value.name) > -1) {
+        (0, _commands.clearHoverSelection)()(state, dispatch);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "closeSubmenu", function () {
+      if (_this.state.isSubmenuOpen) {
+        _this.setState({
+          isSubmenuOpen: false
+        });
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setColor", function (color) {
+      var _this$props5 = _this.props,
+          editorView = _this$props5.editorView,
+          editorAnalyticsAPI = _this$props5.editorAnalyticsAPI; // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
+
+      var _getPluginState4 = (0, _pluginFactory.getPluginState)(editorView.state),
+          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);
+
+      _this.toggleOpen();
+    });
+    return _this;
+  }
+
+  (0, _createClass2.default)(ContextualMenu, [{
+    key: "render",
+    value: function render() {
+      var _this$props6 = this.props,
+          isOpen = _this$props6.isOpen,
+          mountPoint = _this$props6.mountPoint,
+          offset = _this$props6.offset,
+          boundariesElement = _this$props6.boundariesElement;
+      var items = this.createItems();
+
+      if (!items) {
+        return null;
+      }
+
+      return (0, _react2.jsx)("div", {
+        "data-testid": "table-cell-contextual-menu",
+        onMouseLeave: this.closeSubmenu
+      }, (0, _react2.jsx)(_uiMenu.DropdownMenu, {
+        mountTo: mountPoint,
+        items: items,
+        isOpen: isOpen,
+        onOpenChange: this.handleOpenChange,
+        onItemActivated: this.onMenuItemActivated,
+        onMouseEnter: this.handleItemMouseEnter,
+        onMouseLeave: this.handleItemMouseLeave,
+        fitHeight: 188,
+        fitWidth: _consts.contextualMenuDropdownWidth,
+        boundariesElement: boundariesElement,
+        offset: offset
+      }));
+    }
+  }]);
+  return ContextualMenu;
+}(_react.Component);
+
+exports.ContextualMenu = ContextualMenu;
+(0, _defineProperty2.default)(ContextualMenu, "defaultProps", {
+  boundariesElement: document.body
+});
+
+var _default = (0, _reactIntlNext.injectIntl)(ContextualMenu);
+
+exports.default = _default;

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

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("@emotion/react");
+
+var _prosemirrorUtils = require("prosemirror-utils");
+
+var _utils = require("@atlaskit/editor-tables/utils");
+
+var _ui = require("@atlaskit/editor-common/ui");
+
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+
+var _pluginFactory = require("../../pm-plugins/plugin-factory");
+
+var _pluginKey = require("../../pm-plugins/plugin-key");
+
+var _consts = require("../consts");
+
+var _styles = require("./styles");
+
+var _ContextualMenu = _interopRequireDefault(require("./ContextualMenu"));
+
+/** @jsx jsx */
+// offset of the contextual menu dropdown
+var calculateOffset = function calculateOffset(targetCellRef, state) {
+  var _pluginKey$getState = _pluginKey.pluginKey.getState(state),
+      tableRef = _pluginKey$getState.tableRef;
+
+  var top = -_consts.contextualMenuTriggerSize;
+
+  if (tableRef && targetCellRef) {
+    var targetOffset = targetCellRef.getBoundingClientRect();
+    var tableOffset = tableRef.getBoundingClientRect();
+    var topDiff = targetOffset.top - tableOffset.top;
+
+    if (topDiff < 200) {
+      top -= topDiff + 2;
+    }
+  }
+
+  return [_consts.contextualMenuTriggerSize / 2, top];
+};
+
+var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
+  var mountPoint = _ref.mountPoint,
+      boundariesElement = _ref.boundariesElement,
+      scrollableElement = _ref.scrollableElement,
+      editorView = _ref.editorView,
+      isOpen = _ref.isOpen,
+      pluginConfig = _ref.pluginConfig,
+      editorAnalyticsAPI = _ref.editorAnalyticsAPI,
+      getEditorContainerWidth = _ref.getEditorContainerWidth;
+
+  // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
+  var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
+      targetCellPosition = _getPluginState.targetCellPosition;
+
+  if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
+    return null;
+  }
+
+  var selection = editorView.state.selection;
+  var selectionRect = (0, _utils.isSelectionType)(selection, 'cell') ? (0, _utils.getSelectionRect)(selection) : (0, _utils.findCellRectClosestToPos)(selection.$from);
+
+  if (!selectionRect) {
+    return null;
+  }
+
+  var domAtPos = editorView.domAtPos.bind(editorView);
+  var targetCellRef = (0, _prosemirrorUtils.findDomRefAtPos)(targetCellPosition, domAtPos);
+
+  if (!targetCellRef) {
+    return null;
+  }
+
+  return (0, _react.jsx)(_ui.Popup, {
+    alignX: "right",
+    alignY: "top",
+    target: targetCellRef,
+    mountTo: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    fitHeight: 188,
+    fitWidth: _consts.contextualMenuDropdownWidth // z-index value below is to ensure that this menu is above other floating menu
+    // in table, but below floating dialogs like typeaheads, pickers, etc.
+    ,
+    zIndex: _editorSharedStyles.akEditorFloatingOverlapPanelZIndex,
+    forcePlacement: true,
+    offset: [-7, 0]
+  }, (0, _react.jsx)("div", {
+    css: _styles.tablePopupStyles
+  }, (0, _react.jsx)(_ContextualMenu.default, {
+    editorView: editorView,
+    offset: calculateOffset(targetCellRef, editorView.state),
+    isOpen: isOpen,
+    targetCellPosition: targetCellPosition,
+    allowColumnSorting: pluginConfig && pluginConfig.allowColumnSorting,
+    allowMergeCells: pluginConfig.allowMergeCells,
+    allowBackgroundColor: pluginConfig.allowBackgroundColor,
+    selectionRect: selectionRect,
+    boundariesElement: boundariesElement,
+    editorAnalyticsAPI: editorAnalyticsAPI,
+    getEditorContainerWidth: getEditorContainerWidth
+  })));
+};
+
+FloatingContextualMenu.displayName = 'FloatingContextualMenu';
+var _default = FloatingContextualMenu;
+exports.default = _default;

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

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tablePopupStyles = exports.cellColourPreviewStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _adfSchema = require("@atlaskit/adf-schema");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _consts = require("../consts");
+
+var _types = require("../../types");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _tokens = require("@atlaskit/tokens");
+
+var _templateObject, _templateObject2;
+
+var cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &::before {\n    background: ", ";\n  }\n"])), selectedColor);
+};
+
+exports.cellColourPreviewStyles = cellColourPreviewStyles;
+var tablePopupStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    border-radius: ", "px;\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: 8px;\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", "px;\n      width: 20px;\n      height: 20px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: 4px;\n      line-height: 20px;\n      color: ", ";\n    }\n  }\n"])), _types.TableCssClassName.CONTEXTUAL_SUBMENU, (0, _constants.borderRadius)(), (0, _tokens.token)('elevation.surface.overlay', 'white'), (0, _tokens.token)('elevation.shadow.overlay', "0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A)), _consts.contextualMenuDropdownWidth, _types.TableCssClassName.CONTEXTUAL_MENU_ICON, _adfSchema.tableBackgroundBorderColor, (0, _constants.borderRadius)(), (0, _tokens.token)('color.icon', _colors.N90));
+exports.tablePopupStyles = tablePopupStyles;