include CodeMirror in edit page

- add npm prerequisite
- add codemirror through npm
- add webpack trough npm to build the js bundles
- add first codemirror enhenced textarea

2 files changed, 18 insertions, 5 deletions

diff --git a/assets/css/edit.css b/assets/css/edit.css
index 640ee1a..85b1e07 100644
--- a/assets/css/edit.css
+++ b/assets/css/edit.css
@@ -116,6 +116,7 @@ body {
 	left: 0px;
 	width: 100%;
 	height: 100%;
+    display: none;
 }
 
 .checkboxtab
@@ -138,15 +139,15 @@ body {
     color: #7b97b9;
 }
 
-.checkboxtab:checked ~ label
+.checkboxtab:checked ~label
 {
     border: solid 1px;
     background: white;
 }
 
-.checkboxtab:checked ~ .content
+.checkboxtab:checked ~.content
 {
-	z-index: 1;
+	display: block;
 }
 
 
@@ -372,7 +373,10 @@ div#thumbnail img {
     padding: 2%;
 }
 
-
+/* Custom CodeMirror CSS */
+.CodeMirror {
+    height: 100% !important;
+}
 
 
 @media (max-width: 600px) {
diff --git a/assets/js/edit.js b/assets/js/edit.js
index efd29d6..7df75de 100644
--- a/assets/js/edit.js
+++ b/assets/js/edit.js
@@ -1,11 +1,20 @@
+import CodeMirror from "codemirror";
+import "codemirror/lib/codemirror.css";
+import "codemirror/mode/markdown/markdown.js";
+
 let form;
 let unsavedChanges = false;
 const pageurl = basepath + pageid;
 
+let myCodeMirror = CodeMirror.fromTextArea(document.getElementById('main'), {
+    mode: 'markdown',
+    lineNumbers: true,
+});
+
 window.onload = () => {
     form = document.getElementById('update');
     let inputs = form.elements;
-    for (i = 0; i < inputs.length; i++) {
+    for (let i = 0; i < inputs.length; i++) {
         inputs[i].oninput = changeHandler;
     }