@atlaskit/editor-plugin-toolbar/dist/esm/ui/Section.js

Toolbar plugin for @atlaskit/editor-core

import React from 'react';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { TOOLBARS, useEditorToolbar } from '@atlaskit/editor-common/toolbar';
import { ToolbarSection, SeparatorPosition } from '@atlaskit/editor-toolbar';
import { fg } from '@atlaskit/platform-feature-flags';
var shouldShowSection = function shouldShowSection(editMode, toolbar, toolbarDocking, contextualFormattingEnabled) {
  if (editMode === 'view') {
    return false;
  }
  if (fg('platform_editor_toolbar_aifc_placement_overridden')) {
    if ((toolbar === null || toolbar === void 0 ? void 0 : toolbar.key) === TOOLBARS.INLINE_TEXT_TOOLBAR) {
      return toolbarDocking !== 'top' || contextualFormattingEnabled === 'always-inline';
    }
    if ((toolbar === null || toolbar === void 0 ? void 0 : toolbar.key) === TOOLBARS.PRIMARY_TOOLBAR) {
      return toolbarDocking !== 'none' || contextualFormattingEnabled === 'always-pinned';
    }
  } else {
    if ((toolbar === null || toolbar === void 0 ? void 0 : toolbar.key) === TOOLBARS.INLINE_TEXT_TOOLBAR && toolbarDocking !== 'top') {
      return true;
    }
    if ((toolbar === null || toolbar === void 0 ? void 0 : toolbar.key) === TOOLBARS.PRIMARY_TOOLBAR && toolbarDocking !== 'none') {
      return true;
    }
  }
  return false;
};
var usePluginState = function usePluginState(_api) {
  var _useEditorToolbar = useEditorToolbar(),
    editorViewMode = _useEditorToolbar.editorViewMode,
    editorToolbarDockingPreference = _useEditorToolbar.editorToolbarDockingPreference,
    editorAppearance = _useEditorToolbar.editorAppearance;
  return {
    editorViewMode: editorViewMode,
    editorToolbarDockingPreference: editorToolbarDockingPreference,
    editorAppearance: editorAppearance
  };
};
export var Section = function Section(_ref) {
  var _ref2, _api$toolbar;
  var children = _ref.children,
    parents = _ref.parents,
    api = _ref.api,
    testId = _ref.testId,
    showSeparatorInFullPagePrimaryToolbar = _ref.showSeparatorInFullPagePrimaryToolbar,
    _ref$isSharedSection = _ref.isSharedSection,
    isSharedSection = _ref$isSharedSection === void 0 ? true : _ref$isSharedSection;
  var _usePluginState = usePluginState(api),
    editorViewMode = _usePluginState.editorViewMode,
    editorToolbarDockingPreference = _usePluginState.editorToolbarDockingPreference,
    editorAppearance = _usePluginState.editorAppearance;
  var runtimeOverride = useSharedPluginStateWithSelector(api, ['toolbar'], function (states) {
    var _states$toolbarState;
    return (_states$toolbarState = states.toolbarState) === null || _states$toolbarState === void 0 ? void 0 : _states$toolbarState.contextualFormattingModeOverride;
  });
  var toolbar = parents.find(function (parent) {
    return parent.type === 'toolbar';
  });
  var effectiveRuntimeOverride = runtimeOverride !== undefined && fg('platform_editor_toolbar_mode_override') ? runtimeOverride : undefined;
  var contextualFormattingEnabled = (_ref2 = effectiveRuntimeOverride !== null && effectiveRuntimeOverride !== void 0 ? effectiveRuntimeOverride : api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.contextualFormattingMode()) !== null && _ref2 !== void 0 ? _ref2 : 'always-pinned';
  if (isSharedSection && !shouldShowSection(editorViewMode, toolbar, editorToolbarDockingPreference, contextualFormattingEnabled)) {
    return null;
  }
  var isFullPage = editorAppearance === 'full-page';
  var hasSeparator = showSeparatorInFullPagePrimaryToolbar && isFullPage;
  return /*#__PURE__*/React.createElement(ToolbarSection, {
    testId: testId,
    hasSeparator: hasSeparator ? SeparatorPosition.START : hasSeparator
  }, children);
};