@atlaskit/editor-plugin-insert-block 0.1.1 → 0.2.1

package/.eslintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+  rules: {
+    '@typescript-eslint/no-duplicate-imports': 'error',
+    '@typescript-eslint/no-explicit-any': 'error',
+    '@typescript-eslint/ban-types': [
+      'error',
+      {
+        types: {
+          'React.FC':
+            'Please use types directly on props instead, and explicitly define children if required',
+          'React.FunctionalComponent':
+            'Please use types directly on props instead, and explicitly define children if required',
+        },
+        extendDefaults: false,
+      },
+    ],
+  },
+  overrides: [
+    {
+      files: ['**/__tests__/**/*.{js,ts,tsx}', '**/examples/**/*.{js,ts,tsx}'],
+      rules: {
+        '@typescript-eslint/no-explicit-any': 'off',
+      },
+    },
+  ],
+};

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 0.2.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.2.0
+
+### Minor Changes
+
+- [#43507](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43507) [`a9695768de6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a9695768de6) - Extracted insert block plugin code from editor-core to @atlaskit/editor-plugin-insert-block
+
 ## 0.1.1
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -2,4 +2,11 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+Object.defineProperty(exports, "insertBlockPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _plugin.insertBlockPlugin;
+  }
+});
+var _plugin = require("./plugin");

package/dist/cjs/plugin.js

@@ -0,0 +1,164 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.insertBlockPlugin = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _providerFactory = require("@atlaskit/editor-common/provider-factory");
+var _types = require("@atlaskit/editor-common/types");
+var _consts = require("@atlaskit/editor-plugin-block-type/consts");
+var _ToolbarInsertBlock = _interopRequireDefault(require("./ui/ToolbarInsertBlock"));
+var toolbarSizeToButtons = function toolbarSizeToButtons(toolbarSize) {
+  switch (toolbarSize) {
+    case _types.ToolbarSize.XXL:
+    case _types.ToolbarSize.XL:
+    case _types.ToolbarSize.L:
+    case _types.ToolbarSize.M:
+      return 7;
+    case _types.ToolbarSize.S:
+      return 2;
+    default:
+      return 0;
+  }
+};
+/**
+ * Wrapper over insertBlockTypeWithAnalytics to autobind toolbar input method
+ * @param name Block name
+ */
+function handleInsertBlockType(insertCodeBlock, insertPanel, insertBlockQuote) {
+  return function (name) {
+    if (name === _consts.CODE_BLOCK.name && insertCodeBlock) {
+      return insertCodeBlock(_analytics.INPUT_METHOD.TOOLBAR);
+    }
+    if (name === _consts.PANEL.name && insertPanel) {
+      return insertPanel(_analytics.INPUT_METHOD.TOOLBAR);
+    }
+    if (name === _consts.BLOCK_QUOTE.name && insertBlockQuote) {
+      return insertBlockQuote(_analytics.INPUT_METHOD.TOOLBAR);
+    }
+    return function () {
+      return false;
+    };
+  };
+}
+var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_ref) {
+  var _api$featureFlags;
+  var _ref$config = _ref.config,
+    options = _ref$config === void 0 ? {} : _ref$config,
+    api = _ref.api;
+  var featureFlags = (api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
+  return {
+    name: 'insertBlock',
+    primaryToolbarComponent: function primaryToolbarComponent(_ref2) {
+      var editorView = _ref2.editorView,
+        editorActions = _ref2.editorActions,
+        dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
+        providerFactory = _ref2.providerFactory,
+        popupsMountPoint = _ref2.popupsMountPoint,
+        popupsBoundariesElement = _ref2.popupsBoundariesElement,
+        popupsScrollableElement = _ref2.popupsScrollableElement,
+        toolbarSize = _ref2.toolbarSize,
+        disabled = _ref2.disabled,
+        isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing,
+        isLastItem = _ref2.isLastItem;
+      var renderNode = function renderNode(providers) {
+        return /*#__PURE__*/_react.default.createElement(ToolbarInsertBlockWithInjectionApi, {
+          pluginInjectionApi: api,
+          editorView: editorView,
+          editorActions: editorActions,
+          dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+          providerFactory: providerFactory,
+          popupsMountPoint: popupsMountPoint,
+          popupsBoundariesElement: popupsBoundariesElement,
+          popupsScrollableElement: popupsScrollableElement,
+          toolbarSize: toolbarSize,
+          disabled: disabled,
+          isToolbarReducedSpacing: isToolbarReducedSpacing,
+          isLastItem: isLastItem,
+          featureFlags: featureFlags,
+          providers: providers,
+          options: options
+        });
+      };
+      return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
+        providerFactory: providerFactory,
+        providers: ['emojiProvider'],
+        renderNode: renderNode
+      });
+    }
+  };
+};
+function ToolbarInsertBlockWithInjectionApi(_ref3) {
+  var _ref4, _ref5, _pluginInjectionApi$i, _pluginInjectionApi$c, _pluginInjectionApi$p, _pluginInjectionApi$b, _pluginInjectionApi$e;
+  var editorView = _ref3.editorView,
+    editorActions = _ref3.editorActions,
+    dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent,
+    popupsMountPoint = _ref3.popupsMountPoint,
+    popupsBoundariesElement = _ref3.popupsBoundariesElement,
+    popupsScrollableElement = _ref3.popupsScrollableElement,
+    toolbarSize = _ref3.toolbarSize,
+    disabled = _ref3.disabled,
+    isToolbarReducedSpacing = _ref3.isToolbarReducedSpacing,
+    isLastItem = _ref3.isLastItem,
+    providers = _ref3.providers,
+    pluginInjectionApi = _ref3.pluginInjectionApi,
+    options = _ref3.options,
+    featureFlags = _ref3.featureFlags;
+  var buttons = toolbarSizeToButtons(toolbarSize);
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText']),
+    dateState = _useSharedPluginState.dateState,
+    hyperlinkState = _useSharedPluginState.hyperlinkState,
+    imageUploadState = _useSharedPluginState.imageUploadState,
+    mentionState = _useSharedPluginState.mentionState,
+    emojiState = _useSharedPluginState.emojiState,
+    blockTypeState = _useSharedPluginState.blockTypeState,
+    mediaState = _useSharedPluginState.mediaState,
+    typeAheadState = _useSharedPluginState.typeAheadState,
+    placeholderTextState = _useSharedPluginState.placeholderTextState;
+  return /*#__PURE__*/_react.default.createElement(_ToolbarInsertBlock.default, {
+    pluginInjectionApi: pluginInjectionApi,
+    buttons: buttons,
+    isReducedSpacing: isToolbarReducedSpacing,
+    isDisabled: disabled,
+    isTypeAheadAllowed: Boolean(typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isAllowed),
+    editorView: editorView,
+    tableSupported: !!editorView.state.schema.nodes.table,
+    actionSupported: !!editorView.state.schema.nodes.taskItem,
+    mentionsSupported: !!(mentionState && mentionState.mentionProvider),
+    mentionsDisabled: !!(mentionState && !mentionState.canInsertMention),
+    decisionSupported: !!editorView.state.schema.nodes.decisionItem,
+    dateEnabled: !!dateState,
+    placeholderTextEnabled: placeholderTextState && placeholderTextState.allowInserting,
+    layoutSectionEnabled: Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.layout),
+    expandEnabled: !!options.allowExpand,
+    mediaUploadsEnabled: (_ref4 = mediaState && mediaState.allowsUploads) !== null && _ref4 !== void 0 ? _ref4 : undefined,
+    onShowMediaPicker: (_ref5 = mediaState && mediaState.showMediaPicker) !== null && _ref5 !== void 0 ? _ref5 : undefined,
+    mediaSupported: !!mediaState,
+    imageUploadSupported: !!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.imageUpload),
+    imageUploadEnabled: imageUploadState === null || imageUploadState === void 0 ? void 0 : imageUploadState.enabled,
+    handleImageUpload: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$i = pluginInjectionApi.imageUpload) === null || _pluginInjectionApi$i === void 0 ? void 0 : _pluginInjectionApi$i.actions.startUpload,
+    availableWrapperBlockTypes: blockTypeState && blockTypeState.availableWrapperBlockTypes,
+    linkSupported: !!hyperlinkState,
+    linkDisabled: !hyperlinkState || !hyperlinkState.canInsertLink || !!hyperlinkState.activeLinkMark,
+    emojiDisabled: !emojiState || !emojiState.emojiProvider,
+    emojiProvider: providers.emojiProvider,
+    nativeStatusSupported: options.nativeStatusSupported,
+    horizontalRuleEnabled: options.horizontalRuleEnabled,
+    onInsertBlockType: handleInsertBlockType(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.codeBlock) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.insertCodeBlock, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$p = pluginInjectionApi.panel) === null || _pluginInjectionApi$p === void 0 ? void 0 : _pluginInjectionApi$p.actions.insertPanel, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$b = pluginInjectionApi.blockType) === null || _pluginInjectionApi$b === void 0 ? void 0 : _pluginInjectionApi$b.actions.insertBlockQuote),
+    onInsertMacroFromMacroBrowser: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$e = pluginInjectionApi.extension) === null || _pluginInjectionApi$e === void 0 ? void 0 : _pluginInjectionApi$e.actions.insertMacroFromMacroBrowser,
+    popupsMountPoint: popupsMountPoint,
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsScrollableElement: popupsScrollableElement,
+    insertMenuItems: options.insertMenuItems,
+    editorActions: editorActions,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    replacePlusMenuWithElementBrowser: options.replacePlusMenuWithElementBrowser,
+    showElementBrowserLink: options.showElementBrowserLink,
+    showSeparator: !isLastItem && toolbarSize <= _types.ToolbarSize.S,
+    featureFlags: featureFlags
+  });
+}

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/ui/ElementBrowser/InsertMenu.js

@@ -0,0 +1,169 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _elementBrowser = require("@atlaskit/editor-common/element-browser");
+var _quickInsert = require("@atlaskit/editor-common/quick-insert");
+var _uiReact = require("@atlaskit/editor-common/ui-react");
+var _theme = require("@atlaskit/theme");
+var _colors = require("@atlaskit/theme/colors");
+var _excluded = ["children"];
+/** @jsx jsx */
+// AFP-2532 TODO: Fix automatic suppressions below
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+var InsertMenu = function InsertMenu(_ref) {
+  var _pluginInjectionApi$q6, _pluginInjectionApi$q7;
+  var editorView = _ref.editorView,
+    dropdownItems = _ref.dropdownItems,
+    showElementBrowserLink = _ref.showElementBrowserLink,
+    onInsert = _ref.onInsert,
+    toggleVisiblity = _ref.toggleVisiblity,
+    pluginInjectionApi = _ref.pluginInjectionApi;
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    itemCount = _useState2[0],
+    setItemCount = _useState2[1];
+  var transform = (0, _react.useCallback)(function (item) {
+    return {
+      title: item.content,
+      description: item.tooltipDescription,
+      keyshortcut: item.shortcut,
+      icon: function icon() {
+        return getSvgIconForItem({
+          name: item.value.name
+        }) || item.elemBefore;
+      },
+      /**
+       * @note This transformed items action is only used when a quick insert item has been
+       * called from the quick insert menu and a search has not been performed.
+       */
+      action: function action() {
+        return onInsert({
+          item: item
+        });
+      },
+      // "insertInsertMenuItem" expects these 2 properties.
+      onClick: item.onClick,
+      value: item.value
+    };
+  }, [onInsert]);
+  var quickInsertDropdownItems = dropdownItems.map(transform);
+  var viewMoreItem = showElementBrowserLink ? quickInsertDropdownItems.pop() : undefined;
+  var onInsertItem = (0, _react.useCallback)(function (item) {
+    var _pluginInjectionApi$q;
+    toggleVisiblity();
+    if (!editorView.hasFocus()) {
+      editorView.focus();
+    }
+    pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 || _pluginInjectionApi$q.actions.insertItem(item)(editorView.state, editorView.dispatch);
+  }, [editorView, toggleVisiblity, pluginInjectionApi]);
+  var getItems = (0, _react.useCallback)(function (query, category) {
+    var result;
+    /**
+     * @warning The results if there is a query are not the same as the results if there is no query.
+     * For example: If you have a typed panel and then select the panel item then it will call a different action
+     * than is specified on the editor plugins quick insert
+     * @see above transform function for more details.
+     */
+    if (query) {
+      var _pluginInjectionApi$q2, _pluginInjectionApi$q3;
+      result = (_pluginInjectionApi$q2 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q3 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q3 === void 0 ? void 0 : _pluginInjectionApi$q3.actions.getSuggestions({
+        query: query,
+        category: category
+      })) !== null && _pluginInjectionApi$q2 !== void 0 ? _pluginInjectionApi$q2 : [];
+    } else {
+      var _pluginInjectionApi$q4, _pluginInjectionApi$q5;
+      var featuredQuickInsertSuggestions = (_pluginInjectionApi$q4 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q5 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q5 === void 0 ? void 0 : _pluginInjectionApi$q5.actions.getSuggestions({
+        category: category,
+        featuredItems: true
+      })) !== null && _pluginInjectionApi$q4 !== void 0 ? _pluginInjectionApi$q4 : [];
+      result = quickInsertDropdownItems.concat(featuredQuickInsertSuggestions);
+    }
+    setItemCount(result.length);
+    return result;
+  }, [pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q6 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q6 === void 0 ? void 0 : _pluginInjectionApi$q6.actions, quickInsertDropdownItems]);
+  var emptyStateHandler = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q7 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q7 === void 0 || (_pluginInjectionApi$q7 = _pluginInjectionApi$q7.sharedState.currentState()) === null || _pluginInjectionApi$q7 === void 0 ? void 0 : _pluginInjectionApi$q7.emptyStateHandler;
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    (0, _react2.jsx)("div", {
+      css: insertMenuWrapper(itemCount)
+    }, (0, _react2.jsx)(ElementBrowserWrapper, {
+      handleClickOutside: toggleVisiblity,
+      handleEscapeKeydown: toggleVisiblity,
+      closeOnTab: true
+    }, (0, _react2.jsx)(_elementBrowser.ElementBrowser, {
+      mode: "inline",
+      getItems: getItems,
+      emptyStateHandler: emptyStateHandler,
+      onInsertItem: onInsertItem,
+      showSearch: true,
+      showCategories: false
+      // On page resize we want the InlineElementBrowser to show updated tools/overflow items
+      ,
+      key: quickInsertDropdownItems.length,
+      viewMoreItem: viewMoreItem
+    })))
+  );
+};
+var getSvgIconForItem = function getSvgIconForItem(_ref2) {
+  var name = _ref2.name;
+  var Icon = {
+    codeblock: _quickInsert.IconCode,
+    panel: _quickInsert.IconPanel,
+    blockquote: _quickInsert.IconQuote,
+    decision: _quickInsert.IconDecision,
+    horizontalrule: _quickInsert.IconDivider,
+    expand: _quickInsert.IconExpand,
+    date: _quickInsert.IconDate,
+    status: _quickInsert.IconStatus
+  }[name];
+  return Icon ? (0, _react2.jsx)(Icon, {
+    label: ""
+  }) : undefined;
+};
+var getInsertMenuHeight = function getInsertMenuHeight(_ref3) {
+  var itemCount = _ref3.itemCount;
+  // Figure based on visuals to exclude the searchbar, padding/margin, and the ViewMore item.
+  var EXTRA_SPACE_EXCLUDING_ELEMENTLIST = 112;
+  if (itemCount > 0 && itemCount < 6) {
+    return itemCount * _elementBrowser.ELEMENT_ITEM_HEIGHT + EXTRA_SPACE_EXCLUDING_ELEMENTLIST;
+  }
+  return 560; // For showing 6 Elements.
+};
+
+var insertMenuWrapper = function insertMenuWrapper(itemCount) {
+  return (0, _react2.css)({
+    display: 'flex',
+    flexDirection: 'column',
+    width: '320px',
+    height: "".concat(getInsertMenuHeight({
+      itemCount: itemCount
+    }), "px"),
+    backgroundColor: "".concat("var(--ds-surface-overlay, ".concat(_colors.N0, ")")),
+    borderRadius: "".concat((0, _theme.borderRadius)(), "px"),
+    boxShadow: "".concat("var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_colors.N30A, ",\n    0 2px 1px ").concat(_colors.N30A, ",\n    0 0 20px -6px ").concat(_colors.N60A), ")"))
+  });
+};
+var flexWrapperStyles = (0, _react2.css)({
+  display: 'flex',
+  flex: 1,
+  boxSizing: 'border-box',
+  overflow: 'hidden'
+});
+var FlexWrapper = function FlexWrapper(props) {
+  var children = props.children,
+    divProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: flexWrapperStyles
+  }, divProps), children);
+};
+var ElementBrowserWrapper = (0, _uiReact.withReactEditorViewOuterListeners)(FlexWrapper);
+var _default = exports.default = InsertMenu;

package/dist/cjs/ui/ElementBrowser/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/ui/ToolbarInsertBlock/block-insert-element-browser.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BlockInsertElementBrowser = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ui = require("@atlaskit/editor-common/ui");
+var _InsertMenu = _interopRequireDefault(require("../ElementBrowser/InsertMenu"));
+var _dropdownButton = require("./dropdown-button");
+var BlockInsertElementBrowser = exports.BlockInsertElementBrowser = function BlockInsertElementBrowser(props) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, props.open && /*#__PURE__*/_react.default.createElement(_ui.Popup, {
+    target: props.plusButtonRef,
+    fitHeight: 500,
+    fitWidth: 350,
+    offset: [0, 3],
+    mountTo: props.popupsMountPoint,
+    boundariesElement: props.popupsBoundariesElement,
+    scrollableElement: props.popupsScrollableElement,
+    preventOverflow: true,
+    alignX: "right"
+  }, /*#__PURE__*/_react.default.createElement(_InsertMenu.default, {
+    editorView: props.editorView,
+    dropdownItems: props.items,
+    onInsert: props.onInsert,
+    toggleVisiblity: props.togglePlusMenuVisibility,
+    showElementBrowserLink: props.showElementBrowserLink,
+    pluginInjectionApi: props.pluginInjectionApi
+  })), /*#__PURE__*/_react.default.createElement(_dropdownButton.DropDownButton, {
+    "aria-expanded": props.open,
+    "aria-haspopup": true,
+    handleRef: props.onRef,
+    selected: props.open,
+    disabled: props.disabled,
+    onClick: props.onClick,
+    onKeyDown: props.onKeyDown,
+    spacing: props.spacing,
+    label: props.label,
+    "aria-keyshortcuts": "/"
+  }));
+};

package/dist/cjs/ui/ToolbarInsertBlock/block-insert-menu-legacy.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BlockInsertMenuLegacy = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _dropdownButton = require("./dropdown-button");
+var BlockInsertMenuLegacy = exports.BlockInsertMenuLegacy = function BlockInsertMenuLegacy(props) {
+  var items = props.items;
+  var dropdownItems = _react.default.useMemo(function () {
+    return [{
+      items: items
+    }];
+  }, [items]);
+  return /*#__PURE__*/_react.default.createElement(_uiMenu.DropdownMenuWithKeyboardNavigation, {
+    items: dropdownItems,
+    onItemActivated: props.onItemActivated,
+    onOpenChange: props.onOpenChange,
+    mountTo: props.popupsMountPoint,
+    boundariesElement: props.popupsBoundariesElement,
+    scrollableElement: props.popupsScrollableElement,
+    isOpen: props.open,
+    fitHeight: 188,
+    fitWidth: 175,
+    zIndex: _editorSharedStyles.akEditorMenuZIndex
+  }, /*#__PURE__*/_react.default.createElement(_dropdownButton.DropDownButton, {
+    "aria-expanded": props.open,
+    "aria-haspopup": true,
+    handleRef: props.onRef,
+    selected: props.open,
+    disabled: props.disabled,
+    onClick: props.onClick,
+    onKeyDown: props.onKeyDown,
+    spacing: props.spacing,
+    label: props.label,
+    "aria-keyshortcuts": "/"
+  }));
+};

package/dist/cjs/ui/ToolbarInsertBlock/block-insert-menu.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BlockInsertMenu = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _blockInsertElementBrowser = require("./block-insert-element-browser");
+var _blockInsertMenuLegacy = require("./block-insert-menu-legacy");
+var _dropdownButton = require("./dropdown-button");
+var BlockInsertMenu = exports.BlockInsertMenu = function BlockInsertMenu(props) {
+  if (props.items.length === 0) {
+    return null;
+  }
+  if (props.disabled) {
+    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_dropdownButton.DropDownButton, {
+      "aria-expanded": props.open,
+      "aria-haspopup": true,
+      handleRef: props.onRef,
+      selected: props.open,
+      disabled: props.disabled,
+      onClick: props.onClick,
+      onKeyDown: props.onKeyDown,
+      spacing: props.spacing,
+      label: props.label,
+      "aria-keyshortcuts": "/"
+    }));
+  }
+  if (props.replacePlusMenuWithElementBrowser) {
+    return /*#__PURE__*/_react.default.createElement(_blockInsertElementBrowser.BlockInsertElementBrowser, {
+      disabled: props.disabled,
+      editorView: props.editorView,
+      items: props.items,
+      label: props.label,
+      onClick: props.onClick,
+      onKeyDown: props.onKeyDown,
+      onInsert: props.onInsert,
+      onRef: props.onPlusButtonRef,
+      open: props.open,
+      plusButtonRef: props.plusButtonRef,
+      popupsBoundariesElement: props.popupsBoundariesElement,
+      popupsMountPoint: props.popupsMountPoint,
+      popupsScrollableElement: props.popupsScrollableElement,
+      spacing: props.spacing,
+      togglePlusMenuVisibility: props.togglePlusMenuVisibility,
+      showElementBrowserLink: props.showElementBrowserLink,
+      pluginInjectionApi: props.pluginInjectionApi
+    });
+  }
+  return /*#__PURE__*/_react.default.createElement(_blockInsertMenuLegacy.BlockInsertMenuLegacy, {
+    disabled: props.disabled,
+    items: props.items,
+    label: props.label,
+    onClick: props.onClick,
+    onKeyDown: props.onKeyDown,
+    onItemActivated: props.onItemActivated,
+    onOpenChange: props.onOpenChange,
+    onRef: props.onRef,
+    open: props.open,
+    popupsBoundariesElement: props.popupsBoundariesElement,
+    popupsMountPoint: props.popupsMountPoint,
+    popupsScrollableElement: props.popupsScrollableElement,
+    spacing: props.spacing
+  });
+};