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

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

@@ -0,0 +1,129 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRegistryElementBrowserItems = exports.getInitialRegistryElementBrowserSection = exports.createRegistryElementBrowserModel = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+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 compareRanks = function compareRanks(left, right) {
+  for (var index = 0; index < Math.max(left.length, right.length); index++) {
+    var _left$index, _right$index;
+    var 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;
+};
+var isVisible = function isVisible(registration) {
+  var _registration$isHidde;
+  return ((_registration$isHidde = registration.isHidden) === null || _registration$isHidde === void 0 ? void 0 : _registration$isHidde.call(registration)) !== true;
+};
+var getChildren = function getChildren(components, parentKey) {
+  return components.filter(function (component) {
+    var _component$parents;
+    return isVisible(component) && ((_component$parents = component.parents) === null || _component$parents === void 0 ? void 0 : _component$parents.some(function (parent) {
+      return parent.key === parentKey;
+    }));
+  });
+};
+var getParentRank = function getParentRank(registration, parentKey) {
+  var _registration$parents, _registration$parents2;
+  return (_registration$parents = (_registration$parents2 = registration.parents) === null || _registration$parents2 === void 0 || (_registration$parents2 = _registration$parents2.find(function (parent) {
+    return parent.key === parentKey;
+  })) === null || _registration$parents2 === void 0 ? void 0 : _registration$parents2.rank) !== null && _registration$parents !== void 0 ? _registration$parents : Number.MAX_SAFE_INTEGER;
+};
+var _getDescendantItems = function getDescendantItems(components, parentKey, ancestorRanks, sectionKey) {
+  return getChildren(components, parentKey).flatMap(function (component) {
+    var ranks = [].concat((0, _toConsumableArray2.default)(ancestorRanks), [getParentRank(component, parentKey)]);
+    if (component.type === 'menu-item') {
+      return component.component ? [{
+        ranks: 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.
+ */
+var createRegistryElementBrowserModel = exports.createRegistryElementBrowserModel = function createRegistryElementBrowserModel(components, _ref) {
+  var footerKey = _ref.footerKey,
+    overflowKeys = _ref.overflowKeys,
+    recommendedSectionKey = _ref.recommendedSectionKey,
+    rootKey = _ref.rootKey;
+  var excludedKeys = new Set([footerKey, recommendedSectionKey].concat((0, _toConsumableArray2.default)(overflowKeys)));
+  var visibleComponents = components.filter(function (component) {
+    return isVisible(component) && !excludedKeys.has(component.key);
+  });
+  var sections = getChildren(visibleComponents, rootKey).filter(function (component) {
+    return component.type === 'menu-section';
+  }).map(function (section) {
+    return {
+      key: section.key,
+      rank: getParentRank(section, rootKey)
+    };
+  }).sort(function (left, right) {
+    return left.rank - right.rank;
+  });
+  var itemByKey = new Map();
+  sections.forEach(function (section) {
+    _getDescendantItems(visibleComponents, section.key, [section.rank], section.key).forEach(function (item) {
+      var existing = itemByKey.get(item.registration.key);
+      if (!existing) {
+        itemByKey.set(item.registration.key, item);
+        return;
+      }
+      var sectionKeys = (0, _toConsumableArray2.default)(new Set([].concat((0, _toConsumableArray2.default)(existing.sectionKeys), (0, _toConsumableArray2.default)(item.sectionKeys))));
+      itemByKey.set(item.registration.key, compareRanks(item.ranks, existing.ranks) < 0 ? _objectSpread(_objectSpread({}, item), {}, {
+        sectionKeys: sectionKeys
+      }) : _objectSpread(_objectSpread({}, existing), {}, {
+        sectionKeys: sectionKeys
+      }));
+    });
+  });
+  return {
+    items: (0, _toConsumableArray2.default)(itemByKey.values()).sort(function (left, right) {
+      return compareRanks(left.ranks, right.ranks);
+    }),
+    sections: sections
+  };
+};
+var getInitialRegistryElementBrowserSection = exports.getInitialRegistryElementBrowserSection = function getInitialRegistryElementBrowserSection(model, requestedSection) {
+  return model.sections.some(function (section) {
+    return section.key === requestedSection;
+  }) ? requestedSection : undefined;
+};
+var getRegistryElementBrowserItems = exports.getRegistryElementBrowserItems = function getRegistryElementBrowserItems(_ref2) {
+  var formatMessage = _ref2.formatMessage,
+    model = _ref2.model,
+    query = _ref2.query,
+    section = _ref2.section;
+  var normalizedQuery = query.trim();
+  var items = section ? model.items.filter(function (item) {
+    return item.sectionKeys.includes(section);
+  }) : model.items;
+  if (!normalizedQuery) {
+    return items;
+  }
+  return items.flatMap(function (item) {
+    var _item$registration$ma, _item$registration;
+    var result = (_item$registration$ma = (_item$registration = item.registration).match) === null || _item$registration$ma === void 0 ? void 0 : _item$registration$ma.call(_item$registration, {
+      formatMessage: formatMessage,
+      query: normalizedQuery
+    });
+    return result ? [_objectSpread(_objectSpread({}, item), {}, {
+      score: Math.min(1, Math.max(0, result.score))
+    })] : [];
+  }).sort(function (left, right) {
+    return left.score - right.score || compareRanks(left.ranks, right.ranks) || left.registration.key.localeCompare(right.registration.key);
+  });
+};

package/dist/es2019/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/es2019/quickInsertPlugin.js

@@ -16,6 +16,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 const quickInsertPlugin = ({
   config: options,
@@ -79,7 +80,7 @@ export const quickInsertPlugin = ({
       return {
         title: formatMessage(messages.viewMore),
         ariaLabel: formatMessage(messages.viewMoreAriaLabel),
-        onClick: openElementBrowserModal,
+        onClick: props => openElementBrowser()(props),
         iconBefore: /*#__PURE__*/React.createElement(ShowMoreHorizontalIcon, {
           label: ""
         })
@@ -106,7 +107,7 @@ export const quickInsertPlugin = ({
         tr
       });
     }
-    return openElementBrowserCommand(options)({
+    return (isExperimentEnabled('platform_editor_slash_command') ? openElementBrowserCommand(options) : openElementBrowserModal)({
       tr
     });
   };
@@ -148,7 +149,11 @@ export const quickInsertPlugin = ({
         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/es2019/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/es2019/ui/RegistryElementBrowser/RegistryElementBrowser.js

@@ -0,0 +1,147 @@
+/* RegistryElementBrowser.tsx generated by @compiled/babel-plugin v2.0.0 */
+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';
+const browserLayoutStyles = null;
+const resultsId = 'registry-element-browser-results';
+export const RegistryElementBrowser = ({
+  components,
+  emptyStateHandler,
+  defaultSection,
+  helpUrl,
+  editorView,
+  isOffline,
+  isOpen,
+  onClearSelection,
+  onClose,
+  onCloseComplete,
+  onConfirmInsert,
+  onSelect
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const model = useMemo(() => createRegistryElementBrowserModel(components, {
+    footerKey: getMenuFooterSectionKey(MENU.key),
+    overflowKeys: new Set(components.filter(component => component.type === 'menu-section').map(component => getSectionOverflowItemKey(component.key))),
+    recommendedSectionKey: RECOMMENDED_SECTION.key,
+    rootKey: MENU.key
+  }), [components]);
+  const [query, setQuery] = useState('');
+  const [section, setSection] = useState(() => getInitialRegistryElementBrowserSection(model, defaultSection));
+  const [selectedKey, setSelectedKey] = useState();
+  const wasOpen = useRef(false);
+  const previousIsOffline = useRef(isOffline);
+  useEffect(() => {
+    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]);
+  const items = useMemo(() => getRegistryElementBrowserItems({
+    formatMessage,
+    model,
+    query,
+    section: query ? undefined : section
+  }), [formatMessage, model, query, section]);
+  useEffect(() => {
+    if (previousIsOffline.current !== isOffline) {
+      setSelectedKey(undefined);
+      onClearSelection();
+    }
+    previousIsOffline.current = isOffline;
+  }, [isOffline, onClearSelection]);
+  const onSearchChange = useCallback(event => {
+    setQuery(event.currentTarget.value);
+    setSection(undefined);
+    setSelectedKey(undefined);
+    onClearSelection();
+  }, [onClearSelection]);
+  const onSectionClick = useCallback(event => {
+    setQuery('');
+    setSection(event.currentTarget.dataset.section || undefined);
+    setSelectedKey(undefined);
+    onClearSelection();
+  }, [onClearSelection]);
+  const onRegistrySelect = useCallback((key, handler) => {
+    setSelectedKey(key);
+    onSelect(handler);
+  }, [onSelect]);
+  const onKeyDown = useCallback(event => {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      var _resultCollection$que;
+      const resultCollection = event.currentTarget.ownerDocument.getElementById(resultsId);
+      const 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 : []);
+      const currentIndex = options.findIndex(option => option === event.currentTarget.ownerDocument.activeElement);
+      const nextIndex = event.key === 'ArrowDown' ? currentIndex + 1 : currentIndex - 1;
+      const 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/es2019/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/es2019/ui/RegistryElementBrowser/RegistryElementBrowserCategories.js

@@ -0,0 +1,55 @@
+/* RegistryElementBrowserCategories.tsx generated by @compiled/babel-plugin v2.0.0 */
+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';
+const sectionMessages = {
+  [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
+};
+const categoryGridStyles = null;
+export const RegistryElementBrowserCategories = ({
+  query,
+  section,
+  sections,
+  onSectionClick
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const 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(entry => {
+    var _sectionMessages;
+    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((_sectionMessages = sectionMessages[entry.key]) !== null && _sectionMessages !== void 0 ? _sectionMessages : messages.categoryOther));
+  }));
+};

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import Button from '@atlaskit/button/default/button';
+import LinkButton from '@atlaskit/button/link';
+export const RegistryElementBrowserFooter = ({
+  helpUrl,
+  isInsertEnabled,
+  onClose,
+  onConfirmInsert
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  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/es2019/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/es2019/ui/RegistryElementBrowser/RegistryElementBrowserSearchResults.js

@@ -0,0 +1,112 @@
+/* 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';
+const resultsGridStyles = null;
+const RegistryElementBrowserItem = ({
+  editorView,
+  isOffline,
+  isSelected,
+  item,
+  onSelect
+}) => {
+  const {
+    component: Component,
+    key
+  } = item.registration;
+  const contextValue = useMemo(() => ({
+    editorView,
+    isOffline,
+    item: {
+      id: key,
+      isSelected
+    },
+    select: handler => 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 const RegistryElementBrowserSearchResults = ({
+  editorView,
+  emptyStateHandler,
+  isOffline,
+  items,
+  query,
+  resultsId,
+  section,
+  selectedKey,
+  onKeyDown,
+  onSearchChange,
+  onSelect
+}) => {
+  var _emptyStateHandler;
+  const {
+    formatMessage
+  } = useIntl();
+  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(item => /*#__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/es2019/ui/RegistryElementBrowser/index.js

@@ -0,0 +1,123 @@
+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 const RegistryElementBrowserContainer = ({
+  editorView,
+  pluginInjectionAPI,
+  helpUrl
+}) => {
+  var _pluginKey$getState;
+  const {
+    emptyStateHandler: currentEmptyStateHandler,
+    isElementBrowserOpen,
+    mode
+  } = useSharedPluginStateWithSelector(pluginInjectionAPI, ['quickInsert', 'connectivity'], 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
+    };
+  });
+  const [snapshot, setSnapshot] = useState([]);
+  const [emptyStateHandler, setEmptyStateHandler] = useState();
+  const wasOpen = useRef(false);
+  const selectionHandler = useRef(undefined);
+  const isInsertConfirmed = useRef(false);
+  const lifecycleOpen = useRef(false);
+  const fireLifecycleEvent = useCallback(action => {
+    var _pluginInjectionAPI$a;
+    pluginInjectionAPI === null || pluginInjectionAPI === void 0 ? void 0 : (_pluginInjectionAPI$a = pluginInjectionAPI.analytics) === null || _pluginInjectionAPI$a === void 0 ? void 0 : _pluginInjectionAPI$a.actions.fireAnalyticsEvent({
+      action,
+      actionSubject: ACTION_SUBJECT.ELEMENT_BROWSER,
+      attributes: {
+        mode: 'full'
+      },
+      eventType: EVENT_TYPE.UI
+    });
+  }, [pluginInjectionAPI]);
+  useEffect(() => {
+    if (isElementBrowserOpen && !wasOpen.current) {
+      var _pluginInjectionAPI$u, _pluginInjectionAPI$u2;
+      setSnapshot((_pluginInjectionAPI$u = pluginInjectionAPI === null || pluginInjectionAPI === void 0 ? 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(() => 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(() => () => {
+    if (lifecycleOpen.current) {
+      lifecycleOpen.current = false;
+      fireLifecycleEvent(ACTION.CLOSED);
+    }
+  }, [fireLifecycleEvent]);
+  const focusInEditor = useCallback(() => {
+    if (!editorView.hasFocus()) {
+      editorView.focus();
+    }
+  }, [editorView]);
+  const onClose = useCallback(() => {
+    if (!isInsertConfirmed.current) {
+      selectionHandler.current = undefined;
+    }
+    closeElementBrowser()(editorView.state, editorView.dispatch);
+    focusInEditor();
+  }, [editorView, focusInEditor]);
+  const onCloseComplete = useCallback(() => {
+    const handler = isInsertConfirmed.current ? selectionHandler.current : undefined;
+    selectionHandler.current = undefined;
+    isInsertConfirmed.current = false;
+    focusInEditor();
+    if (!handler) {
+      return;
+    }
+    const insert = (maybeNode, options = {}) => insertSelectedItem(maybeNode, options)(editorView.state, editorView.state.tr, editorView.state.selection.head);
+    const transaction = handler({
+      insert,
+      source: INPUT_METHOD.ELEMENT_BROWSER
+    });
+    if (transaction) {
+      editorView.dispatch(transaction);
+    }
+  }, [editorView, focusInEditor]);
+  const onSelect = useCallback(handler => {
+    selectionHandler.current = handler;
+  }, []);
+  const onClearSelection = useCallback(() => {
+    selectionHandler.current = undefined;
+    isInsertConfirmed.current = false;
+  }, []);
+  const onConfirmInsert = useCallback(() => {
+    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
+  });
+};