@atlaskit/editor-plugin-undo-redo
Version:
Undo redo plugin for @atlaskit/editor-core
97 lines (95 loc) • 4.2 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
import { jsx } from '@emotion/react';
import { injectIntl } from 'react-intl';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { getAriaKeyshortcuts, redoAlt, tooltip, ToolTipContent, undo as undoKeymap } from '@atlaskit/editor-common/keymaps';
import { undoRedoMessages } from '@atlaskit/editor-common/messages';
import { buttonGroupStyle, separatorStyles } from '@atlaskit/editor-common/styles';
import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
import RedoIcon from '@atlaskit/icon/core/redo';
import UndoIcon from '@atlaskit/icon/core/undo';
import { redoFromToolbarWithAnalytics, undoFromToolbarWithAnalytics } from '../../pm-plugins/commands';
import { forceFocus } from '../../pm-plugins/utils';
export const ToolbarUndoRedo = ({
disabled,
isReducedSpacing,
editorView,
api,
intl: {
formatMessage
}
}) => {
const {
canRedo,
canUndo
} = useSharedPluginStateWithSelector(api, ['history'], states => {
var _states$historyState, _states$historyState2;
return {
canUndo: (_states$historyState = states.historyState) === null || _states$historyState === void 0 ? void 0 : _states$historyState.canUndo,
canRedo: (_states$historyState2 = states.historyState) === null || _states$historyState2 === void 0 ? void 0 : _states$historyState2.canRedo
};
});
const handleUndo = () => {
var _api$analytics;
forceFocus(editorView, api)(undoFromToolbarWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions));
};
const handleRedo = () => {
var _api$analytics2;
forceFocus(editorView, api)(redoFromToolbarWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions));
};
const labelUndo = formatMessage(undoRedoMessages.undo);
const labelRedo = formatMessage(undoRedoMessages.redo);
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(ToolbarButton, {
buttonId: TOOLBAR_BUTTON.UNDO,
spacing: isReducedSpacing ? 'none' : 'default',
onClick: handleUndo,
disabled: !canUndo || disabled,
"aria-label": tooltip(undoKeymap, labelUndo),
"aria-keyshortcuts": getAriaKeyshortcuts(undoKeymap),
title: jsx(ToolTipContent, {
description: labelUndo,
keymap: undoKeymap
}),
iconBefore: jsx(UndoIcon, {
label: "",
color: "currentColor",
spacing: "spacious"
}),
testId: "ak-editor-toolbar-button-undo"
}), jsx(ToolbarButton, {
spacing: isReducedSpacing ? 'none' : 'default',
buttonId: TOOLBAR_BUTTON.REDO,
onClick: handleRedo,
disabled: !canRedo || disabled,
title: jsx(ToolTipContent, {
description: labelRedo,
keymap: redoAlt
}),
iconBefore: jsx(RedoIcon, {
label: "",
color: "currentColor",
spacing: "spacious"
}),
testId: "ak-editor-toolbar-button-redo",
"aria-label": tooltip(redoAlt, labelRedo),
"aria-keyshortcuts": getAriaKeyshortcuts(redoAlt)
}), !(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
}))
);
};
// eslint-disable-next-line @typescript-eslint/ban-types
const _default_1 = injectIntl(ToolbarUndoRedo);
export default _default_1;