🍪 Caches the user input markdown to localstorage

Author: aromalanil

package.json

@@ -1,6 +1,6 @@
 {
   "name": "markdown-editor",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "A react app to preview and edit Markdown",
   "private": true,
   "author": {

src/components/MarkdownEdit.jsx

@@ -1,9 +1,19 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import Snackbar from "@material-ui/core/Snackbar";
 import { Alert, AlertTitle } from "@material-ui/lab";
+import placeholder from "../data/placeholder";
 
 function MarkdownEdit({ content, changeContent }) {
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if(content===''){
+      localStorage.setItem("markdown",placeholder);
+    }
+    else{
+      localStorage.setItem("markdown",content);
+    }
+  }, [content])
 
   const handleEditorChange = (event) => {
     event.preventDefault();

src/components/WorkArea.jsx

@@ -2,10 +2,11 @@ import React, { useState, useEffect } from "react";
 import Split from "react-split";
 import MarkdownEdit from "./MarkdownEdit";
 import MarkdownPreview from "./MarkdownPreview";
-import placeholder from '../data/placeholder'
+import placeholder from "../data/placeholder";
 
 function WorkArea() {
-  const [markDown, setMarkDown] = useState(placeholder);
+  let markdown = localStorage.getItem("markdown") || placeholder;
+  const [markDown, setMarkDown] = useState(markdown);
   const [orientation, setOrientation] = useState("horizontal");
 
   useEffect(() => {