@atlaskit/editor-plugin-toolbar-lists-indentation
Version:
Toolbar lists and indentation plugin for @atlaskit/editor-core
57 lines • 3.16 kB
JavaScript
import React from 'react';
import { useIntl } from 'react-intl';
import { outdent as toggleOutdentKeymap, formatShortcut } from '@atlaskit/editor-common/keymaps';
import { indentationMessages } from '@atlaskit/editor-common/messages';
import { getInputMethodFromParentKeys, useEditorToolbar } from '@atlaskit/editor-common/toolbar';
import { OutdentIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
import { useIndentationState } from '../utils/hooks';
export var OutdentMenuItem = function OutdentMenuItem(_ref) {
var api = _ref.api,
allowHeadingAndParagraphIndentation = _ref.allowHeadingAndParagraphIndentation,
showIndentationButtons = _ref.showIndentationButtons,
parents = _ref.parents;
var _useIntl = useIntl(),
formatMessage = _useIntl.formatMessage;
var _useEditorToolbar = useEditorToolbar(),
editorView = _useEditorToolbar.editorView;
var indentationState = useIndentationState({
api: api,
allowHeadingAndParagraphIndentation: allowHeadingAndParagraphIndentation,
state: editorView === null || editorView === void 0 ? void 0 : editorView.state
});
if (!showIndentationButtons) {
return null;
}
var onClick = function onClick() {
var inputMethod = getInputMethodFromParentKeys(parents);
var node = indentationState === null || indentationState === void 0 ? void 0 : indentationState.node;
if (node === 'paragraph_heading') {
if (editorView !== null && editorView !== void 0 && editorView.state) {
var _api$indentation;
api === null || api === void 0 || (_api$indentation = api.indentation) === null || _api$indentation === void 0 || _api$indentation.actions.outdentParagraphOrHeading(inputMethod)(editorView === null || editorView === void 0 ? void 0 : editorView.state, editorView === null || editorView === void 0 ? void 0 : editorView.dispatch);
}
}
if (node === 'list') {
api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.list.commands.outdentList(inputMethod));
}
if (node === 'taskList') {
if (editorView !== null && editorView !== void 0 && editorView.state) {
var _api$taskDecision;
api === null || api === void 0 || (_api$taskDecision = api.taskDecision) === null || _api$taskDecision === void 0 || _api$taskDecision.actions.outdentTaskList(inputMethod)(editorView === null || editorView === void 0 ? void 0 : editorView.state, editorView === null || editorView === void 0 ? void 0 : editorView.dispatch);
}
}
};
var shortcut = formatShortcut(toggleOutdentKeymap);
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
elemBefore: /*#__PURE__*/React.createElement(OutdentIcon, {
size: "small",
label: ""
}),
elemAfter: shortcut ? /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
shortcut: shortcut
}) : undefined,
isDisabled: indentationState === null || indentationState === void 0 ? void 0 : indentationState.outdentDisabled,
ariaKeyshortcuts: shortcut,
onClick: onClick
}, formatMessage(indentationMessages.outdent));
};