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

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

@@ -0,0 +1,562 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @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)
+ */
+const isDetachedElement = el => !document.body.contains(el);
+const noop = () => {};
+const EmojiPickerWithListeners = withOuterListeners(AkEmojiPicker);
+
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export class ToolbarInsertBlock extends React.PureComponent {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {
+      isPlusMenuOpen: false,
+      emojiPickerOpen: false,
+      isOpenedByKeyboard: false,
+      buttons: [],
+      dropdownItems: []
+    });
+    _defineProperty(this, "onOpenChange", attrs => {
+      const state = {
+        isPlusMenuOpen: attrs.isPlusMenuOpen,
+        emojiPickerOpen: this.state.emojiPickerOpen
+      };
+      if (this.state.emojiPickerOpen && !attrs.open) {
+        state.emojiPickerOpen = false;
+      }
+      this.setState(state, () => {
+        const {
+          dispatchAnalyticsEvent
+        } = this.props;
+        if (!dispatchAnalyticsEvent) {
+          return;
+        }
+        const {
+          isPlusMenuOpen
+        } = this.state;
+        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(this, "togglePlusMenuVisibility", event => {
+      const {
+        isPlusMenuOpen
+      } = this.state;
+      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 ? void 0 : _ref.focus();
+      }
+    });
+    _defineProperty(this, "toggleEmojiPicker", (inputMethod = INPUT_METHOD.TOOLBAR) => {
+      this.setState(prevState => ({
+        emojiPickerOpen: !prevState.emojiPickerOpen
+      }), () => {
+        if (this.state.emojiPickerOpen) {
+          const {
+            dispatchAnalyticsEvent
+          } = this.props;
+          if (dispatchAnalyticsEvent) {
+            dispatchAnalyticsEvent({
+              action: ACTION.OPENED,
+              actionSubject: ACTION_SUBJECT.PICKER,
+              actionSubjectId: ACTION_SUBJECT_ID.PICKER_EMOJI,
+              attributes: {
+                inputMethod
+              },
+              eventType: EVENT_TYPE.UI
+            });
+          }
+        }
+      });
+    });
+    _defineProperty(this, "handleEmojiPressEscape", () => {
+      var _this$emojiButtonRef;
+      this.toggleEmojiPicker(INPUT_METHOD.KEYBOARD);
+      (_this$emojiButtonRef = this.emojiButtonRef) === null || _this$emojiButtonRef === void 0 ? void 0 : _this$emojiButtonRef.focus();
+    });
+    _defineProperty(this, "handleEmojiClickOutside", 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(this, "handleEmojiButtonRef", button => {
+      const ref = ReactDOM.findDOMNode(button);
+      if (ref) {
+        this.emojiButtonRef = ref;
+      }
+    });
+    _defineProperty(this, "handlePlusButtonRef", button => {
+      const ref = ReactDOM.findDOMNode(button);
+      if (ref) {
+        this.plusButtonRef = ref;
+      }
+    });
+    _defineProperty(this, "handleDropDownButtonRef", button => {
+      const ref = ReactDOM.findDOMNode(button);
+      if (ref) {
+        this.dropdownButtonRef = ref;
+      }
+    });
+    _defineProperty(this, "handleClick", () => {
+      this.togglePlusMenuVisibility();
+    });
+    _defineProperty(this, "handleOpenByKeyboard", event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        this.setState({
+          ...this.state,
+          isOpenedByKeyboard: true
+        });
+        event.preventDefault();
+        this.togglePlusMenuVisibility();
+      }
+    });
+    _defineProperty(this, "toggleLinkPanel", inputMethod => {
+      var _pluginInjectionApi$c, _pluginInjectionApi$h;
+      const {
+        pluginInjectionApi
+      } = this.props;
+      return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? 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(this, "insertMention", inputMethod => {
+      var _pluginInjectionApi$m, _pluginInjectionApi$m2, _pluginInjectionApi$m3;
+      const {
+        editorView,
+        pluginInjectionApi
+      } = this.props;
+      if (!editorView) {
+        return true;
+      }
+      const pluginState = pluginInjectionApi === null || pluginInjectionApi === void 0 ? 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 ? void 0 : (_pluginInjectionApi$m2 = pluginInjectionApi.mention) === null || _pluginInjectionApi$m2 === void 0 ? void 0 : (_pluginInjectionApi$m3 = _pluginInjectionApi$m2.actions) === null || _pluginInjectionApi$m3 === void 0 ? void 0 : _pluginInjectionApi$m3.openTypeAhead(inputMethod));
+    });
+    _defineProperty(this, "insertTable", inputMethod => {
+      var _pluginInjectionApi$t, _pluginInjectionApi$t2, _pluginInjectionApi$t3, _pluginInjectionApi$t4;
+      const {
+        pluginInjectionApi,
+        editorView
+      } = this.props;
+      const {
+        state,
+        dispatch
+      } = editorView;
+      return (_pluginInjectionApi$t = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$t2 = pluginInjectionApi.table) === null || _pluginInjectionApi$t2 === void 0 ? 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
+        },
+        eventType: EVENT_TYPE.TRACK
+      })(state, dispatch)) !== null && _pluginInjectionApi$t !== void 0 ? _pluginInjectionApi$t : false;
+    });
+    _defineProperty(this, "createDate", inputMethod => {
+      var _pluginInjectionApi$d, _pluginInjectionApi$d2;
+      const {
+        pluginInjectionApi
+      } = this.props;
+      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.date) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.commands) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.insertDate({
+        inputMethod
+      }));
+      return true;
+    });
+    _defineProperty(this, "createPlaceholderText", () => {
+      var _pluginInjectionApi$p;
+      const {
+        editorView,
+        pluginInjectionApi
+      } = this.props;
+      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$p = pluginInjectionApi.placeholderText) === null || _pluginInjectionApi$p === void 0 ? void 0 : _pluginInjectionApi$p.actions.showPlaceholderFloatingToolbar(editorView.state, editorView.dispatch);
+      return true;
+    });
+    _defineProperty(this, "insertLayoutColumns", inputMethod => {
+      var _pluginInjectionApi$l;
+      const {
+        editorView,
+        pluginInjectionApi
+      } = this.props;
+      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$l = pluginInjectionApi.layout) === null || _pluginInjectionApi$l === void 0 ? void 0 : _pluginInjectionApi$l.actions.insertLayoutColumns(inputMethod)(editorView.state, editorView.dispatch);
+      return true;
+    });
+    _defineProperty(this, "createStatus", inputMethod => {
+      var _pluginInjectionApi$s, _pluginInjectionApi$s2, _pluginInjectionApi$s3;
+      const {
+        pluginInjectionApi,
+        editorView
+      } = this.props;
+      return (_pluginInjectionApi$s = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$s2 = pluginInjectionApi.status) === null || _pluginInjectionApi$s2 === void 0 ? void 0 : (_pluginInjectionApi$s3 = _pluginInjectionApi$s2.actions) === null || _pluginInjectionApi$s3 === void 0 ? void 0 : _pluginInjectionApi$s3.updateStatus(inputMethod)(editorView.state, editorView.dispatch)) !== null && _pluginInjectionApi$s !== void 0 ? _pluginInjectionApi$s : false;
+    });
+    _defineProperty(this, "openMediaPicker", inputMethod => {
+      const {
+        onShowMediaPicker,
+        dispatchAnalyticsEvent
+      } = this.props;
+      if (onShowMediaPicker) {
+        onShowMediaPicker();
+        if (dispatchAnalyticsEvent) {
+          dispatchAnalyticsEvent({
+            action: ACTION.OPENED,
+            actionSubject: ACTION_SUBJECT.PICKER,
+            actionSubjectId: ACTION_SUBJECT_ID.PICKER_CLOUD,
+            attributes: {
+              inputMethod
+            },
+            eventType: EVENT_TYPE.UI
+          });
+        }
+      }
+      return true;
+    });
+    _defineProperty(this, "insertTaskDecision", (name, inputMethod) => () => {
+      var _pluginInjectionApi$t5, _pluginInjectionApi$t6;
+      const {
+        editorView: {
+          state,
+          dispatch
+        },
+        pluginInjectionApi
+      } = this.props;
+      const listType = name === 'action' ? 'taskList' : 'decisionList';
+      return (_pluginInjectionApi$t5 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? 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(this, "insertHorizontalRule", inputMethod => {
+      var _pluginInjectionApi$r, _pluginInjectionApi$r2;
+      const {
+        editorView: {
+          state,
+          dispatch
+        },
+        pluginInjectionApi
+      } = this.props;
+      return (_pluginInjectionApi$r = pluginInjectionApi === null || pluginInjectionApi === void 0 ? 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(this, "insertExpand", () => {
+      var _pluginInjectionApi$e, _pluginInjectionApi$e2;
+      const {
+        editorView: {
+          state,
+          dispatch
+        },
+        pluginInjectionApi
+      } = this.props;
+      return (_pluginInjectionApi$e = pluginInjectionApi === null || pluginInjectionApi === void 0 ? 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(this, "insertBlockType", itemName => () => {
+      const {
+        editorView,
+        onInsertBlockType
+      } = this.props;
+      const {
+        state,
+        dispatch
+      } = editorView;
+      onInsertBlockType(itemName)(state, dispatch);
+      return true;
+    });
+    _defineProperty(this, "handleSelectedEmoji", emojiId => {
+      var _pluginInjectionApi$e3;
+      const {
+        pluginInjectionApi
+      } = this.props;
+      this.props.editorView.focus();
+      pluginInjectionApi === null || pluginInjectionApi === void 0 ? 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(this, "openElementBrowser", () => {
+      var _pluginInjectionApi$q;
+      const {
+        pluginInjectionApi
+      } = this.props;
+      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 ? void 0 : _pluginInjectionApi$q.commands.openElementBrowserModal);
+    });
+    _defineProperty(this, "onItemActivated", ({
+      item,
+      inputMethod
+    }) => {
+      const {
+        editorView,
+        editorActions,
+        handleImageUpload,
+        expandEnabled
+      } = this.props;
+
+      // 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) {
+            const {
+              state,
+              dispatch
+            } = editorView;
+            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(this, "insertToolbarMenuItem", btn => this.onItemActivated({
+      item: btn,
+      inputMethod: INPUT_METHOD.TOOLBAR
+    }));
+    _defineProperty(this, "insertInsertMenuItem", ({
+      item
+    }) => this.onItemActivated({
+      item,
+      inputMethod: INPUT_METHOD.INSERT_MENU
+    }));
+  }
+  static getDerivedStateFromProps(props, state) {
+    const [buttons, dropdownItems] = 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
+    });
+    return {
+      ...state,
+      buttons,
+      dropdownItems
+    };
+  }
+  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;
+      const downArrowEvent = new KeyboardEvent('keydown', {
+        bubbles: true,
+        key: 'ArrowDown'
+      });
+      (_this$dropdownButtonR = this.dropdownButtonRef) === null || _this$dropdownButtonR === void 0 ? void 0 : _this$dropdownButtonR.dispatchEvent(downArrowEvent);
+      this.setState({
+        ...this.state,
+        isOpenedByKeyboard: false
+      });
+    }
+  }
+  renderPopup() {
+    const {
+      emojiPickerOpen
+    } = this.state;
+    const {
+      popupsMountPoint,
+      popupsBoundariesElement,
+      popupsScrollableElement,
+      emojiProvider,
+      replacePlusMenuWithElementBrowser
+    } = this.props;
+    const dropdownEmoji = this.state.dropdownItems.some(({
+      value: {
+        name
+      }
+    }) => name === 'emoji');
+    const dropDownButtonRef = replacePlusMenuWithElementBrowser ? this.plusButtonRef : this.dropdownButtonRef;
+    const 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
+    }));
+  }
+  render() {
+    var _this$props$isDisable, _this$props$replacePl;
+    const {
+      buttons,
+      dropdownItems,
+      emojiPickerOpen
+    } = this.state;
+    const {
+      isDisabled,
+      isReducedSpacing
+    } = this.props;
+    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(btn => jsx(ToolbarButton, {
+        item: btn,
+        testId: String(btn.content),
+        ref: btn.value.name === 'emoji' ? this.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: this.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
+      }))
+    );
+  }
+}
+export default injectIntl(ToolbarInsertBlock);