@atlaskit/editor-plugin-toolbar
Version:
Toolbar plugin for @atlaskit/editor-core
280 lines • 9.55 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import React from 'react';
import { ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
import { INSERT_BLOCK_SECTION, LINKING_SECTION, OVERFLOW_GROUP, OVERFLOW_GROUP_PRIMARY_TOOLBAR, OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK, OVERFLOW_GROUP_RANK, OVERFLOW_MENU, OVERFLOW_MENU_PRIMARY_TOOLBAR, OVERFLOW_SECTION, OVERFLOW_SECTION_PRIMARY_TOOLBAR, OVERFLOW_SECTION_PRIMARY_TOOLBAR_RANK, OVERFLOW_SECTION_RANK, PIN_SECTION, TEXT_COLLAPSED_GROUP, TEXT_SECTION, TEXT_SECTION_PRIMARY_TOOLBAR, TEXT_SECTION_COLLAPSED, TEXT_COLLAPSED_MENU, TOOLBAR_RANK, TOOLBARS, TRACK_CHANGES_SECTION, OVERFLOW_EXTENSIONS_MENU_SECTION, OVERFLOW_MENU_RANK } from '@atlaskit/editor-common/toolbar';
import { Show, Toolbar } from '@atlaskit/editor-toolbar';
import { SELECTION_TOOLBAR_LABEL } from './consts';
import { OverflowMenu } from './OverflowMenu';
import { OverflowMenuSection } from './OverflowMenuSection';
import { OverflowSection } from './OverflowSection';
import { PrimaryToolbar } from './PrimaryToolbar';
import { Section } from './Section';
import { TextCollapsedMenu } from './TextCollapsedMenu';
var getInlineTextToolbarComponents = function getInlineTextToolbarComponents() {
return [{
type: 'toolbar',
key: TOOLBARS.INLINE_TEXT_TOOLBAR,
component: function component(_ref) {
var children = _ref.children;
return /*#__PURE__*/React.createElement(Toolbar, {
label: SELECTION_TOOLBAR_LABEL,
actionSubjectId: ACTION_SUBJECT_ID.SELECTION_TOOLBAR,
testId: 'editor-floating-toolbar'
}, children);
}
}];
};
var getPrimaryToolbarComponents = function getPrimaryToolbarComponents(breakpointPreset) {
return [{
type: 'toolbar',
key: TOOLBARS.PRIMARY_TOOLBAR,
component: function component(_ref2) {
var children = _ref2.children;
return /*#__PURE__*/React.createElement(PrimaryToolbar, {
breakpointPreset: breakpointPreset
}, children);
}
}];
};
export var getToolbarComponents = function getToolbarComponents(contextualFormattingEnabled, api, breakpointPreset) {
var components = [{
type: TEXT_SECTION.type,
key: TEXT_SECTION.key,
parents: [{
type: 'toolbar',
key: TOOLBARS.INLINE_TEXT_TOOLBAR,
rank: TOOLBAR_RANK[TEXT_SECTION.key]
}],
component: function component(_ref3) {
var children = _ref3.children,
parents = _ref3.parents;
return /*#__PURE__*/React.createElement(Show, {
above: "md"
}, /*#__PURE__*/React.createElement(Section, {
parents: parents,
api: api,
testId: "text-section"
}, children));
}
}, {
type: TEXT_SECTION_PRIMARY_TOOLBAR.type,
key: TEXT_SECTION_PRIMARY_TOOLBAR.key,
parents: [{
type: 'toolbar',
key: TOOLBARS.PRIMARY_TOOLBAR,
rank: TOOLBAR_RANK[TEXT_SECTION.key]
}],
component: function component(_ref4) {
var children = _ref4.children,
parents = _ref4.parents;
return /*#__PURE__*/React.createElement(Show, {
above: "md"
}, /*#__PURE__*/React.createElement(Section, {
parents: parents,
api: api,
testId: "text-section"
}, children));
}
}, {
type: TEXT_SECTION_COLLAPSED.type,
key: TEXT_SECTION_COLLAPSED.key,
parents: [{
type: 'toolbar',
key: TOOLBARS.PRIMARY_TOOLBAR,
rank: TOOLBAR_RANK[TEXT_SECTION_COLLAPSED.key]
}, {
type: 'toolbar',
key: TOOLBARS.INLINE_TEXT_TOOLBAR,
rank: TOOLBAR_RANK[TEXT_SECTION_COLLAPSED.key]
}],
component: function component(_ref5) {
var children = _ref5.children,
parents = _ref5.parents;
return /*#__PURE__*/React.createElement(Show, {
below: "md"
}, /*#__PURE__*/React.createElement(Section, {
parents: parents,
api: api,
testId: "text-section"
}, children));
}
}, {
type: TEXT_COLLAPSED_GROUP.type,
key: TEXT_COLLAPSED_GROUP.key,
parents: [{
type: TEXT_SECTION_COLLAPSED.type,
key: TEXT_SECTION_COLLAPSED.key,
rank: 100
}]
}, {
type: TEXT_COLLAPSED_MENU.type,
key: TEXT_COLLAPSED_MENU.key,
parents: [{
type: TEXT_COLLAPSED_GROUP.type,
key: TEXT_COLLAPSED_GROUP.key,
rank: 100
}],
component: TextCollapsedMenu
}, {
type: INSERT_BLOCK_SECTION.type,
key: INSERT_BLOCK_SECTION.key,
parents: [{
type: 'toolbar',
key: TOOLBARS.PRIMARY_TOOLBAR,
rank: TOOLBAR_RANK[INSERT_BLOCK_SECTION.key]
}],
component: function component(_ref6) {
var children = _ref6.children,
parents = _ref6.parents;
return /*#__PURE__*/React.createElement(Section, {
testId: "insert-block-section",
parents: parents,
api: api,
showSeparatorInFullPagePrimaryToolbar: true,
isSharedSection: false
}, children);
}
}, {
type: LINKING_SECTION.type,
key: LINKING_SECTION.key,
parents: [{
type: 'toolbar',
key: TOOLBARS.INLINE_TEXT_TOOLBAR,
rank: TOOLBAR_RANK[LINKING_SECTION.key]
}, {
type: 'toolbar',
key: TOOLBARS.PRIMARY_TOOLBAR,
rank: TOOLBAR_RANK[LINKING_SECTION.key]
}],
component: function component(_ref7) {
var children = _ref7.children,
parents = _ref7.parents;
return /*#__PURE__*/React.createElement(Section, {
testId: "link-section",
parents: parents,
api: api,
showSeparatorInFullPagePrimaryToolbar: true
}, children);
}
}, {
type: OVERFLOW_SECTION.type,
key: OVERFLOW_SECTION.key,
parents: [{
type: 'toolbar',
key: TOOLBARS.INLINE_TEXT_TOOLBAR,
rank: TOOLBAR_RANK[OVERFLOW_SECTION.key]
}]
}, {
type: OVERFLOW_GROUP.type,
key: OVERFLOW_GROUP.key,
parents: [{
type: OVERFLOW_SECTION.type,
key: OVERFLOW_SECTION.key,
rank: OVERFLOW_SECTION_RANK[OVERFLOW_GROUP.key]
}]
}, {
type: OVERFLOW_MENU.type,
key: OVERFLOW_MENU.key,
parents: [{
type: OVERFLOW_GROUP.type,
key: OVERFLOW_GROUP.key,
rank: OVERFLOW_GROUP_RANK[OVERFLOW_MENU.key]
}],
component: function component(_ref8) {
var children = _ref8.children;
return /*#__PURE__*/React.createElement(OverflowMenu, null, children);
}
}, {
type: OVERFLOW_EXTENSIONS_MENU_SECTION.type,
key: OVERFLOW_EXTENSIONS_MENU_SECTION.key,
parents: [{
type: OVERFLOW_MENU.type,
key: OVERFLOW_MENU.key,
rank: OVERFLOW_MENU_RANK[OVERFLOW_EXTENSIONS_MENU_SECTION.key]
}],
component: OverflowMenuSection
}, {
type: PIN_SECTION.type,
key: PIN_SECTION.key,
parents: [{
type: 'toolbar',
key: TOOLBARS.PRIMARY_TOOLBAR,
rank: TOOLBAR_RANK[PIN_SECTION.key]
}],
component: function component(_ref9) {
var children = _ref9.children,
parents = _ref9.parents;
return /*#__PURE__*/React.createElement(Section, {
testId: "pin-section",
parents: parents,
api: api,
showSeparatorInFullPagePrimaryToolbar: true
}, children);
}
}];
components.push({
type: OVERFLOW_SECTION_PRIMARY_TOOLBAR.type,
key: OVERFLOW_SECTION_PRIMARY_TOOLBAR.key,
parents: [{
type: 'toolbar',
key: TOOLBARS.PRIMARY_TOOLBAR,
rank: TOOLBAR_RANK[OVERFLOW_SECTION_PRIMARY_TOOLBAR.key]
}],
component: function component(_ref0) {
var children = _ref0.children;
return /*#__PURE__*/React.createElement(OverflowSection, null, children);
}
}, {
type: OVERFLOW_GROUP_PRIMARY_TOOLBAR.type,
key: OVERFLOW_GROUP_PRIMARY_TOOLBAR.key,
parents: [{
type: OVERFLOW_SECTION_PRIMARY_TOOLBAR.type,
key: OVERFLOW_SECTION_PRIMARY_TOOLBAR.key,
rank: OVERFLOW_SECTION_PRIMARY_TOOLBAR_RANK[OVERFLOW_GROUP_PRIMARY_TOOLBAR.key]
}]
}, {
type: OVERFLOW_MENU_PRIMARY_TOOLBAR.type,
key: OVERFLOW_MENU_PRIMARY_TOOLBAR.key,
parents: [{
type: OVERFLOW_GROUP_PRIMARY_TOOLBAR.type,
key: OVERFLOW_GROUP_PRIMARY_TOOLBAR.key,
rank: OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK[OVERFLOW_MENU_PRIMARY_TOOLBAR.key]
}],
component: function component(_ref1) {
var children = _ref1.children;
return /*#__PURE__*/React.createElement(OverflowMenu, null, children);
}
});
switch (contextualFormattingEnabled) {
case 'always-inline':
components.unshift.apply(components, _toConsumableArray(getInlineTextToolbarComponents()));
break;
case 'always-pinned':
components.unshift.apply(components, _toConsumableArray(getPrimaryToolbarComponents(breakpointPreset)));
break;
case 'controlled':
components.unshift.apply(components, _toConsumableArray(getInlineTextToolbarComponents()));
components.unshift.apply(components, _toConsumableArray(getPrimaryToolbarComponents(breakpointPreset)));
break;
}
components.push({
type: TRACK_CHANGES_SECTION.type,
key: TRACK_CHANGES_SECTION.key,
parents: [{
type: 'toolbar',
key: TOOLBARS.PRIMARY_TOOLBAR,
rank: TOOLBAR_RANK[TRACK_CHANGES_SECTION.key]
}],
component: function component(_ref10) {
var children = _ref10.children,
parents = _ref10.parents;
return /*#__PURE__*/React.createElement(Section, {
testId: "track-changes-section",
parents: parents,
api: api,
showSeparatorInFullPagePrimaryToolbar: true
}, children);
}
});
return components;
};