@atlaskit/editor-plugin-table 0.0.0 → 0.0.2

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

@@ -0,0 +1,167 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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 */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import { findDomRefAtPos } from 'prosemirror-utils';
+import { injectIntl } from 'react-intl-next';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { akEditorFloatingOverlapPanelZIndex, akEditorSmallZIndex } from '@atlaskit/editor-shared-styles';
+import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import { closestElement } from '@atlaskit/editor-common/utils';
+import { toggleContextualMenu } from '../../commands';
+import { TableCssClassName as ClassName } from '../../types';
+import messages from '../../ui/messages';
+import { CONTENT_COMPONENT } from '@atlaskit/editor-common/analytics';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { tableFloatingCellButtonStyles } from './styles';
+import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
+export var FloatingContextualButtonInner = /*#__PURE__*/function (_React$Component) {
+  _inherits(FloatingContextualButtonInner, _React$Component);
+
+  var _super = _createSuper(FloatingContextualButtonInner);
+
+  function FloatingContextualButtonInner() {
+    var _this;
+
+    _classCallCheck(this, FloatingContextualButtonInner);
+
+    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));
+
+    _defineProperty(_assertThisInitialized(_this), "handleClick", function () {
+      var _this$props$editorVie = _this.props.editorView,
+          state = _this$props$editorVie.state,
+          dispatch = _this$props$editorVie.dispatch; // Clicking outside the dropdown handles toggling the menu closed
+      // (otherwise these two toggles combat each other).
+      // In the event a user clicks the chevron button again
+      // That will count as clicking outside the dropdown and
+      // will be toggled appropriately
+
+      if (!_this.props.isContextualMenuOpen) {
+        toggleContextualMenu()(state, dispatch);
+      }
+    });
+
+    return _this;
+  }
+
+  _createClass(FloatingContextualButtonInner, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          mountPoint = _this$props.mountPoint,
+          scrollableElement = _this$props.scrollableElement,
+          editorView = _this$props.editorView,
+          targetCellPosition = _this$props.targetCellPosition,
+          isContextualMenuOpen = _this$props.isContextualMenuOpen,
+          formatMessage = _this$props.intl.formatMessage,
+          dispatchAnalyticsEvent = _this$props.dispatchAnalyticsEvent; //  : Props & WrappedComponentProps
+
+      var domAtPos = editorView.domAtPos.bind(editorView);
+      var targetCellRef;
+
+      try {
+        targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.warn(error);
+
+        if (dispatchAnalyticsEvent) {
+          var payload = {
+            action: ACTION.ERRORED,
+            actionSubject: ACTION_SUBJECT.CONTENT_COMPONENT,
+            eventType: EVENT_TYPE.OPERATIONAL,
+            attributes: {
+              component: CONTENT_COMPONENT.FLOATING_CONTEXTUAL_BUTTON,
+              selection: editorView.state.selection.toJSON(),
+              position: targetCellPosition,
+              docSize: editorView.state.doc.nodeSize,
+              error: error.toString(),
+              errorStack: error.stack || undefined
+            }
+          };
+          dispatchAnalyticsEvent(payload);
+        }
+      }
+
+      if (!targetCellRef || !(targetCellRef instanceof HTMLElement)) {
+        return null;
+      }
+
+      var tableWrapper = closestElement(targetCellRef, ".".concat(ClassName.TABLE_NODE_WRAPPER));
+      var labelCellOptions = formatMessage(messages.cellOptions);
+      var button = jsx("div", {
+        css: tableFloatingCellButtonStyles
+      }, jsx(ToolbarButton, {
+        className: ClassName.CONTEXTUAL_MENU_BUTTON,
+        selected: isContextualMenuOpen,
+        title: labelCellOptions,
+        onClick: this.handleClick,
+        iconBefore: jsx(ExpandIcon, {
+          label: ""
+        }),
+        "aria-label": labelCellOptions
+      }));
+      var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
+
+      if (this.props.stickyHeader && parentSticky) {
+        var pos = targetCellRef.getBoundingClientRect();
+        return jsx("div", {
+          style: {
+            position: 'fixed',
+            top: this.props.stickyHeader.top + this.props.stickyHeader.padding + 3 + 3,
+            zIndex: akEditorFloatingOverlapPanelZIndex,
+            left: pos.left + targetCellRef.clientWidth - 20 - 3
+          }
+        }, button);
+      }
+
+      return jsx(Popup, {
+        alignX: "right",
+        alignY: "start",
+        target: targetCellRef,
+        mountTo: tableWrapper || mountPoint,
+        boundariesElement: targetCellRef,
+        scrollableElement: scrollableElement,
+        offset: [3, -3],
+        forcePlacement: true,
+        allowOutOfBounds: true,
+        zIndex: akEditorSmallZIndex
+      }, button);
+    }
+  }, {
+    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.Component);
+
+_defineProperty(FloatingContextualButtonInner, "displayName", 'FloatingContextualButton');
+
+var FloatingContextualButton = injectIntl(FloatingContextualButtonInner);
+export default function (props) {
+  return jsx(ErrorBoundary, {
+    component: ACTION_SUBJECT.FLOATING_CONTEXTUAL_BUTTON,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+    fallbackComponent: null
+  }, jsx(FloatingContextualButton, props));
+}

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

@@ -0,0 +1,11 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import { css } from '@emotion/react';
+import { N0, N20 } from '@atlaskit/theme/colors';
+import { borderRadius } from '@atlaskit/theme/constants';
+import { contextualMenuTriggerSize } from '../consts';
+import { token } from '@atlaskit/tokens'; // TODO: https://product-fabric.atlassian.net/browse/DSP-4462
+
+export var tableFloatingCellButtonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  > div {\n    background: ", ";\n    border-radius: ", "px;\n    border: 2px solid ", ";\n    display: flex;\n    height: ", "px;\n    flex-direction: column;\n  }\n  && button {\n    flex-direction: column;\n    padding: 0;\n    height: 100%;\n    display: flex;\n  }\n  && button > span {\n    margin: 0px -4px;\n  }\n  && span {\n    pointer-events: none;\n  }\n"])), token('color.background.neutral', N20), borderRadius(), token('color.border.inverse', N0), contextualMenuTriggerSize - 2);

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

@@ -0,0 +1,501 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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) { _defineProperty(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 = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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 */
+import { Component } from 'react';
+import { jsx } from '@emotion/react';
+import { splitCell } from '@atlaskit/editor-tables/utils';
+import { defineMessages, injectIntl } from 'react-intl-next';
+import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
+import { ColorPalette, cellBackgroundColorPalette } from '@atlaskit/editor-common/ui-color';
+import { DropdownMenu } from '@atlaskit/editor-common/ui-menu';
+import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
+import { cellColourPreviewStyles } from './styles';
+import { closestElement } from '@atlaskit/editor-common/utils';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, toggleContextualMenu } from '../../commands';
+import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics, distributeColumnsWidthsWithAnalytics } from '../../commands-with-analytics';
+import { getPluginState } from '../../pm-plugins/plugin-factory';
+import { canMergeCells } from '../../transforms';
+import { TableCssClassName as ClassName } from '../../types';
+import { TableSortOrder as SortOrder } from '@atlaskit/adf-schema/steps';
+import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes } from '../../utils';
+import tableMessages from '../messages';
+import { contextualMenuDropdownWidth } from '../consts';
+import { getNewResizeStateFromSelectedColumns } from '../../pm-plugins/table-resizing/utils/resize-state';
+export var messages = 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"
+  }
+});
+export var ContextualMenu = /*#__PURE__*/function (_Component) {
+  _inherits(ContextualMenu, _Component);
+
+  var _super = _createSuper(ContextualMenu);
+
+  function ContextualMenu() {
+    var _this;
+
+    _classCallCheck(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));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      isSubmenuOpen: false
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleSubMenuRef", function (ref) {
+      var parent = 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");
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_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 = 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: jsx("div", null, jsx("div", {
+            css: cellColourPreviewStyles(background),
+            className: ClassName.CONTEXTUAL_MENU_ICON
+          }), isSubmenuOpen && jsx("div", {
+            className: ClassName.CONTEXTUAL_SUBMENU,
+            ref: _this.handleSubMenuRef
+          }, jsx(ColorPalette, {
+            cols: 7,
+            palette: cellBackgroundColorPalette,
+            onClick: _this.setColor,
+            selectedColor: background
+          })))
+        });
+      }
+
+      items.push({
+        content: formatMessage(tableMessages.insertColumn),
+        value: {
+          name: 'insert_column'
+        },
+        elemAfter: jsx("div", {
+          css: shortcutStyle
+        }, tooltip(addColumnAfter))
+      });
+      items.push({
+        content: formatMessage(tableMessages.insertRow),
+        value: {
+          name: 'insert_row'
+        },
+        elemAfter: jsx("div", {
+          css: shortcutStyle
+        }, tooltip(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(tableMessages.removeColumns, {
+          0: noOfColumns
+        }),
+        value: {
+          name: 'delete_column'
+        }
+      });
+      items.push({
+        content: formatMessage(tableMessages.removeRows, {
+          0: noOfRows
+        }),
+        value: {
+          name: 'delete_row'
+        }
+      });
+
+      if (allowMergeCells) {
+        items.push({
+          content: formatMessage(messages.mergeCells),
+          value: {
+            name: 'merge'
+          },
+          isDisabled: !canMergeCells(state.tr)
+        });
+        items.push({
+          content: formatMessage(messages.splitCell),
+          value: {
+            name: 'split'
+          },
+          isDisabled: !splitCell(state)
+        });
+      }
+
+      if (allowDistributeColumns) {
+        var _newResizeState$chang;
+
+        var newResizeState = 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 = 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: jsx("div", {
+          css: shortcutStyle
+        }, tooltip(backspace))
+      });
+      return items.length ? [{
+        items: items
+      }] : null;
+    });
+
+    _defineProperty(_assertThisInitialized(_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 = getPluginState(state),
+          targetCellPosition = _getPluginState2.targetCellPosition;
+
+      switch (item.value.name) {
+        case 'sort_column_desc':
+          sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect.left, SortOrder.DESC)(state, dispatch);
+
+          _this.toggleOpen();
+
+          break;
+
+        case 'sort_column_asc':
+          sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect.left, SortOrder.ASC)(state, dispatch);
+
+          _this.toggleOpen();
+
+          break;
+
+        case 'merge':
+          mergeCellsWithAnalytics(editorAnalyticsAPI)(state, dispatch);
+
+          _this.toggleOpen();
+
+          break;
+
+        case 'split':
+          splitCellWithAnalytics(editorAnalyticsAPI)(state, dispatch);
+
+          _this.toggleOpen();
+
+          break;
+
+        case 'distribute_columns':
+          var newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
+
+          if (newResizeStateWithAnalytics) {
+            distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, newResizeStateWithAnalytics)(state, dispatch);
+
+            _this.toggleOpen();
+          }
+
+          break;
+
+        case 'clear':
+          emptyMultipleCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, targetCellPosition)(state, dispatch);
+
+          _this.toggleOpen();
+
+          break;
+
+        case 'insert_column':
+          insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
+
+          _this.toggleOpen();
+
+          break;
+
+        case 'insert_row':
+          insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, {
+            index: selectionRect.bottom,
+            moveCursorToInsertedRow: true
+          })(state, dispatch);
+
+          _this.toggleOpen();
+
+          break;
+
+        case 'delete_column':
+          deleteColumnsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect)(state, dispatch);
+
+          _this.toggleOpen();
+
+          break;
+
+        case 'delete_row':
+          var _getPluginState3 = getPluginState(state),
+              isHeaderRowRequired = _getPluginState3.pluginConfig.isHeaderRowRequired;
+
+          deleteRowsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect, !!isHeaderRowRequired)(state, dispatch);
+
+          _this.toggleOpen();
+
+          break;
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_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;
+      toggleContextualMenu()(state, dispatch);
+
+      if (!isOpen) {
+        _this.setState({
+          isSubmenuOpen: false
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleOpenChange", function () {
+      var _this$props$editorVie = _this.props.editorView,
+          state = _this$props$editorVie.state,
+          dispatch = _this$props$editorVie.dispatch;
+      toggleContextualMenu()(state, dispatch);
+
+      _this.setState({
+        isSubmenuOpen: false
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_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') {
+        hoverColumns(getSelectedColumnIndexes(selectionRect), true)(state, dispatch);
+      }
+
+      if (item.value.name === 'delete_row') {
+        hoverRows(getSelectedRowIndexes(selectionRect), true)(state, dispatch);
+      }
+
+      if (['sort_column_asc', 'sort_column_desc'].indexOf(item.value.name) > -1 && getMergedCellsPositions(state.tr).length !== 0) {
+        hoverMergedCells()(state, dispatch);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_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) {
+        clearHoverSelection()(state, dispatch);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "closeSubmenu", function () {
+      if (_this.state.isSubmenuOpen) {
+        _this.setState({
+          isSubmenuOpen: false
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_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 = getPluginState(editorView.state),
+          targetCellPosition = _getPluginState4.targetCellPosition;
+
+      var state = editorView.state,
+          dispatch = editorView.dispatch; // setColorWithAnalytics(color, targetCellPosition)(state, dispatch);
+      // TODO: restore
+
+      setColorWithAnalytics(editorAnalyticsAPI)(color, targetCellPosition)(state, dispatch);
+
+      _this.toggleOpen();
+    });
+
+    return _this;
+  }
+
+  _createClass(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 jsx("div", {
+        "data-testid": "table-cell-contextual-menu",
+        onMouseLeave: this.closeSubmenu
+      }, jsx(DropdownMenu, {
+        mountTo: mountPoint,
+        items: items,
+        isOpen: isOpen,
+        onOpenChange: this.handleOpenChange,
+        onItemActivated: this.onMenuItemActivated,
+        onMouseEnter: this.handleItemMouseEnter,
+        onMouseLeave: this.handleItemMouseLeave,
+        fitHeight: 188,
+        fitWidth: contextualMenuDropdownWidth,
+        boundariesElement: boundariesElement,
+        offset: offset
+      }));
+    }
+  }]);
+
+  return ContextualMenu;
+}(Component);
+
+_defineProperty(ContextualMenu, "defaultProps", {
+  boundariesElement: document.body
+});
+
+export default injectIntl(ContextualMenu);