added empty editor view and rich editor switch

src/modules/editor/containers/MarkdownEditorContainer/index.tsx

@@ -1,35 +1,50 @@
-import { FC } from "react";
+import { FC, Suspense, lazy } from "react";
 import { ReactMarkdownEditor } from "../../components/ReactMarkdownEditor";
 import { ReactMarkdownViewer } from "../../components/ReactMarkdownViewer";
 import { usePersistedValue } from "./hooks/usePersistedValue";
 import styles from "./styles.module.scss";
+import { useSettings } from "~/modules/settings/context/SettingsContext";
+import { EmptyViewer } from "../../components/EmptyViewer";
 
 interface MarkdownEditorContainerProps {
   id: string;
   locked: boolean;
+  startEditing: () => void;
 }
 
+const RichEditor = lazy(() =>
+  import("../../components/RemirrorEditor").then((module) => ({
+    default: module.RemirrorEditor,
+  }))
+);
+
 export const MarkdownEditorContainer: FC<MarkdownEditorContainerProps> = ({
   id,
   locked,
+  startEditing,
 }) => {
+  const {
+    settings: { richEditorEnabled },
+  } = useSettings();
+
   const [value, setValue] = usePersistedValue(id, "MarkdownEditorContainer");
 
+  const empty = !value.trim();
+
+  const viewer = empty ? (
+    <EmptyViewer startEditing={startEditing} />
+  ) : (
+    <ReactMarkdownViewer value={value} />
+  );
+
+  const editor = richEditorEnabled ? (
+    <RichEditor value={value} onChange={setValue} locked={locked} />
+  ) : (
+    <ReactMarkdownEditor value={value} onChange={setValue} />
+  );
   return (
     <div className={styles.editor}>
-      {/*
-      locked ? (
-        <ReactMarkdownViewer value={value} />
-      ) : (
-        <ReactMarkdownEditor value={value} onChange={setValue} />
-      )
-      */}
-      {locked ? (
-        <ReactMarkdownViewer value={value} />
-      ) : (
-        <ReactMarkdownEditor value={value} onChange={setValue} />
-        // <RemirrorEditor value={value} onChange={setValue} locked={locked} />
-      )}
+      <Suspense>{locked ? viewer : editor}</Suspense>
     </div>
   );
 };