Feat: Enable highlight for syntax and identation.

Author: dylan-sutton-chavez

demo/index.html

@@ -78,15 +78,9 @@ <h1 class="font-semibold">Edge Python Playground</h1>
             <div class="flex flex-1 code-font text-sm overflow-hidden">
                 <pre id="ln" aria-hidden="true" class="no-scrollbar pt-2 pb-2 text-[#525252] text-center bg-[#2d2d2d] select-none border-r border-[#2d2d2d] overflow-y-hidden flex-none w-[35px]"></pre>
 
-                <label for="ed" class="sr-only">Python source code</label>
-                <textarea id="ed"
-                    class="no-scrollbar w-full bg-transparent p-2 outline-none resize-none text-[#c2c2c2] placeholder-[#404040] overflow-y-auto"
-                    spellcheck="false"
-                    autocomplete="off"
-                    autocorrect="off"
-                    autocapitalize="off"
-                    aria-label="Python source code editor"
-                    placeholder="Type your Python code here..."></textarea>
+                <div id="ed"
+                    class="no-scrollbar flex-1 p-2 text-[#c2c2c2] overflow-y-auto"
+                    aria-label="Python source code editor"></div>
             </div>
         </section>
 

demo/main.js

@@ -1,3 +1,5 @@
+import { CodeJar } from 'https://esm.sh/codejar@4';
+
 const SZ = 1 << 20;
 const DEV = !['demo.edgepython.com'].includes(location.hostname);
 const WASM_SOURCES = DEV
@@ -12,6 +14,53 @@ const MAX_LINES = 99;
 const $ = (id) => document.getElementById(id);
 const [ed, ln, btn, term, statusEl] = ['ed', 'ln', 'run', 'term', 'status'].map($);
 
+const KW = new Set([
+    'as','if','in','is','or',
+    'and','def','del','for','not','try',
+    'case','elif','else','from','pass','type','with',
+    'async','await','break','class','match','raise','while','yield',
+    'assert','except','global','import','lambda','return',
+    'finally',
+    'continue','nonlocal'
+]);
+const BI = new Set([
+    'print','len','range','int','str','float','list','dict','tuple','set',
+    'bool','isinstance','issubclass','enumerate','zip','map','filter',
+    'abs','min','max','sum','round','pow','divmod','hash','id','repr',
+    'ord','chr','hex','oct','bin','open','input','iter','next','reversed','sorted',
+    'any','all','format','frozenset','bytearray','bytes','complex','memoryview',
+    'object','property','staticmethod','classmethod','super','slice',
+    'callable','getattr','setattr','hasattr','delattr','dir','vars','globals','locals',
+    'NotImplemented','Ellipsis','self','cls'
+]);
+const LIT = new Set(['True','False','None']);
+
+const TOKEN_RE = /(#[^\n]*)|((?:\b[fFrRbBuU]{1,2})?(?:"""[\s\S]*?"""|'''[\s\S]*?'''|"(?:\\.|[^"\\\n])*"|'(?:\\.|[^'\\\n])*'))|(0[xX][\da-fA-F_]+|0[oO][0-7_]+|0[bB][01_]+|\d[\d_]*(?:\.[\d_]*)?(?:[eE][+-]?\d+)?[jJ]?|\.\d[\d_]*(?:[eE][+-]?\d+)?[jJ]?)|([A-Za-z_]\w*)/g;
+
+const esc = (s) => s.replace(/[&<>]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' }[c]));
+
+const highlight = (src) => esc(src).replace(TOKEN_RE, (m, com, str, num, word) => {
+    if (com)  return `<span class="tk-com">${com}</span>`;
+    if (str)  return `<span class="tk-str">${str}</span>`;
+    if (num)  return `<span class="tk-num">${num}</span>`;
+    if (word) {
+        if (KW.has(word))  return `<span class="tk-kw">${word}</span>`;
+        if (LIT.has(word)) return `<span class="tk-lit">${word}</span>`;
+        if (BI.has(word))  return `<span class="tk-bi">${word}</span>`;
+        return word;
+    }
+    return m;
+});
+
+const jar = CodeJar(ed, (editor) => {
+    editor.innerHTML = highlight(editor.textContent);
+}, {
+    tab: '    ',
+    indentOn: /:\s*$/,
+    spellcheck: false,
+    addClosing: false,
+});
+
 let wasm;
 
 const fmt = (ms) => ms < 1000 ? `${ms.toFixed(0)}ms` : `${(ms / 1000).toFixed(2)}s`;
@@ -43,13 +92,13 @@ const loadWasm = async () => {
 
 const runCode = async () => {
     if (!wasm) return;
-    const srcBytes = new TextEncoder().encode(ed.value);
+    const srcBytes = new TextEncoder().encode(jar.toString());
     if (srcBytes.length > SZ) return void (term.textContent = `Error: Source exceeds ${SZ} bytes`);
 
     setStatus('Running...', CLS.ok);
     btn.disabled = true;
 
-    await new Promise(resolve => setTimeout(resolve, 10));
+    await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
 
     const [out, t] = await time(() => {
         new Uint8Array(wasm.memory.buffer).set(srcBytes, wasm.src_ptr());
@@ -63,21 +112,48 @@ const runCode = async () => {
 };
 
 const sync = () => {
-    const lines = ed.value.split('\n');
-    if (lines.length > MAX_LINES) ed.value = lines.slice(0, MAX_LINES).join('\n');
-    const n = Math.min(ed.value.split('\n').length, MAX_LINES);
+    const text = jar.toString().replace(/\n$/, '');
+    const n = Math.max(1, Math.min(text.split('\n').length, MAX_LINES));
     ln.textContent = Array.from({ length: n }, (_, i) => String(i + 1).padStart(2, '0')).join('\n');
     ln.scrollTop = ed.scrollTop;
 };
 
 btn.addEventListener('click', runCode);
+
 ed.addEventListener('keydown', (e) => {
-    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); runCode(); }
-    else if (e.key === 'Enter' && ed.value.split('\n').length >= MAX_LINES) e.preventDefault();
-});
-ed.oninput = ed.onscroll = sync;
+    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+        e.preventDefault();
+        e.stopPropagation();
+        runCode();
+        return;
+    }
+    if (e.key === 'Enter' && jar.toString().split('\n').length >= MAX_LINES) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+    }
+    if (e.key === 'Backspace') {
+        const pos = jar.save();
+        if (pos.start !== pos.end) return;
+        const caret = pos.start;
+        if (caret === 0) return;
+        const text = jar.toString();
+        const lineStart = text.lastIndexOf('\n', caret - 1) + 1;
+        const before = text.slice(lineStart, caret);
+        if (before.length === 0 || !/^[ \t]+$/.test(before)) return;
+        e.preventDefault();
+        e.stopPropagation();
+        const TAB = 4;
+        const prevStop = Math.floor((before.length - 1) / TAB) * TAB;
+        const del = before.length - prevStop;
+        jar.restore({ start: caret - del, end: caret });
+        document.execCommand('delete');
+    }
+}, true);
+
+ed.addEventListener('scroll', () => { ln.scrollTop = ed.scrollTop; });
 
-ed.value = DEFAULT_CODE;
+jar.onUpdate(sync);
+jar.updateCode(DEFAULT_CODE);
 
-sync();
 loadWasm();

demo/style.css

@@ -4,4 +4,13 @@
 .code-font {
     font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
     line-height: 1.625;
-}
+}
+
+#ed { tab-size: 4; }
+
+.tk-kw { color: #c586c0; }
+.tk-lit { color: #569cd6; }
+.tk-bi { color: #4ec9b0; }
+.tk-num { color: #b5cea8; }
+.tk-str { color: #ce9178; }
+.tk-com { color: #6a9955; font-style: italic; }