init

index.html

@@ -0,0 +1,19 @@
+<script type="module" src="main.js"></script>
+<script src="parser.js"></script>
+<div id="text"></div>
+<style>
+    #text {
+        white-space: pre;
+    }
+    .cursor {
+        border-left: 2px solid #000;
+        margin-left: -1px;
+        margin-right: -1px;
+        animation: blink 1s step-end infinite;
+    }
+    @keyframes blink {
+        50% {
+            border-color: transparent;
+        }
+    }
+</style>

input.js

@@ -0,0 +1,71 @@
+export function setupInput(buffer, cursor, onChange) {
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      if (cursor.line > 0) cursor.line--;
+      cursor.col = Math.min(cursor.col, buffer[cursor.line].length);
+      onChange();
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (cursor.line < buffer.length - 1) cursor.line++;
+      cursor.col = Math.min(cursor.col, buffer[cursor.line].length);
+      onChange();
+      return;
+    }
+    if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      if (cursor.col > 0) cursor.col--;
+      else if (cursor.line > 0) {
+        cursor.line--;
+        cursor.col = buffer[cursor.line].length;
+      }
+      onChange();
+      return;
+    }
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      if (cursor.col < buffer[cursor.line].length) cursor.col++;
+      else if (cursor.line < buffer.length - 1) {
+        cursor.line++;
+        cursor.col = 0;
+      }
+      onChange();
+      return;
+    }
+    if (e.key === "Backspace") {
+      e.preventDefault();
+      if (cursor.col > 0) {
+        const line = buffer[cursor.line];
+        buffer[cursor.line] = line.slice(0, cursor.col - 1) + line.slice(cursor.col);
+        cursor.col--;
+      } else if (cursor.line > 0) {
+        cursor.col = buffer[cursor.line - 1].length;
+        buffer[cursor.line - 1] += buffer[cursor.line];
+        buffer.splice(cursor.line, 1);
+        cursor.line--;
+      }
+      onChange();
+      return;
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      const line = buffer[cursor.line];
+      const rest = line.slice(cursor.col);
+      buffer[cursor.line] = line.slice(0, cursor.col);
+      buffer.splice(cursor.line + 1, 0, rest);
+      cursor.line++;
+      cursor.col = 0;
+      onChange();
+      return;
+    }
+    if (e.key.length === 1) {
+      e.preventDefault();
+      const line = buffer[cursor.line];
+      buffer[cursor.line] = line.slice(0, cursor.col) + e.key + line.slice(cursor.col);
+      cursor.col++;
+      onChange();
+    }
+  });
+}

main.js

@@ -0,0 +1,20 @@
+import { render } from "./render.js";
+import { setupInput } from "./input.js";
+
+const buffer = ["Hello, world!", "Second line."];
+const cursor = { line: 0, col: 0 };
+
+function onChange() {
+  render(buffer, cursor);
+  try {
+    console.log(buffer.map((line) => JSON.parse(App.testing(line))));
+  } catch (e) {
+    console.error(e);
+  }
+  document.getElementById("text").innerHTML += "<br>";
+}
+
+function escapeHtml(s) {}
+
+setupInput(buffer, cursor, onChange);
+render(buffer, cursor);

render.js

@@ -0,0 +1,13 @@
+export function render(buffer, cursor) {
+  const html = buffer.map((line, i) => {
+    if (i !== cursor.line) return `<span>${escapeHtml(line)}</span>`;
+    const before = escapeHtml(line.slice(0, cursor.col));
+    const after = escapeHtml(line.slice(cursor.col));
+    return `<span>${before}<span class="cursor"></span>${after}</span>`;
+  });
+  document.getElementById("text").innerHTML = html.join("<br>");
+}
+
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}