@atlaskit/editor-core 174.0.0 → 175.0.0

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

@@ -1,166 +0,0 @@
-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 '../../../../ui/ToolbarButton';
-import { closestElement } from '../../../../utils/dom';
-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 '../../../../ui/ErrorBoundary';
-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;
-    }
-  }]);
-
-  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

@@ -1,11 +0,0 @@
-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

@@ -1,499 +0,0 @@
-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 '../../../../keymaps';
-import ColorPalette from '../../../../ui/ColorPalette';
-import cellBackgroundColorPalette from '../../../../ui/ColorPalette/Palettes/cellBackgroundColorPalette';
-import DropdownMenu from '../../../../ui/DropdownMenu';
-import { shortcutStyle, cellColourPreviewStyles } from '../../../../ui/styles';
-import { closestElement } from '../../../../utils/dom';
-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)(INPUT_METHOD.CONTEXT_MENU)(state, dispatch);
-
-          _this.toggleOpen();
-
-          break;
-
-        case 'split':
-          splitCellWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU)(state, dispatch);
-
-          _this.toggleOpen();
-
-          break;
-
-        case 'distribute_columns':
-          var newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionRect, state, editorView.domAtPos.bind(editorView), _this.props.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(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, 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);