made human-friendly editing buttons

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

@@ -0,0 +1,25 @@
+import { FC, PropsWithChildren } from "react";
+import styles from "./styles.module.scss";
+import { Button } from "~/components/buttons/Button";
+import { useContainerPaddings } from "~/modules/theme/hooks/useContainerPaddings";
+
+interface EditorWrapperProps extends PropsWithChildren {
+  onSave: () => void;
+}
+
+const EditorWrapper: FC<EditorWrapperProps> = ({ children, onSave }) => {
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.content}>{children}</div>
+
+      <div className={styles.panel}>
+        <div className={styles.filler} />
+        <Button onClick={onSave} role="button" size="small">
+          Save
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export { EditorWrapper };

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

@@ -0,0 +1,22 @@
+.wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+}
+
+.content {
+  flex: 1;
+}
+
+.panel {
+  flex: 0;
+  padding: 10px;
+  display: flex;
+  flex-direction: row;
+}
+
+.filler {
+  flex: 1;
+}

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

@@ -1,6 +1,7 @@
 import { FC } from "react";
 import styles from "./styles.module.scss";
 import { useContainerPaddings } from "~/modules/theme/hooks/useContainerPaddings";
+import { Button } from "~/components/buttons/Button";
 
 interface EmptyViewerProps {
   startEditing?: () => void;
@@ -13,11 +14,14 @@ const EmptyViewer: FC<EmptyViewerProps> = ({ startEditing }) => {
     <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>
+        <Button
+          onClick={startEditing}
+          role="button"
+          variant="outline"
+          size="small"
+        >
+          Edit it
+        </Button>
       </div>
     </div>
   );

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

@@ -10,10 +10,10 @@
   transition: opacity 0.25s;
 
   &:hover {
-    opacity: 1;
+    opacity: 0.5;
   }
 }
 
 .title {
-  opacity: 0.5;
+  margin-bottom: 1em;
 }

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

@@ -34,6 +34,7 @@ const ReactMarkdownEditor: FC<ReactMarkdownEditorProps> = ({
       style={style}
       placeholder="Start typing here..."
       value={value}
+      rows={1}
     />
   );
 };

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

@@ -2,17 +2,35 @@ import { FC } from "react";
 import ReactMarkdown from "react-markdown";
 import { useContainerPaddings } from "~/modules/theme/hooks/useContainerPaddings";
 import styles from "./styles.module.scss";
+import { Button } from "~/components/buttons/Button";
 
 interface ReactMarkdownViewerProps {
   value: string;
+  startEditing: () => void;
 }
 
-const ReactMarkdownViewer: FC<ReactMarkdownViewerProps> = ({ value }) => {
+const ReactMarkdownViewer: FC<ReactMarkdownViewerProps> = ({
+  value,
+  startEditing,
+}) => {
   const style = useContainerPaddings();
 
   return (
     <div style={style} className={styles.editor}>
-      <ReactMarkdown>{value}</ReactMarkdown>
+      <div className={styles.edit}>
+        <Button
+          size="small"
+          variant="outline"
+          role="button"
+          onClick={startEditing}
+        >
+          Edit
+        </Button>
+      </div>
+
+      <div className={styles.content}>
+        <ReactMarkdown>{value}</ReactMarkdown>
+      </div>
     </div>
   );
 };

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

@@ -1,4 +1,27 @@
 .editor {
+  position: relative;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.edit {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  opacity: 0;
+  transition: opacity 0.25s;
+  padding: 10px;
+
+  .editor:hover & {
+    opacity: 0.5;
+  }
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.content {
   & > :first-child {
     margin-top: 0 !important;
     margin-left: 0 !important;

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

@@ -5,6 +5,7 @@ import { usePersistedValue } from "./hooks/usePersistedValue";
 import styles from "./styles.module.scss";
 import { useSettings } from "~/modules/settings/context/SettingsContext";
 import { EmptyViewer } from "../../components/EmptyViewer";
+import { EditorWrapper } from "../../components/EditorWrapper";
 
 interface MarkdownEditorContainerProps {
   id: string;
@@ -34,14 +35,19 @@ export const MarkdownEditorContainer: FC<MarkdownEditorContainerProps> = ({
   const viewer = empty ? (
     <EmptyViewer startEditing={startEditing} />
   ) : (
-    <ReactMarkdownViewer value={value} />
+    <ReactMarkdownViewer value={value} startEditing={startEditing} />
   );
 
-  const editor = richEditorEnabled ? (
-    <RichEditor value={value} onChange={setValue} locked={locked} />
-  ) : (
-    <ReactMarkdownEditor value={value} onChange={setValue} />
+  const editor = (
+    <EditorWrapper onSave={startEditing}>
+      {richEditorEnabled ? (
+        <RichEditor value={value} onChange={setValue} locked={locked} />
+      ) : (
+        <ReactMarkdownEditor value={value} onChange={setValue} />
+      )}
+    </EditorWrapper>
   );
+
   return (
     <div className={styles.editor}>
       <Suspense>{locked ? viewer : editor}</Suspense>