@atlaskit/editor-core/dist/es2019/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';
const 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 const 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
  });
};
const usePluginState = api => {
  return useSharedPluginStateWithSelector(api, ['connectivity', 'editorViewMode', 'userPreferences'], state => {
    var _state$connectivitySt, _state$editorViewMode, _state$userPreference, _state$userPreference2;
    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 ? void 0 : (_state$userPreference2 = _state$userPreference.preferences) === null || _state$userPreference2 === void 0 ? void 0 : _state$userPreference2.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 const ToolbarNext = ({
  toolbar,
  components,
  editorView,
  editorAPI,
  popupsMountPoint,
  editorAppearance,
  popupsBoundariesElement,
  popupsScrollableElement,
  isDisabled
}) => {
  const {
    connectivityStateMode,
    editorViewMode,
    editorToolbarDockingPreference
  } = usePluginState(editorAPI);
  // remove offline check when patch6Enabled is cleaned up
  const isOffline = isOfflineMode(connectivityStateMode);
  const memoizedFireAnalyticsEvent = useCallback(payload => {
    var _editorAPI$analytics;
    editorAPI === null || editorAPI === void 0 ? void 0 : (_editorAPI$analytics = editorAPI.analytics) === null || _editorAPI$analytics === void 0 ? void 0 : _editorAPI$analytics.actions.fireAnalyticsEvent(payload);
  }, [editorAPI]);
  const fireAnalyticsEvent = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedFireAnalyticsEvent : payload => memoizedFireAnalyticsEvent(payload);
  const 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
  })));
};