@atlaskit/editor-plugin-alignment/dist/esm/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 var AlignmentMenu = function AlignmentMenu(_ref) {
  var children = _ref.children,
    api = _ref.api;
  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['alignment'], function (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
      };
    }),
    _useSharedPluginState2 = _useSharedPluginState.align,
    align = _useSharedPluginState2 === void 0 ? 'start' : _useSharedPluginState2,
    isEnabled = _useSharedPluginState.isEnabled;
  var Icon = alignmentOptions()[align].icon;
  var _useIntl = useIntl(),
    formatMessage = _useIntl.formatMessage;
  var 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);
};