@churchapps/apphelper-markdown
Version:
ChurchApps markdown/lexical editor components
8 lines (7 loc) • 2.45 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { ButtonGroup, IconButton, Tooltip } from "@mui/material";
import { FormatBold, FormatItalic, FormatUnderlined, StrikethroughS, Superscript, Subscript, Code, FormatClear } from "@mui/icons-material";
import { FORMAT_TEXT_COMMAND } from "lexical";
export function TextFormattingControls({ editor, isBold, isItalic, isUnderline, isStrikethrough, isSuperscript, isSubscript, isCode, onClearFormatting }) {
return (_jsxs(_Fragment, { children: [_jsxs(ButtonGroup, { size: "small", variant: "outlined", children: [_jsx(Tooltip, { title: "Bold", children: _jsx(IconButton, { onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold"), className: isBold ? "active" : "", size: "small", children: _jsx(FormatBold, {}) }) }), _jsx(Tooltip, { title: "Italic", children: _jsx(IconButton, { onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic"), className: isItalic ? "active" : "", size: "small", children: _jsx(FormatItalic, {}) }) }), _jsx(Tooltip, { title: "Underline", children: _jsx(IconButton, { onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline"), className: isUnderline ? "active" : "", size: "small", children: _jsx(FormatUnderlined, {}) }) }), _jsx(Tooltip, { title: "Strikethrough", children: _jsx(IconButton, { onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough"), className: isStrikethrough ? "active" : "", size: "small", children: _jsx(StrikethroughS, {}) }) })] }), _jsxs(ButtonGroup, { size: "small", variant: "outlined", children: [_jsx(Tooltip, { title: "Superscript", children: _jsx(IconButton, { onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "superscript"), className: isSuperscript ? "active" : "", size: "small", children: _jsx(Superscript, {}) }) }), _jsx(Tooltip, { title: "Subscript", children: _jsx(IconButton, { onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "subscript"), className: isSubscript ? "active" : "", size: "small", children: _jsx(Subscript, {}) }) }), _jsx(Tooltip, { title: "Code", children: _jsx(IconButton, { onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code"), className: isCode ? "active" : "", size: "small", children: _jsx(Code, {}) }) }), _jsx(Tooltip, { title: "Clear Formatting", children: _jsx(IconButton, { onClick: onClearFormatting, size: "small", children: _jsx(FormatClear, {}) }) })] })] }));
}