@atlaskit/editor-plugin-text-formatting/dist/cjs/ui/Toolbar/components/Component.js

Text-formatting plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MoreFormattingMenu = exports.MenuSection = exports.FormatMenuItem = exports.FormatButton = exports.ClearFormatMenuItem = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactIntl = require("react-intl");
var _hooks = require("@atlaskit/editor-common/hooks");
var _keymaps = require("@atlaskit/editor-common/keymaps");
var _messages = require("@atlaskit/editor-common/messages");
var _toolbar = require("@atlaskit/editor-common/toolbar");
var _editorToolbar = require("@atlaskit/editor-toolbar");
var _clearFormatting = require("../../../editor-commands/clear-formatting");
var _utils = require("./utils");
var FormatMenuItem = exports.FormatMenuItem = function FormatMenuItem(_ref) {
  var parents = _ref.parents,
    api = _ref.api,
    optionType = _ref.optionType,
    toggleMarkWithAnalyticsCallback = _ref.toggleMarkWithAnalyticsCallback,
    icon = _ref.icon,
    shortcut = _ref.shortcut,
    title = _ref.title;
  var _useComponentInfo = (0, _utils.useComponentInfo)({
      api: api,
      optionType: optionType,
      title: title,
      shortcut: shortcut,
      toggleMarkWithAnalyticsCallback: toggleMarkWithAnalyticsCallback,
      parents: parents
    }),
    isActive = _useComponentInfo.isActive,
    isDisabled = _useComponentInfo.isDisabled,
    isHidden = _useComponentInfo.isHidden,
    shortcutContent = _useComponentInfo.shortcutContent,
    onClick = _useComponentInfo.onClick,
    ariaLabel = _useComponentInfo.ariaLabel,
    formatTitle = _useComponentInfo.formatTitle;
  var Icon = icon;
  if (isHidden) {
    return null;
  }
  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
    elemBefore: /*#__PURE__*/_react.default.createElement(Icon, {
      size: "small",
      label: ""
    }),
    elemAfter: shortcutContent && /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
      shortcut: shortcutContent
    }),
    isDisabled: isDisabled,
    isSelected: isActive,
    onClick: onClick,
    "aria-keyshortcuts": (0, _keymaps.getAriaKeyshortcuts)(shortcut),
    "aria-label": ariaLabel
  }, formatTitle);
};
var FormatButton = exports.FormatButton = function FormatButton(_ref2) {
  var parents = _ref2.parents,
    api = _ref2.api,
    optionType = _ref2.optionType,
    toggleMarkWithAnalyticsCallback = _ref2.toggleMarkWithAnalyticsCallback,
    icon = _ref2.icon,
    shortcut = _ref2.shortcut,
    title = _ref2.title;
  var _useComponentInfo2 = (0, _utils.useComponentInfo)({
      api: api,
      optionType: optionType,
      title: title,
      shortcut: shortcut,
      toggleMarkWithAnalyticsCallback: toggleMarkWithAnalyticsCallback,
      parents: parents
    }),
    isActive = _useComponentInfo2.isActive,
    isDisabled = _useComponentInfo2.isDisabled,
    onClick = _useComponentInfo2.onClick,
    ariaLabel = _useComponentInfo2.ariaLabel,
    formatTitle = _useComponentInfo2.formatTitle;
  var Icon = icon;
  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
    content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
      description: formatTitle,
      keymap: shortcut
    })
  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButton, {
    iconBefore: /*#__PURE__*/_react.default.createElement(Icon, {
      label: ariaLabel,
      size: "small"
    }),
    onClick: onClick,
    isSelected: isActive,
    isDisabled: isDisabled,
    ariaKeyshortcuts: (0, _keymaps.getAriaKeyshortcuts)(shortcut),
    testId: "editor-toolbar__".concat(formatTitle)
  }));
};
var ClearFormatMenuItem = exports.ClearFormatMenuItem = function ClearFormatMenuItem(_ref3) {
  var api = _ref3.api,
    parents = _ref3.parents;
  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['textFormatting'], function (states) {
      var _states$textFormattin, _states$textFormattin2;
      return {
        isInitialised: (_states$textFormattin = states.textFormattingState) === null || _states$textFormattin === void 0 ? void 0 : _states$textFormattin.isInitialised,
        isFormattingPresent: (_states$textFormattin2 = states.textFormattingState) === null || _states$textFormattin2 === void 0 ? void 0 : _states$textFormattin2.formattingIsPresent
      };
    }),
    isInitialised = _useSharedPluginState.isInitialised,
    isFormattingPresent = _useSharedPluginState.isFormattingPresent;
  var _useIntl = (0, _reactIntl.useIntl)(),
    formatMessage = _useIntl.formatMessage;
  if (!isInitialised) {
    return null;
  }
  var formatTitle = formatMessage(_messages.toolbarMessages.clearFormatting);
  var shortcutContent = (0, _keymaps.tooltip)(_keymaps.clearFormatting);
  var onClick = function onClick() {
    var _api$analytics;
    api === null || api === void 0 || api.core.actions.execute((0, _clearFormatting.clearFormattingWithAnalyticsNext)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)((0, _toolbar.getInputMethodFromParentKeys)(parents)));
  };
  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.ClearFormattingIcon, {
      label: "",
      size: "small"
    }),
    elemAfter: shortcutContent && /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
      shortcut: shortcutContent
    }),
    isDisabled: !isFormattingPresent,
    onClick: onClick,
    ariaKeyshortcuts: (0, _keymaps.getAriaKeyshortcuts)(_keymaps.clearFormatting)
  }, formatTitle);
};
var MoreFormattingMenu = exports.MoreFormattingMenu = function MoreFormattingMenu(_ref4) {
  var children = _ref4.children;
  var _useIntl2 = (0, _reactIntl.useIntl)(),
    formatMessage = _useIntl2.formatMessage;
  var content = formatMessage(_messages.toolbarMessages.moreFormatting);
  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenu, {
    iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.MoreItemsIcon, {
      label: "",
      testId: "more-formatting"
    }),
    label: content,
    tooltipComponent: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
      content: formatMessage(_messages.toolbarMessages.textFormat)
    })
  }, children);
};
var MenuSection = exports.MenuSection = function MenuSection(_ref5) {
  var children = _ref5.children,
    title = _ref5.title,
    parents = _ref5.parents;
  var hasSeparator = parents.some(function (parent) {
    return parent.key === _toolbar.TEXT_COLLAPSED_MENU.key;
  });
  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
    hasSeparator: hasSeparator,
    title: title
  }, children);
};