Merge pull request #7 from aromalanil/fullscreen-support

🌊 Added Fullscreen support

Author: aromalanil

package-lock.json

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

package.json

@@ -40,18 +40,21 @@ body {
   width: 0%;
 }
 
-.btn {
+.btn{
+  display:flex;
+  align-items: center;
+  justify-content: center;
   cursor: pointer;
-  font-size: 0.9rem;
-  padding: 0.4rem 1rem;
-  font-weight: 600;
-  border-radius: 0.2rem;
+  font-size: 1.1rem;
+  border-radius: 0.3rem;
+  display: inline-block;
   color: var(--nav-item-color);
   background-color: var(--primary-color);
   transition: color, background-color var(--color-transition);
   border: none;
   transition: filter 200ms ease;
   margin: 0 0.5rem;
+  padding:0.4rem .4rem .15rem;
   &:hover {
     filter: brightness(1.1);
   }
@@ -238,10 +241,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 +385,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,22 @@
-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";
+import { MdContentCopy as CopyIcon } from "react-icons/md";
+import { MdDelete as CleanIcon } from "react-icons/md";
+import { Tooltip } from "@material-ui/core";
 
 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();
@@ -40,29 +42,31 @@ function MarkdownEdit({ content, changeContent }) {
       <div className="section-title">
         <h3>Markdown</h3>
         <div className="right-section">
-          <button onClick={handleCopyButton} className="btn">
-            Copy
-          </button>
-          <button onClick={handleClearButton} className="btn">
-            Clear
-          </button>
+          <Tooltip title="Copy to Clipboard">
+            <button onClick={handleCopyButton} className="btn">
+              <CopyIcon />
+            </button>
+          </Tooltip>
+          <Tooltip title="Clean">
+            <button onClick={handleClearButton} className="btn">
+              <CleanIcon />
+            </button>
+          </Tooltip>
         </div>
       </div>
       <textarea
         className="editable"
         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,57 @@
 import React, { useState, useEffect } from "react";
 import * as marked from "marked";
-import Prism from 'prismjs';
-import '../utils/prism-imports';
-//css for Prism is imported in ThemeSelector
+import Prism from "prismjs"; //css for Prism is imported in ThemeSelector
+import "../utils/prism-imports";
+import { FullScreen, useFullScreenHandle } from "react-full-screen";
+import { CgSoftwareDownload as SaveIcon } from "react-icons/cg";
+import { RiFullscreenFill as FullScreenIcon } from "react-icons/ri";
+import { Tooltip } from "@material-ui/core";
 
 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">
+        <Tooltip title="FullScreen" title="Download HTML">
+          <button className="btn" onClick={handleSaveClick}>
+            <SaveIcon />
+          </button>
+          </Tooltip>
+          <Tooltip title="FullScreen">
+            <button className="btn" onClick={handleFullScreen}>
+              <FullScreenIcon />
+            </button>
+          </Tooltip>
+        </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>
   );
 }