@atlaskit/editor-plugin-alignment
Version:
Alignment plugin for @atlaskit/editor-core
42 lines • 1.86 kB
JavaScript
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 { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { alignmentOptions } from './options';
export const AlignmentMenu = ({
children,
api
}) => {
const {
align = 'start',
isEnabled
} = useSharedPluginStateWithSelector(api, ['alignment', 'interaction'], states => {
var _states$interactionSt, _states$alignmentStat, _states$alignmentStat2;
return {
align: ((_states$interactionSt = states.interactionState) === null || _states$interactionSt === void 0 ? void 0 : _states$interactionSt.interactionState) === 'hasNotHadInteraction' && expValEquals('platform_editor_default_toolbar_state', 'isEnabled', true) ? 'start' : (_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",
testId: `text-alignment-menu-${align}-icon`
}),
isDisabled: !isEnabled,
testId: "text-alignment-menu",
label: title,
tooltipComponent: /*#__PURE__*/React.createElement(ToolbarTooltip, {
content: title
})
}, children);
};