woweb-poc/woweb/assets/index.js

91 lines
2.0 KiB
JavaScript
Raw Normal View History

import init, { State } from "/dist_text_js.js";
await init();
const areaId = "doctext";
const validEvents = [
"insertText",
"insertFromPaste",
"insertLineBreak",
"insertCompositionText",
"deleteContentBackward",
"deleteContentForward",
];
let selectionStart = 0;
let selectionEnd = 0;
let area;
let ws;
const uuid = self.crypto.randomUUID();
const wsUrl = "ws://localhost:3000/ws";
const state = State.default();
function setup() {
area = document.querySelector(`#${areaId}`);
ws = new WebSocket(wsUrl);
setupUi();
setupWs();
}
function setupUi() {
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.onmessage = function (e) {
let payload = JSON.parse(e.data);
if (payload.client !== uuid) {
const newText = state.apply(payload.ops);
state.text = payload.ops.length > 0 ? newText : payload.doc;
area.value = state.text;
}
};
}
function onSelectionChange() {
const activeElement = document.activeElement;
if (activeElement && activeElement.id === areaId) {
selectionStart = area.selectionStart;
selectionEnd = area.selectionEnd;
}
}
function onInput(event) {
const data = event.data ? event.data : "";
let ops = state.execute(event.inputType, selectionStart, selectionEnd, data, uuid);
if (!validEvents.includes(event.inputType)) return;
const payload = {
client: uuid,
ops
};
ws.send(JSON.stringify(payload));
console.log(selectionStart, selectionEnd);
// 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 - 1;
selectionEnd = area.selectionEnd - 1;
}
}
setup();