update

package.json

@@ -5,7 +5,10 @@
   "scripts": {
     "build-sass": "sass --style compressed src/main.scss public/css/main.css",
     "build-js": "parcel build src/main.js --dist-dir public/js",
+    "build-sass-dev": "sass src/main.scss public/css/main.css",
+    "build-js-dev": "parcel build src/main.js --dist-dir public/js --no-optimize",
     "start":"npm run build-sass && npm run build-js",
+    "serve":"npm run build-sass-dev && npm run build-js-dev",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {

src/main.js

@@ -1,5 +1 @@
-import Prism from "prismjs";
+import "./editor"
-import "prismjs/plugins/custom-class/prism-custom-class";
-
-
-Prism.plugins.customClass.map({ number: "prism-number", tag: "prism-tag" });

src/main.scss

@@ -1,2 +1,5 @@
 @charset "utf-8";
 @import "../node_modules/bulma/bulma.sass";
+
+@import "./scss/prism.scss";
+@import "./scss/editor.scss";

src/tmp.js

@@ -1,39 +0,0 @@
-// codeInput
-// by WebCoder49
-// Based on a CSS-Tricks Post
-// Needs Prism.js
-function update(text) {
-    let result_element = document.querySelector("#highlighting-content");
-    // Handle final newlines (see article)
-    if(text[text.length-1] == "\n") {
-      text += " ";
-    }
-    // Update code
-    result_element.innerHTML = text.replace(new RegExp("&", "g"), "&amp;").replace(new RegExp("<", "g"), "&lt;"); /* Global RegExp */
-    // Syntax Highlight
-    Prism.highlightElement(result_element);
-  }
-  
-  function sync_scroll(element) {
-    /* Scroll result to scroll coords of event - sync with textarea */
-    let result_element = document.querySelector("#highlighting");
-    // Get and set x and y
-    result_element.scrollTop = element.scrollTop;
-    result_element.scrollLeft = element.scrollLeft;
-  }
-  
-  function check_tab(element, event) {
-    let code = element.value;
-    if(event.key == "Tab") {
-      /* Tab key pressed */
-      event.preventDefault(); // stop normal
-      let before_tab = code.slice(0, element.selectionStart); // text before tab
-      let after_tab = code.slice(element.selectionEnd, element.value.length); // text after tab
-      let cursor_pos = element.selectionEnd + 1; // where cursor moves after tab - moving forward by 1 char to after tab
-      element.value = before_tab + "\t" + after_tab; // add tab char
-      // move cursor
-      element.selectionStart = cursor_pos;
-      element.selectionEnd = cursor_pos;
-      update(element.value); // Update text to include indent
-    }
-  }

templates/base/footer.tmpl

@@ -2,7 +2,7 @@
   <script src="/public/js/main.js"></script>
   <!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->
   
-  <script src="public/js/prism1.23.0.min.js"></script>
+  <script src="public/js/main.js"></script>
   <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script> -->
   </body>
 </html>

templates/base/header.tmpl

@@ -5,7 +5,6 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>ConfigUI</title>
-    <link rel="stylesheet" href="/public/css/bulma0.9.3.min.css">
     <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> -->
     <link rel="stylesheet" href="/public/css/main.css">
   </head>

templates/components/editor.tmpl

@@ -0,0 +1,5 @@
+{{define "components/editor"}}
+<code-input class="content" style="height: 70vh; width: 100%" lang="{{.Lang}}" name="editor">
+{{.Content}}
+</code-input>
+{{end}}

templates/components/menu.tmpl

@@ -0,0 +1,20 @@
+{{define "components/menu"}}
+<section class="is-large">
+  <aside class="menu">
+    <p class="menu-label">
+      Files
+    </p>
+    <ul class="menu-list">
+      {{ range .Files }}
+      <li><a>{{ . }}</a></li>
+      {{ end }}
+    </ul>
+    <p class="menu-label">
+      ConfigUI
+    </p>
+    <ul class="menu-list">
+      <li><a{{if eq .Active "ConfigUI"}} class="is-active"{{end}}>config.json</a></li>
+    </ul>
+  </aside>
+</section>
+{{end}}

templates/home.tmpl

@@ -14,24 +14,7 @@
 <div class="tile is-ancestor mx-2">
   <div class="tile is-3 is-vertical is-parent">
     <div class="tile is-child box">
-      <section class="is-large">
+      {{template "components/menu" .}}
-        <aside class="menu">
-          <p class="menu-label">
-            Files
-          </p>
-          <ul class="menu-list">
-            {{ range .Files }}
-            <li><a>{{ . }}</a></li>
-            {{ end }}
-          </ul>
-          <p class="menu-label">
-            ConfigUI
-          </p>
-          <ul class="menu-list">
-            <li><a{{if eq .Active "ConfigUI"}} class="is-active"{{end}}>config.json</a></li>
-          </ul>
-        </aside>
-      </section>
     </div>
     <div class="tile is-child box">
       <p class="title">Two</p>
@@ -40,12 +23,7 @@
   <div class="tile is-parent">
     <div class="tile is-child box">
       <p class="title">Three</p>
-        <textarea class="content" placeholder="Enter HTML Source Code" id="editing" spellcheck="false" oninput="update(this.value); sync_scroll(this);" onscroll="sync_scroll(this);" onkeydown="check_tab(this, event);"></textarea>
+      {{template "components/editor" .}}
-        <pre id="highlighting" aria-hidden="true">
-          <code class="language-html" id="highlighting-content">{{.Content}}</code>
-        </pre>
-
-      <!-- <code-input class="content" id="edit" lang="{{.Lang}}" name="config">{{.Content}}</code-input> -->
     </div>
   </div>
 </div>