@churchapps/apphelper-markdown
Version:
ChurchApps markdown/lexical editor components
8 lines (7 loc) • 1.48 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ButtonGroup, IconButton, Tooltip } from "@mui/material";
import { FormatAlignLeft, FormatAlignCenter, FormatAlignRight, FormatAlignJustify } from "@mui/icons-material";
import { FORMAT_ELEMENT_COMMAND } from "lexical";
export function AlignmentControls({ editor, elementFormat }) {
return (_jsxs(ButtonGroup, { size: "small", variant: "outlined", children: [_jsx(Tooltip, { title: "Align Left", children: _jsx(IconButton, { onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "left"), className: elementFormat === "left" || elementFormat === "" ? "active" : "", size: "small", children: _jsx(FormatAlignLeft, {}) }) }), _jsx(Tooltip, { title: "Align Center", children: _jsx(IconButton, { onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "center"), className: elementFormat === "center" ? "active" : "", size: "small", children: _jsx(FormatAlignCenter, {}) }) }), _jsx(Tooltip, { title: "Align Right", children: _jsx(IconButton, { onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "right"), className: elementFormat === "right" ? "active" : "", size: "small", children: _jsx(FormatAlignRight, {}) }) }), _jsx(Tooltip, { title: "Justify", children: _jsx(IconButton, { onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "justify"), className: elementFormat === "justify" ? "active" : "", size: "small", children: _jsx(FormatAlignJustify, {}) }) })] }));
}