@atlaskit/editor-plugin-track-changes
Version:
ShowDiff plugin for @atlaskit/editor-core
67 lines • 3.22 kB
JavaScript
import React from 'react';
import { useIntl } from 'react-intl';
import { IconButton } from '@atlaskit/button/new';
import { getBrowserInfo } from '@atlaskit/editor-common/browser';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { toggleViewChanges, ToolTipContent } from '@atlaskit/editor-common/keymaps';
import { trackChangesMessages } from '@atlaskit/editor-common/messages';
import { HistoryIcon, ToolbarButton, ToolbarTooltip } from '@atlaskit/editor-toolbar';
export const TrackChangesToolbarButton = ({
api,
wrapper: Wrapper
}) => {
const isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
const {
isDisplayingChanges,
isShowDiffAvailable
} = useSharedPluginStateWithSelector(api, ['trackChanges'], states => {
var _states$trackChangesS, _states$trackChangesS2;
return {
isDisplayingChanges: (_states$trackChangesS = states.trackChangesState) === null || _states$trackChangesS === void 0 ? void 0 : _states$trackChangesS.isDisplayingChanges,
isShowDiffAvailable: (_states$trackChangesS2 = states.trackChangesState) === null || _states$trackChangesS2 === void 0 ? void 0 : _states$trackChangesS2.isShowDiffAvailable
};
});
const {
formatMessage
} = useIntl();
const handleClick = React.useCallback(() => {
var _api$trackChanges;
const wasShowingDiffSelected = isDisplayingChanges;
const result = api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$trackChanges = api.trackChanges) === null || _api$trackChanges === void 0 ? void 0 : _api$trackChanges.commands.toggleChanges);
// On de-selection - focus back on the editor
if (result && wasShowingDiffSelected) {
api === null || api === void 0 ? void 0 : api.core.actions.focus();
}
}, [api, isDisplayingChanges]);
const browser = getBrowserInfo();
// Exclude Firefox browser from showing keyboard shortcut in tooltip
const showShortcut = !browser.gecko;
const tooltipContent = showShortcut ? /*#__PURE__*/React.createElement(ToolTipContent, {
description: formatMessage(trackChangesMessages.toolbarIconLabel),
keymap: toggleViewChanges
}) : formatMessage(trackChangesMessages.toolbarIconLabel);
if (!isToolbarAIFCEnabled) {
return /*#__PURE__*/React.createElement(ToolbarTooltip, {
content: tooltipContent
}, /*#__PURE__*/React.createElement(IconButton, {
icon: HistoryIcon,
label: formatMessage(trackChangesMessages.toolbarIconLabel),
appearance: "subtle",
isDisabled: !isShowDiffAvailable,
isSelected: isDisplayingChanges,
onClick: handleClick
}));
}
const button = /*#__PURE__*/React.createElement(ToolbarTooltip, {
content: tooltipContent
}, /*#__PURE__*/React.createElement(ToolbarButton, {
iconBefore: /*#__PURE__*/React.createElement(HistoryIcon, {
label: formatMessage(trackChangesMessages.toolbarIconLabel),
size: "small"
}),
onClick: handleClick,
isDisabled: !isShowDiffAvailable,
isSelected: isDisplayingChanges
}));
return Wrapper ? /*#__PURE__*/React.createElement(Wrapper, null, button) : button;
};