@atlaskit/editor-plugin-alignment
Version:
Alignment plugin for @atlaskit/editor-core
111 lines • 4.83 kB
JavaScript
import React from 'react';
import { alignment } from '@atlaskit/adf-schema';
import { fg } from '@atlaskit/platform-feature-flags';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { keymapPlugin } from './pm-plugins/keymap';
import { createPlugin, pluginKey } from './pm-plugins/main';
import { FloatingToolbarComponent } from './ui/FloatingToolbarComponent';
import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
import { getToolbarComponents } from './ui/toolbar-components';
var defaultConfig = {
align: 'start'
};
export var alignmentPlugin = function alignmentPlugin(_ref) {
var api = _ref.api;
var isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
var primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
var editorView = _ref2.editorView,
popupsMountPoint = _ref2.popupsMountPoint,
popupsBoundariesElement = _ref2.popupsBoundariesElement,
popupsScrollableElement = _ref2.popupsScrollableElement,
disabled = _ref2.disabled,
isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing;
if (!editorView) {
return null;
}
return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
api: api,
editorView: editorView,
disabled: disabled,
popupsMountPoint: popupsMountPoint,
popupsBoundariesElement: popupsBoundariesElement,
popupsScrollableElement: popupsScrollableElement,
isToolbarReducedSpacing: isToolbarReducedSpacing
});
};
if (isToolbarAIFCEnabled) {
var _api$toolbar;
api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents(getToolbarComponents(api));
} else {
var _api$primaryToolbar;
api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
name: 'alignment',
component: primaryToolbarComponent
});
}
return {
name: 'alignment',
marks: function marks() {
return [{
name: 'alignment',
mark: alignment
}];
},
getSharedState: function getSharedState(editorState) {
if (!editorState) {
return undefined;
}
var pluginState = pluginKey.getState(editorState);
return pluginState ? {
align: pluginState.align,
isEnabled: pluginState.isEnabled
} : undefined;
},
pmPlugins: function pmPlugins() {
return [{
name: 'alignmentPlugin',
plugin: function plugin(_ref3) {
var dispatch = _ref3.dispatch;
return createPlugin(dispatch, defaultConfig);
}
}, {
name: 'annotationKeymap',
plugin: function plugin() {
return keymapPlugin(api);
}
}];
},
pluginsOptions: {
selectionToolbar: isToolbarAIFCEnabled ? undefined : function () {
var _api$userPreferences, _api$selectionToolbar;
var toolbarDocking = fg('platform_editor_use_preferences_plugin') ? api === null || api === void 0 || (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.sharedState.currentState()) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.preferences) === null || _api$userPreferences === void 0 ? void 0 : _api$userPreferences.toolbarDockingPosition : api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking;
if (toolbarDocking === 'none' && editorExperiment('platform_editor_controls', 'variant1', {
exposure: true
})) {
var toolbarCustom = {
type: 'custom',
render: function render(view) {
if (!view) {
return;
}
return /*#__PURE__*/React.createElement(FloatingToolbarComponent, {
api: api,
editorView: view
});
},
fallback: []
};
return {
isToolbarAbove: true,
items: [toolbarCustom],
rank: 4,
pluginName: 'alignment'
};
} else {
return undefined;
}
}
},
primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) && !isToolbarAIFCEnabled ? primaryToolbarComponent : undefined
};
};