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

package/dist/es2019/ui/registered-insert-menu/RegisteredInsertMenuList.js

@@ -0,0 +1,161 @@
+/* RegisteredInsertMenuList.tsx generated by @compiled/babel-plugin v3.0.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./RegisteredInsertMenuList.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
+import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
+import { List } from 'react-virtualized/dist/commonjs/List';
+import { Box } from '@atlaskit/primitives/compiled';
+import { RegisteredInsertMenuItem } from './RegisteredInsertMenuItem';
+const ESTIMATED_ROW_HEIGHT = 56;
+const MENU_FOOTER_HEIGHT = 52;
+const MENU_SEARCH_HEIGHT = 64;
+const LIST_WIDTH = 350;
+const listAriaProps = {
+  // @ts-expect-error react-virtualized forwards null to omit its grid-only default; its types exclude null.
+  'aria-readonly': null
+};
+const styles = {
+  footer: "_1rjc1b66 _1i531l7x _15a5nqa1 _uwhke4h9 _1o9zidpf"
+};
+export const RegisteredInsertMenuList = ({
+  editorView,
+  isOffline,
+  listId,
+  listLabel,
+  maxHeight,
+  menuOpenId,
+  model,
+  onClose,
+  onItemHover,
+  onRenderedItemsChange,
+  selectedItemIndex,
+  surfaceContext
+}) => {
+  var _model$root$component, _model$root;
+  const Root = (_model$root$component = (_model$root = model.root) === null || _model$root === void 0 ? void 0 : _model$root.component) !== null && _model$root$component !== void 0 ? _model$root$component : React.Fragment;
+  const listRef = useRef(null);
+  const rows = useMemo(() => model.sections.flat(), [model.sections]);
+  const cache = useMemo(() => new CellMeasurerCache({
+    defaultHeight: ESTIMATED_ROW_HEIGHT,
+    fixedWidth: true
+  }), []);
+  const itemIndexByRowIndex = useMemo(() => {
+    const indexes = new Map();
+    let itemIndex = 0;
+    rows.forEach((registration, rowIndex) => {
+      if (registration.type === 'menu-item') {
+        indexes.set(rowIndex, itemIndex++);
+      }
+    });
+    return indexes;
+  }, [rows]);
+  const selectedRowIndex = useMemo(() => {
+    for (const [rowIndex, itemIndex] of itemIndexByRowIndex) {
+      if (itemIndex === selectedItemIndex) {
+        return rowIndex;
+      }
+    }
+    return -1;
+  }, [itemIndexByRowIndex, selectedItemIndex]);
+  const rowKeySignature = useMemo(() => rows.map(({
+    key,
+    type
+  }) => `${type}:${key}`).join('\0'), [rows]);
+  useLayoutEffect(() => {
+    var _listRef$current, _listRef$current2;
+    cache.clearAll();
+    (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.recomputeRowHeights();
+    (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 ? void 0 : _listRef$current2.scrollToPosition(0);
+  }, [cache, rowKeySignature]);
+  const onRowsRendered = useCallback(({
+    overscanStartIndex,
+    overscanStopIndex
+  }) => {
+    var _indexes$, _indexes;
+    const indexes = [...itemIndexByRowIndex].filter(([rowIndex]) => rowIndex >= overscanStartIndex && rowIndex <= overscanStopIndex).map(([, itemIndex]) => itemIndex);
+    onRenderedItemsChange({
+      startIndex: (_indexes$ = indexes[0]) !== null && _indexes$ !== void 0 ? _indexes$ : -1,
+      stopIndex: (_indexes = indexes[indexes.length - 1]) !== null && _indexes !== void 0 ? _indexes : -1
+    });
+  }, [itemIndexByRowIndex, onRenderedItemsChange]);
+  const renderRow = useCallback(({
+    index,
+    key,
+    parent,
+    style
+  }) => {
+    var _registration$compone;
+    const registration = rows[index];
+    if (!registration) {
+      return null;
+    }
+    const itemIndex = itemIndexByRowIndex.get(index);
+    const rowContent = registration.type === 'menu-section' ? ( /*#__PURE__*/React.createElement((_registration$compone = registration.component) !== null && _registration$compone !== void 0 ? _registration$compone : React.Fragment, null, null)) : /*#__PURE__*/React.createElement("div", {
+      onMouseMove: () => onItemHover(itemIndex !== null && itemIndex !== void 0 ? itemIndex : 0)
+    }, /*#__PURE__*/React.createElement(RegisteredInsertMenuItem, {
+      editorView: editorView,
+      id: `${listId}-${itemIndex}`,
+      isOffline: isOffline,
+      isSelected: itemIndex === selectedItemIndex,
+      menuOpenId: menuOpenId,
+      onClose: onClose,
+      registration: registration,
+      surfaceContext: surfaceContext
+    }));
+    return /*#__PURE__*/React.createElement(CellMeasurer, {
+      key: key,
+      cache: cache,
+      parent: parent,
+      columnIndex: 0,
+      rowIndex: index
+    }, ({
+      registerChild
+    }) => /*#__PURE__*/React.createElement("div", {
+      ref: element => registerChild === null || registerChild === void 0 ? void 0 : registerChild(element !== null && element !== void 0 ? element : undefined),
+      "data-index": index
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      ,
+      style: style
+    }, rowContent));
+  }, [cache, editorView, isOffline, itemIndexByRowIndex, listId, menuOpenId, onClose, onItemHover, rows, selectedItemIndex, surfaceContext]);
+  const footerItemIndex = itemIndexByRowIndex.size;
+  const listMaxHeight = Math.max(0, maxHeight - MENU_SEARCH_HEIGHT - (model.footer ? MENU_FOOTER_HEIGHT : 0));
+  const onFooterItemHover = useCallback(() => onItemHover(footerItemIndex), [footerItemIndex, onItemHover]);
+  if (!model.root) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Root, null, /*#__PURE__*/React.createElement(Box, {
+    "aria-label": listLabel,
+    id: listId,
+    role: "listbox"
+  }, rows.length > 0 && /*#__PURE__*/React.createElement(List
+  // eslint-disable-next-line react/jsx-props-no-spreading -- Omits the library's grid-only ARIA default without declaring it on the group role.
+  , _extends({}, listAriaProps, {
+    tabIndex: null,
+    containerRole: "presentation",
+    height: Math.min(rows.length * ESTIMATED_ROW_HEIGHT, listMaxHeight),
+    overscanRowCount: 3,
+    onRowsRendered: onRowsRendered,
+    ref: listRef,
+    role: "group",
+    rowCount: rows.length,
+    rowHeight: cache.rowHeight,
+    rowRenderer: renderRow,
+    scrollToAlignment: "auto",
+    scrollToIndex: selectedRowIndex,
+    width: LIST_WIDTH
+  })), model.footer && /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.footer,
+    onMouseMove: onFooterItemHover
+  }, /*#__PURE__*/React.createElement(RegisteredInsertMenuItem, {
+    editorView: editorView,
+    id: `${listId}-${footerItemIndex}`,
+    isOffline: isOffline,
+    isSelected: footerItemIndex === selectedItemIndex,
+    menuOpenId: menuOpenId,
+    onClose: onClose,
+    registration: model.footer,
+    surfaceContext: surfaceContext
+  }))));
+};

package/dist/es2019/ui/toolbar-components.js

@@ -6,6 +6,8 @@ import { resolveToolbarConfig } from './toolbar-components/config-resolver';
 import { EmojiButton } from './toolbar-components/EmojiButton';
 import { ImageButton } from './toolbar-components/ImageButton';
 import { InsertButton } from './toolbar-components/InsertButton';
+import { RegisteredInsertButton } from './registered-insert-menu/RegisteredInsertButton';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { LayoutButton } from './toolbar-components/LayoutButton';
 import { MediaButton } from './toolbar-components/MediaButton';
 import { MentionButton } from './toolbar-components/MentionButton';
@@ -239,7 +241,9 @@ export const getToolbarComponents = ({
   // Insert Group
   if ((_config$insert = config.insert) !== null && _config$insert !== void 0 && _config$insert.enabled) {
     const createInsertButtonComponent = breakpoint => {
-      return () => /*#__PURE__*/React.createElement(InsertButton, {
+      return () => isExperimentEnabled('platform_editor_slash_command') ? /*#__PURE__*/React.createElement(RegisteredInsertButton, {
+        api: api
+      }) : /*#__PURE__*/React.createElement(InsertButton, {
         api: api,
         breakpoint: breakpoint,
         toolbarConfig: config,

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

@@ -1,12 +1,23 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Popup } from '@atlaskit/editor-common/ui';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import InsertMenu, { DEFAULT_HEIGHT } from '../ElementBrowser/InsertMenu';
+import { RegisteredInsertMenuContent } from '../registered-insert-menu/RegisteredInsertMenuContent';
 import { DropDownButton } from './dropdown-button';
 // This determines how the popup should fit. We prefer the insert menu
 // opening on the bottom as we have a search bar and should only open on
 // top if there is more than sufficient room.
 var FIT_HEIGHT_BUFFER = 100;
 export var BlockInsertElementBrowser = function BlockInsertElementBrowser(props) {
+  var togglePlusMenuVisibility = props.togglePlusMenuVisibility,
+    plusButtonRef = props.plusButtonRef;
+  var closeRegisteredMenu = useCallback(function () {
+    return togglePlusMenuVisibility();
+  }, [togglePlusMenuVisibility]);
+  var closeRegisteredMenuAndRestoreFocus = useCallback(function () {
+    togglePlusMenuVisibility();
+    plusButtonRef === null || plusButtonRef === void 0 || plusButtonRef.focus();
+  }, [togglePlusMenuVisibility, plusButtonRef]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, props.open && /*#__PURE__*/React.createElement(Popup, {
     target: props.plusButtonRef,
     fitHeight: DEFAULT_HEIGHT + FIT_HEIGHT_BUFFER,
@@ -19,7 +30,15 @@ export var BlockInsertElementBrowser = function BlockInsertElementBrowser(props)
     scrollableElement: props.popupsScrollableElement,
     preventOverflow: true,
     alignX: "right"
-  }, /*#__PURE__*/React.createElement(InsertMenu, {
+  }, isExperimentEnabled('platform_editor_slash_command') ? /*#__PURE__*/React.createElement(RegisteredInsertMenuContent, {
+    api: props.pluginInjectionApi,
+    editorView: props.editorView,
+    isOffline: Boolean(props.isEditorOffline),
+    onClose: closeRegisteredMenuAndRestoreFocus,
+    onDismiss: closeRegisteredMenu,
+    onSelect: closeRegisteredMenu,
+    target: props.plusButtonRef
+  }) : /*#__PURE__*/React.createElement(InsertMenu, {
     editorView: props.editorView,
     dropdownItems: props.items,
     onInsert: props.onInsert,

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

@@ -1,8 +1,9 @@
 import React from 'react';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { BlockInsertElementBrowser } from './block-insert-element-browser';
 import { DropDownButton } from './dropdown-button';
 export var BlockInsertMenu = function BlockInsertMenu(props) {
-  if (props.items.length === 0 && !props.showElementBrowserLink) {
+  if (props.items.length === 0 && !props.showElementBrowserLink && !isExperimentEnabled('platform_editor_slash_command')) {
     return null;
   }
   if (props.disabled) {
@@ -36,6 +37,7 @@ export var BlockInsertMenu = function BlockInsertMenu(props) {
     spacing: props.spacing,
     togglePlusMenuVisibility: props.togglePlusMenuVisibility,
     showElementBrowserLink: props.showElementBrowserLink,
+    isEditorOffline: props.isEditorOffline,
     pluginInjectionApi: props.pluginInjectionApi,
     isFullPageAppearance: props.isFullPageAppearance
   });

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

@@ -33,6 +33,7 @@ import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 import { EmojiPicker as AkEmojiPicker } from '@atlaskit/emoji/picker';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-namespace
 import { fg } from '@atlaskit/platform-feature-flags/fg';
@@ -677,7 +678,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         var value = _ref8.value;
         return value.name === 'table selector';
       });
-      if (buttons.length === 0 && dropdownItems.length === 0) {
+      if (buttons.length === 0 && dropdownItems.length === 0 && !isExperimentEnabled('platform_editor_slash_command')) {
         return null;
       }
       var toolbarButtons = [];
@@ -784,6 +785,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         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 && editorExperiment('platform_editor_controls', 'variant1')) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */

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

@@ -0,0 +1,113 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { getAriaKeyshortcuts, insertElements, ToolTipContent } from '@atlaskit/editor-common/keymaps';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { TOOLBAR_BUTTON_TEST_ID, useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity/connectivityPluginType';
+import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles/constants';
+import { AddIcon } from '@atlaskit/editor-toolbar/add-icon';
+import { ToolbarButton } from '@atlaskit/editor-toolbar/toolbar-button';
+import { ToolbarTooltip } from '@atlaskit/editor-toolbar/toolbar-tooltip';
+import { useToolbarUI } from '@atlaskit/editor-toolbar/ui-context';
+import { RegisteredInsertMenuContent } from './RegisteredInsertMenuContent';
+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.
+ */
+export var RegisteredInsertButton = function RegisteredInsertButton(_ref) {
+  var api = _ref.api;
+  var _useEditorToolbar = useEditorToolbar(),
+    editorView = _useEditorToolbar.editorView;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var _useToolbarUI = useToolbarUI(),
+    isDisabled = _useToolbarUI.isDisabled,
+    popupsBoundariesElement = _useToolbarUI.popupsBoundariesElement,
+    popupsMountPoint = _useToolbarUI.popupsMountPoint,
+    popupsScrollableElement = _useToolbarUI.popupsScrollableElement;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var buttonRef = useRef(null);
+  var _useSharedPluginState = 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 = 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 = useCallback(function () {
+    setIsOpen(true);
+  }, []);
+  var onPopupUnmount = useCallback(function () {
+    // Outside dismissal must not move focus away from the element that was clicked.
+    setIsOpen(false);
+  }, []);
+  var closeAndRestoreFocus = useCallback(function () {
+    return close(true);
+  }, [close]);
+  var closeForSelection = useCallback(function () {
+    return close(false);
+  }, [close]);
+  if (!(api !== null && api !== void 0 && api.insertBlock) || !editorView) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToolbarTooltip, {
+    content: /*#__PURE__*/React.createElement(ToolTipContent, {
+      description: formatMessage(messages.insertMenu),
+      keymap: insertElements
+    })
+  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+    ariaKeyshortcuts: getAriaKeyshortcuts(insertElements),
+    iconBefore: /*#__PURE__*/React.createElement(AddIcon, {
+      size: "small",
+      label: formatMessage(messages.insertMenu)
+    }),
+    isDisabled: !isAllowed || isDisabled,
+    isSelected: isOpen,
+    onClick: isOpen ? function () {
+      return close(true);
+    } : open,
+    ref: buttonRef,
+    testId: TOOLBAR_BUTTON_TEST_ID.INSERT
+  })), isOpen && buttonRef.current && /*#__PURE__*/React.createElement(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: akEditorMenuZIndex
+  }, /*#__PURE__*/React.createElement(RegisteredInsertMenuContent, {
+    api: api,
+    editorView: editorView,
+    isOffline: isOfflineMode(connectivityMode),
+    onClose: closeAndRestoreFocus,
+    onDismiss: closeForSelection,
+    onSelect: closeForSelection,
+    target: buttonRef.current
+  })));
+};

package/dist/esm/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/esm/ui/registered-insert-menu/RegisteredInsertMenu.js

@@ -0,0 +1,145 @@
+/* RegisteredInsertMenu.tsx generated by @compiled/babel-plugin v3.0.1 */
+import _toArray from "@babel/runtime/helpers/toArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./RegisteredInsertMenu.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+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; }
+import React, { useCallback, useId, useMemo, useState } from 'react';
+import { getDocument } from '@atlaskit/browser-apis';
+import { useIntl } from 'react-intl';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { buildQuickInsertMenuModel, getMatchingQuickInsertComponents } from '@atlaskit/editor-common/quick-insert/registered-menu-model';
+import { MENU } from '@atlaskit/editor-common/quick-insert/keys';
+import { TYPE_AHEAD_SURFACE_CONTEXT } from '@atlaskit/editor-common/type-ahead-surface-context';
+import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/create-surface-context';
+import { Box } from '@atlaskit/primitives/compiled';
+import Textfield from '@atlaskit/textfield/text-field';
+import { RegisteredInsertMenuList } from './RegisteredInsertMenuList';
+var DEFAULT_MENU_MAX_HEIGHT = 520;
+var styles = {
+  menu: "_2rko12b0 _1reo15vq _18m915vq _bfhk1bhr _16qs130s _1e0c1txw _2lx21bp4 _c71l1lk4 _1bsb1edt",
+  search: "_1rjcutpp _18zrutpp _1o9zidpf"
+};
+export var RegisteredInsertMenu = function RegisteredInsertMenu(_ref) {
+  var components = _ref.components,
+    editorView = _ref.editorView,
+    isOffline = _ref.isOffline,
+    onClose = _ref.onClose,
+    onSelect = _ref.onSelect;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var listId = useId();
+  var _useState = useState(function () {
+      return Symbol('registered-insert-menu-open');
+    }),
+    _useState2 = _slicedToArray(_useState, 1),
+    menuOpenId = _useState2[0];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    query = _useState4[0],
+    setQuery = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selectedItemIndex = _useState6[0],
+    setSelectedItemIndex = _useState6[1];
+  var _useState7 = useState({
+      startIndex: -1,
+      stopIndex: -1
+    }),
+    _useState8 = _slicedToArray(_useState7, 2),
+    renderedItems = _useState8[0],
+    setRenderedItems = _useState8[1];
+  var surfaceContext = useMemo(function () {
+    return createSurfaceContext(TYPE_AHEAD_SURFACE_CONTEXT, {
+      menuOpenId: menuOpenId
+    });
+  }, [menuOpenId]);
+  var model = useMemo(function () {
+    return query === '' ? buildQuickInsertMenuModel(components, MENU, undefined, surfaceContext) : getMatchingQuickInsertComponents({
+      components: components,
+      formatMessage: formatMessage,
+      query: query,
+      rootComponent: MENU,
+      surfaceContext: surfaceContext
+    });
+  }, [components, formatMessage, query, surfaceContext]);
+  var itemCount = useMemo(function () {
+    return model.sections.reduce(function (count, _ref2) {
+      var _ref3 = _toArray(_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 = useCallback(function () {
+    setSelectedItemIndex(function (index) {
+      return itemCount === 0 ? -1 : (index + 1) % itemCount;
+    });
+  }, [itemCount]);
+  var selectPreviousItem = useCallback(function () {
+    setSelectedItemIndex(function (index) {
+      return itemCount === 0 ? -1 : index <= 0 ? itemCount - 1 : index - 1;
+    });
+  }, [itemCount]);
+  var selectActiveItem = useCallback(function () {
+    if (isActiveItemMounted) {
+      var _getDocument;
+      (_getDocument = getDocument()) === null || _getDocument === void 0 || (_getDocument = _getDocument.getElementById(activeItemId)) === null || _getDocument === void 0 || _getDocument.click();
+    }
+  }, [activeItemId, isActiveItemMounted]);
+  var onQueryChange = useCallback(function (event) {
+    setQuery(event.currentTarget.value);
+    setSelectedItemIndex(0);
+  }, []);
+  var onKeyDown = 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.createElement(Box, {
+    "data-registered-insert-menu": "",
+    testId: "registered-insert-menu",
+    onKeyDownCapture: onKeyDown,
+    xcss: styles.menu
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.search
+  }, /*#__PURE__*/React.createElement(Textfield, {
+    "aria-activedescendant": isActiveItemMounted ? activeItemId : undefined,
+    "aria-controls": listId,
+    "aria-expanded": "true",
+    autoFocus: true,
+    placeholder: "Search",
+    role: "combobox",
+    value: query,
+    onChange: onQueryChange
+  })), /*#__PURE__*/React.createElement(RegisteredInsertMenuList, {
+    editorView: editorView,
+    isOffline: isOffline,
+    listId: listId,
+    listLabel: formatMessage(messages.insertMenu),
+    maxHeight: DEFAULT_MENU_MAX_HEIGHT,
+    menuOpenId: menuOpenId,
+    model: model,
+    onClose: onSelect,
+    onItemHover: setSelectedItemIndex,
+    onRenderedItemsChange: setRenderedItems,
+    selectedItemIndex: selectedItemIndex,
+    surfaceContext: surfaceContext
+  }));
+};

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

@@ -0,0 +1,44 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useContext, useState } from 'react';
+import { MENU } from '@atlaskit/editor-common/quick-insert/keys';
+import { PlainOutsideClickTargetRefContext, withOuterListeners } from '@atlaskit/editor-common/ui';
+import { RegisteredInsertMenu } from './RegisteredInsertMenu';
+var RegisteredInsertMenuContainer = function RegisteredInsertMenuContainer(_ref) {
+  var children = _ref.children;
+  var setOutsideClickTargetRef = useContext(PlainOutsideClickTargetRefContext);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: setOutsideClickTargetRef
+  }, children);
+};
+var RegisteredInsertMenuWithListeners = withOuterListeners(RegisteredInsertMenuContainer);
+export var 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 = 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(MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
+    }),
+    _useState2 = _slicedToArray(_useState, 1),
+    components = _useState2[0];
+  var onClickOutside = useCallback(function (event) {
+    if (event.target instanceof Node && target !== null && target !== void 0 && target.contains(event.target)) {
+      return;
+    }
+    onDismiss();
+  }, [onDismiss, target]);
+  return /*#__PURE__*/React.createElement(RegisteredInsertMenuWithListeners, {
+    handleClickOutside: onClickOutside
+  }, /*#__PURE__*/React.createElement(RegisteredInsertMenu, {
+    components: components,
+    editorView: editorView,
+    isOffline: isOffline,
+    onClose: onClose,
+    onSelect: onSelect
+  }));
+};

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

@@ -0,0 +1,51 @@
+import React, { useCallback, useMemo } from 'react';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { insertSelectedItem } from '@atlaskit/editor-common/insert';
+import { QuickInsertProvider } from '@atlaskit/editor-common/quick-insert/provider';
+export var 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.Fragment;
+  var select = 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 insertSelectedItem(content, options)(state, state.tr, state.selection.head);
+      };
+      var transaction = selectionHandler({
+        insert: insert,
+        source: INPUT_METHOD.INSERT_MENU
+      });
+      if (transaction) {
+        editorView.dispatch(transaction);
+      }
+    });
+  }, [editorView, onClose]);
+  var contextValue = 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.createElement(QuickInsertProvider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(Component, null, null));
+};

package/dist/esm/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)}