58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
|
import { Extension, WebsocketProvider, Y, yCollab } from "./deps.ts";
|
||
|
|
|
||
|
|
const userColors = [
|
||
|
|
{ color: "#30bced", light: "#30bced33" },
|
||
|
|
{ color: "#6eeb83", light: "#6eeb8333" },
|
||
|
|
{ color: "#ffbc42", light: "#ffbc4233" },
|
||
|
|
{ color: "#ecd444", light: "#ecd44433" },
|
||
|
|
{ color: "#ee6352", light: "#ee635233" },
|
||
|
|
{ color: "#9ac2c9", light: "#9ac2c933" },
|
||
|
|
{ color: "#8acb88", light: "#8acb8833" },
|
||
|
|
{ color: "#1be7ff", light: "#1be7ff33" },
|
||
|
|
];
|
||
|
|
|
||
|
|
export class CollabState {
|
||
|
|
ydoc: Y.Doc;
|
||
|
|
collabProvider: WebsocketProvider;
|
||
|
|
ytext: Y.Text;
|
||
|
|
yundoManager: Y.UndoManager;
|
||
|
|
|
||
|
|
constructor(serverUrl: string, token: string, username: string) {
|
||
|
|
this.ydoc = new Y.Doc();
|
||
|
|
this.collabProvider = new WebsocketProvider(
|
||
|
|
serverUrl,
|
||
|
|
token,
|
||
|
|
this.ydoc,
|
||
|
|
);
|
||
|
|
|
||
|
|
this.collabProvider.on("status", (e: any) => {
|
||
|
|
console.log("Collab status change", e);
|
||
|
|
});
|
||
|
|
this.collabProvider.on("sync", (e: any) => {
|
||
|
|
console.log("Sync status", e);
|
||
|
|
});
|
||
|
|
|
||
|
|
this.ytext = this.ydoc.getText("codemirror");
|
||
|
|
this.yundoManager = new Y.UndoManager(this.ytext);
|
||
|
|
|
||
|
|
const randomColor =
|
||
|
|
userColors[Math.floor(Math.random() * userColors.length)];
|
||
|
|
|
||
|
|
this.collabProvider.awareness.setLocalStateField("user", {
|
||
|
|
name: username,
|
||
|
|
color: randomColor.color,
|
||
|
|
colorLight: randomColor.light,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
stop() {
|
||
|
|
this.collabProvider.destroy();
|
||
|
|
}
|
||
|
|
|
||
|
|
collabExtension(): Extension {
|
||
|
|
return yCollab(this.ytext, this.collabProvider.awareness, {
|
||
|
|
undoManager: this.yundoManager,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|