added empty editor view and rich editor switch

src/modules/editor/components/EmptyViewer/index.tsx

@@ -0,0 +1,25 @@
+import { FC } from "react";
+import styles from "./styles.module.scss";
+import { useContainerPaddings } from "~/modules/theme/hooks/useContainerPaddings";
+
+interface EmptyViewerProps {
+  startEditing?: () => void;
+}
+
+const EmptyViewer: FC<EmptyViewerProps> = ({ startEditing }) => {
+  const style = useContainerPaddings();
+
+  return (
+    <div className={styles.empty} style={style}>
+      <div className={styles.title}>Nothing's here</div>
+      <div>
+        <small>
+          <a href="javascript:void();" onClick={startEditing}>
+            start editing
+          </a>
+        </small>
+      </div>
+    </div>
+  );
+};
+export { EmptyViewer };

src/modules/editor/components/EmptyViewer/styles.module.scss

@@ -0,0 +1,19 @@
+.empty {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  box-sizing: border-box;
+  opacity: 0;
+  transition: opacity 0.25s;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.title {
+  opacity: 0.5;
+}

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>
   );
 };

src/modules/layout/components/GridLayout/index.tsx

@@ -63,6 +63,7 @@ const DefaultLayout = ({
         id: panelProps.api.id,
         title: panelProps.params.title,
         locked,
+        startEditing: lock,
       })}
     </GridLayoutItemWrapper>
   );
@@ -81,7 +82,7 @@ export const GridLayout: FC<GridLayoutProps> = ({ component }) => {
         />
       ),
     }),
-    [component]
+    [component, persistLayout]
   );
 
   return (

src/modules/layout/types/index.ts

@@ -2,4 +2,5 @@ export interface GridLayoutComponentProps {
   id: string;
   title: string;
   locked: boolean;
+  startEditing: () => void;
 }

src/modules/settings/context/SettingsContext.ts

@@ -1,7 +1,11 @@
 import { createContext, useContext } from "react";
 
-export type SettingsValue = Record<string, never>;
-export const defaultSettings: SettingsValue = {};
+export type SettingsValue = {
+  richEditorEnabled: boolean;
+};
+
+export const defaultSettings: SettingsValue = { richEditorEnabled: false };
+
 export const SettingsContext = createContext({
   settings: defaultSettings,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars