@atlaskit/editor-plugin-text-formatting/dist/es2019/ui/FloatingToolbarComponent.js

Text-formatting plugin for @atlaskit/editor-core

/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import React, { useMemo } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { jsx } from '@emotion/react';
import { injectIntl } from 'react-intl';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { ToolbarSize } from '@atlaskit/editor-common/types';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { ToolbarButtonsStrong } from './Toolbar/constants';
import { FormattingTextDropdownMenu } from './Toolbar/dropdown-menu';
import { useClearIcon } from './Toolbar/hooks/clear-formatting-icon';
import { useFormattingIcons } from './Toolbar/hooks/formatting-icons';
import { useIconList } from './Toolbar/hooks/use-icon-list';
import { SingleToolbarButtons } from './Toolbar/single-toolbar-buttons';
import { ToolbarType } from './Toolbar/types';
const FloatingToolbarSettings = {
  disabled: false,
  isReducedSpacing: true,
  shouldUseResponsiveToolbar: false,
  toolbarSize: ToolbarSize.S,
  hasMoreButton: false,
  moreButtonLabel: '',
  toolbarType: ToolbarType.FLOATING
};
const selector = states => {
  var _states$textFormattin, _states$textFormattin2, _states$textFormattin3, _states$textFormattin4, _states$textFormattin5, _states$textFormattin6, _states$textFormattin7, _states$textFormattin8, _states$textFormattin9, _states$textFormattin0, _states$textFormattin1, _states$textFormattin10, _states$textFormattin11, _states$textFormattin12, _states$textFormattin13, _states$textFormattin14, _states$textFormattin15, _states$textFormattin16, _states$textFormattin17, _states$textFormattin18, _states$textFormattin19, _states$textFormattin20, _states$textFormattin21;
  return {
    isInitialised: Boolean((_states$textFormattin = states.textFormattingState) === null || _states$textFormattin === void 0 ? void 0 : _states$textFormattin.isInitialised),
    formattingIsPresent: (_states$textFormattin2 = states.textFormattingState) === null || _states$textFormattin2 === void 0 ? void 0 : _states$textFormattin2.formattingIsPresent,
    emActive: (_states$textFormattin3 = states.textFormattingState) === null || _states$textFormattin3 === void 0 ? void 0 : _states$textFormattin3.emActive,
    emDisabled: (_states$textFormattin4 = states.textFormattingState) === null || _states$textFormattin4 === void 0 ? void 0 : _states$textFormattin4.emDisabled,
    emHidden: (_states$textFormattin5 = states.textFormattingState) === null || _states$textFormattin5 === void 0 ? void 0 : _states$textFormattin5.emHidden,
    codeActive: (_states$textFormattin6 = states.textFormattingState) === null || _states$textFormattin6 === void 0 ? void 0 : _states$textFormattin6.codeActive,
    codeDisabled: (_states$textFormattin7 = states.textFormattingState) === null || _states$textFormattin7 === void 0 ? void 0 : _states$textFormattin7.codeDisabled,
    codeHidden: (_states$textFormattin8 = states.textFormattingState) === null || _states$textFormattin8 === void 0 ? void 0 : _states$textFormattin8.codeHidden,
    underlineActive: (_states$textFormattin9 = states.textFormattingState) === null || _states$textFormattin9 === void 0 ? void 0 : _states$textFormattin9.underlineActive,
    underlineDisabled: (_states$textFormattin0 = states.textFormattingState) === null || _states$textFormattin0 === void 0 ? void 0 : _states$textFormattin0.underlineDisabled,
    underlineHidden: (_states$textFormattin1 = states.textFormattingState) === null || _states$textFormattin1 === void 0 ? void 0 : _states$textFormattin1.underlineHidden,
    strikeActive: (_states$textFormattin10 = states.textFormattingState) === null || _states$textFormattin10 === void 0 ? void 0 : _states$textFormattin10.strikeActive,
    strikeDisabled: (_states$textFormattin11 = states.textFormattingState) === null || _states$textFormattin11 === void 0 ? void 0 : _states$textFormattin11.strikeDisabled,
    strikeHidden: (_states$textFormattin12 = states.textFormattingState) === null || _states$textFormattin12 === void 0 ? void 0 : _states$textFormattin12.strikeHidden,
    strongActive: (_states$textFormattin13 = states.textFormattingState) === null || _states$textFormattin13 === void 0 ? void 0 : _states$textFormattin13.strongActive,
    strongDisabled: (_states$textFormattin14 = states.textFormattingState) === null || _states$textFormattin14 === void 0 ? void 0 : _states$textFormattin14.strongDisabled,
    strongHidden: (_states$textFormattin15 = states.textFormattingState) === null || _states$textFormattin15 === void 0 ? void 0 : _states$textFormattin15.strongHidden,
    superscriptActive: (_states$textFormattin16 = states.textFormattingState) === null || _states$textFormattin16 === void 0 ? void 0 : _states$textFormattin16.superscriptActive,
    superscriptDisabled: (_states$textFormattin17 = states.textFormattingState) === null || _states$textFormattin17 === void 0 ? void 0 : _states$textFormattin17.superscriptDisabled,
    superscriptHidden: (_states$textFormattin18 = states.textFormattingState) === null || _states$textFormattin18 === void 0 ? void 0 : _states$textFormattin18.superscriptHidden,
    subscriptActive: (_states$textFormattin19 = states.textFormattingState) === null || _states$textFormattin19 === void 0 ? void 0 : _states$textFormattin19.subscriptActive,
    subscriptDisabled: (_states$textFormattin20 = states.textFormattingState) === null || _states$textFormattin20 === void 0 ? void 0 : _states$textFormattin20.subscriptDisabled,
    subscriptHidden: (_states$textFormattin21 = states.textFormattingState) === null || _states$textFormattin21 === void 0 ? void 0 : _states$textFormattin21.subscriptHidden
  };
};
const FloatingToolbarTextFormat = ({
  api,
  editorAnalyticsAPI,
  editorView,
  intl
}) => {
  const textFormattingState = useSharedPluginStateWithSelector(api, ['textFormatting'], selector);
  const {
    formattingIsPresent,
    ...formattingIconState
  } = textFormattingState;
  const defaultIcons = useFormattingIcons({
    schema: editorView.state.schema,
    intl,
    isToolbarDisabled: FloatingToolbarSettings.disabled,
    editorAnalyticsAPI,
    textFormattingState: formattingIconState,
    toolbarType: FloatingToolbarSettings.toolbarType
  });
  const {
    dropdownItems,
    singleItems
  } = useIconList({
    icons: defaultIcons,
    iconTypeList: ToolbarButtonsStrong
  });
  const clearIcon = useClearIcon({
    formattingPluginInitialised: textFormattingState.isInitialised,
    formattingIsPresent,
    intl,
    editorAnalyticsAPI,
    toolbarType: FloatingToolbarSettings.toolbarType
  });
  const items = useMemo(() => {
    if (!clearIcon) {
      return [{
        items: dropdownItems
      }];
    }
    return [{
      items: dropdownItems
    }, {
      items: [clearIcon]
    }];
  }, [clearIcon, dropdownItems]);
  return jsx(React.Fragment, null, jsx(SingleToolbarButtons, {
    items: singleItems,
    editorView: editorView,
    isReducedSpacing: false
  }), jsx(FormattingTextDropdownMenu, {
    editorView: editorView,
    items: items,
    isReducedSpacing: editorExperiment('platform_editor_controls', 'variant1') ? false : FloatingToolbarSettings.isReducedSpacing,
    moreButtonLabel: FloatingToolbarSettings.moreButtonLabel,
    hasFormattingActive: FloatingToolbarSettings.hasMoreButton,
    hasMoreButton: FloatingToolbarSettings.hasMoreButton,
    intl: intl,
    toolbarType: FloatingToolbarSettings.toolbarType
  }));
};

// eslint-disable-next-line @typescript-eslint/ban-types
export const FloatingToolbarTextFormalWithIntl = injectIntl(FloatingToolbarTextFormat);