@atlaskit/editor-plugin-text-color
Version:
Text color plugin for @atlaskit/editor-core
158 lines (157 loc) • 7.38 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.textColorPlugin = void 0;
var _react = _interopRequireDefault(require("react"));
var _adfSchema = require("@atlaskit/adf-schema");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _changeColor2 = require("./editor-commands/change-color");
var _palette = require("./editor-commands/palette");
var _changeColor3 = require("./pm-plugins/commands/change-color");
var _keymap = require("./pm-plugins/keymap");
var _main = require("./pm-plugins/main");
var _FloatingToolbarComponent = require("./ui/FloatingToolbarComponent");
var _PrimaryToolbarComponent = require("./ui/PrimaryToolbarComponent");
var _toolbarComponents = require("./ui/toolbar-components");
var pluginConfig = function pluginConfig(textColorConfig) {
if (!textColorConfig || typeof textColorConfig === 'boolean') {
return undefined;
}
return textColorConfig;
};
var isToolbarComponentEnabled = function isToolbarComponentEnabled(textColorConfig) {
return textColorConfig === undefined || textColorConfig.toolbarConfig === undefined || textColorConfig.toolbarConfig.enabled !== false;
};
var textColorPlugin = exports.textColorPlugin = function textColorPlugin(_ref) {
var textColorConfig = _ref.config,
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,
isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing,
dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
disabled = _ref2.disabled;
if (!editorView) {
return null;
}
return /*#__PURE__*/_react.default.createElement(_PrimaryToolbarComponent.PrimaryToolbarComponent, {
isReducedSpacing: isToolbarReducedSpacing,
editorView: editorView,
popupsMountPoint: popupsMountPoint,
popupsBoundariesElement: popupsBoundariesElement,
popupsScrollableElement: popupsScrollableElement,
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
disabled: disabled,
api: api
});
};
if (isToolbarAIFCEnabled) {
if ((0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_text_color_config') || (0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_text_color_config_jsm')) {
var _api$toolbar;
if (api !== null && api !== void 0 && (_api$toolbar = api.toolbar) !== null && _api$toolbar !== void 0 && _api$toolbar.actions.registerComponents && isToolbarComponentEnabled(pluginConfig(textColorConfig))) {
api.toolbar.actions.registerComponents((0, _toolbarComponents.getToolbarComponents)(api));
}
} else {
var _api$toolbar2;
if (api !== null && api !== void 0 && (_api$toolbar2 = api.toolbar) !== null && _api$toolbar2 !== void 0 && _api$toolbar2.actions.registerComponents) {
api.toolbar.actions.registerComponents((0, _toolbarComponents.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: 'textColor',
component: primaryToolbarComponent
});
}
return {
name: 'textColor',
marks: function marks() {
return [{
name: 'textColor',
mark: _adfSchema.textColor
}];
},
pmPlugins: function pmPlugins() {
return isToolbarAIFCEnabled ? [{
name: 'textColor',
plugin: function plugin(_ref3) {
var dispatch = _ref3.dispatch;
return (0, _main.createPlugin)(dispatch, pluginConfig(textColorConfig));
}
}, {
name: 'textColorKeymap',
plugin: function plugin() {
return (0, _keymap.keymapPlugin)({
api: api
});
}
}] : [{
name: 'textColor',
plugin: function plugin(_ref4) {
var dispatch = _ref4.dispatch;
return (0, _main.createPlugin)(dispatch, pluginConfig(textColorConfig));
}
}];
},
getSharedState: function getSharedState(editorState) {
if (!editorState) {
return undefined;
}
return _main.pluginKey.getState(editorState);
},
actions: {
changeColor: function changeColor(color, inputMethod) {
var _api$analytics;
return (0, _changeColor3.changeColor)(color, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, inputMethod);
}
},
commands: {
changeColor: function changeColor(color, inputMethod) {
return (0, _changeColor2.changeColor)(color, api, inputMethod);
},
setPalette: function setPalette(isPaletteOpen) {
return (0, _palette.setPalette)(isPaletteOpen);
}
},
pluginsOptions: !isToolbarAIFCEnabled ? {
selectionToolbar: function selectionToolbar() {
var _api$userPreferences, _api$selectionToolbar;
var toolbarDocking = (0, _platformFeatureFlags.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) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.currentState()) === null || _api$userPreferences === void 0 ? void 0 : _api$userPreferences.preferences.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' && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
exposure: true
})) {
var toolbarCustom = {
type: 'custom',
render: function render(view, _idx, dispatchAnalyticsEvent) {
if (!view) {
return;
}
return /*#__PURE__*/_react.default.createElement(_FloatingToolbarComponent.FloatingToolbarComponent, {
editorView: view,
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
api: api
});
},
fallback: []
};
return {
isToolbarAbove: true,
items: [toolbarCustom],
rank: 6,
pluginName: 'textColor'
};
} else {
return undefined;
}
}
} : {},
primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
};
};