@atlaskit/editor-plugin-quick-insert 13.0.1 → 13.1.0

package/dist/es2019/quickInsertPlugin.js

@@ -9,7 +9,7 @@ import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { createInsertItem, openElementBrowserModal } from './pm-plugins/commands';
+import { createInsertItem, openElementBrowser as openElementBrowserCommand, openElementBrowserModal } from './pm-plugins/commands';
 import { getQuickInsertOpenExperiencePlugin } from './pm-plugins/experiences/quick-insert-open-experience';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { getQuickInsertComponents } from './ui/getQuickInsertComponents';
@@ -86,8 +86,27 @@ export const quickInsertPlugin = ({
   };
   if (isExperimentEnabled('platform_editor_slash_command')) {
     var _api$uiControlRegistr;
-    api === null || api === void 0 ? void 0 : (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 ? void 0 : _api$uiControlRegistr.actions.register(getQuickInsertComponents());
+    api === null || api === void 0 ? void 0 : (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 ? void 0 : _api$uiControlRegistr.actions.register(getQuickInsertComponents({
+      api,
+      includeElementBrowserItems: (options === null || options === void 0 ? void 0 : options.enableElementBrowser) === true
+    }));
   }
+  const openElementBrowser = options => ({
+    tr
+  }) => {
+    if (fg('platform_editor_ease_of_use_metrics')) {
+      var _api$metrics;
+      api === null || api === void 0 ? void 0 : (_api$metrics = api.metrics) === null || _api$metrics === void 0 ? void 0 : _api$metrics.commands.handleIntentToStartEdit({
+        shouldStartTimer: false,
+        shouldPersistActiveSession: true
+      })({
+        tr
+      });
+    }
+    return openElementBrowserCommand(options)({
+      tr
+    });
+  };
   let intl;
   return {
     name: 'quickInsert',
@@ -146,7 +165,8 @@ export const quickInsertPlugin = ({
         lazyDefaultItems: quickInsertState.lazyDefaultItems,
         emptyStateHandler: quickInsertState.emptyStateHandler,
         providedItems: quickInsertState.providedItems,
-        isElementBrowserModalOpen: quickInsertState.isElementBrowserModalOpen
+        isElementBrowserModalOpen: quickInsertState.isElementBrowserModalOpen,
+        isElementBrowserOpen: quickInsertState.isElementBrowserOpen
       };
     },
     actions: {
@@ -192,12 +212,13 @@ export const quickInsertPlugin = ({
       }
     },
     commands: {
+      openElementBrowser,
       openElementBrowserModal: ({
         tr
       }) => {
         if (fg('platform_editor_ease_of_use_metrics')) {
-          var _api$metrics;
-          api === null || api === void 0 ? void 0 : (_api$metrics = api.metrics) === null || _api$metrics === void 0 ? void 0 : _api$metrics.commands.handleIntentToStartEdit({
+          var _api$metrics2;
+          api === null || api === void 0 ? void 0 : (_api$metrics2 = api.metrics) === null || _api$metrics2 === void 0 ? void 0 : _api$metrics2.commands.handleIntentToStartEdit({
             shouldStartTimer: false,
             shouldPersistActiveSession: true
           })({
@@ -274,6 +295,7 @@ function quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispat
       init() {
         return {
           isElementBrowserModalOpen: false,
+          isElementBrowserOpen: false,
           emptyStateHandler,
           // lazy so it doesn't run on editor initialization
           // memo here to avoid using a singleton cache, avoids editor

package/dist/es2019/ui/ModalElementBrowser/ModalElementBrowser.js

@@ -68,6 +68,7 @@ const ModalElementBrowser = props => {
     css: wrapperStyles
   }, jsx(ElementBrowser, {
     categories: getCategories(props.intl),
+    defaultCategory: props.defaultCategory,
     getItems: props.getItems,
     showSearch: true,
     showCategories: true,
@@ -76,7 +77,7 @@ const ModalElementBrowser = props => {
     onInsertItem: onInsertItem,
     emptyStateHandler: props.emptyStateHandler,
     autoFocusSearch: false
-  })), [props.intl, props.getItems, onSelectItem, onInsertItem, props.emptyStateHandler]);
+  })), [props.intl, props.defaultCategory, props.getItems, onSelectItem, onInsertItem, props.emptyStateHandler]);
   const label = intl.formatMessage(messages.browse);
   return jsx("div", {
     "data-editor-popup": true

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

@@ -2,8 +2,10 @@ import React, { useCallback } from 'react';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { closeElementBrowserModal } from '../../pm-plugins/commands';
+import { closeElementBrowser, closeElementBrowserModal } from '../../pm-plugins/commands';
+import { pluginKey } from '../../pm-plugins/plugin-key';
 import ModalElementBrowser from './ModalElementBrowser';
 const Modal = ({
   quickInsertState,
@@ -12,7 +14,8 @@ const Modal = ({
   helpUrl,
   insertItem,
   getSuggestions,
-  api
+  api,
+  defaultCategory
 }) => {
   const getItems = useCallback((query, category) => {
     var _getSuggestions$map, _getSuggestions;
@@ -39,22 +42,26 @@ const Modal = ({
   // Instead of adding the item immediately on insert item
   // We wait until modal close is complete, refocus the editor and then add the item
   const insertableItem = React.useRef(null);
+  const closeBrowser = useCallback(() => {
+    const closeCommand = isExperimentEnabled('platform_editor_slash_command') ? closeElementBrowser : closeElementBrowserModal;
+    closeCommand()(editorView.state, editorView.dispatch);
+  }, [editorView]);
   const onInsertItem = useCallback(item => {
-    closeElementBrowserModal()(editorView.state, editorView.dispatch);
+    closeBrowser();
     if (fg('platform_editor_ease_of_use_metrics')) {
       var _api$metrics;
       api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$metrics = api.metrics) === null || _api$metrics === void 0 ? void 0 : _api$metrics.commands.startActiveSessionTimer());
     }
     insertableItem.current = item;
-  }, [editorView, api]);
+  }, [closeBrowser, api]);
   const onClose = useCallback(() => {
-    closeElementBrowserModal()(editorView.state, editorView.dispatch);
+    closeBrowser();
     if (fg('platform_editor_ease_of_use_metrics')) {
       var _api$metrics2;
       api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$metrics2 = api.metrics) === null || _api$metrics2 === void 0 ? void 0 : _api$metrics2.commands.startActiveSessionTimer());
     }
     focusInEditor();
-  }, [editorView, focusInEditor, api]);
+  }, [closeBrowser, focusInEditor, api]);
   const onCloseComplete = useCallback(() => {
     if (!insertableItem.current) {
       focusInEditor();
@@ -66,10 +73,11 @@ const Modal = ({
     insertItem === null || insertItem === void 0 ? void 0 : insertItem(item, INPUT_METHOD.ELEMENT_BROWSER)(editorView.state, editorView.dispatch);
   }, [editorView, focusInEditor, insertItem]);
   return /*#__PURE__*/React.createElement(ModalElementBrowser, {
+    defaultCategory: defaultCategory,
     getItems: getItems,
     onInsertItem: onInsertItem,
     helpUrl: helpUrl,
-    isOpen: quickInsertState.isElementBrowserModalOpen || false,
+    isOpen: quickInsertState.isElementBrowserOpen || false,
     emptyStateHandler: quickInsertState.emptyStateHandler,
     onClose: onClose,
     onCloseComplete: onCloseComplete,
@@ -81,30 +89,31 @@ export default (({
   helpUrl,
   pluginInjectionAPI
 }) => {
-  var _pluginInjectionAPI$q, _pluginInjectionAPI$q2, _pluginInjectionAPI$q3, _pluginInjectionAPI$q4;
+  var _pluginKey$getState, _pluginInjectionAPI$q, _pluginInjectionAPI$q2, _pluginInjectionAPI$q3, _pluginInjectionAPI$q4;
   const {
     lazyDefaultItems,
     providedItems,
-    isElementBrowserModalOpen,
+    isElementBrowserOpen,
     emptyStateHandler,
     mode
   } = useSharedPluginStateWithSelector(pluginInjectionAPI, ['quickInsert', 'connectivity'], state => {
-    var _state$quickInsertSta, _state$quickInsertSta2, _state$quickInsertSta3, _state$quickInsertSta4, _state$connectivitySt;
+    var _state$quickInsertSta, _state$quickInsertSta2, _state$quickInsertSta3, _state$quickInsertSta4, _state$quickInsertSta5, _state$connectivitySt;
     return {
       lazyDefaultItems: (_state$quickInsertSta = state.quickInsertState) === null || _state$quickInsertSta === void 0 ? void 0 : _state$quickInsertSta.lazyDefaultItems,
       providedItems: (_state$quickInsertSta2 = state.quickInsertState) === null || _state$quickInsertSta2 === void 0 ? void 0 : _state$quickInsertSta2.providedItems,
-      isElementBrowserModalOpen: (_state$quickInsertSta3 = state.quickInsertState) === null || _state$quickInsertSta3 === void 0 ? void 0 : _state$quickInsertSta3.isElementBrowserModalOpen,
-      emptyStateHandler: (_state$quickInsertSta4 = state.quickInsertState) === null || _state$quickInsertSta4 === void 0 ? void 0 : _state$quickInsertSta4.emptyStateHandler,
+      isElementBrowserOpen: isExperimentEnabled('platform_editor_slash_command') ? (_state$quickInsertSta3 = state.quickInsertState) === null || _state$quickInsertSta3 === void 0 ? void 0 : _state$quickInsertSta3.isElementBrowserOpen : (_state$quickInsertSta4 = state.quickInsertState) === null || _state$quickInsertSta4 === void 0 ? void 0 : _state$quickInsertSta4.isElementBrowserModalOpen,
+      emptyStateHandler: (_state$quickInsertSta5 = state.quickInsertState) === null || _state$quickInsertSta5 === void 0 ? void 0 : _state$quickInsertSta5.emptyStateHandler,
       mode: (_state$connectivitySt = state.connectivityState) === null || _state$connectivitySt === void 0 ? void 0 : _state$connectivitySt.mode
     };
   });
-  return /*#__PURE__*/React.createElement(Modal
-  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-  , {
+  return /*#__PURE__*/React.createElement(Modal, {
+    defaultCategory: (_pluginKey$getState = pluginKey.getState(editorView.state)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.elementBrowserInitialCategory
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
     quickInsertState: {
       lazyDefaultItems,
       providedItems,
-      isElementBrowserModalOpen,
+      isElementBrowserOpen,
       emptyStateHandler
     },
     editorView: editorView,

package/dist/es2019/ui/QuickInsertMenuFooterItem.js

@@ -0,0 +1,31 @@
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { toolbarInsertBlockMessages } from '@atlaskit/editor-common/messages';
+import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
+import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
+export const QuickInsertMenuFooterItem = ({
+  api
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const onSelect = useCallback(({
+    insert
+  }) => {
+    var _api$quickInsert$comm, _api$quickInsert;
+    const tr = insert(undefined);
+    return (_api$quickInsert$comm = api === null || api === void 0 ? void 0 : (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 ? void 0 : _api$quickInsert.commands.openElementBrowser()({
+      tr
+    })) !== null && _api$quickInsert$comm !== void 0 ? _api$quickInsert$comm : tr;
+  }, [api]);
+  return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
+    ariaLabel: formatMessage(toolbarInsertBlockMessages.viewMoreAriaLabel),
+    iconBefore: /*#__PURE__*/React.createElement(ShowMoreHorizontalIcon, {
+      label: ""
+    }),
+    isDisabled: !(api !== null && api !== void 0 && api.quickInsert),
+    onSelect: onSelect,
+    shouldWrapIcon: false,
+    title: formatMessage(toolbarInsertBlockMessages.viewMore)
+  });
+};

package/dist/es2019/ui/QuickInsertSectionOverflowMenuItem.js

@@ -0,0 +1,32 @@
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { toolbarInsertBlockMessages } from '@atlaskit/editor-common/messages';
+import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
+import AddIcon from '@atlaskit/icon/core/add';
+export const QuickInsertSectionOverflowMenuItem = ({
+  api,
+  category
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const onSelect = useCallback(({
+    insert
+  }) => {
+    var _api$quickInsert$comm, _api$quickInsert;
+    const tr = insert(undefined);
+    return (_api$quickInsert$comm = api === null || api === void 0 ? void 0 : (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 ? void 0 : _api$quickInsert.commands.openElementBrowser({
+      category
+    })({
+      tr
+    })) !== null && _api$quickInsert$comm !== void 0 ? _api$quickInsert$comm : tr;
+  }, [api, category]);
+  return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
+    iconBefore: /*#__PURE__*/React.createElement(AddIcon, {
+      label: ""
+    }),
+    isDisabled: !(api !== null && api !== void 0 && api.quickInsert),
+    onSelect: onSelect,
+    title: formatMessage(toolbarInsertBlockMessages.viewMore)
+  });
+};

package/dist/es2019/ui/getQuickInsertComponents.js

@@ -1,10 +1,103 @@
-import { BLOCK_TEMPLATES_SECTION, DATA_AND_CHARTS_SECTION, EMBED_SECTION, MEDIA_SECTION, MENU, OTHER_SECTION, RECOMMENDED_SECTION, ROVO_SECTION, STRUCTURE_SECTION, TEXT_FORMATTING_SECTION } from '@atlaskit/editor-common/quick-insert/keys';
-import { QUICK_INSERT_MENU_RANK } from '@atlaskit/editor-common/quick-insert/rank';
-const sections = [RECOMMENDED_SECTION, STRUCTURE_SECTION, MEDIA_SECTION, EMBED_SECTION, TEXT_FORMATTING_SECTION, ROVO_SECTION, DATA_AND_CHARTS_SECTION, BLOCK_TEMPLATES_SECTION, OTHER_SECTION];
-export const getQuickInsertComponents = () => [MENU, ...sections.map(section => ({
-  ...section,
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { BLOCK_TEMPLATES_SECTION, DATA_AND_CHARTS_SECTION, EMBED_SECTION, MEDIA_SECTION, MENU, OTHER_SECTION, RECOMMENDED_SECTION, ROVO_SECTION, STRUCTURE_SECTION, TEXT_FORMATTING_SECTION, VIEW_ALL_ELEMENTS_MENU_ITEM } from '@atlaskit/editor-common/quick-insert/keys';
+import { QuickInsertMenuRoot } from '@atlaskit/editor-common/quick-insert/menu-root';
+import { QuickInsertMenuSection } from '@atlaskit/editor-common/quick-insert/menu-section';
+import { messages } from '@atlaskit/editor-common/quick-insert/messages';
+import { CATEGORY_VIEW_MORE_RANK, QUICK_INSERT_MENU_RANK } from '@atlaskit/editor-common/quick-insert/rank';
+import { getMenuFooterSectionKey } from '@atlaskit/editor-common/type-ahead-get-menu-footer-section-key';
+import { getSectionOverflowItemKey } from '@atlaskit/editor-common/type-ahead-get-section-overflow-item-key';
+import { QuickInsertMenuFooterItem } from './QuickInsertMenuFooterItem';
+import { QuickInsertSectionOverflowMenuItem } from './QuickInsertSectionOverflowMenuItem';
+const categories = [{
+  message: messages.categoryRecommended,
+  section: RECOMMENDED_SECTION
+}, {
+  message: messages.categoryStructure,
+  section: STRUCTURE_SECTION
+}, {
+  message: messages.categoryMedia,
+  section: MEDIA_SECTION
+}, {
+  message: messages.categoryEmbed,
+  section: EMBED_SECTION
+}, {
+  message: messages.categoryTextFormatting,
+  section: TEXT_FORMATTING_SECTION
+}, {
+  message: messages.categoryRovo,
+  section: ROVO_SECTION
+}, {
+  message: messages.categoryDataAndCharts,
+  section: DATA_AND_CHARTS_SECTION
+}, {
+  message: messages.categoryBlockTemplates,
+  section: BLOCK_TEMPLATES_SECTION
+}, {
+  message: messages.categoryOther,
+  section: OTHER_SECTION
+}];
+const createSectionComponent = message => {
+  const SectionComponent = ({
+    children
+  }) => {
+    const {
+      formatMessage
+    } = useIntl();
+    return /*#__PURE__*/React.createElement(QuickInsertMenuSection, {
+      title: formatMessage(message)
+    }, children);
+  };
+  return SectionComponent;
+};
+export const getQuickInsertComponents = ({
+  api,
+  includeElementBrowserItems
+}) => [{
+  key: MENU.key,
+  type: MENU.type,
+  component: QuickInsertMenuRoot
+}, ...categories.flatMap(({
+  message,
+  section
+}) => [{
+  key: section.key,
+  type: section.type,
   parents: [{
-    ...MENU,
+    key: MENU.key,
+    type: MENU.type,
     rank: QUICK_INSERT_MENU_RANK[section.key]
+  }],
+  component: createSectionComponent(message)
+}, ...(includeElementBrowserItems ? [{
+  key: getSectionOverflowItemKey(section.key),
+  type: 'menu-item',
+  parents: [{
+    key: section.key,
+    type: section.type,
+    rank: CATEGORY_VIEW_MORE_RANK
+  }],
+  component: () => /*#__PURE__*/React.createElement(QuickInsertSectionOverflowMenuItem, {
+    api,
+    category: section.key
+  })
+}] : [])]), ...(includeElementBrowserItems ? [{
+  key: getMenuFooterSectionKey(MENU.key),
+  type: 'menu-section',
+  parents: [{
+    key: MENU.key,
+    type: MENU.type,
+    rank: Number.MAX_SAFE_INTEGER
   }]
-}))];
+}, {
+  key: VIEW_ALL_ELEMENTS_MENU_ITEM.key,
+  type: VIEW_ALL_ELEMENTS_MENU_ITEM.type,
+  parents: [{
+    key: getMenuFooterSectionKey(MENU.key),
+    type: 'menu-section',
+    rank: 100
+  }],
+  component: () => /*#__PURE__*/React.createElement(QuickInsertMenuFooterItem, {
+    api
+  })
+}] : [])];

package/dist/esm/pm-plugins/commands/index.js

@@ -1,11 +1,43 @@
 import { insertSelectedItem } from '@atlaskit/editor-common/insert';
 import { pluginKey } from '../plugin-key';
-export var openElementBrowserModal = function openElementBrowserModal(_ref) {
-  var tr = _ref.tr;
+export var openElementBrowser = function openElementBrowser() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    category = _ref.category;
+  return function (_ref2) {
+    var tr = _ref2.tr;
+    return tr.setMeta(pluginKey, {
+      elementBrowserInitialCategory: category,
+      isElementBrowserOpen: true
+    });
+  };
+};
+export var closeElementBrowser = function closeElementBrowser() {
+  return function (state, dispatch) {
+    if (dispatch) {
+      dispatch(state.tr.setMeta(pluginKey, {
+        elementBrowserInitialCategory: undefined,
+        isElementBrowserOpen: false
+      }));
+    }
+    return true;
+  };
+};
+
+/**
+ * @private
+ * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-62138 Internal documentation for deprecation (no external access)} Tracked by EDITOR-8422. Use `openElementBrowser` instead.
+ */
+export var openElementBrowserModal = function openElementBrowserModal(_ref3) {
+  var tr = _ref3.tr;
   return tr.setMeta(pluginKey, {
     isElementBrowserModalOpen: true
   });
 };
+
+/**
+ * @private
+ * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-62138 Internal documentation for deprecation (no external access)} Tracked by EDITOR-8422. Use `closeElementBrowser` instead.
+ */
 export var closeElementBrowserModal = function closeElementBrowserModal() {
   return function (state, dispatch) {
     if (dispatch) {

package/dist/esm/quickInsertPlugin.js

@@ -15,7 +15,7 @@ import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { createInsertItem, openElementBrowserModal as _openElementBrowserModal } from './pm-plugins/commands';
+import { createInsertItem, openElementBrowser as openElementBrowserCommand, openElementBrowserModal as _openElementBrowserModal } from './pm-plugins/commands';
 import { getQuickInsertOpenExperiencePlugin } from './pm-plugins/experiences/quick-insert-open-experience';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { getQuickInsertComponents } from './ui/getQuickInsertComponents';
@@ -88,8 +88,28 @@ export var quickInsertPlugin = function quickInsertPlugin(_ref) {
   };
   if (isExperimentEnabled('platform_editor_slash_command')) {
     var _api$uiControlRegistr;
-    api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register(getQuickInsertComponents());
+    api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register(getQuickInsertComponents({
+      api: api,
+      includeElementBrowserItems: (options === null || options === void 0 ? void 0 : options.enableElementBrowser) === true
+    }));
   }
+  var openElementBrowser = function openElementBrowser(options) {
+    return function (_ref5) {
+      var tr = _ref5.tr;
+      if (fg('platform_editor_ease_of_use_metrics')) {
+        var _api$metrics;
+        api === null || api === void 0 || (_api$metrics = api.metrics) === null || _api$metrics === void 0 || _api$metrics.commands.handleIntentToStartEdit({
+          shouldStartTimer: false,
+          shouldPersistActiveSession: true
+        })({
+          tr: tr
+        });
+      }
+      return openElementBrowserCommand(options)({
+        tr: tr
+      });
+    };
+  };
   var intl;
   return {
     name: 'quickInsert',
@@ -97,10 +117,10 @@ export var quickInsertPlugin = function quickInsertPlugin(_ref) {
       return [{
         name: 'quickInsert',
         // It's important that this plugin is above TypeAheadPlugin
-        plugin: function plugin(_ref5) {
-          var providerFactory = _ref5.providerFactory,
-            getIntl = _ref5.getIntl,
-            dispatch = _ref5.dispatch;
+        plugin: function plugin(_ref6) {
+          var providerFactory = _ref6.providerFactory,
+            getIntl = _ref6.getIntl,
+            dispatch = _ref6.dispatch;
           return quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispatch, options === null || options === void 0 ? void 0 : options.emptyStateHandler);
         }
       }, {
@@ -119,10 +139,10 @@ export var quickInsertPlugin = function quickInsertPlugin(_ref) {
     pluginsOptions: {
       typeAhead: typeAhead
     },
-    contentComponent: function contentComponent(_ref6) {
-      var editorView = _ref6.editorView,
-        popupsMountPoint = _ref6.popupsMountPoint,
-        wrapperElement = _ref6.wrapperElement;
+    contentComponent: function contentComponent(_ref7) {
+      var editorView = _ref7.editorView,
+        popupsMountPoint = _ref7.popupsMountPoint,
+        wrapperElement = _ref7.wrapperElement;
       refs.popupsMountPoint = popupsMountPoint || undefined;
       refs.wrapperElement = wrapperElement || undefined;
       if (!editorView || isSSR()) {
@@ -150,7 +170,8 @@ export var quickInsertPlugin = function quickInsertPlugin(_ref) {
         lazyDefaultItems: quickInsertState.lazyDefaultItems,
         emptyStateHandler: quickInsertState.emptyStateHandler,
         providedItems: quickInsertState.providedItems,
-        isElementBrowserModalOpen: quickInsertState.isElementBrowserModalOpen
+        isElementBrowserModalOpen: quickInsertState.isElementBrowserModalOpen,
+        isElementBrowserOpen: quickInsertState.isElementBrowserOpen
       };
     },
     actions: {
@@ -165,9 +186,9 @@ export var quickInsertPlugin = function quickInsertPlugin(_ref) {
       },
       getSuggestions: function getSuggestions(searchOptions) {
         var _api$quickInsert$shar, _api$quickInsert;
-        var _ref7 = (_api$quickInsert$shar = api === null || api === void 0 || (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 ? void 0 : _api$quickInsert.sharedState.currentState()) !== null && _api$quickInsert$shar !== void 0 ? _api$quickInsert$shar : {},
-          lazyDefaultItems = _ref7.lazyDefaultItems,
-          providedItems = _ref7.providedItems;
+        var _ref8 = (_api$quickInsert$shar = api === null || api === void 0 || (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 ? void 0 : _api$quickInsert.sharedState.currentState()) !== null && _api$quickInsert$shar !== void 0 ? _api$quickInsert$shar : {},
+          lazyDefaultItems = _ref8.lazyDefaultItems,
+          providedItems = _ref8.providedItems;
         if (expValEquals('platform_editor_layout_typeahead_reorder', 'isEnabled', true)) {
           var _options$prioritySort;
           searchOptions = _objectSpread(_objectSpread({}, searchOptions), {}, {
@@ -194,11 +215,12 @@ export var quickInsertPlugin = function quickInsertPlugin(_ref) {
       }
     },
     commands: {
-      openElementBrowserModal: function openElementBrowserModal(_ref8) {
-        var tr = _ref8.tr;
+      openElementBrowser: openElementBrowser,
+      openElementBrowserModal: function openElementBrowserModal(_ref9) {
+        var tr = _ref9.tr;
         if (fg('platform_editor_ease_of_use_metrics')) {
-          var _api$metrics;
-          api === null || api === void 0 || (_api$metrics = api.metrics) === null || _api$metrics === void 0 || _api$metrics.commands.handleIntentToStartEdit({
+          var _api$metrics2;
+          api === null || api === void 0 || (_api$metrics2 = api.metrics) === null || _api$metrics2 === void 0 || _api$metrics2.commands.handleIntentToStartEdit({
             shouldStartTimer: false,
             shouldPersistActiveSession: true
           })({
@@ -210,11 +232,11 @@ export var quickInsertPlugin = function quickInsertPlugin(_ref) {
         });
       },
       addQuickInsertItem: function addQuickInsertItem(item) {
-        return function (_ref9) {
+        return function (_ref0) {
           var _api$quickInsert$shar2, _api$quickInsert2;
-          var tr = _ref9.tr;
-          var _ref0 = (_api$quickInsert$shar2 = api === null || api === void 0 || (_api$quickInsert2 = api.quickInsert) === null || _api$quickInsert2 === void 0 ? void 0 : _api$quickInsert2.sharedState.currentState()) !== null && _api$quickInsert$shar2 !== void 0 ? _api$quickInsert$shar2 : {},
-            lazyDefaultItems = _ref0.lazyDefaultItems;
+          var tr = _ref0.tr;
+          var _ref1 = (_api$quickInsert$shar2 = api === null || api === void 0 || (_api$quickInsert2 = api.quickInsert) === null || _api$quickInsert2 === void 0 ? void 0 : _api$quickInsert2.sharedState.currentState()) !== null && _api$quickInsert$shar2 !== void 0 ? _api$quickInsert$shar2 : {},
+            lazyDefaultItems = _ref1.lazyDefaultItems;
           var defaultItems = lazyDefaultItems ? lazyDefaultItems() : [];
           var memoisedNewItems = memoProcessQuickInsertItems([item], intl);
           return tr.setMeta(pluginKey, {
@@ -225,12 +247,12 @@ export var quickInsertPlugin = function quickInsertPlugin(_ref) {
         };
       },
       updateQuickInsertItem: function updateQuickInsertItem(key, item) {
-        return function (_ref1) {
+        return function (_ref10) {
           var _api$quickInsert$shar3, _api$quickInsert3;
-          var tr = _ref1.tr;
-          var _ref10 = (_api$quickInsert$shar3 = api === null || api === void 0 || (_api$quickInsert3 = api.quickInsert) === null || _api$quickInsert3 === void 0 ? void 0 : _api$quickInsert3.sharedState.currentState()) !== null && _api$quickInsert$shar3 !== void 0 ? _api$quickInsert$shar3 : {},
-            providedItems = _ref10.providedItems,
-            lazyDefaultItems = _ref10.lazyDefaultItems;
+          var tr = _ref10.tr;
+          var _ref11 = (_api$quickInsert$shar3 = api === null || api === void 0 || (_api$quickInsert3 = api.quickInsert) === null || _api$quickInsert3 === void 0 ? void 0 : _api$quickInsert3.sharedState.currentState()) !== null && _api$quickInsert$shar3 !== void 0 ? _api$quickInsert$shar3 : {},
+            providedItems = _ref11.providedItems,
+            lazyDefaultItems = _ref11.lazyDefaultItems;
           var defaultItems = lazyDefaultItems ? lazyDefaultItems() : [];
           var newItem = memoProcessQuickInsertItems([item], intl);
           var replaceByKey = function replaceByKey(items) {
@@ -255,12 +277,12 @@ export var quickInsertPlugin = function quickInsertPlugin(_ref) {
         };
       },
       removeQuickInsertItem: function removeQuickInsertItem(key) {
-        return function (_ref11) {
+        return function (_ref12) {
           var _api$quickInsert$shar4, _api$quickInsert4, _providedItems$filter;
-          var tr = _ref11.tr;
-          var _ref12 = (_api$quickInsert$shar4 = api === null || api === void 0 || (_api$quickInsert4 = api.quickInsert) === null || _api$quickInsert4 === void 0 ? void 0 : _api$quickInsert4.sharedState.currentState()) !== null && _api$quickInsert$shar4 !== void 0 ? _api$quickInsert$shar4 : {},
-            providedItems = _ref12.providedItems,
-            lazyDefaultItems = _ref12.lazyDefaultItems;
+          var tr = _ref12.tr;
+          var _ref13 = (_api$quickInsert$shar4 = api === null || api === void 0 || (_api$quickInsert4 = api.quickInsert) === null || _api$quickInsert4 === void 0 ? void 0 : _api$quickInsert4.sharedState.currentState()) !== null && _api$quickInsert$shar4 !== void 0 ? _api$quickInsert$shar4 : {},
+            providedItems = _ref13.providedItems,
+            lazyDefaultItems = _ref13.lazyDefaultItems;
           var defaultItems = lazyDefaultItems ? lazyDefaultItems() : [];
           return tr.setMeta(pluginKey, {
             providedItems: (_providedItems$filter = providedItems === null || providedItems === void 0 ? void 0 : providedItems.filter(function (item) {
@@ -295,6 +317,7 @@ function quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispat
       init: function init() {
         return {
           isElementBrowserModalOpen: false,
+          isElementBrowserOpen: false,
           emptyStateHandler: emptyStateHandler,
           // lazy so it doesn't run on editor initialization
           // memo here to avoid using a singleton cache, avoids editor
@@ -322,7 +345,7 @@ function quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispat
     },
     view: function view(editorView) {
       var providerHandler = /*#__PURE__*/function () {
-        var _ref13 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_name, providerPromise) {
+        var _ref14 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_name, providerPromise) {
           var provider, providedItems, _t;
           return _regeneratorRuntime.wrap(function (_context) {
             while (1) switch (_context.prev = _context.next) {
@@ -358,7 +381,7 @@ function quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispat
           }, _callee, null, [[1, 4]]);
         }));
         return function providerHandler(_x, _x2) {
-          return _ref13.apply(this, arguments);
+          return _ref14.apply(this, arguments);
         };
       }();
       providerFactory.subscribe('quickInsertProvider', providerHandler);

package/dist/esm/ui/ModalElementBrowser/ModalElementBrowser.js

@@ -75,6 +75,7 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
       css: wrapperStyles
     }, jsx(ElementBrowser, {
       categories: getCategories(props.intl),
+      defaultCategory: props.defaultCategory,
       getItems: props.getItems,
       showSearch: true,
       showCategories: true,
@@ -84,7 +85,7 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
       emptyStateHandler: props.emptyStateHandler,
       autoFocusSearch: false
     }));
-  }, [props.intl, props.getItems, onSelectItem, onInsertItem, props.emptyStateHandler]);
+  }, [props.intl, props.defaultCategory, props.getItems, onSelectItem, onInsertItem, props.emptyStateHandler]);
   var label = intl.formatMessage(messages.browse);
   return jsx("div", {
     "data-editor-popup": true