@atlaskit/editor-plugin-block-type
Version:
BlockType plugin for @atlaskit/editor-core
272 lines • 12.6 kB
JavaScript
import React from 'react';
import { extendedBlockquote, extendedBlockquoteWithLocalId } from '@atlaskit/adf-schema/blockquote';
import { fontSize } from '@atlaskit/adf-schema/font-size';
import { hardBreak } from '@atlaskit/adf-schema/hard-break';
import { heading } from '@atlaskit/adf-schema/heading';
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
import { IconHeading, IconQuote } from '@atlaskit/editor-common/assets';
import { keymap, tooltip } from '@atlaskit/editor-common/keymaps';
import { blockTypeMessages as messages } from '@atlaskit/editor-common/messages';
import { ToolbarSize } from '@atlaskit/editor-common/types';
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
import { clearFormatting, insertBlockQuoteWithAnalytics, insertBlockQuoteWithAnalyticsCommand, setBlockTypeWithAnalytics } from './pm-plugins/commands/block-type';
import inputRulePlugin from './pm-plugins/input-rule';
import keymapPlugin from './pm-plugins/keymap';
import { createPlugin, pluginKey } from './pm-plugins/main';
import { FloatingToolbarComponent } from './pm-plugins/ui/FloatingToolbarComponent';
import { PrimaryToolbarComponent } from './pm-plugins/ui/PrimaryToolbarComponent';
import { getToolbarComponents } from './pm-plugins/ui/toolbar-components';
import { getBlockTypeComponents } from './ui';
import { getBlockTypeQuickInsertComponents } from './ui/quick-insert/getBlockTypeQuickInsertComponents';
const headingPluginOptions = ({
formatMessage
}, isAllowed, editorAnalyticsApi) => {
if (!isAllowed) {
return [];
}
return Array.from({
length: 6
}, (_v, idx) => {
const level = idx + 1;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const descriptionDescriptor = messages[`heading${level}Description`];
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const keyshortcut = tooltip(keymap[`toggleHeading${level}`]);
const id = `heading${level}`;
return {
id,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
title: formatMessage(messages[id]),
description: formatMessage(descriptionDescriptor),
priority: 1300,
keywords: [`h${level}`],
keyshortcut,
icon: () => /*#__PURE__*/React.createElement(IconHeading, {
level: level
}),
action(insert, state) {
const tr = insert(state.schema.nodes.heading.createChecked({
level
}));
editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent({
action: ACTION.FORMATTED,
actionSubject: ACTION_SUBJECT.TEXT,
eventType: EVENT_TYPE.TRACK,
actionSubjectId: ACTION_SUBJECT_ID.FORMAT_HEADING,
attributes: {
inputMethod: INPUT_METHOD.QUICK_INSERT,
newHeadingLevel: level
}
})(tr);
return tr;
}
};
});
};
const blockquotePluginOptions = ({
formatMessage
}, isAllowed, editorAnalyticsApi) => {
if (!isAllowed) {
return [];
}
return [{
id: 'blockquote',
title: formatMessage(messages.blockquote),
description: formatMessage(messages.blockquoteDescription),
priority: 1300,
keyshortcut: '>',
icon: () => /*#__PURE__*/React.createElement(IconQuote, null),
action(insert, state) {
const tr = insert(state.schema.nodes.blockquote.createChecked({}, state.schema.nodes.paragraph.createChecked()));
editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent({
action: ACTION.FORMATTED,
actionSubject: ACTION_SUBJECT.TEXT,
eventType: EVENT_TYPE.TRACK,
actionSubjectId: ACTION_SUBJECT_ID.FORMAT_BLOCK_QUOTE,
attributes: {
inputMethod: INPUT_METHOD.QUICK_INSERT
}
})(tr);
return tr;
}
}];
};
const blockTypePlugin = ({
config: options,
api
}) => {
var _api$blockMenu;
const isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
const isRegisteredSlashCommandEnabled = isExperimentEnabled('platform_editor_slash_command');
const primaryToolbarComponent = ({
popupsMountPoint,
popupsBoundariesElement,
popupsScrollableElement,
toolbarSize,
disabled,
isToolbarReducedSpacing
}) => {
let isSmall = options && options.isUndoRedoButtonsEnabled ? toolbarSize < ToolbarSize.XXL : toolbarSize < ToolbarSize.XL;
if (fg('platform_editor_toolbar_responsive_fixes')) {
isSmall = toolbarSize < ToolbarSize.XXL;
}
return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
isSmall: isSmall,
disabled: disabled,
isToolbarReducedSpacing: isToolbarReducedSpacing,
api: api,
popupsMountPoint: popupsMountPoint,
popupsBoundariesElement: popupsBoundariesElement,
popupsScrollableElement: popupsScrollableElement,
shouldUseDefaultRole: false
});
};
if (isToolbarAIFCEnabled) {
var _api$toolbar;
api === null || api === void 0 ? void 0 : (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.registerComponents(getToolbarComponents(api, options === null || options === void 0 ? void 0 : options.allowFontSize));
} else {
var _api$primaryToolbar;
api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.actions.registerComponent({
name: 'blockType',
component: primaryToolbarComponent
});
}
api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.registerBlockMenuComponents(getBlockTypeComponents(api, {
allowFontSize: options === null || options === void 0 ? void 0 : options.allowFontSize
}));
if (isRegisteredSlashCommandEnabled) {
var _api$uiControlRegistr, _options$allowBlockTy, _options$allowBlockTy2;
api === null || api === void 0 ? void 0 : (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 ? void 0 : _api$uiControlRegistr.actions.register(getBlockTypeQuickInsertComponents({
api,
exclude: (_options$allowBlockTy = options === null || options === void 0 ? void 0 : (_options$allowBlockTy2 = options.allowBlockType) === null || _options$allowBlockTy2 === void 0 ? void 0 : _options$allowBlockTy2.exclude) !== null && _options$allowBlockTy !== void 0 ? _options$allowBlockTy : []
}));
}
return {
name: 'blockType',
nodes() {
const nodes = [{
name: 'heading',
node: heading
}, {
name: 'blockquote',
node: fg('platform_editor_adf_with_localid') ? extendedBlockquoteWithLocalId : extendedBlockquote
}, {
name: 'hardBreak',
node: hardBreak
}];
if (options && options.allowBlockType) {
const exclude = options.allowBlockType.exclude ? options.allowBlockType.exclude : [];
return nodes.filter(node => exclude.indexOf(node.name) === -1);
}
return nodes;
},
marks() {
if (options !== null && options !== void 0 && options.allowFontSize) {
return [{
name: 'fontSize',
mark: fontSize
}];
}
return [];
},
pmPlugins() {
return [{
name: 'blockType',
plugin: ({
dispatch
}) => {
return createPlugin(api, dispatch, options && options.lastNodeMustBeParagraph, options === null || options === void 0 ? void 0 : options.includeBlockQuoteAsTextstyleOption, options === null || options === void 0 ? void 0 : options.allowFontSize);
}
}, {
name: 'blockTypeInputRule',
plugin: ({
schema,
featureFlags
}) => {
var _api$analytics;
return inputRulePlugin(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, schema, featureFlags);
}
},
// Needs to be lower priority than editor-tables.tableEditing
// plugin as it is currently swallowing right/down arrow events inside tables
{
name: 'blockTypeKeyMap',
plugin: ({
schema,
featureFlags
}) => {
var _api$analytics2;
return keymapPlugin(api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, schema, featureFlags);
}
}];
},
actions: {
insertBlockQuote(inputMethod) {
var _api$analytics3;
return insertBlockQuoteWithAnalytics(inputMethod, api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions);
}
},
commands: {
setTextLevel(level, inputMethod, fromBlockQuote = false) {
var _api$analytics4;
return setBlockTypeWithAnalytics(level, inputMethod, api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions, fromBlockQuote);
},
insertBlockQuote(inputMethod) {
var _api$analytics5;
return insertBlockQuoteWithAnalyticsCommand(inputMethod, api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions);
},
clearFormatting(inputMethod) {
var _api$analytics6;
return clearFormatting(inputMethod, api === null || api === void 0 ? void 0 : (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions);
}
},
getSharedState(editorState) {
if (!editorState) {
return;
}
return pluginKey.getState(editorState);
},
primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined,
pluginsOptions: {
...(!isToolbarAIFCEnabled && {
selectionToolbar: () => {
var _api$userPreferences, _api$userPreferences$, _api$userPreferences$2;
const toolbarDocking = api === null || api === void 0 ? void 0 : (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 ? void 0 : (_api$userPreferences$ = _api$userPreferences.sharedState.currentState()) === null || _api$userPreferences$ === void 0 ? void 0 : (_api$userPreferences$2 = _api$userPreferences$.preferences) === null || _api$userPreferences$2 === void 0 ? void 0 : _api$userPreferences$2.toolbarDockingPosition;
if (toolbarDocking === 'none' && editorExperiment('platform_editor_controls', 'variant1', {
exposure: true
})) {
const toolbarCustom = {
type: 'custom',
render: (view, _idx, _dispatchAnalyticsEvent) => {
if (!view) {
return;
}
return /*#__PURE__*/React.createElement(FloatingToolbarComponent, {
api: api
});
},
fallback: []
};
return {
isToolbarAbove: true,
items: [toolbarCustom],
rank: 8
};
} else {
return undefined;
}
}
}),
...(!isRegisteredSlashCommandEnabled && {
quickInsert: intl => {
var _api$analytics7, _api$analytics8;
const exclude = options && options.allowBlockType && options.allowBlockType.exclude ? options.allowBlockType.exclude : [];
return [...blockquotePluginOptions(intl, exclude.indexOf('blockquote') === -1, api === null || api === void 0 ? void 0 : (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions), ...headingPluginOptions(intl, exclude.indexOf('heading') === -1, api === null || api === void 0 ? void 0 : (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions)];
}
})
}
};
};
export { blockTypePlugin };