@churchapps/apphelper-markdown
Version:
ChurchApps markdown/lexical editor components
20 lines (19 loc) • 2.29 kB
JavaScript
"use client";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from "react";
import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Grid, TextField } from "@mui/material";
import { MarkdownPreview } from "./MarkdownPreview";
import { Locale } from "@churchapps/apphelper";
const guideLink = _jsx("a", { href: "https://www.markdownguide.org/cheat-sheet/", target: "_blank", rel: "noopener noreferrer", style: { float: "right" }, children: Locale.label("markdownEditor.markdownGuide") });
export const MarkdownModal = ({ value, onChange, hideModal }) => {
const [inputVal, setInputVal] = useState(value);
useEffect(() => {
if (value.trim() === inputVal.trim())
return;
setInputVal(value);
}, [value, inputVal]);
useEffect(() => { onChange(inputVal); }, [inputVal, onChange]);
return (_jsxs(Dialog, { open: true, onClose: () => { hideModal(); }, fullScreen: true, children: [_jsx(DialogTitle, { children: Locale.label("markdownEditor.markdownGuide") }), _jsx(DialogContent, { children: _jsxs(Grid, { container: true, spacing: 3, children: [_jsx(Grid, { size: 6, children: _jsx(TextField, { fullWidth: true, multiline: true, label: _jsxs(_Fragment, { children: [Locale.label("markdownEditor.content"), " \u00A0 ", guideLink] }), name: "modalMarkdown", className: "modalMarkdown", InputProps: { style: { height: "80vh" } }, value: inputVal, onChange: (e) => {
setInputVal(e.target.value);
}, placeholder: "" }) }), _jsx(Grid, { size: 6, children: _jsxs("div", { style: { border: "1px solid #BBB", borderRadius: 5, marginTop: 15, padding: 10, height: "80vh", overflowY: "scroll" }, id: "markdownPreview", children: [_jsx("div", { style: { marginTop: -20, marginBottom: -10, position: "absolute" }, children: _jsx("span", { style: { backgroundColor: "#FFFFFF", color: "#999", fontSize: 13 }, children: " \u00A0 Preview \u00A0 " }) }), _jsx(MarkdownPreview, { value: inputVal })] }) })] }) }), _jsx(DialogActions, { sx: { paddingX: "16px", paddingBottom: "12px" }, children: _jsx(Button, { variant: "outlined", onClick: () => { hideModal(); }, children: Locale.label("common.close") }) })] }));
};