@atlaskit/editor-plugin-toolbar-lists-indentation
Version:
Toolbar lists and indentation plugin for @atlaskit/editor-core
75 lines • 4.14 kB
JavaScript
import React, { useState } from 'react';
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
import { usePluginStateEffect } from '@atlaskit/editor-common/use-plugin-state-effect';
import { getIndentationButtonsState } from '../pm-plugins/indentation-buttons';
import { ToolbarType } from '../types';
import ToolbarListsIndentation from './index';
const FloatingToolbarSettings = {
disabled: false,
isToolbarReducedSpacing: true,
isSmall: true
};
export function FloatingToolbarComponent({
featureFlags,
editorView,
showIndentationButtons,
pluginInjectionApi,
allowHeadingAndParagraphIndentation
}) {
var _pluginInjectionApi$l;
const {
listState,
indentationState
} = useSharedPluginState(pluginInjectionApi, ['list', 'indentation']);
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, indentationState, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$l = pluginInjectionApi.list) === null || _pluginInjectionApi$l === void 0 ? void 0 : _pluginInjectionApi$l.actions.isInsideListItem);
if (!listState) {
return null;
}
return /*#__PURE__*/React.createElement(ToolbarListsIndentation, {
featureFlags: featureFlags,
isSmall: FloatingToolbarSettings.isSmall,
isReducedSpacing: FloatingToolbarSettings.isToolbarReducedSpacing,
disabled: FloatingToolbarSettings.disabled,
editorView: editorView
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
,
bulletListActive: listState.bulletListActive
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
,
bulletListDisabled: listState.bulletListDisabled
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
,
orderedListActive: listState.orderedListActive
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
,
orderedListDisabled: listState.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.FLOATING
});
}