@atlaskit/editor-plugin-quick-insert 14.0.4 → 14.1.1

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @atlaskit/editor-plugin-quick-insert
 
+## 14.1.1
+
+### Patch Changes
+
+- [`3a4c286fdb8c1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3a4c286fdb8c1) -
+  Add registry-backed Quick Insert search matching under the existing
+  `platform_editor_slash_command` experiment. Make native, provider, and extension registered Quick
+  Insert items searchable.
+- Updated dependencies
+
+## 14.1.0
+
+### Minor Changes
+
+- [`c0cf420333ef1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c0cf420333ef1) -
+  Add public registration APIs for provider-backed Quick Insert components.
+
+  Providers can expose registered items directly:
+
+  ```tsx
+  const getComponents = async () => [
+  	{
+  		key: 'insert-table',
+  		component: TableItem,
+  		parents: [{ type: 'menu-section', key: 'quick-insert', rank: 1 }],
+  	},
+  ];
+  ```
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 14.0.4
 
 ### Patch Changes

package/dist/cjs/quickInsertPlugin.js

@@ -24,6 +24,7 @@ var _appCategoryAnalytics = require("./app-category-analytics");
 var _commands = require("./pm-plugins/commands");
 var _quickInsertOpenExperience = require("./pm-plugins/experiences/quick-insert-open-experience");
 var _pluginKey = require("./pm-plugins/plugin-key");
+var _getLegacyCompatibleComponents = require("./ui/getLegacyCompatibleComponents");
 var _getQuickInsertComponents = require("./ui/getQuickInsertComponents");
 var _ModalElementBrowser = _interopRequireDefault(require("./ui/ModalElementBrowser"));
 var _search = require("./ui/search");
@@ -130,7 +131,7 @@ var quickInsertPlugin = exports.quickInsertPlugin = function quickInsertPlugin(_
             getIntl = _ref6.getIntl,
             dispatch = _ref6.dispatch,
             dispatchAnalyticsEvent = _ref6.dispatchAnalyticsEvent;
-          return quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispatch, dispatchAnalyticsEvent, options === null || options === void 0 ? void 0 : options.emptyStateHandler);
+          return quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispatch, dispatchAnalyticsEvent, options === null || options === void 0 ? void 0 : options.emptyStateHandler, onInsert, options === null || options === void 0 ? void 0 : options.itemFilter, api);
         }
       }, {
         name: 'quickInsertOpenExperience',
@@ -320,6 +321,9 @@ var setProviderState = function setProviderState(providerState) {
   };
 };
 function quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispatch, dispatchAnalyticsEvent, emptyStateHandler) {
+  var onInsert = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : function () {};
+  var itemFilter = arguments.length > 7 ? arguments[7] : undefined;
+  var api = arguments.length > 8 ? arguments[8] : undefined;
   return new _safePlugin.SafePlugin({
     key: _pluginKey.pluginKey,
     state: {
@@ -357,12 +361,12 @@ function quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispat
       var isDestroyed = false;
       var providerHandler = /*#__PURE__*/function () {
         var _ref14 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_name, providerPromise) {
-          var provider, providedItems, _t;
+          var provider, providedItems, _api$uiControlRegistr2, directComponents, components, _t, _t2;
           return _regenerator.default.wrap(function (_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
                 if (!providerPromise) {
-                  _context.next = 5;
+                  _context.next = 9;
                   break;
                 }
                 _context.prev = 1;
@@ -374,6 +378,32 @@ function quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispat
                 return provider.getItems();
               case 3:
                 providedItems = _context.sent;
+                if (!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_slash_command')) {
+                  _context.next = 7;
+                  break;
+                }
+                if (!provider.getComponents) {
+                  _context.next = 5;
+                  break;
+                }
+                _context.next = 4;
+                return provider.getComponents();
+              case 4:
+                _t = _context.sent;
+                _context.next = 6;
+                break;
+              case 5:
+                _t = [];
+              case 6:
+                directComponents = _t;
+                components = (0, _getLegacyCompatibleComponents.getLegacyCompatibleComponents)({
+                  directComponents: directComponents,
+                  itemFilter: itemFilter,
+                  onInsert: onInsert,
+                  providedItems: providedItems
+                });
+                api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 || _api$uiControlRegistr2.actions.register(components);
+              case 7:
                 setProviderState({
                   provider: provider,
                   providedItems: providedItems
@@ -382,18 +412,18 @@ function quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispat
                   quickInsertItemsAnalyticsScheduler = (0, _appCategoryAnalytics.createQuickInsertItemsAnalyticsScheduler)(dispatchAnalyticsEvent);
                   quickInsertItemsAnalyticsScheduler.schedule(providedItems);
                 }
-                _context.next = 5;
+                _context.next = 9;
                 break;
-              case 4:
-                _context.prev = 4;
-                _t = _context["catch"](1);
+              case 8:
+                _context.prev = 8;
+                _t2 = _context["catch"](1);
                 // eslint-disable-next-line no-console
-                console.error('Error getting items from quick insert provider', _t);
-              case 5:
+                console.error('Error getting items from quick insert provider', _t2);
+              case 9:
               case "end":
                 return _context.stop();
             }
-          }, _callee, null, [[1, 4]]);
+          }, _callee, null, [[1, 8]]);
         }));
         return function providerHandler(_x, _x2) {
           return _ref14.apply(this, arguments);

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

@@ -9,8 +9,8 @@ exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _isOfflineMode = require("@atlaskit/editor-common/connectivity/isOfflineMode");
 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");
@@ -126,7 +126,7 @@ var _default = exports.default = function _default(_ref2) {
     },
     editorView: editorView,
     helpUrl: helpUrl,
-    isOffline: (0, _editorPluginConnectivity.isOfflineMode)(mode),
+    isOffline: (0, _isOfflineMode.isOfflineMode)(mode),
     insertItem: pluginInjectionAPI === null || pluginInjectionAPI === void 0 || (_pluginInjectionAPI$q = pluginInjectionAPI.quickInsert) === null || _pluginInjectionAPI$q === void 0 || (_pluginInjectionAPI$q = _pluginInjectionAPI$q.actions) === null || _pluginInjectionAPI$q === void 0 ? void 0 : _pluginInjectionAPI$q.insertItem,
     getSuggestions: pluginInjectionAPI === null || pluginInjectionAPI === void 0 || (_pluginInjectionAPI$q2 = pluginInjectionAPI.quickInsert) === null || _pluginInjectionAPI$q2 === void 0 || (_pluginInjectionAPI$q2 = _pluginInjectionAPI$q2.actions) === null || _pluginInjectionAPI$q2 === void 0 ? void 0 : _pluginInjectionAPI$q2.getSuggestions,
     api: pluginInjectionAPI

package/dist/cjs/ui/getLegacyCompatibleComponents.js

@@ -0,0 +1,123 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLegacyCompatibleComponents = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _createQuickInsertMatcher = require("@atlaskit/editor-common/quick-insert/create-quick-insert-matcher");
+var _getMenuItemParents = require("@atlaskit/editor-common/quick-insert/get-menu-item-parents");
+var _getProviderMenuItemKey = require("@atlaskit/editor-common/quick-insert/get-provider-menu-item-key");
+var _menuItem = require("@atlaskit/editor-common/quick-insert/menu-item");
+var _useQuickInsertContext = require("@atlaskit/editor-common/quick-insert/use-quick-insert-context");
+var _apps = _interopRequireDefault(require("@atlaskit/icon/core/apps"));
+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 LegacyQuickInsertProviderMenuItem = function LegacyQuickInsertProviderMenuItem(_ref) {
+  var item = _ref.item,
+    onInsert = _ref.onInsert;
+  var _useQuickInsertContex = (0, _useQuickInsertContext.useQuickInsertContext)(),
+    editorView = _useQuickInsertContex.editorView,
+    isOffline = _useQuickInsertContex.isOffline;
+  var isDisabled = item.isDisabledOffline === true && isOffline;
+  var onSelect = function onSelect(_ref2) {
+    var insert = _ref2.insert,
+      source = _ref2.source;
+    var result = item.action(insert, editorView.state, source);
+    if (result) {
+      onInsert(item);
+    }
+    return result;
+  };
+  var Icon = item.icon;
+  return /*#__PURE__*/_react.default.createElement(_menuItem.QuickInsertMenuItem, {
+    iconBefore: Icon ? /*#__PURE__*/_react.default.createElement(Icon, null) : /*#__PURE__*/_react.default.createElement(_apps.default, {
+      label: ""
+    }),
+    isDisabled: isDisabled,
+    onSelect: onSelect,
+    shortcut: item.keyshortcut,
+    title: item.title
+  });
+};
+var getItemIdentity = function getItemIdentity(item, index) {
+  var _ref3, _item$key;
+  return String((_ref3 = (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : item.id) !== null && _ref3 !== void 0 ? _ref3 : index);
+};
+var getComponentsFromLegacyItems = function getComponentsFromLegacyItems(items, onInsert) {
+  return items.map(function (item, index) {
+    var _item$priority;
+    var identity = getItemIdentity(item, index);
+    return {
+      type: 'menu-item',
+      key: (0, _getProviderMenuItemKey.getQuickInsertProviderMenuItemKey)(identity),
+      parents: (0, _getMenuItemParents.getQuickInsertMenuItemParents)({
+        categories: item.categories,
+        rank: (_item$priority = item.priority) !== null && _item$priority !== void 0 ? _item$priority : index
+      }),
+      component: function component() {
+        return /*#__PURE__*/_react.default.createElement(LegacyQuickInsertProviderMenuItem, {
+          item: item,
+          onInsert: onInsert
+        });
+      },
+      match: (0, _createQuickInsertMatcher.createQuickInsertMatcher)(function () {
+        return {
+          description: item.description,
+          keywords: item.keywords,
+          shortcut: item.keyshortcut,
+          title: item.title
+        };
+      })
+    };
+  });
+};
+var getLegacyCompatibleComponents = exports.getLegacyCompatibleComponents = function getLegacyCompatibleComponents(_ref4) {
+  var directComponents = _ref4.directComponents,
+    itemFilter = _ref4.itemFilter,
+    _onInsert = _ref4.onInsert,
+    providedItems = _ref4.providedItems;
+  var filteredItems = itemFilter ? providedItems.filter(itemFilter) : providedItems;
+  var allowedKeys = new Set(filteredItems.map(function (item, index) {
+    return getItemIdentity(item, index);
+  }));
+  var directComponentsWithRenderer = directComponents.filter(function (component) {
+    return typeof component.component === 'function';
+  });
+  var namespacedDirectComponents = directComponentsWithRenderer.filter(function (component) {
+    return !itemFilter || allowedKeys.has(component.key);
+  }).map(function (component) {
+    var _component$match;
+    var item = filteredItems.find(function (candidate, index) {
+      return getItemIdentity(candidate, index) === component.key;
+    });
+    return _objectSpread(_objectSpread({}, component), {}, {
+      key: (0, _getProviderMenuItemKey.getQuickInsertProviderMenuItemKey)(component.key),
+      component: item ? function (props) {
+        return component.component(_objectSpread(_objectSpread({}, props), {}, {
+          onInsert: function onInsert() {
+            return _onInsert(item);
+          }
+        }));
+      } : component.component,
+      match: (_component$match = component.match) !== null && _component$match !== void 0 ? _component$match : item ? (0, _createQuickInsertMatcher.createQuickInsertMatcher)(function () {
+        return {
+          description: item.description,
+          keywords: item.keywords,
+          shortcut: item.keyshortcut,
+          title: item.title
+        };
+      }) : undefined
+    });
+  });
+  var directComponentKeys = new Set(directComponentsWithRenderer.map(function (component) {
+    return component.key;
+  }));
+  var fallbackComponents = getComponentsFromLegacyItems(filteredItems.filter(function (item, index) {
+    return !directComponentKeys.has(getItemIdentity(item, index));
+  }), _onInsert);
+  return [].concat((0, _toConsumableArray2.default)(fallbackComponents), (0, _toConsumableArray2.default)(namespacedDirectComponents));
+};

package/dist/es2019/quickInsertPlugin.js

@@ -13,6 +13,7 @@ import { createQuickInsertItemsAnalyticsScheduler } from './app-category-analyti
 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 { getLegacyCompatibleComponents } from './ui/getLegacyCompatibleComponents';
 import { getQuickInsertComponents } from './ui/getQuickInsertComponents';
 import ModalElementBrowser from './ui/ModalElementBrowser';
 import { getQuickInsertSuggestions, withLayoutQuickInsertPrioritySorting } from './ui/search';
@@ -120,7 +121,7 @@ export const quickInsertPlugin = ({
           getIntl,
           dispatch,
           dispatchAnalyticsEvent
-        }) => quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispatch, dispatchAnalyticsEvent, options === null || options === void 0 ? void 0 : options.emptyStateHandler)
+        }) => quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispatch, dispatchAnalyticsEvent, options === null || options === void 0 ? void 0 : options.emptyStateHandler, onInsert, options === null || options === void 0 ? void 0 : options.itemFilter, api)
       }, {
         name: 'quickInsertOpenExperience',
         plugin: () => getQuickInsertOpenExperiencePlugin({
@@ -290,7 +291,7 @@ const setProviderState = providerState => (state, dispatch) => {
   }
   return true;
 };
-function quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispatch, dispatchAnalyticsEvent, emptyStateHandler) {
+function quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispatch, dispatchAnalyticsEvent, emptyStateHandler, onInsert = () => {}, itemFilter, api) {
   return new SafePlugin({
     key: pluginKey,
     state: {
@@ -332,6 +333,17 @@ function quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispat
           try {
             const provider = await providerPromise;
             const providedItems = await provider.getItems();
+            if (isExperimentEnabled('platform_editor_slash_command')) {
+              var _api$uiControlRegistr2;
+              const directComponents = provider.getComponents ? await provider.getComponents() : [];
+              const components = getLegacyCompatibleComponents({
+                directComponents,
+                itemFilter,
+                onInsert,
+                providedItems
+              });
+              api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.register(components);
+            }
             setProviderState({
               provider,
               providedItems

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

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { isOfflineMode } from '@atlaskit/editor-common/connectivity/isOfflineMode';
 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 { closeElementBrowser, closeElementBrowserModal } from '../../pm-plugins/commands';

package/dist/es2019/ui/getLegacyCompatibleComponents.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import { createQuickInsertMatcher } from '@atlaskit/editor-common/quick-insert/create-quick-insert-matcher';
+import { getQuickInsertMenuItemParents } from '@atlaskit/editor-common/quick-insert/get-menu-item-parents';
+import { getQuickInsertProviderMenuItemKey } from '@atlaskit/editor-common/quick-insert/get-provider-menu-item-key';
+import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
+import { useQuickInsertContext } from '@atlaskit/editor-common/quick-insert/use-quick-insert-context';
+import AppsIcon from '@atlaskit/icon/core/apps';
+const LegacyQuickInsertProviderMenuItem = ({
+  item,
+  onInsert
+}) => {
+  const {
+    editorView,
+    isOffline
+  } = useQuickInsertContext();
+  const isDisabled = item.isDisabledOffline === true && isOffline;
+  const onSelect = ({
+    insert,
+    source
+  }) => {
+    const result = item.action(insert, editorView.state, source);
+    if (result) {
+      onInsert(item);
+    }
+    return result;
+  };
+  const Icon = item.icon;
+  return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
+    iconBefore: Icon ? /*#__PURE__*/React.createElement(Icon, null) : /*#__PURE__*/React.createElement(AppsIcon, {
+      label: ""
+    }),
+    isDisabled: isDisabled,
+    onSelect: onSelect,
+    shortcut: item.keyshortcut,
+    title: item.title
+  });
+};
+const getItemIdentity = (item, index) => {
+  var _ref, _item$key;
+  return String((_ref = (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : item.id) !== null && _ref !== void 0 ? _ref : index);
+};
+const getComponentsFromLegacyItems = (items, onInsert) => items.map((item, index) => {
+  var _item$priority;
+  const identity = getItemIdentity(item, index);
+  return {
+    type: 'menu-item',
+    key: getQuickInsertProviderMenuItemKey(identity),
+    parents: getQuickInsertMenuItemParents({
+      categories: item.categories,
+      rank: (_item$priority = item.priority) !== null && _item$priority !== void 0 ? _item$priority : index
+    }),
+    component: () => /*#__PURE__*/React.createElement(LegacyQuickInsertProviderMenuItem, {
+      item: item,
+      onInsert: onInsert
+    }),
+    match: createQuickInsertMatcher(() => ({
+      description: item.description,
+      keywords: item.keywords,
+      shortcut: item.keyshortcut,
+      title: item.title
+    }))
+  };
+});
+export const getLegacyCompatibleComponents = ({
+  directComponents,
+  itemFilter,
+  onInsert,
+  providedItems
+}) => {
+  const filteredItems = itemFilter ? providedItems.filter(itemFilter) : providedItems;
+  const allowedKeys = new Set(filteredItems.map((item, index) => getItemIdentity(item, index)));
+  const directComponentsWithRenderer = directComponents.filter(component => typeof component.component === 'function');
+  const namespacedDirectComponents = directComponentsWithRenderer.filter(component => !itemFilter || allowedKeys.has(component.key)).map(component => {
+    var _component$match;
+    const item = filteredItems.find((candidate, index) => getItemIdentity(candidate, index) === component.key);
+    return {
+      ...component,
+      key: getQuickInsertProviderMenuItemKey(component.key),
+      component: item ? props => component.component({
+        ...props,
+        onInsert: () => onInsert(item)
+      }) : component.component,
+      match: (_component$match = component.match) !== null && _component$match !== void 0 ? _component$match : item ? createQuickInsertMatcher(() => ({
+        description: item.description,
+        keywords: item.keywords,
+        shortcut: item.keyshortcut,
+        title: item.title
+      })) : undefined
+    };
+  });
+  const directComponentKeys = new Set(directComponentsWithRenderer.map(component => component.key));
+  const fallbackComponents = getComponentsFromLegacyItems(filteredItems.filter((item, index) => !directComponentKeys.has(getItemIdentity(item, index))), onInsert);
+  return [...fallbackComponents, ...namespacedDirectComponents];
+};

package/dist/esm/quickInsertPlugin.js

@@ -19,6 +19,7 @@ import { createQuickInsertItemsAnalyticsScheduler } from './app-category-analyti
 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 { getLegacyCompatibleComponents } from './ui/getLegacyCompatibleComponents';
 import { getQuickInsertComponents } from './ui/getQuickInsertComponents';
 import ModalElementBrowser from './ui/ModalElementBrowser';
 import { getQuickInsertSuggestions, withLayoutQuickInsertPrioritySorting } from './ui/search';
@@ -123,7 +124,7 @@ export var quickInsertPlugin = function quickInsertPlugin(_ref) {
             getIntl = _ref6.getIntl,
             dispatch = _ref6.dispatch,
             dispatchAnalyticsEvent = _ref6.dispatchAnalyticsEvent;
-          return quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispatch, dispatchAnalyticsEvent, options === null || options === void 0 ? void 0 : options.emptyStateHandler);
+          return quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispatch, dispatchAnalyticsEvent, options === null || options === void 0 ? void 0 : options.emptyStateHandler, onInsert, options === null || options === void 0 ? void 0 : options.itemFilter, api);
         }
       }, {
         name: 'quickInsertOpenExperience',
@@ -313,6 +314,9 @@ var setProviderState = function setProviderState(providerState) {
   };
 };
 function quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispatch, dispatchAnalyticsEvent, emptyStateHandler) {
+  var onInsert = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : function () {};
+  var itemFilter = arguments.length > 7 ? arguments[7] : undefined;
+  var api = arguments.length > 8 ? arguments[8] : undefined;
   return new SafePlugin({
     key: pluginKey,
     state: {
@@ -350,12 +354,12 @@ function quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispat
       var isDestroyed = false;
       var providerHandler = /*#__PURE__*/function () {
         var _ref14 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_name, providerPromise) {
-          var provider, providedItems, _t;
+          var provider, providedItems, _api$uiControlRegistr2, directComponents, components, _t, _t2;
           return _regeneratorRuntime.wrap(function (_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
                 if (!providerPromise) {
-                  _context.next = 5;
+                  _context.next = 9;
                   break;
                 }
                 _context.prev = 1;
@@ -367,6 +371,32 @@ function quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispat
                 return provider.getItems();
               case 3:
                 providedItems = _context.sent;
+                if (!isExperimentEnabled('platform_editor_slash_command')) {
+                  _context.next = 7;
+                  break;
+                }
+                if (!provider.getComponents) {
+                  _context.next = 5;
+                  break;
+                }
+                _context.next = 4;
+                return provider.getComponents();
+              case 4:
+                _t = _context.sent;
+                _context.next = 6;
+                break;
+              case 5:
+                _t = [];
+              case 6:
+                directComponents = _t;
+                components = getLegacyCompatibleComponents({
+                  directComponents: directComponents,
+                  itemFilter: itemFilter,
+                  onInsert: onInsert,
+                  providedItems: providedItems
+                });
+                api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 || _api$uiControlRegistr2.actions.register(components);
+              case 7:
                 setProviderState({
                   provider: provider,
                   providedItems: providedItems
@@ -375,18 +405,18 @@ function quickInsertPluginFactory(defaultItems, providerFactory, getIntl, dispat
                   quickInsertItemsAnalyticsScheduler = createQuickInsertItemsAnalyticsScheduler(dispatchAnalyticsEvent);
                   quickInsertItemsAnalyticsScheduler.schedule(providedItems);
                 }
-                _context.next = 5;
+                _context.next = 9;
                 break;
-              case 4:
-                _context.prev = 4;
-                _t = _context["catch"](1);
+              case 8:
+                _context.prev = 8;
+                _t2 = _context["catch"](1);
                 // eslint-disable-next-line no-console
-                console.error('Error getting items from quick insert provider', _t);
-              case 5:
+                console.error('Error getting items from quick insert provider', _t2);
+              case 9:
               case "end":
                 return _context.stop();
             }
-          }, _callee, null, [[1, 4]]);
+          }, _callee, null, [[1, 8]]);
         }));
         return function providerHandler(_x, _x2) {
           return _ref14.apply(this, arguments);

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

@@ -3,8 +3,8 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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) { _defineProperty(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; }
 import React, { useCallback } from 'react';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { isOfflineMode } from '@atlaskit/editor-common/connectivity/isOfflineMode';
 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 { closeElementBrowser, closeElementBrowserModal } from '../../pm-plugins/commands';

package/dist/esm/ui/getLegacyCompatibleComponents.js

@@ -0,0 +1,116 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+import React from 'react';
+import { createQuickInsertMatcher } from '@atlaskit/editor-common/quick-insert/create-quick-insert-matcher';
+import { getQuickInsertMenuItemParents } from '@atlaskit/editor-common/quick-insert/get-menu-item-parents';
+import { getQuickInsertProviderMenuItemKey } from '@atlaskit/editor-common/quick-insert/get-provider-menu-item-key';
+import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
+import { useQuickInsertContext } from '@atlaskit/editor-common/quick-insert/use-quick-insert-context';
+import AppsIcon from '@atlaskit/icon/core/apps';
+var LegacyQuickInsertProviderMenuItem = function LegacyQuickInsertProviderMenuItem(_ref) {
+  var item = _ref.item,
+    onInsert = _ref.onInsert;
+  var _useQuickInsertContex = useQuickInsertContext(),
+    editorView = _useQuickInsertContex.editorView,
+    isOffline = _useQuickInsertContex.isOffline;
+  var isDisabled = item.isDisabledOffline === true && isOffline;
+  var onSelect = function onSelect(_ref2) {
+    var insert = _ref2.insert,
+      source = _ref2.source;
+    var result = item.action(insert, editorView.state, source);
+    if (result) {
+      onInsert(item);
+    }
+    return result;
+  };
+  var Icon = item.icon;
+  return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
+    iconBefore: Icon ? /*#__PURE__*/React.createElement(Icon, null) : /*#__PURE__*/React.createElement(AppsIcon, {
+      label: ""
+    }),
+    isDisabled: isDisabled,
+    onSelect: onSelect,
+    shortcut: item.keyshortcut,
+    title: item.title
+  });
+};
+var getItemIdentity = function getItemIdentity(item, index) {
+  var _ref3, _item$key;
+  return String((_ref3 = (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : item.id) !== null && _ref3 !== void 0 ? _ref3 : index);
+};
+var getComponentsFromLegacyItems = function getComponentsFromLegacyItems(items, onInsert) {
+  return items.map(function (item, index) {
+    var _item$priority;
+    var identity = getItemIdentity(item, index);
+    return {
+      type: 'menu-item',
+      key: getQuickInsertProviderMenuItemKey(identity),
+      parents: getQuickInsertMenuItemParents({
+        categories: item.categories,
+        rank: (_item$priority = item.priority) !== null && _item$priority !== void 0 ? _item$priority : index
+      }),
+      component: function component() {
+        return /*#__PURE__*/React.createElement(LegacyQuickInsertProviderMenuItem, {
+          item: item,
+          onInsert: onInsert
+        });
+      },
+      match: createQuickInsertMatcher(function () {
+        return {
+          description: item.description,
+          keywords: item.keywords,
+          shortcut: item.keyshortcut,
+          title: item.title
+        };
+      })
+    };
+  });
+};
+export var getLegacyCompatibleComponents = function getLegacyCompatibleComponents(_ref4) {
+  var directComponents = _ref4.directComponents,
+    itemFilter = _ref4.itemFilter,
+    _onInsert = _ref4.onInsert,
+    providedItems = _ref4.providedItems;
+  var filteredItems = itemFilter ? providedItems.filter(itemFilter) : providedItems;
+  var allowedKeys = new Set(filteredItems.map(function (item, index) {
+    return getItemIdentity(item, index);
+  }));
+  var directComponentsWithRenderer = directComponents.filter(function (component) {
+    return typeof component.component === 'function';
+  });
+  var namespacedDirectComponents = directComponentsWithRenderer.filter(function (component) {
+    return !itemFilter || allowedKeys.has(component.key);
+  }).map(function (component) {
+    var _component$match;
+    var item = filteredItems.find(function (candidate, index) {
+      return getItemIdentity(candidate, index) === component.key;
+    });
+    return _objectSpread(_objectSpread({}, component), {}, {
+      key: getQuickInsertProviderMenuItemKey(component.key),
+      component: item ? function (props) {
+        return component.component(_objectSpread(_objectSpread({}, props), {}, {
+          onInsert: function onInsert() {
+            return _onInsert(item);
+          }
+        }));
+      } : component.component,
+      match: (_component$match = component.match) !== null && _component$match !== void 0 ? _component$match : item ? createQuickInsertMatcher(function () {
+        return {
+          description: item.description,
+          keywords: item.keywords,
+          shortcut: item.keyshortcut,
+          title: item.title
+        };
+      }) : undefined
+    });
+  });
+  var directComponentKeys = new Set(directComponentsWithRenderer.map(function (component) {
+    return component.key;
+  }));
+  var fallbackComponents = getComponentsFromLegacyItems(filteredItems.filter(function (item, index) {
+    return !directComponentKeys.has(getItemIdentity(item, index));
+  }), _onInsert);
+  return [].concat(_toConsumableArray(fallbackComponents), _toConsumableArray(namespacedDirectComponents));
+};

package/dist/types/ui/getLegacyCompatibleComponents.d.ts

@@ -0,0 +1,10 @@
+import type { QuickInsertItem } from '@atlaskit/editor-common/provider-factory';
+import type { RegisterMenuItem } from '@atlaskit/editor-ui-control-model/types';
+type Options = {
+    directComponents: RegisterMenuItem[];
+    itemFilter?: (item: QuickInsertItem) => boolean;
+    onInsert: (item: QuickInsertItem) => void;
+    providedItems: QuickInsertItem[];
+};
+export declare const getLegacyCompatibleComponents: ({ directComponents, itemFilter, onInsert, providedItems, }: Options) => RegisterMenuItem[];
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-quick-insert",
-	"version": "14.0.4",
+	"version": "14.1.1",
 	"description": "Quick insert plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -25,10 +25,10 @@
 		"@atlaskit/editor-plugin-analytics": "^14.0.0",
 		"@atlaskit/editor-plugin-connectivity": "^14.0.0",
 		"@atlaskit/editor-plugin-metrics": "^15.0.0",
-		"@atlaskit/editor-plugin-type-ahead": "^15.0.0",
-		"@atlaskit/editor-plugin-ui-control-registry": "^8.0.0",
+		"@atlaskit/editor-plugin-type-ahead": "^15.1.0",
+		"@atlaskit/editor-plugin-ui-control-registry": "^8.1.0",
 		"@atlaskit/editor-prosemirror": "^8.0.0",
-		"@atlaskit/editor-ui-control-model": "^2.4.0",
+		"@atlaskit/editor-ui-control-model": "^2.6.0",
 		"@atlaskit/icon": "^37.3.0",
 		"@atlaskit/modal-dialog": "^16.3.0",
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
@@ -39,7 +39,7 @@
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^118.4.0",
+		"@atlaskit/editor-common": "^118.10.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"