@atlaskit/editor-plugin-track-changes/dist/esm/ui/TrackChangesToolbarButton.js

ShowDiff plugin for @atlaskit/editor-core

import React from 'react';
import { useIntl } from 'react-intl';
import IconButton from '@atlaskit/button/icon/button';
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 var TrackChangesToolbarButton = function TrackChangesToolbarButton(_ref) {
  var api = _ref.api,
    Wrapper = _ref.wrapper;
  var isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['trackChanges'], function (states) {
      var _states$trackChangesS, _states$trackChangesS2, _states$trackChangesS3;
      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,
        isToggleChangesDisabled: (_states$trackChangesS3 = states.trackChangesState) === null || _states$trackChangesS3 === void 0 ? void 0 : _states$trackChangesS3.isToggleChangesDisabled
      };
    }),
    isDisplayingChanges = _useSharedPluginState.isDisplayingChanges,
    isShowDiffAvailable = _useSharedPluginState.isShowDiffAvailable,
    isToggleChangesDisabled = _useSharedPluginState.isToggleChangesDisabled;

  // Disabled either because there's nothing to diff, or because another plugin currently
  // owns the diff decorations (e.g. the AI Review moment is visible).
  var isDisabled = !isShowDiffAvailable || Boolean(isToggleChangesDisabled);
  var _useIntl = useIntl(),
    formatMessage = _useIntl.formatMessage;
  var handleClick = React.useCallback(function () {
    var _api$trackChanges;
    var wasShowingDiffSelected = isDisplayingChanges;
    var result = api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === 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 || api.core.actions.focus();
    }
  }, [api, isDisplayingChanges]);
  var browser = getBrowserInfo();
  // Exclude Firefox browser from showing keyboard shortcut in tooltip
  var showShortcut = !browser.gecko;
  var 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: isDisabled,
      isSelected: isDisplayingChanges,
      onClick: handleClick
    }));
  }
  var 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: isDisabled,
    isSelected: isDisplayingChanges
  }));
  return Wrapper ? /*#__PURE__*/React.createElement(Wrapper, null, button) : button;
};