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

Text-formatting plugin for @atlaskit/editor-core

import React from 'react';
import { useIntl } from 'react-intl';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { ToolTipContent, clearFormatting, getAriaKeyshortcuts, tooltip } from '@atlaskit/editor-common/keymaps';
import { toolbarMessages } from '@atlaskit/editor-common/messages';
import { getInputMethodFromParentKeys, TEXT_COLLAPSED_MENU } from '@atlaskit/editor-common/toolbar';
import { ToolbarButton, ToolbarDropdownItem, ClearFormattingIcon, ToolbarKeyboardShortcutHint, ToolbarDropdownMenu, MoreItemsIcon, ToolbarTooltip, ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
import { clearFormattingWithAnalyticsNext } from '../../../editor-commands/clear-formatting';
import { useComponentInfo } from './utils';
export const FormatMenuItem = ({
  parents,
  api,
  optionType,
  toggleMarkWithAnalyticsCallback,
  icon,
  shortcut,
  title
}) => {
  const {
    isActive,
    isDisabled,
    isHidden,
    shortcutContent,
    onClick,
    ariaLabel,
    formatTitle
  } = useComponentInfo({
    api,
    optionType,
    title,
    shortcut,
    toggleMarkWithAnalyticsCallback,
    parents
  });
  const Icon = icon;
  if (isHidden) {
    return null;
  }
  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
    elemBefore: /*#__PURE__*/React.createElement(Icon, {
      size: "small",
      label: ""
    }),
    elemAfter: shortcutContent && /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
      shortcut: shortcutContent
    }),
    isDisabled: isDisabled,
    isSelected: isActive,
    onClick: onClick,
    "aria-keyshortcuts": getAriaKeyshortcuts(shortcut),
    "aria-label": ariaLabel
  }, formatTitle);
};
export const FormatButton = ({
  parents,
  api,
  optionType,
  toggleMarkWithAnalyticsCallback,
  icon,
  shortcut,
  title
}) => {
  const {
    isActive,
    isDisabled,
    onClick,
    ariaLabel,
    formatTitle
  } = useComponentInfo({
    api,
    optionType,
    title,
    shortcut,
    toggleMarkWithAnalyticsCallback,
    parents
  });
  const Icon = icon;
  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
    content: /*#__PURE__*/React.createElement(ToolTipContent, {
      description: formatTitle,
      keymap: shortcut
    })
  }, /*#__PURE__*/React.createElement(ToolbarButton, {
    iconBefore: /*#__PURE__*/React.createElement(Icon, {
      label: ariaLabel,
      size: "small"
    }),
    onClick: onClick,
    isSelected: isActive,
    isDisabled: isDisabled,
    ariaKeyshortcuts: getAriaKeyshortcuts(shortcut),
    testId: `editor-toolbar__${formatTitle}`
  }));
};
export const ClearFormatMenuItem = ({
  api,
  parents
}) => {
  const {
    isInitialised,
    isFormattingPresent
  } = useSharedPluginStateWithSelector(api, ['textFormatting'], 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
    };
  });
  const {
    formatMessage
  } = useIntl();
  if (!isInitialised) {
    return null;
  }
  const formatTitle = formatMessage(toolbarMessages.clearFormatting);
  const shortcutContent = tooltip(clearFormatting);
  const onClick = () => {
    var _api$analytics;
    api === null || api === void 0 ? void 0 : api.core.actions.execute(clearFormattingWithAnalyticsNext(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(getInputMethodFromParentKeys(parents)));
  };
  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
    elemBefore: /*#__PURE__*/React.createElement(ClearFormattingIcon, {
      label: "",
      size: "small"
    }),
    elemAfter: shortcutContent && /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
      shortcut: shortcutContent
    }),
    isDisabled: !isFormattingPresent,
    onClick: onClick,
    ariaKeyshortcuts: getAriaKeyshortcuts(clearFormatting)
  }, formatTitle);
};
export const MoreFormattingMenu = ({
  children
}) => {
  const {
    formatMessage
  } = useIntl();
  const content = formatMessage(toolbarMessages.moreFormatting);
  return /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
    iconBefore: /*#__PURE__*/React.createElement(MoreItemsIcon, {
      label: "",
      testId: "more-formatting"
    }),
    label: content,
    tooltipComponent: /*#__PURE__*/React.createElement(ToolbarTooltip, {
      content: formatMessage(toolbarMessages.textFormat)
    })
  }, children);
};
export const MenuSection = ({
  children,
  title,
  parents
}) => {
  const hasSeparator = parents.some(parent => parent.key === TEXT_COLLAPSED_MENU.key);
  return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
    hasSeparator: hasSeparator,
    title: title
  }, children);
};