Added wysiwyg markdown editor

css/style.css

@@ -66,15 +66,18 @@ li::before {
 section {
   grid-area: section;
   margin: 1em 2em;
-  display: grid;
+  overflow-y: hidden;
+}
+
+#editText {
+  display: none;
   grid-template-columns: auto;
-  grid-template-rows: auto min-content;
-  row-gap: 2em;
+  grid-template-rows: min-content auto min-content min-content;
+  overflow-y: auto;
+  height: 100%;
 }
 
 textarea {
-  width: 100%;
-  height: 100%;
   resize: none;
 }
 
@@ -122,6 +125,7 @@ sub {
   display: none;
   justify-items: center;
   align-items: center;
+  z-index: 5;
 }
 
 .settings {
@@ -130,6 +134,7 @@ sub {
   height: 30vh;
   padding: 1.5em;
   border: 5px solid #c3c3c3;
+  z-index: 10;
 }
 
 form {

index.html

@@ -6,8 +6,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>CoMato</title>
     <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/simplemde.min.css">
+
+
     <script src="js/libs/lightning-fs.min.js" type="application/javascript"></script>
     <script src="js/libs/isomorphic-git.js" type="application/javascript"></script>
+    <script src="js/libs/simplemde.min.js"></script>
 
     <script src="js/model.js" type="application/javascript"></script>
     <script src="js/view.js" type="application/javascript"></script>
@@ -35,8 +39,10 @@
 
 
         <section>
-            <textarea name="" id="" cols="30" rows="10" disabled></textarea>
-            <button disabled id="saveBtn">Save</button>
+            <div id="editText">
+                <textarea name="" id="editor" cols="30" rows="10" disabled></textarea>
+                <button disabled id="saveBtn">Save</button>
+            </div>
         </section>
 
         <footer>

js/controller.js

@@ -10,7 +10,6 @@ class Controller {
     var settingsBtn = document.getElementsByClassName("settingsBtn")[0];
     var settingsClose = document.getElementsByClassName("close");
     var settingsSubmit = document.getElementById("settingsSubmit");
-    var textArea = document.getElementsByTagName("textarea")[0];
     var saveBtn = document.getElementById("saveBtn");
 
     cloneBtn.addEventListener("click", this.cloneRep.bind(this));
@@ -20,17 +19,14 @@ class Controller {
       settingsClose[i].addEventListener("click", view.closeSettings.bind(this));
     }
     settingsSubmit.addEventListener("click", this.saveSettings.bind(this));
-    textArea.addEventListener("keyup", this.saveButton.bind(this));
+    view.simplemde.codemirror.on("change", this.saveButton.bind(this));
     saveBtn.addEventListener("click", this.saveFile.bind(this));
   }
 
   saveButton() {
-    var textArea = document.getElementsByTagName("textarea")[0];
-    if (textArea.value != this.openedFileValue) {
-      this.view.showSaveButton(true);
-    } else {
-      this.view.showSaveButton(false);
-    }
+    var textArea = this.view.simplemde;
+
+    this.view.showSaveButton(textArea.value() == this.openedFileValue);
   }
 
   wipeFS() {
@@ -99,9 +95,9 @@ class Controller {
   }
 
   saveFile() {
-    var textArea = document.getElementsByTagName("textarea")[0];
-    this.model.saveFile(this.openedFile, textArea.value);
-    this.openedFileValue = textArea.value;
+    var textArea = this.view.simplemde;
+    this.model.saveFile(this.openedFile, textArea.value());
+    this.openedFileValue = textArea.value();
     this.saveButton();
 
     this.updateFileStats();

js/view.js

@@ -1,5 +1,10 @@
 class View {
-  constructor() {}
+  constructor() {
+    this.simplemde = new SimpleMDE({
+      element: document.getElementById("editor"),
+      spellChecker: false,
+    });
+  }
 
   drawDirTree(
     dirtree,
@@ -57,9 +62,10 @@ class View {
   }
 
   openFile(fileread) {
-    let textArea = document.getElementsByTagName("textarea")[0];
-    textArea.disabled = false;
-    textArea.value = fileread;
+    var editText = document.getElementById("editText");
+    editText.style.display = "grid";
+
+    this.simplemde.value(fileread);
   }
 
   removeDirTree() {
@@ -107,10 +113,6 @@ class View {
 
   showSaveButton(show) {
     var saveButton = document.getElementById("saveBtn");
-    if (show) {
-      saveButton.disabled = false;
-    } else {
-      saveButton.disabled = true;
-    }
+    saveButton.disabled = show;
   }
 }