@atlaskit/editor-plugin-selection-extension/dist/es2019/ui/utils/registerBlockMenuItems.js

editor-plugin-selection-extension plugin for @atlaskit/editor-core

import React from 'react';
import { TRANSFORM_MENU_SECTION, TRANSFORM_MENU_SECTION_RANK, BLOCK_ACTIONS_FEATURED_EXTENSION_SLOT_MENU_ITEM, BLOCK_ACTIONS_FEATURED_EXTENSION_ITEM_RANK, MAIN_BLOCK_MENU_SECTION_RANK, TRANSFORM_CREATE_MENU_SECTION, TRANSFORM_CREATE_MENU_SECTION_RANK, TRANSFORM_DEFAULT_EXTENSION_SLOT_MENU_ITEM } from '@atlaskit/editor-common/block-menu';
import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
import { fg } from '@atlaskit/platform-feature-flags';
import { SelectionExtensionMenuItems } from '../menu/SelectionExtensionMenuItems';
import { SelectionExtensionComponentContextProvider } from '../SelectionExtensionComponentContext';
import { getBlockMenuTriggerExtensionKey } from './getBlockMenuTriggerExtensionKey';
/**
 * Registers first-party selection extension menu items with the block menu plugin.
 */
export function registerBlockMenuItems({
  extensionList,
  api,
  editorViewRef
}) {
  const componentsToRegister = [];
  const registeredFeaturedSectionKeys = new Set();
  extensionList.forEach(({
    source,
    key,
    blockMenu
  }) => {
    if (source !== 'first-party' || !blockMenu) {
      return;
    }
    if (!(api !== null && api !== void 0 && api.blockMenu)) {
      return;
    }
    const getMenuItemsContext = () => ({
      blockMenuTriggerExtensionKey: getBlockMenuTriggerExtensionKey({
        api,
        editorView: editorViewRef === null || editorViewRef === void 0 ? void 0 : editorViewRef.current
      }),
      extensionKey: key,
      extensionSource: source,
      extensionLocation: 'block-menu'
    });
    const getMenuItems = () => blockMenu.getMenuItems(getMenuItemsContext());

    /**
     * Renders the registered selection-extension menu items with the correct block-menu context.
     */
    const makeItemComponent = () => {
      const editorView = editorViewRef === null || editorViewRef === void 0 ? void 0 : editorViewRef.current;
      if (!editorView) {
        return null;
      }
      return /*#__PURE__*/React.createElement(SelectionExtensionComponentContextProvider
      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
      , {
        value: {
          api,
          editorView,
          extensionKey: key,
          extensionSource: source,
          extensionLocation: 'block-menu'
        }
      }, /*#__PURE__*/React.createElement(SelectionExtensionMenuItems, {
        getMenuItems: blockMenu.getMenuItems
      }));
    };
    if (blockMenu.placement === 'featured-section' && fg('platform_editor_block_menu_v2_patch_2')) {
      // Block menu sections do not support isHidden. Check menu items before registering
      // the section to avoid rendering an orphan separator when there are no items.
      if (getMenuItems().length === 0 || !blockMenu.sectionKey) {
        return;
      }
      const sectionRank = MAIN_BLOCK_MENU_SECTION_RANK[blockMenu.sectionKey];
      if (sectionRank === undefined) {
        return;
      }

      // Register as its own top-level section with a separator
      if (!registeredFeaturedSectionKeys.has(blockMenu.sectionKey)) {
        componentsToRegister.push({
          type: 'block-menu-section',
          key: blockMenu.sectionKey,
          rank: sectionRank,
          component: ({
            children
          }) => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
            hasSeparator: true
          }, children)
        });
        registeredFeaturedSectionKeys.add(blockMenu.sectionKey);
      }
      componentsToRegister.push({
        type: 'block-menu-item',
        key: `selection-extension-${key}`,
        parent: {
          type: 'block-menu-section',
          key: blockMenu.sectionKey,
          rank: BLOCK_ACTIONS_FEATURED_EXTENSION_ITEM_RANK[BLOCK_ACTIONS_FEATURED_EXTENSION_SLOT_MENU_ITEM.key]
        },
        component: makeItemComponent
      });
    } else if (blockMenu.placement === 'featured' || blockMenu.placement === 'featured-section' && !fg('platform_editor_block_menu_v2_patch_2')) {
      // Register as an item directly under TRANSFORM_MENU_SECTION
      // (also used as fallback for featured-section when gate is off)
      componentsToRegister.push({
        type: 'block-menu-item',
        key: `selection-extension-${key}`,
        parent: {
          type: 'block-menu-section',
          key: TRANSFORM_MENU_SECTION.key,
          rank: TRANSFORM_MENU_SECTION_RANK[BLOCK_ACTIONS_FEATURED_EXTENSION_SLOT_MENU_ITEM.key]
        },
        component: makeItemComponent
      });
    } else {
      // Default: register under TRANSFORM_CREATE_MENU_SECTION
      componentsToRegister.push({
        type: 'block-menu-item',
        key: `selection-extension-${key}`,
        isHidden: () => getMenuItems().length === 0,
        parent: {
          type: 'block-menu-section',
          key: TRANSFORM_CREATE_MENU_SECTION.key,
          rank: TRANSFORM_CREATE_MENU_SECTION_RANK[TRANSFORM_DEFAULT_EXTENSION_SLOT_MENU_ITEM.key]
        },
        component: makeItemComponent
      });
    }
  });
  if (componentsToRegister.length > 0) {
    var _api$blockMenu;
    api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.registerBlockMenuComponents(componentsToRegister);
  }
}