91 lines
2.0 KiB
JavaScript
91 lines
2.0 KiB
JavaScript
|
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();
|