@atlaskit/editor-plugin-toolbar/dist/es2019/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';
const 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;
};
const usePluginState = _api => {
  const {
    editorViewMode,
    editorToolbarDockingPreference,
    editorAppearance
  } = useEditorToolbar();
  return {
    editorViewMode,
    editorToolbarDockingPreference,
    editorAppearance
  };
};
export const Section = ({
  children,
  parents,
  api,
  testId,
  showSeparatorInFullPagePrimaryToolbar,
  isSharedSection = true
}) => {
  var _ref, _api$toolbar;
  const {
    editorViewMode,
    editorToolbarDockingPreference,
    editorAppearance
  } = usePluginState(api);
  const runtimeOverride = useSharedPluginStateWithSelector(api, ['toolbar'], states => {
    var _states$toolbarState;
    return (_states$toolbarState = states.toolbarState) === null || _states$toolbarState === void 0 ? void 0 : _states$toolbarState.contextualFormattingModeOverride;
  });
  const toolbar = parents.find(parent => parent.type === 'toolbar');
  const effectiveRuntimeOverride = runtimeOverride !== undefined && fg('platform_editor_toolbar_mode_override') ? runtimeOverride : undefined;
  const contextualFormattingEnabled = (_ref = effectiveRuntimeOverride !== null && effectiveRuntimeOverride !== void 0 ? effectiveRuntimeOverride : api === null || api === void 0 ? void 0 : (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.contextualFormattingMode()) !== null && _ref !== void 0 ? _ref : 'always-pinned';
  if (isSharedSection && !shouldShowSection(editorViewMode, toolbar, editorToolbarDockingPreference, contextualFormattingEnabled)) {
    return null;
  }
  const isFullPage = editorAppearance === 'full-page';
  const hasSeparator = showSeparatorInFullPagePrimaryToolbar && isFullPage;
  return /*#__PURE__*/React.createElement(ToolbarSection, {
    testId: testId,
    hasSeparator: hasSeparator ? SeparatorPosition.START : hasSeparator
  }, children);
};