@atlaskit/editor-plugin-toolbar-lists-indentation
Version:
Toolbar lists and indentation plugin for @atlaskit/editor-core
96 lines (95 loc) • 7.54 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.FloatingToolbarComponent = FloatingToolbarComponent;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _hooks = require("@atlaskit/editor-common/hooks");
var _usePluginStateEffect = require("@atlaskit/editor-common/use-plugin-state-effect");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _indentationButtons = require("../pm-plugins/indentation-buttons");
var _types = require("../types");
var _index = _interopRequireDefault(require("./index"));
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); }
var FloatingToolbarSettings = {
disabled: false,
isToolbarReducedSpacing: true,
isSmall: true
};
function FloatingToolbarComponent(_ref) {
var _pluginInjectionApi$l;
var featureFlags = _ref.featureFlags,
editorView = _ref.editorView,
showIndentationButtons = _ref.showIndentationButtons,
pluginInjectionApi = _ref.pluginInjectionApi,
allowHeadingAndParagraphIndentation = _ref.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 (_ref2) {
var newTaskDecisionState = _ref2.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(_index.default, {
featureFlags: featureFlags,
isSmall: FloatingToolbarSettings.isSmall,
isReducedSpacing: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? false : FloatingToolbarSettings.isToolbarReducedSpacing,
disabled: FloatingToolbarSettings.disabled,
editorView: editorView,
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: _types.ToolbarType.FLOATING
});
}