- Edit src/App.js and save to reload.
-
+
);
}
diff --git a/online-editor/src/components/Home.js b/online-editor/src/components/Home.js
new file mode 100644
index 0000000..e0f54aa
--- /dev/null
+++ 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 (
+
+
+ );
+}
diff --git a/online-editor/src/components/css/home.css b/online-editor/src/components/css/home.css
new file mode 100644
index 0000000..fe2d343
--- /dev/null
+++ 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
new file mode 100644
index 0000000..ac0f593
Binary files /dev/null and b/online-editor/src/components/icons/cursor-button.png differ
diff --git a/online-editor/src/components/icons/cursor.png b/online-editor/src/components/icons/cursor.png
new file mode 100644
index 0000000..f7bb2fb
Binary files /dev/null and b/online-editor/src/components/icons/cursor.png differ
diff --git a/online-editor/src/components/icons/icon.png b/online-editor/src/components/icons/icon.png
new file mode 100644
index 0000000..9f82a49
Binary files /dev/null and b/online-editor/src/components/icons/icon.png differ
diff --git a/online-editor/src/components/icons/icon2.png b/online-editor/src/components/icons/icon2.png
new file mode 100644
index 0000000..c75ca5c
Binary files /dev/null and b/online-editor/src/components/icons/icon2.png differ
diff --git a/online-editor/src/icon.png b/online-editor/src/icon.png
new file mode 100644
index 0000000..a731806
Binary files /dev/null and b/online-editor/src/icon.png differ
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Online Text Editor
+
+
+
+
+
+
+
+
+
+
+
+