@atlaskit/editor-plugin-toolbar
Version:
Toolbar plugin for @atlaskit/editor-core
63 lines • 2.59 kB
JavaScript
import React from 'react';
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 _api$toolbar$actions$, _api$toolbar;
const {
editorViewMode,
editorToolbarDockingPreference,
editorAppearance
} = usePluginState(api);
const toolbar = parents.find(parent => parent.type === 'toolbar');
const contextualFormattingEnabled = (_api$toolbar$actions$ = api === null || api === void 0 ? void 0 : (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.contextualFormattingMode()) !== null && _api$toolbar$actions$ !== void 0 ? _api$toolbar$actions$ : '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);
};