Implement a text editor feature (#875)

src/_renderer.js

@@ -807,6 +807,12 @@ window.openSettings = async () => {
     });
 };
 
+window.writeFile = (path) => {
+    fs.writeFile(path, document.getElementById("fileEdit").value, "utf-8", () => {
+        document.getElementById("fedit-status").innerHTML = "<i>File saved.</i>";
+    });
+}
+
 window.writeSettingsFile = () => {
     window.settings = {
         shell: document.getElementById("settingsEditor-shell").value,

src/assets/css/modal.css

@@ -144,6 +144,19 @@ div.modal_popup table:not(#settingsEditor) td:first-child {
     text-align: center;
 }
 
+div.modal_popup textarea {
+    background: var(--color_light_black);
+    color: rgb(var(--color_r), var(--color_g), var(--color_b));
+    border: 0.15vh solid rgb(var(--color_r), var(--color_g), var(--color_b));
+    padding: 0.4vh 0.2vh;
+    font-size: 1.4vh;
+    resize: none;
+}
+
+div.modal_popup textarea:active, div.modal_popup textarea:focus {
+    outline: none !important;
+}
+
 div.modal_popup td input {
     width: 100%;
     background: var(--color_light_black);

src/classes/filesystem.class.js

@@ -346,6 +346,10 @@ class FilesystemDisplay {
                     }
                 }
 
+                if (e.type === "file") {
+                    cmd = `window.fsDisp.openFile(${blockIndex})`
+                }
+
                 if (e.type === "system") {
                     cmd = "";
                 }
@@ -542,6 +546,65 @@ class FilesystemDisplay {
             this.readFS(window.term[window.currentTerm].cwd || window.settings.cwd);
         }
 
+        this.openFile = (name, path, type) => { //Might add text formatting at some point, not now though - Surge
+            let block;
+
+            if (typeof name === "number") {
+                block = this.cwd[name];
+                name = block.name
+            }
+
+            block.path = block.path.replace(/\\/g, "/");
+
+            let filetype = name.split(".")[name.split(".").length - 1];
+            switch (filetype) {
+                case "xml":
+                case "yaml":
+                case "java":
+                case "cs":
+                case "cpp":
+                case "h":
+                case "html":
+                case "css":
+                case "js":
+                case "md":
+                case "log":
+                case "bat":
+                case "sh":
+                case "gd":
+                //To anyone else working with this: Feel free to add on to this list. - Surge
+                case "txt":
+                case "json":
+                    fs.readFile(block.path, 'utf-8', (err, data) => {
+                        if (err) {
+                            new Modal({
+                                type: "info",
+                                title: "Failed to load file: " + block.path,
+                                html: err
+                            });
+                            console.log(err);
+                        };
+                        window.keyboard.detach();
+                        new Modal(
+                            {
+                                type: "custom",
+                                title: _escapeHtml(name),
+                                html: `<textarea id="fileEdit" rows="40" cols="150" spellcheck="false">${data}</textarea><p id="fedit-status"></p>`,
+                                buttons: [
+                                    {label:"Save to Disk",action:`window.writeFile('${block.path}')`}
+                                ]
+                            }, () => {
+                                window.keyboard.attach();
+                                window.term[window.currentTerm].term.focus();
+                            }
+                        );
+                    });
+                    break;
+                default:
+                    return;
+            }
+        }
+
         this.openMedia = (name, path, type) => {
             let block, html;