@atlaskit/editor-core 189.4.0 → 189.4.2

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

@@ -1,558 +0,0 @@
-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 { 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)
- */
-const isDetachedElement = el => !document.body.contains(el);
-const noop = () => {};
-const EmojiPickerWithListeners = withOuterListeners(AkEmojiPicker);
-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) {
-            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 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);