@atlaskit/editor-plugin-insert-block
Version:
Insert block plugin for @atlaskit/editor-core
408 lines (398 loc) • 15.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getToolbarComponents = void 0;
var _react = _interopRequireDefault(require("react"));
var _toolbar = require("@atlaskit/editor-common/toolbar");
var _editorToolbar = require("@atlaskit/editor-toolbar");
var _CodeBlockButton = require("./toolbar-components/CodeBlockButton");
var _configResolver = require("./toolbar-components/config-resolver");
var _EmojiButton = require("./toolbar-components/EmojiButton");
var _ImageButton = require("./toolbar-components/ImageButton");
var _InsertButton = require("./toolbar-components/InsertButton");
var _LayoutButton = require("./toolbar-components/LayoutButton");
var _MediaButton = require("./toolbar-components/MediaButton");
var _MentionButton = require("./toolbar-components/MentionButton");
var _TableButton = require("./toolbar-components/TableButton");
var _TableSizePicker = require("./toolbar-components/TableSizePicker");
var _TaskListButton = require("./toolbar-components/TaskListButton");
/**
* Updated toolbar components function that uses the new configuration resolver.
* This function replaces the hardcoded approach with a config-driven one.
*/
var getToolbarComponents = exports.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 = (0, _configResolver.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.default.createElement(_editorToolbar.Show, {
above: showAt || 'lg'
}, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButtonGroup, null, children));
};
};
// TaskList Group
if ((_config$taskList = config.taskList) !== null && _config$taskList !== void 0 && _config$taskList.enabled) {
var _config$taskList2;
components.push({
type: _toolbar.TASK_LIST_GROUP.type,
key: _toolbar.TASK_LIST_GROUP.key,
parents: [{
type: _toolbar.INSERT_BLOCK_SECTION.type,
key: _toolbar.INSERT_BLOCK_SECTION.key,
rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.TASK_LIST_GROUP.key]
}],
component: createResponsiveComponent((_config$taskList2 = config.taskList) === null || _config$taskList2 === void 0 ? void 0 : _config$taskList2.showAt)
});
components.push({
type: _toolbar.TASK_LIST_BUTTON.type,
key: _toolbar.TASK_LIST_BUTTON.key,
parents: [{
type: _toolbar.TASK_LIST_GROUP.type,
key: _toolbar.TASK_LIST_GROUP.key,
rank: _toolbar.TASK_LIST_GROUP_RANK[_toolbar.TASK_LIST_BUTTON.key]
}],
component: function component() {
return /*#__PURE__*/_react.default.createElement(_TaskListButton.TaskListButton, {
api: api
});
}
});
}
// Media Group
if ((_config$media = config.media) !== null && _config$media !== void 0 && _config$media.enabled) {
var _config$media2;
components.push({
type: _toolbar.MEDIA_GROUP.type,
key: _toolbar.MEDIA_GROUP.key,
parents: [{
type: _toolbar.INSERT_BLOCK_SECTION.type,
key: _toolbar.INSERT_BLOCK_SECTION.key,
rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.MEDIA_GROUP.key]
}],
component: createResponsiveComponent((_config$media2 = config.media) === null || _config$media2 === void 0 ? void 0 : _config$media2.showAt)
});
components.push({
type: _toolbar.MEDIA_BUTTON.type,
key: _toolbar.MEDIA_BUTTON.key,
parents: [{
type: _toolbar.MEDIA_GROUP.type,
key: _toolbar.MEDIA_GROUP.key,
rank: _toolbar.MEDIA_GROUP_RANK[_toolbar.MEDIA_BUTTON.key]
}],
component: function component() {
return !!(api !== null && api !== void 0 && api.imageUpload) ? /*#__PURE__*/_react.default.createElement(_ImageButton.ImageButton, {
api: api
}) : /*#__PURE__*/_react.default.createElement(_MediaButton.MediaButton, {
api: api
});
}
});
}
// CodeBlock Group
if ((_config$codeBlock = config.codeBlock) !== null && _config$codeBlock !== void 0 && _config$codeBlock.enabled) {
var _config$codeBlock2;
components.push({
type: _toolbar.CODE_BLOCK_GROUP.type,
key: _toolbar.CODE_BLOCK_GROUP.key,
parents: [{
type: _toolbar.INSERT_BLOCK_SECTION.type,
key: _toolbar.INSERT_BLOCK_SECTION.key,
rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.CODE_BLOCK_GROUP.key]
}],
component: createResponsiveComponent((_config$codeBlock2 = config.codeBlock) === null || _config$codeBlock2 === void 0 ? void 0 : _config$codeBlock2.showAt)
});
components.push({
type: _toolbar.CODE_BLOCK_BUTTON.type,
key: _toolbar.CODE_BLOCK_BUTTON.key,
parents: [{
type: _toolbar.CODE_BLOCK_GROUP.type,
key: _toolbar.CODE_BLOCK_GROUP.key,
rank: _toolbar.CODE_BLOCK_GROUP_RANK[_toolbar.CODE_BLOCK_BUTTON.key]
}],
component: function component() {
return /*#__PURE__*/_react.default.createElement(_CodeBlockButton.CodeBlockButton, {
api: api
});
}
});
}
// Mention Group
if ((_config$mention = config.mention) !== null && _config$mention !== void 0 && _config$mention.enabled) {
components.push({
type: _toolbar.MENTION_GROUP.type,
key: _toolbar.MENTION_GROUP.key,
parents: [{
type: _toolbar.INSERT_BLOCK_SECTION.type,
key: _toolbar.INSERT_BLOCK_SECTION.key,
rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.MENTION_GROUP.key]
}],
component: createResponsiveComponent(config.mention.showAt)
});
components.push({
type: _toolbar.MENTION_BUTTON.type,
key: _toolbar.MENTION_BUTTON.key,
parents: [{
type: _toolbar.MENTION_GROUP.type,
key: _toolbar.MENTION_GROUP.key,
rank: _toolbar.MENTION_GROUP_RANK[_toolbar.MENTION_BUTTON.key]
}],
component: function component() {
return /*#__PURE__*/_react.default.createElement(_MentionButton.MentionButton, {
api: api
});
}
});
}
// Emoji Group
if ((_config$emoji = config.emoji) !== null && _config$emoji !== void 0 && _config$emoji.enabled) {
components.push({
type: _toolbar.EMOJI_GROUP.type,
key: _toolbar.EMOJI_GROUP.key,
parents: [{
type: _toolbar.INSERT_BLOCK_SECTION.type,
key: _toolbar.INSERT_BLOCK_SECTION.key,
rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.EMOJI_GROUP.key]
}],
component: createResponsiveComponent(config.emoji.showAt)
});
components.push({
type: _toolbar.EMOJI_BUTTON.type,
key: _toolbar.EMOJI_BUTTON.key,
parents: [{
type: _toolbar.EMOJI_GROUP.type,
key: _toolbar.EMOJI_GROUP.key,
rank: _toolbar.EMOJI_GROUP_RANK[_toolbar.EMOJI_BUTTON.key]
}],
component: function component() {
return /*#__PURE__*/_react.default.createElement(_EmojiButton.EmojiButton, {
api: api
});
}
});
}
// Layout Group
if ((_config$layout = config.layout) !== null && _config$layout !== void 0 && _config$layout.enabled) {
components.push({
type: _toolbar.LAYOUT_GROUP.type,
key: _toolbar.LAYOUT_GROUP.key,
parents: [{
type: _toolbar.INSERT_BLOCK_SECTION.type,
key: _toolbar.INSERT_BLOCK_SECTION.key,
rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.LAYOUT_GROUP.key]
}],
component: createResponsiveComponent(config.layout.showAt)
});
components.push({
type: _toolbar.LAYOUT_BUTTON.type,
key: _toolbar.LAYOUT_BUTTON.key,
parents: [{
type: _toolbar.LAYOUT_GROUP.type,
key: _toolbar.LAYOUT_GROUP.key,
rank: _toolbar.LAYOUT_GROUP_RANK[_toolbar.LAYOUT_BUTTON.key]
}],
component: function component() {
return /*#__PURE__*/_react.default.createElement(_LayoutButton.LayoutButton, {
api: api
});
}
});
}
// Table Group
if ((_config$table = config.table) !== null && _config$table !== void 0 && _config$table.enabled) {
components.push({
type: _toolbar.TABLE_GROUP.type,
key: _toolbar.TABLE_GROUP.key,
parents: [{
type: _toolbar.INSERT_BLOCK_SECTION.type,
key: _toolbar.INSERT_BLOCK_SECTION.key,
rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.TABLE_GROUP.key]
}],
component: createResponsiveComponent(config.table.showAt)
});
components.push({
type: _toolbar.TABLE_BUTTON.type,
key: _toolbar.TABLE_BUTTON.key,
parents: [{
type: _toolbar.TABLE_GROUP.type,
key: _toolbar.TABLE_GROUP.key,
rank: _toolbar.TABLE_GROUP_RANK[_toolbar.TABLE_BUTTON.key]
}],
component: function component() {
return /*#__PURE__*/_react.default.createElement(_TableButton.TableButton, {
api: api
});
}
});
if (options.tableSelectorSupported) {
components.push({
type: _toolbar.TABLE_SIZE_PICKER.type,
key: _toolbar.TABLE_SIZE_PICKER.key,
parents: [{
type: _toolbar.TABLE_GROUP.type,
key: _toolbar.TABLE_GROUP.key,
rank: _toolbar.TABLE_GROUP_RANK[_toolbar.TABLE_SIZE_PICKER.key]
}],
component: function component() {
return /*#__PURE__*/_react.default.createElement(_TableSizePicker.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.default.createElement(_InsertButton.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: _toolbar.INSERT_GROUP.type,
key: "".concat(_toolbar.INSERT_GROUP.key, "-none"),
parents: [{
type: _toolbar.INSERT_BLOCK_SECTION.type,
key: _toolbar.INSERT_BLOCK_SECTION.key,
rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.INSERT_GROUP.key]
}],
component: function component(_ref3) {
var children = _ref3.children;
return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
below: "sm"
}, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButtonGroup, null, children));
}
});
components.push({
type: _toolbar.INSERT_BUTTON.type,
key: _toolbar.INSERT_BUTTON.key,
parents: [{
type: _toolbar.INSERT_GROUP.type,
key: "".concat(_toolbar.INSERT_GROUP.key, "-none"),
rank: _toolbar.INSERT_GROUP_RANK[_toolbar.INSERT_BUTTON.key]
}],
component: createInsertButtonComponent(null)
});
components.push({
type: _toolbar.INSERT_GROUP.type,
key: "".concat(_toolbar.INSERT_GROUP.key, "-sm"),
parents: [{
type: _toolbar.INSERT_BLOCK_SECTION.type,
key: _toolbar.INSERT_BLOCK_SECTION.key,
rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.INSERT_GROUP.key]
}],
component: function component(_ref4) {
var children = _ref4.children;
return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
only: "sm"
}, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButtonGroup, null, children));
}
});
components.push({
type: _toolbar.INSERT_BUTTON.type,
key: _toolbar.INSERT_BUTTON.key,
parents: [{
type: _toolbar.INSERT_GROUP.type,
key: "".concat(_toolbar.INSERT_GROUP.key, "-sm"),
rank: _toolbar.INSERT_GROUP_RANK[_toolbar.INSERT_BUTTON.key]
}],
component: createInsertButtonComponent('sm')
});
components.push({
type: _toolbar.INSERT_GROUP.type,
key: "".concat(_toolbar.INSERT_GROUP.key, "-md"),
parents: [{
type: _toolbar.INSERT_BLOCK_SECTION.type,
key: _toolbar.INSERT_BLOCK_SECTION.key,
rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.INSERT_GROUP.key]
}],
component: function component(_ref5) {
var children = _ref5.children;
return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
only: "md"
}, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButtonGroup, null, children));
}
});
components.push({
type: _toolbar.INSERT_BUTTON.type,
key: _toolbar.INSERT_BUTTON.key,
parents: [{
type: _toolbar.INSERT_GROUP.type,
key: "".concat(_toolbar.INSERT_GROUP.key, "-md"),
rank: _toolbar.INSERT_GROUP_RANK[_toolbar.INSERT_BUTTON.key]
}],
component: createInsertButtonComponent('md')
});
components.push({
type: _toolbar.INSERT_GROUP.type,
key: "".concat(_toolbar.INSERT_GROUP.key, "-lg"),
parents: [{
type: _toolbar.INSERT_BLOCK_SECTION.type,
key: _toolbar.INSERT_BLOCK_SECTION.key,
rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.INSERT_GROUP.key]
}],
component: function component(_ref6) {
var children = _ref6.children;
return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
only: "lg"
}, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButtonGroup, null, children));
}
});
components.push({
type: _toolbar.INSERT_BUTTON.type,
key: _toolbar.INSERT_BUTTON.key,
parents: [{
type: _toolbar.INSERT_GROUP.type,
key: "".concat(_toolbar.INSERT_GROUP.key, "-lg"),
rank: _toolbar.INSERT_GROUP_RANK[_toolbar.INSERT_BUTTON.key]
}],
component: createInsertButtonComponent('lg')
});
components.push({
type: _toolbar.INSERT_GROUP.type,
key: "".concat(_toolbar.INSERT_GROUP.key, "-xl"),
parents: [{
type: _toolbar.INSERT_BLOCK_SECTION.type,
key: _toolbar.INSERT_BLOCK_SECTION.key,
rank: _toolbar.INSERT_BLOCK_SECTION_RANK[_toolbar.INSERT_GROUP.key]
}],
component: function component(_ref7) {
var children = _ref7.children;
return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
only: "xl"
}, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButtonGroup, null, children));
}
});
components.push({
type: _toolbar.INSERT_BUTTON.type,
key: _toolbar.INSERT_BUTTON.key,
parents: [{
type: _toolbar.INSERT_GROUP.type,
key: "".concat(_toolbar.INSERT_GROUP.key, "-xl"),
rank: _toolbar.INSERT_GROUP_RANK[_toolbar.INSERT_BUTTON.key]
}],
component: createInsertButtonComponent('xl')
});
}
return components;
};