@atlaskit/editor-plugin-insert-block
Version:
Insert block plugin for @atlaskit/editor-core
259 lines • 10.2 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from 'react';
import memoize from 'lodash/memoize';
import memoizeOne from 'memoize-one';
import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
import { blockTypeMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
import { fg } from '@atlaskit/platform-feature-flags';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { action, blockquote, codeblock, date, decision, emoji, expand, horizontalrule, imageUpload, layout, link, media, mention, panel, placeholder, status, table, tableSelector } from './item';
import { shallowEquals } from './shallow-equals';
var buttonToItem = memoize(function (button) {
return _objectSpread(_objectSpread({}, button), {}, {
title: /*#__PURE__*/React.createElement(ToolTipContent, {
description: button.content,
shortcutOverride: button.shortcut
})
});
});
var buttonToDropdownItem = memoizeOne(function (title) {
return memoize(function (button) {
return _objectSpread(_objectSpread({}, button), {}, {
title: /*#__PURE__*/React.createElement(ToolTipContent, {
description: title,
shortcutOverride: "/"
})
});
});
});
var createInsertBlockItems = function createInsertBlockItems(config) {
var isTypeAheadAllowed = config.isTypeAheadAllowed,
tableSupported = config.tableSupported,
tableSelectorSupported = config.tableSelectorSupported,
mediaUploadsEnabled = config.mediaUploadsEnabled,
mediaSupported = config.mediaSupported,
imageUploadSupported = config.imageUploadSupported,
imageUploadEnabled = config.imageUploadEnabled,
mentionsSupported = config.mentionsSupported,
mentionsDisabled = config.mentionsDisabled,
availableWrapperBlockTypes = config.availableWrapperBlockTypes,
actionSupported = config.actionSupported,
decisionSupported = config.decisionSupported,
linkSupported = config.linkSupported,
linkDisabled = config.linkDisabled,
emojiDisabled = config.emojiDisabled,
emojiProvider = config.emojiProvider,
hasEmojiPlugin = config.hasEmojiPlugin,
hasMentionsPlugin = config.hasMentionsPlugin,
hasMediaPlugin = config.hasMediaPlugin,
nativeStatusSupported = config.nativeStatusSupported,
insertMenuItems = config.insertMenuItems,
dateEnabled = config.dateEnabled,
placeholderTextEnabled = config.placeholderTextEnabled,
horizontalRuleEnabled = config.horizontalRuleEnabled,
layoutSectionEnabled = config.layoutSectionEnabled,
expandEnabled = config.expandEnabled,
numberOfButtons = config.numberOfButtons,
schema = config.schema,
formatMessage = config.formatMessage,
isEditorOffline = config.isEditorOffline;
var items = [];
var isOffline = isEditorOffline === true;
if (actionSupported) {
items.push(action({
content: formatMessage(messages.action),
tooltipDescription: formatMessage(messages.actionDescription),
disabled: false
}));
}
if (linkSupported) {
items.push(link({
content: formatMessage(messages.link),
tooltipDescription: formatMessage(messages.linkDescription),
disabled: !!linkDisabled,
'aria-haspopup': 'dialog'
}));
}
if (editorExperiment('platform_editor_prevent_toolbar_layout_shifts', true)) {
if (imageUploadSupported) {
items.push(imageUpload({
content: formatMessage(messages.image),
disabled: !imageUploadEnabled || isOffline
}));
} else if (hasMediaPlugin) {
items.push(media({
content: formatMessage(messages.addMediaFiles),
tooltipDescription: formatMessage(messages.mediaFilesDescription),
disabled: isOffline || !mediaSupported || !mediaUploadsEnabled
}));
}
if (hasMentionsPlugin) {
items.push(mention({
content: formatMessage(messages.mention),
tooltipDescription: formatMessage(messages.mentionDescription),
disabled: !isTypeAheadAllowed || !!mentionsDisabled || !mentionsSupported,
'aria-haspopup': 'listbox'
}));
}
if (hasEmojiPlugin) {
items.push(emoji({
content: formatMessage(messages.emoji),
tooltipDescription: formatMessage(messages.emojiDescription),
disabled: emojiDisabled || !isTypeAheadAllowed || !emojiProvider,
'aria-haspopup': 'dialog'
}));
}
} else {
if (mediaSupported && mediaUploadsEnabled) {
items.push(media({
content: formatMessage(messages.addMediaFiles),
tooltipDescription: formatMessage(messages.mediaFilesDescription),
disabled: isOffline
}));
}
if (imageUploadSupported) {
items.push(imageUpload({
content: formatMessage(messages.image),
disabled: !imageUploadEnabled || isOffline
}));
}
if (mentionsSupported) {
items.push(mention({
content: formatMessage(messages.mention),
tooltipDescription: formatMessage(messages.mentionDescription),
disabled: !isTypeAheadAllowed || !!mentionsDisabled,
'aria-haspopup': 'listbox'
}));
}
if (emojiProvider) {
items.push(emoji({
content: formatMessage(messages.emoji),
tooltipDescription: formatMessage(messages.emojiDescription),
disabled: emojiDisabled || !isTypeAheadAllowed,
'aria-haspopup': 'dialog'
}));
}
}
if (tableSupported) {
items.push(table({
content: formatMessage(messages.table),
tooltipDescription: formatMessage(messages.tableDescription),
disabled: false
}));
}
if (tableSupported && tableSelectorSupported) {
items.push(tableSelector({
content: formatMessage(messages.tableSelector),
tooltipDescription: formatMessage(messages.tableSelectorDescription),
disabled: false
}));
}
if (layoutSectionEnabled) {
var labelColumns = formatMessage(messages.columns);
items.push(layout({
content: labelColumns,
tooltipDescription: formatMessage(messages.columnsDescription),
disabled: false
}));
}
var blockTypes = availableWrapperBlockTypes || [];
var codeblockData = blockTypes.find(function (type) {
return type.name === 'codeblock';
});
var panelData = blockTypes.find(function (type) {
return type.name === 'panel';
});
var blockquoteData = blockTypes.find(function (type) {
return type.name === 'blockquote';
});
if (codeblockData) {
items.push(codeblock({
content: formatMessage(codeblockData.title),
tooltipDescription: formatMessage(blockTypeMessages.codeblockDescription),
disabled: false,
shortcut: '```'
}));
}
if (panelData) {
items.push(panel({
content: formatMessage(panelData.title),
tooltipDescription: formatMessage(blockTypeMessages.infoPanelDescription),
disabled: false
}));
}
if (blockquoteData) {
items.push(blockquote({
content: formatMessage(blockquoteData.title),
tooltipDescription: formatMessage(blockTypeMessages.blockquoteDescription),
disabled: false,
shortcut: '>'
}));
}
if (decisionSupported) {
items.push(decision({
content: formatMessage(messages.decision),
tooltipDescription: formatMessage(messages.decisionDescription),
disabled: false
}));
}
if (horizontalRuleEnabled && schema.nodes.rule) {
items.push(horizontalrule({
content: formatMessage(messages.horizontalRule),
tooltipDescription: formatMessage(messages.horizontalRuleDescription),
disabled: false
}));
}
if (expandEnabled && schema.nodes.expand) {
items.push(expand({
content: formatMessage(messages.expand),
tooltipDescription: formatMessage(messages.expandDescription),
disabled: false
}));
}
if (dateEnabled) {
var labelDate = formatMessage(messages.date);
items.push(date({
content: labelDate,
tooltipDescription: formatMessage(messages.dateDescription),
disabled: false
}));
}
if (placeholderTextEnabled) {
items.push(placeholder({
content: formatMessage(messages.placeholderText),
disabled: false
}));
}
if (nativeStatusSupported) {
var labelStatus = formatMessage(messages.status);
items.push(status({
content: labelStatus,
tooltipDescription: formatMessage(messages.statusDescription),
disabled: false
}));
}
if (insertMenuItems) {
items.push.apply(items, _toConsumableArray(insertMenuItems));
}
var numButtonsAdjusted = numberOfButtons;
if (fg('platform_editor_toolbar_responsive_fixes')) {
if (items.slice(0, numButtonsAdjusted).some(function (item) {
return item.value.name === 'table selector';
})) {
numButtonsAdjusted++;
}
} else {
numButtonsAdjusted = tableSupported && tableSelectorSupported ? numberOfButtons + 1 : numberOfButtons;
}
var buttonItems = items.slice(0, numButtonsAdjusted).map(buttonToItem);
var remainingItems = items.slice(numButtonsAdjusted).filter(function (_ref) {
var name = _ref.value.name;
return name !== 'table selector';
});
var dropdownItems = remainingItems.map(buttonToDropdownItem(formatMessage(messages.insertMenu)));
return [buttonItems, dropdownItems];
};
export var createItems = memoizeOne(createInsertBlockItems, shallowEquals);