@atlaskit/editor-plugin-quick-insert 21.1.2 → 21.1.3

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @atlaskit/editor-plugin-quick-insert
 
+## 21.1.3
+
+### Patch Changes
+
+- [`a034f535638cc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a034f535638cc) -
+  Add structured Quick Insert previews with localised title, description and attribution under
+  platform_editor_slash_command.
+
+  Exclude footer and category navigation actions from previews. Left-align attribution, use subtle
+  title and attribution text, and default description text.
+
+  Show text previews even without preview metadata, and reserve a fixed image area while images load
+  or when they fail. Keep previews within the viewport, flipping left when needed, with compact
+  panel dimensions and typography.
+
+  Replace baked panel screenshots with image-only assets. Remove image fields from text-only legacy
+  previews while preserving their attribution.
+
+  Let extension providers own their preview images and attribution. Pass preview metadata through
+  the Company Hub manifest factory and remove Editor's fallback preview registry.
+
+  Localize provider attribution names and display Confluence and Jira product icons instead of the
+  attribution prefix when an icon is present. Allow the Dropbox manifest to receive the host's
+  message formatter.
+
+- [`7306003a7565b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7306003a7565b) -
+  Fix modal dismissal, category spacing, measured list height, and viewport-aware menu placement
+  under platform_editor_slash_command.
+- Updated dependencies
+
 ## 21.1.2
 
 ### Patch Changes

package/dist/cjs/ui/QuickInsertMenuFooterItem.js

@@ -31,6 +31,7 @@ var QuickInsertMenuFooterItem = exports.QuickInsertMenuFooterItem = function Qui
     }),
     isDisabled: !(api !== null && api !== void 0 && api.quickInsert),
     onSelect: onSelect,
+    shouldShowPreview: false,
     shouldWrapIcon: false,
     title: formatMessage(_messages.toolbarInsertBlockMessages.viewMore)
   });

package/dist/cjs/ui/QuickInsertSectionOverflowMenuItem.js

@@ -33,6 +33,7 @@ var QuickInsertSectionOverflowMenuItem = exports.QuickInsertSectionOverflowMenuI
     }),
     isDisabled: !(api !== null && api !== void 0 && api.quickInsert),
     onSelect: onSelect,
+    shouldShowPreview: false,
     title: formatMessage(_messages.toolbarInsertBlockMessages.viewMore)
   });
 };

package/dist/cjs/ui/RegistryElementBrowser/RegistryElementBrowser.js

@@ -13,6 +13,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
 var _button = _interopRequireDefault(require("@atlaskit/button/icon/button"));
+var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _keys = require("@atlaskit/editor-common/quick-insert/keys");
 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");
@@ -123,13 +124,6 @@ var RegistryElementBrowser = exports.RegistryElementBrowser = function RegistryE
     setSelectedKey(undefined);
     onClearSelection();
   }, [onClearSelection]);
-  var onClearSearch = (0, _react.useCallback)(function () {
-    var _searchInputRef$curre;
-    setQuery('');
-    setSelectedKey(undefined);
-    onClearSelection();
-    (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 || _searchInputRef$curre.focus();
-  }, [onClearSelection]);
   var onRegistrySelect = (0, _react.useCallback)(function (key, handler) {
     setSelectedKey(key);
     onSelect(handler);
@@ -209,11 +203,8 @@ var RegistryElementBrowser = exports.RegistryElementBrowser = function RegistryE
   }), /*#__PURE__*/_react.default.createElement(_button.default, {
     appearance: "subtle",
     icon: _cross.default,
-    label: formatMessage({
-      defaultMessage: 'Clear search',
-      id: 'editor.quick-insert.clear-search'
-    }),
-    onClick: onClearSearch,
+    label: formatMessage(_quickInsert.messages.close),
+    onClick: onClose,
     spacing: "compact"
   })))), /*#__PURE__*/_react.default.createElement(_modalBody.default, null, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _runtime.ax)(["_zulp1fka _1e0c11p5 _yv0e1xuv _lk4ji47z"])

package/dist/cjs/ui/RegistryElementBrowser/RegistryElementBrowserFooter.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
 var _button = _interopRequireDefault(require("@atlaskit/button/default/button"));
 var _link = _interopRequireDefault(require("@atlaskit/button/link"));
+var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _compiled = require("@atlaskit/primitives/compiled");
 var RegistryElementBrowserFooter = exports.RegistryElementBrowserFooter = function RegistryElementBrowserFooter(_ref) {
   var helpUrl = _ref.helpUrl,
@@ -51,8 +52,5 @@ var RegistryElementBrowserFooter = exports.RegistryElementBrowserFooter = functi
   })), /*#__PURE__*/_react.default.createElement(_button.default, {
     appearance: "subtle",
     onClick: onClose
-  }, formatMessage({
-    defaultMessage: 'Close',
-    id: 'editor.quick-insert.close'
-  }))));
+  }, formatMessage(_quickInsert.messages.close))));
 };

package/dist/cjs/ui/getLegacyCompatibleComponents.js

@@ -1,26 +1,31 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 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 _react = _interopRequireWildcard(require("react"));
+var _reactIntl = require("react-intl");
 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 _messages = require("@atlaskit/editor-common/quick-insert/messages");
 var _snippetPreviewImageUrls = require("@atlaskit/editor-common/quick-insert/snippet-preview-image-urls");
 var _useQuickInsertContext = require("@atlaskit/editor-common/quick-insert/use-quick-insert-context");
 var _apps = _interopRequireDefault(require("@atlaskit/icon/core/apps"));
-var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
+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; }
 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 _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
   var _useQuickInsertContex = (0, _useQuickInsertContext.useQuickInsertContext)(),
     editorView = _useQuickInsertContex.editorView,
     isOffline = _useQuickInsertContex.isOffline;
@@ -38,14 +43,24 @@ var LegacyQuickInsertProviderMenuItem = function LegacyQuickInsertProviderMenuIt
   var itemKey = item.key === undefined ? undefined : String(item.key);
   var snippetKeyPrefix = 'snippet-extension:snippet-';
   var previewKey = itemKey !== null && itemKey !== void 0 && itemKey.startsWith(snippetKeyPrefix) ? itemKey.slice(snippetKeyPrefix.length) : undefined;
-  var previewImageUrls = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_slash_command') && previewKey ? (0, _snippetPreviewImageUrls.getSnippetPreviewImageUrls)(previewKey) : undefined;
+  var fallbackPreviewImage = previewKey ? (0, _snippetPreviewImageUrls.getSnippetPreviewImageUrls)(previewKey) : undefined;
+  var preview = (0, _react.useMemo)(function () {
+    var _item$preview;
+    return (_item$preview = item.preview) !== null && _item$preview !== void 0 ? _item$preview : fallbackPreviewImage ? {
+      image: fallbackPreviewImage,
+      attribution: {
+        name: formatMessage(_messages.messages.previewAttributionAtlassian)
+      }
+    } : undefined;
+  }, [formatMessage, fallbackPreviewImage, item.preview]);
   return /*#__PURE__*/_react.default.createElement(_menuItem.QuickInsertMenuItem, {
+    description: item.description,
     iconBefore: Icon ? /*#__PURE__*/_react.default.createElement(Icon, null) : /*#__PURE__*/_react.default.createElement(_apps.default, {
       label: ""
     }),
     isDisabled: isDisabled,
     onSelect: onSelect,
-    previewImageUrls: previewImageUrls,
+    preview: preview,
     shortcut: item.keyshortcut,
     title: item.title
   });

package/dist/es2019/ui/QuickInsertMenuFooterItem.js

@@ -25,6 +25,7 @@ export const QuickInsertMenuFooterItem = ({
     }),
     isDisabled: !(api !== null && api !== void 0 && api.quickInsert),
     onSelect: onSelect,
+    shouldShowPreview: false,
     shouldWrapIcon: false,
     title: formatMessage(toolbarInsertBlockMessages.viewMore)
   });

package/dist/es2019/ui/QuickInsertSectionOverflowMenuItem.js

@@ -27,6 +27,7 @@ export const QuickInsertSectionOverflowMenuItem = ({
     }),
     isDisabled: !(api !== null && api !== void 0 && api.quickInsert),
     onSelect: onSelect,
+    shouldShowPreview: false,
     title: formatMessage(toolbarInsertBlockMessages.viewMore)
   });
 };

package/dist/es2019/ui/RegistryElementBrowser/RegistryElementBrowser.js

@@ -4,6 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import IconButton from '@atlaskit/button/icon/button';
+import { messages } from '@atlaskit/editor-common/quick-insert';
 import { MENU, RECOMMENDED_SECTION } from '@atlaskit/editor-common/quick-insert/keys';
 import { getMenuFooterSectionKey } from '@atlaskit/editor-common/type-ahead-get-menu-footer-section-key';
 import { getSectionOverflowItemKey } from '@atlaskit/editor-common/type-ahead-get-section-overflow-item-key';
@@ -95,13 +96,6 @@ export const RegistryElementBrowser = ({
     setSelectedKey(undefined);
     onClearSelection();
   }, [onClearSelection]);
-  const onClearSearch = useCallback(() => {
-    var _searchInputRef$curre;
-    setQuery('');
-    setSelectedKey(undefined);
-    onClearSelection();
-    (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.focus();
-  }, [onClearSelection]);
   const onRegistrySelect = useCallback((key, handler) => {
     setSelectedKey(key);
     onSelect(handler);
@@ -179,11 +173,8 @@ export const RegistryElementBrowser = ({
   }), /*#__PURE__*/React.createElement(IconButton, {
     appearance: "subtle",
     icon: CrossIcon,
-    label: formatMessage({
-      defaultMessage: 'Clear search',
-      id: 'editor.quick-insert.clear-search'
-    }),
-    onClick: onClearSearch,
+    label: formatMessage(messages.close),
+    onClick: onClose,
     spacing: "compact"
   })))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", {
     className: ax(["_zulp1fka _1e0c11p5 _yv0e1xuv _lk4ji47z"])

package/dist/es2019/ui/RegistryElementBrowser/RegistryElementBrowserFooter.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import Button from '@atlaskit/button/default/button';
 import LinkButton from '@atlaskit/button/link';
+import { messages } from '@atlaskit/editor-common/quick-insert';
 import { Inline, Text } from '@atlaskit/primitives/compiled';
 export const RegistryElementBrowserFooter = ({
   helpUrl,
@@ -46,8 +47,5 @@ export const RegistryElementBrowserFooter = ({
   })), /*#__PURE__*/React.createElement(Button, {
     appearance: "subtle",
     onClick: onClose
-  }, formatMessage({
-    defaultMessage: 'Close',
-    id: 'editor.quick-insert.close'
-  }))));
+  }, formatMessage(messages.close))));
 };

package/dist/es2019/ui/getLegacyCompatibleComponents.js

@@ -1,16 +1,20 @@
-import React from 'react';
+import React, { useMemo } from 'react';
+import { useIntl } from 'react-intl';
 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 { messages as quickInsertMessages } from '@atlaskit/editor-common/quick-insert/messages';
 import { getSnippetPreviewImageUrls } from '@atlaskit/editor-common/quick-insert/snippet-preview-image-urls';
 import { useQuickInsertContext } from '@atlaskit/editor-common/quick-insert/use-quick-insert-context';
 import AppsIcon from '@atlaskit/icon/core/apps';
-import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 const LegacyQuickInsertProviderMenuItem = ({
   item,
   onInsert
 }) => {
+  const {
+    formatMessage
+  } = useIntl();
   const {
     editorView,
     isOffline
@@ -30,14 +34,24 @@ const LegacyQuickInsertProviderMenuItem = ({
   const itemKey = item.key === undefined ? undefined : String(item.key);
   const snippetKeyPrefix = 'snippet-extension:snippet-';
   const previewKey = itemKey !== null && itemKey !== void 0 && itemKey.startsWith(snippetKeyPrefix) ? itemKey.slice(snippetKeyPrefix.length) : undefined;
-  const previewImageUrls = isExperimentEnabled('platform_editor_slash_command') && previewKey ? getSnippetPreviewImageUrls(previewKey) : undefined;
+  const fallbackPreviewImage = previewKey ? getSnippetPreviewImageUrls(previewKey) : undefined;
+  const preview = useMemo(() => {
+    var _item$preview;
+    return (_item$preview = item.preview) !== null && _item$preview !== void 0 ? _item$preview : fallbackPreviewImage ? {
+      image: fallbackPreviewImage,
+      attribution: {
+        name: formatMessage(quickInsertMessages.previewAttributionAtlassian)
+      }
+    } : undefined;
+  }, [formatMessage, fallbackPreviewImage, item.preview]);
   return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
+    description: item.description,
     iconBefore: Icon ? /*#__PURE__*/React.createElement(Icon, null) : /*#__PURE__*/React.createElement(AppsIcon, {
       label: ""
     }),
     isDisabled: isDisabled,
     onSelect: onSelect,
-    previewImageUrls: previewImageUrls,
+    preview: preview,
     shortcut: item.keyshortcut,
     title: item.title
   });

package/dist/esm/ui/QuickInsertMenuFooterItem.js

@@ -22,6 +22,7 @@ export var QuickInsertMenuFooterItem = function QuickInsertMenuFooterItem(_ref)
     }),
     isDisabled: !(api !== null && api !== void 0 && api.quickInsert),
     onSelect: onSelect,
+    shouldShowPreview: false,
     shouldWrapIcon: false,
     title: formatMessage(toolbarInsertBlockMessages.viewMore)
   });

package/dist/esm/ui/QuickInsertSectionOverflowMenuItem.js

@@ -24,6 +24,7 @@ export var QuickInsertSectionOverflowMenuItem = function QuickInsertSectionOverf
     }),
     isDisabled: !(api !== null && api !== void 0 && api.quickInsert),
     onSelect: onSelect,
+    shouldShowPreview: false,
     title: formatMessage(toolbarInsertBlockMessages.viewMore)
   });
 };

package/dist/esm/ui/RegistryElementBrowser/RegistryElementBrowser.js

@@ -5,6 +5,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import IconButton from '@atlaskit/button/icon/button';
+import { messages } from '@atlaskit/editor-common/quick-insert';
 import { MENU, RECOMMENDED_SECTION } from '@atlaskit/editor-common/quick-insert/keys';
 import { getMenuFooterSectionKey } from '@atlaskit/editor-common/type-ahead-get-menu-footer-section-key';
 import { getSectionOverflowItemKey } from '@atlaskit/editor-common/type-ahead-get-section-overflow-item-key';
@@ -114,13 +115,6 @@ export var RegistryElementBrowser = function RegistryElementBrowser(_ref) {
     setSelectedKey(undefined);
     onClearSelection();
   }, [onClearSelection]);
-  var onClearSearch = useCallback(function () {
-    var _searchInputRef$curre;
-    setQuery('');
-    setSelectedKey(undefined);
-    onClearSelection();
-    (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 || _searchInputRef$curre.focus();
-  }, [onClearSelection]);
   var onRegistrySelect = useCallback(function (key, handler) {
     setSelectedKey(key);
     onSelect(handler);
@@ -200,11 +194,8 @@ export var RegistryElementBrowser = function RegistryElementBrowser(_ref) {
   }), /*#__PURE__*/React.createElement(IconButton, {
     appearance: "subtle",
     icon: CrossIcon,
-    label: formatMessage({
-      defaultMessage: 'Clear search',
-      id: 'editor.quick-insert.clear-search'
-    }),
-    onClick: onClearSearch,
+    label: formatMessage(messages.close),
+    onClick: onClose,
     spacing: "compact"
   })))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", {
     className: ax(["_zulp1fka _1e0c11p5 _yv0e1xuv _lk4ji47z"])

package/dist/esm/ui/RegistryElementBrowser/RegistryElementBrowserFooter.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import Button from '@atlaskit/button/default/button';
 import LinkButton from '@atlaskit/button/link';
+import { messages } from '@atlaskit/editor-common/quick-insert';
 import { Inline, Text } from '@atlaskit/primitives/compiled';
 export var RegistryElementBrowserFooter = function RegistryElementBrowserFooter(_ref) {
   var helpUrl = _ref.helpUrl,
@@ -44,8 +45,5 @@ export var RegistryElementBrowserFooter = function RegistryElementBrowserFooter(
   })), /*#__PURE__*/React.createElement(Button, {
     appearance: "subtle",
     onClick: onClose
-  }, formatMessage({
-    defaultMessage: 'Close',
-    id: 'editor.quick-insert.close'
-  }))));
+  }, formatMessage(messages.close))));
 };

package/dist/esm/ui/getLegacyCompatibleComponents.js

@@ -2,18 +2,21 @@ 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 React, { useMemo } from 'react';
+import { useIntl } from 'react-intl';
 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 { messages as quickInsertMessages } from '@atlaskit/editor-common/quick-insert/messages';
 import { getSnippetPreviewImageUrls } from '@atlaskit/editor-common/quick-insert/snippet-preview-image-urls';
 import { useQuickInsertContext } from '@atlaskit/editor-common/quick-insert/use-quick-insert-context';
 import AppsIcon from '@atlaskit/icon/core/apps';
-import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 var LegacyQuickInsertProviderMenuItem = function LegacyQuickInsertProviderMenuItem(_ref) {
   var item = _ref.item,
     onInsert = _ref.onInsert;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
   var _useQuickInsertContex = useQuickInsertContext(),
     editorView = _useQuickInsertContex.editorView,
     isOffline = _useQuickInsertContex.isOffline;
@@ -31,14 +34,24 @@ var LegacyQuickInsertProviderMenuItem = function LegacyQuickInsertProviderMenuIt
   var itemKey = item.key === undefined ? undefined : String(item.key);
   var snippetKeyPrefix = 'snippet-extension:snippet-';
   var previewKey = itemKey !== null && itemKey !== void 0 && itemKey.startsWith(snippetKeyPrefix) ? itemKey.slice(snippetKeyPrefix.length) : undefined;
-  var previewImageUrls = isExperimentEnabled('platform_editor_slash_command') && previewKey ? getSnippetPreviewImageUrls(previewKey) : undefined;
+  var fallbackPreviewImage = previewKey ? getSnippetPreviewImageUrls(previewKey) : undefined;
+  var preview = useMemo(function () {
+    var _item$preview;
+    return (_item$preview = item.preview) !== null && _item$preview !== void 0 ? _item$preview : fallbackPreviewImage ? {
+      image: fallbackPreviewImage,
+      attribution: {
+        name: formatMessage(quickInsertMessages.previewAttributionAtlassian)
+      }
+    } : undefined;
+  }, [formatMessage, fallbackPreviewImage, item.preview]);
   return /*#__PURE__*/React.createElement(QuickInsertMenuItem, {
+    description: item.description,
     iconBefore: Icon ? /*#__PURE__*/React.createElement(Icon, null) : /*#__PURE__*/React.createElement(AppsIcon, {
       label: ""
     }),
     isDisabled: isDisabled,
     onSelect: onSelect,
-    previewImageUrls: previewImageUrls,
+    preview: preview,
     shortcut: item.keyshortcut,
     title: item.title
   });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-quick-insert",
-	"version": "21.1.2",
+	"version": "21.1.3",
 	"description": "Quick insert plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,7 +32,7 @@
 		"@atlaskit/editor-plugin-connectivity": "^21.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^23.0.0",
 		"@atlaskit/editor-plugin-metrics": "^22.0.0",
-		"@atlaskit/editor-plugin-type-ahead": "^22.0.0",
+		"@atlaskit/editor-plugin-type-ahead": "^22.1.0",
 		"@atlaskit/editor-plugin-ui-control-registry": "^15.0.0",
 		"@atlaskit/editor-prosemirror": "^9.0.0",
 		"@atlaskit/editor-tables": "^3.2.0",
@@ -44,7 +44,7 @@
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/primitives": "^22.5.0",
 		"@atlaskit/textfield": "^10.2.0",
-		"@atlaskit/tmp-editor-statsig": "^208.0.0",
+		"@atlaskit/tmp-editor-statsig": "^209.0.0",
 		"@atlaskit/tokens": "^20.0.0",
 		"@atlaskit/tooltip": "^24.3.0",
 		"@babel/runtime": "^7.0.0",
@@ -52,7 +52,7 @@
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^125.2.0",
+		"@atlaskit/editor-common": "^125.4.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"