@atlaskit/editor-plugin-text-formatting
Version:
Text-formatting plugin for @atlaskit/editor-core
186 lines (185 loc) • 10.1 kB
JavaScript
import React from 'react';
import { code, em, strike, strong, subsup, underline } from '@atlaskit/adf-schema';
import { fg } from '@atlaskit/platform-feature-flags';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { toggleCodeWithAnalytics, toggleEmWithAnalytics, toggleStrikeWithAnalytics, toggleStrongWithAnalytics, toggleSubscriptWithAnalytics, toggleSuperscriptWithAnalytics, toggleUnderlineWithAnalytics } from './editor-commands/toggle-mark';
import { plugin as clearFormattingPlugin, pluginKey as clearFormattingPluginKey } from './pm-plugins/clear-formatting';
import clearFormattingKeymapPlugin from './pm-plugins/clear-formatting-keymap';
import textFormattingCursorPlugin from './pm-plugins/cursor';
import textFormattingInputRulePlugin from './pm-plugins/input-rule';
import keymapPlugin from './pm-plugins/keymap';
import { plugin as pmPlugin } from './pm-plugins/main';
import { pluginKey as textFormattingPluginKey } from './pm-plugins/plugin-key';
import textFormattingSmartInputRulePlugin from './pm-plugins/smart-input-rule';
import { FloatingToolbarTextFormalWithIntl as FloatingToolbarComponent } from './ui/FloatingToolbarComponent';
import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
import { getToolbarComponents } from './ui/toolbar-components';
/**
* Text formatting plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
* from `@atlaskit/editor-core`.
*/
export const textFormattingPlugin = ({
config: options,
api
}) => {
var _api$analytics7, _api$analytics8, _api$analytics9, _api$analytics0, _api$analytics1, _api$analytics10, _api$analytics11;
const isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
const primaryToolbarComponent = ({
editorView,
popupsMountPoint,
popupsScrollableElement,
isToolbarReducedSpacing,
toolbarSize,
disabled
}) => {
if (!editorView) {
return null;
}
return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
api: api,
popupsMountPoint: popupsMountPoint,
popupsScrollableElement: popupsScrollableElement,
toolbarSize: toolbarSize,
isReducedSpacing: isToolbarReducedSpacing,
editorView: editorView,
disabled: disabled,
shouldUseResponsiveToolbar: Boolean(options === null || options === void 0 ? void 0 : options.responsiveToolbarMenu)
});
};
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));
} 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: 'textFormatting',
component: primaryToolbarComponent
});
}
return {
name: 'textFormatting',
marks() {
return [{
name: 'em',
mark: em
}, {
name: 'strong',
mark: strong
}].concat(options !== null && options !== void 0 && options.disableStrikethrough ? [] : {
name: 'strike',
mark: strike
}).concat(options !== null && options !== void 0 && options.disableCode ? [] : {
name: 'code',
mark: code
}).concat(options !== null && options !== void 0 && options.disableSuperscriptAndSubscript ? [] : {
name: 'subsup',
mark: subsup
}).concat(options !== null && options !== void 0 && options.disableUnderline ? [] : {
name: 'underline',
mark: underline
});
},
pmPlugins() {
return [{
name: 'textFormatting',
plugin: ({
dispatch
}) => {
var _api$analytics;
return pmPlugin(dispatch, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
}
}, {
name: 'textFormattingCursor',
plugin: () => textFormattingCursorPlugin
}, {
name: 'textFormattingInputRule',
plugin: ({
schema
}) => {
var _api$analytics2;
return textFormattingInputRulePlugin(schema, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api);
}
}, {
name: 'textFormattingSmartRule',
plugin: () => {
var _api$analytics3;
return !(options !== null && options !== void 0 && options.disableSmartTextCompletion) ? textFormattingSmartInputRulePlugin(api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions) : undefined;
}
}, {
name: 'textFormattingClear',
plugin: ({
dispatch
}) => clearFormattingPlugin(dispatch)
}, {
name: 'textFormattingClearKeymap',
plugin: () => {
var _api$analytics4;
return clearFormattingKeymapPlugin(api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions);
}
}, {
name: 'textFormattingKeymap',
plugin: ({
schema
}) => {
var _api$analytics5;
return keymapPlugin(schema, api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions);
}
}];
},
getSharedState(editorState) {
var _clearFormattingPlugi;
if (!editorState) {
return undefined;
}
const textFormattingState = textFormattingPluginKey.getState(editorState);
return {
...textFormattingState,
formattingIsPresent: (_clearFormattingPlugi = clearFormattingPluginKey.getState(editorState)) === null || _clearFormattingPlugi === void 0 ? void 0 : _clearFormattingPlugi.formattingIsPresent,
isInitialised: !!(textFormattingState !== null && textFormattingState !== void 0 && textFormattingState.isInitialised)
};
},
pluginsOptions: isToolbarAIFCEnabled ? {} : {
selectionToolbar: () => {
var _api$userPreferences, _api$userPreferences$, _api$userPreferences$2, _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
const toolbarDocking = fg('platform_editor_use_preferences_plugin') ? 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 : api === null || api === void 0 ? void 0 : (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 ? void 0 : (_api$selectionToolbar2 = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar2 === void 0 ? void 0 : (_api$selectionToolbar3 = _api$selectionToolbar2.currentState()) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.toolbarDocking;
if (toolbarDocking === 'none' && editorExperiment('platform_editor_controls', 'variant1', {
exposure: true
})) {
const toolbarCustom = {
type: 'custom',
render: view => {
var _api$analytics6;
if (!view) {
return;
}
return /*#__PURE__*/React.createElement(FloatingToolbarComponent, {
api: api,
editorView: view,
editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions
});
},
fallback: []
};
return {
isToolbarAbove: true,
items: [toolbarCustom],
rank: 7,
pluginName: 'textFormatting'
};
} else {
return undefined;
}
}
},
primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) && !isToolbarAIFCEnabled ? primaryToolbarComponent : undefined,
commands: {
toggleSuperscript: toggleSuperscriptWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions),
toggleSubscript: toggleSubscriptWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions),
toggleStrike: toggleStrikeWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics9 = api.analytics) === null || _api$analytics9 === void 0 ? void 0 : _api$analytics9.actions),
toggleCode: toggleCodeWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics0 = api.analytics) === null || _api$analytics0 === void 0 ? void 0 : _api$analytics0.actions),
toggleUnderline: toggleUnderlineWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics1 = api.analytics) === null || _api$analytics1 === void 0 ? void 0 : _api$analytics1.actions),
toggleEm: toggleEmWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics10 = api.analytics) === null || _api$analytics10 === void 0 ? void 0 : _api$analytics10.actions),
toggleStrong: toggleStrongWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics11 = api.analytics) === null || _api$analytics11 === void 0 ? void 0 : _api$analytics11.actions)
}
};
};