@atlaskit/editor-plugin-highlight
Version:
Highlight plugin for @atlaskit/editor-core
130 lines • 6.75 kB
JavaScript
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 { backgroundColor } from '@atlaskit/adf-schema';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { changeColor } from './editor-commands/change-color';
import { createHighlightPaddingPlugin } from './pm-plugins/highlight-padding';
import { keymapPlugin } from './pm-plugins/keymap';
import { createPlugin, highlightPluginKey } from './pm-plugins/main';
import { FloatingToolbarHighlightColorWithIntl as FloatingToolbarHighlightColor } from './ui/FloatingToolbarHighlightColor';
import { PrimaryToolbarHighlightColorWithIntl as PrimaryToolbarHighlightColor } from './ui/PrimaryToolbarHighlightColor';
import { getToolbarComponent } from './ui/toolbar-component';
export var highlightPlugin = function highlightPlugin(_ref) {
var _api$analytics;
var api = _ref.api;
var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
var isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
var primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
var popupsMountPoint = _ref2.popupsMountPoint,
popupsBoundariesElement = _ref2.popupsBoundariesElement,
popupsScrollableElement = _ref2.popupsScrollableElement,
disabled = _ref2.disabled,
isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing,
editorView = _ref2.editorView;
if (!editorView) {
return null;
}
return /*#__PURE__*/React.createElement(PrimaryToolbarHighlightColor, {
popupsMountPoint: popupsMountPoint,
popupsBoundariesElement: popupsBoundariesElement,
popupsScrollableElement: popupsScrollableElement,
disabled: disabled,
isToolbarReducedSpacing: isToolbarReducedSpacing,
pluginInjectionApi: api,
editorView: editorView
});
};
if (!isToolbarAIFCEnabled) {
var _api$primaryToolbar;
api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
name: 'highlight',
component: primaryToolbarComponent
});
} else {
var _api$toolbar;
api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents(getToolbarComponent(api));
}
return {
name: 'highlight',
marks: function marks() {
if (expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) || expValEquals('platform_editor_lovability_color_schema_change', 'isEnabled', true)) {
return [{
name: 'backgroundColor',
mark: backgroundColor
}];
}
// color is defined in platform/packages/editor/adf-schema/src/next-schema/marks/color.ts
return [{
name: 'backgroundColor',
mark: _objectSpread(_objectSpread({}, backgroundColor), {}, {
excludes: 'color'
})
}];
},
commands: {
changeColor: changeColor(editorAnalyticsAPI)
},
pmPlugins: function pmPlugins() {
var plugins = [{
name: 'highlight',
plugin: function plugin() {
return createPlugin();
}
}, {
name: 'highlightKeymap',
plugin: function plugin() {
return keymapPlugin({
api: api
});
}
}, {
name: 'highlightPadding',
plugin: function plugin() {
return createHighlightPaddingPlugin();
}
}];
return plugins;
},
getSharedState: function getSharedState(editorState) {
if (!editorState) {
return;
}
return highlightPluginKey.getState(editorState);
},
pluginsOptions: !isToolbarAIFCEnabled ? {
selectionToolbar: function selectionToolbar() {
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, _idx, dispatchAnalyticsEvent) {
return /*#__PURE__*/React.createElement(FloatingToolbarHighlightColor, {
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
pluginInjectionApi: api,
editorView: view
});
},
fallback: []
};
var rank = editorExperiment('platform_editor_controls', 'variant1') ? 5 : -9;
return {
rank: rank,
isToolbarAbove: true,
items: [toolbarCustom],
pluginName: 'highlight'
};
} else {
return undefined;
}
}
} : {},
primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
};
};