@atlaskit/editor-plugin-toolbar-lists-indentation
Version:
Toolbar lists and indentation plugin for @atlaskit/editor-core
187 lines • 12.5 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
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, { useState } from 'react';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { ToolbarSize } from '@atlaskit/editor-common/types';
import { usePluginStateEffect } from '@atlaskit/editor-common/use-plugin-state-effect';
import { fg } from '@atlaskit/platform-feature-flags';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { getIndentationButtonsState } from './pm-plugins/indentation-buttons';
import { ToolbarType } from './types';
import ToolbarListsIndentation from './ui';
import { FloatingToolbarComponent } from './ui/FloatingToolbarComponent';
import { getToolbarComponents } from './ui/toolbar-components';
export var 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.createElement(PrimaryToolbarComponent, {
featureFlags: featureFlags,
popupsMountPoint: popupsMountPoint,
popupsBoundariesElement: popupsBoundariesElement,
popupsScrollableElement: popupsScrollableElement,
isSmall: toolbarSize < 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(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 = 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' && editorExperiment('platform_editor_controls', 'variant1', {
exposure: true
})) {
var toolbarCustom = {
type: 'custom',
render: function render(view) {
if (!view) {
return;
}
return /*#__PURE__*/React.createElement(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
};
};
export 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 = 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 = useState(),
_useState2 = _slicedToArray(_useState, 2),
taskDecisionState = _useState2[0],
setTaskDecisionState = _useState2[1];
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 = 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.createElement(ToolbarListsIndentation, {
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: ToolbarType.PRIMARY
});
}