@atlaskit/editor-plugin-alignment
Version:
Alignment plugin for @atlaskit/editor-core
43 lines (42 loc) • 1.97 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.AlignmentMenu = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactIntl = require("react-intl");
var _hooks = require("@atlaskit/editor-common/hooks");
var _messages = require("@atlaskit/editor-common/messages");
var _editorToolbar = require("@atlaskit/editor-toolbar");
var _options = require("./options");
var AlignmentMenu = exports.AlignmentMenu = function AlignmentMenu(_ref) {
var children = _ref.children,
api = _ref.api;
var _useSharedPluginState = (0, _hooks.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 = (0, _options.alignmentOptions)()[align].icon;
var _useIntl = (0, _reactIntl.useIntl)(),
formatMessage = _useIntl.formatMessage;
var title = formatMessage(_messages.alignmentMessages.alignment);
return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenu, {
iconBefore: /*#__PURE__*/_react.default.createElement(Icon, {
label: "",
size: "small"
}),
isDisabled: !isEnabled,
testId: "text-alignment-menu",
label: title,
tooltipComponent: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
content: title
})
}, children);
};