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

ShowDiff plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TrackChangesToolbarButton = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactIntl = require("react-intl");
var _new = require("@atlaskit/button/new");
var _browser = require("@atlaskit/editor-common/browser");
var _hooks = require("@atlaskit/editor-common/hooks");
var _keymaps = require("@atlaskit/editor-common/keymaps");
var _messages = require("@atlaskit/editor-common/messages");
var _editorToolbar = require("@atlaskit/editor-toolbar");
var TrackChangesToolbarButton = exports.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 = (0, _hooks.useSharedPluginStateWithSelector)(api, ['trackChanges'], function (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
      };
    }),
    isDisplayingChanges = _useSharedPluginState.isDisplayingChanges,
    isShowDiffAvailable = _useSharedPluginState.isShowDiffAvailable;
  var _useIntl = (0, _reactIntl.useIntl)(),
    formatMessage = _useIntl.formatMessage;
  var handleClick = _react.default.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 = (0, _browser.getBrowserInfo)();
  // Exclude Firefox browser from showing keyboard shortcut in tooltip
  var showShortcut = !browser.gecko;
  var tooltipContent = showShortcut ? /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
    description: formatMessage(_messages.trackChangesMessages.toolbarIconLabel),
    keymap: _keymaps.toggleViewChanges
  }) : formatMessage(_messages.trackChangesMessages.toolbarIconLabel);
  if (!isToolbarAIFCEnabled) {
    return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
      content: tooltipContent
    }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
      icon: _editorToolbar.HistoryIcon,
      label: formatMessage(_messages.trackChangesMessages.toolbarIconLabel),
      appearance: "subtle",
      isDisabled: !isShowDiffAvailable,
      isSelected: isDisplayingChanges,
      onClick: handleClick
    }));
  }
  var button = /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
    content: tooltipContent
  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButton, {
    iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.HistoryIcon, {
      label: formatMessage(_messages.trackChangesMessages.toolbarIconLabel),
      size: "small"
    }),
    onClick: handleClick,
    isDisabled: !isShowDiffAvailable,
    isSelected: isDisplayingChanges
  }));
  return Wrapper ? /*#__PURE__*/_react.default.createElement(Wrapper, null, button) : button;
};