@churchapps/apphelper 0.0.9 → 0.0.11

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>
+}