made simplier editor, added color coding

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

@@ -0,0 +1,41 @@
+import { ChangeEvent, FC, useCallback, useMemo } from "react";
+import styles from "./styles.module.scss";
+import { useTheme } from "~/modules/theme/context/ThemeContext";
+
+interface ReactMarkdownEditorProps {
+  value: string;
+  onChange: (val: string) => void;
+}
+
+const ReactMarkdownEditor: FC<ReactMarkdownEditorProps> = ({
+  value,
+  onChange,
+}) => {
+  const changeHandler = useCallback(
+    (event: ChangeEvent<HTMLTextAreaElement>) => {
+      onChange(event.target.value);
+    },
+    [onChange]
+  );
+
+  const { paddingHorizontal, paddingVertical } = useTheme();
+
+  const style = useMemo(
+    () => ({
+      padding: `${paddingVertical}px ${paddingHorizontal}px`,
+    }),
+    [paddingHorizontal, paddingVertical]
+  );
+
+  return (
+    <textarea
+      onChange={changeHandler}
+      className={styles.textarea}
+      style={style}
+    >
+      {value}
+    </textarea>
+  );
+};
+
+export { ReactMarkdownEditor };

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

@@ -0,0 +1,9 @@
+.textarea {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  border: none;
+  box-sizing: border-box;
+}

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

@@ -0,0 +1,20 @@
+import { FC } from "react";
+import ReactMarkdown from "react-markdown";
+import { useContainerPaddings } from "~/modules/theme/hooks/useContainerPaddings";
+import styles from "./styles.module.scss";
+
+interface ReactMarkdownViewerProps {
+  value: string;
+}
+
+const ReactMarkdownViewer: FC<ReactMarkdownViewerProps> = ({ value }) => {
+  const style = useContainerPaddings();
+
+  return (
+    <div style={style} className={styles.editor}>
+      <ReactMarkdown>{value}</ReactMarkdown>
+    </div>
+  );
+};
+
+export { ReactMarkdownViewer };

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

@@ -0,0 +1,11 @@
+.editor {
+  & > :first-child {
+    margin-top: 0 !important;
+    margin-left: 0 !important;
+  }
+
+  & > :last-child {
+    margin-bottom: 0 !important;
+    margin-right: 0 !important;
+  }
+}

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

@@ -31,6 +31,7 @@ import {
   GapCursorExtension,
 } from "remirror/extensions";
 import styles from "./styles.module.scss";
+import { useContainerPaddings } from "~/modules/theme/hooks/useContainerPaddings";
 
 interface RemirrorEditorProps {
   locked: boolean;
@@ -63,23 +64,28 @@ const RemirrorEditor: FC<RemirrorEditorProps> = ({
     [onChange, setState]
   );
 
+  const style = useContainerPaddings();
+
   return (
-    <Remirror
-      placeholder="Start typing..."
-      manager={manager}
-      classNames={[styles.editor]}
-      editable={!locked}
-      onChange={onStateChange}
-      state={state}
-    >
-      <EditorComponent />
-      {!locked && (
-        <FloatingToolbar>
-          <FormattingButtonGroup />
-          <HeadingLevelButtonGroup />
-        </FloatingToolbar>
-      )}
-    </Remirror>
+    <div className={styles.wrapper} style={style}>
+      <Remirror
+        placeholder="Start typing..."
+        manager={manager}
+        classNames={[styles.editor]}
+        editable={!locked}
+        onChange={onStateChange}
+        state={state}
+        autoFocus
+      >
+        <EditorComponent />
+        {!locked && (
+          <FloatingToolbar>
+            <FormattingButtonGroup />
+            <HeadingLevelButtonGroup />
+          </FloatingToolbar>
+        )}
+      </Remirror>
+    </div>
   );
 };
 

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

@@ -1,6 +1,17 @@
+.wrapper {
+  height: 100%;
+  box-sizing: border-box;
+
+  & > :global(.remirror-editor-wrapper) {
+    height: 100%;
+    box-sizing: border-box;
+  }
+}
+
 .editor {
   outline: none;
   height: 100%;
+  box-sizing: border-box;
 
   & > :first-child {
     margin-top: 0 !important;

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

@@ -1,7 +1,8 @@
 import { FC } from "react";
-import styles from "./styles.module.scss";
+import { ReactMarkdownEditor } from "../../components/ReactMarkdownEditor";
+import { ReactMarkdownViewer } from "../../components/ReactMarkdownViewer";
 import { usePersistedValue } from "./hooks/usePersistedValue";
-import { RemirrorEditor } from "../../components/RemirrorEditor";
+import styles from "./styles.module.scss";
 
 interface MarkdownEditorContainerProps {
   id: string;
@@ -16,7 +17,19 @@ export const MarkdownEditorContainer: FC<MarkdownEditorContainerProps> = ({
 
   return (
     <div className={styles.editor}>
-      <RemirrorEditor value={value} onChange={setValue} locked={locked} />
+      {/*
+      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} />
+      )}
     </div>
   );
 };

src/modules/editor/containers/MarkdownEditorContainer/styles.module.scss

@@ -1,6 +1,5 @@
 .editor {
   height: 100%;
-  padding: 16px;
   overflow: scroll;
   box-sizing: border-box;
 }

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

@@ -26,27 +26,27 @@ const GridLayoutItemWrapper: FC<GridLayoutItemWrapperProps> = ({
 }) => (
   <div className={styles.wrapper}>
     <div className={styles.menu}>
+      <IconButton
+        onClick={splitVertical}
+        role="button"
+        className={styles.button}
+      >
+        <SplitVertical />
+      </IconButton>
+      <IconButton
+        onClick={splitHorizontal}
+        role="button"
+        className={styles.button}
+      >
+        <SplitHorizontal />
+      </IconButton>
+
       {!locked && (
-        <>
-          <IconButton
-            onClick={splitVertical}
-            role="button"
-            className={styles.button}
-          >
-            <SplitVertical />
-          </IconButton>
-          <IconButton
-            onClick={splitHorizontal}
-            role="button"
-            className={styles.button}
-          >
-            <SplitHorizontal />
-          </IconButton>
-          <IconButton onClick={remove} role="button" className={styles.button}>
-            <DeleteIcon />
-          </IconButton>
-        </>
+        <IconButton onClick={remove} role="button" className={styles.button}>
+          <DeleteIcon />
+        </IconButton>
       )}
+
       <IconButton onClick={lock} role="button" className={styles.button}>
         {locked ? <Locked /> : <Unlocked />}
       </IconButton>

src/modules/theme/context/ThemeContext/index.ts

@@ -5,6 +5,8 @@ import { FontFamily } from "../../constants/fonts";
 export const defaultTheme = {
   theme: Theme.Dark,
   font: FontFamily.Inter,
+  paddingHorizontal: 16,
+  paddingVertical: 16,
 };
 
 export const ThemeContext = createContext(defaultTheme);

src/modules/theme/hooks/useContainerPaddings.ts

@@ -0,0 +1,12 @@
+import { useMemo } from "react";
+import { useTheme } from "~/modules/theme/context/ThemeContext";
+export const useContainerPaddings = () => {
+  const { paddingHorizontal, paddingVertical } = useTheme();
+
+  return useMemo(
+    () => ({
+      padding: `${paddingVertical}px ${paddingHorizontal}px`,
+    }),
+    [paddingHorizontal, paddingVertical]
+  );
+};

src/styles/_dark.scss

@@ -3,4 +3,7 @@
   --color-background: #111111;
   --color-text: #ffffff;
   --color-link: #25bfe6;
+  --color-code-text: #ff3344;
+  --color-code-background: #{transparentize(#ff3344, 0.9)};
+  --color-pre-background: #{lighten(#111111, 2%)};
 }

src/styles/main.scss

@@ -25,3 +25,25 @@ ul {
     margin: 0.5em 0;
   }
 }
+
+code {
+  background: var(--color-code-background);
+  color: var(--color-code-text);
+  border-radius: 4px;
+  padding: 0 5px;
+  font-family: inherit;
+  font-size: 0.9em;
+}
+
+pre {
+  background: var(--color-pre-background);
+  padding: 10px;
+  border-radius: 4px;
+  font-size: inherit;
+
+  code {
+    padding: 0;
+    background: transparent;
+    color: inherit;
+  }
+}