@atlaskit/editor-core 189.4.0 → 189.4.2

package/dist/esm/plugins/insert-block/ui/ToolbarInsertBlock/index.js

@@ -1,560 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-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(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) { _defineProperty(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 = _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 ReactDOM from 'react-dom';
-import { injectIntl } from 'react-intl-next';
-import { EmojiPicker as AkEmojiPicker } from '@atlaskit/emoji/picker';
-import { Popup } from '@atlaskit/editor-common/ui';
-import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
-import { separatorStyles, buttonGroupStyle, wrapperStyle } from '@atlaskit/editor-common/styles';
-import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { messages } from './messages';
-import { createItems } from './create-items';
-import { BlockInsertMenu } from './block-insert-menu';
-import { withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
-
-/**
- * Checks if an element is detached (i.e. not in the current document)
- */
-var isDetachedElement = function isDetachedElement(el) {
-  return !document.body.contains(el);
-};
-var noop = function noop() {};
-var EmojiPickerWithListeners = withOuterListeners(AkEmojiPicker);
-export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(ToolbarInsertBlock, _React$PureComponent);
-  var _super = _createSuper(ToolbarInsertBlock);
-  function ToolbarInsertBlock() {
-    var _this;
-    _classCallCheck(this, ToolbarInsertBlock);
-    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", {
-      isPlusMenuOpen: false,
-      emojiPickerOpen: false,
-      isOpenedByKeyboard: false,
-      buttons: [],
-      dropdownItems: []
-    });
-    _defineProperty(_assertThisInitialized(_this), "onOpenChange", function (attrs) {
-      var state = {
-        isPlusMenuOpen: attrs.isPlusMenuOpen,
-        emojiPickerOpen: _this.state.emojiPickerOpen
-      };
-      if (_this.state.emojiPickerOpen && !attrs.open) {
-        state.emojiPickerOpen = false;
-      }
-      _this.setState(state, function () {
-        var dispatchAnalyticsEvent = _this.props.dispatchAnalyticsEvent;
-        if (!dispatchAnalyticsEvent) {
-          return;
-        }
-        var isPlusMenuOpen = _this.state.isPlusMenuOpen;
-        if (isPlusMenuOpen) {
-          return dispatchAnalyticsEvent({
-            action: ACTION.OPENED,
-            actionSubject: ACTION_SUBJECT.PLUS_MENU,
-            eventType: EVENT_TYPE.UI
-          });
-        }
-        return dispatchAnalyticsEvent({
-          action: ACTION.CLOSED,
-          actionSubject: ACTION_SUBJECT.PLUS_MENU,
-          eventType: EVENT_TYPE.UI
-        });
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "togglePlusMenuVisibility", function (event) {
-      var isPlusMenuOpen = _this.state.isPlusMenuOpen;
-      _this.onOpenChange({
-        isPlusMenuOpen: !isPlusMenuOpen
-      });
-      if ((event === null || event === void 0 ? void 0 : event.key) === 'Escape') {
-        var _ref;
-        (_ref = _this.plusButtonRef || _this.dropdownButtonRef) === null || _ref === void 0 || _ref.focus();
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "toggleEmojiPicker", function () {
-      var inputMethod = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : INPUT_METHOD.TOOLBAR;
-      _this.setState(function (prevState) {
-        return {
-          emojiPickerOpen: !prevState.emojiPickerOpen
-        };
-      }, function () {
-        if (_this.state.emojiPickerOpen) {
-          var dispatchAnalyticsEvent = _this.props.dispatchAnalyticsEvent;
-          if (dispatchAnalyticsEvent) {
-            dispatchAnalyticsEvent({
-              action: ACTION.OPENED,
-              actionSubject: ACTION_SUBJECT.PICKER,
-              actionSubjectId: ACTION_SUBJECT_ID.PICKER_EMOJI,
-              attributes: {
-                inputMethod: inputMethod
-              },
-              eventType: EVENT_TYPE.UI
-            });
-          }
-        }
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleEmojiPressEscape", function () {
-      var _this$emojiButtonRef;
-      _this.toggleEmojiPicker(INPUT_METHOD.KEYBOARD);
-      (_this$emojiButtonRef = _this.emojiButtonRef) === null || _this$emojiButtonRef === void 0 || _this$emojiButtonRef.focus();
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleEmojiClickOutside", function (e) {
-      // Ignore click events for detached elements.
-      // Workaround for FS-1322 - where two onClicks fire - one when the upload button is
-      // still in the document, and one once it's detached. Does not always occur, and
-      // may be a side effect of a react render optimisation
-      if (e.target && !isDetachedElement(e.target)) {
-        _this.toggleEmojiPicker(INPUT_METHOD.TOOLBAR);
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleEmojiButtonRef", function (button) {
-      var ref = ReactDOM.findDOMNode(button);
-      if (ref) {
-        _this.emojiButtonRef = ref;
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "handlePlusButtonRef", function (button) {
-      var ref = ReactDOM.findDOMNode(button);
-      if (ref) {
-        _this.plusButtonRef = ref;
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleDropDownButtonRef", function (button) {
-      var ref = ReactDOM.findDOMNode(button);
-      if (ref) {
-        _this.dropdownButtonRef = ref;
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleClick", function () {
-      _this.togglePlusMenuVisibility();
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleOpenByKeyboard", function (event) {
-      if (event.key === 'Enter' || event.key === ' ') {
-        _this.setState(_objectSpread(_objectSpread({}, _this.state), {}, {
-          isOpenedByKeyboard: true
-        }));
-        event.preventDefault();
-        _this.togglePlusMenuVisibility();
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "toggleLinkPanel", function (inputMethod) {
-      var _pluginInjectionApi$c, _pluginInjectionApi$h;
-      var pluginInjectionApi = _this.props.pluginInjectionApi;
-      return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$h = pluginInjectionApi.hyperlink) === null || _pluginInjectionApi$h === void 0 ? void 0 : _pluginInjectionApi$h.commands.showLinkToolbar(inputMethod))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
-    });
-    _defineProperty(_assertThisInitialized(_this), "insertMention", function (inputMethod) {
-      var _pluginInjectionApi$m, _pluginInjectionApi$m2;
-      var _this$props = _this.props,
-        editorView = _this$props.editorView,
-        pluginInjectionApi = _this$props.pluginInjectionApi;
-      if (!editorView) {
-        return true;
-      }
-      var pluginState = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$m = pluginInjectionApi.mention) === null || _pluginInjectionApi$m === void 0 ? void 0 : _pluginInjectionApi$m.sharedState.currentState();
-      if (pluginState && pluginState.canInsertMention === false) {
-        return false;
-      }
-      return Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$m2 = pluginInjectionApi.mention) === null || _pluginInjectionApi$m2 === void 0 || (_pluginInjectionApi$m2 = _pluginInjectionApi$m2.actions) === null || _pluginInjectionApi$m2 === void 0 ? void 0 : _pluginInjectionApi$m2.openTypeAhead(inputMethod));
-    });
-    _defineProperty(_assertThisInitialized(_this), "insertTable", function (inputMethod) {
-      var _pluginInjectionApi$t, _pluginInjectionApi$t2, _pluginInjectionApi$t3, _pluginInjectionApi$t4;
-      var _this$props2 = _this.props,
-        pluginInjectionApi = _this$props2.pluginInjectionApi,
-        editorView = _this$props2.editorView;
-      var state = editorView.state,
-        dispatch = editorView.dispatch;
-      return (_pluginInjectionApi$t = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$t2 = pluginInjectionApi.table) === null || _pluginInjectionApi$t2 === void 0 || (_pluginInjectionApi$t3 = (_pluginInjectionApi$t4 = _pluginInjectionApi$t2.actions).insertTable) === null || _pluginInjectionApi$t3 === void 0 ? void 0 : _pluginInjectionApi$t3.call(_pluginInjectionApi$t4, {
-        action: ACTION.INSERTED,
-        actionSubject: ACTION_SUBJECT.DOCUMENT,
-        actionSubjectId: ACTION_SUBJECT_ID.TABLE,
-        attributes: {
-          inputMethod: inputMethod
-        },
-        eventType: EVENT_TYPE.TRACK
-      })(state, dispatch)) !== null && _pluginInjectionApi$t !== void 0 ? _pluginInjectionApi$t : false;
-    });
-    _defineProperty(_assertThisInitialized(_this), "createDate", function (inputMethod) {
-      var _pluginInjectionApi$d;
-      var pluginInjectionApi = _this.props.pluginInjectionApi;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 || pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d = pluginInjectionApi.date) === null || _pluginInjectionApi$d === void 0 || (_pluginInjectionApi$d = _pluginInjectionApi$d.commands) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.insertDate({
-        inputMethod: inputMethod
-      }));
-      return true;
-    });
-    _defineProperty(_assertThisInitialized(_this), "createPlaceholderText", function () {
-      var _pluginInjectionApi$p;
-      var _this$props3 = _this.props,
-        editorView = _this$props3.editorView,
-        pluginInjectionApi = _this$props3.pluginInjectionApi;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$p = pluginInjectionApi.placeholderText) === null || _pluginInjectionApi$p === void 0 || _pluginInjectionApi$p.actions.showPlaceholderFloatingToolbar(editorView.state, editorView.dispatch);
-      return true;
-    });
-    _defineProperty(_assertThisInitialized(_this), "insertLayoutColumns", function (inputMethod) {
-      var _pluginInjectionApi$l;
-      var _this$props4 = _this.props,
-        editorView = _this$props4.editorView,
-        pluginInjectionApi = _this$props4.pluginInjectionApi;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$l = pluginInjectionApi.layout) === null || _pluginInjectionApi$l === void 0 || _pluginInjectionApi$l.actions.insertLayoutColumns(inputMethod)(editorView.state, editorView.dispatch);
-      return true;
-    });
-    _defineProperty(_assertThisInitialized(_this), "createStatus", function (inputMethod) {
-      var _pluginInjectionApi$s, _pluginInjectionApi$s2;
-      var _this$props5 = _this.props,
-        pluginInjectionApi = _this$props5.pluginInjectionApi,
-        editorView = _this$props5.editorView;
-      return (_pluginInjectionApi$s = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$s2 = pluginInjectionApi.status) === null || _pluginInjectionApi$s2 === void 0 || (_pluginInjectionApi$s2 = _pluginInjectionApi$s2.actions) === null || _pluginInjectionApi$s2 === void 0 ? void 0 : _pluginInjectionApi$s2.updateStatus(inputMethod)(editorView.state, editorView.dispatch)) !== null && _pluginInjectionApi$s !== void 0 ? _pluginInjectionApi$s : false;
-    });
-    _defineProperty(_assertThisInitialized(_this), "openMediaPicker", function (inputMethod) {
-      var _this$props6 = _this.props,
-        onShowMediaPicker = _this$props6.onShowMediaPicker,
-        dispatchAnalyticsEvent = _this$props6.dispatchAnalyticsEvent;
-      if (onShowMediaPicker) {
-        onShowMediaPicker();
-        if (dispatchAnalyticsEvent) {
-          dispatchAnalyticsEvent({
-            action: ACTION.OPENED,
-            actionSubject: ACTION_SUBJECT.PICKER,
-            actionSubjectId: ACTION_SUBJECT_ID.PICKER_CLOUD,
-            attributes: {
-              inputMethod: inputMethod
-            },
-            eventType: EVENT_TYPE.UI
-          });
-        }
-      }
-      return true;
-    });
-    _defineProperty(_assertThisInitialized(_this), "insertTaskDecision", function (name, inputMethod) {
-      return function () {
-        var _pluginInjectionApi$t5, _pluginInjectionApi$t6;
-        var _this$props7 = _this.props,
-          _this$props7$editorVi = _this$props7.editorView,
-          state = _this$props7$editorVi.state,
-          dispatch = _this$props7$editorVi.dispatch,
-          pluginInjectionApi = _this$props7.pluginInjectionApi;
-        var listType = name === 'action' ? 'taskList' : 'decisionList';
-        return (_pluginInjectionApi$t5 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$t6 = pluginInjectionApi.taskDecision) === null || _pluginInjectionApi$t6 === void 0 ? void 0 : _pluginInjectionApi$t6.actions.insertTaskDecision(listType, inputMethod)(state, dispatch)) !== null && _pluginInjectionApi$t5 !== void 0 ? _pluginInjectionApi$t5 : false;
-      };
-    });
-    _defineProperty(_assertThisInitialized(_this), "insertHorizontalRule", function (inputMethod) {
-      var _pluginInjectionApi$r, _pluginInjectionApi$r2;
-      var _this$props8 = _this.props,
-        _this$props8$editorVi = _this$props8.editorView,
-        state = _this$props8$editorVi.state,
-        dispatch = _this$props8$editorVi.dispatch,
-        pluginInjectionApi = _this$props8.pluginInjectionApi;
-      return (_pluginInjectionApi$r = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$r2 = pluginInjectionApi.rule) === null || _pluginInjectionApi$r2 === void 0 ? void 0 : _pluginInjectionApi$r2.actions.insertHorizontalRule(inputMethod)(state, dispatch)) !== null && _pluginInjectionApi$r !== void 0 ? _pluginInjectionApi$r : false;
-    });
-    _defineProperty(_assertThisInitialized(_this), "insertExpand", function () {
-      var _pluginInjectionApi$e, _pluginInjectionApi$e2;
-      var _this$props9 = _this.props,
-        _this$props9$editorVi = _this$props9.editorView,
-        state = _this$props9$editorVi.state,
-        dispatch = _this$props9$editorVi.dispatch,
-        pluginInjectionApi = _this$props9.pluginInjectionApi;
-      return (_pluginInjectionApi$e = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$e2 = pluginInjectionApi.expand) === null || _pluginInjectionApi$e2 === void 0 ? void 0 : _pluginInjectionApi$e2.actions.insertExpand(state, dispatch)) !== null && _pluginInjectionApi$e !== void 0 ? _pluginInjectionApi$e : false;
-    });
-    _defineProperty(_assertThisInitialized(_this), "insertBlockType", function (itemName) {
-      return function () {
-        var _this$props10 = _this.props,
-          editorView = _this$props10.editorView,
-          onInsertBlockType = _this$props10.onInsertBlockType;
-        var state = editorView.state,
-          dispatch = editorView.dispatch;
-        onInsertBlockType(itemName)(state, dispatch);
-        return true;
-      };
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleSelectedEmoji", function (emojiId) {
-      var _pluginInjectionApi$e3;
-      var pluginInjectionApi = _this.props.pluginInjectionApi;
-      _this.props.editorView.focus();
-      pluginInjectionApi === null || pluginInjectionApi === void 0 || pluginInjectionApi.core.actions.execute((_pluginInjectionApi$e3 = pluginInjectionApi.emoji) === null || _pluginInjectionApi$e3 === void 0 ? void 0 : _pluginInjectionApi$e3.commands.insertEmoji(emojiId, INPUT_METHOD.PICKER));
-      _this.toggleEmojiPicker();
-      return true;
-    });
-    _defineProperty(_assertThisInitialized(_this), "openElementBrowser", function () {
-      var _pluginInjectionApi$q;
-      var pluginInjectionApi = _this.props.pluginInjectionApi;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 || pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 ? void 0 : _pluginInjectionApi$q.commands.openElementBrowserModal);
-    });
-    _defineProperty(_assertThisInitialized(_this), "onItemActivated", function (_ref2) {
-      var item = _ref2.item,
-        inputMethod = _ref2.inputMethod;
-      var _this$props11 = _this.props,
-        editorView = _this$props11.editorView,
-        editorActions = _this$props11.editorActions,
-        handleImageUpload = _this$props11.handleImageUpload,
-        expandEnabled = _this$props11.expandEnabled;
-
-      // need to do this before inserting nodes so scrollIntoView works properly
-      if (!editorView.hasFocus()) {
-        editorView.focus();
-      }
-      switch (item.value.name) {
-        case 'link':
-          _this.toggleLinkPanel(inputMethod);
-          break;
-        case 'table':
-          _this.insertTable(inputMethod);
-          break;
-        case 'image upload':
-          if (handleImageUpload) {
-            var state = editorView.state,
-              dispatch = editorView.dispatch;
-            handleImageUpload()(state, dispatch);
-          }
-          break;
-        case 'media':
-          _this.openMediaPicker(inputMethod);
-          break;
-        case 'mention':
-          _this.insertMention(inputMethod);
-          break;
-        case 'emoji':
-          _this.toggleEmojiPicker(inputMethod);
-          break;
-        case 'codeblock':
-        case 'blockquote':
-        case 'panel':
-          _this.insertBlockType(item.value.name)();
-          break;
-        case 'action':
-        case 'decision':
-          _this.insertTaskDecision(item.value.name, inputMethod)();
-          break;
-        case 'horizontalrule':
-          _this.insertHorizontalRule(inputMethod);
-          break;
-        case 'macro':
-          _this.openElementBrowser();
-          break;
-        case 'date':
-          _this.createDate(inputMethod);
-          break;
-        case 'placeholder text':
-          _this.createPlaceholderText();
-          break;
-        case 'layout':
-          _this.insertLayoutColumns(inputMethod);
-          break;
-        case 'status':
-          _this.createStatus(inputMethod);
-          break;
-
-        // https://product-fabric.atlassian.net/browse/ED-8053
-        // @ts-ignore: OK to fallthrough to default
-        case 'expand':
-          if (expandEnabled) {
-            _this.insertExpand();
-            break;
-          }
-
-        // eslint-disable-next-line no-fallthrough
-        default:
-          if (item && item.onClick) {
-            item.onClick(editorActions);
-            break;
-          }
-      }
-      _this.setState({
-        isPlusMenuOpen: false
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "insertToolbarMenuItem", function (btn) {
-      return _this.onItemActivated({
-        item: btn,
-        inputMethod: INPUT_METHOD.TOOLBAR
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "insertInsertMenuItem", function (_ref3) {
-      var item = _ref3.item;
-      return _this.onItemActivated({
-        item: item,
-        inputMethod: INPUT_METHOD.INSERT_MENU
-      });
-    });
-    return _this;
-  }
-  _createClass(ToolbarInsertBlock, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      // If number of visible buttons changed, close emoji picker
-      if (prevProps.buttons !== this.props.buttons) {
-        this.setState({
-          emojiPickerOpen: false
-        });
-      }
-      if (this.state.isOpenedByKeyboard) {
-        var _this$dropdownButtonR;
-        var downArrowEvent = new KeyboardEvent('keydown', {
-          bubbles: true,
-          key: 'ArrowDown'
-        });
-        (_this$dropdownButtonR = this.dropdownButtonRef) === null || _this$dropdownButtonR === void 0 || _this$dropdownButtonR.dispatchEvent(downArrowEvent);
-        this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
-          isOpenedByKeyboard: false
-        }));
-      }
-    }
-  }, {
-    key: "renderPopup",
-    value: function renderPopup() {
-      var emojiPickerOpen = this.state.emojiPickerOpen;
-      var _this$props12 = this.props,
-        popupsMountPoint = _this$props12.popupsMountPoint,
-        popupsBoundariesElement = _this$props12.popupsBoundariesElement,
-        popupsScrollableElement = _this$props12.popupsScrollableElement,
-        emojiProvider = _this$props12.emojiProvider,
-        replacePlusMenuWithElementBrowser = _this$props12.replacePlusMenuWithElementBrowser;
-      var dropdownEmoji = this.state.dropdownItems.some(function (_ref4) {
-        var name = _ref4.value.name;
-        return name === 'emoji';
-      });
-      var dropDownButtonRef = replacePlusMenuWithElementBrowser ? this.plusButtonRef : this.dropdownButtonRef;
-      var ref = dropdownEmoji ? dropDownButtonRef : this.emojiButtonRef;
-      if (!emojiPickerOpen || !ref || !emojiProvider) {
-        return null;
-      }
-      return jsx(Popup, {
-        target: ref,
-        fitHeight: 350,
-        fitWidth: 350,
-        offset: [0, 3],
-        mountTo: popupsMountPoint,
-        boundariesElement: popupsBoundariesElement,
-        scrollableElement: popupsScrollableElement,
-        focusTrap: true,
-        zIndex: akEditorMenuZIndex
-      }, jsx(EmojiPickerWithListeners, {
-        emojiProvider: emojiProvider,
-        onSelection: this.handleSelectedEmoji,
-        handleClickOutside: this.handleEmojiClickOutside,
-        handleEscapeKeydown: this.handleEmojiPressEscape
-      }));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this,
-        _this$props$isDisable,
-        _this$props$replacePl;
-      var _this$state = this.state,
-        buttons = _this$state.buttons,
-        dropdownItems = _this$state.dropdownItems,
-        emojiPickerOpen = _this$state.emojiPickerOpen;
-      var _this$props13 = this.props,
-        isDisabled = _this$props13.isDisabled,
-        isReducedSpacing = _this$props13.isReducedSpacing;
-      if (buttons.length === 0 && dropdownItems.length === 0) {
-        return null;
-      }
-      return jsx("span", {
-        css: buttonGroupStyle
-      }, buttons.map(function (btn) {
-        return jsx(ToolbarButton, {
-          item: btn,
-          testId: String(btn.content),
-          ref: btn.value.name === 'emoji' ? _this2.handleEmojiButtonRef : noop,
-          key: btn.value.name,
-          spacing: isReducedSpacing ? 'none' : 'default',
-          disabled: isDisabled || btn.isDisabled,
-          iconBefore: btn.elemBefore,
-          selected: btn.value.name === 'emoji' && emojiPickerOpen || btn.isActive,
-          title: btn.title,
-          "aria-label": btn['aria-label'],
-          "aria-haspopup": btn['aria-haspopup'],
-          "aria-keyshortcuts": btn['aria-keyshortcuts'],
-          onItemClick: _this2.insertToolbarMenuItem
-        });
-      }), jsx("span", {
-        css: wrapperStyle
-      }, this.renderPopup(), jsx(BlockInsertMenu, {
-        popupsMountPoint: this.props.popupsMountPoint,
-        popupsBoundariesElement: this.props.popupsBoundariesElement,
-        popupsScrollableElement: this.props.popupsScrollableElement,
-        disabled: (_this$props$isDisable = this.props.isDisabled) !== null && _this$props$isDisable !== void 0 ? _this$props$isDisable : false,
-        editorView: this.props.editorView,
-        spacing: this.props.isReducedSpacing ? 'none' : 'default',
-        label: this.props.intl.formatMessage(messages.insertMenu),
-        open: this.state.isPlusMenuOpen,
-        plusButtonRef: this.plusButtonRef,
-        items: this.state.dropdownItems,
-        onRef: this.handleDropDownButtonRef,
-        onPlusButtonRef: this.handlePlusButtonRef,
-        onClick: this.handleClick,
-        onKeyDown: this.handleOpenByKeyboard,
-        onItemActivated: this.insertInsertMenuItem,
-        onInsert: this.insertInsertMenuItem,
-        onOpenChange: this.onOpenChange,
-        togglePlusMenuVisibility: this.togglePlusMenuVisibility,
-        replacePlusMenuWithElementBrowser: (_this$props$replacePl = this.props.replacePlusMenuWithElementBrowser) !== null && _this$props$replacePl !== void 0 ? _this$props$replacePl : false,
-        showElementBrowserLink: this.props.showElementBrowserLink || false,
-        pluginInjectionApi: this.props.pluginInjectionApi
-      })), this.props.showSeparator && jsx("span", {
-        css: separatorStyles
-      }));
-    }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(props, state) {
-      var _createItems = createItems({
-          isTypeAheadAllowed: props.isTypeAheadAllowed,
-          tableSupported: props.tableSupported,
-          mediaUploadsEnabled: props.mediaUploadsEnabled,
-          mediaSupported: props.mediaSupported,
-          imageUploadSupported: props.imageUploadSupported,
-          imageUploadEnabled: props.imageUploadEnabled,
-          mentionsSupported: props.mentionsSupported,
-          mentionsDisabled: props.mentionsDisabled,
-          actionSupported: props.actionSupported,
-          decisionSupported: props.decisionSupported,
-          linkSupported: props.linkSupported,
-          linkDisabled: props.linkDisabled,
-          emojiDisabled: props.emojiDisabled,
-          nativeStatusSupported: props.nativeStatusSupported,
-          dateEnabled: props.dateEnabled,
-          placeholderTextEnabled: props.placeholderTextEnabled,
-          horizontalRuleEnabled: props.horizontalRuleEnabled,
-          layoutSectionEnabled: props.layoutSectionEnabled,
-          expandEnabled: props.expandEnabled,
-          showElementBrowserLink: props.showElementBrowserLink,
-          emojiProvider: props.emojiProvider,
-          availableWrapperBlockTypes: props.availableWrapperBlockTypes,
-          insertMenuItems: props.insertMenuItems,
-          schema: props.editorView.state.schema,
-          numberOfButtons: props.buttons,
-          formatMessage: props.intl.formatMessage,
-          isNewMenuEnabled: props.replacePlusMenuWithElementBrowser
-        }),
-        _createItems2 = _slicedToArray(_createItems, 2),
-        buttons = _createItems2[0],
-        dropdownItems = _createItems2[1];
-      return _objectSpread(_objectSpread({}, state), {}, {
-        buttons: buttons,
-        dropdownItems: dropdownItems
-      });
-    }
-  }]);
-  return ToolbarInsertBlock;
-}(React.PureComponent);
-export default injectIntl(ToolbarInsertBlock);