@atlaskit/editor-plugin-insert-block 30.0.4 → 31.0.0

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

@@ -1,242 +1,135 @@
 /* RegisteredInsertMenu.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./RegisteredInsertMenu.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
-import { getDocument } from '@atlaskit/browser-apis';
-import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages/insert-block';
+import { insertSelectedItem } from '@atlaskit/editor-common/insert';
+import { toolbarInsertBlockMessages } from '@atlaskit/editor-common/messages/insert-block';
 import { MENU } from '@atlaskit/editor-common/quick-insert/keys';
-import { getQuickInsertMenuModel, getQuickInsertMenuRows, selectQuickInsertCategoryItems } from '@atlaskit/editor-common/quick-insert/registered-menu-model';
-import { useQuickInsertSearchAnalytics } from '@atlaskit/editor-common/quick-insert/use-search-analytics';
-import { isSectionOverflowItemKey } from '@atlaskit/editor-common/type-ahead-is-section-overflow-item-key';
-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 { RegisteredMenuContext } from '@atlaskit/editor-common/registered-menu/context';
+import { createRegisteredMenuSurfaceContext } from '@atlaskit/editor-common/registered-menu/surface-context';
+import { typeAheadListMessages } from '@atlaskit/editor-common/type-ahead/messages';
 import { Box } from '@atlaskit/primitives/compiled/box';
 import Textfield from '@atlaskit/textfield/text-field';
-import { RegisteredInsertMenuList } from './RegisteredInsertMenuList';
 const DEFAULT_MENU_MAX_HEIGHT = 520;
+const SEARCH_HEIGHT = 64;
 const styles = {
   menu: "_2rko1mok _1reo15vq _18m915vq _bfhk1bhr _16qs130s _1e0c1txw _2lx21bp4 _1bsb1edt",
+  hidden: "_1e0cglyw",
   search: "_18zrutpp _1o9zidpf _1q51utpp _85i5u2gc"
 };
-export const RegisteredInsertMenu = ({
-  components,
-  emptyStateHandler,
-  fireAnalyticsEvent,
-  getItemRank,
-  editorView,
-  isOffline,
-  maxHeight = DEFAULT_MENU_MAX_HEIGHT,
-  onClose,
-  onSelect
-}) => {
-  const menuStyle = {
-    maxHeight
-  };
+export const RegisteredInsertMenu = props => {
+  var _props$maxHeight, _interaction$expanded;
+  const {
+    components,
+    editorView,
+    isOffline,
+    onSelect
+  } = props;
   const {
     formatMessage
   } = useIntl();
-  const listId = useId();
-  const [menuOpenId] = useState(() => Symbol('registered-insert-menu-open'));
-  const [query, setQuery] = useState('');
-  const [selectedItemIndex, setSelectedItemIndex] = useState(0);
-  const selectedItemIndexRef = useRef(selectedItemIndex);
-  const [renderedItems, setRenderedItems] = useState({
-    startIndex: -1,
-    stopIndex: -1
-  });
+  const [interaction, setInteraction] = useState();
+  const registerInteraction = useCallback(next => {
+    setInteraction(next);
+    return () => setInteraction(current => current === next ? undefined : current);
+  }, []);
   const searchRef = useRef(null);
+  const hasInteraction = Boolean(interaction);
   useLayoutEffect(() => {
-    var _searchRef$current;
-    // Popup positions on the next frame; focusing must not scroll to its initial location.
-    (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 ? void 0 : _searchRef$current.focus({
-      preventScroll: true
-    });
-  }, []);
-  const surfaceContext = useMemo(() => createSurfaceContext(TYPE_AHEAD_SURFACE_CONTEXT, {
-    menuOpenId
-  }), [menuOpenId]);
-  const hasSectionOverflowItems = useMemo(() => components.some(({
-    key
-  }) => isSectionOverflowItemKey(key)), [components]);
-  const model = useMemo(() => getQuickInsertMenuModel({
-    components,
-    formatMessage,
-    getItemRank,
-    query,
-    rootComponent: MENU,
-    selectCategoryItems: hasSectionOverflowItems ? selectQuickInsertCategoryItems : undefined,
-    surfaceContext
-  }), [components, formatMessage, getItemRank, hasSectionOverflowItems, query, surfaceContext]);
-  const [previewActivation, setPreviewActivation] = useState();
-  const activePreviewItemKey = (previewActivation === null || previewActivation === void 0 ? void 0 : previewActivation.model) === model ? previewActivation.itemKey : undefined;
-  const searchResultCount = useMemo(() => model.sections.reduce((count, section) => count + section.filter(({
-    key,
-    type
-  }) => type === 'menu-item' && !isSectionOverflowItemKey(key)).length, 0), [model.sections]);
-  const flushSearchAnalytics = useQuickInsertSearchAnalytics({
-    fireAnalyticsEvent,
-    query,
-    resultCount: searchResultCount,
+    if (hasInteraction) {
+      var _searchRef$current;
+      (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 ? void 0 : _searchRef$current.focus({
+        preventScroll: true
+      });
+    }
+  }, [hasInteraction]);
+  const maxHeight = (_props$maxHeight = props.maxHeight) !== null && _props$maxHeight !== void 0 ? _props$maxHeight : DEFAULT_MENU_MAX_HEIGHT;
+  const menuStyle = useMemo(() => ({
+    maxHeight
+  }), [maxHeight]);
+  const [menuOpenId] = useState(() => Symbol('registered-insert-menu-open'));
+  const [query, setQuery] = useState('');
+  const surfaceContext = useMemo(() => createRegisteredMenuSurfaceContext({
+    menuOpenId,
     surface: 'toolbar'
-  });
-  const closeWithAnalytics = useCallback(() => {
-    flushSearchAnalytics();
-    onClose();
-  }, [flushSearchAnalytics, onClose]);
-  const selectWithAnalytics = useCallback(() => {
-    flushSearchAnalytics();
+  }), [menuOpenId]);
+  const Root = useMemo(() => {
+    var _components$find;
+    return (_components$find = components.find(({
+      key,
+      type,
+      parents
+    }) => key === MENU.key && type === MENU.type && !(parents !== null && parents !== void 0 && parents.length))) === null || _components$find === void 0 ? void 0 : _components$find.component;
+  }, [components]);
+  // Interaction updates should not recreate the registered component's own props.
+  const menu = useMemo(() => Root && /*#__PURE__*/React.createElement(Root, null, null), [Root]);
+  const select = useCallback(selection => {
     onSelect();
-  }, [flushSearchAnalytics, onSelect]);
-  const selectableItems = useMemo(() => getQuickInsertMenuRows(model).filter(row => row.type === 'menu-item'), [model]);
-  const itemCount = selectableItems.length + (model.footer ? 1 : 0);
-  const selectableItemKeys = useMemo(() => [...selectableItems, ...(model.footer ? [model.footer] : [])].map(({
-    key
-  }) => key).join(','), [model.footer, selectableItems]);
-  useLayoutEffect(() => {
-    const initialItemIndex = itemCount > 0 ? 0 : -1;
-    selectedItemIndexRef.current = initialItemIndex;
-    setSelectedItemIndex(initialItemIndex);
-  }, [itemCount, query, selectableItemKeys]);
-  useLayoutEffect(() => {
-    setPreviewActivation(undefined);
-  }, [model, query]);
-  const isActiveItemMounted = selectedItemIndex >= 0 && selectedItemIndex < itemCount && (selectedItemIndex >= renderedItems.startIndex && selectedItemIndex <= renderedItems.stopIndex || Boolean(model.footer) && selectedItemIndex === itemCount - 1);
-  const activeItemId = `${listId}-${selectedItemIndex}`;
-  const setKeyboardPreview = useCallback(itemIndex => {
-    const item = selectableItems[itemIndex];
-    setPreviewActivation(item ? {
-      itemKey: item.key,
-      model,
-      source: 'keyboard'
-    } : undefined);
-  }, [model, selectableItems]);
-  const selectNextItem = useCallback(() => {
-    const currentIndex = selectedItemIndexRef.current;
-    const nextIndex = itemCount === 0 ? -1 : currentIndex < 0 ? 0 : (currentIndex + 1) % itemCount;
-    selectedItemIndexRef.current = nextIndex;
-    setSelectedItemIndex(nextIndex);
-    setKeyboardPreview(nextIndex);
-  }, [itemCount, setKeyboardPreview]);
-  const selectPreviousItem = useCallback(() => {
-    const currentIndex = selectedItemIndexRef.current;
-    const previousIndex = itemCount === 0 ? -1 : currentIndex <= 0 ? itemCount - 1 : currentIndex - 1;
-    selectedItemIndexRef.current = previousIndex;
-    setSelectedItemIndex(previousIndex);
-    setKeyboardPreview(previousIndex);
-  }, [itemCount, setKeyboardPreview]);
-  const onItemHover = useCallback((itemIndex, itemKey) => {
-    selectedItemIndexRef.current = itemIndex;
-    setSelectedItemIndex(itemIndex);
-    setPreviewActivation(current => {
-      if ((current === null || current === void 0 ? void 0 : current.itemKey) === itemKey && (current === null || current === void 0 ? void 0 : current.model) === model && (current === null || current === void 0 ? void 0 : current.source) === 'pointer') {
-        return current;
-      }
-      return itemKey ? {
-        itemKey,
-        model,
-        source: 'pointer'
-      } : undefined;
-    });
-  }, [model]);
-  const onItemFocus = useCallback((itemIndex, itemKey) => {
-    selectedItemIndexRef.current = itemIndex;
-    setSelectedItemIndex(itemIndex);
-    setPreviewActivation(current => {
-      if ((current === null || current === void 0 ? void 0 : current.itemKey) === itemKey && (current === null || current === void 0 ? void 0 : current.model) === model) {
-        return current;
+    queueMicrotask(() => {
+      const {
+        state
+      } = editorView;
+      const insert = (content, options = {}) => insertSelectedItem(content, options)(state, state.tr, state.selection.head);
+      const transaction = selection(insert);
+      if (transaction) {
+        editorView.dispatch(transaction);
       }
-      return itemKey ? {
-        itemKey,
-        model,
-        source: 'keyboard'
-      } : undefined;
     });
-  }, [model]);
-  const onItemLeave = useCallback(itemKey => {
-    setPreviewActivation(current => (current === null || current === void 0 ? void 0 : current.source) === 'pointer' && current.itemKey === itemKey ? undefined : current);
-  }, []);
-  const onItemBlur = useCallback(itemKey => {
-    setPreviewActivation(current => (current === null || current === void 0 ? void 0 : current.itemKey) === itemKey ? undefined : current);
-  }, []);
-  const onItemVisibilityChange = useCallback((itemKey, isVisible) => {
-    if (!isVisible) {
-      setPreviewActivation(current => (current === null || current === void 0 ? void 0 : current.source) === 'pointer' && current.itemKey === itemKey ? undefined : current);
-    }
-  }, []);
-  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);
-  }, []);
+  }, [editorView, onSelect]);
+  const registeredMenu = useMemo(() => ({
+    components,
+    onClose: props.onClose,
+    maxHeight: Math.max(0, maxHeight - SEARCH_HEIGHT),
+    registerInteraction,
+    editorView,
+    isOffline,
+    menuOpenId,
+    rootComponent: MENU,
+    query,
+    select,
+    surfaceContext
+  }), [components, props.onClose, maxHeight, registerInteraction, editorView, isOffline, menuOpenId, query, select, surfaceContext]);
+  const onQueryChange = useCallback(event => setQuery(event.currentTarget.value), []);
   const onKeyDown = useCallback(event => {
     if (event.key === 'Escape') {
+      var _interaction$onClose;
       event.preventDefault();
-      closeWithAnalytics();
+      interaction === null || interaction === void 0 ? void 0 : (_interaction$onClose = interaction.onClose) === null || _interaction$onClose === void 0 ? void 0 : _interaction$onClose.call(interaction);
+      props.onClose();
       return;
     }
-
-    // The search field owns the composite's arrow-key and Enter behaviour. Other
-    // focusable controls, including consumer-provided empty-state content, need
-    // to retain their native keyboard behaviour.
-    if (event.target !== searchRef.current) {
+    // Some IME key events report 229 without setting isComposing. Let the input finish
+    // composing text before handling menu navigation or selection.
+    if (event.target !== searchRef.current || event.nativeEvent.isComposing || event.keyCode === 229) {
       return;
     }
-    switch (event.key) {
-      case 'ArrowDown':
-        event.preventDefault();
-        selectNextItem();
-        break;
-      case 'ArrowUp':
-        event.preventDefault();
-        selectPreviousItem();
-        break;
-      case 'Enter':
-        event.preventDefault();
-        selectActiveItem();
-        break;
+    if (interaction !== null && interaction !== void 0 && interaction.onKeyDown(event.nativeEvent)) {
+      event.preventDefault();
     }
-  }, [closeWithAnalytics, selectActiveItem, selectNextItem, selectPreviousItem]);
-  return /*#__PURE__*/React.createElement(Box, {
-    "data-keyboard-navigation-independent": "",
-    testId: "registered-insert-menu",
+  }, [interaction, props.onClose]);
+  return /*#__PURE__*/React.createElement(RegisteredMenuContext.Provider, {
+    value: registeredMenu
+  }, Root && /*#__PURE__*/React.createElement("div", {
+    "data-registered-insert-menu-root": "",
     onKeyDownCapture: onKeyDown,
-    xcss: styles.menu,
-    style: menuStyle
+    "data-keyboard-navigation-independent": "",
+    "data-testid": "registered-insert-menu",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- The popup supplies the available height at runtime.
+    style: menuStyle,
+    className: ax([styles.menu, !interaction && styles.hidden])
   }, /*#__PURE__*/React.createElement(Box, {
     xcss: styles.search
   }, /*#__PURE__*/React.createElement(Textfield, {
-    "aria-activedescendant": isActiveItemMounted ? activeItemId : undefined,
-    "aria-controls": listId,
-    "aria-expanded": "true",
-    placeholder: "Search",
+    "aria-label": (interaction === null || interaction === void 0 ? void 0 : interaction.label) || formatMessage(toolbarInsertBlockMessages.insertMenu),
+    "aria-activedescendant": interaction === null || interaction === void 0 ? void 0 : interaction.activeDescendantId,
+    "aria-controls": interaction === null || interaction === void 0 ? void 0 : interaction.listId,
+    "aria-expanded": (_interaction$expanded = interaction === null || interaction === void 0 ? void 0 : interaction.expanded) !== null && _interaction$expanded !== void 0 ? _interaction$expanded : false,
+    "aria-autocomplete": "list",
+    placeholder: formatMessage(typeAheadListMessages.quickInsertInputPlaceholderLabel),
     ref: searchRef,
     role: "combobox",
     value: query,
     onChange: onQueryChange
-  })), /*#__PURE__*/React.createElement(RegisteredInsertMenuList, {
-    editorView: editorView,
-    emptyStateHandler: emptyStateHandler,
-    isOffline: isOffline,
-    listId: listId,
-    listLabel: formatMessage(messages.insertMenu),
-    maxHeight: maxHeight,
-    menuOpenId: menuOpenId,
-    model: model,
-    onClose: selectWithAnalytics,
-    onItemFocus: onItemFocus,
-    onItemHover: onItemHover,
-    onItemBlur: onItemBlur,
-    onItemLeave: onItemLeave,
-    onItemVisibilityChange: onItemVisibilityChange,
-    onRenderedItemsChange: setRenderedItems,
-    query: query,
-    selectedItemIndex: selectedItemIndex,
-    surfaceContext: surfaceContext,
-    activePreviewItemKey: activePreviewItemKey
-  }));
+  })), menu));
 };

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

@@ -24,7 +24,7 @@ export const RegisteredInsertMenuContent = ({
   onSelect,
   target
 }) => {
-  var _api$uiControlRegistr2, _api$uiControlRegistr3, _api$quickInsert, _api$quickInsert$shar, _api$analytics, _api$quickInsert2, _api$quickInsert2$sha;
+  var _api$uiControlRegistr2, _api$uiControlRegistr3;
   const getComponents = useCallback(() => {
     var _api$uiControlRegistr;
     const components = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 ? void 0 : _api$uiControlRegistr.actions.getComponents(MENU.key);
@@ -42,9 +42,6 @@ export const RegisteredInsertMenuContent = ({
   }, /*#__PURE__*/React.createElement(RegisteredInsertMenu, {
     components: components,
     editorView: editorView,
-    emptyStateHandler: api === null || api === void 0 ? void 0 : (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 ? void 0 : (_api$quickInsert$shar = _api$quickInsert.sharedState.currentState()) === null || _api$quickInsert$shar === void 0 ? void 0 : _api$quickInsert$shar.emptyStateHandler,
-    fireAnalyticsEvent: api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent,
-    getItemRank: api === null || api === void 0 ? void 0 : (_api$quickInsert2 = api.quickInsert) === null || _api$quickInsert2 === void 0 ? void 0 : (_api$quickInsert2$sha = _api$quickInsert2.sharedState.currentState()) === null || _api$quickInsert2$sha === void 0 ? void 0 : _api$quickInsert2$sha.getItemRank,
     isOffline: isOffline,
     maxHeight: maxHeight,
     onClose: onClose,

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

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import Popup from '@atlaskit/editor-common/Popup';
-import { useMenuPopupSizing } from '@atlaskit/editor-common/quick-insert/use-menu-popup-sizing';
+import { useMenuPopupSizing } from '@atlaskit/editor-common/registered-menu/popup-sizing';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import InsertMenu, { DEFAULT_HEIGHT } from '../ElementBrowser/InsertMenu';
 import { RegisteredInsertMenuContent } from '../registered-insert-menu/RegisteredInsertMenuContent';

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

@@ -5,7 +5,7 @@ import { isOfflineMode } from '@atlaskit/editor-common/connectivity/isOfflineMod
 import { getAriaKeyshortcuts, insertElements, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages/insert-block';
 import Popup from '@atlaskit/editor-common/Popup';
-import { useMenuPopupSizing } from '@atlaskit/editor-common/quick-insert/use-menu-popup-sizing';
+import { useMenuPopupSizing } from '@atlaskit/editor-common/registered-menu/popup-sizing';
 import { useEditorToolbar } from '@atlaskit/editor-common/toolbar/context';
 import { TOOLBAR_BUTTON_TEST_ID } from '@atlaskit/editor-common/toolbar/keys';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/useSharedPluginStateWithSelector';

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

@@ -3,6 +3,7 @@
 ._18m915vq{overflow-y:hidden}
 ._1bsb1edt{width:350px}
 ._1e0c1txw{display:flex}
+._1e0cglyw{display:none}
 ._1o9zidpf{flex-shrink:0}
 ._1q51utpp{padding-block-start:var(--ds-space-150,9pt)}
 ._1reo15vq{overflow-x:hidden}