@atlaskit/editor-plugin-text-formatting
Version:
Text-formatting plugin for @atlaskit/editor-core
192 lines (191 loc) • 11.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.textFormattingPlugin = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
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 _toggleMark = require("./editor-commands/toggle-mark");
var _clearFormatting = require("./pm-plugins/clear-formatting");
var _clearFormattingKeymap = _interopRequireDefault(require("./pm-plugins/clear-formatting-keymap"));
var _cursor = _interopRequireDefault(require("./pm-plugins/cursor"));
var _inputRule = _interopRequireDefault(require("./pm-plugins/input-rule"));
var _keymap = _interopRequireDefault(require("./pm-plugins/keymap"));
var _main = require("./pm-plugins/main");
var _pluginKey = require("./pm-plugins/plugin-key");
var _smartInputRule = _interopRequireDefault(require("./pm-plugins/smart-input-rule"));
var _FloatingToolbarComponent = require("./ui/FloatingToolbarComponent");
var _PrimaryToolbarComponent = require("./ui/PrimaryToolbarComponent");
var _toolbarComponents = require("./ui/toolbar-components");
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) { (0, _defineProperty2.default)(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; }
/**
* Text formatting plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
* from `@atlaskit/editor-core`.
*/
var textFormattingPlugin = exports.textFormattingPlugin = function textFormattingPlugin(_ref) {
var _api$analytics7, _api$analytics8, _api$analytics9, _api$analytics0, _api$analytics1, _api$analytics10, _api$analytics11;
var options = _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,
popupsScrollableElement = _ref2.popupsScrollableElement,
isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing,
toolbarSize = _ref2.toolbarSize,
disabled = _ref2.disabled;
if (!editorView) {
return null;
}
return /*#__PURE__*/_react.default.createElement(_PrimaryToolbarComponent.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 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _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: 'textFormatting',
component: primaryToolbarComponent
});
}
return {
name: 'textFormatting',
marks: function marks() {
return [{
name: 'em',
mark: _adfSchema.em
}, {
name: 'strong',
mark: _adfSchema.strong
}].concat(options !== null && options !== void 0 && options.disableStrikethrough ? [] : {
name: 'strike',
mark: _adfSchema.strike
}).concat(options !== null && options !== void 0 && options.disableCode ? [] : {
name: 'code',
mark: _adfSchema.code
}).concat(options !== null && options !== void 0 && options.disableSuperscriptAndSubscript ? [] : {
name: 'subsup',
mark: _adfSchema.subsup
}).concat(options !== null && options !== void 0 && options.disableUnderline ? [] : {
name: 'underline',
mark: _adfSchema.underline
});
},
pmPlugins: function pmPlugins() {
return [{
name: 'textFormatting',
plugin: function plugin(_ref3) {
var _api$analytics;
var dispatch = _ref3.dispatch;
return (0, _main.plugin)(dispatch, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
}
}, {
name: 'textFormattingCursor',
plugin: function plugin() {
return _cursor.default;
}
}, {
name: 'textFormattingInputRule',
plugin: function plugin(_ref4) {
var _api$analytics2;
var schema = _ref4.schema;
return (0, _inputRule.default)(schema, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api);
}
}, {
name: 'textFormattingSmartRule',
plugin: function plugin() {
var _api$analytics3;
return !(options !== null && options !== void 0 && options.disableSmartTextCompletion) ? (0, _smartInputRule.default)(api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions) : undefined;
}
}, {
name: 'textFormattingClear',
plugin: function plugin(_ref5) {
var dispatch = _ref5.dispatch;
return (0, _clearFormatting.plugin)(dispatch);
}
}, {
name: 'textFormattingClearKeymap',
plugin: function plugin() {
var _api$analytics4;
return (0, _clearFormattingKeymap.default)(api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions);
}
}, {
name: 'textFormattingKeymap',
plugin: function plugin(_ref6) {
var _api$analytics5;
var schema = _ref6.schema;
return (0, _keymap.default)(schema, api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions);
}
}];
},
getSharedState: function getSharedState(editorState) {
var _clearFormattingPlugi;
if (!editorState) {
return undefined;
}
var textFormattingState = _pluginKey.pluginKey.getState(editorState);
return _objectSpread(_objectSpread({}, textFormattingState), {}, {
formattingIsPresent: (_clearFormattingPlugi = _clearFormatting.pluginKey.getState(editorState)) === null || _clearFormattingPlugi === void 0 ? void 0 : _clearFormattingPlugi.formattingIsPresent,
isInitialised: !!(textFormattingState !== null && textFormattingState !== void 0 && textFormattingState.isInitialised)
});
},
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.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' && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
exposure: true
})) {
var toolbarCustom = {
type: 'custom',
render: function render(view) {
var _api$analytics6;
if (!view) {
return;
}
return /*#__PURE__*/_react.default.createElement(_FloatingToolbarComponent.FloatingToolbarTextFormalWithIntl, {
api: api,
editorView: view,
editorAnalyticsAPI: api === null || api === 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: (0, _toggleMark.toggleSuperscriptWithAnalytics)(api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions),
toggleSubscript: (0, _toggleMark.toggleSubscriptWithAnalytics)(api === null || api === void 0 || (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions),
toggleStrike: (0, _toggleMark.toggleStrikeWithAnalytics)(api === null || api === void 0 || (_api$analytics9 = api.analytics) === null || _api$analytics9 === void 0 ? void 0 : _api$analytics9.actions),
toggleCode: (0, _toggleMark.toggleCodeWithAnalytics)(api === null || api === void 0 || (_api$analytics0 = api.analytics) === null || _api$analytics0 === void 0 ? void 0 : _api$analytics0.actions),
toggleUnderline: (0, _toggleMark.toggleUnderlineWithAnalytics)(api === null || api === void 0 || (_api$analytics1 = api.analytics) === null || _api$analytics1 === void 0 ? void 0 : _api$analytics1.actions),
toggleEm: (0, _toggleMark.toggleEmWithAnalytics)(api === null || api === void 0 || (_api$analytics10 = api.analytics) === null || _api$analytics10 === void 0 ? void 0 : _api$analytics10.actions),
toggleStrong: (0, _toggleMark.toggleStrongWithAnalytics)(api === null || api === void 0 || (_api$analytics11 = api.analytics) === null || _api$analytics11 === void 0 ? void 0 : _api$analytics11.actions)
}
};
};