@atlaskit/editor-core/dist/esm/ui/Toolbar/Toolbar.js

A package contains Atlassian editor core functionality

import React, { useCallback } from 'react';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { EditorToolbarProvider, EditorToolbarUIProvider } from '@atlaskit/editor-common/toolbar';
import { ToolbarSize } from '@atlaskit/editor-common/types';
import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
import { ToolbarButtonGroup, ToolbarDropdownItemSection, ToolbarSection } from '@atlaskit/editor-toolbar';
import { ToolbarModelRenderer } from '@atlaskit/editor-toolbar-model';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { ToolbarInner } from './ToolbarInner';
var TOOLBAR_FALLBACKS = {
  group: ToolbarButtonGroup,
  section: ToolbarSection,
  menuSection: ToolbarDropdownItemSection
};

/**
 * *Warning:* With `platform_editor_toolbar_aifc` enabled this component is no longer used and is replaced with `<ToolbarNext />`.
 *
 * If making changes to this component please ensure to also update `<ToolbarNext />`.
 */
export var Toolbar = function Toolbar(props) {
  return /*#__PURE__*/React.createElement(ToolbarInner, {
    items: props.items,
    editorView: props.editorView,
    editorActions: props.editorActions,
    eventDispatcher: props.eventDispatcher,
    providerFactory: props.providerFactory,
    appearance: props.appearance,
    popupsMountPoint: props.popupsMountPoint,
    popupsBoundariesElement: props.popupsBoundariesElement,
    popupsScrollableElement: props.popupsScrollableElement,
    disabled: props.disabled,
    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
    toolbarSize: props.toolbarSize,
    isToolbarReducedSpacing: props.toolbarSize < ToolbarSize.XXL,
    containerElement: props.containerElement
  });
};
var usePluginState = function usePluginState(api) {
  return useSharedPluginStateWithSelector(api, ['connectivity', 'editorViewMode', 'userPreferences'], function (state) {
    var _state$connectivitySt, _state$editorViewMode, _state$userPreference;
    return {
      connectivityStateMode: (_state$connectivitySt = state.connectivityState) === null || _state$connectivitySt === void 0 ? void 0 : _state$connectivitySt.mode,
      editorViewMode: (_state$editorViewMode = state.editorViewModeState) === null || _state$editorViewMode === void 0 ? void 0 : _state$editorViewMode.mode,
      editorToolbarDockingPreference: (_state$userPreference = state.userPreferencesState) === null || _state$userPreference === void 0 || (_state$userPreference = _state$userPreference.preferences) === null || _state$userPreference === void 0 ? void 0 : _state$userPreference.toolbarDockingPosition
    };
  });
};

/**
 * Renders a primary toolbar, driven by components registed by `editor-plugin-toolbar`. `ToolbarModelRenderer` will just
 * render the toolbar structure, the design is driven per component registered including the toolbar itself.
 *
 * The majority of components UI should use `@atlaskit/editor-toolbar` components.
 */
export var ToolbarNext = function ToolbarNext(_ref) {
  var toolbar = _ref.toolbar,
    components = _ref.components,
    editorView = _ref.editorView,
    editorAPI = _ref.editorAPI,
    popupsMountPoint = _ref.popupsMountPoint,
    editorAppearance = _ref.editorAppearance,
    popupsBoundariesElement = _ref.popupsBoundariesElement,
    popupsScrollableElement = _ref.popupsScrollableElement,
    isDisabled = _ref.isDisabled;
  var _usePluginState = usePluginState(editorAPI),
    connectivityStateMode = _usePluginState.connectivityStateMode,
    editorViewMode = _usePluginState.editorViewMode,
    editorToolbarDockingPreference = _usePluginState.editorToolbarDockingPreference;
  // remove offline check when patch6Enabled is cleaned up
  var isOffline = isOfflineMode(connectivityStateMode);
  var memoizedFireAnalyticsEvent = useCallback(function (payload) {
    var _editorAPI$analytics;
    editorAPI === null || editorAPI === void 0 || (_editorAPI$analytics = editorAPI.analytics) === null || _editorAPI$analytics === void 0 || _editorAPI$analytics.actions.fireAnalyticsEvent(payload);
  }, [editorAPI]);
  var fireAnalyticsEvent = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedFireAnalyticsEvent : function (payload) {
    return memoizedFireAnalyticsEvent(payload);
  };
  var fallbacks = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? TOOLBAR_FALLBACKS : {
    group: ToolbarButtonGroup,
    section: ToolbarSection,
    menuSection: ToolbarDropdownItemSection
  };
  return /*#__PURE__*/React.createElement(EditorToolbarProvider, {
    editorView: editorView !== null && editorView !== void 0 ? editorView : null,
    editorAppearance: editorAppearance,
    editorViewMode: editorViewMode !== null && editorViewMode !== void 0 ? editorViewMode : 'edit',
    editorToolbarDockingPreference: editorToolbarDockingPreference,
    isOffline: isOffline
  }, /*#__PURE__*/React.createElement(EditorToolbarUIProvider, {
    api: editorAPI,
    isDisabled: isDisabled,
    popupsMountPoint: popupsMountPoint,
    popupsBoundariesElement: popupsBoundariesElement,
    popupsScrollableElement: popupsScrollableElement,
    fireAnalyticsEvent: fireAnalyticsEvent
  }, /*#__PURE__*/React.createElement(ToolbarModelRenderer, {
    toolbar: toolbar,
    components: components,
    fallbacks: fallbacks
  })));
};