@atlaskit/editor-plugin-highlight
Version:
Highlight plugin for @atlaskit/editor-core
143 lines (141 loc) • 6.27 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { useRef } 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 { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { DynamicStrokeIconDecoration } from '@atlaskit/editor-common/icons';
import { toggleHighlightPalette, tooltip, getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
import { highlightMessages as messages } from '@atlaskit/editor-common/messages';
import { disableBlueBorderStyles, expandIconContainerStyle, triggerWrapperStylesWithPadding } from '@atlaskit/editor-common/styles';
import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
import { hexToEditorTextBackgroundPaletteColor } from '@atlaskit/editor-palette';
import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
import HighlightIcon from '@atlaskit/icon/core/highlight';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { setPalette } from '../editor-commands/palette';
import { PaletteDropdown } from './shared/PaletteDropdown';
import { useDropdownEvents } from './shared/useDropdownEvents';
const selector = states => {
var _states$highlightStat, _states$highlightStat2, _states$highlightStat3;
return {
isPaletteOpen: (_states$highlightStat = states.highlightState) === null || _states$highlightStat === void 0 ? void 0 : _states$highlightStat.isPaletteOpen,
activeColor: (_states$highlightStat2 = states.highlightState) === null || _states$highlightStat2 === void 0 ? void 0 : _states$highlightStat2.activeColor,
disabled: (_states$highlightStat3 = states.highlightState) === null || _states$highlightStat3 === void 0 ? void 0 : _states$highlightStat3.disabled
};
};
const FloatingToolbarHighlightColor = ({
pluginInjectionApi,
intl: {
formatMessage
},
editorView
}) => {
const toolbarItemRef = useRef(null);
const {
activeColor,
disabled,
isPaletteOpen
} = useSharedPluginStateWithSelector(pluginInjectionApi, ['highlight'], selector);
const setDropdownOpen = isOpen => {
var _pluginInjectionApi$a;
if (!disabled && editorView && pluginInjectionApi) {
const {
state,
dispatch
} = editorView;
setPalette(pluginInjectionApi)({
isPaletteOpen: isOpen,
inputMethod: INPUT_METHOD.FLOATING_TB
})(state, dispatch);
}
pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.fireAnalyticsEvent({
action: isOpen ? ACTION.OPENED : ACTION.CLOSED,
actionSubject: ACTION_SUBJECT.TOOLBAR,
actionSubjectId: ACTION_SUBJECT_ID.FORMAT_BACKGROUND_COLOR,
eventType: EVENT_TYPE.TRACK,
attributes: {
inputMethod: INPUT_METHOD.FLOATING_TB
}
});
};
const isDropdownOpen = !!isPaletteOpen;
const {
handleClick,
handleKeyDown,
handleClickOutside,
handleEscapeKeydown,
handleColorChange,
isOpenedByKeyboard
} = useDropdownEvents({
toolbarItemRef,
setIsDropdownOpen: setDropdownOpen,
isDropdownOpen,
pluginInjectionApi
});
// Don't render the toolbar option while the plugin is initialising
if (activeColor === undefined || disabled === undefined) {
return null;
}
const toolbarButtonLabel = formatMessage(messages.highlight);
// Get the design token for the active color (if it exists) to modify the toolbar
// icon, but show the nice rainbow if none is selected
const activeColorToken = activeColor === null ? null : hexToEditorTextBackgroundPaletteColor(activeColor);
const title = editorExperiment('platform_editor_controls', 'variant1') ? tooltip(toggleHighlightPalette, toolbarButtonLabel) : toolbarButtonLabel;
return jsx(PaletteDropdown, {
isOpen: isDropdownOpen && !disabled,
activeColor: activeColor,
trigger: jsx(ToolbarButton
// eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-imported-style-values
, {
css: disableBlueBorderStyles,
buttonId: TOOLBAR_BUTTON.BACKGROUND_COLOR,
spacing: editorExperiment('platform_editor_controls', 'variant1') ? 'default' : 'compact',
disabled: disabled,
selected: isDropdownOpen,
"aria-label": title,
"aria-keyshortcuts": getAriaKeyshortcuts(toggleHighlightPalette),
"aria-expanded": isDropdownOpen,
"aria-haspopup": true,
title: title,
onClick: handleClick,
onKeyDown: handleKeyDown,
ref: toolbarItemRef,
iconBefore:
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
jsx("div", {
css: triggerWrapperStylesWithPadding
}, jsx(DynamicStrokeIconDecoration, {
selectedColor: activeColorToken,
disabled: disabled,
icon: jsx(HighlightIcon, {
label: "",
color: "currentColor",
spacing: "spacious"
})
}),
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
jsx("span", {
css: expandIconContainerStyle
}, jsx(ChevronDownIcon, {
label: "",
color: "currentColor",
size: "small"
})))
}, editorExperiment('platform_editor_controls', 'control') && formatMessage(messages.highlightFloatingToolbar))
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onColorChange: color => handleColorChange({
color,
inputMethod: INPUT_METHOD.FLOATING_TB
}),
isOpenedByKeyboard: isOpenedByKeyboard,
handleClickOutside: handleClickOutside,
handleEscapeKeydown: handleEscapeKeydown
});
};
export const FloatingToolbarHighlightColorWithIntl = injectIntl(FloatingToolbarHighlightColor);