added markdown preview, removed double click to edit

frontend/src/components/EditableNoteArea/EditableNoteArea.js

@@ -4,24 +4,19 @@ import { noop } from "../../state";
 
 import "./EditableNoteArea.css";
 
-export default function EditableNoteArea({ content = null, onSave = noop }) {
-    const [editMode, setEditMode] = useState(false);
+export default function EditableNoteArea({
+    content = null,
+    onSave = noop,
+    preview = false
+}) {
     const [newContent, setNewContent] = useState(content);
 
-    const toggleEditMode = () => {
-        setEditMode(!editMode);
-
-        if (editMode && newContent) {
-            onSave(newContent, content);
-        }
-    };
-
     const updateContent = ({ target }) =>
         setNewContent(target.value || newContent);
 
     return (
-        <section className="EditableNoteArea" onDoubleClick={toggleEditMode}>
-            {editMode ? (
+        <section className="EditableNoteArea">
+            {!preview ? (
                 <textarea defaultValue={content} onChange={updateContent} />
             ) : (
                 <ReactMarkdown source={content} />

frontend/src/components/NoteContent.css

@@ -8,7 +8,7 @@
     padding: 0 10px 15px 10px;
 }
 
-.NoteContent h2 {
-    margin: 10px 0;
-    padding: 0;
+.NoteContent .controls {
+    padding: 10px;
+    display: flex;
 }

frontend/src/components/NoteContent.js

@@ -1,17 +1,42 @@
-import React from "react";
+import React, { useState } from "react";
 import { noop } from "../state";
 import EditableNoteArea from "./EditableNoteArea/EditableNoteArea";
+
 import "./NoteContent.css";
 
 export default function NoteContent({ note = null, onSave = noop }) {
+    const [renderMarkdown, setRenderMarkdown] = useState(false);
     const { content, title } = note || {};
 
     return (
         <div className="NoteContent">
-            <header>
-                <h2>{title}</h2>
+            <header className="controls">
+                <Checkbox
+                    label="Preview Markdown"
+                    onChange={checked => setRenderMarkdown(checked)}
+                />
             </header>
-            <EditableNoteArea content={content} onSave={onSave} />
+            <EditableNoteArea
+                content={content}
+                onSave={onSave}
+                preview={renderMarkdown}
+            />
         </div>
     );
 }
+
+const Checkbox = ({
+    className = "",
+    onChange = noop,
+    label = "checkbox",
+    defaultChecked = false
+}) => (
+    <div className={className}>
+        <label>{label}:</label>
+        <input
+            type="checkbox"
+            defaultChecked={defaultChecked}
+            onChange={({ target }) => onChange(target.checked)}
+        />
+    </div>
+);