@churchapps/apphelper 0.0.1

package/src/components/PersonAdd.tsx

@@ -0,0 +1,75 @@
+import React, { useState } from "react";
+import { ApiHelper } from "../helpers";
+import { PersonInterface } from "../interfaces"
+import { TextField, Button, Table, TableBody, TableRow, TableCell } from "@mui/material";
+import { SmallButton } from "./SmallButton";
+import { CreatePerson } from "./CreatePerson";
+
+interface Props {
+  addFunction: (person: PersonInterface) => void;
+  person?: PersonInterface;
+  getPhotoUrl: (person: PersonInterface) => string;
+  searchClicked?: () => void;
+  filterList?: string[];
+  includeEmail?: boolean;
+  actionLabel?: string;
+  showCreatePersonOnNotFound?: boolean;
+}
+
+export const PersonAdd: React.FC<Props> = ({ addFunction, getPhotoUrl, searchClicked, filterList = [], includeEmail = false, actionLabel, showCreatePersonOnNotFound = false }) => {
+  const [searchResults, setSearchResults] = useState<PersonInterface[]>([]);
+  const [searchText, setSearchText] = useState("");
+  const [hasSearched, setHasSearched] = useState<boolean>(false);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { e.preventDefault(); setHasSearched(false); setSearchText(e.currentTarget.value); }
+  const handleKeyDown = (e: React.KeyboardEvent<any>) => { if (e.key === "Enter") { e.preventDefault(); handleSearch(null); } }
+
+  const handleSearch = (e: React.MouseEvent) => {
+    if (e !== null) e.preventDefault();
+    let term = searchText.trim();
+    ApiHelper.post("/people/search", { term: term }, "MembershipApi")
+      .then((data: PersonInterface[]) => {
+        setHasSearched(true);
+        const filteredResult = data.filter(s => !filterList.includes(s.id))
+        setSearchResults(filteredResult);
+        if (searchClicked) {
+          searchClicked();
+        }
+      });
+  }
+  const handleAdd = (person: PersonInterface) => {
+    let sr: PersonInterface[] = [...searchResults];
+    const idx = sr.indexOf(person);
+    sr.splice(idx, 1);
+    setSearchResults(sr);
+    addFunction(person);
+  }
+
+  //<button className="text-success no-default-style" aria-label="addPerson" data-index={i} onClick={handleAdd}><Icon>person</Icon> Add</button>
+  let rows = [];
+  for (let i = 0; i < searchResults.length; i++) {
+    const sr = searchResults[i];
+
+    rows.push(
+      <TableRow key={sr.id}>
+        <TableCell><img src={getPhotoUrl(sr)} alt="avatar" /></TableCell>
+        <TableCell>{sr.name.display}{includeEmail && (<><br /><i style={{ color: "#999" }}>{sr.contactInfo.email}</i></>)}</TableCell>
+        <TableCell>
+          <SmallButton color="success" icon="person" text={actionLabel || "Add"} ariaLabel="addPerson" onClick={() => handleAdd(sr)} />
+        </TableCell>
+      </TableRow>
+    );
+  }
+
+  return (
+    <>
+      <TextField fullWidth name="personAddText" label="Person" value={searchText} onChange={handleChange} onKeyDown={handleKeyDown}
+        InputProps={{ endAdornment: <Button variant="contained" id="searchButton" data-cy="search-button" onClick={handleSearch}>Search</Button> }}
+      />
+      {showCreatePersonOnNotFound && hasSearched && searchText && searchResults.length === 0 && (
+        <CreatePerson navigateOnCreate={false} onCreate={person => { setSearchText(""); setSearchResults([person]) }} />
+      )}
+      <Table size="small" id="householdMemberAddTable"><TableBody>{rows}</TableBody></Table>
+    </>
+  );
+}

package/src/components/QuestionEdit.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { AnswerInterface, QuestionInterface } from "../interfaces";
+import { Select, MenuItem, SelectChangeEvent, FormControl, InputLabel, TextField } from "@mui/material";
+
+interface Props {
+  answer: AnswerInterface
+  question: QuestionInterface,
+  noBackground?: boolean,
+  changeFunction: (questionId: string, value: string) => void
+}
+
+export const QuestionEdit: React.FC<Props> = ({noBackground = false, ...props}) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | SelectChangeEvent<string>) => {
+    props.changeFunction(props.question.id, e.target.value);
+  }
+  let q = props.question;
+
+  if (q.fieldType === "Heading") return <h5>{q.title}</h5>;
+  else {
+    let input = null;
+    let choiceOptions = [];
+    if (q.choices !== undefined && q.choices !== null) {
+      for (let i = 0; i < q.choices.length; i++) choiceOptions.push(<MenuItem key={i} value={q.choices[i].value}>{q.choices[i].text}</MenuItem>);
+    }
+
+    let answerValue = (props.answer === null) ? "" : props.answer.value
+    switch (q.fieldType) {
+      case "Textbox": input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />; break;
+      case "Multiple Choice": {
+        input = (
+          <FormControl fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}}>
+            <InputLabel>{q.title}</InputLabel>
+            <Select fullWidth label={q.title} value={answerValue} onChange={handleChange}>{choiceOptions}</Select>
+          </FormControl>);
+        break;
+      }
+      case "Yes/No": {
+        input = (
+          <FormControl fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}}>
+            <InputLabel>{q.title}</InputLabel>
+            <Select fullWidth label={q.title} value={answerValue} onChange={handleChange}>
+              <MenuItem value="False">No</MenuItem>
+              <MenuItem value="True">Yes</MenuItem>
+            </Select>
+          </FormControl>);
+        break;
+      }
+      case "Whole Number":
+      case "Decimal":
+        input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} type="number" InputLabelProps={{shrink: true}} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />;
+        break;
+      case "Date": input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} type="date" InputLabelProps={{shrink: true}} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />; break;
+      case "Phone Number": input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} type="number" InputLabelProps={{shrink: true}} label={q.title} placeholder="555-555-5555" value={answerValue} onChange={handleChange} />; break;
+      case "Email": input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} type="email" label={q.title} placeholder="john@doe.com" value={answerValue} onChange={handleChange} />; break;
+      case "Text Area": input = <TextField fullWidth style={noBackground ? {backgroundColor: "white", borderRadius: "4px"} : {}} multiline rows={4} label={q.title} placeholder={q.placeholder} value={answerValue} onChange={handleChange} />; break;
+      default: return null;
+    }
+    return input;
+  }
+
+}
+

package/src/components/SmallButton.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { Button, Icon, Tooltip } from "@mui/material";
+import { Navigate } from "react-router-dom";
+
+interface Props {
+  ariaLabel?: string;
+  text?: string;
+  icon: string;
+  color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning";
+  toolTip?: string;
+  onClick?: (e: React.MouseEvent) => void;
+  href?: string;
+  disabled?: boolean
+}
+
+export const SmallButton = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
+  const [redirectUrl, setRedirectUrl] = React.useState("");
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    if (props.href) setRedirectUrl(props.href);
+    else props.onClick(e);
+  }
+
+  const style = (props.text)
+    ? { backgroundColor: props.color, "& span": { marginRight: 1 } }
+    : { minWidth: "auto", padding: "4px 4px" }
+
+  if (redirectUrl) return <Navigate to={redirectUrl} />
+  else return (
+    <Tooltip title={props.toolTip || ""} arrow placement="top">
+      <Button sx={style} disabled={props.disabled} variant={props.text ? "outlined" : "text"} color={props.color} aria-label={props.ariaLabel || "editButton"} onClick={handleClick} size="small">
+        <Icon>{props.icon}</Icon>{(props.text) ? props.text : ""}
+      </Button>
+    </Tooltip>
+  );
+});
+
+SmallButton.displayName = "SmallButton";

package/src/components/SupportModal.tsx

@@ -0,0 +1,26 @@
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Icon, Stack } from "@mui/material";
+import React from "react";
+
+interface Props {
+  appName?: string
+  onClose: () => void
+}
+
+export const SupportModal: React.FC<Props> = ({ appName = "", onClose }) => {
+  const subject = appName ? `?subject=${appName} Support` : ""
+
+  return (<>
+    <Dialog open={true} onClose={onClose}>
+      <DialogTitle>Get Support</DialogTitle>
+      <DialogContent>
+        <Stack direction="row" alignItems="center" sx={{flexWrap: "wrap"}} mb={2}><b><Stack direction="row" alignItems="center" mr="5px"><Icon sx={{marginRight: "5px"}}>mail</Icon> Email:</Stack></b> <a href={"mailto:support@livecs.org" + subject}>support@livecs.org</a></Stack>
+        <Stack direction="row" alignItems="center" sx={{flexWrap: "wrap"}} mb={2}><b><Stack direction="row" alignItems="center" mr="5px"><Icon sx={{marginRight: "5px"}}>phone_iphone</Icon> Phone:</Stack></b> <a href="tel:+19189942638">+1 (918) 994-2638</a></Stack>
+        <Stack direction="row" alignItems="center" sx={{flexWrap: "wrap"}} mb={2}><b><Stack direction="row" alignItems="center" mr="5px"><Icon sx={{marginRight: "5px"}}>forum</Icon> Messenger:</Stack></b> <a href="https://m.me/livecsolutions" target="_new">https://m.me/livecsolutions</a></Stack>
+        <Stack direction="row" alignItems="center" sx={{flexWrap: "wrap"}}><b><Stack direction="row" alignItems="center" mr="5px"><Icon sx={{marginRight: "5px"}}>info</Icon> Knowledge Base:</Stack></b> <a href="https://support.churchapps.org" target="_new">https://support.churchapps.org</a></Stack>
+      </DialogContent>
+      <DialogActions sx={{ paddingX: "16px", paddingBottom: "12px" }}>
+        <Button variant="outlined" onClick={onClose}>Close</Button>
+      </DialogActions>
+    </Dialog>
+  </>);
+};

package/src/components/TabPanel.tsx

@@ -0,0 +1,34 @@
+import { Box, styled } from "@mui/material";
+import React from "react"
+
+interface Props {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+export const TabPanel: React.FC<Props> = (props: Props) => {
+
+  const { children, value, index } = props;
+  const StyledMenuBox = styled(Box)(
+    ({ theme }) => ({
+      paddingTop: 10,
+      "& .MuiListItemButton-root": { paddingLeft: 30 },
+      "& .MuiListItemIcon-root": {
+        color: theme.palette.primary.main
+      },
+      "& .MuiListItemText-root": { color: theme.palette.text.primary },
+      "& .selected .MuiListItemText-root span": { fontWeight: "bold" }
+    })
+  );
+
+  return (
+    <div role="tabpanel" hidden={value !== index} id={`userMenuPanel-${index}`}>
+      {value === index && (
+        <StyledMenuBox>
+          <Box>{children}</Box>
+        </StyledMenuBox>
+      )}
+    </div>
+  );
+}

package/src/components/gallery/GalleryModal.tsx

@@ -0,0 +1,102 @@
+import { FileHelper, ApiHelper } from "../../helpers";
+import { CommonEnvironmentHelper } from "../../helpers/CommonEnvironmentHelper";
+import { } from "../../helpers";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, FormControl, Grid, InputLabel, MenuItem, Select, Tab, Tabs } from "@mui/material";
+import React, { useState } from "react";
+import { ImageEditor } from "../ImageEditor";
+import { TabPanel } from "../TabPanel";
+import { StockPhotos } from "./StockPhotos";
+
+interface Props {
+  aspectRatio: number,
+  onClose: () => void,
+  onSelect: (img: string) => void
+}
+
+export const GalleryModal: React.FC<Props> = (props: Props) => {
+  const [images, setImages] = useState<string[]>([]);
+  const [tabIndex, setTabIndex] = React.useState(0);
+  const [aspectRatio, setAspectRatio] = React.useState(Math.round(props.aspectRatio * 100) / 100);
+  const [editorPhotoUrl, setEditorPhotoUrl] = React.useState("");
+
+  const handleTabChange = (el: any, newValue: any) => { setTabIndex(newValue); }
+
+  const loadData = () => { ApiHelper.get("/gallery/" + aspectRatio.toString(), "ContentApi").then(data => setImages(data.images)); }
+
+  const handleImageUpdated = async (dataUrl: string) => {
+    const fileName = Math.floor(Date.now() / 1000).toString() + ".jpg"
+    const blob = FileHelper.dataURLtoBlob(dataUrl);
+    const file = new File([blob], "file_name");
+
+    const params = { folder: aspectRatio.toString(), fileName };
+    const presigned = await ApiHelper.post("/gallery/requestUpload", params, "ContentApi");
+    const doUpload = presigned.key !== undefined;
+    if (doUpload) await FileHelper.postPresignedFile(presigned, file, () => { });
+    //return doUpload;
+    setTabIndex(0);
+    loadData();
+  };
+
+  React.useEffect(() => { if (aspectRatio !== props.aspectRatio) setAspectRatio(Math.round(props.aspectRatio * 100) / 100) }, [props.aspectRatio]); //eslint-disable-line
+  React.useEffect(loadData, [aspectRatio]); //eslint-disable-line
+
+  const getImages = () => {
+    let result: JSX.Element[] = [];
+    images.forEach(img => {
+      result.push(<Grid item md={4} xs={12}>
+        <a href="about:blank" onClick={(e) => { e.preventDefault(); props.onSelect(CommonEnvironmentHelper.ContentRoot + "/" + img) }}>
+          <img src={CommonEnvironmentHelper.ContentRoot + "/" + img} className="img-fluid" alt="custom" />
+        </a>
+      </Grid>);
+    })
+    return result;
+  }
+
+  const handleStockSelect = (url: string) => {
+    setEditorPhotoUrl(url);
+    setTabIndex(1);
+  }
+
+  return (<>
+    <Dialog open={true} onClose={props.onClose}>
+      <DialogTitle>Select a Photo</DialogTitle>
+      <DialogContent style={{ minWidth: 600 }}>
+
+        <Tabs variant="fullWidth" value={tabIndex} onChange={handleTabChange}>
+          <Tab label="Gallery" />
+          <Tab label="Upload" />
+          <Tab label="Stock Photos" />
+        </Tabs>
+        <TabPanel value={tabIndex} index={0}>
+          {(props.aspectRatio === 0) && (
+            <FormControl fullWidth>
+              <InputLabel>Aspect Ratio</InputLabel>
+              <Select size="small" label="Aspect Ratio" name="aspectRatio" value={aspectRatio} onChange={(e) => setAspectRatio(parseFloat(e.target.value.toString()))}>
+                <MenuItem value="0">Free Form</MenuItem>
+                <MenuItem value="1">1:1</MenuItem>
+                <MenuItem value="2">2:1</MenuItem>
+                <MenuItem value="4">4:1</MenuItem>
+                <MenuItem value="1.33">4:3</MenuItem>
+                <MenuItem value="1.78">16:9</MenuItem>
+                <MenuItem value="0.5">1:2</MenuItem>
+                <MenuItem value="0.5625">9:16</MenuItem>
+              </Select>
+            </FormControl>
+          )}
+          <Grid container spacing={3} alignItems="center">
+            {getImages()}
+          </Grid>
+        </TabPanel>
+        <TabPanel value={tabIndex} index={1}>
+          <ImageEditor onUpdate={handleImageUpdated} photoUrl={editorPhotoUrl} aspectRatio={aspectRatio} outputWidth={1280} outputHeight={768} hideDelete={true} />
+        </TabPanel>
+        <TabPanel value={tabIndex} index={2}>
+          <StockPhotos aspectRatio={aspectRatio} onSelect={props.onSelect} onStockSelect={handleStockSelect} />
+        </TabPanel>
+      </DialogContent>
+      <DialogActions sx={{ paddingX: "16px", paddingBottom: "12px" }}>
+        <Button variant="outlined" onClick={props.onClose}>Close</Button>
+      </DialogActions>
+    </Dialog>
+  </>);
+};

package/src/components/gallery/StockPhotos.tsx

@@ -0,0 +1,74 @@
+import { Button, Grid, TextField } from "@mui/material";
+import React, { useState } from "react";
+import { ApiHelper } from "../../helpers";
+import { CommonEnvironmentHelper } from "../../helpers/CommonEnvironmentHelper";
+
+interface Props {
+  aspectRatio: number,
+  onSelect: (img: string) => void,
+  onStockSelect: (img: string) => void
+}
+
+interface SearchResult { description: string, url: string, photographer: string, photographerUrl: string, large: string, thumbnail: string }
+
+export const StockPhotos: React.FC<Props> = (props: Props) => {
+  const [images, setImages] = useState<string[]>([]);
+  const [searchText, setSearchText] = useState("");
+  const [searchResults, setSearchResults] = useState<SearchResult[]>(null);
+
+  const loadData = () => { ApiHelper.getAnonymous("/gallery/stock/" + props.aspectRatio.toString(), "ContentApi").then(data => setImages(data.images)); }
+
+  React.useEffect(loadData, [props.aspectRatio]); //eslint-disable-line
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { e.preventDefault(); setSearchText(e.currentTarget.value); }
+
+  const handleSearch = (e: React.MouseEvent) => {
+    if (e !== null) e.preventDefault();
+    let term = searchText.trim();
+    ApiHelper.post("/stock/search", { term: term }, "ContentApi").then((data: SearchResult[]) => { setSearchResults(data) });
+  }
+
+  const getImages = () => {
+    if (searchResults) return getResults();
+    else return getSuggested();
+  }
+
+  const getResults = () => {
+    let result: JSX.Element[] = [];
+    searchResults.forEach(p => {
+      result.push(<Grid item md={4} xs={12}>
+        <a href="about:blank" onClick={(e) => { e.preventDefault(); props.onStockSelect(p.large) }}>
+          <img src={p.thumbnail} className="img-fluid" alt="stock" />
+        </a>
+        <div>
+          <i style={{ fontSize: 12 }}>
+            <a href={p.url} target="_blank" rel="noreferrer noopener">Photo</a> by: <a href={p.photographerUrl} target="_blank" rel="noreferrer noopener">{p.photographer}</a></i>
+        </div>
+      </Grid>);
+    })
+    return result;
+  }
+
+  const getSuggested = () => {
+    let result: JSX.Element[] = [];
+    images.forEach(img => {
+      result.push(<Grid item md={4} xs={12}>
+        <a href="about:blank" onClick={(e) => { e.preventDefault(); props.onSelect(CommonEnvironmentHelper.ContentRoot + "/" + img) }}>
+          <img src={CommonEnvironmentHelper.ContentRoot + "/" + img} className="img-fluid" alt="stock" />
+        </a>
+      </Grid>);
+    })
+    return result;
+  }
+
+  return (<>
+    <TextField fullWidth name="personAddText" label="Search Term" value={searchText} onChange={handleChange}
+      InputProps={{ endAdornment: <Button variant="contained" id="searchButton" data-cy="search-button" onClick={handleSearch}>Search</Button> }}
+    />
+    {searchResults && <div>Stock photos provided by <a href="https://pexels.com">Pexels</a>.</div>}
+    <Grid container spacing={3} alignItems="center">
+      {getImages()}
+    </Grid>
+
+  </>);
+};

package/src/components/index.tsx

@@ -0,0 +1,18 @@
+export { CreatePerson } from "./CreatePerson";
+export { ErrorMessages } from "./ErrorMessages";
+export { ExportLink } from "./ExportLink";
+export { DisplayBox } from "./DisplayBox";
+export { FloatingSupport } from "./FloatingSupport";
+export { FormSubmissionEdit } from "./FormSubmissionEdit";
+export { HelpIcon } from "./HelpIcon";
+export { ImageEditor } from "./ImageEditor";
+export { InputBox } from "./InputBox";
+export { Loading } from "./Loading";
+export { Notes } from "./notes/Notes";
+export { PersonAdd } from "./PersonAdd";
+export { QuestionEdit } from "./QuestionEdit";
+export { SmallButton } from "./SmallButton";
+export { MarkdownEditor } from "./markdownEditor/MarkdownEditor";
+export { MarkdownPreview } from "./markdownEditor/MarkdownPreview";
+
+export * from "./material";

package/src/components/markdownEditor/Editor.tsx

@@ -0,0 +1,132 @@
+import React, {useCallback, useMemo} from "react";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
+import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
+import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin";
+import { LexicalNode } from "lexical";
+import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
+import { TRANSFORMERS, $convertToMarkdownString, $convertFromMarkdownString } from "@lexical/markdown";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { ListItemNode, ListNode } from "@lexical/list";
+import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
+import { AutoLinkNode, LinkNode } from "@lexical/link";
+import { CodeHighlightNode, CodeNode } from "@lexical/code";
+import { theme } from "./theme";
+import { ToolbarPlugin, CustomAutoLinkPlugin, ListMaxIndentLevelPlugin, PLAYGROUND_TRANSFORMERS, ReadOnlyPlugin, ControlledEditorPlugin } from "./plugins";
+import { MarkdownModal } from "./MarkdownModal";
+import CustomLinkNodePlugin from "./plugins/customLink/CustomLinkNodePlugin";
+import { CustomLinkNode } from "./plugins/customLink/CustomLinkNode";
+import EmojisPlugin from "./plugins/emoji/EmojisPlugin";
+import { EmojiNode } from "./plugins/emoji/EmojiNode";
+import EmojiPickerPlugin from "./plugins/emoji/EmojiPickerPlugin";
+
+interface Props {
+  value: string;
+  onChange?: (value: string) => void;
+  mode?: "interactive" | "preview";
+  style?: any;
+  textAlign?: "left" | "center" | "right";
+  placeholder?: string;
+}
+
+function Editor({ value, onChange = () => { }, mode = "interactive", textAlign = "left", style, placeholder = "Enter some text..." }: Props) {
+  const [fullScreen, setFullScreen] = React.useState(false);
+
+  const handleChange = (editorState: any) => {
+    editorState.read(() => {
+      const markdown = $convertToMarkdownString(PLAYGROUND_TRANSFORMERS);
+      onChange(markdown);
+    });
+  };
+
+  const onError = (error: any) => {
+    console.error(error);
+  };
+
+  const handleModalOnChange = (value : string) => {
+    onChange(value);
+  };
+
+  const handleCloseFullScreen = () => {
+    setFullScreen(false);
+  };
+
+  const initialConfig = {
+    editorState: () => $convertFromMarkdownString(value, PLAYGROUND_TRANSFORMERS),
+    namespace: "editor",
+    theme,
+    onError,
+    nodes: [
+      HeadingNode,
+      ListNode,
+      ListItemNode,
+      QuoteNode,
+      CodeNode,
+      CodeHighlightNode,
+      TableNode,
+      TableCellNode,
+      TableRowNode,
+      AutoLinkNode,
+      LinkNode,
+      CustomLinkNode,
+      EmojiNode,
+      {
+        replace: LinkNode,
+        with: (node: LexicalNode) => (
+          new CustomLinkNode(node.__url, node.__target, [])
+        )
+      }
+    ]
+  };
+
+  let textAlignClass = ""
+  switch (textAlign) {
+    case "center":
+      textAlignClass = "text-center"
+      break;
+    case "right":
+      textAlignClass = "text-right"
+      break;
+    case "left":
+    default:
+      textAlignClass = "text-left"
+      break;
+  }
+
+  return (
+    <>
+      <LexicalComposer initialConfig={initialConfig}>
+        <div className={(mode === "preview") ? `editor-container preview ${textAlignClass}` : `editor-container ${textAlignClass}`} style={Object.assign({ border: mode === "preview" ? "none" : "1px solid lightgray" }, style)}>
+          {mode !== "preview" && <ToolbarPlugin goFullScreen={() => { setFullScreen(true) }} />}
+          <div className="editor-inner">
+            {!fullScreen && <RichTextPlugin
+              contentEditable={<ContentEditable className="editor-input" style={{ minHeight: mode === "preview" ? "auto" : "150px" }} />}
+              placeholder={mode !== "preview" ? <div className="editor-placeholder">{placeholder}</div> : null}
+              ErrorBoundary={LexicalErrorBoundary}
+            /> }
+            <CustomLinkNodePlugin />
+            {mode !== "preview" && <EmojiPickerPlugin />}
+            <EmojisPlugin />
+            <OnChangePlugin onChange={handleChange} />
+            {mode !== "preview" && <AutoFocusPlugin />}
+            <HistoryPlugin />
+            <ListPlugin />
+            <CustomAutoLinkPlugin />
+
+            <ListMaxIndentLevelPlugin maxDepth={7} />
+            <ReadOnlyPlugin isDisabled={mode === "preview"} />
+            <ControlledEditorPlugin isFullscreen={fullScreen} value={value} isPreview={mode === "preview"} />
+            <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
+          </div>
+        </div>
+      </LexicalComposer>
+      {fullScreen && <MarkdownModal onChange={handleModalOnChange} value={value} hideModal={handleCloseFullScreen} />}
+    </>
+  );
+}
+
+export default Editor;

package/src/components/markdownEditor/MarkdownEditor.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { lazy, Suspense } from 'react';
+import { Loading } from "../Loading";
+const Editor = lazy(() => import('./Editor'));
+
+interface Props {
+  value: string;
+  onChange?: (newValue: string) => void;
+  style?: any;
+  textAlign?: "left" | "center" | "right";
+  placeholder?: string;
+}
+
+export function MarkdownEditor({ value: markdownString = "", onChange, style, textAlign, placeholder }: Props) {
+  return <Suspense fallback={<Loading />}><Editor value={markdownString} onChange={onChange} style={style} textAlign={textAlign} placeholder={placeholder} /></Suspense>
+}

package/src/components/markdownEditor/MarkdownModal.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect, useState } from "react";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Grid, TextField } from "@mui/material";
+import { MarkdownPreview } from "./MarkdownPreview";
+
+interface Props {
+  hideModal: () => void
+  onChange: (newValue: string) => void
+  value?: string;
+}
+
+const guideLink = <a href="https://www.markdownguide.org/cheat-sheet/" target="_blank" rel="noopener noreferrer" style={{ float: "right" }}>Markdown Guide</a>;
+
+
+export const MarkdownModal: React.FC<Props> = ({ 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 (<Dialog open={true} onClose={() => { hideModal() }} fullScreen={true}>
+    <DialogTitle>Markdown Editor</DialogTitle>
+    <DialogContent>
+      <Grid container spacing={3}>
+        <Grid item xs={6}>
+          <TextField fullWidth multiline label={<>Content &nbsp; {guideLink}</>} name="modalMarkdown" className="modalMarkdown" InputProps={{ style: { height: "80vh" } }} value={inputVal} onChange={(e) => {
+            setInputVal(e.target.value);
+          }} placeholder="" />
+        </Grid>
+        <Grid item xs={6}>
+          <div style={{ border: "1px solid #BBB", borderRadius: 5, marginTop: 15, padding: 10, height: "80vh", overflowY: "scroll" }} id="markdownPreview">
+            <div style={{ marginTop: -20, marginBottom: -10, position: "absolute" }}><span style={{ backgroundColor: "#FFFFFF", color: "#999", fontSize: 13 }}> &nbsp; Preview &nbsp; </span></div>
+            <MarkdownPreview value={inputVal} />
+          </div>
+        </Grid>
+      </Grid>
+    </DialogContent>
+    <DialogActions sx={{ paddingX: "16px", paddingBottom: "12px" }}>
+      <Button variant="outlined" onClick={() => { hideModal() }}>Close</Button>
+    </DialogActions>
+  </Dialog>)
+};

package/src/components/markdownEditor/MarkdownPreview.tsx

@@ -0,0 +1,14 @@
+import React, { Suspense } from "react";
+import { lazy } from 'react';
+const Editor = lazy(() => import('./Editor'));
+
+interface Props {
+  value: string;
+  textAlign?: "left" | "center" | "right"
+}
+
+export function MarkdownPreview({ value: markdownString = "", textAlign }: Props) {
+  return <Suspense fallback={<div>{markdownString || ""}</div>}>
+    <Editor mode="preview" value={markdownString || ""} textAlign={textAlign} />
+  </Suspense>
+}