@atlaskit/editor-plugin-quick-insert 15.1.4 → 16.0.0

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

@@ -0,0 +1,97 @@
+const compareRanks = (left, right) => {
+  for (let index = 0; index < Math.max(left.length, right.length); index++) {
+    var _left$index, _right$index;
+    const difference = ((_left$index = left[index]) !== null && _left$index !== void 0 ? _left$index : 0) - ((_right$index = right[index]) !== null && _right$index !== void 0 ? _right$index : 0);
+    if (difference !== 0) {
+      return difference;
+    }
+  }
+  return 0;
+};
+const isVisible = registration => {
+  var _registration$isHidde;
+  return ((_registration$isHidde = registration.isHidden) === null || _registration$isHidde === void 0 ? void 0 : _registration$isHidde.call(registration)) !== true;
+};
+const getChildren = (components, parentKey) => components.filter(component => {
+  var _component$parents;
+  return isVisible(component) && ((_component$parents = component.parents) === null || _component$parents === void 0 ? void 0 : _component$parents.some(parent => parent.key === parentKey));
+});
+const getParentRank = (registration, parentKey) => {
+  var _registration$parents, _registration$parents2, _registration$parents3;
+  return (_registration$parents = (_registration$parents2 = registration.parents) === null || _registration$parents2 === void 0 ? void 0 : (_registration$parents3 = _registration$parents2.find(parent => parent.key === parentKey)) === null || _registration$parents3 === void 0 ? void 0 : _registration$parents3.rank) !== null && _registration$parents !== void 0 ? _registration$parents : Number.MAX_SAFE_INTEGER;
+};
+const getDescendantItems = (components, parentKey, ancestorRanks, sectionKey) => getChildren(components, parentKey).flatMap(component => {
+  const ranks = [...ancestorRanks, getParentRank(component, parentKey)];
+  if (component.type === 'menu-item') {
+    return component.component ? [{
+      ranks,
+      registration: component,
+      sectionKeys: [sectionKey]
+    }] : [];
+  }
+  return getDescendantItems(components, component.key, ranks, sectionKey);
+});
+
+/**
+ * Builds the Element Browser's immutable open-time view of the Quick Insert registry.
+ * The caller provides only components rooted at the Quick Insert menu surface.
+ */
+export const createRegistryElementBrowserModel = (components, {
+  footerKey,
+  overflowKeys,
+  recommendedSectionKey,
+  rootKey
+}) => {
+  const excludedKeys = new Set([footerKey, recommendedSectionKey, ...overflowKeys]);
+  const visibleComponents = components.filter(component => isVisible(component) && !excludedKeys.has(component.key));
+  const sections = getChildren(visibleComponents, rootKey).filter(component => component.type === 'menu-section').map(section => ({
+    key: section.key,
+    rank: getParentRank(section, rootKey)
+  })).sort((left, right) => left.rank - right.rank);
+  const itemByKey = new Map();
+  sections.forEach(section => {
+    getDescendantItems(visibleComponents, section.key, [section.rank], section.key).forEach(item => {
+      const existing = itemByKey.get(item.registration.key);
+      if (!existing) {
+        itemByKey.set(item.registration.key, item);
+        return;
+      }
+      const sectionKeys = [...new Set([...existing.sectionKeys, ...item.sectionKeys])];
+      itemByKey.set(item.registration.key, compareRanks(item.ranks, existing.ranks) < 0 ? {
+        ...item,
+        sectionKeys
+      } : {
+        ...existing,
+        sectionKeys
+      });
+    });
+  });
+  return {
+    items: [...itemByKey.values()].sort((left, right) => compareRanks(left.ranks, right.ranks)),
+    sections
+  };
+};
+export const getInitialRegistryElementBrowserSection = (model, requestedSection) => model.sections.some(section => section.key === requestedSection) ? requestedSection : undefined;
+export const getRegistryElementBrowserItems = ({
+  formatMessage,
+  model,
+  query,
+  section
+}) => {
+  const normalizedQuery = query.trim();
+  const items = section ? model.items.filter(item => item.sectionKeys.includes(section)) : model.items;
+  if (!normalizedQuery) {
+    return items;
+  }
+  return items.flatMap(item => {
+    var _item$registration$ma, _item$registration;
+    const result = (_item$registration$ma = (_item$registration = item.registration).match) === null || _item$registration$ma === void 0 ? void 0 : _item$registration$ma.call(_item$registration, {
+      formatMessage,
+      query: normalizedQuery
+    });
+    return result ? [{
+      ...item,
+      score: Math.min(1, Math.max(0, result.score))
+    }] : [];
+  }).sort((left, right) => left.score - right.score || compareRanks(left.ranks, right.ranks) || left.registration.key.localeCompare(right.registration.key));
+};

package/dist/esm/entry-points/registry-element-browser.js

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { RegistryElementBrowser } from '../ui/RegistryElementBrowser/RegistryElementBrowser';

package/dist/esm/quickInsertPlugin.js

@@ -22,6 +22,7 @@ import { pluginKey } from './pm-plugins/plugin-key';
 import { getLegacyCompatibleComponents } from './ui/getLegacyCompatibleComponents';
 import { getQuickInsertComponents } from './ui/getQuickInsertComponents';
 import ModalElementBrowser from './ui/ModalElementBrowser';
+import { RegistryElementBrowserContainer } from './ui/RegistryElementBrowser';
 import { getQuickInsertSuggestions, withLayoutQuickInsertPrioritySorting } from './ui/search';
 export var quickInsertPlugin = function quickInsertPlugin(_ref) {
   var options = _ref.config,
@@ -81,7 +82,9 @@ export var quickInsertPlugin = function quickInsertPlugin(_ref) {
       return {
         title: formatMessage(messages.viewMore),
         ariaLabel: formatMessage(messages.viewMoreAriaLabel),
-        onClick: _openElementBrowserModal,
+        onClick: function onClick(props) {
+          return openElementBrowser()(props);
+        },
         iconBefore: /*#__PURE__*/React.createElement(ShowMoreHorizontalIcon, {
           label: ""
         })
@@ -108,7 +111,7 @@ export var quickInsertPlugin = function quickInsertPlugin(_ref) {
           tr: tr
         });
       }
-      return openElementBrowserCommand(options)({
+      return (isExperimentEnabled('platform_editor_slash_command') ? openElementBrowserCommand(options) : _openElementBrowserModal)({
         tr: tr
       });
     };
@@ -153,7 +156,11 @@ export var quickInsertPlugin = function quickInsertPlugin(_ref) {
         return null;
       }
       if (options !== null && options !== void 0 && options.enableElementBrowser) {
-        return /*#__PURE__*/React.createElement(ModalElementBrowser, {
+        return isExperimentEnabled('platform_editor_slash_command') && api !== null && api !== void 0 && api.uiControlRegistry ? /*#__PURE__*/React.createElement(RegistryElementBrowserContainer, {
+          editorView: editorView,
+          helpUrl: options === null || options === void 0 ? void 0 : options.elementBrowserHelpUrl,
+          pluginInjectionAPI: api
+        }) : /*#__PURE__*/React.createElement(ModalElementBrowser, {
           editorView: editorView,
           helpUrl: options === null || options === void 0 ? void 0 : options.elementBrowserHelpUrl,
           pluginInjectionAPI: api

package/dist/esm/ui/RegistryElementBrowser/RegistryElementBrowser.compiled.css

@@ -0,0 +1,2 @@
+._zulp1ejb{gap:var(--ds-space-300,24px)}._1e0c11p5{display:grid}
+._yv0eo9bh{grid-template-columns:minmax(0,1fr) minmax(0,3fr)}

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

@@ -0,0 +1,167 @@
+/* RegistryElementBrowser.tsx generated by @compiled/babel-plugin v2.0.0 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./RegistryElementBrowser.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
+import Heading from '@atlaskit/heading/heading';
+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';
+import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTransition } from '@atlaskit/modal-dialog';
+import { createRegistryElementBrowserModel, getInitialRegistryElementBrowserSection, getRegistryElementBrowserItems } from './model';
+import { RegistryElementBrowserCategories } from './RegistryElementBrowserCategories';
+import { RegistryElementBrowserFooter } from './RegistryElementBrowserFooter';
+import { RegistryElementBrowserSearchResults } from './RegistryElementBrowserSearchResults';
+var browserLayoutStyles = null;
+var resultsId = 'registry-element-browser-results';
+export var RegistryElementBrowser = function RegistryElementBrowser(_ref) {
+  var components = _ref.components,
+    emptyStateHandler = _ref.emptyStateHandler,
+    defaultSection = _ref.defaultSection,
+    helpUrl = _ref.helpUrl,
+    editorView = _ref.editorView,
+    isOffline = _ref.isOffline,
+    isOpen = _ref.isOpen,
+    onClearSelection = _ref.onClearSelection,
+    onClose = _ref.onClose,
+    onCloseComplete = _ref.onCloseComplete,
+    onConfirmInsert = _ref.onConfirmInsert,
+    onSelect = _ref.onSelect;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var model = useMemo(function () {
+    return createRegistryElementBrowserModel(components, {
+      footerKey: getMenuFooterSectionKey(MENU.key),
+      overflowKeys: new Set(components.filter(function (component) {
+        return component.type === 'menu-section';
+      }).map(function (component) {
+        return getSectionOverflowItemKey(component.key);
+      })),
+      recommendedSectionKey: RECOMMENDED_SECTION.key,
+      rootKey: MENU.key
+    });
+  }, [components]);
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    query = _useState2[0],
+    setQuery = _useState2[1];
+  var _useState3 = useState(function () {
+      return getInitialRegistryElementBrowserSection(model, defaultSection);
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    section = _useState4[0],
+    setSection = _useState4[1];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selectedKey = _useState6[0],
+    setSelectedKey = _useState6[1];
+  var wasOpen = useRef(false);
+  var previousIsOffline = useRef(isOffline);
+  useEffect(function () {
+    if (isOpen && !wasOpen.current) {
+      setQuery('');
+      setSection(getInitialRegistryElementBrowserSection(model, defaultSection));
+      // This clears local visual state and the parent-held insertion handler together.
+      // eslint-disable-next-line @atlassian/perf-linting/no-chain-state-updates
+      setSelectedKey(undefined);
+      onClearSelection();
+    }
+    wasOpen.current = isOpen;
+  }, [defaultSection, isOpen, model, onClearSelection]);
+  var items = useMemo(function () {
+    return getRegistryElementBrowserItems({
+      formatMessage: formatMessage,
+      model: model,
+      query: query,
+      section: query ? undefined : section
+    });
+  }, [formatMessage, model, query, section]);
+  useEffect(function () {
+    if (previousIsOffline.current !== isOffline) {
+      setSelectedKey(undefined);
+      onClearSelection();
+    }
+    previousIsOffline.current = isOffline;
+  }, [isOffline, onClearSelection]);
+  var onSearchChange = useCallback(function (event) {
+    setQuery(event.currentTarget.value);
+    setSection(undefined);
+    setSelectedKey(undefined);
+    onClearSelection();
+  }, [onClearSelection]);
+  var onSectionClick = useCallback(function (event) {
+    setQuery('');
+    setSection(event.currentTarget.dataset.section || undefined);
+    setSelectedKey(undefined);
+    onClearSelection();
+  }, [onClearSelection]);
+  var onRegistrySelect = useCallback(function (key, handler) {
+    setSelectedKey(key);
+    onSelect(handler);
+  }, [onSelect]);
+  var onKeyDown = useCallback(function (event) {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      var _resultCollection$que;
+      var resultCollection = event.currentTarget.ownerDocument.getElementById(resultsId);
+      var options = Array.from((_resultCollection$que = resultCollection === null || resultCollection === void 0 ? void 0 : resultCollection.querySelectorAll('[role="option"]:not([aria-disabled="true"]):not([disabled])')) !== null && _resultCollection$que !== void 0 ? _resultCollection$que : []);
+      var currentIndex = options.findIndex(function (option) {
+        return option === event.currentTarget.ownerDocument.activeElement;
+      });
+      var nextIndex = event.key === 'ArrowDown' ? currentIndex + 1 : currentIndex - 1;
+      var nextOption = options.at(nextIndex);
+      if (nextOption) {
+        event.preventDefault();
+        nextOption.focus();
+      }
+      return;
+    }
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      onClose();
+      return;
+    }
+    if (event.key === 'Enter' && selectedKey) {
+      event.preventDefault();
+      onConfirmInsert();
+    }
+  }, [onClose, onConfirmInsert, selectedKey]);
+  return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(Modal, {
+    label: formatMessage({
+      defaultMessage: 'Insert elements',
+      id: 'editor.quick-insert.title'
+    }),
+    onClose: onClose,
+    onCloseComplete: onCloseComplete,
+    width: "x-large"
+  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(Heading, {
+    size: "medium"
+  }, formatMessage({
+    defaultMessage: 'Insert elements',
+    id: 'editor.quick-insert.title'
+  }))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_zulp1ejb _1e0c11p5 _yv0eo9bh"])
+  }, /*#__PURE__*/React.createElement(RegistryElementBrowserCategories, {
+    query: query,
+    section: section,
+    sections: model.sections,
+    onSectionClick: onSectionClick
+  }), /*#__PURE__*/React.createElement(RegistryElementBrowserSearchResults, {
+    editorView: editorView,
+    emptyStateHandler: emptyStateHandler,
+    isOffline: isOffline,
+    items: items,
+    query: query,
+    resultsId: resultsId,
+    section: section,
+    selectedKey: selectedKey,
+    onKeyDown: onKeyDown,
+    onSearchChange: onSearchChange,
+    onSelect: onRegistrySelect
+  }))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(RegistryElementBrowserFooter, {
+    helpUrl: helpUrl,
+    isInsertEnabled: Boolean(selectedKey),
+    onClose: onClose,
+    onConfirmInsert: onConfirmInsert
+  }))));
+};

package/dist/esm/ui/RegistryElementBrowser/RegistryElementBrowserCategories.compiled.css

@@ -0,0 +1,2 @@
+._zulpu2gc{gap:var(--ds-space-100,8px)}._1e0c11p5{display:grid}
+._yv0e9sye{grid-template-columns:repeat(2,minmax(0,1fr))}

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

@@ -0,0 +1,45 @@
+/* RegistryElementBrowserCategories.tsx generated by @compiled/babel-plugin v2.0.0 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./RegistryElementBrowserCategories.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { useIntl } from 'react-intl';
+import Button from '@atlaskit/button/default/button';
+import { BLOCK_TEMPLATES_SECTION, DATA_AND_CHARTS_SECTION, EMBED_SECTION, MEDIA_SECTION, OTHER_SECTION, ROVO_SECTION, STRUCTURE_SECTION, TEXT_FORMATTING_SECTION } from '@atlaskit/editor-common/quick-insert/keys';
+import { messages } from '@atlaskit/editor-common/quick-insert/messages';
+var sectionMessages = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, BLOCK_TEMPLATES_SECTION.key, messages.categoryBlockTemplates), DATA_AND_CHARTS_SECTION.key, messages.categoryDataAndCharts), EMBED_SECTION.key, messages.categoryEmbed), MEDIA_SECTION.key, messages.categoryMedia), OTHER_SECTION.key, messages.categoryOther), ROVO_SECTION.key, messages.categoryRovo), STRUCTURE_SECTION.key, messages.categoryStructure), TEXT_FORMATTING_SECTION.key, messages.categoryTextFormatting);
+var categoryGridStyles = null;
+export var RegistryElementBrowserCategories = function RegistryElementBrowserCategories(_ref) {
+  var query = _ref.query,
+    section = _ref.section,
+    sections = _ref.sections,
+    onSectionClick = _ref.onSectionClick;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var isAllSelected = section === undefined && !query;
+  return /*#__PURE__*/React.createElement("div", {
+    "aria-label": formatMessage({
+      defaultMessage: 'Element categories',
+      id: 'editor.quick-insert.categories-label'
+    }),
+    "data-testid": "registry-element-browser-categories",
+    className: ax(["_zulpu2gc _1e0c11p5 _yv0e9sye"])
+  }, /*#__PURE__*/React.createElement(Button, {
+    appearance: isAllSelected ? 'primary' : 'subtle',
+    "aria-pressed": isAllSelected,
+    "data-section": "",
+    onClick: onSectionClick
+  }, formatMessage({
+    defaultMessage: 'All',
+    id: 'editor.quick-insert.all'
+  })), sections.map(function (entry) {
+    var _sectionMessages2;
+    return /*#__PURE__*/React.createElement(Button, {
+      appearance: section === entry.key && !query ? 'primary' : 'subtle',
+      "aria-pressed": section === entry.key && !query,
+      "data-section": entry.key,
+      key: entry.key,
+      onClick: onSectionClick
+    }, formatMessage((_sectionMessages2 = sectionMessages[entry.key]) !== null && _sectionMessages2 !== void 0 ? _sectionMessages2 : messages.categoryOther));
+  }));
+};

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import Button from '@atlaskit/button/default/button';
+import LinkButton from '@atlaskit/button/link';
+export var RegistryElementBrowserFooter = function RegistryElementBrowserFooter(_ref) {
+  var helpUrl = _ref.helpUrl,
+    isInsertEnabled = _ref.isInsertEnabled,
+    onClose = _ref.onClose,
+    onConfirmInsert = _ref.onConfirmInsert;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, helpUrl && /*#__PURE__*/React.createElement(LinkButton, {
+    appearance: "subtle",
+    href: helpUrl,
+    target: "_blank"
+  }, formatMessage({
+    defaultMessage: 'Help',
+    id: 'editor.quick-insert.help'
+  })), /*#__PURE__*/React.createElement(Button, {
+    appearance: "subtle",
+    onClick: onClose
+  }, formatMessage({
+    defaultMessage: 'Close',
+    id: 'editor.quick-insert.close'
+  })), /*#__PURE__*/React.createElement(Button, {
+    appearance: "primary",
+    isDisabled: !isInsertEnabled,
+    onClick: onConfirmInsert
+  }, formatMessage({
+    defaultMessage: 'Insert',
+    id: 'editor.quick-insert.insert'
+  })));
+};

package/dist/esm/ui/RegistryElementBrowser/RegistryElementBrowserSearchResults.compiled.css

@@ -0,0 +1,2 @@
+._zulpu2gc{gap:var(--ds-space-100,8px)}._1e0c11p5{display:grid}
+._yv0e13mt{grid-template-columns:repeat(3,minmax(0,1fr))}

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

@@ -0,0 +1,114 @@
+/* RegistryElementBrowserSearchResults.tsx generated by @compiled/babel-plugin v2.0.0 */
+import "./RegistryElementBrowserSearchResults.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useMemo } from 'react';
+import { useIntl } from 'react-intl';
+import LinkButton from '@atlaskit/button/link';
+import { QuickInsertProvider } from '@atlaskit/editor-common/quick-insert/provider';
+import { Stack, Text } from '@atlaskit/primitives/compiled';
+import Textfield from '@atlaskit/textfield';
+var resultsGridStyles = null;
+var RegistryElementBrowserItem = function RegistryElementBrowserItem(_ref) {
+  var editorView = _ref.editorView,
+    isOffline = _ref.isOffline,
+    isSelected = _ref.isSelected,
+    item = _ref.item,
+    onSelect = _ref.onSelect;
+  var _item$registration = item.registration,
+    Component = _item$registration.component,
+    key = _item$registration.key;
+  var contextValue = useMemo(function () {
+    return {
+      editorView: editorView,
+      isOffline: isOffline,
+      item: {
+        id: key,
+        isSelected: isSelected
+      },
+      select: function select(handler) {
+        return onSelect(key, handler);
+      },
+      surface: 'element-browser'
+    };
+  }, [editorView, isOffline, isSelected, key, onSelect]);
+  if (!Component) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(QuickInsertProvider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(Component, undefined, null));
+};
+export var RegistryElementBrowserSearchResults = function RegistryElementBrowserSearchResults(_ref2) {
+  var _emptyStateHandler;
+  var editorView = _ref2.editorView,
+    emptyStateHandler = _ref2.emptyStateHandler,
+    isOffline = _ref2.isOffline,
+    items = _ref2.items,
+    query = _ref2.query,
+    resultsId = _ref2.resultsId,
+    section = _ref2.section,
+    selectedKey = _ref2.selectedKey,
+    onKeyDown = _ref2.onKeyDown,
+    onSearchChange = _ref2.onSearchChange,
+    onSelect = _ref2.onSelect;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(Stack, {
+    space: "space.200"
+  }, /*#__PURE__*/React.createElement(Textfield, {
+    autoFocus: true,
+    "aria-controls": resultsId,
+    "aria-label": formatMessage({
+      defaultMessage: 'Search elements',
+      id: 'editor.quick-insert.search'
+    }),
+    name: "registry-element-browser-search",
+    onChange: onSearchChange,
+    onKeyDown: onKeyDown,
+    value: query
+  }), /*#__PURE__*/React.createElement(Text, {
+    "aria-live": "polite"
+  }, formatMessage({
+    defaultMessage: '{count} results',
+    id: 'editor.quick-insert.results'
+  }, {
+    count: items.length
+  })), /*#__PURE__*/React.createElement("div", {
+    "aria-label": formatMessage({
+      defaultMessage: 'Element results',
+      id: 'editor.quick-insert.results-label'
+    }),
+    "data-testid": "registry-element-browser-results",
+    id: resultsId,
+    onKeyDown: onKeyDown,
+    tabIndex: -1,
+    role: items.length ? 'listbox' : undefined,
+    className: ax(["_zulpu2gc _1e0c11p5 _yv0e13mt"])
+  }, items.length ? items.map(function (item) {
+    return /*#__PURE__*/React.createElement(RegistryElementBrowserItem, {
+      editorView: editorView,
+      isOffline: isOffline,
+      isSelected: selectedKey === item.registration.key,
+      item: item,
+      key: item.registration.key,
+      onSelect: onSelect
+    });
+  }) : (_emptyStateHandler = emptyStateHandler === null || emptyStateHandler === void 0 ? void 0 : emptyStateHandler({
+    mode: 'full',
+    searchTerm: query,
+    selectedCategory: section
+  })) !== null && _emptyStateHandler !== void 0 ? _emptyStateHandler : /*#__PURE__*/React.createElement(Stack, {
+    alignInline: "center",
+    space: "space.100"
+  }, /*#__PURE__*/React.createElement(Text, null, formatMessage({
+    defaultMessage: 'Nothing matches your search',
+    id: 'editor.quick-insert.empty'
+  })), /*#__PURE__*/React.createElement(LinkButton, {
+    appearance: "primary",
+    href: "https://marketplace.atlassian.com/search?category=Macros&hosting=cloud&product=confluence",
+    target: "_blank"
+  }, formatMessage({
+    defaultMessage: 'Explore Atlassian Marketplace',
+    id: 'editor.quick-insert.explore-marketplace'
+  })))));
+};

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

@@ -0,0 +1,135 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { isOfflineMode } from '@atlaskit/editor-common/connectivity/isOfflineMode';
+import { insertSelectedItem } from '@atlaskit/editor-common/insert';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { MENU } from '@atlaskit/editor-common/quick-insert/keys';
+import { closeElementBrowser } from '../../pm-plugins/commands';
+import { pluginKey } from '../../pm-plugins/plugin-key';
+import { RegistryElementBrowser } from './RegistryElementBrowser';
+export var RegistryElementBrowserContainer = function RegistryElementBrowserContainer(_ref) {
+  var _pluginKey$getState;
+  var editorView = _ref.editorView,
+    pluginInjectionAPI = _ref.pluginInjectionAPI,
+    helpUrl = _ref.helpUrl;
+  var _useSharedPluginState = useSharedPluginStateWithSelector(pluginInjectionAPI, ['quickInsert', 'connectivity'], function (state) {
+      var _state$quickInsertSta, _state$quickInsertSta2, _state$quickInsertSta3, _state$connectivitySt;
+      return {
+        isElementBrowserOpen: (_state$quickInsertSta = (_state$quickInsertSta2 = state.quickInsertState) === null || _state$quickInsertSta2 === void 0 ? void 0 : _state$quickInsertSta2.isElementBrowserOpen) !== null && _state$quickInsertSta !== void 0 ? _state$quickInsertSta : false,
+        emptyStateHandler: (_state$quickInsertSta3 = state.quickInsertState) === null || _state$quickInsertSta3 === void 0 ? void 0 : _state$quickInsertSta3.emptyStateHandler,
+        mode: (_state$connectivitySt = state.connectivityState) === null || _state$connectivitySt === void 0 ? void 0 : _state$connectivitySt.mode
+      };
+    }),
+    currentEmptyStateHandler = _useSharedPluginState.emptyStateHandler,
+    isElementBrowserOpen = _useSharedPluginState.isElementBrowserOpen,
+    mode = _useSharedPluginState.mode;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    snapshot = _useState2[0],
+    setSnapshot = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    emptyStateHandler = _useState4[0],
+    setEmptyStateHandler = _useState4[1];
+  var wasOpen = useRef(false);
+  var selectionHandler = useRef(undefined);
+  var isInsertConfirmed = useRef(false);
+  var lifecycleOpen = useRef(false);
+  var fireLifecycleEvent = useCallback(function (action) {
+    var _pluginInjectionAPI$a;
+    pluginInjectionAPI === null || pluginInjectionAPI === void 0 || (_pluginInjectionAPI$a = pluginInjectionAPI.analytics) === null || _pluginInjectionAPI$a === void 0 || _pluginInjectionAPI$a.actions.fireAnalyticsEvent({
+      action: action,
+      actionSubject: ACTION_SUBJECT.ELEMENT_BROWSER,
+      attributes: {
+        mode: 'full'
+      },
+      eventType: EVENT_TYPE.UI
+    });
+  }, [pluginInjectionAPI]);
+  useEffect(function () {
+    if (isElementBrowserOpen && !wasOpen.current) {
+      var _pluginInjectionAPI$u, _pluginInjectionAPI$u2;
+      setSnapshot((_pluginInjectionAPI$u = pluginInjectionAPI === null || pluginInjectionAPI === void 0 || (_pluginInjectionAPI$u2 = pluginInjectionAPI.uiControlRegistry) === null || _pluginInjectionAPI$u2 === void 0 ? void 0 : _pluginInjectionAPI$u2.actions.getComponents(MENU.key)) !== null && _pluginInjectionAPI$u !== void 0 ? _pluginInjectionAPI$u : []);
+      selectionHandler.current = undefined;
+      setEmptyStateHandler(function () {
+        return currentEmptyStateHandler;
+      });
+      isInsertConfirmed.current = false;
+      lifecycleOpen.current = true;
+      fireLifecycleEvent(ACTION.OPENED);
+    } else if (!isElementBrowserOpen && wasOpen.current && lifecycleOpen.current) {
+      lifecycleOpen.current = false;
+      fireLifecycleEvent(ACTION.CLOSED);
+    }
+    wasOpen.current = isElementBrowserOpen;
+  }, [currentEmptyStateHandler, fireLifecycleEvent, isElementBrowserOpen, pluginInjectionAPI]);
+  useEffect(function () {
+    return function () {
+      if (lifecycleOpen.current) {
+        lifecycleOpen.current = false;
+        fireLifecycleEvent(ACTION.CLOSED);
+      }
+    };
+  }, [fireLifecycleEvent]);
+  var focusInEditor = useCallback(function () {
+    if (!editorView.hasFocus()) {
+      editorView.focus();
+    }
+  }, [editorView]);
+  var onClose = useCallback(function () {
+    if (!isInsertConfirmed.current) {
+      selectionHandler.current = undefined;
+    }
+    closeElementBrowser()(editorView.state, editorView.dispatch);
+    focusInEditor();
+  }, [editorView, focusInEditor]);
+  var onCloseComplete = useCallback(function () {
+    var handler = isInsertConfirmed.current ? selectionHandler.current : undefined;
+    selectionHandler.current = undefined;
+    isInsertConfirmed.current = false;
+    focusInEditor();
+    if (!handler) {
+      return;
+    }
+    var insert = function insert(maybeNode) {
+      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      return insertSelectedItem(maybeNode, options)(editorView.state, editorView.state.tr, editorView.state.selection.head);
+    };
+    var transaction = handler({
+      insert: insert,
+      source: INPUT_METHOD.ELEMENT_BROWSER
+    });
+    if (transaction) {
+      editorView.dispatch(transaction);
+    }
+  }, [editorView, focusInEditor]);
+  var onSelect = useCallback(function (handler) {
+    selectionHandler.current = handler;
+  }, []);
+  var onClearSelection = useCallback(function () {
+    selectionHandler.current = undefined;
+    isInsertConfirmed.current = false;
+  }, []);
+  var onConfirmInsert = useCallback(function () {
+    if (!selectionHandler.current) {
+      return;
+    }
+    isInsertConfirmed.current = true;
+    onClose();
+  }, [onClose]);
+  return /*#__PURE__*/React.createElement(RegistryElementBrowser, {
+    components: snapshot,
+    emptyStateHandler: emptyStateHandler,
+    helpUrl: helpUrl,
+    defaultSection: (_pluginKey$getState = pluginKey.getState(editorView.state)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.elementBrowserInitialCategory,
+    editorView: editorView,
+    isOffline: isOfflineMode(mode),
+    isOpen: isElementBrowserOpen,
+    onClearSelection: onClearSelection,
+    onClose: onClose,
+    onCloseComplete: onCloseComplete,
+    onConfirmInsert: onConfirmInsert,
+    onSelect: onSelect
+  });
+};