@atlaskit/editor-plugin-text-formatting
Version:
Text-formatting plugin for @atlaskit/editor-core
218 lines (216 loc) • 10 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
var _excluded = ["formattingIsPresent"];
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { useEffect, useMemo, useState } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { jsx } from '@emotion/react';
import { injectIntl } from 'react-intl';
import { usePreviousState } from '@atlaskit/editor-common/hooks';
import { toolbarMessages } from '@atlaskit/editor-common/messages';
import { buttonGroupStyle, separatorStyles, wrapperStyle } from '@atlaskit/editor-common/styles';
import { Announcer } from '@atlaskit/editor-common/ui';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { compareItemsArrays, isArrayContainsContent } from '../../editor-commands/utils';
import { FormattingTextDropdownMenu } from './dropdown-menu';
import { useClearIcon } from './hooks/clear-formatting-icon';
import { useFormattingIcons, useHasFormattingActived } from './hooks/formatting-icons';
import { useResponsiveIconTypeMenu, useResponsiveToolbarButtons } from './hooks/responsive-toolbar-buttons';
import { MoreButton } from './more-button';
import { SingleToolbarButtons } from './single-toolbar-buttons';
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 = useState(''),
_useState2 = _slicedToArray(_useState, 2),
message = _useState2[0],
setMessage = _useState2[1];
var formattingIsPresent = textFormattingState.formattingIsPresent,
formattingIconState = _objectWithoutProperties(textFormattingState, _excluded);
var defaultIcons = useFormattingIcons({
schema: editorView.state.schema,
intl: intl,
isToolbarDisabled: isToolbarDisabled,
editorAnalyticsAPI: editorAnalyticsAPI,
textFormattingState: formattingIconState,
toolbarType: toolbarType
});
var clearIcon = useClearIcon({
formattingPluginInitialised: textFormattingState.isInitialised,
formattingIsPresent: formattingIsPresent,
intl: intl,
editorAnalyticsAPI: editorAnalyticsAPI,
toolbarType: toolbarType
});
var menuIconTypeList = useResponsiveIconTypeMenu({
toolbarSize: toolbarSize,
responsivenessEnabled: shouldUseResponsiveToolbar
});
var hasFormattingActive = useHasFormattingActived({
iconTypeList: menuIconTypeList,
textFormattingState: textFormattingState
});
var _useResponsiveToolbar = useResponsiveToolbarButtons({
icons: defaultIcons,
toolbarSize: toolbarSize,
responsivenessEnabled: shouldUseResponsiveToolbar
}),
dropdownItems = _useResponsiveToolbar.dropdownItems,
singleItems = _useResponsiveToolbar.singleItems;
var clearFormattingStatus = intl.formatMessage(toolbarMessages.textFormattingOff);
var superscriptOffSubscriptOnStatus = intl.formatMessage(toolbarMessages.superscriptOffSubscriptOn);
var subscriptOffSuperscriptOnStatus = intl.formatMessage(toolbarMessages.subscriptOffSuperscriptOn);
// eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- Ignored via go/ees017 (to be fixed)
var activeItems = [].concat(_toConsumableArray(dropdownItems), _toConsumableArray(singleItems)).filter(function (item) {
return item.isActive;
});
var prevActiveItems = (_usePreviousState = usePreviousState(activeItems)) !== null && _usePreviousState !== void 0 ? _usePreviousState : [];
var fromSuperscriptToSubscript = isArrayContainsContent(activeItems, 'Subscript') && isArrayContainsContent(prevActiveItems, 'Superscript');
var fromSubscriptToSuperscript = isArrayContainsContent(activeItems, 'Superscript') && isArrayContainsContent(prevActiveItems, 'Subscript');
var comparedItems;
var screenReaderMessage = '';
if (prevActiveItems && activeItems.length > prevActiveItems.length) {
comparedItems = compareItemsArrays(activeItems, prevActiveItems);
screenReaderMessage = intl.formatMessage(toolbarMessages.on, {
formattingType: comparedItems[0].content
});
} else {
comparedItems = compareItemsArrays(prevActiveItems, activeItems);
if (comparedItems && comparedItems.length) {
var _activeItems$;
screenReaderMessage = intl.formatMessage(toolbarMessages.off, {
formattingType: comparedItems[0].content
});
if (((_activeItems$ = activeItems[0]) === null || _activeItems$ === void 0 ? void 0 : _activeItems$.content) === 'Code') {
screenReaderMessage = intl.formatMessage(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 = useMemo(function () {
if (!clearIcon) {
return [{
items: dropdownItems
}];
}
return [{
items: dropdownItems
}, {
items: [clearIcon]
}];
}, [clearIcon, dropdownItems]);
var moreFormattingButtonLabel = intl.formatMessage(toolbarMessages.moreFormatting);
var labelTextFormat = intl.formatMessage(toolbarMessages.textFormatting);
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
jsx("span", {
css:
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
buttonGroupStyle
}, 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 && jsx(Announcer, {
ariaLive: "assertive",
text: message,
ariaRelevant: "additions",
delay: 250
}), jsx(SingleToolbarButtons, {
items: singleItems,
editorView: editorView,
isReducedSpacing: isReducedSpacing
}), jsx("span", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage
css: wrapperStyle
}, isToolbarDisabled && !editorExperiment('platform_editor_controls', 'variant1') ? jsx("div", null, jsx(MoreButton, {
label: moreFormattingButtonLabel,
isReducedSpacing: isReducedSpacing,
isDisabled: true,
isSelected: false,
"aria-expanded": undefined,
"aria-pressed": undefined
})) : jsx(FormattingTextDropdownMenu, {
popupsMountPoint: popupsMountPoint,
popupsBoundariesElement: popupsBoundariesElement,
popupsScrollableElement: popupsScrollableElement,
editorView: editorView,
isReducedSpacing: isReducedSpacing,
moreButtonLabel: moreFormattingButtonLabel,
hasFormattingActive: hasFormattingActive,
hasMoreButton: !editorExperiment('platform_editor_controls', 'variant1'),
items: items,
intl: intl,
toolbarType: toolbarType,
isDisabled: 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
jsx("span", {
css: 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 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 = injectIntl(Toolbar);
export default _default_1;