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

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

@@ -0,0 +1,252 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.table = exports.status = exports.placeholder = exports.panel = exports.more = exports.mention = exports.media = exports.link = exports.layout = exports.imageUpload = exports.horizontalrule = exports.expand = exports.emoji = exports.decision = exports.date = exports.codeblock = exports.blockquote = exports.action = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
+var _chevronRightCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right-circle"));
+var _code = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/code"));
+var _date = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/date"));
+var _decision = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/decision"));
+var _emoji = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/emoji"));
+var _horizontalRule = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/horizontal-rule"));
+var _image = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/image"));
+var _info = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/info"));
+var _layoutTwoEqual = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-two-equal"));
+var _link = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/link"));
+var _mention = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/mention"));
+var _more = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/more"));
+var _table = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/table"));
+var _task = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/task"));
+var _text = _interopRequireDefault(require("@atlaskit/icon/glyph/media-services/text"));
+var _quote = _interopRequireDefault(require("@atlaskit/icon/glyph/quote"));
+var _status = _interopRequireDefault(require("@atlaskit/icon/glyph/status"));
+var _shallowEquals = require("./shallow-equals");
+/** @jsx jsx */
+
+var from = function from(init) {
+  return {
+    content: init.content,
+    tooltipDescription: init.tooltipDescription,
+    value: {
+      name: init.name
+    },
+    elemBefore: (0, _react2.jsx)(init.Icon, {
+      label: init.content
+    }),
+    elemAfter: init.shortcut ?
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    (0, _react2.jsx)("div", {
+      css: _shortcut.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
+  };
+};
+var mem = function mem(fn) {
+  return (0, _memoizeOne.default)(fn, _shallowEquals.shallowEquals);
+};
+var action = exports.action = mem(function (init) {
+  return from({
+    content: init.content,
+    tooltipDescription: init.tooltipDescription,
+    disabled: init.disabled,
+    name: 'action',
+    shortcut: '[]',
+    Icon: _task.default,
+    'aria-keyshortcuts': '[ ] Space'
+  });
+});
+var link = exports.link = mem(function (init) {
+  return from({
+    content: init.content,
+    tooltipDescription: init.tooltipDescription,
+    disabled: init.disabled,
+    name: 'link',
+    shortcut: (0, _keymaps.tooltip)(_keymaps.addLink),
+    Icon: _link.default,
+    'aria-haspopup': init['aria-haspopup'],
+    'aria-keyshortcuts': (0, _keymaps.getAriaKeyshortcuts)(_keymaps.addLink)
+  });
+});
+var media = exports.media = mem(function (init) {
+  return from({
+    content: init.content,
+    tooltipDescription: init.tooltipDescription,
+    disabled: init.disabled,
+    name: 'media',
+    Icon: _image.default
+  });
+});
+var imageUpload = exports.imageUpload = mem(function (init) {
+  return from({
+    content: init.content,
+    tooltipDescription: init.tooltipDescription,
+    disabled: init.disabled,
+    name: 'image upload',
+    Icon: _image.default
+  });
+});
+var mention = exports.mention = mem(function (init) {
+  return from({
+    content: init.content,
+    tooltipDescription: init.tooltipDescription,
+    disabled: init.disabled,
+    name: 'mention',
+    Icon: _mention.default,
+    shortcut: '@',
+    'aria-haspopup': init['aria-haspopup'],
+    'aria-keyshortcuts': 'Shift+2 Space'
+  });
+});
+var emoji = exports.emoji = mem(function (init) {
+  return from({
+    content: init.content,
+    tooltipDescription: init.tooltipDescription,
+    disabled: init.disabled,
+    name: 'emoji',
+    Icon: _emoji.default,
+    shortcut: ':',
+    'aria-haspopup': init['aria-haspopup'],
+    'aria-keyshortcuts': 'Shift+;'
+  });
+});
+var table = exports.table = mem(function (init) {
+  return from({
+    content: init.content,
+    tooltipDescription: init.tooltipDescription,
+    disabled: init.disabled,
+    name: 'table',
+    Icon: _table.default,
+    shortcut: (0, _keymaps.tooltip)(_keymaps.toggleTable),
+    'aria-keyshortcuts': (0, _keymaps.getAriaKeyshortcuts)(_keymaps.toggleTable)
+  });
+});
+var layout = exports.layout = mem(function (init) {
+  return from({
+    content: init.content,
+    tooltipDescription: init.tooltipDescription,
+    disabled: init.disabled,
+    name: 'layout',
+    Icon: _layoutTwoEqual.default
+  });
+});
+var codeblock = exports.codeblock = mem(function (init) {
+  return from({
+    content: init.content,
+    tooltipDescription: init.tooltipDescription,
+    disabled: init.disabled,
+    name: 'codeblock',
+    Icon: _code.default,
+    shortcut: init.shortcut,
+    'aria-keyshortcuts': (0, _keymaps.getAriaKeyshortcuts)(init.shortcut)
+  });
+});
+var panel = exports.panel = mem(function (init) {
+  return from({
+    content: init.content,
+    tooltipDescription: init.tooltipDescription,
+    disabled: init.disabled,
+    name: 'panel',
+    Icon: _info.default,
+    shortcut: init.shortcut,
+    'aria-keyshortcuts': (0, _keymaps.getAriaKeyshortcuts)(init.shortcut)
+  });
+});
+var blockquote = exports.blockquote = mem(function (init) {
+  return from({
+    content: init.content,
+    tooltipDescription: init.tooltipDescription,
+    disabled: init.disabled,
+    name: 'blockquote',
+    Icon: _quote.default,
+    shortcut: init.shortcut,
+    'aria-keyshortcuts': 'Shift+. Space'
+  });
+});
+var decision = exports.decision = mem(function (init) {
+  return from({
+    content: init.content,
+    tooltipDescription: init.tooltipDescription,
+    disabled: init.disabled,
+    name: 'decision',
+    Icon: _decision.default,
+    shortcut: '<>',
+    'aria-keyshortcuts': 'Shift+, Shift+. Space'
+  });
+});
+var horizontalrule = exports.horizontalrule = mem(function (init) {
+  return from({
+    content: init.content,
+    tooltipDescription: init.tooltipDescription,
+    disabled: init.disabled,
+    name: 'horizontalrule',
+    Icon: _horizontalRule.default,
+    shortcut: '---',
+    'aria-keyshortcuts': '- - -'
+  });
+});
+var expand = exports.expand = mem(function (init) {
+  return from({
+    content: init.content,
+    tooltipDescription: init.tooltipDescription,
+    disabled: init.disabled,
+    name: 'expand',
+    Icon: _chevronRightCircle.default
+  });
+});
+var date = exports.date = mem(function (init) {
+  return from({
+    content: init.content,
+    tooltipDescription: init.tooltipDescription,
+    disabled: init.disabled,
+    name: 'date',
+    Icon: _date.default,
+    shortcut: '//',
+    'aria-keyshortcuts': '/ / Enter'
+  });
+});
+var placeholder = exports.placeholder = mem(function (init) {
+  return from({
+    content: init.content,
+    tooltipDescription: init.tooltipDescription,
+    disabled: init.disabled,
+    name: 'placeholder text',
+    Icon: function Icon() {
+      return (0, _react2.jsx)(_text.default, {
+        label: ""
+      });
+    }
+  });
+});
+var status = exports.status = mem(function (init) {
+  return from({
+    content: init.content,
+    tooltipDescription: init.tooltipDescription,
+    disabled: init.disabled,
+    name: 'status',
+    Icon: _status.default
+  });
+});
+var more = exports.more = mem(function (init) {
+  return from({
+    content: init.content,
+    tooltipDescription: init.tooltipDescription,
+    disabled: init.disabled,
+    name: 'macro',
+    Icon: function Icon() {
+      return (0, _react2.jsx)(_more.default, {
+        label: ""
+      });
+    }
+  });
+});

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "messages", {
+  enumerable: true,
+  get: function get() {
+    return _messages.toolbarInsertBlockMessages;
+  }
+});
+var _messages = require("@atlaskit/editor-common/messages");

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

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shallowEquals = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var shallowEquals = exports.shallowEquals = function shallowEquals(_ref, _ref2) {
+  var _ref3 = (0, _slicedToArray2.default)(_ref, 1),
+    aRaw = _ref3[0];
+  var _ref4 = (0, _slicedToArray2.default)(_ref2, 1),
+    bRaw = _ref4[0];
+  var a = aRaw;
+  var b = bRaw;
+  return !Object.keys(a).some(function (key) {
+    var k = key;
+    return a[k] !== b[k];
+  });
+};

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

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sortItems = void 0;
+var endPositionNames = ['macro-browser', 'slash-onboarding'];
+var isMacro = function isMacro(item) {
+  return typeof item.content === 'string' && item.content.includes('macro');
+};
+var sortItems = exports.sortItems = function sortItems(items) {
+  return items.sort(function (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/cjs/ui/ToolbarInsertBlock/styles.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.triggerWrapper = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _templateObject;
+var triggerWrapper = exports.triggerWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 42px;\n\n  display: flex;\n  align-items: center;\n\n  > div,\n  > span {\n    display: flex;\n  }\n\n  > div > div {\n    display: flex;\n  }\n"])));

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

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

package/dist/es2019/index.js

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

package/dist/es2019/plugin.js

@@ -0,0 +1,158 @@
+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';
+const 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 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 () => false;
+  };
+}
+export const insertBlockPlugin = ({
+  config: options = {},
+  api
+}) => {
+  var _api$featureFlags;
+  const featureFlags = (api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
+  return {
+    name: 'insertBlock',
+    primaryToolbarComponent({
+      editorView,
+      editorActions,
+      dispatchAnalyticsEvent,
+      providerFactory,
+      popupsMountPoint,
+      popupsBoundariesElement,
+      popupsScrollableElement,
+      toolbarSize,
+      disabled,
+      isToolbarReducedSpacing,
+      isLastItem
+    }) {
+      const 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({
+  editorView,
+  editorActions,
+  dispatchAnalyticsEvent,
+  popupsMountPoint,
+  popupsBoundariesElement,
+  popupsScrollableElement,
+  toolbarSize,
+  disabled,
+  isToolbarReducedSpacing,
+  isLastItem,
+  providers,
+  pluginInjectionApi,
+  options,
+  featureFlags
+}) {
+  var _ref, _ref2, _pluginInjectionApi$i, _pluginInjectionApi$c, _pluginInjectionApi$p, _pluginInjectionApi$b, _pluginInjectionApi$e;
+  const buttons = toolbarSizeToButtons(toolbarSize);
+  const {
+    dateState,
+    hyperlinkState,
+    imageUploadState,
+    mentionState,
+    emojiState,
+    blockTypeState,
+    mediaState,
+    typeAheadState,
+    placeholderTextState
+  } = useSharedPluginState(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText']);
+  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: (_ref = mediaState && mediaState.allowsUploads) !== null && _ref !== void 0 ? _ref : undefined,
+    onShowMediaPicker: (_ref2 = mediaState && mediaState.showMediaPicker) !== null && _ref2 !== void 0 ? _ref2 : 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 ? 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 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.codeBlock) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.insertCodeBlock, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$p = pluginInjectionApi.panel) === null || _pluginInjectionApi$p === void 0 ? void 0 : _pluginInjectionApi$p.actions.insertPanel, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$b = pluginInjectionApi.blockType) === null || _pluginInjectionApi$b === void 0 ? void 0 : _pluginInjectionApi$b.actions.insertBlockQuote),
+    onInsertMacroFromMacroBrowser: pluginInjectionApi === null || pluginInjectionApi === void 0 ? 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/es2019/types.js

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

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

@@ -0,0 +1,156 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @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';
+const InsertMenu = ({
+  editorView,
+  dropdownItems,
+  showElementBrowserLink,
+  onInsert,
+  toggleVisiblity,
+  pluginInjectionApi
+}) => {
+  var _pluginInjectionApi$q6, _pluginInjectionApi$q7, _pluginInjectionApi$q8;
+  const [itemCount, setItemCount] = useState(0);
+  const transform = useCallback(item => ({
+    title: item.content,
+    description: item.tooltipDescription,
+    keyshortcut: item.shortcut,
+    icon: () => 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: () => onInsert({
+      item
+    }),
+    // "insertInsertMenuItem" expects these 2 properties.
+    onClick: item.onClick,
+    value: item.value
+  }), [onInsert]);
+  const quickInsertDropdownItems = dropdownItems.map(transform);
+  const viewMoreItem = showElementBrowserLink ? quickInsertDropdownItems.pop() : undefined;
+  const onInsertItem = useCallback(item => {
+    var _pluginInjectionApi$q;
+    toggleVisiblity();
+    if (!editorView.hasFocus()) {
+      editorView.focus();
+    }
+    pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 ? void 0 : _pluginInjectionApi$q.actions.insertItem(item)(editorView.state, editorView.dispatch);
+  }, [editorView, toggleVisiblity, pluginInjectionApi]);
+  const getItems = useCallback((query, category) => {
+    let 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 ? void 0 : (_pluginInjectionApi$q3 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q3 === void 0 ? void 0 : _pluginInjectionApi$q3.actions.getSuggestions({
+        query,
+        category
+      })) !== null && _pluginInjectionApi$q2 !== void 0 ? _pluginInjectionApi$q2 : [];
+    } else {
+      var _pluginInjectionApi$q4, _pluginInjectionApi$q5;
+      const featuredQuickInsertSuggestions = (_pluginInjectionApi$q4 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q5 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q5 === void 0 ? void 0 : _pluginInjectionApi$q5.actions.getSuggestions({
+        category,
+        featuredItems: true
+      })) !== null && _pluginInjectionApi$q4 !== void 0 ? _pluginInjectionApi$q4 : [];
+      result = quickInsertDropdownItems.concat(featuredQuickInsertSuggestions);
+    }
+    setItemCount(result.length);
+    return result;
+  }, [pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q6 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q6 === void 0 ? void 0 : _pluginInjectionApi$q6.actions, quickInsertDropdownItems]);
+  const emptyStateHandler = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q7 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q7 === void 0 ? void 0 : (_pluginInjectionApi$q8 = _pluginInjectionApi$q7.sharedState.currentState()) === null || _pluginInjectionApi$q8 === void 0 ? void 0 : _pluginInjectionApi$q8.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
+    })))
+  );
+};
+const getSvgIconForItem = ({
+  name
+}) => {
+  const Icon = {
+    codeblock: IconCode,
+    panel: IconPanel,
+    blockquote: IconQuote,
+    decision: IconDecision,
+    horizontalrule: IconDivider,
+    expand: IconExpand,
+    date: IconDate,
+    status: IconStatus
+  }[name];
+  return Icon ? jsx(Icon, {
+    label: ""
+  }) : undefined;
+};
+const getInsertMenuHeight = ({
+  itemCount
+}) => {
+  // Figure based on visuals to exclude the searchbar, padding/margin, and the ViewMore item.
+  const 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.
+};
+
+const insertMenuWrapper = itemCount => css({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '320px',
+  height: `${getInsertMenuHeight({
+    itemCount
+  })}px`,
+  backgroundColor: `${`var(--ds-surface-overlay, ${N0})`}`,
+  borderRadius: `${borderRadius()}px`,
+  boxShadow: `${`var(--ds-shadow-overlay, ${`0 0 0 1px ${N30A},
+    0 2px 1px ${N30A},
+    0 0 20px -6px ${N60A}`})`}`
+});
+const flexWrapperStyles = css({
+  display: 'flex',
+  flex: 1,
+  boxSizing: 'border-box',
+  overflow: 'hidden'
+});
+const FlexWrapper = props => {
+  const {
+    children,
+    ...divProps
+  } = props;
+  return jsx("div", _extends({
+    css: flexWrapperStyles
+  }, divProps), children);
+};
+const ElementBrowserWrapper = withOuterListeners(FlexWrapper);
+export default InsertMenu;

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

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