@atlaskit/editor-plugin-alignment
Version:
Alignment plugin for @atlaskit/editor-core
42 lines • 1.91 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 var AlignmentMenuItem = function AlignmentMenuItem(_ref) {
var _ref$option = _ref.option,
label = _ref$option.label,
Icon = _ref$option.icon,
keymap = _ref$option.keymap,
api = _ref.api,
alignment = _ref.alignment,
parents = _ref.parents;
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['alignment'], function (states) {
var _states$alignmentStat;
return {
align: (_states$alignmentStat = states.alignmentState) === null || _states$alignmentStat === void 0 ? void 0 : _states$alignmentStat.align
};
}),
align = _useSharedPluginState.align;
var _useIntl = useIntl(),
formatMessage = _useIntl.formatMessage;
var 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: function onClick() {
api === null || api === void 0 || api.core.actions.execute(changeAlignmentTr(api, alignment, getInputMethodFromParentKeys(parents)));
}
}, formatMessage(label));
};