@atlaskit/editor-plugin-text-formatting
Version:
Text-formatting plugin for @atlaskit/editor-core
154 lines • 6.34 kB
JavaScript
import React from 'react';
import { useIntl } from 'react-intl';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { ToolTipContent, clearFormatting, getAriaKeyshortcuts, tooltip } from '@atlaskit/editor-common/keymaps';
import { toolbarMessages } from '@atlaskit/editor-common/messages';
import { getInputMethodFromParentKeys, TEXT_COLLAPSED_MENU } from '@atlaskit/editor-common/toolbar';
import { ToolbarButton, ToolbarDropdownItem, ClearFormattingIcon, ToolbarKeyboardShortcutHint, ToolbarDropdownMenu, MoreItemsIcon, ToolbarTooltip, ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
import { clearFormattingWithAnalyticsNext } from '../../../editor-commands/clear-formatting';
import { useComponentInfo } from './utils';
export var FormatMenuItem = function FormatMenuItem(_ref) {
var parents = _ref.parents,
api = _ref.api,
optionType = _ref.optionType,
toggleMarkWithAnalyticsCallback = _ref.toggleMarkWithAnalyticsCallback,
icon = _ref.icon,
shortcut = _ref.shortcut,
title = _ref.title;
var _useComponentInfo = useComponentInfo({
api: api,
optionType: optionType,
title: title,
shortcut: shortcut,
toggleMarkWithAnalyticsCallback: toggleMarkWithAnalyticsCallback,
parents: parents
}),
isActive = _useComponentInfo.isActive,
isDisabled = _useComponentInfo.isDisabled,
isHidden = _useComponentInfo.isHidden,
shortcutContent = _useComponentInfo.shortcutContent,
onClick = _useComponentInfo.onClick,
ariaLabel = _useComponentInfo.ariaLabel,
formatTitle = _useComponentInfo.formatTitle;
var Icon = icon;
if (isHidden) {
return null;
}
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
elemBefore: /*#__PURE__*/React.createElement(Icon, {
size: "small",
label: ""
}),
elemAfter: shortcutContent && /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
shortcut: shortcutContent
}),
isDisabled: isDisabled,
isSelected: isActive,
onClick: onClick,
"aria-keyshortcuts": getAriaKeyshortcuts(shortcut),
"aria-label": ariaLabel
}, formatTitle);
};
export var FormatButton = function FormatButton(_ref2) {
var parents = _ref2.parents,
api = _ref2.api,
optionType = _ref2.optionType,
toggleMarkWithAnalyticsCallback = _ref2.toggleMarkWithAnalyticsCallback,
icon = _ref2.icon,
shortcut = _ref2.shortcut,
title = _ref2.title;
var _useComponentInfo2 = useComponentInfo({
api: api,
optionType: optionType,
title: title,
shortcut: shortcut,
toggleMarkWithAnalyticsCallback: toggleMarkWithAnalyticsCallback,
parents: parents
}),
isActive = _useComponentInfo2.isActive,
isDisabled = _useComponentInfo2.isDisabled,
onClick = _useComponentInfo2.onClick,
ariaLabel = _useComponentInfo2.ariaLabel,
formatTitle = _useComponentInfo2.formatTitle;
var Icon = icon;
return /*#__PURE__*/React.createElement(ToolbarTooltip, {
content: /*#__PURE__*/React.createElement(ToolTipContent, {
description: formatTitle,
keymap: shortcut
})
}, /*#__PURE__*/React.createElement(ToolbarButton, {
iconBefore: /*#__PURE__*/React.createElement(Icon, {
label: ariaLabel,
size: "small"
}),
onClick: onClick,
isSelected: isActive,
isDisabled: isDisabled,
ariaKeyshortcuts: getAriaKeyshortcuts(shortcut),
testId: "editor-toolbar__".concat(formatTitle)
}));
};
export var ClearFormatMenuItem = function ClearFormatMenuItem(_ref3) {
var api = _ref3.api,
parents = _ref3.parents;
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['textFormatting'], function (states) {
var _states$textFormattin, _states$textFormattin2;
return {
isInitialised: (_states$textFormattin = states.textFormattingState) === null || _states$textFormattin === void 0 ? void 0 : _states$textFormattin.isInitialised,
isFormattingPresent: (_states$textFormattin2 = states.textFormattingState) === null || _states$textFormattin2 === void 0 ? void 0 : _states$textFormattin2.formattingIsPresent
};
}),
isInitialised = _useSharedPluginState.isInitialised,
isFormattingPresent = _useSharedPluginState.isFormattingPresent;
var _useIntl = useIntl(),
formatMessage = _useIntl.formatMessage;
if (!isInitialised) {
return null;
}
var formatTitle = formatMessage(toolbarMessages.clearFormatting);
var shortcutContent = tooltip(clearFormatting);
var onClick = function onClick() {
var _api$analytics;
api === null || api === void 0 || api.core.actions.execute(clearFormattingWithAnalyticsNext(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(getInputMethodFromParentKeys(parents)));
};
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
elemBefore: /*#__PURE__*/React.createElement(ClearFormattingIcon, {
label: "",
size: "small"
}),
elemAfter: shortcutContent && /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
shortcut: shortcutContent
}),
isDisabled: !isFormattingPresent,
onClick: onClick,
ariaKeyshortcuts: getAriaKeyshortcuts(clearFormatting)
}, formatTitle);
};
export var MoreFormattingMenu = function MoreFormattingMenu(_ref4) {
var children = _ref4.children;
var _useIntl2 = useIntl(),
formatMessage = _useIntl2.formatMessage;
var content = formatMessage(toolbarMessages.moreFormatting);
return /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
iconBefore: /*#__PURE__*/React.createElement(MoreItemsIcon, {
label: "",
testId: "more-formatting"
}),
label: content,
tooltipComponent: /*#__PURE__*/React.createElement(ToolbarTooltip, {
content: formatMessage(toolbarMessages.textFormat)
})
}, children);
};
export var MenuSection = function MenuSection(_ref5) {
var children = _ref5.children,
title = _ref5.title,
parents = _ref5.parents;
var hasSeparator = parents.some(function (parent) {
return parent.key === TEXT_COLLAPSED_MENU.key;
});
return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
hasSeparator: hasSeparator,
title: title
}, children);
};