1 files changed, 59 insertions, 9 deletions

diff --git a/src/edit.js b/src/edit.js
index ac2fe58..2fd31c6 100644
--- a/src/edit.js
+++ b/src/edit.js
@@ -1,26 +1,66 @@
 import CodeMirror from "codemirror";
 import "codemirror/lib/codemirror.css";
-import "codemirror/mode/markdown/markdown.js";
+import "codemirror/mode/markdown/markdown";
+import "codemirror/mode/css/css"
+import "codemirror/mode/htmlmixed/htmlmixed"
+import "codemirror/mode/javascript/javascript"
 
 let form;
 let unsavedChanges = false;
-
-let myCodeMirror = CodeMirror.fromTextArea(document.getElementById('main'), {
-    mode: 'markdown',
-    lineNumbers: true,
-});
+const inputEvent = new InputEvent('input');
 
 window.onload = () => {
     form = document.getElementById('update');
     let inputs = form.elements;
-    for (let i = 0; i < inputs.length; i++) {
-        inputs[i].oninput = changeHandler;
+    for (const input of inputs) {
+        input.oninput = changeHandler;
     }
 
     form.addEventListener("submit", function (event) {
         event.preventDefault();
         submitHandler(this);
-      });
+    });
+
+    CodeMirror.fromTextArea(document.getElementById('editmain'), {
+        mode: 'markdown',
+        lineNumbers: true,
+    }).on('change', cmChangeHandler);
+
+    CodeMirror.fromTextArea(document.getElementById('editcss'), {
+        mode: 'css',
+        lineNumbers: true,
+    }).on('change', cmChangeHandler);
+
+    CodeMirror.fromTextArea(document.getElementById('editheader'), {
+        mode: 'markdown',
+        lineNumbers: true,
+    }).on('change', cmChangeHandler);
+
+    CodeMirror.fromTextArea(document.getElementById('editnav'), {
+        mode: 'markdown',
+        lineNumbers: true,
+    }).on('change', cmChangeHandler);
+
+    CodeMirror.fromTextArea(document.getElementById('editaside'), {
+        mode: 'markdown',
+        lineNumbers: true,
+    }).on('change', cmChangeHandler);
+
+    CodeMirror.fromTextArea(document.getElementById('editfooter'), {
+        mode: 'markdown',
+        lineNumbers: true,
+    }).on('change', cmChangeHandler);
+
+    CodeMirror.fromTextArea(document.getElementById('editbody'), {
+        mode: 'htmlmixed',
+        lineNumbers: true,
+    }).on('change', cmChangeHandler);
+
+    CodeMirror.fromTextArea(document.getElementById('editjavascript'), {
+        mode: 'javascript',
+        lineNumbers: true,
+    }).on('change', cmChangeHandler);
+
     window.onkeydown = keyboardHandler;
     window.onbeforeunload = confirmExit;
 };
@@ -63,6 +103,16 @@ function changeHandler(e) {
 }
 
 /**
+ * Manage CodeMirror editor change event
+ * @param {CodeMirror.EditorFromTextArea} cm the CodeMirror instance
+ */
+function cmChangeHandler(cm){
+    let textArea = cm.getTextArea();
+    textArea.value = cm.getValue();
+    textArea.dispatchEvent(inputEvent);
+}
+
+/**
  * Manage submit event
  * @param {HTMLFormElement} form
  */