@atlaskit/editor-plugin-toolbar-lists-indentation
Version:
Toolbar lists and indentation plugin for @atlaskit/editor-core
197 lines (196 loc) • 13.7 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.PrimaryToolbarComponent = PrimaryToolbarComponent;
exports.toolbarListsIndentationPlugin = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _hooks = require("@atlaskit/editor-common/hooks");
var _types = require("@atlaskit/editor-common/types");
var _usePluginStateEffect = require("@atlaskit/editor-common/use-plugin-state-effect");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _indentationButtons = require("./pm-plugins/indentation-buttons");
var _types2 = require("./types");
var _ui = _interopRequireDefault(require("./ui"));
var _FloatingToolbarComponent = require("./ui/FloatingToolbarComponent");
var _toolbarComponents = require("./ui/toolbar-components");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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; }
var toolbarListsIndentationPlugin = exports.toolbarListsIndentationPlugin = function toolbarListsIndentationPlugin(_ref) {
var _api$featureFlags;
var config = _ref.config,
api = _ref.api;
var _ref2 = config !== null && config !== void 0 ? config : {},
_ref2$showIndentation = _ref2.showIndentationButtons,
showIndentationButtons = _ref2$showIndentation === void 0 ? false : _ref2$showIndentation,
_ref2$allowHeadingAnd = _ref2.allowHeadingAndParagraphIndentation,
allowHeadingAndParagraphIndentation = _ref2$allowHeadingAnd === void 0 ? false : _ref2$allowHeadingAnd;
var featureFlags = (api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
var isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
var primaryToolbarComponent = function primaryToolbarComponent(_ref3) {
var editorView = _ref3.editorView,
popupsMountPoint = _ref3.popupsMountPoint,
popupsBoundariesElement = _ref3.popupsBoundariesElement,
popupsScrollableElement = _ref3.popupsScrollableElement,
toolbarSize = _ref3.toolbarSize,
disabled = _ref3.disabled,
isToolbarReducedSpacing = _ref3.isToolbarReducedSpacing;
if (!editorView) {
return null;
}
return /*#__PURE__*/_react.default.createElement(PrimaryToolbarComponent, {
featureFlags: featureFlags,
popupsMountPoint: popupsMountPoint,
popupsBoundariesElement: popupsBoundariesElement,
popupsScrollableElement: popupsScrollableElement,
isSmall: toolbarSize < _types.ToolbarSize.L,
isToolbarReducedSpacing: isToolbarReducedSpacing,
disabled: disabled,
editorView: editorView,
showIndentationButtons: showIndentationButtons,
pluginInjectionApi: api,
allowHeadingAndParagraphIndentation: allowHeadingAndParagraphIndentation
});
};
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: api,
showIndentationButtons: showIndentationButtons,
allowHeadingAndParagraphIndentation: allowHeadingAndParagraphIndentation
}));
} else {
var _api$primaryToolbar;
api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
name: 'toolbarListsIndentation',
component: primaryToolbarComponent
});
}
return {
name: 'toolbarListsIndentation',
pluginsOptions: _objectSpread({}, !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 ? 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) {
if (!view) {
return;
}
return /*#__PURE__*/_react.default.createElement(_FloatingToolbarComponent.FloatingToolbarComponent, {
editorView: view,
featureFlags: featureFlags,
pluginInjectionApi: api,
showIndentationButtons: showIndentationButtons,
allowHeadingAndParagraphIndentation: allowHeadingAndParagraphIndentation
});
},
fallback: []
};
return {
rank: 3,
isToolbarAbove: true,
items: [toolbarCustom],
pluginName: 'toolbarListsIndentation'
};
} else {
return undefined;
}
}
}),
primaryToolbarComponent: !isToolbarAIFCEnabled && !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
};
};
function PrimaryToolbarComponent(_ref4) {
var _pluginInjectionApi$l;
var featureFlags = _ref4.featureFlags,
popupsMountPoint = _ref4.popupsMountPoint,
popupsBoundariesElement = _ref4.popupsBoundariesElement,
popupsScrollableElement = _ref4.popupsScrollableElement,
isSmall = _ref4.isSmall,
isToolbarReducedSpacing = _ref4.isToolbarReducedSpacing,
disabled = _ref4.disabled,
editorView = _ref4.editorView,
showIndentationButtons = _ref4.showIndentationButtons,
pluginInjectionApi = _ref4.pluginInjectionApi,
allowHeadingAndParagraphIndentation = _ref4.allowHeadingAndParagraphIndentation;
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionApi, ['list', 'indentation'], function (states) {
var _states$listState, _states$listState2, _states$listState3, _states$listState4, _states$indentationSt, _states$indentationSt2, _states$indentationSt3, _states$listState5;
return {
bulletListActive: (_states$listState = states.listState) === null || _states$listState === void 0 ? void 0 : _states$listState.bulletListActive,
bulletListDisabled: (_states$listState2 = states.listState) === null || _states$listState2 === void 0 ? void 0 : _states$listState2.bulletListDisabled,
orderedListActive: (_states$listState3 = states.listState) === null || _states$listState3 === void 0 ? void 0 : _states$listState3.orderedListActive,
orderedListDisabled: (_states$listState4 = states.listState) === null || _states$listState4 === void 0 ? void 0 : _states$listState4.orderedListDisabled,
isIndentationAllowed: (_states$indentationSt = states.indentationState) === null || _states$indentationSt === void 0 ? void 0 : _states$indentationSt.isIndentationAllowed,
indentDisabled: (_states$indentationSt2 = states.indentationState) === null || _states$indentationSt2 === void 0 ? void 0 : _states$indentationSt2.indentDisabled,
outdentDisabled: (_states$indentationSt3 = states.indentationState) === null || _states$indentationSt3 === void 0 ? void 0 : _states$indentationSt3.outdentDisabled,
// decorationSet is required to re-render PrimaryToolbarComponent component, so that the toolbar states updates regularly
decorationSet: (_states$listState5 = states.listState) === null || _states$listState5 === void 0 ? void 0 : _states$listState5.decorationSet
};
}),
bulletListActive = _useSharedPluginState.bulletListActive,
bulletListDisabled = _useSharedPluginState.bulletListDisabled,
orderedListActive = _useSharedPluginState.orderedListActive,
orderedListDisabled = _useSharedPluginState.orderedListDisabled,
isIndentationAllowed = _useSharedPluginState.isIndentationAllowed,
indentDisabled = _useSharedPluginState.indentDisabled,
outdentDisabled = _useSharedPluginState.outdentDisabled;
var _useState = (0, _react.useState)(),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
taskDecisionState = _useState2[0],
setTaskDecisionState = _useState2[1];
(0, _usePluginStateEffect.usePluginStateEffect)(pluginInjectionApi, ['taskDecision'], function (_ref5) {
var newTaskDecisionState = _ref5.taskDecisionState;
if ((newTaskDecisionState === null || newTaskDecisionState === void 0 ? void 0 : newTaskDecisionState.outdentDisabled) !== (taskDecisionState === null || taskDecisionState === void 0 ? void 0 : taskDecisionState.outdentDisabled) || (newTaskDecisionState === null || newTaskDecisionState === void 0 ? void 0 : newTaskDecisionState.indentDisabled) !== (taskDecisionState === null || taskDecisionState === void 0 ? void 0 : taskDecisionState.indentDisabled) || (newTaskDecisionState === null || newTaskDecisionState === void 0 ? void 0 : newTaskDecisionState.isInsideTask) !== (taskDecisionState === null || taskDecisionState === void 0 ? void 0 : taskDecisionState.isInsideTask)) {
setTaskDecisionState({
isInsideTask: Boolean(newTaskDecisionState === null || newTaskDecisionState === void 0 ? void 0 : newTaskDecisionState.isInsideTask),
indentDisabled: Boolean(newTaskDecisionState === null || newTaskDecisionState === void 0 ? void 0 : newTaskDecisionState.indentDisabled),
outdentDisabled: Boolean(newTaskDecisionState === null || newTaskDecisionState === void 0 ? void 0 : newTaskDecisionState.outdentDisabled)
});
}
});
var toolbarListsIndentationState = (0, _indentationButtons.getIndentationButtonsState)(editorView.state, allowHeadingAndParagraphIndentation, taskDecisionState, {
isIndentationAllowed: isIndentationAllowed,
indentDisabled: indentDisabled,
outdentDisabled: outdentDisabled
}, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$l = pluginInjectionApi.list) === null || _pluginInjectionApi$l === void 0 ? void 0 : _pluginInjectionApi$l.actions.isInsideListItem);
if (bulletListActive === undefined || bulletListDisabled === undefined || orderedListActive === undefined || orderedListDisabled === undefined) {
return null;
}
return /*#__PURE__*/_react.default.createElement(_ui.default, {
featureFlags: featureFlags,
isSmall: isSmall,
isReducedSpacing: isToolbarReducedSpacing,
disabled: disabled,
editorView: editorView,
popupsMountPoint: popupsMountPoint,
popupsBoundariesElement: popupsBoundariesElement,
popupsScrollableElement: popupsScrollableElement,
bulletListActive: bulletListActive,
bulletListDisabled: bulletListDisabled,
orderedListActive: orderedListActive,
orderedListDisabled: orderedListDisabled,
showIndentationButtons: !!showIndentationButtons
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
,
indentDisabled: toolbarListsIndentationState.indentDisabled
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
,
outdentDisabled: toolbarListsIndentationState.outdentDisabled,
indentationStateNode: toolbarListsIndentationState === null || toolbarListsIndentationState === void 0 ? void 0 : toolbarListsIndentationState.node,
pluginInjectionApi: pluginInjectionApi,
toolbarType: _types2.ToolbarType.PRIMARY
});
}