@atlaskit/editor-plugin-text-formatting
Version:
Text-formatting plugin for @atlaskit/editor-core
225 lines (222 loc) • 10.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _reactIntl = require("react-intl");
var _hooks = require("@atlaskit/editor-common/hooks");
var _messages = require("@atlaskit/editor-common/messages");
var _styles = require("@atlaskit/editor-common/styles");
var _ui = require("@atlaskit/editor-common/ui");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _utils = require("../../editor-commands/utils");
var _dropdownMenu = require("./dropdown-menu");
var _clearFormattingIcon = require("./hooks/clear-formatting-icon");
var _formattingIcons = require("./hooks/formatting-icons");
var _responsiveToolbarButtons = require("./hooks/responsive-toolbar-buttons");
var _moreButton = require("./more-button");
var _singleToolbarButtons = require("./single-toolbar-buttons");
var _excluded = ["formattingIsPresent"];
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
var ToolbarFormatting = function ToolbarFormatting(_ref) {
var _usePreviousState;
var shouldUseResponsiveToolbar = _ref.shouldUseResponsiveToolbar,
popupsMountPoint = _ref.popupsMountPoint,
popupsBoundariesElement = _ref.popupsBoundariesElement,
popupsScrollableElement = _ref.popupsScrollableElement,
editorView = _ref.editorView,
toolbarSize = _ref.toolbarSize,
isReducedSpacing = _ref.isReducedSpacing,
isToolbarDisabled = _ref.isToolbarDisabled,
intl = _ref.intl,
editorAnalyticsAPI = _ref.editorAnalyticsAPI,
textFormattingState = _ref.textFormattingState,
api = _ref.api,
toolbarType = _ref.toolbarType;
var _useState = (0, _react.useState)(''),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
message = _useState2[0],
setMessage = _useState2[1];
var formattingIsPresent = textFormattingState.formattingIsPresent,
formattingIconState = (0, _objectWithoutProperties2.default)(textFormattingState, _excluded);
var defaultIcons = (0, _formattingIcons.useFormattingIcons)({
schema: editorView.state.schema,
intl: intl,
isToolbarDisabled: isToolbarDisabled,
editorAnalyticsAPI: editorAnalyticsAPI,
textFormattingState: formattingIconState,
toolbarType: toolbarType
});
var clearIcon = (0, _clearFormattingIcon.useClearIcon)({
formattingPluginInitialised: textFormattingState.isInitialised,
formattingIsPresent: formattingIsPresent,
intl: intl,
editorAnalyticsAPI: editorAnalyticsAPI,
toolbarType: toolbarType
});
var menuIconTypeList = (0, _responsiveToolbarButtons.useResponsiveIconTypeMenu)({
toolbarSize: toolbarSize,
responsivenessEnabled: shouldUseResponsiveToolbar
});
var hasFormattingActive = (0, _formattingIcons.useHasFormattingActived)({
iconTypeList: menuIconTypeList,
textFormattingState: textFormattingState
});
var _useResponsiveToolbar = (0, _responsiveToolbarButtons.useResponsiveToolbarButtons)({
icons: defaultIcons,
toolbarSize: toolbarSize,
responsivenessEnabled: shouldUseResponsiveToolbar
}),
dropdownItems = _useResponsiveToolbar.dropdownItems,
singleItems = _useResponsiveToolbar.singleItems;
var clearFormattingStatus = intl.formatMessage(_messages.toolbarMessages.textFormattingOff);
var superscriptOffSubscriptOnStatus = intl.formatMessage(_messages.toolbarMessages.superscriptOffSubscriptOn);
var subscriptOffSuperscriptOnStatus = intl.formatMessage(_messages.toolbarMessages.subscriptOffSuperscriptOn);
// eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- Ignored via go/ees017 (to be fixed)
var activeItems = [].concat((0, _toConsumableArray2.default)(dropdownItems), (0, _toConsumableArray2.default)(singleItems)).filter(function (item) {
return item.isActive;
});
var prevActiveItems = (_usePreviousState = (0, _hooks.usePreviousState)(activeItems)) !== null && _usePreviousState !== void 0 ? _usePreviousState : [];
var fromSuperscriptToSubscript = (0, _utils.isArrayContainsContent)(activeItems, 'Subscript') && (0, _utils.isArrayContainsContent)(prevActiveItems, 'Superscript');
var fromSubscriptToSuperscript = (0, _utils.isArrayContainsContent)(activeItems, 'Superscript') && (0, _utils.isArrayContainsContent)(prevActiveItems, 'Subscript');
var comparedItems;
var screenReaderMessage = '';
if (prevActiveItems && activeItems.length > prevActiveItems.length) {
comparedItems = (0, _utils.compareItemsArrays)(activeItems, prevActiveItems);
screenReaderMessage = intl.formatMessage(_messages.toolbarMessages.on, {
formattingType: comparedItems[0].content
});
} else {
comparedItems = (0, _utils.compareItemsArrays)(prevActiveItems, activeItems);
if (comparedItems && comparedItems.length) {
var _activeItems$;
screenReaderMessage = intl.formatMessage(_messages.toolbarMessages.off, {
formattingType: comparedItems[0].content
});
if (((_activeItems$ = activeItems[0]) === null || _activeItems$ === void 0 ? void 0 : _activeItems$.content) === 'Code') {
screenReaderMessage = intl.formatMessage(_messages.toolbarMessages.codeOn, {
textFormattingOff: (prevActiveItems === null || prevActiveItems === void 0 ? void 0 : prevActiveItems.length) > 1 ? clearFormattingStatus : screenReaderMessage
});
}
if (fromSuperscriptToSubscript) {
screenReaderMessage = superscriptOffSubscriptOnStatus;
}
if (fromSubscriptToSuperscript) {
screenReaderMessage = subscriptOffSuperscriptOnStatus;
}
}
}
// handle 'Clear formatting' status for screen readers
if (!(activeItems !== null && activeItems !== void 0 && activeItems.length) && (prevActiveItems === null || prevActiveItems === void 0 ? void 0 : prevActiveItems.length) > 1) {
screenReaderMessage = clearFormattingStatus;
}
var items = (0, _react.useMemo)(function () {
if (!clearIcon) {
return [{
items: dropdownItems
}];
}
return [{
items: dropdownItems
}, {
items: [clearIcon]
}];
}, [clearIcon, dropdownItems]);
var moreFormattingButtonLabel = intl.formatMessage(_messages.toolbarMessages.moreFormatting);
var labelTextFormat = intl.formatMessage(_messages.toolbarMessages.textFormatting);
(0, _react.useEffect)(function () {
if (screenReaderMessage) {
setMessage(screenReaderMessage);
}
}, [screenReaderMessage]);
return (
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
(0, _react2.jsx)("span", {
css:
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
_styles.buttonGroupStyle
}, (0, _react2.jsx)("div", {
role: "group"
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: 'js-text-format-wrap',
"aria-label": labelTextFormat
}, message && (0, _react2.jsx)(_ui.Announcer, {
ariaLive: "assertive",
text: message,
ariaRelevant: "additions",
delay: 250
}), (0, _react2.jsx)(_singleToolbarButtons.SingleToolbarButtons, {
items: singleItems,
editorView: editorView,
isReducedSpacing: isReducedSpacing
}), (0, _react2.jsx)("span", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage
css: _styles.wrapperStyle
}, isToolbarDisabled && !(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? (0, _react2.jsx)("div", null, (0, _react2.jsx)(_moreButton.MoreButton, {
label: moreFormattingButtonLabel,
isReducedSpacing: isReducedSpacing,
isDisabled: true,
isSelected: false,
"aria-expanded": undefined,
"aria-pressed": undefined
})) : (0, _react2.jsx)(_dropdownMenu.FormattingTextDropdownMenu, {
popupsMountPoint: popupsMountPoint,
popupsBoundariesElement: popupsBoundariesElement,
popupsScrollableElement: popupsScrollableElement,
editorView: editorView,
isReducedSpacing: isReducedSpacing,
moreButtonLabel: moreFormattingButtonLabel,
hasFormattingActive: hasFormattingActive,
hasMoreButton: !(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1'),
items: items,
intl: intl,
toolbarType: toolbarType,
isDisabled: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? isToolbarDisabled : false
}))), !(api !== null && api !== void 0 && api.primaryToolbar) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
(0, _react2.jsx)("span", {
css: _styles.separatorStyles
}))
);
};
var Toolbar = function Toolbar(_ref2) {
var popupsMountPoint = _ref2.popupsMountPoint,
popupsScrollableElement = _ref2.popupsScrollableElement,
toolbarSize = _ref2.toolbarSize,
isReducedSpacing = _ref2.isReducedSpacing,
editorView = _ref2.editorView,
isToolbarDisabled = _ref2.isToolbarDisabled,
shouldUseResponsiveToolbar = _ref2.shouldUseResponsiveToolbar,
intl = _ref2.intl,
editorAnalyticsAPI = _ref2.editorAnalyticsAPI,
textFormattingState = _ref2.textFormattingState,
api = _ref2.api,
toolbarType = _ref2.toolbarType;
return (0, _react2.jsx)(ToolbarFormatting, {
textFormattingState: textFormattingState,
popupsMountPoint: popupsMountPoint,
popupsScrollableElement: popupsScrollableElement,
toolbarSize: toolbarSize,
isReducedSpacing: isReducedSpacing,
editorView: editorView,
isToolbarDisabled: isToolbarDisabled,
shouldUseResponsiveToolbar: shouldUseResponsiveToolbar,
intl: intl,
editorAnalyticsAPI: editorAnalyticsAPI,
api: api,
toolbarType: toolbarType
});
};
var _default_1 = (0, _reactIntl.injectIntl)(Toolbar);
var _default = exports.default = _default_1;