@atlaskit/editor-plugin-insert-block 18.0.6 → 18.1.1

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 18.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 18.1.0
+
+### Minor Changes
+
+- [`df59babd59961`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/df59babd59961) -
+  Use registered Quick Insert items in both primary toolbar implementations when
+  `platform_editor_slash_command` is enabled, independently of the controls and AIFC experiments.
+  Share the registered menu model through an explicit editor-common subpath and use compact
+  presentation for typeahead and toolbar items.
+
+  Virtualize the toolbar menu, keep keyboard-selected items visible, and restore the bounded popup's
+  themed background and scrolling. Dismiss the popup on outside clicks and inset the search field
+  from its edges. When the experiment is enabled, ignore absent legacy Quick Insert handlers to
+  prevent suggestion crashes.
+
+  Provide persisted toolbar docking preferences in editor examples to support testing the primary
+  toolbar Insert menu.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 18.0.6
 
 ### Patch Changes

package/dist/cjs/ui/ToolbarInsertBlock/block-insert-element-browser.js

@@ -1,14 +1,15 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BlockInsertElementBrowser = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _ui = require("@atlaskit/editor-common/ui");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _InsertMenu = _interopRequireWildcard(require("../ElementBrowser/InsertMenu"));
+var _RegisteredInsertMenuContent = require("../registered-insert-menu/RegisteredInsertMenuContent");
 var _dropdownButton = require("./dropdown-button");
 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); }
 // This determines how the popup should fit. We prefer the insert menu
@@ -16,6 +17,15 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 // top if there is more than sufficient room.
 var FIT_HEIGHT_BUFFER = 100;
 var BlockInsertElementBrowser = exports.BlockInsertElementBrowser = function BlockInsertElementBrowser(props) {
+  var togglePlusMenuVisibility = props.togglePlusMenuVisibility,
+    plusButtonRef = props.plusButtonRef;
+  var closeRegisteredMenu = (0, _react.useCallback)(function () {
+    return togglePlusMenuVisibility();
+  }, [togglePlusMenuVisibility]);
+  var closeRegisteredMenuAndRestoreFocus = (0, _react.useCallback)(function () {
+    togglePlusMenuVisibility();
+    plusButtonRef === null || plusButtonRef === void 0 || plusButtonRef.focus();
+  }, [togglePlusMenuVisibility, plusButtonRef]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, props.open && /*#__PURE__*/_react.default.createElement(_ui.Popup, {
     target: props.plusButtonRef,
     fitHeight: _InsertMenu.DEFAULT_HEIGHT + FIT_HEIGHT_BUFFER,
@@ -28,7 +38,15 @@ var BlockInsertElementBrowser = exports.BlockInsertElementBrowser = function Blo
     scrollableElement: props.popupsScrollableElement,
     preventOverflow: true,
     alignX: "right"
-  }, /*#__PURE__*/_react.default.createElement(_InsertMenu.default, {
+  }, (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_slash_command') ? /*#__PURE__*/_react.default.createElement(_RegisteredInsertMenuContent.RegisteredInsertMenuContent, {
+    api: props.pluginInjectionApi,
+    editorView: props.editorView,
+    isOffline: Boolean(props.isEditorOffline),
+    onClose: closeRegisteredMenuAndRestoreFocus,
+    onDismiss: closeRegisteredMenu,
+    onSelect: closeRegisteredMenu,
+    target: props.plusButtonRef
+  }) : /*#__PURE__*/_react.default.createElement(_InsertMenu.default, {
     editorView: props.editorView,
     dropdownItems: props.items,
     onInsert: props.onInsert,

package/dist/cjs/ui/ToolbarInsertBlock/block-insert-menu.js

@@ -6,10 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BlockInsertMenu = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _blockInsertElementBrowser = require("./block-insert-element-browser");
 var _dropdownButton = require("./dropdown-button");
 var BlockInsertMenu = exports.BlockInsertMenu = function BlockInsertMenu(props) {
-  if (props.items.length === 0 && !props.showElementBrowserLink) {
+  if (props.items.length === 0 && !props.showElementBrowserLink && !(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_slash_command')) {
     return null;
   }
   if (props.disabled) {
@@ -43,6 +44,7 @@ var BlockInsertMenu = exports.BlockInsertMenu = function BlockInsertMenu(props)
     spacing: props.spacing,
     togglePlusMenuVisibility: props.togglePlusMenuVisibility,
     showElementBrowserLink: props.showElementBrowserLink,
+    isEditorOffline: props.isEditorOffline,
     pluginInjectionApi: props.pluginInjectionApi,
     isFullPageAppearance: props.isFullPageAppearance
   });

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

@@ -25,6 +25,7 @@ var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _uiReact = require("@atlaskit/editor-common/ui-react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _picker = require("@atlaskit/emoji/picker");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
 var _filterDropdownItems = require("../toolbar-components/hooks/filterDropdownItems");
@@ -683,7 +684,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         var value = _ref8.value;
         return value.name === 'table selector';
       });
-      if (buttons.length === 0 && dropdownItems.length === 0) {
+      if (buttons.length === 0 && dropdownItems.length === 0 && !(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_slash_command')) {
         return null;
       }
       var toolbarButtons = [];
@@ -790,6 +791,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         onInsert: this.insertInsertMenuItem,
         togglePlusMenuVisibility: this.togglePlusMenuVisibility,
         showElementBrowserLink: this.props.showElementBrowserLink || false,
+        isEditorOffline: this.props.isEditorOffline,
         pluginInjectionApi: this.props.pluginInjectionApi,
         isFullPageAppearance: isFullPageAppearance
       })), (!((_this$props$pluginInj = this.props.pluginInjectionApi) !== null && _this$props$pluginInj !== void 0 && _this$props$pluginInj.primaryToolbar) && this.props.showSeparator || isFullPageAppearance && (0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1')) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */

package/dist/cjs/ui/registered-insert-menu/RegisteredInsertButton.js

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RegisteredInsertButton = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntl = require("react-intl");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _ui = require("@atlaskit/editor-common/ui");
+var _connectivityPluginType = require("@atlaskit/editor-plugin-connectivity/connectivityPluginType");
+var _constants = require("@atlaskit/editor-shared-styles/constants");
+var _addIcon = require("@atlaskit/editor-toolbar/add-icon");
+var _toolbarButton = require("@atlaskit/editor-toolbar/toolbar-button");
+var _toolbarTooltip = require("@atlaskit/editor-toolbar/toolbar-tooltip");
+var _uiContext = require("@atlaskit/editor-toolbar/ui-context");
+var _RegisteredInsertMenuContent = require("./RegisteredInsertMenuContent");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var DEFAULT_MENU_MAX_HEIGHT = 520;
+var FIT_HEIGHT_BUFFER = 100;
+var POPUP_OFFSET = [0, 3];
+/**
+ * The toolbar owns its popup lifecycle, but renders the same registered items
+ * and menu model as slash command.
+ */
+var RegisteredInsertButton = exports.RegisteredInsertButton = function RegisteredInsertButton(_ref) {
+  var api = _ref.api;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorView = _useEditorToolbar.editorView;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useToolbarUI = (0, _uiContext.useToolbarUI)(),
+    isDisabled = _useToolbarUI.isDisabled,
+    popupsBoundariesElement = _useToolbarUI.popupsBoundariesElement,
+    popupsMountPoint = _useToolbarUI.popupsMountPoint,
+    popupsScrollableElement = _useToolbarUI.popupsScrollableElement;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var buttonRef = (0, _react.useRef)(null);
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['connectivity', 'typeAhead'], function (states) {
+      var _states$connectivityS, _states$typeAheadStat;
+      return {
+        connectivityMode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode,
+        isAllowed: (_states$typeAheadStat = states.typeAheadState) === null || _states$typeAheadStat === void 0 ? void 0 : _states$typeAheadStat.isAllowed
+      };
+    }),
+    connectivityMode = _useSharedPluginState.connectivityMode,
+    isAllowed = _useSharedPluginState.isAllowed;
+  var close = (0, _react.useCallback)(function () {
+    var restoreFocus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    setIsOpen(false);
+    if (restoreFocus) {
+      requestAnimationFrame(function () {
+        var _buttonRef$current;
+        return (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
+      });
+    }
+  }, []);
+  var open = (0, _react.useCallback)(function () {
+    setIsOpen(true);
+  }, []);
+  var onPopupUnmount = (0, _react.useCallback)(function () {
+    // Outside dismissal must not move focus away from the element that was clicked.
+    setIsOpen(false);
+  }, []);
+  var closeAndRestoreFocus = (0, _react.useCallback)(function () {
+    return close(true);
+  }, [close]);
+  var closeForSelection = (0, _react.useCallback)(function () {
+    return close(false);
+  }, [close]);
+  if (!(api !== null && api !== void 0 && api.insertBlock) || !editorView) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_toolbarTooltip.ToolbarTooltip, {
+    content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+      description: formatMessage(_messages.toolbarInsertBlockMessages.insertMenu),
+      keymap: _keymaps.insertElements
+    })
+  }, /*#__PURE__*/_react.default.createElement(_toolbarButton.ToolbarButton, {
+    ariaKeyshortcuts: (0, _keymaps.getAriaKeyshortcuts)(_keymaps.insertElements),
+    iconBefore: /*#__PURE__*/_react.default.createElement(_addIcon.AddIcon, {
+      size: "small",
+      label: formatMessage(_messages.toolbarInsertBlockMessages.insertMenu)
+    }),
+    isDisabled: !isAllowed || isDisabled,
+    isSelected: isOpen,
+    onClick: isOpen ? function () {
+      return close(true);
+    } : open,
+    ref: buttonRef,
+    testId: _toolbar.TOOLBAR_BUTTON_TEST_ID.INSERT
+  })), isOpen && buttonRef.current && /*#__PURE__*/_react.default.createElement(_ui.Popup, {
+    alignX: "right",
+    boundariesElement: popupsBoundariesElement,
+    fitHeight: DEFAULT_MENU_MAX_HEIGHT + FIT_HEIGHT_BUFFER,
+    fitWidth: 350,
+    mountTo: popupsMountPoint,
+    offset: POPUP_OFFSET,
+    onUnmount: onPopupUnmount,
+    preventOverflow: true,
+    scrollableElement: popupsScrollableElement,
+    target: buttonRef.current,
+    zIndex: _constants.akEditorMenuZIndex
+  }, /*#__PURE__*/_react.default.createElement(_RegisteredInsertMenuContent.RegisteredInsertMenuContent, {
+    api: api,
+    editorView: editorView,
+    isOffline: (0, _connectivityPluginType.isOfflineMode)(connectivityMode),
+    onClose: closeAndRestoreFocus,
+    onDismiss: closeForSelection,
+    onSelect: closeForSelection,
+    target: buttonRef.current
+  })));
+};

package/dist/cjs/ui/registered-insert-menu/RegisteredInsertMenu.compiled.css

@@ -0,0 +1,11 @@
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
+._1rjcutpp{padding-block:var(--ds-space-150,9pt)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
+._18m915vq{overflow-y:hidden}
+._1bsb1edt{width:350px}
+._1e0c1txw{display:flex}
+._1o9zidpf{flex-shrink:0}
+._1reo15vq{overflow-x:hidden}
+._2lx21bp4{flex-direction:column}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._c71l1lk4{max-height:520px}

package/dist/cjs/ui/registered-insert-menu/RegisteredInsertMenu.js

@@ -0,0 +1,154 @@
+/* RegisteredInsertMenu.tsx generated by @compiled/babel-plugin v3.0.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RegisteredInsertMenu = void 0;
+require("./RegisteredInsertMenu.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _browserApis = require("@atlaskit/browser-apis");
+var _reactIntl = require("react-intl");
+var _messages = require("@atlaskit/editor-common/messages");
+var _registeredMenuModel = require("@atlaskit/editor-common/quick-insert/registered-menu-model");
+var _keys = require("@atlaskit/editor-common/quick-insert/keys");
+var _typeAheadSurfaceContext = require("@atlaskit/editor-common/type-ahead-surface-context");
+var _createSurfaceContext = require("@atlaskit/editor-ui-control-model/create-surface-context");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _textField = _interopRequireDefault(require("@atlaskit/textfield/text-field"));
+var _RegisteredInsertMenuList = require("./RegisteredInsertMenuList");
+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 _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var DEFAULT_MENU_MAX_HEIGHT = 520;
+var styles = {
+  menu: "_2rko12b0 _1reo15vq _18m915vq _bfhk1bhr _16qs130s _1e0c1txw _2lx21bp4 _c71l1lk4 _1bsb1edt",
+  search: "_1rjcutpp _18zrutpp _1o9zidpf"
+};
+var RegisteredInsertMenu = exports.RegisteredInsertMenu = function RegisteredInsertMenu(_ref) {
+  var components = _ref.components,
+    editorView = _ref.editorView,
+    isOffline = _ref.isOffline,
+    onClose = _ref.onClose,
+    onSelect = _ref.onSelect;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var listId = (0, _react.useId)();
+  var _useState = (0, _react.useState)(function () {
+      return Symbol('registered-insert-menu-open');
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
+    menuOpenId = _useState2[0];
+  var _useState3 = (0, _react.useState)(''),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    query = _useState4[0],
+    setQuery = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    selectedItemIndex = _useState6[0],
+    setSelectedItemIndex = _useState6[1];
+  var _useState7 = (0, _react.useState)({
+      startIndex: -1,
+      stopIndex: -1
+    }),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    renderedItems = _useState8[0],
+    setRenderedItems = _useState8[1];
+  var surfaceContext = (0, _react.useMemo)(function () {
+    return (0, _createSurfaceContext.createSurfaceContext)(_typeAheadSurfaceContext.TYPE_AHEAD_SURFACE_CONTEXT, {
+      menuOpenId: menuOpenId
+    });
+  }, [menuOpenId]);
+  var model = (0, _react.useMemo)(function () {
+    return query === '' ? (0, _registeredMenuModel.buildQuickInsertMenuModel)(components, _keys.MENU, undefined, surfaceContext) : (0, _registeredMenuModel.getMatchingQuickInsertComponents)({
+      components: components,
+      formatMessage: formatMessage,
+      query: query,
+      rootComponent: _keys.MENU,
+      surfaceContext: surfaceContext
+    });
+  }, [components, formatMessage, query, surfaceContext]);
+  var itemCount = (0, _react.useMemo)(function () {
+    return model.sections.reduce(function (count, _ref2) {
+      var _ref3 = (0, _toArray2.default)(_ref2),
+        items = _arrayLikeToArray(_ref3).slice(1);
+      return count + items.length;
+    }, 0) + (model.footer ? 1 : 0);
+  }, [model.footer, model.sections]);
+  var isActiveItemMounted = selectedItemIndex >= 0 && selectedItemIndex < itemCount && (selectedItemIndex >= renderedItems.startIndex && selectedItemIndex <= renderedItems.stopIndex || Boolean(model.footer) && selectedItemIndex === itemCount - 1);
+  var activeItemId = "".concat(listId, "-").concat(selectedItemIndex);
+  var selectNextItem = (0, _react.useCallback)(function () {
+    setSelectedItemIndex(function (index) {
+      return itemCount === 0 ? -1 : (index + 1) % itemCount;
+    });
+  }, [itemCount]);
+  var selectPreviousItem = (0, _react.useCallback)(function () {
+    setSelectedItemIndex(function (index) {
+      return itemCount === 0 ? -1 : index <= 0 ? itemCount - 1 : index - 1;
+    });
+  }, [itemCount]);
+  var selectActiveItem = (0, _react.useCallback)(function () {
+    if (isActiveItemMounted) {
+      var _getDocument;
+      (_getDocument = (0, _browserApis.getDocument)()) === null || _getDocument === void 0 || (_getDocument = _getDocument.getElementById(activeItemId)) === null || _getDocument === void 0 || _getDocument.click();
+    }
+  }, [activeItemId, isActiveItemMounted]);
+  var onQueryChange = (0, _react.useCallback)(function (event) {
+    setQuery(event.currentTarget.value);
+    setSelectedItemIndex(0);
+  }, []);
+  var onKeyDown = (0, _react.useCallback)(function (event) {
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        selectNextItem();
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        selectPreviousItem();
+        break;
+      case 'Enter':
+        event.preventDefault();
+        selectActiveItem();
+        break;
+      case 'Escape':
+        event.preventDefault();
+        onClose();
+        break;
+    }
+  }, [onClose, selectActiveItem, selectNextItem, selectPreviousItem]);
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    "data-registered-insert-menu": "",
+    testId: "registered-insert-menu",
+    onKeyDownCapture: onKeyDown,
+    xcss: styles.menu
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.search
+  }, /*#__PURE__*/_react.default.createElement(_textField.default, {
+    "aria-activedescendant": isActiveItemMounted ? activeItemId : undefined,
+    "aria-controls": listId,
+    "aria-expanded": "true",
+    autoFocus: true,
+    placeholder: "Search",
+    role: "combobox",
+    value: query,
+    onChange: onQueryChange
+  })), /*#__PURE__*/_react.default.createElement(_RegisteredInsertMenuList.RegisteredInsertMenuList, {
+    editorView: editorView,
+    isOffline: isOffline,
+    listId: listId,
+    listLabel: formatMessage(_messages.toolbarInsertBlockMessages.insertMenu),
+    maxHeight: DEFAULT_MENU_MAX_HEIGHT,
+    menuOpenId: menuOpenId,
+    model: model,
+    onClose: onSelect,
+    onItemHover: setSelectedItemIndex,
+    onRenderedItemsChange: setRenderedItems,
+    selectedItemIndex: selectedItemIndex,
+    surfaceContext: surfaceContext
+  }));
+};

package/dist/cjs/ui/registered-insert-menu/RegisteredInsertMenuContent.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RegisteredInsertMenuContent = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _keys = require("@atlaskit/editor-common/quick-insert/keys");
+var _ui = require("@atlaskit/editor-common/ui");
+var _RegisteredInsertMenu = require("./RegisteredInsertMenu");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var RegisteredInsertMenuContainer = function RegisteredInsertMenuContainer(_ref) {
+  var children = _ref.children;
+  var setOutsideClickTargetRef = (0, _react.useContext)(_ui.PlainOutsideClickTargetRefContext);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: setOutsideClickTargetRef
+  }, children);
+};
+var RegisteredInsertMenuWithListeners = (0, _ui.withOuterListeners)(RegisteredInsertMenuContainer);
+var RegisteredInsertMenuContent = exports.RegisteredInsertMenuContent = function RegisteredInsertMenuContent(_ref2) {
+  var api = _ref2.api,
+    editorView = _ref2.editorView,
+    isOffline = _ref2.isOffline,
+    onClose = _ref2.onClose,
+    onDismiss = _ref2.onDismiss,
+    onSelect = _ref2.onSelect,
+    target = _ref2.target;
+  // Keep registrations stable while the open menu is searched or navigated.
+  var _useState = (0, _react.useState)(function () {
+      var _api$uiControlRegistr, _api$uiControlRegistr2;
+      return (_api$uiControlRegistr = api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(_keys.MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
+    components = _useState2[0];
+  var onClickOutside = (0, _react.useCallback)(function (event) {
+    if (event.target instanceof Node && target !== null && target !== void 0 && target.contains(event.target)) {
+      return;
+    }
+    onDismiss();
+  }, [onDismiss, target]);
+  return /*#__PURE__*/_react.default.createElement(RegisteredInsertMenuWithListeners, {
+    handleClickOutside: onClickOutside
+  }, /*#__PURE__*/_react.default.createElement(_RegisteredInsertMenu.RegisteredInsertMenu, {
+    components: components,
+    editorView: editorView,
+    isOffline: isOffline,
+    onClose: onClose,
+    onSelect: onSelect
+  }));
+};

package/dist/cjs/ui/registered-insert-menu/RegisteredInsertMenuItem.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RegisteredInsertMenuItem = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _insert = require("@atlaskit/editor-common/insert");
+var _provider = require("@atlaskit/editor-common/quick-insert/provider");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var RegisteredInsertMenuItem = exports.RegisteredInsertMenuItem = function RegisteredInsertMenuItem(_ref) {
+  var _registration$compone;
+  var editorView = _ref.editorView,
+    id = _ref.id,
+    isOffline = _ref.isOffline,
+    isSelected = _ref.isSelected,
+    menuOpenId = _ref.menuOpenId,
+    onClose = _ref.onClose,
+    registration = _ref.registration,
+    surfaceContext = _ref.surfaceContext;
+  var Component = (_registration$compone = registration.component) !== null && _registration$compone !== void 0 ? _registration$compone : _react.default.Fragment;
+  var select = (0, _react.useCallback)(function (selectionHandler) {
+    // Close first so a registered item may safely focus the editor or open its picker.
+    onClose();
+    queueMicrotask(function () {
+      var state = editorView.state;
+      var insert = function insert(content) {
+        var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+        return (0, _insert.insertSelectedItem)(content, options)(state, state.tr, state.selection.head);
+      };
+      var transaction = selectionHandler({
+        insert: insert,
+        source: _analytics.INPUT_METHOD.INSERT_MENU
+      });
+      if (transaction) {
+        editorView.dispatch(transaction);
+      }
+    });
+  }, [editorView, onClose]);
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
+      editorView: editorView,
+      isOffline: isOffline,
+      item: {
+        id: id,
+        isSelected: isSelected
+      },
+      menuOpenId: menuOpenId,
+      select: select,
+      surface: 'toolbar',
+      surfaceContext: surfaceContext
+    };
+  }, [editorView, id, isOffline, isSelected, menuOpenId, select, surfaceContext]);
+  return /*#__PURE__*/_react.default.createElement(_provider.QuickInsertProvider, {
+    value: contextValue
+  }, /*#__PURE__*/_react.default.createElement(Component, null, null));
+};

package/dist/cjs/ui/registered-insert-menu/RegisteredInsertMenuList.compiled.css

@@ -0,0 +1,4 @@
+._1rjc1b66{padding-block:var(--ds-space-050,4px)}._15a5nqa1{border-top-style:solid}
+._1i531l7x{border-top-color:var(--ds-border,#0b120e24)}
+._1o9zidpf{flex-shrink:0}
+._uwhke4h9{border-top-width:var(--ds-border-width,1px)}