@churchapps/apphelper 0.0.8 → 0.0.10

package/src/components/gallery/StockPhotos.tsx

@@ -1,74 +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>
-
-  </>);
-};
+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/gallery/index.ts

@@ -1 +1 @@
-export { GalleryModal } from "./GalleryModal";
+export { GalleryModal } from "./GalleryModal";

package/src/components/index.tsx

@@ -1,23 +1,23 @@
-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 { SupportModal } from "./SupportModal";
-export { MarkdownEditor } from "./markdownEditor/MarkdownEditor";
-export { MarkdownPreview } from "./markdownEditor/MarkdownPreview";
-
-export * from "./material";
-export * from "./gallery";
-export * from "./markdownEditor";
-export * from "./notes";
-export * from "./reporting";
+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 { SupportModal } from "./SupportModal";
+export { MarkdownEditor } from "./markdownEditor/MarkdownEditor";
+export { MarkdownPreview } from "./markdownEditor/MarkdownPreview";
+
+export * from "./material";
+export * from "./gallery";
+export * from "./markdownEditor";
+export * from "./notes";
+export * from "./reporting";

package/src/components/markdownEditor/Editor.tsx

@@ -1,132 +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;
+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

@@ -1,16 +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>
-}
+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

@@ -1,46 +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>)
-};
+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

@@ -1,14 +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>
-}
+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>
+}