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

BlockType plugin for @atlaskit/editor-core

import React from 'react';
import { useIntl } from 'react-intl';
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
import { blockTypeMessages } from '@atlaskit/editor-common/messages';
import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
import TextHeadingFiveIcon from '@atlaskit/icon-lab/core/text-heading-five';
import TextHeadingFourIcon from '@atlaskit/icon-lab/core/text-heading-four';
import TextHeadingOneIcon from '@atlaskit/icon-lab/core/text-heading-one';
import TextHeadingSixIcon from '@atlaskit/icon-lab/core/text-heading-six';
import TextHeadingThreeIcon from '@atlaskit/icon-lab/core/text-heading-three';
import TextHeadingTwoIcon from '@atlaskit/icon-lab/core/text-heading-two';
const headingIcons = [TextHeadingOneIcon, TextHeadingTwoIcon, TextHeadingThreeIcon, TextHeadingFourIcon, TextHeadingFiveIcon, TextHeadingSixIcon];
const headingMessages = [blockTypeMessages.heading1, blockTypeMessages.heading2, blockTypeMessages.heading3, blockTypeMessages.heading4, blockTypeMessages.heading5, blockTypeMessages.heading6];
const NODE_NAME = 'heading';
const HeadingBlockMenuItem = ({
  level,
  api
}) => {
  const {
    formatMessage
  } = useIntl();
  const Icon = headingIcons[level - 1];
  const message = headingMessages[level - 1];
  const handleClick = event => {
    const triggeredFrom = event.nativeEvent instanceof KeyboardEvent || event.nativeEvent.detail === 0 ? INPUT_METHOD.KEYBOARD : INPUT_METHOD.MOUSE;
    const inputMethod = INPUT_METHOD.BLOCK_MENU;
    api === null || api === void 0 ? void 0 : api.core.actions.execute(({
      tr
    }) => {
      var _api$blockMenu;
      const command = api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.transformNode(tr.doc.type.schema.nodes.heading, {
        inputMethod,
        triggeredFrom,
        targetTypeName: `${NODE_NAME}${level}`,
        targetAttrs: {
          level
        }
      });
      return command ? command({
        tr
      }) : null;
    });
  };
  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
    onClick: handleClick,
    elemBefore: /*#__PURE__*/React.createElement(Icon, {
      label: "",
      size: "small"
    })
  }, formatMessage(message));
};
export const createHeadingBlockMenuItem = ({
  level,
  api
}) => {
  return () => /*#__PURE__*/React.createElement(HeadingBlockMenuItem, {
    level: level,
    api: api
  });
};