@churchapps/apphelper-markdown
Version:
ChurchApps markdown/lexical editor components
68 lines (67 loc) • 4.08 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ButtonGroup, IconButton, Tooltip } from "@mui/material";
import { FormatListBulleted, FormatListNumbered, FormatQuote, HorizontalRule } from "@mui/icons-material";
import { INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND, $isListNode, ListNode } from "@lexical/list";
import { $getSelection, $isRangeSelection, $createParagraphNode } from "lexical";
import { $setBlocksType } from "@lexical/selection";
import { $createQuoteNode, $isQuoteNode } from "@lexical/rich-text";
import { INSERT_HORIZONTAL_RULE_COMMAND } from "@lexical/react/LexicalHorizontalRuleNode";
import { $getNearestNodeOfType } from "@lexical/utils";
export function ListsAndElementsControls({ editor, blockType }) {
const formatBulletList = () => {
editor.update(() => {
const selection = $getSelection();
if ($isRangeSelection(selection)) {
const anchorNode = selection.anchor.getNode();
const element = anchorNode.getKey() === "root"
? anchorNode
: anchorNode.getTopLevelElementOrThrow();
const parentList = $getNearestNodeOfType(anchorNode, ListNode);
const type = $isListNode(element) ? element.getListType() : parentList?.getListType();
if (type === "bullet") {
editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
}
else {
editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
}
}
});
};
const formatNumberedList = () => {
editor.update(() => {
const selection = $getSelection();
if ($isRangeSelection(selection)) {
const anchorNode = selection.anchor.getNode();
const element = anchorNode.getKey() === "root"
? anchorNode
: anchorNode.getTopLevelElementOrThrow();
const parentList = $getNearestNodeOfType(anchorNode, ListNode);
const type = $isListNode(element) ? element.getListType() : parentList?.getListType();
if (type === "number") {
editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
}
else {
editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
}
}
});
};
const insertQuote = () => {
editor.update(() => {
const selection = $getSelection();
if ($isRangeSelection(selection)) {
const anchorNode = selection.anchor.getNode();
const element = anchorNode.getKey() === "root"
? anchorNode
: anchorNode.getTopLevelElementOrThrow();
if ($isQuoteNode(element)) {
$setBlocksType(selection, () => $createParagraphNode());
}
else {
$setBlocksType(selection, () => $createQuoteNode());
}
}
});
};
return (_jsxs(ButtonGroup, { size: "small", variant: "outlined", children: [_jsx(Tooltip, { title: "Bullet List", children: _jsx(IconButton, { onClick: formatBulletList, className: blockType === "bullet" ? "active" : "", size: "small", children: _jsx(FormatListBulleted, {}) }) }), _jsx(Tooltip, { title: "Numbered List", children: _jsx(IconButton, { onClick: formatNumberedList, className: blockType === "number" ? "active" : "", size: "small", children: _jsx(FormatListNumbered, {}) }) }), _jsx(Tooltip, { title: "Quote", children: _jsx(IconButton, { onClick: insertQuote, className: blockType === "quote" ? "active" : "", size: "small", children: _jsx(FormatQuote, {}) }) }), _jsx(Tooltip, { title: "Horizontal Rule", children: _jsx(IconButton, { onClick: () => editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined), size: "small", children: _jsx(HorizontalRule, {}) }) })] }));
}