@atlaskit/editor-plugin-toolbar-lists-indentation
Version:
Toolbar lists and indentation plugin for @atlaskit/editor-core
186 lines • 10.4 kB
JavaScript
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 const toolbarListsIndentationPlugin = ({
config,
api
}) => {
var _api$featureFlags;
const {
showIndentationButtons = false,
allowHeadingAndParagraphIndentation = false
} = config !== null && config !== void 0 ? config : {};
const featureFlags = (api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
const isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
const primaryToolbarComponent = ({
editorView,
popupsMountPoint,
popupsBoundariesElement,
popupsScrollableElement,
toolbarSize,
disabled,
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 ? void 0 : (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.registerComponents(getToolbarComponents({
api,
showIndentationButtons,
allowHeadingAndParagraphIndentation
}));
} else {
var _api$primaryToolbar;
api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.actions.registerComponent({
name: 'toolbarListsIndentation',
component: primaryToolbarComponent
});
}
return {
name: 'toolbarListsIndentation',
pluginsOptions: {
...(!isToolbarAIFCEnabled && {
selectionToolbar() {
var _api$userPreferences, _api$userPreferences$, _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
const toolbarDocking = fg('platform_editor_use_preferences_plugin') ? api === null || api === void 0 ? void 0 : (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 ? void 0 : (_api$userPreferences$ = _api$userPreferences.sharedState.currentState()) === null || _api$userPreferences$ === void 0 ? void 0 : _api$userPreferences$.preferences.toolbarDockingPosition : api === null || api === void 0 ? void 0 : (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 ? void 0 : (_api$selectionToolbar2 = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar2 === void 0 ? void 0 : (_api$selectionToolbar3 = _api$selectionToolbar2.currentState()) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.toolbarDocking;
if (toolbarDocking === 'none' && editorExperiment('platform_editor_controls', 'variant1', {
exposure: true
})) {
const toolbarCustom = {
type: 'custom',
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({
featureFlags,
popupsMountPoint,
popupsBoundariesElement,
popupsScrollableElement,
isSmall,
isToolbarReducedSpacing,
disabled,
editorView,
showIndentationButtons,
pluginInjectionApi,
allowHeadingAndParagraphIndentation
}) {
var _pluginInjectionApi$l;
const {
bulletListActive,
bulletListDisabled,
orderedListActive,
orderedListDisabled,
isIndentationAllowed,
indentDisabled,
outdentDisabled
} = useSharedPluginStateWithSelector(pluginInjectionApi, ['list', 'indentation'], 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
};
});
const [taskDecisionState, setTaskDecisionState] = useState();
usePluginStateEffect(pluginInjectionApi, ['taskDecision'], ({
taskDecisionState: newTaskDecisionState
}) => {
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)
});
}
});
const toolbarListsIndentationState = getIndentationButtonsState(editorView.state, allowHeadingAndParagraphIndentation, taskDecisionState, {
isIndentationAllowed,
indentDisabled,
outdentDisabled
}, pluginInjectionApi === null || pluginInjectionApi === void 0 ? 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
});
}