@atlaskit/editor-plugin-insert-block 18.0.5 → 18.1.0

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

@@ -0,0 +1,205 @@
+/* RegisteredInsertMenuList.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.RegisteredInsertMenuList = void 0;
+require("./RegisteredInsertMenuList.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _CellMeasurer = require("react-virtualized/dist/commonjs/CellMeasurer");
+var _List = require("react-virtualized/dist/commonjs/List");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _RegisteredInsertMenuItem = require("./RegisteredInsertMenuItem");
+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 _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+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 ESTIMATED_ROW_HEIGHT = 56;
+var MENU_FOOTER_HEIGHT = 52;
+var MENU_SEARCH_HEIGHT = 64;
+var LIST_WIDTH = 350;
+var listAriaProps = {
+  // @ts-expect-error react-virtualized forwards null to omit its grid-only default; its types exclude null.
+  'aria-readonly': null
+};
+var styles = {
+  footer: "_1rjc1b66 _1i531l7x _15a5nqa1 _uwhke4h9 _1o9zidpf"
+};
+var RegisteredInsertMenuList = exports.RegisteredInsertMenuList = function RegisteredInsertMenuList(_ref) {
+  var _model$root$component, _model$root;
+  var editorView = _ref.editorView,
+    isOffline = _ref.isOffline,
+    listId = _ref.listId,
+    listLabel = _ref.listLabel,
+    maxHeight = _ref.maxHeight,
+    menuOpenId = _ref.menuOpenId,
+    model = _ref.model,
+    onClose = _ref.onClose,
+    onItemHover = _ref.onItemHover,
+    onRenderedItemsChange = _ref.onRenderedItemsChange,
+    selectedItemIndex = _ref.selectedItemIndex,
+    surfaceContext = _ref.surfaceContext;
+  var 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.default.Fragment;
+  var listRef = (0, _react.useRef)(null);
+  var rows = (0, _react.useMemo)(function () {
+    return model.sections.flat();
+  }, [model.sections]);
+  var cache = (0, _react.useMemo)(function () {
+    return new _CellMeasurer.CellMeasurerCache({
+      defaultHeight: ESTIMATED_ROW_HEIGHT,
+      fixedWidth: true
+    });
+  }, []);
+  var itemIndexByRowIndex = (0, _react.useMemo)(function () {
+    var indexes = new Map();
+    var itemIndex = 0;
+    rows.forEach(function (registration, rowIndex) {
+      if (registration.type === 'menu-item') {
+        indexes.set(rowIndex, itemIndex++);
+      }
+    });
+    return indexes;
+  }, [rows]);
+  var selectedRowIndex = (0, _react.useMemo)(function () {
+    var _iterator = _createForOfIteratorHelper(itemIndexByRowIndex),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var _step$value = (0, _slicedToArray2.default)(_step.value, 2),
+          rowIndex = _step$value[0],
+          itemIndex = _step$value[1];
+        if (itemIndex === selectedItemIndex) {
+          return rowIndex;
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return -1;
+  }, [itemIndexByRowIndex, selectedItemIndex]);
+  var rowKeySignature = (0, _react.useMemo)(function () {
+    return rows.map(function (_ref2) {
+      var key = _ref2.key,
+        type = _ref2.type;
+      return "".concat(type, ":").concat(key);
+    }).join('\0');
+  }, [rows]);
+  (0, _react.useLayoutEffect)(function () {
+    var _listRef$current, _listRef$current2;
+    cache.clearAll();
+    (_listRef$current = listRef.current) === null || _listRef$current === void 0 || _listRef$current.recomputeRowHeights();
+    (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 || _listRef$current2.scrollToPosition(0);
+  }, [cache, rowKeySignature]);
+  var onRowsRendered = (0, _react.useCallback)(function (_ref3) {
+    var _indexes$, _indexes;
+    var overscanStartIndex = _ref3.overscanStartIndex,
+      overscanStopIndex = _ref3.overscanStopIndex;
+    var indexes = (0, _toConsumableArray2.default)(itemIndexByRowIndex).filter(function (_ref4) {
+      var _ref5 = (0, _slicedToArray2.default)(_ref4, 1),
+        rowIndex = _ref5[0];
+      return rowIndex >= overscanStartIndex && rowIndex <= overscanStopIndex;
+    }).map(function (_ref6) {
+      var _ref7 = (0, _slicedToArray2.default)(_ref6, 2),
+        itemIndex = _ref7[1];
+      return 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]);
+  var renderRow = (0, _react.useCallback)(function (_ref8) {
+    var _registration$compone;
+    var index = _ref8.index,
+      key = _ref8.key,
+      parent = _ref8.parent,
+      style = _ref8.style;
+    var registration = rows[index];
+    if (!registration) {
+      return null;
+    }
+    var itemIndex = itemIndexByRowIndex.get(index);
+    var rowContent = registration.type === 'menu-section' ? ( /*#__PURE__*/_react.default.createElement((_registration$compone = registration.component) !== null && _registration$compone !== void 0 ? _registration$compone : _react.default.Fragment, null, null)) : /*#__PURE__*/_react.default.createElement("div", {
+      onMouseMove: function onMouseMove() {
+        return onItemHover(itemIndex !== null && itemIndex !== void 0 ? itemIndex : 0);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_RegisteredInsertMenuItem.RegisteredInsertMenuItem, {
+      editorView: editorView,
+      id: "".concat(listId, "-").concat(itemIndex),
+      isOffline: isOffline,
+      isSelected: itemIndex === selectedItemIndex,
+      menuOpenId: menuOpenId,
+      onClose: onClose,
+      registration: registration,
+      surfaceContext: surfaceContext
+    }));
+    return /*#__PURE__*/_react.default.createElement(_CellMeasurer.CellMeasurer, {
+      key: key,
+      cache: cache,
+      parent: parent,
+      columnIndex: 0,
+      rowIndex: index
+    }, function (_ref9) {
+      var registerChild = _ref9.registerChild;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        ref: function ref(element) {
+          return 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]);
+  var footerItemIndex = itemIndexByRowIndex.size;
+  var listMaxHeight = Math.max(0, maxHeight - MENU_SEARCH_HEIGHT - (model.footer ? MENU_FOOTER_HEIGHT : 0));
+  var onFooterItemHover = (0, _react.useCallback)(function () {
+    return onItemHover(footerItemIndex);
+  }, [footerItemIndex, onItemHover]);
+  if (!model.root) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(Root, null, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    "aria-label": listLabel,
+    id: listId,
+    role: "listbox"
+  }, rows.length > 0 && /*#__PURE__*/_react.default.createElement(_List.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.
+  , (0, _extends2.default)({}, 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.default.createElement(_compiled.Box, {
+    xcss: styles.footer,
+    onMouseMove: onFooterItemHover
+  }, /*#__PURE__*/_react.default.createElement(_RegisteredInsertMenuItem.RegisteredInsertMenuItem, {
+    editorView: editorView,
+    id: "".concat(listId, "-").concat(footerItemIndex),
+    isOffline: isOffline,
+    isSelected: footerItemIndex === selectedItemIndex,
+    menuOpenId: menuOpenId,
+    onClose: onClose,
+    registration: model.footer,
+    surfaceContext: surfaceContext
+  }))));
+};

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

@@ -13,6 +13,8 @@ var _configResolver = require("./toolbar-components/config-resolver");
 var _EmojiButton = require("./toolbar-components/EmojiButton");
 var _ImageButton = require("./toolbar-components/ImageButton");
 var _InsertButton = require("./toolbar-components/InsertButton");
+var _RegisteredInsertButton = require("./registered-insert-menu/RegisteredInsertButton");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _LayoutButton = require("./toolbar-components/LayoutButton");
 var _MediaButton = require("./toolbar-components/MediaButton");
 var _MentionButton = require("./toolbar-components/MentionButton");
@@ -263,7 +265,9 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
   if ((_config$insert = config.insert) !== null && _config$insert !== void 0 && _config$insert.enabled) {
     var createInsertButtonComponent = function createInsertButtonComponent(breakpoint) {
       return function () {
-        return /*#__PURE__*/_react.default.createElement(_InsertButton.InsertButton, {
+        return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_slash_command') ? /*#__PURE__*/_react.default.createElement(_RegisteredInsertButton.RegisteredInsertButton, {
+          api: api
+        }) : /*#__PURE__*/_react.default.createElement(_InsertButton.InsertButton, {
           api: api,
           breakpoint: breakpoint,
           toolbarConfig: config,

package/dist/es2019/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.
 const FIT_HEIGHT_BUFFER = 100;
 export const BlockInsertElementBrowser = props => {
+  const {
+    togglePlusMenuVisibility,
+    plusButtonRef
+  } = props;
+  const closeRegisteredMenu = useCallback(() => togglePlusMenuVisibility(), [togglePlusMenuVisibility]);
+  const closeRegisteredMenuAndRestoreFocus = useCallback(() => {
+    togglePlusMenuVisibility();
+    plusButtonRef === null || plusButtonRef === void 0 ? 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 const 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/es2019/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 const 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 const BlockInsertMenu = props => {
     spacing: props.spacing,
     togglePlusMenuVisibility: props.togglePlusMenuVisibility,
     showElementBrowserLink: props.showElementBrowserLink,
+    isEditorOffline: props.isEditorOffline,
     pluginInjectionApi: props.pluginInjectionApi,
     isFullPageAppearance: props.isFullPageAppearance
   });

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

@@ -18,6 +18,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';
@@ -733,7 +734,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
     const isTableSizeVisible = buttons.some(({
       value
     }) => 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;
     }
     const toolbarButtons = [];
@@ -831,6 +832,7 @@ export class ToolbarInsertBlock extends 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$pluginInj4 = this.props.pluginInjectionApi) !== null && _this$props$pluginInj4 !== void 0 && _this$props$pluginInj4.primaryToolbar) && this.props.showSeparator || isFullPageAppearance && editorExperiment('platform_editor_controls', 'variant1')) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */

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

@@ -0,0 +1,107 @@
+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';
+const DEFAULT_MENU_MAX_HEIGHT = 520;
+const FIT_HEIGHT_BUFFER = 100;
+const POPUP_OFFSET = [0, 3];
+/**
+ * The toolbar owns its popup lifecycle, but renders the same registered items
+ * and menu model as slash command.
+ */
+export const RegisteredInsertButton = ({
+  api
+}) => {
+  const {
+    editorView
+  } = useEditorToolbar();
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    isDisabled,
+    popupsBoundariesElement,
+    popupsMountPoint,
+    popupsScrollableElement
+  } = useToolbarUI();
+  const [isOpen, setIsOpen] = useState(false);
+  const buttonRef = useRef(null);
+  const {
+    connectivityMode,
+    isAllowed
+  } = useSharedPluginStateWithSelector(api, ['connectivity', 'typeAhead'], 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
+    };
+  });
+  const close = useCallback((restoreFocus = false) => {
+    setIsOpen(false);
+    if (restoreFocus) {
+      requestAnimationFrame(() => {
+        var _buttonRef$current;
+        return (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
+      });
+    }
+  }, []);
+  const open = useCallback(() => {
+    setIsOpen(true);
+  }, []);
+  const onPopupUnmount = useCallback(() => {
+    // Outside dismissal must not move focus away from the element that was clicked.
+    setIsOpen(false);
+  }, []);
+  const closeAndRestoreFocus = useCallback(() => close(true), [close]);
+  const closeForSelection = useCallback(() => 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 ? () => 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/es2019/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/es2019/ui/registered-insert-menu/RegisteredInsertMenu.js

@@ -0,0 +1,117 @@
+/* RegisteredInsertMenu.tsx generated by @compiled/babel-plugin v3.0.1 */
+import "./RegisteredInsertMenu.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+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';
+const DEFAULT_MENU_MAX_HEIGHT = 520;
+const styles = {
+  menu: "_2rko12b0 _1reo15vq _18m915vq _bfhk1bhr _16qs130s _1e0c1txw _2lx21bp4 _c71l1lk4 _1bsb1edt",
+  search: "_1rjcutpp _18zrutpp _1o9zidpf"
+};
+export const RegisteredInsertMenu = ({
+  components,
+  editorView,
+  isOffline,
+  onClose,
+  onSelect
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const listId = useId();
+  const [menuOpenId] = useState(() => Symbol('registered-insert-menu-open'));
+  const [query, setQuery] = useState('');
+  const [selectedItemIndex, setSelectedItemIndex] = useState(0);
+  const [renderedItems, setRenderedItems] = useState({
+    startIndex: -1,
+    stopIndex: -1
+  });
+  const surfaceContext = useMemo(() => createSurfaceContext(TYPE_AHEAD_SURFACE_CONTEXT, {
+    menuOpenId
+  }), [menuOpenId]);
+  const model = useMemo(() => query === '' ? buildQuickInsertMenuModel(components, MENU, undefined, surfaceContext) : getMatchingQuickInsertComponents({
+    components,
+    formatMessage,
+    query,
+    rootComponent: MENU,
+    surfaceContext
+  }), [components, formatMessage, query, surfaceContext]);
+  const itemCount = useMemo(() => model.sections.reduce((count, [, ...items]) => count + items.length, 0) + (model.footer ? 1 : 0), [model.footer, model.sections]);
+  const isActiveItemMounted = selectedItemIndex >= 0 && selectedItemIndex < itemCount && (selectedItemIndex >= renderedItems.startIndex && selectedItemIndex <= renderedItems.stopIndex || Boolean(model.footer) && selectedItemIndex === itemCount - 1);
+  const activeItemId = `${listId}-${selectedItemIndex}`;
+  const selectNextItem = useCallback(() => {
+    setSelectedItemIndex(index => itemCount === 0 ? -1 : (index + 1) % itemCount);
+  }, [itemCount]);
+  const selectPreviousItem = useCallback(() => {
+    setSelectedItemIndex(index => itemCount === 0 ? -1 : index <= 0 ? itemCount - 1 : index - 1);
+  }, [itemCount]);
+  const selectActiveItem = useCallback(() => {
+    if (isActiveItemMounted) {
+      var _getDocument, _getDocument$getEleme;
+      (_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : (_getDocument$getEleme = _getDocument.getElementById(activeItemId)) === null || _getDocument$getEleme === void 0 ? void 0 : _getDocument$getEleme.click();
+    }
+  }, [activeItemId, isActiveItemMounted]);
+  const onQueryChange = useCallback(event => {
+    setQuery(event.currentTarget.value);
+    setSelectedItemIndex(0);
+  }, []);
+  const onKeyDown = useCallback(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/es2019/ui/registered-insert-menu/RegisteredInsertMenuContent.js

@@ -0,0 +1,43 @@
+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';
+const RegisteredInsertMenuContainer = ({
+  children
+}) => {
+  const setOutsideClickTargetRef = useContext(PlainOutsideClickTargetRefContext);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: setOutsideClickTargetRef
+  }, children);
+};
+const RegisteredInsertMenuWithListeners = withOuterListeners(RegisteredInsertMenuContainer);
+export const RegisteredInsertMenuContent = ({
+  api,
+  editorView,
+  isOffline,
+  onClose,
+  onDismiss,
+  onSelect,
+  target
+}) => {
+  // Keep registrations stable while the open menu is searched or navigated.
+  const [components] = useState(() => {
+    var _api$uiControlRegistr, _api$uiControlRegistr2;
+    return (_api$uiControlRegistr = api === null || api === void 0 ? 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 : [];
+  });
+  const onClickOutside = useCallback(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/es2019/ui/registered-insert-menu/RegisteredInsertMenuItem.js

@@ -0,0 +1,49 @@
+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 const RegisteredInsertMenuItem = ({
+  editorView,
+  id,
+  isOffline,
+  isSelected,
+  menuOpenId,
+  onClose,
+  registration,
+  surfaceContext
+}) => {
+  var _registration$compone;
+  const Component = (_registration$compone = registration.component) !== null && _registration$compone !== void 0 ? _registration$compone : React.Fragment;
+  const select = useCallback(selectionHandler => {
+    // Close first so a registered item may safely focus the editor or open its picker.
+    onClose();
+    queueMicrotask(() => {
+      const {
+        state
+      } = editorView;
+      const insert = (content, options = {}) => insertSelectedItem(content, options)(state, state.tr, state.selection.head);
+      const transaction = selectionHandler({
+        insert,
+        source: INPUT_METHOD.INSERT_MENU
+      });
+      if (transaction) {
+        editorView.dispatch(transaction);
+      }
+    });
+  }, [editorView, onClose]);
+  const contextValue = useMemo(() => ({
+    editorView,
+    isOffline,
+    item: {
+      id,
+      isSelected
+    },
+    menuOpenId,
+    select,
+    surface: 'toolbar',
+    surfaceContext
+  }), [editorView, id, isOffline, isSelected, menuOpenId, select, surfaceContext]);
+  return /*#__PURE__*/React.createElement(QuickInsertProvider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(Component, null, null));
+};

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