@atlaskit/editor-plugin-insert-block
Version:
Insert block plugin for @atlaskit/editor-core
401 lines (392 loc) • 14.2 kB
JavaScript
import React from 'react';
import { INSERT_BLOCK_SECTION, TASK_LIST_GROUP, MEDIA_GROUP, INSERT_BLOCK_SECTION_RANK, TASK_LIST_BUTTON, TASK_LIST_GROUP_RANK, MEDIA_BUTTON, MENTION_GROUP, MEDIA_GROUP_RANK, MENTION_BUTTON, MENTION_GROUP_RANK, EMOJI_GROUP, EMOJI_BUTTON, EMOJI_GROUP_RANK, LAYOUT_GROUP, LAYOUT_BUTTON, LAYOUT_GROUP_RANK, TABLE_GROUP_RANK, TABLE_BUTTON, TABLE_GROUP, TABLE_SIZE_PICKER, INSERT_GROUP, INSERT_BUTTON, INSERT_GROUP_RANK, CODE_BLOCK_GROUP, CODE_BLOCK_BUTTON, CODE_BLOCK_GROUP_RANK } from '@atlaskit/editor-common/toolbar';
import { Show, ToolbarButtonGroup } from '@atlaskit/editor-toolbar';
import { CodeBlockButton } from './toolbar-components/CodeBlockButton';
import { resolveToolbarConfig } from './toolbar-components/config-resolver';
import { EmojiButton } from './toolbar-components/EmojiButton';
import { ImageButton } from './toolbar-components/ImageButton';
import { InsertButton } from './toolbar-components/InsertButton';
import { LayoutButton } from './toolbar-components/LayoutButton';
import { MediaButton } from './toolbar-components/MediaButton';
import { MentionButton } from './toolbar-components/MentionButton';
import { TableButton } from './toolbar-components/TableButton';
import { TableSizePicker } from './toolbar-components/TableSizePicker';
import { TaskListButton } from './toolbar-components/TaskListButton';
/**
* Updated toolbar components function that uses the new configuration resolver.
* This function replaces the hardcoded approach with a config-driven one.
*/
export var getToolbarComponents = function getToolbarComponents(_ref) {
var _config$taskList, _config$media, _config$codeBlock, _config$mention, _config$emoji, _config$layout, _config$table, _config$insert;
var api = _ref.api,
options = _ref.options,
onInsertBlockType = _ref.onInsertBlockType;
var config = resolveToolbarConfig(options);
var components = [];
// Helper function to create responsive wrapper component
var createResponsiveComponent = function createResponsiveComponent(showAt) {
return function (_ref2) {
var children = _ref2.children;
return /*#__PURE__*/React.createElement(Show, {
above: showAt || 'lg'
}, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children));
};
};
// TaskList Group
if ((_config$taskList = config.taskList) !== null && _config$taskList !== void 0 && _config$taskList.enabled) {
var _config$taskList2;
components.push({
type: TASK_LIST_GROUP.type,
key: TASK_LIST_GROUP.key,
parents: [{
type: INSERT_BLOCK_SECTION.type,
key: INSERT_BLOCK_SECTION.key,
rank: INSERT_BLOCK_SECTION_RANK[TASK_LIST_GROUP.key]
}],
component: createResponsiveComponent((_config$taskList2 = config.taskList) === null || _config$taskList2 === void 0 ? void 0 : _config$taskList2.showAt)
});
components.push({
type: TASK_LIST_BUTTON.type,
key: TASK_LIST_BUTTON.key,
parents: [{
type: TASK_LIST_GROUP.type,
key: TASK_LIST_GROUP.key,
rank: TASK_LIST_GROUP_RANK[TASK_LIST_BUTTON.key]
}],
component: function component() {
return /*#__PURE__*/React.createElement(TaskListButton, {
api: api
});
}
});
}
// Media Group
if ((_config$media = config.media) !== null && _config$media !== void 0 && _config$media.enabled) {
var _config$media2;
components.push({
type: MEDIA_GROUP.type,
key: MEDIA_GROUP.key,
parents: [{
type: INSERT_BLOCK_SECTION.type,
key: INSERT_BLOCK_SECTION.key,
rank: INSERT_BLOCK_SECTION_RANK[MEDIA_GROUP.key]
}],
component: createResponsiveComponent((_config$media2 = config.media) === null || _config$media2 === void 0 ? void 0 : _config$media2.showAt)
});
components.push({
type: MEDIA_BUTTON.type,
key: MEDIA_BUTTON.key,
parents: [{
type: MEDIA_GROUP.type,
key: MEDIA_GROUP.key,
rank: MEDIA_GROUP_RANK[MEDIA_BUTTON.key]
}],
component: function component() {
return !!(api !== null && api !== void 0 && api.imageUpload) ? /*#__PURE__*/React.createElement(ImageButton, {
api: api
}) : /*#__PURE__*/React.createElement(MediaButton, {
api: api
});
}
});
}
// CodeBlock Group
if ((_config$codeBlock = config.codeBlock) !== null && _config$codeBlock !== void 0 && _config$codeBlock.enabled) {
var _config$codeBlock2;
components.push({
type: CODE_BLOCK_GROUP.type,
key: CODE_BLOCK_GROUP.key,
parents: [{
type: INSERT_BLOCK_SECTION.type,
key: INSERT_BLOCK_SECTION.key,
rank: INSERT_BLOCK_SECTION_RANK[CODE_BLOCK_GROUP.key]
}],
component: createResponsiveComponent((_config$codeBlock2 = config.codeBlock) === null || _config$codeBlock2 === void 0 ? void 0 : _config$codeBlock2.showAt)
});
components.push({
type: CODE_BLOCK_BUTTON.type,
key: CODE_BLOCK_BUTTON.key,
parents: [{
type: CODE_BLOCK_GROUP.type,
key: CODE_BLOCK_GROUP.key,
rank: CODE_BLOCK_GROUP_RANK[CODE_BLOCK_BUTTON.key]
}],
component: function component() {
return /*#__PURE__*/React.createElement(CodeBlockButton, {
api: api
});
}
});
}
// Mention Group
if ((_config$mention = config.mention) !== null && _config$mention !== void 0 && _config$mention.enabled) {
components.push({
type: MENTION_GROUP.type,
key: MENTION_GROUP.key,
parents: [{
type: INSERT_BLOCK_SECTION.type,
key: INSERT_BLOCK_SECTION.key,
rank: INSERT_BLOCK_SECTION_RANK[MENTION_GROUP.key]
}],
component: createResponsiveComponent(config.mention.showAt)
});
components.push({
type: MENTION_BUTTON.type,
key: MENTION_BUTTON.key,
parents: [{
type: MENTION_GROUP.type,
key: MENTION_GROUP.key,
rank: MENTION_GROUP_RANK[MENTION_BUTTON.key]
}],
component: function component() {
return /*#__PURE__*/React.createElement(MentionButton, {
api: api
});
}
});
}
// Emoji Group
if ((_config$emoji = config.emoji) !== null && _config$emoji !== void 0 && _config$emoji.enabled) {
components.push({
type: EMOJI_GROUP.type,
key: EMOJI_GROUP.key,
parents: [{
type: INSERT_BLOCK_SECTION.type,
key: INSERT_BLOCK_SECTION.key,
rank: INSERT_BLOCK_SECTION_RANK[EMOJI_GROUP.key]
}],
component: createResponsiveComponent(config.emoji.showAt)
});
components.push({
type: EMOJI_BUTTON.type,
key: EMOJI_BUTTON.key,
parents: [{
type: EMOJI_GROUP.type,
key: EMOJI_GROUP.key,
rank: EMOJI_GROUP_RANK[EMOJI_BUTTON.key]
}],
component: function component() {
return /*#__PURE__*/React.createElement(EmojiButton, {
api: api
});
}
});
}
// Layout Group
if ((_config$layout = config.layout) !== null && _config$layout !== void 0 && _config$layout.enabled) {
components.push({
type: LAYOUT_GROUP.type,
key: LAYOUT_GROUP.key,
parents: [{
type: INSERT_BLOCK_SECTION.type,
key: INSERT_BLOCK_SECTION.key,
rank: INSERT_BLOCK_SECTION_RANK[LAYOUT_GROUP.key]
}],
component: createResponsiveComponent(config.layout.showAt)
});
components.push({
type: LAYOUT_BUTTON.type,
key: LAYOUT_BUTTON.key,
parents: [{
type: LAYOUT_GROUP.type,
key: LAYOUT_GROUP.key,
rank: LAYOUT_GROUP_RANK[LAYOUT_BUTTON.key]
}],
component: function component() {
return /*#__PURE__*/React.createElement(LayoutButton, {
api: api
});
}
});
}
// Table Group
if ((_config$table = config.table) !== null && _config$table !== void 0 && _config$table.enabled) {
components.push({
type: TABLE_GROUP.type,
key: TABLE_GROUP.key,
parents: [{
type: INSERT_BLOCK_SECTION.type,
key: INSERT_BLOCK_SECTION.key,
rank: INSERT_BLOCK_SECTION_RANK[TABLE_GROUP.key]
}],
component: createResponsiveComponent(config.table.showAt)
});
components.push({
type: TABLE_BUTTON.type,
key: TABLE_BUTTON.key,
parents: [{
type: TABLE_GROUP.type,
key: TABLE_GROUP.key,
rank: TABLE_GROUP_RANK[TABLE_BUTTON.key]
}],
component: function component() {
return /*#__PURE__*/React.createElement(TableButton, {
api: api
});
}
});
if (options.tableSelectorSupported) {
components.push({
type: TABLE_SIZE_PICKER.type,
key: TABLE_SIZE_PICKER.key,
parents: [{
type: TABLE_GROUP.type,
key: TABLE_GROUP.key,
rank: TABLE_GROUP_RANK[TABLE_SIZE_PICKER.key]
}],
component: function component() {
return /*#__PURE__*/React.createElement(TableSizePicker, {
api: api,
tableSelectorSupported: options.tableSelectorSupported
});
}
});
}
}
// Insert Group
if ((_config$insert = config.insert) !== null && _config$insert !== void 0 && _config$insert.enabled) {
var createInsertButtonComponent = function createInsertButtonComponent(breakpoint) {
return function () {
return /*#__PURE__*/React.createElement(InsertButton, {
api: api,
breakpoint: breakpoint,
toolbarConfig: config,
showElementBrowserLink: options.showElementBrowserLink,
tableSelectorSupported: options.tableSelectorSupported,
onInsertBlockType: onInsertBlockType,
nativeStatusSupported: options.nativeStatusSupported,
horizontalRuleEnabled: options.horizontalRuleEnabled,
expandEnabled: options.allowExpand,
insertMenuItems: options.insertMenuItems,
numberOfButtons: 0
});
};
};
components.push({
type: INSERT_GROUP.type,
key: "".concat(INSERT_GROUP.key, "-none"),
parents: [{
type: INSERT_BLOCK_SECTION.type,
key: INSERT_BLOCK_SECTION.key,
rank: INSERT_BLOCK_SECTION_RANK[INSERT_GROUP.key]
}],
component: function component(_ref3) {
var children = _ref3.children;
return /*#__PURE__*/React.createElement(Show, {
below: "sm"
}, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children));
}
});
components.push({
type: INSERT_BUTTON.type,
key: INSERT_BUTTON.key,
parents: [{
type: INSERT_GROUP.type,
key: "".concat(INSERT_GROUP.key, "-none"),
rank: INSERT_GROUP_RANK[INSERT_BUTTON.key]
}],
component: createInsertButtonComponent(null)
});
components.push({
type: INSERT_GROUP.type,
key: "".concat(INSERT_GROUP.key, "-sm"),
parents: [{
type: INSERT_BLOCK_SECTION.type,
key: INSERT_BLOCK_SECTION.key,
rank: INSERT_BLOCK_SECTION_RANK[INSERT_GROUP.key]
}],
component: function component(_ref4) {
var children = _ref4.children;
return /*#__PURE__*/React.createElement(Show, {
only: "sm"
}, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children));
}
});
components.push({
type: INSERT_BUTTON.type,
key: INSERT_BUTTON.key,
parents: [{
type: INSERT_GROUP.type,
key: "".concat(INSERT_GROUP.key, "-sm"),
rank: INSERT_GROUP_RANK[INSERT_BUTTON.key]
}],
component: createInsertButtonComponent('sm')
});
components.push({
type: INSERT_GROUP.type,
key: "".concat(INSERT_GROUP.key, "-md"),
parents: [{
type: INSERT_BLOCK_SECTION.type,
key: INSERT_BLOCK_SECTION.key,
rank: INSERT_BLOCK_SECTION_RANK[INSERT_GROUP.key]
}],
component: function component(_ref5) {
var children = _ref5.children;
return /*#__PURE__*/React.createElement(Show, {
only: "md"
}, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children));
}
});
components.push({
type: INSERT_BUTTON.type,
key: INSERT_BUTTON.key,
parents: [{
type: INSERT_GROUP.type,
key: "".concat(INSERT_GROUP.key, "-md"),
rank: INSERT_GROUP_RANK[INSERT_BUTTON.key]
}],
component: createInsertButtonComponent('md')
});
components.push({
type: INSERT_GROUP.type,
key: "".concat(INSERT_GROUP.key, "-lg"),
parents: [{
type: INSERT_BLOCK_SECTION.type,
key: INSERT_BLOCK_SECTION.key,
rank: INSERT_BLOCK_SECTION_RANK[INSERT_GROUP.key]
}],
component: function component(_ref6) {
var children = _ref6.children;
return /*#__PURE__*/React.createElement(Show, {
only: "lg"
}, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children));
}
});
components.push({
type: INSERT_BUTTON.type,
key: INSERT_BUTTON.key,
parents: [{
type: INSERT_GROUP.type,
key: "".concat(INSERT_GROUP.key, "-lg"),
rank: INSERT_GROUP_RANK[INSERT_BUTTON.key]
}],
component: createInsertButtonComponent('lg')
});
components.push({
type: INSERT_GROUP.type,
key: "".concat(INSERT_GROUP.key, "-xl"),
parents: [{
type: INSERT_BLOCK_SECTION.type,
key: INSERT_BLOCK_SECTION.key,
rank: INSERT_BLOCK_SECTION_RANK[INSERT_GROUP.key]
}],
component: function component(_ref7) {
var children = _ref7.children;
return /*#__PURE__*/React.createElement(Show, {
only: "xl"
}, /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, children));
}
});
components.push({
type: INSERT_BUTTON.type,
key: INSERT_BUTTON.key,
parents: [{
type: INSERT_GROUP.type,
key: "".concat(INSERT_GROUP.key, "-xl"),
rank: INSERT_GROUP_RANK[INSERT_BUTTON.key]
}],
component: createInsertButtonComponent('xl')
});
}
return components;
};