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

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

@@ -0,0 +1,202 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import memoizeOne from 'memoize-one';
+import { addLink, getAriaKeyshortcuts, toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
+import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
+import ExpandNodeIcon from '@atlaskit/icon/glyph/chevron-right-circle';
+import CodeIcon from '@atlaskit/icon/glyph/editor/code';
+import DateIcon from '@atlaskit/icon/glyph/editor/date';
+import DecisionIcon from '@atlaskit/icon/glyph/editor/decision';
+import EmojiIcon from '@atlaskit/icon/glyph/editor/emoji';
+import HorizontalRuleIcon from '@atlaskit/icon/glyph/editor/horizontal-rule';
+import EditorImageIcon from '@atlaskit/icon/glyph/editor/image';
+import InfoIcon from '@atlaskit/icon/glyph/editor/info';
+import LayoutTwoEqualIcon from '@atlaskit/icon/glyph/editor/layout-two-equal';
+import LinkIcon from '@atlaskit/icon/glyph/editor/link';
+import MentionIcon from '@atlaskit/icon/glyph/editor/mention';
+import EditorMoreIcon from '@atlaskit/icon/glyph/editor/more';
+import TableIcon from '@atlaskit/icon/glyph/editor/table';
+import TaskIcon from '@atlaskit/icon/glyph/editor/task';
+import PlaceholderTextIcon from '@atlaskit/icon/glyph/media-services/text';
+import QuoteIcon from '@atlaskit/icon/glyph/quote';
+import StatusIcon from '@atlaskit/icon/glyph/status';
+import { shallowEquals } from './shallow-equals';
+const from = init => ({
+  content: init.content,
+  tooltipDescription: init.tooltipDescription,
+  value: {
+    name: init.name
+  },
+  elemBefore: jsx(init.Icon, {
+    label: init.content
+  }),
+  elemAfter: init.shortcut ?
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+  jsx("div", {
+    css: shortcutStyle
+  }, init.shortcut) : undefined,
+  'aria-label': init.shortcut ? init.content + ' ' + init.shortcut : init.content,
+  'aria-haspopup': init['aria-haspopup'],
+  'aria-keyshortcuts': init['aria-keyshortcuts'],
+  shortcut: init.shortcut,
+  isDisabled: init.disabled
+});
+const mem = fn => memoizeOne(fn, shallowEquals);
+export const action = mem(init => {
+  return from({
+    content: init.content,
+    tooltipDescription: init.tooltipDescription,
+    disabled: init.disabled,
+    name: 'action',
+    shortcut: '[]',
+    Icon: TaskIcon,
+    'aria-keyshortcuts': '[ ] Space'
+  });
+});
+export const link = mem(init => from({
+  content: init.content,
+  tooltipDescription: init.tooltipDescription,
+  disabled: init.disabled,
+  name: 'link',
+  shortcut: tooltip(addLink),
+  Icon: LinkIcon,
+  'aria-haspopup': init['aria-haspopup'],
+  'aria-keyshortcuts': getAriaKeyshortcuts(addLink)
+}));
+export const media = mem(init => from({
+  content: init.content,
+  tooltipDescription: init.tooltipDescription,
+  disabled: init.disabled,
+  name: 'media',
+  Icon: EditorImageIcon
+}));
+export const imageUpload = mem(init => from({
+  content: init.content,
+  tooltipDescription: init.tooltipDescription,
+  disabled: init.disabled,
+  name: 'image upload',
+  Icon: EditorImageIcon
+}));
+export const mention = mem(init => from({
+  content: init.content,
+  tooltipDescription: init.tooltipDescription,
+  disabled: init.disabled,
+  name: 'mention',
+  Icon: MentionIcon,
+  shortcut: '@',
+  'aria-haspopup': init['aria-haspopup'],
+  'aria-keyshortcuts': 'Shift+2 Space'
+}));
+export const emoji = mem(init => from({
+  content: init.content,
+  tooltipDescription: init.tooltipDescription,
+  disabled: init.disabled,
+  name: 'emoji',
+  Icon: EmojiIcon,
+  shortcut: ':',
+  'aria-haspopup': init['aria-haspopup'],
+  'aria-keyshortcuts': 'Shift+;'
+}));
+export const table = mem(init => from({
+  content: init.content,
+  tooltipDescription: init.tooltipDescription,
+  disabled: init.disabled,
+  name: 'table',
+  Icon: TableIcon,
+  shortcut: tooltip(toggleTable),
+  'aria-keyshortcuts': getAriaKeyshortcuts(toggleTable)
+}));
+export const layout = mem(init => from({
+  content: init.content,
+  tooltipDescription: init.tooltipDescription,
+  disabled: init.disabled,
+  name: 'layout',
+  Icon: LayoutTwoEqualIcon
+}));
+export const codeblock = mem(init => from({
+  content: init.content,
+  tooltipDescription: init.tooltipDescription,
+  disabled: init.disabled,
+  name: 'codeblock',
+  Icon: CodeIcon,
+  shortcut: init.shortcut,
+  'aria-keyshortcuts': getAriaKeyshortcuts(init.shortcut)
+}));
+export const panel = mem(init => from({
+  content: init.content,
+  tooltipDescription: init.tooltipDescription,
+  disabled: init.disabled,
+  name: 'panel',
+  Icon: InfoIcon,
+  shortcut: init.shortcut,
+  'aria-keyshortcuts': getAriaKeyshortcuts(init.shortcut)
+}));
+export const blockquote = mem(init => from({
+  content: init.content,
+  tooltipDescription: init.tooltipDescription,
+  disabled: init.disabled,
+  name: 'blockquote',
+  Icon: QuoteIcon,
+  shortcut: init.shortcut,
+  'aria-keyshortcuts': 'Shift+. Space'
+}));
+export const decision = mem(init => from({
+  content: init.content,
+  tooltipDescription: init.tooltipDescription,
+  disabled: init.disabled,
+  name: 'decision',
+  Icon: DecisionIcon,
+  shortcut: '<>',
+  'aria-keyshortcuts': 'Shift+, Shift+. Space'
+}));
+export const horizontalrule = mem(init => from({
+  content: init.content,
+  tooltipDescription: init.tooltipDescription,
+  disabled: init.disabled,
+  name: 'horizontalrule',
+  Icon: HorizontalRuleIcon,
+  shortcut: '---',
+  'aria-keyshortcuts': '- - -'
+}));
+export const expand = mem(init => from({
+  content: init.content,
+  tooltipDescription: init.tooltipDescription,
+  disabled: init.disabled,
+  name: 'expand',
+  Icon: ExpandNodeIcon
+}));
+export const date = mem(init => from({
+  content: init.content,
+  tooltipDescription: init.tooltipDescription,
+  disabled: init.disabled,
+  name: 'date',
+  Icon: DateIcon,
+  shortcut: '//',
+  'aria-keyshortcuts': '/ / Enter'
+}));
+export const placeholder = mem(init => from({
+  content: init.content,
+  tooltipDescription: init.tooltipDescription,
+  disabled: init.disabled,
+  name: 'placeholder text',
+  Icon: () => jsx(PlaceholderTextIcon, {
+    label: ""
+  })
+}));
+export const status = mem(init => from({
+  content: init.content,
+  tooltipDescription: init.tooltipDescription,
+  disabled: init.disabled,
+  name: 'status',
+  Icon: StatusIcon
+}));
+export const more = mem(init => from({
+  content: init.content,
+  tooltipDescription: init.tooltipDescription,
+  disabled: init.disabled,
+  name: 'macro',
+  Icon: () => jsx(EditorMoreIcon, {
+    label: ""
+  })
+}));

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

@@ -0,0 +1 @@
+export { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';

package/dist/es2019/ui/ToolbarInsertBlock/shallow-equals.js

@@ -0,0 +1,8 @@
+export const shallowEquals = ([aRaw], [bRaw]) => {
+  const a = aRaw;
+  const b = bRaw;
+  return !Object.keys(a).some(key => {
+    const k = key;
+    return a[k] !== b[k];
+  });
+};

package/dist/es2019/ui/ToolbarInsertBlock/sort-items.js

@@ -0,0 +1,22 @@
+const endPositionNames = ['macro-browser', 'slash-onboarding'];
+const isMacro = item => typeof item.content === 'string' && item.content.includes('macro');
+export const sortItems = items => {
+  return items.sort((a, b) => {
+    if (endPositionNames.includes(a.value.name) && endPositionNames.includes(b.value.name)) {
+      return endPositionNames.indexOf(a.value.name) - endPositionNames.indexOf(b.value.name);
+    }
+    if (endPositionNames.includes(b.value.name)) {
+      return -1;
+    }
+    if (endPositionNames.includes(a.value.name)) {
+      return 1;
+    }
+    if (isMacro(a) && !isMacro(b)) {
+      return 1;
+    }
+    if (isMacro(b) && !isMacro(a)) {
+      return -1;
+    }
+    return a.content < b.content ? -1 : 1;
+  });
+};

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

@@ -0,0 +1,16 @@
+import { css } from '@emotion/react';
+export const triggerWrapper = css`
+  width: 42px;
+
+  display: flex;
+  align-items: center;
+
+  > div,
+  > span {
+    display: flex;
+  }
+
+  > div > div {
+    display: flex;
+  }
+`;

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

@@ -0,0 +1 @@
+export {};

package/dist/esm/index.js

@@ -1 +1 @@
-export {};
+export { insertBlockPlugin } from './plugin';

package/dist/esm/plugin.js

@@ -0,0 +1,157 @@
+import React from 'react';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { WithProviders } from '@atlaskit/editor-common/provider-factory';
+import { ToolbarSize } from '@atlaskit/editor-common/types';
+import { BLOCK_QUOTE, CODE_BLOCK, PANEL } from '@atlaskit/editor-plugin-block-type/consts';
+import ToolbarInsertBlock from './ui/ToolbarInsertBlock';
+var toolbarSizeToButtons = function toolbarSizeToButtons(toolbarSize) {
+  switch (toolbarSize) {
+    case ToolbarSize.XXL:
+    case ToolbarSize.XL:
+    case ToolbarSize.L:
+    case ToolbarSize.M:
+      return 7;
+    case 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 === CODE_BLOCK.name && insertCodeBlock) {
+      return insertCodeBlock(INPUT_METHOD.TOOLBAR);
+    }
+    if (name === PANEL.name && insertPanel) {
+      return insertPanel(INPUT_METHOD.TOOLBAR);
+    }
+    if (name === BLOCK_QUOTE.name && insertBlockQuote) {
+      return insertBlockQuote(INPUT_METHOD.TOOLBAR);
+    }
+    return function () {
+      return false;
+    };
+  };
+}
+export var 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.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.createElement(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 = 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.createElement(ToolbarInsertBlock, {
+    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 <= ToolbarSize.S,
+    featureFlags: featureFlags
+  });
+}

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,160 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["children"];
+/** @jsx jsx */
+
+import { useCallback, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { ELEMENT_ITEM_HEIGHT, ElementBrowser } from '@atlaskit/editor-common/element-browser';
+import { IconCode, IconDate, IconDecision, IconDivider, IconExpand, IconPanel, IconQuote, IconStatus } from '@atlaskit/editor-common/quick-insert';
+import { withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
+// AFP-2532 TODO: Fix automatic suppressions below
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+import { borderRadius } from '@atlaskit/theme';
+import { N0, N30A, N60A } from '@atlaskit/theme/colors';
+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 = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    itemCount = _useState2[0],
+    setItemCount = _useState2[1];
+  var transform = 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 = useCallback(function (item) {
+    var _pluginInjectionApi$q;
+    toggleVisiblity();
+    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 = 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
+    jsx("div", {
+      css: insertMenuWrapper(itemCount)
+    }, jsx(ElementBrowserWrapper, {
+      handleClickOutside: toggleVisiblity,
+      handleEscapeKeydown: toggleVisiblity,
+      closeOnTab: true
+    }, jsx(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: IconCode,
+    panel: IconPanel,
+    blockquote: IconQuote,
+    decision: IconDecision,
+    horizontalrule: IconDivider,
+    expand: IconExpand,
+    date: IconDate,
+    status: IconStatus
+  }[name];
+  return Icon ? 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 * ELEMENT_ITEM_HEIGHT + EXTRA_SPACE_EXCLUDING_ELEMENTLIST;
+  }
+  return 560; // For showing 6 Elements.
+};
+
+var insertMenuWrapper = function insertMenuWrapper(itemCount) {
+  return css({
+    display: 'flex',
+    flexDirection: 'column',
+    width: '320px',
+    height: "".concat(getInsertMenuHeight({
+      itemCount: itemCount
+    }), "px"),
+    backgroundColor: "".concat("var(--ds-surface-overlay, ".concat(N0, ")")),
+    borderRadius: "".concat(borderRadius(), "px"),
+    boxShadow: "".concat("var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(N30A, ",\n    0 2px 1px ").concat(N30A, ",\n    0 0 20px -6px ").concat(N60A), ")"))
+  });
+};
+var flexWrapperStyles = css({
+  display: 'flex',
+  flex: 1,
+  boxSizing: 'border-box',
+  overflow: 'hidden'
+});
+var FlexWrapper = function FlexWrapper(props) {
+  var children = props.children,
+    divProps = _objectWithoutProperties(props, _excluded);
+  return jsx("div", _extends({
+    css: flexWrapperStyles
+  }, divProps), children);
+};
+var ElementBrowserWrapper = withOuterListeners(FlexWrapper);
+export default InsertMenu;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Popup } from '@atlaskit/editor-common/ui';
+import InsertMenu from '../ElementBrowser/InsertMenu';
+import { DropDownButton } from './dropdown-button';
+export var BlockInsertElementBrowser = function BlockInsertElementBrowser(props) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, props.open && /*#__PURE__*/React.createElement(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.createElement(InsertMenu, {
+    editorView: props.editorView,
+    dropdownItems: props.items,
+    onInsert: props.onInsert,
+    toggleVisiblity: props.togglePlusMenuVisibility,
+    showElementBrowserLink: props.showElementBrowserLink,
+    pluginInjectionApi: props.pluginInjectionApi
+  })), /*#__PURE__*/React.createElement(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/esm/ui/ToolbarInsertBlock/block-insert-menu-legacy.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { DropdownMenuWithKeyboardNavigation as DropdownMenu } from '@atlaskit/editor-common/ui-menu';
+import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
+import { DropDownButton } from './dropdown-button';
+export var BlockInsertMenuLegacy = function BlockInsertMenuLegacy(props) {
+  var items = props.items;
+  var dropdownItems = React.useMemo(function () {
+    return [{
+      items: items
+    }];
+  }, [items]);
+  return /*#__PURE__*/React.createElement(DropdownMenu, {
+    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: akEditorMenuZIndex
+  }, /*#__PURE__*/React.createElement(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": "/"
+  }));
+};