@atlaskit/editor-core 223.0.7 → 223.1.1

package/dist/es2019/ui/quick-insert/executeExtensionQuickInsertItem.js

@@ -0,0 +1,77 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { resolveImport } from '@atlaskit/editor-common/extensions';
+import { safeInsert } from '@atlaskit/editor-common/insert';
+import { logException } from '@atlaskit/editor-common/monitoring';
+import { processRawValue } from '@atlaskit/editor-common/process-raw-value';
+import { findInsertLocation } from '@atlaskit/editor-common/utils/analytics';
+const sendAnalytics = (item, selection, createAnalyticsEvent, source) => {
+  if (createAnalyticsEvent) {
+    const insertLocation = findInsertLocation(selection);
+    fireAnalyticsEvent(createAnalyticsEvent)({
+      payload: {
+        action: ACTION.INSERTED,
+        actionSubject: ACTION_SUBJECT.DOCUMENT,
+        actionSubjectId: ACTION_SUBJECT_ID.EXTENSION,
+        attributes: {
+          extensionType: item.extensionType,
+          extensionKey: item.extensionKey,
+          key: item.key,
+          inputMethod: source || INPUT_METHOD.QUICK_INSERT,
+          ...(insertLocation ? {
+            insertLocation
+          } : {})
+        },
+        eventType: EVENT_TYPE.TRACK
+      }
+    });
+  }
+};
+const warnDummyAPI = location => {
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line no-console
+    console.warn('Extension plugin not attached to editor - cannot use extension API in ' + location);
+  }
+};
+const dummyExtensionAPI = {
+  editInContextPanel: () => warnDummyAPI('editInContextPanel'),
+  _editInLegacyMacroBrowser: () => warnDummyAPI('_editInLegacyMacroBrowser'),
+  getNodeWithPosByLocalId: () => ({
+    node: null,
+    pos: null
+  }),
+  doc: {
+    insertAfter: () => warnDummyAPI('doc:insertAfter'),
+    scrollTo: () => warnDummyAPI('doc:scrollTo'),
+    update: () => warnDummyAPI('doc:update')
+  }
+};
+export const executeExtensionQuickInsertItem = ({
+  apiRef,
+  createAnalyticsEvent,
+  insert,
+  item,
+  source,
+  state
+}) => {
+  if (typeof item.node === 'function') {
+    var _apiRef$current$exten, _apiRef$current, _apiRef$current$exten2, _apiRef$current$exten3;
+    const extensionAPI = (_apiRef$current$exten = (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 ? void 0 : (_apiRef$current$exten2 = _apiRef$current.extension) === null || _apiRef$current$exten2 === void 0 ? void 0 : (_apiRef$current$exten3 = _apiRef$current$exten2.actions) === null || _apiRef$current$exten3 === void 0 ? void 0 : _apiRef$current$exten3.api()) !== null && _apiRef$current$exten !== void 0 ? _apiRef$current$exten : dummyExtensionAPI;
+    void resolveImport(item.node(extensionAPI)).then(node => {
+      sendAnalytics(item, state.selection, createAnalyticsEvent, source);
+      if (node && apiRef.current) {
+        apiRef.current.core.actions.execute(({
+          tr
+        }) => {
+          var _safeInsert$scrollInt, _safeInsert;
+          const content = processRawValue(tr.doc.type.schema, node);
+          return content ? (_safeInsert$scrollInt = (_safeInsert = safeInsert(content)(tr)) === null || _safeInsert === void 0 ? void 0 : _safeInsert.scrollIntoView()) !== null && _safeInsert$scrollInt !== void 0 ? _safeInsert$scrollInt : null : null;
+        });
+      }
+    }).catch(error => logException(error, {
+      location: 'editor-core/quick-insert'
+    }));
+    return insert('');
+  }
+  sendAnalytics(item, state.selection, createAnalyticsEvent, source);
+  return insert(item.node);
+};

package/dist/es2019/ui/quick-insert/getExtensionQuickInsertComponents.js

@@ -0,0 +1,34 @@
+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 { EXTENSION_ITEM_RANK } from '@atlaskit/editor-common/quick-insert/rank';
+import { ExtensionQuickInsertMenuItem } from './ExtensionQuickInsertMenuItem';
+export const getExtensionQuickInsertComponents = ({
+  apiRef,
+  createAnalyticsEvent,
+  items
+}) => items.map((item, index) => {
+  var _item$priority;
+  return {
+    type: 'menu-item',
+    key: item.key,
+    parents: getQuickInsertMenuItemParents({
+      categories: item.categories,
+      rank: EXTENSION_ITEM_RANK + ((_item$priority = item.priority) !== null && _item$priority !== void 0 ? _item$priority : index)
+    }),
+    match: createQuickInsertMatcher(() => ({
+      description: item.description,
+      keywords: item.keywords,
+      title: item.title
+    })),
+    component: props => {
+      const onInsert = typeof props.onInsert === 'function' ? props.onInsert : undefined;
+      return /*#__PURE__*/React.createElement(ExtensionQuickInsertMenuItem, {
+        apiRef: apiRef,
+        createAnalyticsEvent: createAnalyticsEvent,
+        item: item,
+        onInsert: onInsert
+      });
+    }
+  };
+});

package/dist/es2019/utils/combineQuickInsertProviders.js

@@ -1,9 +1,13 @@
 import { combineProviders } from '@atlaskit/editor-common/provider-helpers';
 export function combineQuickInsertProviders(quickInsertProviders) {
   const {
-    invokeList
+    invokeList,
+    invokeOptionalList
   } = combineProviders(quickInsertProviders);
   return {
+    getComponents() {
+      return invokeOptionalList('getComponents');
+    },
     getItems() {
       return invokeList('getItems');
     }

package/dist/es2019/utils/extensions.js

@@ -3,6 +3,8 @@ import Loadable from 'react-loadable';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { getQuickInsertItemsFromModule, resolveImport } from '@atlaskit/editor-common/extensions';
 import { findInsertLocation } from '@atlaskit/editor-common/utils/analytics';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { getExtensionQuickInsertComponents } from '../ui/quick-insert/getExtensionQuickInsertComponents';
 
 // Structural shape of the markdown-mode plugin's slice of the injection API.
 // Used to read `isMarkdownMode` without importing the `MarkdownModePlugin`
@@ -10,7 +12,7 @@ import { findInsertLocation } from '@atlaskit/editor-common/utils/analytics';
 // dependency graph and force every consuming product to rebuild.
 
 /**
- * Utils to send analytics event when a extension is inserted using quickInsert
+ * Utils to send analytics event when an extension is inserted using quickInsert
  */
 function sendExtensionQuickInsertAnalytics(item, selection, createAnalyticsEvent, source) {
   if (createAnalyticsEvent) {
@@ -24,7 +26,6 @@ function sendExtensionQuickInsertAnalytics(item, selection, createAnalyticsEvent
           extensionType: item.extensionType,
           extensionKey: item.extensionKey,
           key: item.key,
-          // @note inputMethod defaults to QUICK_INSERT if not provided
           inputMethod: source || INPUT_METHOD.QUICK_INSERT,
           ...(insertLocation ? {
             insertLocation
@@ -54,16 +55,31 @@ const dummyExtensionAPI = {
     update: () => showDummyAPIWarning('doc:update')
   }
 };
+
+/** Creates legacy and registered Quick Insert representations for extensions. */
 export async function extensionProviderToQuickInsertProvider(extensionProvider, editorActions, apiRef, createAnalyticsEvent) {
   const extensions = await extensionProvider.getExtensions();
+  const getMenuItems = () => getQuickInsertItemsFromModule(extensions, item => item);
   return {
-    getItems: () => {
+    getComponents: () => {
       var _apiRef$current, _apiRef$current$markd, _apiRef$current$markd2;
+      const isMarkdownMode = (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 ? void 0 : (_apiRef$current$markd = _apiRef$current.markdownMode) === null || _apiRef$current$markd === void 0 ? void 0 : (_apiRef$current$markd2 = _apiRef$current$markd.sharedState.currentState()) === null || _apiRef$current$markd2 === void 0 ? void 0 : _apiRef$current$markd2.isMarkdownMode;
+      if (!isExperimentEnabled('platform_editor_slash_command') || isMarkdownMode) {
+        return Promise.resolve([]);
+      }
+      return Promise.resolve(getExtensionQuickInsertComponents({
+        apiRef,
+        createAnalyticsEvent,
+        items: getMenuItems()
+      }));
+    },
+    getItems: () => {
+      var _apiRef$current2, _apiRef$current2$mark, _apiRef$current2$mark2;
       // `extensionProvider` is supplied independently of the preset, so
       // suppress its items in markdown mode where rich-only content cannot
       // be inserted. See `MarkdownModeReader` above for why this is read
       // via a structural cast rather than the typed plugin API.
-      const isMarkdownMode = (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 ? void 0 : (_apiRef$current$markd = _apiRef$current.markdownMode) === null || _apiRef$current$markd === void 0 ? void 0 : (_apiRef$current$markd2 = _apiRef$current$markd.sharedState.currentState()) === null || _apiRef$current$markd2 === void 0 ? void 0 : _apiRef$current$markd2.isMarkdownMode;
+      const isMarkdownMode = (_apiRef$current2 = apiRef.current) === null || _apiRef$current2 === void 0 ? void 0 : (_apiRef$current2$mark = _apiRef$current2.markdownMode) === null || _apiRef$current2$mark === void 0 ? void 0 : (_apiRef$current2$mark2 = _apiRef$current2$mark.sharedState.currentState()) === null || _apiRef$current2$mark2 === void 0 ? void 0 : _apiRef$current2$mark2.isMarkdownMode;
       if (isMarkdownMode) {
         return Promise.resolve([]);
       }
@@ -90,10 +106,12 @@ export async function extensionProviderToQuickInsertProvider(extensionProvider,
             lozenge: item.lozenge
           }),
           isDisabledOffline: true,
+          // This legacy action intentionally mirrors executeExtensionQuickInsertItem,
+          // which serves the registered representation of the same item.
           action: (insert, state, source) => {
             if (typeof item.node === 'function') {
-              var _apiRef$current2, _apiRef$current2$exte, _apiRef$current2$exte2;
-              const extensionAPI = apiRef === null || apiRef === void 0 ? void 0 : (_apiRef$current2 = apiRef.current) === null || _apiRef$current2 === void 0 ? void 0 : (_apiRef$current2$exte = _apiRef$current2.extension) === null || _apiRef$current2$exte === void 0 ? void 0 : (_apiRef$current2$exte2 = _apiRef$current2$exte.actions) === null || _apiRef$current2$exte2 === void 0 ? void 0 : _apiRef$current2$exte2.api();
+              var _apiRef$current3, _apiRef$current3$exte, _apiRef$current3$exte2;
+              const extensionAPI = apiRef === null || apiRef === void 0 ? void 0 : (_apiRef$current3 = apiRef.current) === null || _apiRef$current3 === void 0 ? void 0 : (_apiRef$current3$exte = _apiRef$current3.extension) === null || _apiRef$current3$exte === void 0 ? void 0 : (_apiRef$current3$exte2 = _apiRef$current3$exte.actions) === null || _apiRef$current3$exte2 === void 0 ? void 0 : _apiRef$current3$exte2.api();
               // While this should only run when the extension some setups of editor
               // may not have the extension API
               if (extensionAPI) {
@@ -106,8 +124,7 @@ export async function extensionProviderToQuickInsertProvider(extensionProvider,
               } else {
                 // Originally it was understood we could only use this if we were using the extension plugin
                 // However there are some edge cases where this is not true (ie. in jira)
-                // Since making it optional now would be a breaking change - instead we can just pass a dummy
-                // extension API to consumers that warns them of using the methods.
+                // Since making it optional now would be a breaking change - instead we can just pass a dummy extension API to consumers that warns them of using the methods.
                 resolveImport(item.node(dummyExtensionAPI)).then(node => {
                   sendExtensionQuickInsertAnalytics(item, state.selection, createAnalyticsEvent, source);
                   if (node) {

package/dist/es2019/version-wrapper.js

@@ -1,3 +1,3 @@
 export const name = "@atlaskit/editor-core";
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export const version = "223.0.6";
+export const version = "223.1.0";

package/dist/esm/create-editor/ReactEditorView.js

@@ -469,7 +469,7 @@ export function ReactEditorView(props) {
     // (purpose 2). When NOT rebuilding, run both — even under the
     // `cc-markdown-mode` experiment, otherwise no-op preset identity
     // changes would silently leave a broken plugin/schema mismatch.
-    if (presetChanged && fg('platform_editor_reconfigure_filter_plugins')) {
+    if (presetChanged) {
       var dropped = [];
       if (!shouldRebuildSchema) {
         var _result = filterPluginsForReconfigure(editorPlugins, viewRef.current.state.schema, previousPluginNames);

package/dist/esm/presets/default.js

@@ -39,6 +39,7 @@ import { undoRedoPlugin } from '@atlaskit/editor-plugins/undo-redo';
 import { unsupportedContentPlugin } from '@atlaskit/editor-plugins/unsupported-content';
 import { userIntentPlugin } from '@atlaskit/editor-plugins/user-intent';
 import { widthPlugin } from '@atlaskit/editor-plugins/width';
+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 { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
@@ -70,7 +71,7 @@ export function createDefaultPreset(options) {
     contextIdentifierProvider: options.contextIdentifierProvider
   }]).add([basePlugin, options.base]).add(decorationsPlugin).add([typeAheadPlugin, options.typeAhead]).maybeAdd(historyPlugin, Boolean(options.allowUndoRedoButtons)).add(userIntentPlugin).maybeAdd([toolbarPlugin, options.toolbar || {}], Boolean((_options$toolbar = options.toolbar) === null || _options$toolbar === void 0 ? void 0 : _options$toolbar.enableNewToolbarExperience)).add([primaryToolbarPlugin, {
     contextualFormattingEnabled: isFullPage
-  }]).maybeAdd(uiControlRegistryPlugin, expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true) || expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true) || expValEqualsNoExposure('platform_editor_paste_actions_menu', 'isEnabled', true)).maybeAdd(undoRedoPlugin, Boolean((_options$featureFlags = (_options$featureFlags2 = options.featureFlags) === null || _options$featureFlags2 === void 0 ? void 0 : _options$featureFlags2.undoRedoButtons) !== null && _options$featureFlags !== void 0 ? _options$featureFlags : options.allowUndoRedoButtons)).maybeAdd([blockMenuPlugin, {
+  }]).maybeAdd(uiControlRegistryPlugin, expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true) || expValEqualsNoExposure('platform_editor_layout_column_menu', 'isEnabled', true) || expValEqualsNoExposure('platform_editor_paste_actions_menu', 'isEnabled', true) || isExperimentEnabled('platform_editor_slash_command')).maybeAdd(undoRedoPlugin, Boolean((_options$featureFlags = (_options$featureFlags2 = options.featureFlags) === null || _options$featureFlags2 === void 0 ? void 0 : _options$featureFlags2.undoRedoButtons) !== null && _options$featureFlags !== void 0 ? _options$featureFlags : options.allowUndoRedoButtons)).maybeAdd([blockMenuPlugin, {
     useStandardNodeWidth: (_options$blockMenu$us = (_options$blockMenu = options.blockMenu) === null || _options$blockMenu === void 0 ? void 0 : _options$blockMenu.useStandardNodeWidth) !== null && _options$blockMenu$us !== void 0 ? _options$blockMenu$us : false,
     blockLinkHashPrefix: (_options$blockMenu2 = options.blockMenu) === null || _options$blockMenu2 === void 0 ? void 0 : _options$blockMenu2.blockLinkHashPrefix,
     getLinkPath: (_options$blockMenu3 = options.blockMenu) === null || _options$blockMenu3 === void 0 ? void 0 : _options$blockMenu3.getLinkPath

package/dist/esm/ui/quick-insert/ExtensionQuickInsertIcon.js

@@ -0,0 +1,78 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React from 'react';
+import AppsIcon from '@atlaskit/icon/core/apps';
+var lazyExtensionIconCache = new WeakMap();
+var resolveExtensionIcon = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(getIcon) {
+    var maybeIcon, _default, _t;
+    return _regeneratorRuntime.wrap(function (_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.prev = 0;
+          _context.next = 1;
+          return getIcon === null || getIcon === void 0 ? void 0 : getIcon();
+        case 1:
+          maybeIcon = _context.sent;
+          if (maybeIcon) {
+            _context.next = 2;
+            break;
+          }
+          return _context.abrupt("return", AppsIcon);
+        case 2:
+          if (!Object.prototype.hasOwnProperty.call(maybeIcon, 'default')) {
+            _context.next = 3;
+            break;
+          }
+          return _context.abrupt("return", (_default = maybeIcon.default) !== null && _default !== void 0 ? _default : AppsIcon);
+        case 3:
+          return _context.abrupt("return", maybeIcon);
+        case 4:
+          _context.prev = 4;
+          _t = _context["catch"](0);
+          return _context.abrupt("return", AppsIcon);
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[0, 4]]);
+  }));
+  return function resolveExtensionIcon(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var createLazyExtensionIcon = function createLazyExtensionIcon(getIcon) {
+  var cachedIcon = lazyExtensionIconCache.get(getIcon);
+  if (cachedIcon) {
+    return cachedIcon;
+  }
+  var LazyIcon = /*#__PURE__*/React.lazy(function () {
+    return resolveExtensionIcon(getIcon).then(function (Icon) {
+      return {
+        default: Icon
+      };
+    });
+  });
+  LazyIcon.displayName = 'lazy(ExtensionIcon)';
+  var Icon = function Icon(props) {
+    return /*#__PURE__*/React.createElement(React.Suspense, {
+      fallback: /*#__PURE__*/React.createElement(AppsIcon, {
+        label: props.label
+      })
+    }, /*#__PURE__*/React.createElement(LazyIcon, {
+      label: props.label
+    }));
+  };
+  lazyExtensionIconCache.set(getIcon, Icon);
+  return Icon;
+};
+export var ExtensionQuickInsertIcon = function ExtensionQuickInsertIcon(_ref2) {
+  var getIcon = _ref2.getIcon,
+    label = _ref2.label;
+  var Icon = React.useMemo(function () {
+    return getIcon ? createLazyExtensionIcon(getIcon) : AppsIcon;
+  }, [getIcon]);
+  return /*#__PURE__*/React.createElement(Icon, {
+    label: label
+  });
+};

package/dist/esm/ui/quick-insert/ExtensionQuickInsertMenuItem.js

@@ -0,0 +1,39 @@
+import React, { useCallback } from 'react';
+import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item';
+import { useQuickInsertContext } from '@atlaskit/editor-common/quick-insert/use-quick-insert-context';
+import { executeExtensionQuickInsertItem } from './executeExtensionQuickInsertItem';
+import { ExtensionQuickInsertIcon } from './ExtensionQuickInsertIcon';
+export var ExtensionQuickInsertMenuItem = function ExtensionQuickInsertMenuItem(_ref) {
+  var apiRef = _ref.apiRef,
+    createAnalyticsEvent = _ref.createAnalyticsEvent,
+    item = _ref.item,
+    onInsert = _ref.onInsert;
+  var _useQuickInsertContex = useQuickInsertContext(),
+    editorView = _useQuickInsertContex.editorView,
+    isOffline = _useQuickInsertContex.isOffline;
+  var onSelect = useCallback(function (_ref2) {
+    var insert = _ref2.insert,
+      source = _ref2.source;
+    var result = executeExtensionQuickInsertItem({
+      apiRef: apiRef,
+      createAnalyticsEvent: createAnalyticsEvent,
+      insert: insert,
+      item: item,
+      source: source,
+      state: editorView.state
+    });
+    if (result) {
+      onInsert === null || onInsert === void 0 || onInsert();
+    }
+    return result;
+  }, [apiRef, createAnalyticsEvent, editorView.state, item, onInsert]);
+  return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
+    iconBefore: /*#__PURE__*/React.createElement(ExtensionQuickInsertIcon, {
+      getIcon: item.icon,
+      label: ""
+    }),
+    isDisabled: isOffline,
+    onSelect: onSelect,
+    title: item.title
+  });
+};

package/dist/esm/ui/quick-insert/executeExtensionQuickInsertItem.js

@@ -0,0 +1,91 @@
+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 { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { resolveImport } from '@atlaskit/editor-common/extensions';
+import { safeInsert } from '@atlaskit/editor-common/insert';
+import { logException } from '@atlaskit/editor-common/monitoring';
+import { processRawValue } from '@atlaskit/editor-common/process-raw-value';
+import { findInsertLocation } from '@atlaskit/editor-common/utils/analytics';
+var sendAnalytics = function sendAnalytics(item, selection, createAnalyticsEvent, source) {
+  if (createAnalyticsEvent) {
+    var insertLocation = findInsertLocation(selection);
+    fireAnalyticsEvent(createAnalyticsEvent)({
+      payload: {
+        action: ACTION.INSERTED,
+        actionSubject: ACTION_SUBJECT.DOCUMENT,
+        actionSubjectId: ACTION_SUBJECT_ID.EXTENSION,
+        attributes: _objectSpread({
+          extensionType: item.extensionType,
+          extensionKey: item.extensionKey,
+          key: item.key,
+          inputMethod: source || INPUT_METHOD.QUICK_INSERT
+        }, insertLocation ? {
+          insertLocation: insertLocation
+        } : {}),
+        eventType: EVENT_TYPE.TRACK
+      }
+    });
+  }
+};
+var warnDummyAPI = function warnDummyAPI(location) {
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line no-console
+    console.warn('Extension plugin not attached to editor - cannot use extension API in ' + location);
+  }
+};
+var dummyExtensionAPI = {
+  editInContextPanel: function editInContextPanel() {
+    return warnDummyAPI('editInContextPanel');
+  },
+  _editInLegacyMacroBrowser: function _editInLegacyMacroBrowser() {
+    return warnDummyAPI('_editInLegacyMacroBrowser');
+  },
+  getNodeWithPosByLocalId: function getNodeWithPosByLocalId() {
+    return {
+      node: null,
+      pos: null
+    };
+  },
+  doc: {
+    insertAfter: function insertAfter() {
+      return warnDummyAPI('doc:insertAfter');
+    },
+    scrollTo: function scrollTo() {
+      return warnDummyAPI('doc:scrollTo');
+    },
+    update: function update() {
+      return warnDummyAPI('doc:update');
+    }
+  }
+};
+export var executeExtensionQuickInsertItem = function executeExtensionQuickInsertItem(_ref) {
+  var apiRef = _ref.apiRef,
+    createAnalyticsEvent = _ref.createAnalyticsEvent,
+    insert = _ref.insert,
+    item = _ref.item,
+    source = _ref.source,
+    state = _ref.state;
+  if (typeof item.node === 'function') {
+    var _apiRef$current$exten, _apiRef$current;
+    var extensionAPI = (_apiRef$current$exten = (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 || (_apiRef$current = _apiRef$current.extension) === null || _apiRef$current === void 0 || (_apiRef$current = _apiRef$current.actions) === null || _apiRef$current === void 0 ? void 0 : _apiRef$current.api()) !== null && _apiRef$current$exten !== void 0 ? _apiRef$current$exten : dummyExtensionAPI;
+    void resolveImport(item.node(extensionAPI)).then(function (node) {
+      sendAnalytics(item, state.selection, createAnalyticsEvent, source);
+      if (node && apiRef.current) {
+        apiRef.current.core.actions.execute(function (_ref2) {
+          var _safeInsert$scrollInt, _safeInsert;
+          var tr = _ref2.tr;
+          var content = processRawValue(tr.doc.type.schema, node);
+          return content ? (_safeInsert$scrollInt = (_safeInsert = safeInsert(content)(tr)) === null || _safeInsert === void 0 ? void 0 : _safeInsert.scrollIntoView()) !== null && _safeInsert$scrollInt !== void 0 ? _safeInsert$scrollInt : null : null;
+        });
+      }
+    }).catch(function (error) {
+      return logException(error, {
+        location: 'editor-core/quick-insert'
+      });
+    });
+    return insert('');
+  }
+  sendAnalytics(item, state.selection, createAnalyticsEvent, source);
+  return insert(item.node);
+};

package/dist/esm/ui/quick-insert/getExtensionQuickInsertComponents.js

@@ -0,0 +1,37 @@
+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 { EXTENSION_ITEM_RANK } from '@atlaskit/editor-common/quick-insert/rank';
+import { ExtensionQuickInsertMenuItem } from './ExtensionQuickInsertMenuItem';
+export var getExtensionQuickInsertComponents = function getExtensionQuickInsertComponents(_ref) {
+  var apiRef = _ref.apiRef,
+    createAnalyticsEvent = _ref.createAnalyticsEvent,
+    items = _ref.items;
+  return items.map(function (item, index) {
+    var _item$priority;
+    return {
+      type: 'menu-item',
+      key: item.key,
+      parents: getQuickInsertMenuItemParents({
+        categories: item.categories,
+        rank: EXTENSION_ITEM_RANK + ((_item$priority = item.priority) !== null && _item$priority !== void 0 ? _item$priority : index)
+      }),
+      match: createQuickInsertMatcher(function () {
+        return {
+          description: item.description,
+          keywords: item.keywords,
+          title: item.title
+        };
+      }),
+      component: function component(props) {
+        var onInsert = typeof props.onInsert === 'function' ? props.onInsert : undefined;
+        return /*#__PURE__*/React.createElement(ExtensionQuickInsertMenuItem, {
+          apiRef: apiRef,
+          createAnalyticsEvent: createAnalyticsEvent,
+          item: item,
+          onInsert: onInsert
+        });
+      }
+    };
+  });
+};

package/dist/esm/utils/combineQuickInsertProviders.js

@@ -1,8 +1,12 @@
 import { combineProviders } from '@atlaskit/editor-common/provider-helpers';
 export function combineQuickInsertProviders(quickInsertProviders) {
   var _combineProviders = combineProviders(quickInsertProviders),
-    invokeList = _combineProviders.invokeList;
+    invokeList = _combineProviders.invokeList,
+    invokeOptionalList = _combineProviders.invokeOptionalList;
   return {
+    getComponents: function getComponents() {
+      return invokeOptionalList('getComponents');
+    },
     getItems: function getItems() {
       return invokeList('getItems');
     }

package/dist/esm/utils/extensions.js

@@ -8,6 +8,8 @@ import Loadable from 'react-loadable';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { getQuickInsertItemsFromModule, resolveImport } from '@atlaskit/editor-common/extensions';
 import { findInsertLocation } from '@atlaskit/editor-common/utils/analytics';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { getExtensionQuickInsertComponents } from '../ui/quick-insert/getExtensionQuickInsertComponents';
 
 // Structural shape of the markdown-mode plugin's slice of the injection API.
 // Used to read `isMarkdownMode` without importing the `MarkdownModePlugin`
@@ -15,7 +17,7 @@ import { findInsertLocation } from '@atlaskit/editor-common/utils/analytics';
 // dependency graph and force every consuming product to rebuild.
 
 /**
- * Utils to send analytics event when a extension is inserted using quickInsert
+ * Utils to send analytics event when an extension is inserted using quickInsert
  */
 function sendExtensionQuickInsertAnalytics(item, selection, createAnalyticsEvent, source) {
   if (createAnalyticsEvent) {
@@ -29,7 +31,6 @@ function sendExtensionQuickInsertAnalytics(item, selection, createAnalyticsEvent
           extensionType: item.extensionType,
           extensionKey: item.extensionKey,
           key: item.key,
-          // @note inputMethod defaults to QUICK_INSERT if not provided
           inputMethod: source || INPUT_METHOD.QUICK_INSERT
         }, insertLocation ? {
           insertLocation: insertLocation
@@ -70,12 +71,14 @@ var dummyExtensionAPI = {
     }
   }
 };
+
+/** Creates legacy and registered Quick Insert representations for extensions. */
 export function extensionProviderToQuickInsertProvider(_x, _x2, _x3, _x4) {
   return _extensionProviderToQuickInsertProvider.apply(this, arguments);
 }
 function _extensionProviderToQuickInsertProvider() {
   _extensionProviderToQuickInsertProvider = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(extensionProvider, editorActions, apiRef, createAnalyticsEvent) {
-    var extensions;
+    var extensions, getMenuItems;
     return _regeneratorRuntime.wrap(function (_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -83,14 +86,31 @@ function _extensionProviderToQuickInsertProvider() {
           return extensionProvider.getExtensions();
         case 1:
           extensions = _context.sent;
+          getMenuItems = function getMenuItems() {
+            return getQuickInsertItemsFromModule(extensions, function (item) {
+              return item;
+            });
+          };
           return _context.abrupt("return", {
-            getItems: function getItems() {
+            getComponents: function getComponents() {
               var _apiRef$current;
+              var isMarkdownMode = (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 || (_apiRef$current = _apiRef$current.markdownMode) === null || _apiRef$current === void 0 || (_apiRef$current = _apiRef$current.sharedState.currentState()) === null || _apiRef$current === void 0 ? void 0 : _apiRef$current.isMarkdownMode;
+              if (!isExperimentEnabled('platform_editor_slash_command') || isMarkdownMode) {
+                return Promise.resolve([]);
+              }
+              return Promise.resolve(getExtensionQuickInsertComponents({
+                apiRef: apiRef,
+                createAnalyticsEvent: createAnalyticsEvent,
+                items: getMenuItems()
+              }));
+            },
+            getItems: function getItems() {
+              var _apiRef$current2;
               // `extensionProvider` is supplied independently of the preset, so
               // suppress its items in markdown mode where rich-only content cannot
               // be inserted. See `MarkdownModeReader` above for why this is read
               // via a structural cast rather than the typed plugin API.
-              var isMarkdownMode = (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 || (_apiRef$current = _apiRef$current.markdownMode) === null || _apiRef$current === void 0 || (_apiRef$current = _apiRef$current.sharedState.currentState()) === null || _apiRef$current === void 0 ? void 0 : _apiRef$current.isMarkdownMode;
+              var isMarkdownMode = (_apiRef$current2 = apiRef.current) === null || _apiRef$current2 === void 0 || (_apiRef$current2 = _apiRef$current2.markdownMode) === null || _apiRef$current2 === void 0 || (_apiRef$current2 = _apiRef$current2.sharedState.currentState()) === null || _apiRef$current2 === void 0 ? void 0 : _apiRef$current2.isMarkdownMode;
               if (isMarkdownMode) {
                 return Promise.resolve([]);
               }
@@ -121,10 +141,12 @@ function _extensionProviderToQuickInsertProvider() {
                   lozenge: item.lozenge
                 }), {}, {
                   isDisabledOffline: true,
+                  // This legacy action intentionally mirrors executeExtensionQuickInsertItem,
+                  // which serves the registered representation of the same item.
                   action: function action(insert, state, source) {
                     if (typeof item.node === 'function') {
-                      var _apiRef$current2;
-                      var extensionAPI = apiRef === null || apiRef === void 0 || (_apiRef$current2 = apiRef.current) === null || _apiRef$current2 === void 0 || (_apiRef$current2 = _apiRef$current2.extension) === null || _apiRef$current2 === void 0 || (_apiRef$current2 = _apiRef$current2.actions) === null || _apiRef$current2 === void 0 ? void 0 : _apiRef$current2.api();
+                      var _apiRef$current3;
+                      var extensionAPI = apiRef === null || apiRef === void 0 || (_apiRef$current3 = apiRef.current) === null || _apiRef$current3 === void 0 || (_apiRef$current3 = _apiRef$current3.extension) === null || _apiRef$current3 === void 0 || (_apiRef$current3 = _apiRef$current3.actions) === null || _apiRef$current3 === void 0 ? void 0 : _apiRef$current3.api();
                       // While this should only run when the extension some setups of editor
                       // may not have the extension API
                       if (extensionAPI) {
@@ -137,8 +159,7 @@ function _extensionProviderToQuickInsertProvider() {
                       } else {
                         // Originally it was understood we could only use this if we were using the extension plugin
                         // However there are some edge cases where this is not true (ie. in jira)
-                        // Since making it optional now would be a breaking change - instead we can just pass a dummy
-                        // extension API to consumers that warns them of using the methods.
+                        // Since making it optional now would be a breaking change - instead we can just pass a dummy extension API to consumers that warns them of using the methods.
                         resolveImport(item.node(dummyExtensionAPI)).then(function (node) {
                           sendExtensionQuickInsertAnalytics(item, state.selection, createAnalyticsEvent, source);
                           if (node) {

package/dist/esm/version-wrapper.js

@@ -1,3 +1,3 @@
 export var name = "@atlaskit/editor-core";
 // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
-export var version = "223.0.6";
+export var version = "223.1.0";

package/dist/types/ui/quick-insert/ExtensionQuickInsertIcon.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { MenuItem } from '@atlaskit/editor-common/extensions';
+export declare const ExtensionQuickInsertIcon: ({ getIcon, label, }: {
+    getIcon?: MenuItem['icon'];
+    label: string;
+}) => React.JSX.Element;

package/dist/types/ui/quick-insert/ExtensionQuickInsertMenuItem.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next/types';
+import type { MenuItem } from '@atlaskit/editor-common/extensions';
+import type { PublicPluginAPI } from '@atlaskit/editor-common/types';
+import type { ExtensionPlugin } from '@atlaskit/editor-plugins/extension';
+export declare const ExtensionQuickInsertMenuItem: ({ apiRef, createAnalyticsEvent, item, onInsert, }: {
+    apiRef: React.MutableRefObject<PublicPluginAPI<[ExtensionPlugin]> | undefined>;
+    createAnalyticsEvent?: CreateUIAnalyticsEvent;
+    item: MenuItem;
+    onInsert?: () => void;
+}) => React.JSX.Element;