selection update

lib/render.js

@@ -0,0 +1,40 @@
+export function render(buffer, cursor, selection) {
+  const range = selectedRange(selection);
+
+  const html = buffer.map((line, i) => {
+    const chars = [];
+    for (let c = 0; c <= line.length; c++) {
+      if (i === cursor.line && c === cursor.col)
+        chars.push(`<span class="cursor"></span>`);
+      if (c < line.length) {
+        const inSel = range &&
+          (i > range.start.line || (i === range.start.line && c >= range.start.col)) &&
+          (i < range.end.line || (i === range.end.line && c < range.end.col));
+        const ch = escapeChar(line[c]);
+        chars.push(inSel ? `<span class="selection">${ch}</span>` : ch);
+      }
+    }
+    if (i === cursor.line && cursor.col >= line.length)
+      chars.push(`<span class="cursor"></span>`);
+    return `<span>${chars.join("")}</span>`;
+  });
+
+  document.getElementById("text").innerHTML = html.join("<br>");
+}
+
+function selectedRange(selection) {
+  if (selection.anchor === null || selection.head === null) return null;
+  const a = selection.anchor;
+  const h = selection.head;
+  if (a.line === h.line && a.col === h.col) return null;
+  if (a.line < h.line || (a.line === h.line && a.col < h.col))
+    return { start: { ...a }, end: { ...h } };
+  return { start: { ...h }, end: { ...a } };
+}
+
+function escapeChar(c) {
+  if (c === "&") return "&amp;";
+  if (c === "<") return "&lt;";
+  if (c === ">") return "&gt;";
+  return c;
+}