@atlaskit/editor-plugin-alignment
Version:
Alignment plugin for @atlaskit/editor-core
46 lines • 1.67 kB
JavaScript
import React from 'react';
import { useIntl } from 'react-intl';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { getAriaKeyshortcuts, tooltip } from '@atlaskit/editor-common/keymaps';
import { getInputMethodFromParentKeys } from '@atlaskit/editor-common/toolbar';
import { ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
import { changeAlignmentTr } from '../../editor-commands';
export const AlignmentMenuItem = ({
option: {
label,
icon: Icon,
keymap
},
api,
alignment,
parents
}) => {
const {
align
} = useSharedPluginStateWithSelector(api, ['alignment'], states => {
var _states$alignmentStat;
return {
align: (_states$alignmentStat = states.alignmentState) === null || _states$alignmentStat === void 0 ? void 0 : _states$alignmentStat.align
};
});
const {
formatMessage
} = useIntl();
const shortcut = tooltip(keymap);
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
isSelected: align === alignment,
elemBefore: /*#__PURE__*/React.createElement(Icon, {
size: "small",
label: ""
}),
elemAfter: shortcut && /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
shortcut: shortcut
}),
ariaKeyshortcuts: getAriaKeyshortcuts(keymap)
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onClick: () => {
api === null || api === void 0 ? void 0 : api.core.actions.execute(changeAlignmentTr(api, alignment, getInputMethodFromParentKeys(parents)));
}
}, formatMessage(label));
};