📺 Added Fullscreen Preview

Author: aromalanil

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "markdown-editor",
-  "version": "1.8.1",
+  "version": "1.9.0",
   "description": "A react app to preview and edit Markdown",
   "private": true,
   "author": {
@@ -20,6 +20,7 @@
     "prismjs": "^1.21.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-full-screen": "^0.3.1",
     "react-scripts": "3.4.1",
     "react-split": "^2.0.7"
   },

package.json

@@ -46,6 +46,8 @@ body {
   padding: 0.4rem 1rem;
   font-weight: 600;
   border-radius: 0.2rem;
+  display: inline-block;
+  line-height: 1.2rem;
   color: var(--nav-item-color);
   background-color: var(--primary-color);
   transition: color, background-color var(--color-transition);
@@ -238,10 +240,19 @@ body {
   .html-div {
     background-color: var(--body-color);
     transition: background-color var(--color-transition);
-    margin-top: 2rem;
     overflow-y: scroll;
+    max-height: 100%;
+  }
+  .preview-fullscreen {
+    padding: 1rem;
+    margin-top: 0;
   }
 }
+.fullscreen {
+  max-height: 100%;
+  margin-top: 2rem;
+  padding-bottom: 1rem;
+}
 
 .gutter {
   height: 100% !important;
@@ -373,6 +384,13 @@ body {
     flex-direction: column;
     position: relative;
   }
+  .fullscreen {
+    margin-top: 0;
+    padding-bottom: 0;
+  }
+  #preview {
+    padding-top: 2rem;
+  }
   .gutter {
     height: 10px !important;
     width: 100% !important;

src/App.scss

@@ -1,20 +1,19 @@
-import React, { useEffect, useState,useRef } from "react";
+import React, { useEffect, useState, useRef } 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] = useState(false);
-  const editorRef =useRef(null);
+  const editorRef = useRef(null);
 
   useEffect(() => {
-    if(content===''){
-      localStorage.setItem("markdown",placeholder);
+    if (content === "") {
+      localStorage.setItem("markdown", placeholder);
+    } else {
+      localStorage.setItem("markdown", content);
     }
-    else{
-      localStorage.setItem("markdown",content);
-    }
-  }, [content])
+  }, [content]);
 
   const handleEditorChange = (event) => {
     event.preventDefault();
@@ -41,7 +40,7 @@ function MarkdownEdit({ content, changeContent }) {
         <h3>Markdown</h3>
         <div className="right-section">
           <button onClick={handleCopyButton} className="btn">
-            Copy
+          Copy
           </button>
           <button onClick={handleClearButton} className="btn">
             Clear
@@ -53,16 +52,14 @@ function MarkdownEdit({ content, changeContent }) {
         value={content}
         onChange={handleEditorChange}
         id="editor"
-        ref={editorRef}
-      ></textarea>
+        ref={editorRef}></textarea>
 
       <Snackbar open={open} autoHideDuration={2000} onClose={handleClose}>
         <Alert
           onClose={handleClose}
           severity="success"
           elevation={6}
-          variant="filled"
-        >
+          variant="filled">
           <AlertTitle>Copied</AlertTitle>
           The markdown is copied to your clipboard
         </Alert>

src/components/MarkdownEdit.jsx

@@ -1,32 +1,51 @@
 import React, { useState, useEffect } from "react";
 import * as marked from "marked";
-import Prism from 'prismjs';
-import '../utils/prism-imports';
+import Prism from "prismjs";
+import "../utils/prism-imports";
+import { FullScreen, useFullScreenHandle } from "react-full-screen";
 //css for Prism is imported in ThemeSelector
 
 function MarkdownPreview({ content }) {
   const [html, setHtml] = useState(getHtml(content));
+  const handle = useFullScreenHandle();
 
-  useEffect(()=>{
+  useEffect(() => {
     Prism.highlightAll();
-  })
+  });
 
   useEffect(() => {
     setHtml(getHtml(content));
   }, [content]);
 
+  const handleFullScreen = () =>
+    handle.active ? handle.exit() : handle.enter();
+
+  const handleSaveClick = () => {
+    let link = document.createElement("a");
+    link.href=`data:text/html,${html}`;
+    link.download="export.html";
+    link.click();
+  };
+
   return (
     <div className="markdown-preview scroll">
       <div className="section-title">
         <h3>Preview</h3>
-        <a href={`data:text/html,${html}`} download="export.html" className="btn">
-          Save
-        </a>
+        <div className="right-section">
+          <button className="btn" onClick={handleSaveClick}>
+            Save
+          </button>
+          <button className="btn" onClick={handleFullScreen}>
+            Fullscreen
+          </button>
+        </div>
       </div>
-      <div
-        id="preview"
-        className="html-div"
-        dangerouslySetInnerHTML={{ __html: html }}></div>
+      <FullScreen handle={handle}>
+        <div
+          id="preview"
+          className={`html-div ${handle.active ? "preview-fullscreen" : ""}`}
+          dangerouslySetInnerHTML={{ __html: html }}></div>
+      </FullScreen>
     </div>
   );
 }