use utf-16 for everything because of javascript

assets/index.js

@@ -1,10 +1,10 @@
 const areaId = "doctext";
 const validEvents = [
-  "insertText",
-  "insertFromPaste",
-  "insertLineBreak",
-  "deleteContentBackward",
-  "deleteContentForward",
+    "insertText",
+    "insertFromPaste",
+    "insertLineBreak",
+    "deleteContentBackward",
+    "deleteContentForward",
 ];
 
 let selectionStart = 0;
@@ -16,60 +16,71 @@ let ws;
 const uuid = self.crypto.randomUUID();
 const wsUrl = "ws://localhost:3000/ws";
 
-function setup() {
-  area = document.querySelector(`#${areaId}`);
-  ws = new WebSocket(wsUrl);
+const textEncoder = new TextEncoder();
+const textDecoder = new TextDecoder();
 
-  setupUi();
-  setupWs();
+function setup() {
+    area = document.querySelector(`#${areaId}`);
+    ws = new WebSocket(wsUrl);
+
+    setupUi();
+    setupWs();
 }
 
 function setupUi() {
-  document.addEventListener("selectionchange", onSelectionChange, false);
-  area.addEventListener("input", onInput, false);
+    document.addEventListener("selectionchange", onSelectionChange, false);
+    area.addEventListener("beforeinput", onInput, false);
 }
 
 function setupWs() {
-  ws.onclose = function (e) {
-    console.log(e);
-    setTimeout(() => {
-      ws = new WebSocket(wsUrl);
-    }, 2000);
-  };
+    ws.onclose = function (e) {
+        console.log(e);
+        setTimeout(() => {
+            ws = new WebSocket(wsUrl);
+        }, 2000);
+    };
 
-  ws.onmessage = function (e) {
-    let payload = JSON.parse(e.data);
-    if (payload.client !== uuid) {
-      area.value = payload.doc;
-    }
-  };
+    ws.onmessage = function (e) {
+        let payload = JSON.parse(e.data);
+        if (payload.client !== uuid) {
+            console.log(payload.doc);
+            area.value = payload.doc;
+        }
+    };
 }
 
 function onSelectionChange() {
-  const activeElement = document.activeElement;
+    const activeElement = document.activeElement;
 
-  if (activeElement && activeElement.id === areaId) {
-    selectionStart = area.selectionStart;
-    selectionEnd = area.selectionEnd;
-  }
+    if (activeElement && activeElement.id === areaId) {
+        console.debug("onSelectionChange", area);
+        selectionStart = area.selectionStart;
+        selectionEnd = area.selectionEnd;
+    }
 }
 
 function onInput(event) {
-  if (!validEvents.includes(event.inputType)) return;
-  const payload = {
-    client: uuid,
-    action: event.inputType,
-    data: event.data,
-    start: selectionStart,
-    end: selectionEnd,
-  };
+    if (!validEvents.includes(event.inputType)) return;
 
-  ws.send(JSON.stringify(payload));
+    // workaround for differences between firefox and chrome
+    // chrome does not fire selectionchange events on backspace/delete events,
+    // while firefox does
+    if (event.inputType === "deleteContentBackward") {
+        selectionStart = area.selectionStart;
+        selectionEnd = area.selectionEnd;
+    }
 
-  console.log(event.inputType);
-  console.log(selectionStart);
-  console.log(selectionEnd);
-  console.log(event.data);
+    const payload = {
+        client: uuid,
+        action: event.inputType,
+        data: event.data,
+        start: selectionStart,
+        end: selectionEnd,
+    };
+
+    ws.send(JSON.stringify(payload));
+
+    console.log(selectionStart, selectionEnd);
 }
 
 setup();