huge improvements to tour editor

Author: cyteon

web/package-lock.json

@@ -0,0 +1,63 @@
+import { StreamLanguage, StringStream } from "@codemirror/language";
+
+export default StreamLanguage.define({
+    startState() {
+        return {
+            inString: false,
+            inComment: false,
+        };
+    },
+ 
+    token(stream: StringStream, state: any): string | null {
+        if (stream.eatSpace()) return null;
+
+        if (stream.match("//")) {
+            stream.skipToEnd();
+            return "comment";
+        }
+
+        if (stream.match('"')) {
+            while (!stream.eol()) {
+                const ch = stream.next();
+                if (ch === "\\") {
+                    stream.next();r
+                } else if (ch === '"') {
+                    break;
+                }
+            }
+
+            return "string";
+        }
+
+        if (stream.match(/^[0-9]+\.[0-9]+/)) return "number";
+        if (stream.match(/^[0-9]+/)) return "number";
+
+        if (stream.match("..=") || stream.match("..")) return "operator";
+        if (stream.match("+=") || stream.match("-=") || stream.match("*=") || stream.match("/=") || stream.match("%=")) return "operator";
+        if (stream.match("==") || stream.match("!=") || stream.match(">=") || stream.match("<=")) return "operator";
+        if (stream.match(/^[+\-*/%=<>!]/)) return "operator";
+
+        if (stream.match(/^[{}\[\]()]/)) return "bracket";
+        if (stream.match(/^[;,.]/)) return "punctuation";
+
+        if (stream.match(/^[a-zA-Z_][a-zA-Z0-9_]*/)) {
+            const word = stream.current();
+ 
+            const keywords = [
+                "let", "fn", "class", "import",
+                "if", "else", "for", "while", "loop", "in",
+                "return", "break", "continue", "self"
+            ];
+ 
+            if (keywords.includes(word)) return "keyword";
+            if (word === "true" || word === "false") return "bool";
+            if (word === "null") return "atom";
+            if (word === "self") return "variableName.special";
+ 
+            return "variableName";
+        }
+
+        stream.next();
+        return null;
+    }
+});

web/src/lib/moduSyntax.ts

@@ -1,5 +1,10 @@
 ## Hello, World!
-hi
+Welcome to the modu language tour! This tour will teach you the basics of the modu programming language.
+The code examples are editable and can be ran by pressing the run button in the bottom right of the input,
+but normally code is ran with `modu run <file>.modu` or through the repl with `modu repl`.
 
 [CODE]
+// This is a comment!
+// The code below prints "Hello, World!"
+// Try to change it!
 print("Hello, World!");

web/src/lib/tour/pages/hello-world.md

@@ -2,11 +2,18 @@
     import { Play } from "lucide-svelte";
     import { basicSetup, EditorView } from "codemirror";
     import { EditorState, Compartment } from "@codemirror/state"
+    import { HighlightStyle, syntaxHighlighting, bracketMatching, indentUnit } from "@codemirror/language"
+    import { tags } from "@lezer/highlight"
+    import { keymap } from "@codemirror/view";
+    import { indentWithTab } from "@codemirror/commands";
+    import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
+
     import { onMount, onDestroy } from "svelte";
+    import { AnsiUp } from "ansi_up";
 
     import Navbar from '$lib/navbar.svelte';
     import { getLesson, getNext, getPrevious } from '$lib/tour/data';
-    import { AnsiUp } from "ansi_up";
+    import moduSyntax from "$lib/moduSyntax.js";
 
     let slug: string;
 
@@ -21,7 +28,12 @@
             doc: "",
             extensions: [
                 basicSetup,
-                tabsize.of(EditorState.tabSize.of(4)),
+                EditorState.tabSize.of(4),
+                indentUnit.of("    "),
+                language.of(moduSyntax),
+                keymap.of([indentWithTab, ...closeBracketsKeymap]),
+                closeBrackets(),
+                bracketMatching(),
                 EditorView.theme({
                     "&": {
                         color: "#fbf1c7",
@@ -53,7 +65,19 @@
                         border: "none",
                     },
 
-                }, { dark: true })
+                }, { dark: true }),
+                syntaxHighlighting(HighlightStyle.define([
+                    { tag: tags.string, color: "#a6e3a1" },
+                    { tag: tags.keyword, color: "#cba6f7" },
+                    { tag: tags.atom, color: "#f38ba8" },
+                    { tag: tags.escape, color: "#f5c2e7" },
+                    { tag: tags.comment, color: "#a89984" },
+                    { tag: tags.number, color: "#fab387" },
+                    { tag: tags.float, color: "#fab387" },
+                    { tag: tags.operator, color: "#89dceb" },
+                    { tag: tags.brace, color: "#a89984" },
+                    { tag: tags.bool, color: "#89b4fa" }
+                ])),
             ]
         });
 
@@ -94,8 +118,6 @@
 
                     run(); // run code on load
                 }
-
-                console.log(lesson);
             })();
         }
     }
@@ -126,7 +148,7 @@
             <div class="prose max-w-none border border-bg2 py-2 px-4 rounded-lg flex-1">{@html html}</div>
             <div class="mt-6 text-center">
                 <a href={getPrevious(slug)} class={`text-blue hover:underline ${!getPrevious(slug) && "opacity-50 cursor-not-allowed"}`}>&lt; previous</a>
-                <span class="mx-2 text-fg2">—</span>
+                <span class="mx-2 text-[#7c6d67]">—</span>
                 <a href={getNext(slug)} class={`text-blue hover:underline ${!getNext(slug) && "opacity-50 cursor-not-allowed"}`}>next &gt;</a>
             </div>
         </div>