From a08ebe2cbc8da4f34f9291a356fd2f2b9661091c Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Wed, 26 Apr 2023 15:24:45 +0600
Subject: [PATCH] added empty editor view and rich editor switch

---
 .../editor/components/EmptyViewer/index.tsx   | 25 +++++++++++
 .../components/EmptyViewer/styles.module.scss | 19 ++++++++
 .../MarkdownEditorContainer/index.tsx         | 43 +++++++++++++------
 .../layout/components/GridLayout/index.tsx    |  3 +-
 src/modules/layout/types/index.ts             |  1 +
 .../settings/context/SettingsContext.ts       |  8 +++-
 6 files changed, 82 insertions(+), 17 deletions(-)
 create mode 100644 src/modules/editor/components/EmptyViewer/index.tsx
 create mode 100644 src/modules/editor/components/EmptyViewer/styles.module.scss

diff --git a/src/modules/editor/components/EmptyViewer/index.tsx b/src/modules/editor/components/EmptyViewer/index.tsx
new file mode 100644
index 0000000..dbbd102
--- /dev/null
+++ b/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 };
diff --git a/src/modules/editor/components/EmptyViewer/styles.module.scss b/src/modules/editor/components/EmptyViewer/styles.module.scss
new file mode 100644
index 0000000..f3696be
--- /dev/null
+++ b/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;
+}
diff --git a/src/modules/editor/containers/MarkdownEditorContainer/index.tsx b/src/modules/editor/containers/MarkdownEditorContainer/index.tsx
index e04ab6d..223194b 100644
--- a/src/modules/editor/containers/MarkdownEditorContainer/index.tsx
+++ b/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>
   );
 };
diff --git a/src/modules/layout/components/GridLayout/index.tsx b/src/modules/layout/components/GridLayout/index.tsx
index 375041f..e567d09 100644
--- a/src/modules/layout/components/GridLayout/index.tsx
+++ b/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 (
diff --git a/src/modules/layout/types/index.ts b/src/modules/layout/types/index.ts
index 31c35a6..6221c2a 100644
--- a/src/modules/layout/types/index.ts
+++ b/src/modules/layout/types/index.ts
@@ -2,4 +2,5 @@ export interface GridLayoutComponentProps {
   id: string;
   title: string;
   locked: boolean;
+  startEditing: () => void;
 }
diff --git a/src/modules/settings/context/SettingsContext.ts b/src/modules/settings/context/SettingsContext.ts
index 13b5cba..4b21d1a 100644
--- a/src/modules/settings/context/SettingsContext.ts
+++ b/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