@atlaskit/editor-plugin-selection-extension/dist/esm/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(_ref) {
  var extensionList = _ref.extensionList,
    api = _ref.api,
    editorViewRef = _ref.editorViewRef;
  var componentsToRegister = [];
  var registeredFeaturedSectionKeys = new Set();
  extensionList.forEach(function (_ref2) {
    var source = _ref2.source,
      key = _ref2.key,
      blockMenu = _ref2.blockMenu;
    if (source !== 'first-party' || !blockMenu) {
      return;
    }
    if (!(api !== null && api !== void 0 && api.blockMenu)) {
      return;
    }
    var getMenuItemsContext = function getMenuItemsContext() {
      return {
        blockMenuTriggerExtensionKey: getBlockMenuTriggerExtensionKey({
          api: api,
          editorView: editorViewRef === null || editorViewRef === void 0 ? void 0 : editorViewRef.current
        }),
        extensionKey: key,
        extensionSource: source,
        extensionLocation: 'block-menu'
      };
    };
    var getMenuItems = function getMenuItems() {
      return blockMenu.getMenuItems(getMenuItemsContext());
    };

    /**
     * Renders the registered selection-extension menu items with the correct block-menu context.
     */
    var makeItemComponent = function makeItemComponent() {
      var 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: api,
          editorView: 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;
      }
      var 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: function component(_ref3) {
            var children = _ref3.children;
            return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
              hasSeparator: true
            }, children);
          }
        });
        registeredFeaturedSectionKeys.add(blockMenu.sectionKey);
      }
      componentsToRegister.push({
        type: 'block-menu-item',
        key: "selection-extension-".concat(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-".concat(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-".concat(key),
        isHidden: function isHidden() {
          return 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 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents(componentsToRegister);
  }
}