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

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-quick-insert
 
+## 13.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 13.1.0
+
+### Minor Changes
+
+- [`7087f393ec725`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7087f393ec725) -
+  Add the categorized registered Quick Insert browse experience with representative native elements
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 13.0.1
 
 ### Patch Changes

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

@@ -3,15 +3,47 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.openElementBrowserModal = exports.createInsertItem = exports.closeElementBrowserModal = void 0;
+exports.openElementBrowserModal = exports.openElementBrowser = exports.createInsertItem = exports.closeElementBrowserModal = exports.closeElementBrowser = void 0;
 var _insert = require("@atlaskit/editor-common/insert");
 var _pluginKey = require("../plugin-key");
-var openElementBrowserModal = exports.openElementBrowserModal = function openElementBrowserModal(_ref) {
-  var tr = _ref.tr;
+var openElementBrowser = exports.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.pluginKey, {
+      elementBrowserInitialCategory: category,
+      isElementBrowserOpen: true
+    });
+  };
+};
+var closeElementBrowser = exports.closeElementBrowser = function closeElementBrowser() {
+  return function (state, dispatch) {
+    if (dispatch) {
+      dispatch(state.tr.setMeta(_pluginKey.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.
+ */
+var openElementBrowserModal = exports.openElementBrowserModal = function openElementBrowserModal(_ref3) {
+  var tr = _ref3.tr;
   return tr.setMeta(_pluginKey.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.
+ */
 var closeElementBrowserModal = exports.closeElementBrowserModal = function closeElementBrowserModal() {
   return function (state, dispatch) {
     if (dispatch) {

package/dist/cjs/quickInsertPlugin.js

@@ -95,8 +95,28 @@ var quickInsertPlugin = exports.quickInsertPlugin = function quickInsertPlugin(_
   };
   if ((0, _isExperimentEnabled.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((0, _getQuickInsertComponents.getQuickInsertComponents)());
+    api === null || api === void 0 || (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 || _api$uiControlRegistr.actions.register((0, _getQuickInsertComponents.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 ((0, _platformFeatureFlags.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 (0, _commands.openElementBrowser)(options)({
+        tr: tr
+      });
+    };
+  };
   var intl;
   return {
     name: 'quickInsert',
@@ -104,10 +124,10 @@ var quickInsertPlugin = exports.quickInsertPlugin = function quickInsertPlugin(_
       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);
         }
       }, {
@@ -126,10 +146,10 @@ var quickInsertPlugin = exports.quickInsertPlugin = function quickInsertPlugin(_
     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 || (0, _coreUtils.isSSR)()) {
@@ -157,7 +177,8 @@ var quickInsertPlugin = exports.quickInsertPlugin = function quickInsertPlugin(_
         lazyDefaultItems: quickInsertState.lazyDefaultItems,
         emptyStateHandler: quickInsertState.emptyStateHandler,
         providedItems: quickInsertState.providedItems,
-        isElementBrowserModalOpen: quickInsertState.isElementBrowserModalOpen
+        isElementBrowserModalOpen: quickInsertState.isElementBrowserModalOpen,
+        isElementBrowserOpen: quickInsertState.isElementBrowserOpen
       };
     },
     actions: {
@@ -172,9 +193,9 @@ var quickInsertPlugin = exports.quickInsertPlugin = function quickInsertPlugin(_
       },
       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 ((0, _expValEquals.expValEquals)('platform_editor_layout_typeahead_reorder', 'isEnabled', true)) {
           var _options$prioritySort;
           searchOptions = _objectSpread(_objectSpread({}, searchOptions), {}, {
@@ -201,11 +222,12 @@ var quickInsertPlugin = exports.quickInsertPlugin = function quickInsertPlugin(_
       }
     },
     commands: {
-      openElementBrowserModal: function openElementBrowserModal(_ref8) {
-        var tr = _ref8.tr;
+      openElementBrowser: openElementBrowser,
+      openElementBrowserModal: function openElementBrowserModal(_ref9) {
+        var tr = _ref9.tr;
         if ((0, _platformFeatureFlags.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
           })({
@@ -217,11 +239,11 @@ var quickInsertPlugin = exports.quickInsertPlugin = function quickInsertPlugin(_
         });
       },
       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 = (0, _quickInsert.memoProcessQuickInsertItems)([item], intl);
           return tr.setMeta(_pluginKey.pluginKey, {
@@ -232,12 +254,12 @@ var quickInsertPlugin = exports.quickInsertPlugin = function quickInsertPlugin(_
         };
       },
       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 = (0, _quickInsert.memoProcessQuickInsertItems)([item], intl);
           var replaceByKey = function replaceByKey(items) {
@@ -262,12 +284,12 @@ var quickInsertPlugin = exports.quickInsertPlugin = function quickInsertPlugin(_
         };
       },
       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.pluginKey, {
             providedItems: (_providedItems$filter = providedItems === null || providedItems === void 0 ? void 0 : providedItems.filter(function (item) {
@@ -302,6 +324,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
@@ -329,7 +352,7 @@ function quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispat
     },
     view: function view(editorView) {
       var providerHandler = /*#__PURE__*/function () {
-        var _ref13 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_name, providerPromise) {
+        var _ref14 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_name, providerPromise) {
           var provider, providedItems, _t;
           return _regenerator.default.wrap(function (_context) {
             while (1) switch (_context.prev = _context.next) {
@@ -365,7 +388,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/cjs/ui/ModalElementBrowser/ModalElementBrowser.js

@@ -85,6 +85,7 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
       css: wrapperStyles
     }, (0, _react2.jsx)(_elementBrowser.ElementBrowser, {
       categories: (0, _categories.getCategories)(props.intl),
+      defaultCategory: props.defaultCategory,
       getItems: props.getItems,
       showSearch: true,
       showCategories: true,
@@ -94,7 +95,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(_quickInsert.messages.browse);
   return (0, _react2.jsx)("div", {
     "data-editor-popup": true

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

@@ -11,8 +11,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../../pm-plugins/commands");
+var _pluginKey = require("../../pm-plugins/plugin-key");
 var _ModalElementBrowser = _interopRequireDefault(require("./ModalElementBrowser"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -24,7 +26,8 @@ var Modal = function Modal(_ref) {
     helpUrl = _ref.helpUrl,
     insertItem = _ref.insertItem,
     getSuggestions = _ref.getSuggestions,
-    api = _ref.api;
+    api = _ref.api,
+    defaultCategory = _ref.defaultCategory;
   var getItems = (0, _react.useCallback)(function (query, category) {
     var _getSuggestions$map, _getSuggestions;
     return (_getSuggestions$map = getSuggestions === null || getSuggestions === void 0 || (_getSuggestions = getSuggestions({
@@ -49,22 +52,26 @@ var Modal = function Modal(_ref) {
   // Instead of adding the item immediately on insert item
   // We wait until modal close is complete, refocus the editor and then add the item
   var insertableItem = _react.default.useRef(null);
+  var closeBrowser = (0, _react.useCallback)(function () {
+    var closeCommand = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_slash_command') ? _commands.closeElementBrowser : _commands.closeElementBrowserModal;
+    closeCommand()(editorView.state, editorView.dispatch);
+  }, [editorView]);
   var onInsertItem = (0, _react.useCallback)(function (item) {
-    (0, _commands.closeElementBrowserModal)()(editorView.state, editorView.dispatch);
+    closeBrowser();
     if ((0, _platformFeatureFlags.fg)('platform_editor_ease_of_use_metrics')) {
       var _api$metrics;
       api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$metrics = api.metrics) === null || _api$metrics === void 0 ? void 0 : _api$metrics.commands.startActiveSessionTimer());
     }
     insertableItem.current = item;
-  }, [editorView, api]);
+  }, [closeBrowser, api]);
   var onClose = (0, _react.useCallback)(function () {
-    (0, _commands.closeElementBrowserModal)()(editorView.state, editorView.dispatch);
+    closeBrowser();
     if ((0, _platformFeatureFlags.fg)('platform_editor_ease_of_use_metrics')) {
       var _api$metrics2;
       api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$metrics2 = api.metrics) === null || _api$metrics2 === void 0 ? void 0 : _api$metrics2.commands.startActiveSessionTimer());
     }
     focusInEditor();
-  }, [editorView, focusInEditor, api]);
+  }, [closeBrowser, focusInEditor, api]);
   var onCloseComplete = (0, _react.useCallback)(function () {
     if (!insertableItem.current) {
       focusInEditor();
@@ -76,10 +83,11 @@ var Modal = function Modal(_ref) {
     insertItem === null || insertItem === void 0 || insertItem(item, _analytics.INPUT_METHOD.ELEMENT_BROWSER)(editorView.state, editorView.dispatch);
   }, [editorView, focusInEditor, insertItem]);
   return /*#__PURE__*/_react.default.createElement(_ModalElementBrowser.default, {
+    defaultCategory: defaultCategory,
     getItems: getItems,
     onInsertItem: onInsertItem,
     helpUrl: helpUrl,
-    isOpen: quickInsertState.isElementBrowserModalOpen || false,
+    isOpen: quickInsertState.isElementBrowserOpen || false,
     emptyStateHandler: quickInsertState.emptyStateHandler,
     onClose: onClose,
     onCloseComplete: onCloseComplete,
@@ -87,32 +95,33 @@ var Modal = function Modal(_ref) {
   });
 };
 var _default = exports.default = function _default(_ref2) {
-  var _pluginInjectionAPI$q, _pluginInjectionAPI$q2;
+  var _pluginKey$getState, _pluginInjectionAPI$q, _pluginInjectionAPI$q2;
   var editorView = _ref2.editorView,
     helpUrl = _ref2.helpUrl,
     pluginInjectionAPI = _ref2.pluginInjectionAPI;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionAPI, ['quickInsert', 'connectivity'], function (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: (0, _isExperimentEnabled.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
       };
     }),
     lazyDefaultItems = _useSharedPluginState.lazyDefaultItems,
     providedItems = _useSharedPluginState.providedItems,
-    isElementBrowserModalOpen = _useSharedPluginState.isElementBrowserModalOpen,
+    isElementBrowserOpen = _useSharedPluginState.isElementBrowserOpen,
     emptyStateHandler = _useSharedPluginState.emptyStateHandler,
     mode = _useSharedPluginState.mode;
-  return /*#__PURE__*/_react.default.createElement(Modal
-  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-  , {
+  return /*#__PURE__*/_react.default.createElement(Modal, {
+    defaultCategory: (_pluginKey$getState = _pluginKey.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: lazyDefaultItems,
       providedItems: providedItems,
-      isElementBrowserModalOpen: isElementBrowserModalOpen,
+      isElementBrowserOpen: isElementBrowserOpen,
       emptyStateHandler: emptyStateHandler
     },
     editorView: editorView,

package/dist/cjs/ui/QuickInsertMenuFooterItem.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.QuickInsertMenuFooterItem = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntl = require("react-intl");
+var _messages = require("@atlaskit/editor-common/messages");
+var _menuItem = require("@atlaskit/editor-common/quick-insert/menu-item");
+var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var QuickInsertMenuFooterItem = exports.QuickInsertMenuFooterItem = function QuickInsertMenuFooterItem(_ref) {
+  var api = _ref.api;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var onSelect = (0, _react.useCallback)(function (_ref2) {
+    var _api$quickInsert$comm, _api$quickInsert;
+    var insert = _ref2.insert;
+    var tr = insert(undefined);
+    return (_api$quickInsert$comm = api === null || api === void 0 || (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 ? void 0 : _api$quickInsert.commands.openElementBrowser()({
+      tr: tr
+    })) !== null && _api$quickInsert$comm !== void 0 ? _api$quickInsert$comm : tr;
+  }, [api]);
+  return /*#__PURE__*/_react.default.createElement(_menuItem.QuickInsertMenuItem, {
+    ariaLabel: formatMessage(_messages.toolbarInsertBlockMessages.viewMoreAriaLabel),
+    iconBefore: /*#__PURE__*/_react.default.createElement(_showMoreHorizontal.default, {
+      label: ""
+    }),
+    isDisabled: !(api !== null && api !== void 0 && api.quickInsert),
+    onSelect: onSelect,
+    shouldWrapIcon: false,
+    title: formatMessage(_messages.toolbarInsertBlockMessages.viewMore)
+  });
+};

package/dist/cjs/ui/QuickInsertSectionOverflowMenuItem.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.QuickInsertSectionOverflowMenuItem = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntl = require("react-intl");
+var _messages = require("@atlaskit/editor-common/messages");
+var _menuItem = require("@atlaskit/editor-common/quick-insert/menu-item");
+var _add = _interopRequireDefault(require("@atlaskit/icon/core/add"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var QuickInsertSectionOverflowMenuItem = exports.QuickInsertSectionOverflowMenuItem = function QuickInsertSectionOverflowMenuItem(_ref) {
+  var api = _ref.api,
+    category = _ref.category;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var onSelect = (0, _react.useCallback)(function (_ref2) {
+    var _api$quickInsert$comm, _api$quickInsert;
+    var insert = _ref2.insert;
+    var tr = insert(undefined);
+    return (_api$quickInsert$comm = api === null || api === void 0 || (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 ? void 0 : _api$quickInsert.commands.openElementBrowser({
+      category: category
+    })({
+      tr: tr
+    })) !== null && _api$quickInsert$comm !== void 0 ? _api$quickInsert$comm : tr;
+  }, [api, category]);
+  return /*#__PURE__*/_react.default.createElement(_menuItem.QuickInsertMenuItem, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(_add.default, {
+      label: ""
+    }),
+    isDisabled: !(api !== null && api !== void 0 && api.quickInsert),
+    onSelect: onSelect,
+    title: formatMessage(_messages.toolbarInsertBlockMessages.viewMore)
+  });
+};

package/dist/cjs/ui/getQuickInsertComponents.js

@@ -5,19 +5,111 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getQuickInsertComponents = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
 var _keys = require("@atlaskit/editor-common/quick-insert/keys");
+var _menuRoot = require("@atlaskit/editor-common/quick-insert/menu-root");
+var _menuSection = require("@atlaskit/editor-common/quick-insert/menu-section");
+var _messages = require("@atlaskit/editor-common/quick-insert/messages");
 var _rank = require("@atlaskit/editor-common/quick-insert/rank");
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var sections = [_keys.RECOMMENDED_SECTION, _keys.STRUCTURE_SECTION, _keys.MEDIA_SECTION, _keys.EMBED_SECTION, _keys.TEXT_FORMATTING_SECTION, _keys.ROVO_SECTION, _keys.DATA_AND_CHARTS_SECTION, _keys.BLOCK_TEMPLATES_SECTION, _keys.OTHER_SECTION];
-var getQuickInsertComponents = exports.getQuickInsertComponents = function getQuickInsertComponents() {
-  return [_keys.MENU].concat((0, _toConsumableArray2.default)(sections.map(function (section) {
-    return _objectSpread(_objectSpread({}, section), {}, {
-      parents: [_objectSpread(_objectSpread({}, _keys.MENU), {}, {
+var _typeAheadGetMenuFooterSectionKey = require("@atlaskit/editor-common/type-ahead-get-menu-footer-section-key");
+var _typeAheadGetSectionOverflowItemKey = require("@atlaskit/editor-common/type-ahead-get-section-overflow-item-key");
+var _QuickInsertMenuFooterItem = require("./QuickInsertMenuFooterItem");
+var _QuickInsertSectionOverflowMenuItem = require("./QuickInsertSectionOverflowMenuItem");
+var categories = [{
+  message: _messages.messages.categoryRecommended,
+  section: _keys.RECOMMENDED_SECTION
+}, {
+  message: _messages.messages.categoryStructure,
+  section: _keys.STRUCTURE_SECTION
+}, {
+  message: _messages.messages.categoryMedia,
+  section: _keys.MEDIA_SECTION
+}, {
+  message: _messages.messages.categoryEmbed,
+  section: _keys.EMBED_SECTION
+}, {
+  message: _messages.messages.categoryTextFormatting,
+  section: _keys.TEXT_FORMATTING_SECTION
+}, {
+  message: _messages.messages.categoryRovo,
+  section: _keys.ROVO_SECTION
+}, {
+  message: _messages.messages.categoryDataAndCharts,
+  section: _keys.DATA_AND_CHARTS_SECTION
+}, {
+  message: _messages.messages.categoryBlockTemplates,
+  section: _keys.BLOCK_TEMPLATES_SECTION
+}, {
+  message: _messages.messages.categoryOther,
+  section: _keys.OTHER_SECTION
+}];
+var createSectionComponent = function createSectionComponent(message) {
+  var SectionComponent = function SectionComponent(_ref) {
+    var children = _ref.children;
+    var _useIntl = (0, _reactIntl.useIntl)(),
+      formatMessage = _useIntl.formatMessage;
+    return /*#__PURE__*/_react.default.createElement(_menuSection.QuickInsertMenuSection, {
+      title: formatMessage(message)
+    }, children);
+  };
+  return SectionComponent;
+};
+var getQuickInsertComponents = exports.getQuickInsertComponents = function getQuickInsertComponents(_ref2) {
+  var api = _ref2.api,
+    includeElementBrowserItems = _ref2.includeElementBrowserItems;
+  return [{
+    key: _keys.MENU.key,
+    type: _keys.MENU.type,
+    component: _menuRoot.QuickInsertMenuRoot
+  }].concat((0, _toConsumableArray2.default)(categories.flatMap(function (_ref3) {
+    var message = _ref3.message,
+      section = _ref3.section;
+    return [{
+      key: section.key,
+      type: section.type,
+      parents: [{
+        key: _keys.MENU.key,
+        type: _keys.MENU.type,
         rank: _rank.QUICK_INSERT_MENU_RANK[section.key]
-      })]
-    });
-  })));
+      }],
+      component: createSectionComponent(message)
+    }].concat((0, _toConsumableArray2.default)(includeElementBrowserItems ? [{
+      key: (0, _typeAheadGetSectionOverflowItemKey.getSectionOverflowItemKey)(section.key),
+      type: 'menu-item',
+      parents: [{
+        key: section.key,
+        type: section.type,
+        rank: _rank.CATEGORY_VIEW_MORE_RANK
+      }],
+      component: function component() {
+        return /*#__PURE__*/_react.default.createElement(_QuickInsertSectionOverflowMenuItem.QuickInsertSectionOverflowMenuItem, {
+          api: api,
+          category: section.key
+        });
+      }
+    }] : []));
+  })), (0, _toConsumableArray2.default)(includeElementBrowserItems ? [{
+    key: (0, _typeAheadGetMenuFooterSectionKey.getMenuFooterSectionKey)(_keys.MENU.key),
+    type: 'menu-section',
+    parents: [{
+      key: _keys.MENU.key,
+      type: _keys.MENU.type,
+      rank: Number.MAX_SAFE_INTEGER
+    }]
+  }, {
+    key: _keys.VIEW_ALL_ELEMENTS_MENU_ITEM.key,
+    type: _keys.VIEW_ALL_ELEMENTS_MENU_ITEM.type,
+    parents: [{
+      key: (0, _typeAheadGetMenuFooterSectionKey.getMenuFooterSectionKey)(_keys.MENU.key),
+      type: 'menu-section',
+      rank: 100
+    }],
+    component: function component() {
+      return /*#__PURE__*/_react.default.createElement(_QuickInsertMenuFooterItem.QuickInsertMenuFooterItem, {
+        api: api
+      });
+    }
+  }] : []));
 };

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

@@ -1,10 +1,37 @@
 import { insertSelectedItem } from '@atlaskit/editor-common/insert';
 import { pluginKey } from '../plugin-key';
+export const openElementBrowser = ({
+  category
+} = {}) => ({
+  tr
+}) => tr.setMeta(pluginKey, {
+  elementBrowserInitialCategory: category,
+  isElementBrowserOpen: true
+});
+export const closeElementBrowser = () => (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 const openElementBrowserModal = ({
   tr
 }) => 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 const closeElementBrowserModal = () => (state, dispatch) => {
   if (dispatch) {
     dispatch(state.tr.setMeta(pluginKey, {