@atlaskit/editor-plugin-toolbar-lists-indentation
Version:
Toolbar lists and indentation plugin for @atlaskit/editor-core
58 lines • 3.3 kB
JavaScript
import React from 'react';
import { useIntl } from 'react-intl';
import { indent as toggleIndentKeymap, formatShortcut } from '@atlaskit/editor-common/keymaps';
import { indentationMessages } from '@atlaskit/editor-common/messages';
import { getInputMethodFromParentKeys, useEditorToolbar } from '@atlaskit/editor-common/toolbar';
import { IndentIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
import { useIndentationState } from '../utils/hooks';
export var IndentMenuItem = function IndentMenuItem(_ref) {
var api = _ref.api,
showIndentationButtons = _ref.showIndentationButtons,
allowHeadingAndParagraphIndentation = _ref.allowHeadingAndParagraphIndentation,
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.indentParagraphOrHeading(inputMethod)(editorView === null || editorView === void 0 ? void 0 : editorView.state, editorView === null || editorView === void 0 ? void 0 : editorView.dispatch);
}
}
if (node === 'list') {
var _api$core, _api$list;
api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$list = api.list) === null || _api$list === void 0 ? void 0 : _api$list.commands.indentList(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.indentTaskList(inputMethod)(editorView === null || editorView === void 0 ? void 0 : editorView.state, editorView === null || editorView === void 0 ? void 0 : editorView.dispatch);
}
}
};
var shortcut = formatShortcut(toggleIndentKeymap);
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
elemBefore: /*#__PURE__*/React.createElement(IndentIcon, {
size: "small",
label: ""
}),
elemAfter: shortcut ? /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
shortcut: shortcut
}) : undefined,
isDisabled: indentationState === null || indentationState === void 0 ? void 0 : indentationState.indentDisabled,
ariaKeyshortcuts: shortcut,
onClick: onClick
}, formatMessage(indentationMessages.indent));
};