@atlaskit/editor-plugin-selection-extension/dist/es2019/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';
const EXTENSION_RANK_MULTIPLIER = 100;
const InlineToolbarMenuItemComponent = ({
  api,
  extension,
  getMenuItems
}) => {
  const {
    editorView
  } = useEditorToolbar();
  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,
      editorView,
      extensionKey: extension.key,
      extensionSource: extension.source,
      extensionLocation: 'inline-toolbar'
    }
  }, /*#__PURE__*/React.createElement(SelectionExtensionMenuItems, {
    getMenuItems: getMenuItems
  }));
};
export const registerInlineToolbar = ({
  api,
  extension,
  index
}) => {
  const {
    key,
    inlineToolbar
  } = extension;
  const baseKey = `selection-extension-${key}`;
  const components = [];
  if (!inlineToolbar) {
    return components;
  }
  const {
    getToolbarItem,
    getMenuItems
  } = inlineToolbar;
  const groupKey = `${baseKey}-toolbar-group`;
  const toolbarItemKey = `${baseKey}-toolbar-${getMenuItems ? 'menu' : 'button'}`;
  const menuSectionKey = `${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
      }]
    });
    const 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: () => {
          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: () => {
          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
    const menuItems = fg('platform_editor_block_menu_v2_patch_1') ? [] : getMenuItems().filter(item => 'label' in item && 'icon' in item);
    components.push({
      type: 'menu-item',
      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: () => {
        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;
};