@atlaskit/editor-plugin-text-formatting/dist/es2019/ui/Toolbar/components/utils.js

Text-formatting plugin for @atlaskit/editor-core

import { useIntl } from 'react-intl';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { toggleBold, toggleCode, toggleItalic, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleUnderline, tooltip } from '@atlaskit/editor-common/keymaps';
import { toolbarMessages } from '@atlaskit/editor-common/messages';
import { BOLD_MENU_ITEM, CODE_MENU_ITEM, ITALIC_MENU_ITEM, STRIKE_MENU_ITEM, SUBSCRIPT_MENU_ITEM, SUPERSCRIPT_MENU_ITEM, TEXT_FORMATTING_MENU_SECTION_RANK, UNDERLINE_MENU_ITEM, getInputMethodFromParentKeys } from '@atlaskit/editor-common/toolbar';
import { BoldIcon, ItalicIcon, UnderlineIcon, CodeIcon, StrikeThroughIcon, SubscriptIcon, SuperscriptIcon } from '@atlaskit/editor-toolbar';
import { toggleStrongWithAnalytics, toggleEmWithAnalytics, toggleUnderlineWithAnalytics, toggleCodeWithAnalytics, toggleStrikeWithAnalytics, toggleSubscriptWithAnalytics, toggleSuperscriptWithAnalytics } from '../../../editor-commands/toggle-mark';
const FormatMarkSchema = {
  strong: 'strong',
  em: 'em',
  underline: 'underline',
  strike: 'strike',
  code: 'code',
  subscript: 'subsup',
  superscript: 'subsup'
};
export const useComponentInfo = ({
  api,
  optionType,
  title,
  shortcut,
  toggleMarkWithAnalyticsCallback,
  parents
}) => {
  var _api$core, _api$core$sharedState, _api$core$sharedState2;
  const {
    isActive,
    isDisabled,
    isHidden,
    isPluginInitialised
  } = useSharedPluginStateWithSelector(api, ['textFormatting'], states => {
    var _states$textFormattin, _states$textFormattin2, _states$textFormattin3, _states$textFormattin4;
    return {
      isActive: (_states$textFormattin = states.textFormattingState) === null || _states$textFormattin === void 0 ? void 0 : _states$textFormattin[`${optionType}Active`],
      isDisabled: (_states$textFormattin2 = states.textFormattingState) === null || _states$textFormattin2 === void 0 ? void 0 : _states$textFormattin2[`${optionType}Disabled`],
      isHidden: (_states$textFormattin3 = states.textFormattingState) === null || _states$textFormattin3 === void 0 ? void 0 : _states$textFormattin3[`${optionType}Hidden`],
      isPluginInitialised: (_states$textFormattin4 = states.textFormattingState) === null || _states$textFormattin4 === void 0 ? void 0 : _states$textFormattin4.isInitialised
    };
  });
  const hasMarkSchema = api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : (_api$core$sharedState = _api$core.sharedState.currentState()) === null || _api$core$sharedState === void 0 ? void 0 : (_api$core$sharedState2 = _api$core$sharedState.schema) === null || _api$core$sharedState2 === void 0 ? void 0 : _api$core$sharedState2.marks[FormatMarkSchema[optionType]];
  let formatOptionState;
  if (!isPluginInitialised) {
    formatOptionState = {
      isActive: false,
      isDisabled: true,
      isHidden: false
    };
  } else {
    formatOptionState = {
      isActive: Boolean(isActive),
      isDisabled: Boolean(isDisabled),
      isHidden: Boolean(!hasMarkSchema || isHidden)
    };
  }
  const {
    formatMessage
  } = useIntl();
  const formatTitle = formatMessage(title);
  const shortcutContent = tooltip(shortcut);
  const ariaLabel = tooltip(shortcut, formatTitle);
  const onClick = () => {
    var _api$analytics;
    api === null || api === void 0 ? void 0 : api.core.actions.execute(toggleMarkWithAnalyticsCallback(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(getInputMethodFromParentKeys(parents)));
  };
  return {
    ...formatOptionState,
    formatTitle: formatTitle,
    shortcutContent,
    ariaLabel: ariaLabel || formatTitle,
    onClick
  };
};
export const formatOptions = () => ({
  strong: {
    rank: TEXT_FORMATTING_MENU_SECTION_RANK[BOLD_MENU_ITEM.key],
    key: BOLD_MENU_ITEM.key,
    icon: BoldIcon,
    title: toolbarMessages.bold,
    command: toggleStrongWithAnalytics,
    shortcut: toggleBold
  },
  em: {
    rank: TEXT_FORMATTING_MENU_SECTION_RANK[ITALIC_MENU_ITEM.key],
    key: ITALIC_MENU_ITEM.key,
    icon: ItalicIcon,
    title: toolbarMessages.italic,
    command: toggleEmWithAnalytics,
    shortcut: toggleItalic
  },
  underline: {
    rank: TEXT_FORMATTING_MENU_SECTION_RANK[UNDERLINE_MENU_ITEM.key],
    key: UNDERLINE_MENU_ITEM.key,
    icon: UnderlineIcon,
    title: toolbarMessages.underline,
    command: toggleUnderlineWithAnalytics,
    shortcut: toggleUnderline
  },
  strike: {
    rank: TEXT_FORMATTING_MENU_SECTION_RANK[STRIKE_MENU_ITEM.key],
    key: STRIKE_MENU_ITEM.key,
    icon: StrikeThroughIcon,
    title: toolbarMessages.strike,
    command: toggleStrikeWithAnalytics,
    shortcut: toggleStrikethrough
  },
  code: {
    rank: TEXT_FORMATTING_MENU_SECTION_RANK[CODE_MENU_ITEM.key],
    key: CODE_MENU_ITEM.key,
    icon: CodeIcon,
    title: toolbarMessages.code,
    command: toggleCodeWithAnalytics,
    shortcut: toggleCode
  },
  subscript: {
    rank: TEXT_FORMATTING_MENU_SECTION_RANK[SUBSCRIPT_MENU_ITEM.key],
    key: SUBSCRIPT_MENU_ITEM.key,
    icon: SubscriptIcon,
    title: toolbarMessages.subscript,
    command: toggleSubscriptWithAnalytics,
    shortcut: toggleSubscript
  },
  superscript: {
    rank: TEXT_FORMATTING_MENU_SECTION_RANK[SUPERSCRIPT_MENU_ITEM.key],
    key: SUPERSCRIPT_MENU_ITEM.key,
    icon: SuperscriptIcon,
    title: toolbarMessages.superscript,
    command: toggleSuperscriptWithAnalytics,
    shortcut: toggleSuperscript
  }
});