drcoolsanjeev · sayyss · Dec 27, 2019 · Dec 27, 2019 · Dec 27, 2019 · Dec 27, 2019
diff --git a/README.md b/README.md
@@ -1,6 +1,15 @@
 
 ## Introduction
+![GCI Badge](https://img.shields.io/badge/Google%20Code%20In-JBoss%20Community-red?style=flatr&labelColor=fdb900)
+### React Online Editor to View,Edit Files stored on Local Storage
 
-In this project, create a react app to support online editor to view and edit a file using intelisense 
+## Tech Stack
+* Reactjs
+* Ace editor
+* file-saver
+* css
 
-for example: we can use npm `react-ace` - https://www.npmjs.com/package/react-ace
+## How to Run
+* Run ***npm start*** in the main directory( make sure you install the node modules first using ***npm install***)
+
+## Video Demo - [Youtube](https://youtu.be/u3PHpIwsZgk)
diff --git a/online-editor/package.json b/online-editor/package.json
@@ -3,7 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "bootstrap": "^4.4.1",
+    "file-saver": "^2.0.2",
     "react": "^16.12.0",
+    "react-ace": "^8.0.0",
+    "react-bootstrap": "^1.0.0-beta.16",
     "react-dom": "^16.12.0",
     "react-scripts": "3.2.0"
   },

diff --git a/online-editor/public/index.html b/online-editor/public/index.html
@@ -7,14 +7,19 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Online Text Editor"
     />
     <link rel="apple-touch-icon" href="logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link href="https://fonts.googleapis.com/css?family=Comfortaa&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -24,7 +29,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Online Text Editor</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/online-editor/src/App.css b/online-editor/src/App.css
@@ -1,22 +1,3 @@
 .App {
   text-align: center;
 }
-
-.App-logo {
-  height: 40vmin;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #09d3ac;
-}
diff --git a/online-editor/src/App.js b/online-editor/src/App.js
@@ -1,24 +1,13 @@
 import React from 'react';
 import logo from './logo.svg';
 import './App.css';
+import Home from './components/Home.js';
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div style={{backgroundColor: '#232323'}}>
+    <Home />
     </div>
   );
 }

diff --git a/online-editor/src/components/Home.js b/online-editor/src/components/Home.js
@@ -0,0 +1,160 @@
+// Imports
+import React, { useState } from 'react';
+import './css/home.css';
+import AceEditor from "react-ace";
+import FileSaver from 'file-saver';
+
+// Modes
+import 'ace-builds/src-min-noconflict/ext-searchbox';
+import "ace-builds/src-noconflict/mode-java";
+import "ace-builds/src-noconflict/mode-html";
+import "ace-builds/src-noconflict/mode-python";
+import "ace-builds/src-noconflict/mode-json";
+import "ace-builds/src-noconflict/mode-xml";
+import "ace-builds/src-noconflict/mode-golang";
+import "ace-builds/src-noconflict/mode-css";
+
+// Themes
+import "ace-builds/src-noconflict/theme-github";
+import "ace-builds/src-noconflict/theme-monokai";
+import "ace-builds/src-noconflict/theme-terminal";
+
+export default function Home() {
+
+    // State
+    const [fileContent, setFileContent] = useState("");
+    const [file,setFile] = useState();
+    const [isChanged,set_isChange] = useState(false);
+    const [fileType,setType] = useState("");
+    const [fontSize,setFontSize] = useState("18px");
+    const [theme,setTheme] = useState("monokai");
+
+    // On Changing the value in the editor
+    const onValueChange = value =>{
+        set_isChange(value ? true : false)
+        setFileContent(value);
+    }
+
+    // Set File type
+    const setFileType = type =>{
+
+        // Remove the prefix
+        if(type == "text/html" || type == "text/plain"){
+            setType(type.substring(5));
+        }
+        // .py .java files have type written like this "text/-xjava"
+        else{
+            setType(type.substring(7));
+        }
+    }
+
+    // On File Upload
+    const onFileUpload = event =>{
+
+        // Get the file
+        let read = event.target.files[0];
+        setFile(read);
+
+        // Initiate File Reader
+        const reader = new FileReader();
+
+        // On Load, set state fileContent to the content in the file
+        reader.onload = function(e){
+            let content = reader.result;
+            setFileContent(content);
+            set_isChange(true);
+            setFileType(read.type);
+        }
+
+        // Read content in the file as text
+        reader.readAsText(read);
+    }
+
+    // On Clicking Download
+    const downloadFile = () => {
+
+        // Encode the content into text
+        let blob = new Blob([ new TextEncoder().encode(fileContent) ],{type: "text/plain"});
+
+        // Different Downloads for File which is created from editor and file which is uploaded
+        file ? FileSaver.saveAs(blob,file.name) : FileSaver.saveAs(blob,"sample." + fileType);
+    }
+
+    // Customizations for editor
+    const modeChange = e =>{
+        setType(e.target.value);
+    }
+    const themeChange = e =>{
+        setTheme(e.target.value);
+    }
+    const sizeChange = e =>{
+        setFontSize(e.target.value);
+    }
+
+    // Data for customizations
+    const modes = ['txt','java','javascript','python','html','markdown','xml','golang','css'];
+    const themes = ['monokai','github','terminal'];
+    const sizes = ['18px','24px','28px','32px','40px'];
+
+    return (
+        <div>
+            <div className="Main">
+
+                <div className="tools">
+                    <div className="row">
+                    <div className="col-sm-3">
+                        <input type="file" name="file" className="upload" onChange={onFileUpload} />
+                        <button disabled={!isChanged} onClick={downloadFile} className="download"></button>
+
+                    </div>
+                    <div className="col-sm-6">
+                    <h1 className="title">Online Text Editor</h1>
+                    </div>
+                    <div className="col-sm-3 customize">
+
+                        <select onChange={modeChange} value={fileType} className="mode">
+                        {
+                            modes.map(value => {
+                            return <option value={value} className="mode-option">{value}</option>
+                            })
+                        }
+                        </select>
+
+                        <select onChange={themeChange} value={theme} className="mode">
+                        {
+                            themes.map(theme => {
+                                return <option value={theme} className="mode-option">{theme}</option>
+                            })
+                        }
+                        </select>
+
+                        <select onChange={sizeChange} value={fontSize} className="mode">
+                        {
+                            sizes.map(size => {
+                                return <option value={size} className="mode-option">{size}</option>
+                            })
+                        }
+                        </select>
+                    </div>
+
+                    </div>
+
+                </div>
+
+                <div className="editor shadow-lg">
+                <AceEditor
+                    fontSize={fontSize}
+                    height='800px'
+                    width='100%'
+                    onChange={onValueChange}
+                    mode={fileType}
+                    theme={theme}
+                    name="editor"
+                    value={fileContent}
+                    placeholder="Upload a file By Clicking on The Upload Icon or Write Your Text Here"
+                />
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/online-editor/src/components/css/home.css b/online-editor/src/components/css/home.css
@@ -0,0 +1,64 @@
+*{
+    cursor: url('../icons/cursor.png'), auto;
+}
+.title{
+    font-family: 'Comfortaa', cursive;
+    font-size: 55px;
+    font-weight: bold;
+    color: #00C8F9;
+    text-align: center;
+}
+.Main{
+    padding: 100px;
+}
+.upload {
+    display: inline-block;
+    width: 20%;
+    padding-top:60px;
+    height: 50px;
+    overflow: hidden;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    background: url('../icons/icon.png') center center no-repeat;
+    border-radius: 20px;
+    background-size: 50px 50px;
+}
+.download{
+    margin-left: 10px;
+    border: none;
+    display: inline-block;
+    width: 20%;
+    padding-top:60px;
+    height: 50px;
+    overflow: hidden;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    background: url('../icons/icon2.png') center center no-repeat;
+    border-radius: 20px;
+    background-size: 50px 30px;
+}
+
+.editor{
+    padding: 5px;
+    background-color: #00C8F9;
+}
+.tools{
+    font-weight: bold;
+    font-family: 'Comfortaa', cursive;
+    color: #00C8F9;
+}
+
+.mode{
+    margin-left:10px;
+    font-weight:bold;
+    padding:10px;
+    border: 1px solid #00C8F9;
+    color: #00C8F9;
+    background-color: #232323;
+}
+
+.mode-option{
+    font-weight: bold;
+}
diff --git a/online-editor/src/components/icons/cursor-button.png b/online-editor/src/components/icons/cursor-button.png
diff --git a/online-editor/src/components/icons/cursor.png b/online-editor/src/components/icons/cursor.png
diff --git a/online-editor/src/components/icons/icon.png b/online-editor/src/components/icons/icon.png
diff --git a/online-editor/src/components/icons/icon2.png b/online-editor/src/components/icons/icon2.png
diff --git a/online-editor/src/icon.png b/online-editor/src/icon.png