@atlaskit/editor-plugin-alignment/dist/es2019/ui/Toolbar/AlignmentMenu.js

Alignment plugin for @atlaskit/editor-core

import React from 'react';
import { useIntl } from 'react-intl';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { alignmentMessages as messages } from '@atlaskit/editor-common/messages';
import { ToolbarDropdownMenu, ToolbarTooltip } from '@atlaskit/editor-toolbar';
import { alignmentOptions } from './options';
export const AlignmentMenu = ({
  children,
  api
}) => {
  const {
    align = 'start',
    isEnabled
  } = useSharedPluginStateWithSelector(api, ['alignment'], states => {
    var _states$alignmentStat, _states$alignmentStat2;
    return {
      align: (_states$alignmentStat = states.alignmentState) === null || _states$alignmentStat === void 0 ? void 0 : _states$alignmentStat.align,
      isEnabled: (_states$alignmentStat2 = states.alignmentState) === null || _states$alignmentStat2 === void 0 ? void 0 : _states$alignmentStat2.isEnabled
    };
  });
  const {
    icon: Icon
  } = alignmentOptions()[align];
  const {
    formatMessage
  } = useIntl();
  const title = formatMessage(messages.alignment);
  return /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
    iconBefore: /*#__PURE__*/React.createElement(Icon, {
      label: "",
      size: "small"
    }),
    isDisabled: !isEnabled,
    testId: "text-alignment-menu",
    label: title,
    tooltipComponent: /*#__PURE__*/React.createElement(ToolbarTooltip, {
      content: title
    })
  }, children);
};