🎨 frontend: Add syntax colouring (#111)

Add evy syntax colouring by implementing a custom highlight function for
lightweight JS code editor Yace.
Copy all relevant Yace source files with minor tweaks into a single file
`frontend/module/yace-editor.js` as we are not (yet) using a JS bundler.

Link: https://github.com/petersolopov/yace
Link: https://github.com/petersolopov/mdhl

This merges the following commits:
* frontend: Copy relevant yace editor source files
* frontend: Reformat Yace
* frontend: Add evy syntax colouring

     frontend/index.css             | 112 +++++-
     frontend/index.html            |  23 +-
     frontend/index.js              |  32 +-
     frontend/module/yace-editor.js | 641 +++++++++++++++++++++++++++++++++
     4 files changed, 771 insertions(+), 37 deletions(-)

Pull-Request: #111

Author: juliaogris

frontend/index.css

@@ -15,6 +15,14 @@
   --output-border-mid: hsl(0deg 0% 85%);
   --output-border-light: hsl(0deg 0% 92%);
 
+  --syntax-num: hsl(204deg 100% 75%);
+  --syntax-string: hsl(203deg 100% 86%);
+  --syntax-func: hsl(266deg 100% 86%);
+  --syntax-builtin: hsl(27deg 100% 74%);
+  --syntax-keyword: hsl(359deg 100% 75%);
+  --syntax-comment: hsl(210deg, 13%, 72%);
+  --syntax-error-bg: hsl(209deg 100% 33%);
+
   --btn-color: hsl(0deg 0% 33%);
   --btn-color-active: hsl(0deg 0% 100%);
   --btn-color-disabled: hsl(0deg 0% 33% / 50%);
@@ -222,30 +230,110 @@ main.view-output {
 }
 
 /* --- Editor --------------------------------------------------------*/
-.editor {
-  padding-top: var(--editor-padding);
+.editor-wrap {
+  margin-top: var(--editor-padding);
+  padding-left: var(--editor-padding);
+  padding-right: var(--editor-padding);
+  padding-bottom: var(--editor-padding-bottom);
   font-size: 1rem;
   flex: 1;
-  overflow: clip;
+  overflow: auto;
   width: var(--editor-width);
 }
-.editor textarea {
-  padding-left: var(--editor-padding);
-  padding-right: var(--editor-padding);
+.editor {
   color: var(--color);
   background: var(--bg);
   font-size: 1rem;
   font-family: var(--ff-code);
   font-variant-ligatures: none;
-  overflow: auto;
-
+  position: relative;
+  overflow: hidden;
+  width: max-content;
+}
+.editor textarea {
+  line-height: inherit;
+  white-space: pre-wrap;
+  background: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
   resize: none;
+  caret-color: var(--color);
+  padding: inherit;
   outline: none;
-  -webkit-text-fill-color: var(--ccolor);
-  height: 100%;
-  width: 100%;
+  font-size: inherit;
+  font-family: inherit;
+  font-variant-ligatures: inherit;
+  letter-spacing: inherit;
   border: none;
-  padding-bottom: var(--editor-padding-bottom);
+  top: 0px;
+  left: 0px;
+  color: transparent;
+  overflow: hidden;
+}
+.editor pre {
+  line-height: inherit;
+  position: relative;
+  white-space: pre-wrap;
+  word-break: keep-all;
+  padding: 0;
+  width: max-content;
+  margin: 0;
+  font-size: inherit;
+  font-family: inherit;
+  font-variant-ligatures: inherit;
+  letter-spacing: inherit;
+  pointer-events: none;
+  font-family: inherit;
+  overflow: hidden;
+}
+.editor pre.lines {
+  position: absolute;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+  pointer-events: none;
+  overflow: auto;
+}
+.editor pre.lines .num {
+  position: aboslute;
+  color: hsl(212deg 8% 47%);
+  left: 0;
+}
+.editor pre.lines .txt {
+  padding-left: 1ch;
+  color: transparent;
+  pointer-events: none;
+}
+.editor .num,
+.editor .bool {
+  color: var(--syntax-num);
+}
+.editor .str {
+  color: var(--syntax-string);
+}
+.editor .func {
+  color: var(--syntax-func);
+}
+.editor .builtin {
+  color: var(--syntax-builtin);
+}
+.editor .keyword {
+  color: var(--syntax-keyword);
+}
+.editor .error {
+  background: var(--syntax-error-bg);
+  color: var(--color);
+  font-style: italic;
+}
+.editor .op {
+  color: var(--syntax-keyword);
+}
+.editor .comment {
+  color: var(--syntax-comment);
+  font-style: italic;
+  font-weight: 300;
 }
 
 /* --- Output --------------------------------------------------------*/

frontend/index.html

@@ -13,14 +13,14 @@
       href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:wght@400;700&display=swap"
     />
     <script src="wasm_exec.js" defer></script>
-    <script src="index.js" defer></script>
+    <script src="index.js" type="module" defer></script>
   </head>
   <body>
     <div class="max-width-wrapper">
       <header>
         <ul class="breadcrumbs">
-          <li><button onclick="showModal()">Getting Started</button></li>
-          <li><button onclick="showModal()">Welcome</button></li>
+          <li><button>Tour</button></li>
+          <li><button>Welcome</button></li>
         </ul>
         <a href="/" class="logo">
           <img src="img/logo.svg" alt="Evy logo" class="desktop" />
@@ -32,21 +32,8 @@
         </div>
       </header>
       <main>
-        <div class="editor">
-          <textarea id="code" spellcheck="false" autocorrect="off" autocapitalize="none" wrap="off">
-move 10 20
-line 50 50
-rect 25 25
-color "red"
-circle 10
-
-x := 12
-print "x:" x
-if x > 10
-    print "🍦 big x"
-end
-</textarea
-          >
+        <div class="editor-wrap">
+          <div class="editor"></div>
         </div>
         <div class="output">
           <div class="canvas">

frontend/index.js

@@ -1,4 +1,5 @@
 "use strict"
+import Yace from "./module/yace-editor.js"
 
 // --- Globals ---------------------------------------------------------
 
@@ -11,7 +12,7 @@ let stopped = true
 let animationStart
 let courses
 let actions = "fmt,ui,eval"
-
+let editor
 // --- Initialise ------------------------------------------------------
 
 initWasm()
@@ -110,14 +111,14 @@ function jsRead() {
 // evySource writes the evy source code into wasm memory as bytes
 // and returns pointer and length encoded into a single 64 bit number
 function evySource() {
-  const code = document.querySelector("#code").value
+  const code = editor.value
   return stringToMemAddr(code)
 }
 
 // setEvySource is exported to evy go/wasm and called after formatting
 function setEvySource(ptr, len) {
   const source = memToString(ptr, len)
-  document.querySelector("#code").value = source
+  editor.update({ value: source })
 }
 
 function memToString(ptr, len) {
@@ -257,7 +258,8 @@ async function initUI() {
   window.addEventListener("hashchange", handleHashChange)
   document.querySelector("#modal-close").onclick = hideModal
   initModal()
-  window.location.hash && handleHashChange()
+  handleHashChange()
+  initEditor()
 }
 
 async function fetchCourses() {
@@ -273,7 +275,7 @@ async function fetchCourses() {
 
 function ctrlEnterListener(e) {
   if ((e.metaKey || e.ctrlKey) && event.key === "Enter") {
-    document.querySelector("#code").blur()
+    document.querySelector(".editor textarea").blur()
     handleRun()
   }
 }
@@ -299,7 +301,8 @@ async function handleHashChange() {
       throw new Error("invalid response status", response.status)
     }
     const source = await response.text()
-    document.querySelector("#code").value = source
+    editor.update({ value: source })
+    document.querySelector(".editor-wrap").scrollTo(0, 0)
     updateBreadcrumbs(crumbs)
     clearOutput()
     format()
@@ -434,6 +437,21 @@ function logicalY(e) {
   return e.offsetY * scaleY - canvas.offset.y
 }
 
+function initEditor() {
+  const value = `move 10 20
+line 50 50
+rect 25 25
+color "red"
+circle 10
+
+x := 12
+print "x:" x
+if x > 10
+    print "🍦 big x"
+end`
+  editor = new Yace(".editor", { value })
+}
+
 // --- eventHandlers, evy `on` -----------------------------------------
 
 // registerEventHandler is exported to evy go/wasm
@@ -552,7 +570,7 @@ function updateBreadcrumbs(crumbs) {
 function breadcrumb(s) {
   const btn = document.createElement("button")
   btn.textContent = s
-  btn.onclick = showModal
+  btn.onclick = () => showModal()
   const li = document.createElement("li")
   li.appendChild(btn)
   return li