@atlaskit/editor-plugin-selection-extension/dist/esm/ui/toolbar-components/register-inline-toolbar.js

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

import React from 'react';
import { APPS_SECTION, OVERFLOW_EXTENSIONS_MENU_SECTION, useEditorToolbar } from '@atlaskit/editor-common/toolbar';
import { fg } from '@atlaskit/platform-feature-flags';
import { SelectionExtensionMenuItems } from '../menu/SelectionExtensionMenuItems';
import { SelectionExtensionComponentContextProvider } from '../SelectionExtensionComponentContext';
import { MenuItem } from './MenuItem';
import { ToolbarButton } from './ToolbarButton';
import { ToolbarMenu } from './ToolbarMenu';
var EXTENSION_RANK_MULTIPLIER = 100;
var InlineToolbarMenuItemComponent = function InlineToolbarMenuItemComponent(_ref) {
  var api = _ref.api,
    extension = _ref.extension,
    getMenuItems = _ref.getMenuItems;
  var _useEditorToolbar = useEditorToolbar(),
    editorView = _useEditorToolbar.editorView;
  if (!editorView || !api) {
    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: extension.key,
      extensionSource: extension.source,
      extensionLocation: 'inline-toolbar'
    }
  }, /*#__PURE__*/React.createElement(SelectionExtensionMenuItems, {
    getMenuItems: getMenuItems
  }));
};
export var registerInlineToolbar = function registerInlineToolbar(_ref2) {
  var api = _ref2.api,
    extension = _ref2.extension,
    index = _ref2.index;
  var key = extension.key,
    inlineToolbar = extension.inlineToolbar;
  var baseKey = "selection-extension-".concat(key);
  var components = [];
  if (!inlineToolbar) {
    return components;
  }
  var getToolbarItem = inlineToolbar.getToolbarItem,
    getMenuItems = inlineToolbar.getMenuItems;
  var groupKey = "".concat(baseKey, "-toolbar-group");
  var toolbarItemKey = "".concat(baseKey, "-toolbar-").concat(getMenuItems ? 'menu' : 'button');
  var menuSectionKey = "".concat(baseKey, "-toolbar-menu-section");
  if (getToolbarItem) {
    // first we register the group for the button or menu to be added to
    components.push({
      type: 'group',
      key: groupKey,
      parents: [{
        type: APPS_SECTION.type,
        key: APPS_SECTION.key,
        rank: (index + 1) * EXTENSION_RANK_MULTIPLIER
      }]
    });
    var toolbarItemConfig = getToolbarItem();

    // if toolbar item has menu items, assume it's a menu
    if (getMenuItems) {
      components.push({
        type: 'menu',
        key: toolbarItemKey,
        parents: [{
          type: 'group',
          key: groupKey,
          rank: EXTENSION_RANK_MULTIPLIER
        }],
        component: function component() {
          return /*#__PURE__*/React.createElement(ToolbarMenu, {
            api: api,
            config: toolbarItemConfig
          });
        }
      });
    } else {
      // else just regsiter a button
      components.push({
        type: 'button',
        key: toolbarItemKey,
        parents: [{
          type: 'group',
          key: groupKey,
          rank: EXTENSION_RANK_MULTIPLIER
        }],
        component: function component() {
          return /*#__PURE__*/React.createElement(ToolbarButton, {
            api: api,
            config: toolbarItemConfig
          });
        }
      });
    }
  }
  if (getMenuItems) {
    if (getToolbarItem) {
      components.push({
        type: 'menu-section',
        key: menuSectionKey,
        parents: [{
          type: 'menu',
          key: toolbarItemKey,
          rank: EXTENSION_RANK_MULTIPLIER
        }]
      });
    }

    // Remove ExtensionMenuSectionConfiguration - only care about items
    var menuItems = fg('platform_editor_block_menu_v2_patch_1') ? [] : getMenuItems().filter(function (item) {
      return 'label' in item && 'icon' in item;
    });
    components.push({
      type: 'menu-item',
      key: key,
      parents: [{
        type: 'menu-section',
        // if we have a custom menu, place items in there, otherwise in the overflow menu
        key: getToolbarItem ? menuSectionKey : OVERFLOW_EXTENSIONS_MENU_SECTION.key,
        rank: (index + 1) * EXTENSION_RANK_MULTIPLIER
      }],
      component: function component() {
        return fg('platform_editor_block_menu_v2_patch_1') ? /*#__PURE__*/React.createElement(InlineToolbarMenuItemComponent, {
          api: api,
          extension: extension,
          getMenuItems: getMenuItems
        }) : /*#__PURE__*/React.createElement(MenuItem, {
          api: api,
          extensionMenuItems: menuItems
        });
      }
    });
  }
  return components;
};