@atlaskit/editor-plugin-text-formatting/dist/cjs/ui/Toolbar/hooks/formatting-icons.js

Text-formatting plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useHasFormattingActived = exports.useFormattingIcons = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _analytics = require("@atlaskit/editor-common/analytics");
var _keymaps = require("@atlaskit/editor-common/keymaps");
var _messages = require("@atlaskit/editor-common/messages");
var _preset = require("@atlaskit/editor-common/preset");
var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
var _angleBrackets = _interopRequireDefault(require("@atlaskit/icon/core/angle-brackets"));
var _textBold = _interopRequireDefault(require("@atlaskit/icon/core/text-bold"));
var _textItalic = _interopRequireDefault(require("@atlaskit/icon/core/text-italic"));
var _textStrikethrough = _interopRequireDefault(require("@atlaskit/icon/core/text-strikethrough"));
var _textUnderline = _interopRequireDefault(require("@atlaskit/icon/core/text-underline"));
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _toggleMark = require("../../../editor-commands/toggle-mark");
var _icons = require("../icons");
var _inputMethodUtils = require("../input-method-utils");
var _types = require("../types");
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

var withInputMethod = function withInputMethod(toolbarType, func) {
  return (0, _preset.editorCommandToPMCommand)(func((0, _inputMethodUtils.getInputMethod)(toolbarType)));
};
var IconButtons = function IconButtons(editorAnalyticsAPI, toolbarType) {
  return {
    strong: {
      buttonId: _analytics.TOOLBAR_ACTION_SUBJECT_ID.TEXT_FORMATTING_STRONG,
      command: withInputMethod(toolbarType, (0, _toggleMark.toggleStrongWithAnalytics)(editorAnalyticsAPI)),
      message: _messages.toolbarMessages.bold,
      tooltipKeymap: _keymaps.toggleBold,
      component: function component() {
        return (0, _react2.jsx)(_textBold.default, {
          color: "currentColor",
          spacing: "spacious",
          label: ""
        });
      }
    },
    em: {
      buttonId: _analytics.TOOLBAR_ACTION_SUBJECT_ID.TEXT_FORMATTING_ITALIC,
      command: withInputMethod(toolbarType, (0, _toggleMark.toggleEmWithAnalytics)(editorAnalyticsAPI)),
      message: _messages.toolbarMessages.italic,
      tooltipKeymap: _keymaps.toggleItalic,
      component: function component() {
        return (0, _react2.jsx)(_textItalic.default, {
          color: "currentColor",
          spacing: "spacious",
          label: ""
        });
      }
    },
    underline: {
      buttonId: _analytics.TOOLBAR_ACTION_SUBJECT_ID.TEXT_FORMATTING_UNDERLINE,
      command: withInputMethod(toolbarType, (0, _toggleMark.toggleUnderlineWithAnalytics)(editorAnalyticsAPI)),
      message: _messages.toolbarMessages.underline,
      tooltipKeymap: _keymaps.toggleUnderline,
      component: function component() {
        return (0, _react2.jsx)(_textUnderline.default, {
          color: "currentColor",
          spacing: "spacious",
          label: ""
        });
      }
    },
    strike: {
      command: withInputMethod(toolbarType, (0, _toggleMark.toggleStrikeWithAnalytics)(editorAnalyticsAPI)),
      message: _messages.toolbarMessages.strike,
      tooltipKeymap: _keymaps.toggleStrikethrough
    },
    code: {
      command: withInputMethod(toolbarType, (0, _toggleMark.toggleCodeWithAnalytics)(editorAnalyticsAPI)),
      message: _messages.toolbarMessages.code,
      tooltipKeymap: _keymaps.toggleCode
    },
    subscript: {
      command: withInputMethod(toolbarType, (0, _toggleMark.toggleSubscriptWithAnalytics)(editorAnalyticsAPI)),
      message: _messages.toolbarMessages.subscript,
      tooltipKeymap: _keymaps.toggleSubscript
    },
    superscript: {
      command: withInputMethod(toolbarType, (0, _toggleMark.toggleSuperscriptWithAnalytics)(editorAnalyticsAPI)),
      message: _messages.toolbarMessages.superscript,
      tooltipKeymap: _keymaps.toggleSuperscript
    }
  };
};
var IconBefore = {
  strong: {
    icon: (0, _react2.jsx)(_textBold.default, {
      color: "currentColor",
      spacing: "spacious",
      label: ""
    })
  },
  em: {
    icon: (0, _react2.jsx)(_textItalic.default, {
      color: "currentColor",
      spacing: "spacious",
      label: ""
    })
  },
  underline: {
    icon: (0, _react2.jsx)(_textUnderline.default, {
      color: "currentColor",
      spacing: "spacious",
      label: ""
    })
  },
  strike: {
    icon: (0, _react2.jsx)(_textStrikethrough.default, {
      label: ""
    })
  },
  code: {
    icon: (0, _react2.jsx)(_angleBrackets.default, {
      color: "currentColor",
      spacing: "spacious",
      label: ""
    })
  },
  subscript: {
    icon: (0, _react2.jsx)(_icons.Subscript, null)
  },
  superscript: {
    icon: (0, _react2.jsx)(_icons.Superscript, null)
  }
};
var getIcon = function getIcon(_ref) {
  var iconType = _ref.iconType,
    isDisabled = _ref.isDisabled,
    isActive = _ref.isActive,
    intl = _ref.intl,
    editorAnalyticsAPI = _ref.editorAnalyticsAPI,
    toolbarType = _ref.toolbarType;
  var icon = IconButtons(editorAnalyticsAPI, toolbarType)[iconType];
  var iconBefore = IconBefore[iconType].icon;
  var content = intl.formatMessage(icon.message);
  var tooltipKeymap = icon.tooltipKeymap;
  return {
    content: content,
    buttonId: icon.buttonId,
    iconMark: iconType,
    key: iconType,
    command: icon.command,
    iconElement: icon.component ? icon.component() : undefined,
    tooltipElement: tooltipKeymap ? (0, _react2.jsx)(_keymaps.ToolTipContent, {
      description: content,
      keymap: tooltipKeymap
    }) : undefined,
    elemBefore: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? iconBefore : undefined,
    elemAfter: tooltipKeymap ?
    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
    (0, _react2.jsx)("div", {
      css: _shortcut.shortcutStyle
    }, (0, _keymaps.tooltip)(tooltipKeymap)) : undefined,
    value: {
      name: iconType
    },
    isActive: isActive,
    isDisabled: isDisabled,
    'aria-label': tooltipKeymap ? (0, _keymaps.tooltip)(tooltipKeymap, String(content)) : String(content),
    'aria-keyshortcuts': (0, _keymaps.getAriaKeyshortcuts)(tooltipKeymap)
  };
};
var IconsMarkSchema = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _types.IconTypes.strong, 'strong'), _types.IconTypes.em, 'em'), _types.IconTypes.strike, 'strike'), _types.IconTypes.code, 'code'), _types.IconTypes.underline, 'underline'), _types.IconTypes.superscript, 'subsup'), _types.IconTypes.subscript, 'subsup');
var buildMenuIconState = function buildMenuIconState(iconMark) {
  return function (_ref2) {
    var schema = _ref2.schema,
      textFormattingState = _ref2.textFormattingState;
    var hasPluginState = Boolean(textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.isInitialised);
    var markSchema = IconsMarkSchema[iconMark];
    var hasSchemaMark = Boolean(schema.marks[markSchema]);
    if (!hasPluginState) {
      return {
        isActive: false,
        isDisabled: true,
        isHidden: false,
        hasSchemaMark: hasSchemaMark
      };
    }
    var isActive = textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState["".concat(iconMark, "Active")];
    var isDisabled = textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState["".concat(iconMark, "Disabled")];
    var isHidden = textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState["".concat(iconMark, "Hidden")];
    return {
      isActive: Boolean(isActive),
      isDisabled: Boolean(isDisabled),
      isHidden: Boolean(isHidden),
      hasSchemaMark: hasSchemaMark
    };
  };
};
var buildIcon = function buildIcon(iconMark, editorAnalyticsAPI, toolbarType) {
  var getState = buildMenuIconState(iconMark);
  return function (_ref3) {
    var schema = _ref3.schema,
      textFormattingState = _ref3.textFormattingState,
      intl = _ref3.intl,
      isToolbarDisabled = _ref3.isToolbarDisabled;
    var iconState = getState({
      schema: schema,
      textFormattingState: textFormattingState
    });
    var isActive = iconState.isActive,
      isDisabled = iconState.isDisabled,
      isHidden = iconState.isHidden,
      hasSchemaMark = iconState.hasSchemaMark;
    var iconComponent = (0, _react.useMemo)(function () {
      return getIcon({
        iconType: _types.IconTypes[iconMark],
        isDisabled: isToolbarDisabled || isDisabled,
        isActive: isActive,
        intl: intl,
        editorAnalyticsAPI: editorAnalyticsAPI,
        toolbarType: toolbarType
      });
    }, [isToolbarDisabled, isDisabled, isActive, intl]);
    var shouldRenderIcon = hasSchemaMark && !isHidden;
    return (0, _react.useMemo)(function () {
      return shouldRenderIcon ? iconComponent : null;
    }, [shouldRenderIcon, iconComponent]);
  };
};
var useFormattingIcons = exports.useFormattingIcons = function useFormattingIcons(_ref4) {
  var isToolbarDisabled = _ref4.isToolbarDisabled,
    textFormattingState = _ref4.textFormattingState,
    schema = _ref4.schema,
    intl = _ref4.intl,
    editorAnalyticsAPI = _ref4.editorAnalyticsAPI,
    toolbarType = _ref4.toolbarType;
  var props = {
    schema: schema,
    textFormattingState: textFormattingState,
    intl: intl,
    isToolbarDisabled: Boolean(isToolbarDisabled),
    toolbarType: toolbarType
  };
  var buildStrongIcon = buildIcon(_types.IconTypes.strong, editorAnalyticsAPI, toolbarType);
  var buildEmIcon = buildIcon(_types.IconTypes.em, editorAnalyticsAPI, toolbarType);
  var buildUnderlineIcon = buildIcon(_types.IconTypes.underline, editorAnalyticsAPI, toolbarType);
  var buildStrikeIcon = buildIcon(_types.IconTypes.strike, editorAnalyticsAPI, toolbarType);
  var buildCodeIcon = buildIcon(_types.IconTypes.code, editorAnalyticsAPI, toolbarType);
  var buildSubscriptIcon = buildIcon(_types.IconTypes.subscript, editorAnalyticsAPI, toolbarType);
  var buildSuperscriptIcon = buildIcon(_types.IconTypes.superscript, editorAnalyticsAPI, toolbarType);
  var strongIcon = buildStrongIcon(props);
  var emIcon = buildEmIcon(props);
  var underlineIcon = buildUnderlineIcon(props);
  var strikeIcon = buildStrikeIcon(props);
  var codeIcon = buildCodeIcon(props);
  var subscriptIcon = buildSubscriptIcon(props);
  var superscriptIcon = buildSuperscriptIcon(props);
  var result = (0, _react.useMemo)(function () {
    return [strongIcon, emIcon, underlineIcon, strikeIcon, codeIcon, subscriptIcon, superscriptIcon];
  }, [strongIcon, emIcon, underlineIcon, strikeIcon, codeIcon, subscriptIcon, superscriptIcon]);
  return result;
};
var useHasFormattingActived = exports.useHasFormattingActived = function useHasFormattingActived(_ref5) {
  var iconTypeList = _ref5.iconTypeList,
    textFormattingState = _ref5.textFormattingState;
  var hasActiveFormatting = (0, _react.useMemo)(function () {
    if (!(textFormattingState !== null && textFormattingState !== void 0 && textFormattingState.isInitialised)) {
      return false;
    }
    return iconTypeList.some(function (iconType) {
      return textFormattingState["".concat(iconType, "Active")];
    });
  }, [textFormattingState, iconTypeList]);
  return hasActiveFormatting;
};