@churchapps/apphelper 0.1.3 → 0.1.4

package/src/components/iconPicker/IconPicker.tsx

@@ -1,153 +1,153 @@
-import * as React from "react";
-import { styled, Icon, InputBase, Typography, debounce, Grid, IconButton, Pagination, Stack } from "@mui/material";
-import MuiPaper from "@mui/material/Paper";
-import IconNamesList from "./IconNamesList"
-
-const UPDATE_SEARCH_INDEX_WAIT_MS = 220;
-
-const FlexSearch = require("flexsearch");
-const StyledIconSpan = styled("span")(({ theme }) => ({
-  display: "inline-flex",
-  flexDirection: "column",
-  color: theme.palette.text.secondary,
-  margin: "0 4px",
-  "& > div": {
-    display: "flex"
-  },
-  "& > div > *": {
-    flexGrow: 1,
-    fontSize: ".6rem",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    textAlign: "center",
-    width: 0
-  }
-}));
-
-const StyledIcon: any = styled(Icon)(({ theme }) => ({
-  boxSizing: "content-box",
-  cursor: "pointer",
-  color: theme.palette.text.primary,
-  borderRadius: theme.shape.borderRadius,
-  transition: theme.transitions.create(["background-color", "box-shadow"], {
-    duration: theme.transitions.duration.shortest
-  }),
-  padding: theme.spacing(1),
-  margin: theme.spacing(0.5, 0),
-  "&:hover": {
-    backgroundColor: theme.palette.background.paper,
-    boxShadow: theme.shadows[1]
-  }
-}));
-
-const Icons = React.memo(function Icons(props: { icons: string[]; handleOpenClick: (name: string) => void; }) {
-  const { icons, handleOpenClick } = props;
-
-  const handleIconClick = (name: string) => {
-    const camel = name.substring(0, 1).toLocaleLowerCase() + name.substring(1, name.length);
-    const underscored = camel.replace(/[A-Z]/g, m => "_" + m.toLowerCase());
-    handleOpenClick(underscored)
-  }
-
-  return (
-    <div>
-      {icons.map((icon) => (
-        <StyledIconSpan key={icon}>
-          <StyledIcon tabIndex={-1} sx={{ fontSize: "34px !important" }} onClick={() => { handleIconClick(icon) }}>
-            {icon}
-          </StyledIcon>
-        </StyledIconSpan>
-      ))}
-    </div>
-  );
-});
-
-const Paper = styled(MuiPaper)(({ theme }) => ({ padding: "2px 4px", display: "flex", alignItems: "center", marginBottom: theme.spacing(2), width: "100%" }));
-
-const Input = styled(InputBase)({ marginLeft: 8, flex: 1 });
-
-const searchIndex = new FlexSearch.Index({ tokenize: "full" });
-
-function createSearchIndex() {
-  // create component names from icons list
-  const iconsAndComponentNames = IconNamesList.map(icon => {
-    const split = icon.split("_");
-    const capitalizedSplit = split.map(s => {
-      if (isAlphabet(s[0])) {
-        s = s[0].toUpperCase() + s.slice(1)
-      }
-      return s
-    })
-    return {
-      iconName: icon,
-      componentName: capitalizedSplit.join("")
-    };
-  })
-
-  // create search index
-  iconsAndComponentNames.forEach(icon => {
-    let searchTerm = icon.iconName + " " + icon.componentName;
-
-    searchIndex.addAsync(icon.iconName, searchTerm)
-  })
-
-}
-
-function isAlphabet(character: string) {
-  return /[a-zA-Z]/.test(character);
-}
-
-createSearchIndex();
-
-type Props = {
-  onSelect: (iconName: string) => void;
-};
-
-const defaultIcons = ["person", "group", "groups", "contact_mail", "mail", "church", "favorite", "volunteer_activism", "link", "home", "apps", "web", "public", "rss_feed", "videocam", "live_tv", "music_note", "menu_book", "star", "accessible", "woman", "man", "child_care", "handshake", "location_on", "restaurant", "local_cafe" ];
-
-export function IconPicker(props: Props) {
-  const pageSize = 27;
-  const [keys, setKeys] = React.useState<any[] | null>(null);
-  const [query, setQuery] = React.useState("");
-  const [page, setPage] = React.useState(1);
-
-  const updateSearchResults = React.useMemo(
-    () =>
-      debounce((value) => {
-        if (value === "") setKeys(defaultIcons);
-        else searchIndex.searchAsync(value, { limit: 3000 }).then((results: any) => { setKeys(results); setPage(1); });
-      }, UPDATE_SEARCH_INDEX_WAIT_MS),
-    []
-  );
-
-  React.useEffect(() => { updateSearchResults(query); return () => { updateSearchResults.clear(); }; }, [query, updateSearchResults]);
-
-  function paged<T>(array: Array<T>, p: number) {
-    return array.slice((p - 1) * pageSize, p * pageSize);
-  }
-
-  const icons = keys || IconNamesList;
-
-  const pagesCount = Math.ceil(icons.length / pageSize);
-
-  return (
-    <Grid container sx={{ minHeight: 360, padding: "16px" }}>
-      <Grid item>
-        <Paper>
-          <IconButton sx={{ padding: "10px" }} aria-label="search">
-            <Icon>search</Icon>
-          </IconButton>
-          <Input autoFocus value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Search icons…" inputProps={{ "aria-label": "search icons" }} />
-        </Paper>
-        {(query === "") && <Typography sx={{ mb: 1 }}>{`${IconNamesList.length} icons available`}</Typography>}
-        {(query !== "") && <Typography sx={{ mb: 1 }}>{`${icons.length} matching results`}</Typography>}
-
-        <Icons icons={paged(icons, page)} handleOpenClick={props.onSelect} />
-      </Grid>
-
-      <Stack spacing={2} sx={{ margin: "0 auto" }}>
-        <Pagination count={pagesCount} page={page} onChange={(_, p) => setPage(p)} size="small" />
-      </Stack>
-    </Grid>
-  );
-}
+import * as React from "react";
+import { styled, Icon, InputBase, Typography, debounce, Grid, IconButton, Pagination, Stack } from "@mui/material";
+import MuiPaper from "@mui/material/Paper";
+import IconNamesList from "./IconNamesList"
+
+const UPDATE_SEARCH_INDEX_WAIT_MS = 220;
+
+const FlexSearch = require("flexsearch");
+const StyledIconSpan = styled("span")(({ theme }) => ({
+  display: "inline-flex",
+  flexDirection: "column",
+  color: theme.palette.text.secondary,
+  margin: "0 4px",
+  "& > div": {
+    display: "flex"
+  },
+  "& > div > *": {
+    flexGrow: 1,
+    fontSize: ".6rem",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    textAlign: "center",
+    width: 0
+  }
+}));
+
+const StyledIcon: any = styled(Icon)(({ theme }) => ({
+  boxSizing: "content-box",
+  cursor: "pointer",
+  color: theme.palette.text.primary,
+  borderRadius: theme.shape.borderRadius,
+  transition: theme.transitions.create(["background-color", "box-shadow"], {
+    duration: theme.transitions.duration.shortest
+  }),
+  padding: theme.spacing(1),
+  margin: theme.spacing(0.5, 0),
+  "&:hover": {
+    backgroundColor: theme.palette.background.paper,
+    boxShadow: theme.shadows[1]
+  }
+}));
+
+const Icons = React.memo(function Icons(props: { icons: string[]; handleOpenClick: (name: string) => void; }) {
+  const { icons, handleOpenClick } = props;
+
+  const handleIconClick = (name: string) => {
+    const camel = name.substring(0, 1).toLocaleLowerCase() + name.substring(1, name.length);
+    const underscored = camel.replace(/[A-Z]/g, m => "_" + m.toLowerCase());
+    handleOpenClick(underscored)
+  }
+
+  return (
+    <div>
+      {icons.map((icon) => (
+        <StyledIconSpan key={icon}>
+          <StyledIcon tabIndex={-1} sx={{ fontSize: "34px !important" }} onClick={() => { handleIconClick(icon) }}>
+            {icon}
+          </StyledIcon>
+        </StyledIconSpan>
+      ))}
+    </div>
+  );
+});
+
+const Paper = styled(MuiPaper)(({ theme }) => ({ padding: "2px 4px", display: "flex", alignItems: "center", marginBottom: theme.spacing(2), width: "100%" }));
+
+const Input = styled(InputBase)({ marginLeft: 8, flex: 1 });
+
+const searchIndex = new FlexSearch.Index({ tokenize: "full" });
+
+function createSearchIndex() {
+  // create component names from icons list
+  const iconsAndComponentNames = IconNamesList.map(icon => {
+    const split = icon.split("_");
+    const capitalizedSplit = split.map(s => {
+      if (isAlphabet(s[0])) {
+        s = s[0].toUpperCase() + s.slice(1)
+      }
+      return s
+    })
+    return {
+      iconName: icon,
+      componentName: capitalizedSplit.join("")
+    };
+  })
+
+  // create search index
+  iconsAndComponentNames.forEach(icon => {
+    let searchTerm = icon.iconName + " " + icon.componentName;
+
+    searchIndex.addAsync(icon.iconName, searchTerm)
+  })
+
+}
+
+function isAlphabet(character: string) {
+  return /[a-zA-Z]/.test(character);
+}
+
+createSearchIndex();
+
+type Props = {
+  onSelect: (iconName: string) => void;
+};
+
+const defaultIcons = ["person", "group", "groups", "contact_mail", "mail", "church", "favorite", "volunteer_activism", "link", "home", "apps", "web", "public", "rss_feed", "videocam", "live_tv", "music_note", "menu_book", "star", "accessible", "woman", "man", "child_care", "handshake", "location_on", "restaurant", "local_cafe" ];
+
+export function IconPicker(props: Props) {
+  const pageSize = 27;
+  const [keys, setKeys] = React.useState<any[] | null>(null);
+  const [query, setQuery] = React.useState("");
+  const [page, setPage] = React.useState(1);
+
+  const updateSearchResults = React.useMemo(
+    () =>
+      debounce((value) => {
+        if (value === "") setKeys(defaultIcons);
+        else searchIndex.searchAsync(value, { limit: 3000 }).then((results: any) => { setKeys(results); setPage(1); });
+      }, UPDATE_SEARCH_INDEX_WAIT_MS),
+    []
+  );
+
+  React.useEffect(() => { updateSearchResults(query); return () => { updateSearchResults.clear(); }; }, [query, updateSearchResults]);
+
+  function paged<T>(array: Array<T>, p: number) {
+    return array.slice((p - 1) * pageSize, p * pageSize);
+  }
+
+  const icons = keys || IconNamesList;
+
+  const pagesCount = Math.ceil(icons.length / pageSize);
+
+  return (
+    <Grid container sx={{ minHeight: 360, padding: "16px" }}>
+      <Grid item>
+        <Paper>
+          <IconButton sx={{ padding: "10px" }} aria-label="search">
+            <Icon>search</Icon>
+          </IconButton>
+          <Input autoFocus value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Search icons…" inputProps={{ "aria-label": "search icons" }} />
+        </Paper>
+        {(query === "") && <Typography sx={{ mb: 1 }}>{`${IconNamesList.length} icons available`}</Typography>}
+        {(query !== "") && <Typography sx={{ mb: 1 }}>{`${icons.length} matching results`}</Typography>}
+
+        <Icons icons={paged(icons, page)} handleOpenClick={props.onSelect} />
+      </Grid>
+
+      <Stack spacing={2} sx={{ margin: "0 auto" }}>
+        <Pagination count={pagesCount} page={page} onChange={(_, p) => setPage(p)} size="small" />
+      </Stack>
+    </Grid>
+  );
+}

package/src/components/index.tsx

@@ -1,24 +1,24 @@
-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 { IconPicker } from "./iconPicker/IconPicker";
-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 "./wrapper";
-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 { IconPicker } from "./iconPicker/IconPicker";
+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 "./wrapper";
+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>
+}