@atlaskit/editor-plugin-block-type/dist/esm/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';
var headingIcons = [TextHeadingOneIcon, TextHeadingTwoIcon, TextHeadingThreeIcon, TextHeadingFourIcon, TextHeadingFiveIcon, TextHeadingSixIcon];
var headingMessages = [blockTypeMessages.heading1, blockTypeMessages.heading2, blockTypeMessages.heading3, blockTypeMessages.heading4, blockTypeMessages.heading5, blockTypeMessages.heading6];
var NODE_NAME = 'heading';
var HeadingBlockMenuItem = function HeadingBlockMenuItem(_ref) {
  var level = _ref.level,
    api = _ref.api;
  var _useIntl = useIntl(),
    formatMessage = _useIntl.formatMessage;
  var Icon = headingIcons[level - 1];
  var message = headingMessages[level - 1];
  var handleClick = function handleClick(event) {
    var triggeredFrom = event.nativeEvent instanceof KeyboardEvent || event.nativeEvent.detail === 0 ? INPUT_METHOD.KEYBOARD : INPUT_METHOD.MOUSE;
    var inputMethod = INPUT_METHOD.BLOCK_MENU;
    api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
      var _api$blockMenu;
      var tr = _ref2.tr;
      var command = api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.transformNode(tr.doc.type.schema.nodes.heading, {
        inputMethod: inputMethod,
        triggeredFrom: triggeredFrom,
        targetTypeName: "".concat(NODE_NAME).concat(level),
        targetAttrs: {
          level: level
        }
      });
      return command ? command({
        tr: tr
      }) : null;
    });
  };
  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
    onClick: handleClick,
    elemBefore: /*#__PURE__*/React.createElement(Icon, {
      label: "",
      size: "small"
    })
  }, formatMessage(message));
};
export var createHeadingBlockMenuItem = function createHeadingBlockMenuItem(_ref3) {
  var level = _ref3.level,
    api = _ref3.api;
  return function () {
    return /*#__PURE__*/React.createElement(HeadingBlockMenuItem, {
      level: level,
      api: api
    });
  };
};