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

Text-formatting plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.FloatingToolbarTextFormalWithIntl = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@emotion/react");
var _reactIntl = require("react-intl");
var _hooks = require("@atlaskit/editor-common/hooks");
var _types = require("@atlaskit/editor-common/types");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _constants = require("./Toolbar/constants");
var _dropdownMenu = require("./Toolbar/dropdown-menu");
var _clearFormattingIcon = require("./Toolbar/hooks/clear-formatting-icon");
var _formattingIcons = require("./Toolbar/hooks/formatting-icons");
var _useIconList2 = require("./Toolbar/hooks/use-icon-list");
var _singleToolbarButtons = require("./Toolbar/single-toolbar-buttons");
var _types2 = require("./Toolbar/types");
var _excluded = ["formattingIsPresent"];
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var FloatingToolbarSettings = {
  disabled: false,
  isReducedSpacing: true,
  shouldUseResponsiveToolbar: false,
  toolbarSize: _types.ToolbarSize.S,
  hasMoreButton: false,
  moreButtonLabel: '',
  toolbarType: _types2.ToolbarType.FLOATING
};
var selector = function 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
  };
};
var FloatingToolbarTextFormat = function FloatingToolbarTextFormat(_ref) {
  var api = _ref.api,
    editorAnalyticsAPI = _ref.editorAnalyticsAPI,
    editorView = _ref.editorView,
    intl = _ref.intl;
  var textFormattingState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['textFormatting'], selector);
  var formattingIsPresent = textFormattingState.formattingIsPresent,
    formattingIconState = (0, _objectWithoutProperties2.default)(textFormattingState, _excluded);
  var defaultIcons = (0, _formattingIcons.useFormattingIcons)({
    schema: editorView.state.schema,
    intl: intl,
    isToolbarDisabled: FloatingToolbarSettings.disabled,
    editorAnalyticsAPI: editorAnalyticsAPI,
    textFormattingState: formattingIconState,
    toolbarType: FloatingToolbarSettings.toolbarType
  });
  var _useIconList = (0, _useIconList2.useIconList)({
      icons: defaultIcons,
      iconTypeList: _constants.ToolbarButtonsStrong
    }),
    dropdownItems = _useIconList.dropdownItems,
    singleItems = _useIconList.singleItems;
  var clearIcon = (0, _clearFormattingIcon.useClearIcon)({
    formattingPluginInitialised: textFormattingState.isInitialised,
    formattingIsPresent: formattingIsPresent,
    intl: intl,
    editorAnalyticsAPI: editorAnalyticsAPI,
    toolbarType: FloatingToolbarSettings.toolbarType
  });
  var items = (0, _react.useMemo)(function () {
    if (!clearIcon) {
      return [{
        items: dropdownItems
      }];
    }
    return [{
      items: dropdownItems
    }, {
      items: [clearIcon]
    }];
  }, [clearIcon, dropdownItems]);
  return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_singleToolbarButtons.SingleToolbarButtons, {
    items: singleItems,
    editorView: editorView,
    isReducedSpacing: false
  }), (0, _react2.jsx)(_dropdownMenu.FormattingTextDropdownMenu, {
    editorView: editorView,
    items: items,
    isReducedSpacing: (0, _experiments.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
var FloatingToolbarTextFormalWithIntl = exports.FloatingToolbarTextFormalWithIntl = (0, _reactIntl.injectIntl)(FloatingToolbarTextFormat);