@atlaskit/editor-plugin-block-type/dist/es2019/ui/index.js

BlockType plugin for @atlaskit/editor-core

import { TRANSFORM_HEADINGS_MENU_SECTION_RANK, TRANSFORM_HEADINGS_H1_MENU_ITEM, TRANSFORM_HEADINGS_H2_MENU_ITEM, TRANSFORM_HEADINGS_H3_MENU_ITEM, TRANSFORM_HEADINGS_H4_MENU_ITEM, TRANSFORM_HEADINGS_H5_MENU_ITEM, TRANSFORM_HEADINGS_H6_MENU_ITEM, TRANSFORM_STRUCTURE_QUOTE_MENU_ITEM, TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM, TRANSFORM_STRUCTURE_MENU_SECTION, TRANSFORM_STRUCTURE_MENU_SECTION_RANK } from '@atlaskit/editor-common/block-menu';
import { TRANSFORM_TEXTFORMATTING_MENU_SECTION, TRANSFORM_TEXT_FORMATTING_SMALL_TEXT_MENU_ITEM } from '@atlaskit/editor-common/block-menu/key';
import { TRANSFORM_TEXT_FORMATTING_MENU_SECTION_RANK } from '@atlaskit/editor-common/block-menu/rank';
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
import { createHeadingBlockMenuItem } from './HeadingBlockMenuItem';
import { createParagraphBlockMenuItem } from './ParagraphBlockMenuItem';
import { createQuoteBlockMenuItem } from './QuoteBlockMenuItem';
import { createSmallTextBlockMenuItem } from './SmallTextBlockMenuItem';
const HEADING_NODE_NAME = 'heading';
const QUOTE_NODE_NAME = 'blockquote';
const PARAGRAPH_NODE_NAME = 'paragraph';
export const getBlockTypeComponents = (api, {
  allowFontSize
} = {}) => {
  const isSmallTextExperimentEnabled = isExperimentEnabled('platform_editor_block_menu_small_text');
  const isSmallTextEnabled = Boolean(allowFontSize && isSmallTextExperimentEnabled);
  const textFormattingRank = isSmallTextExperimentEnabled ? TRANSFORM_TEXT_FORMATTING_MENU_SECTION_RANK : TRANSFORM_HEADINGS_MENU_SECTION_RANK;
  const isTransformHeadingDisabled = level => {
    var _api$blockMenu;
    return Boolean(api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.isTransformOptionDisabled(HEADING_NODE_NAME, {
      level
    }));
  };
  return [{
    type: 'block-menu-item',
    key: TRANSFORM_HEADINGS_H1_MENU_ITEM.key,
    parent: {
      type: 'block-menu-section',
      key: TRANSFORM_TEXTFORMATTING_MENU_SECTION.key,
      rank: textFormattingRank[TRANSFORM_HEADINGS_H1_MENU_ITEM.key]
    },
    component: createHeadingBlockMenuItem({
      level: 1,
      api
    }),
    isHidden: () => isTransformHeadingDisabled(1)
  }, {
    type: 'block-menu-item',
    key: TRANSFORM_HEADINGS_H2_MENU_ITEM.key,
    parent: {
      type: 'block-menu-section',
      key: TRANSFORM_TEXTFORMATTING_MENU_SECTION.key,
      rank: textFormattingRank[TRANSFORM_HEADINGS_H2_MENU_ITEM.key]
    },
    component: createHeadingBlockMenuItem({
      level: 2,
      api
    }),
    isHidden: () => isTransformHeadingDisabled(2)
  }, {
    type: 'block-menu-item',
    key: TRANSFORM_HEADINGS_H3_MENU_ITEM.key,
    parent: {
      type: 'block-menu-section',
      key: TRANSFORM_TEXTFORMATTING_MENU_SECTION.key,
      rank: textFormattingRank[TRANSFORM_HEADINGS_H3_MENU_ITEM.key]
    },
    component: createHeadingBlockMenuItem({
      level: 3,
      api
    }),
    isHidden: () => isTransformHeadingDisabled(3)
  }, {
    type: 'block-menu-item',
    key: TRANSFORM_HEADINGS_H4_MENU_ITEM.key,
    parent: {
      type: 'block-menu-section',
      key: TRANSFORM_TEXTFORMATTING_MENU_SECTION.key,
      rank: textFormattingRank[TRANSFORM_HEADINGS_H4_MENU_ITEM.key]
    },
    component: createHeadingBlockMenuItem({
      level: 4,
      api
    }),
    isHidden: () => isTransformHeadingDisabled(4)
  }, {
    type: 'block-menu-item',
    key: TRANSFORM_HEADINGS_H5_MENU_ITEM.key,
    parent: {
      type: 'block-menu-section',
      key: TRANSFORM_TEXTFORMATTING_MENU_SECTION.key,
      rank: textFormattingRank[TRANSFORM_HEADINGS_H5_MENU_ITEM.key]
    },
    component: createHeadingBlockMenuItem({
      level: 5,
      api
    }),
    isHidden: () => isTransformHeadingDisabled(5)
  }, {
    type: 'block-menu-item',
    key: TRANSFORM_HEADINGS_H6_MENU_ITEM.key,
    parent: {
      type: 'block-menu-section',
      key: TRANSFORM_TEXTFORMATTING_MENU_SECTION.key,
      rank: textFormattingRank[TRANSFORM_HEADINGS_H6_MENU_ITEM.key]
    },
    component: createHeadingBlockMenuItem({
      level: 6,
      api
    }),
    isHidden: () => isTransformHeadingDisabled(6)
  }, {
    type: 'block-menu-item',
    key: TRANSFORM_STRUCTURE_QUOTE_MENU_ITEM.key,
    parent: {
      type: 'block-menu-section',
      key: isSmallTextExperimentEnabled ? TRANSFORM_TEXTFORMATTING_MENU_SECTION.key : TRANSFORM_STRUCTURE_MENU_SECTION.key,
      rank: isSmallTextExperimentEnabled ? TRANSFORM_TEXT_FORMATTING_MENU_SECTION_RANK[TRANSFORM_STRUCTURE_QUOTE_MENU_ITEM.key] : TRANSFORM_STRUCTURE_MENU_SECTION_RANK[TRANSFORM_STRUCTURE_QUOTE_MENU_ITEM.key]
    },
    component: createQuoteBlockMenuItem({
      api
    }),
    isHidden: () => {
      var _api$blockMenu2;
      return Boolean(api === null || api === void 0 ? void 0 : (_api$blockMenu2 = api.blockMenu) === null || _api$blockMenu2 === void 0 ? void 0 : _api$blockMenu2.actions.isTransformOptionDisabled(QUOTE_NODE_NAME));
    }
  }, {
    type: 'block-menu-item',
    key: TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key,
    parent: {
      type: 'block-menu-section',
      key: isSmallTextExperimentEnabled ? TRANSFORM_TEXTFORMATTING_MENU_SECTION.key : TRANSFORM_STRUCTURE_MENU_SECTION.key,
      rank: isSmallTextExperimentEnabled ? TRANSFORM_TEXT_FORMATTING_MENU_SECTION_RANK[TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key] : TRANSFORM_STRUCTURE_MENU_SECTION_RANK[TRANSFORM_STRUCTURE_PARAGRAPH_MENU_ITEM.key]
    },
    component: createParagraphBlockMenuItem({
      api
    }),
    isHidden: () => {
      var _api$blockMenu3;
      return Boolean(api === null || api === void 0 ? void 0 : (_api$blockMenu3 = api.blockMenu) === null || _api$blockMenu3 === void 0 ? void 0 : _api$blockMenu3.actions.isTransformOptionDisabled(PARAGRAPH_NODE_NAME, undefined, isSmallTextExperimentEnabled ? {
        marksToRemove: ['fontSize']
      } : undefined));
    }
  }, ...(isSmallTextEnabled ? [{
    type: 'block-menu-item',
    key: TRANSFORM_TEXT_FORMATTING_SMALL_TEXT_MENU_ITEM.key,
    parent: {
      type: 'block-menu-section',
      key: TRANSFORM_TEXTFORMATTING_MENU_SECTION.key,
      rank: TRANSFORM_TEXT_FORMATTING_MENU_SECTION_RANK[TRANSFORM_TEXT_FORMATTING_SMALL_TEXT_MENU_ITEM.key]
    },
    component: createSmallTextBlockMenuItem({
      api
    }),
    isHidden: () => {
      var _api$core$sharedState, _api$core$sharedState2, _api$blockMenu4;
      return !(api !== null && api !== void 0 && (_api$core$sharedState = api.core.sharedState.currentState()) !== null && _api$core$sharedState !== void 0 && (_api$core$sharedState2 = _api$core$sharedState.schema) !== null && _api$core$sharedState2 !== void 0 && _api$core$sharedState2.marks.fontSize) || Boolean(api === null || api === void 0 ? void 0 : (_api$blockMenu4 = api.blockMenu) === null || _api$blockMenu4 === void 0 ? void 0 : _api$blockMenu4.actions.isTransformOptionDisabled(PARAGRAPH_NODE_NAME, undefined, {
        marksToAdd: {
          fontSize: {
            fontSize: 'small'
          }
        }
      }));
    }
  }] : [])];
};