@churchapps/apphelper-markdown
Version:
ChurchApps markdown/lexical editor components
26 lines (25 loc) • 2.64 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { Box, IconButton, MenuItem, Popover, Select, Tooltip } from "@mui/material";
import { FormatSize } from "@mui/icons-material";
const FONT_SIZES = [
"12px", "14px", "16px", "18px", "20px", "24px", "28px", "32px", "36px", "48px"
];
export function BlockAndFontControls({ blockType, onFormatHeading, onFormatParagraph, onFormatCode, onApplyFontSize }) {
const [fontSizeAnchor, setFontSizeAnchor] = useState(null);
// Normalize block type to a valid dropdown value
// When in lists (bullet/number) or quotes, show "Normal" as the base block type
const validBlockTypes = [
"paragraph", "h1", "h2", "h3", "h4", "h5", "h6", "code"
];
const normalizedBlockType = validBlockTypes.includes(blockType) ? blockType : "paragraph";
return (_jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [_jsxs(Select, { value: normalizedBlockType, size: "small", sx: { minWidth: 100 }, onChange: (e) => {
const value = e.target.value;
if (value === "paragraph")
return onFormatParagraph();
if (value === "code")
return onFormatCode();
if (["h1", "h2", "h3", "h4", "h5", "h6"].includes(value))
return onFormatHeading(value);
}, children: [_jsx(MenuItem, { value: "paragraph", children: "Normal" }), _jsx(MenuItem, { value: "h1", children: "Heading 1" }), _jsx(MenuItem, { value: "h2", children: "Heading 2" }), _jsx(MenuItem, { value: "h3", children: "Heading 3" }), _jsx(MenuItem, { value: "h4", children: "Heading 4" }), _jsx(MenuItem, { value: "h5", children: "Heading 5" }), _jsx(MenuItem, { value: "h6", children: "Heading 6" }), _jsx(MenuItem, { value: "code", children: "Code Block" })] }), _jsx(Tooltip, { title: "Font Size", children: _jsx(IconButton, { onClick: (e) => setFontSizeAnchor(e.currentTarget), size: "small", children: _jsx(FormatSize, {}) }) }), _jsx(Popover, { open: Boolean(fontSizeAnchor), anchorEl: fontSizeAnchor, onClose: () => setFontSizeAnchor(null), anchorOrigin: { vertical: "bottom", horizontal: "left" }, disableAutoFocus: true, disableEnforceFocus: true, disableRestoreFocus: true, children: _jsx(Box, { sx: { p: 1 }, onMouseDown: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: FONT_SIZES.map(size => (_jsx(MenuItem, { onClick: () => { onApplyFontSize(size); setFontSizeAnchor(null); }, children: size }, size))) }) })] }));
}