@atlaskit/editor-plugin-insert-block 0.1.0 → 0.2.0

package/dist/esm/ui/ToolbarInsertBlock/index.js

@@ -0,0 +1,564 @@
+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 { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { buttonGroupStyle, separatorStyles, wrapperStyle } from '@atlaskit/editor-common/styles';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import { withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
+import { EmojiPicker as AkEmojiPicker } from '@atlaskit/emoji/picker';
+import { BlockInsertMenu } from './block-insert-menu';
+import { createItems } from './create-items';
+import { messages } from './messages';
+/**
+ * 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);
+
+// eslint-disable-next-line @repo/internal/react/no-class-components
+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 && editorActions) {
+            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 (
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+        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);