@hereugo/open-collaboration-monaco 0.3.3

package/src/collaboration-peer.ts

@@ -0,0 +1,133 @@
+// ******************************************************************************
+// Copyright 2024 TypeFox GmbH
+// This program and the accompanying materials are made available under the
+// terms of the MIT License, which is available in the project root.
+// ******************************************************************************
+
+import * as types from '@hereugo/open-collaboration-protocol';
+import * as awarenessProtocol from 'y-protocols/awareness';
+
+type PeerDecorationOptions = {
+    selectionClassName: string;
+    cursorClassName: string;
+    cursorInvertedClassName: string;
+};
+
+export class DisposablePeer {
+
+    readonly peer: types.Peer;
+    color: string | undefined;
+
+    private yjsAwareness: awarenessProtocol.Awareness;
+
+    readonly decoration: PeerDecorationOptions;
+
+    get clientId(): number | undefined {
+        const states = this.yjsAwareness.getStates() as Map<number, types.ClientAwareness>;
+        for (const [clientID, state] of states.entries()) {
+            if (state.peer === this.peer.id) {
+                return clientID;
+            }
+        }
+        return undefined;
+    }
+
+    get lastUpdated(): number | undefined {
+        const clientId = this.clientId;
+        if (clientId !== undefined) {
+            const meta = this.yjsAwareness.meta.get(clientId);
+            if (meta) {
+                return meta.lastUpdated;
+            }
+        }
+        return undefined;
+    }
+
+    constructor(yAwareness: awarenessProtocol.Awareness, peer: types.Peer) {
+        this.peer = peer;
+        this.yjsAwareness = yAwareness;
+        this.decoration = this.createDecorations();
+    }
+
+    private createDecorations(): PeerDecorationOptions {
+        const color = createColor();
+        const colorCss = typeof color === 'string' ? color : `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
+        this.color = colorCss;
+        const className = `peer-${this.peer.id}`;
+        const cursorClassName = `${className}-cursor`;
+        const cursorInvertedClassName = `${className}-cursor-inverted`;
+        const selectionClassName = `${className}-selection`;
+        const cursorCss = `.${cursorClassName} {
+            background-color: ${colorCss} !important;
+            border-color: ${colorCss} !important;
+            position: absolute;
+            border-right: solid 2px;
+            border-top: solid 2px;
+            border-bottom: solid 2px;
+            height: 100%;
+            box-sizing: border-box;
+        }`;
+        generateCSS(cursorCss);
+        const cursorAfterCss = `.${cursorClassName}::after {
+            content: "${this.peer.name}";
+            position: absolute;
+            transform: translateY(-100%);
+            padding: 0 4px;
+            border-radius: 4px 4px 4px 0px;
+            background-color: ${colorCss};
+        }`;
+        generateCSS(cursorAfterCss);
+        const cursorAfterInvertedCss = `.${cursorClassName}.${cursorInvertedClassName}::after {
+            transform: translateY(100%);
+            margin-top: -2px;
+            border-radius: 0px 4px 4px 4px;
+            z-index: 1;
+        }`;
+        generateCSS(cursorAfterInvertedCss);
+        const selectionCss = `.${selectionClassName} {
+            background: ${colorCss} !important;
+            opacity: 0.25;
+        }`;
+        generateCSS(selectionCss);
+        return {
+            cursorClassName,
+            cursorInvertedClassName,
+            selectionClassName
+        };
+    }
+
+}
+
+let colorIndex = 0;
+const defaultColors: Array<[number, number, number] | string> = [
+    'yellow', // Yellow
+    'green', // Green
+    'magenta', // Magenta
+    'lightGreen', // Light green
+    [255, 178, 123], // Light orange
+    [255, 157, 242], // Light magenta
+    [92, 45, 145], // Purple
+    [0, 178, 148], // Light teal
+    [255, 241, 0], // Light yellow
+    [180, 160, 255] // Light purple
+];
+
+const knownColors = new Set<string>();
+function createColor(): [number, number, number] | string {
+    if (colorIndex < defaultColors.length) {
+        return defaultColors[colorIndex++];
+    }
+    const o = Math.round, r = Math.random, s = 255;
+    let color: [number, number, number];
+    do {
+        color = [o(r() * s), o(r() * s), o(r() * s)];
+    } while (knownColors.has(JSON.stringify(color)));
+    knownColors.add(JSON.stringify(color));
+    return color;
+}
+
+function generateCSS(cssText: string) {
+    const style: HTMLStyleElement = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+}

package/src/example.ts

@@ -0,0 +1,96 @@
+// ******************************************************************************
+// Copyright 2024 TypeFox GmbH
+// This program and the accompanying materials are made available under the
+// terms of the MIT License, which is available in the project root.
+// ******************************************************************************
+
+import * as monaco from 'monaco-editor';
+import { monacoCollab } from './monaco-api.js';
+import { User } from '@hereugo/open-collaboration-protocol';
+
+const value = `function sayHello(): string {
+    return "Hello";
+};`;
+
+export type WorkerLoader = () => Worker
+const workerLoaders: Partial<Record<string, WorkerLoader>> = {
+    editorWorkerService: () =>
+        new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url), {
+            type: 'module'
+        }),
+    typescript: () =>
+        new Worker(new URL('monaco-editor/esm/vs/language/typescript/ts.worker.js', import.meta.url), {
+            type: 'module'
+        })
+};
+
+window.MonacoEnvironment = {
+    getWorker: function(moduleId, label) {
+        const workerFactory = workerLoaders[label];
+        if (workerFactory !== undefined && workerFactory !== null) {
+            return workerFactory();
+        }
+        throw new Error(`Unimplemented worker ${label} (${moduleId})`);
+    }
+};
+
+const container = document.getElementById('container');
+if (container) {
+    const myEditor = monaco.editor.create(container, {
+        value,
+        language: 'typescript'
+    });
+
+    const monacoCollabApi = monacoCollab({
+        serverUrl: 'http://localhost:8100',
+        callbacks: {
+            onUserRequestsAccess: (user: User) => {
+                console.log('User requests access', user);
+                return Promise.resolve(true);
+            }
+        }
+    });
+
+    // on click of button with id create create room, call createRoom, take the value from response and set it in textfield with id token
+    const createRoomButton = document.getElementById('create');
+    createRoomButton?.addEventListener('click', () => {
+        monacoCollabApi.createRoom().then(token => {
+            if (token) {
+                monacoCollabApi.setEditor(myEditor);
+                (document.getElementById('token') as HTMLInputElement).value = token ?? '';
+            }
+        });
+    });
+
+    // on click of join room button take value from textfield with id room and call joinRoom
+    const joinRoomButton = document.getElementById('join');
+    joinRoomButton?.addEventListener('click', () => {
+        const roomToken = (document.getElementById('room') as HTMLInputElement).value;
+        monacoCollabApi.joinRoom(roomToken).then(state => {
+            if (state) {
+                monacoCollabApi.setEditor(myEditor);
+                monacoCollabApi.onUsersChanged(() => {
+                    monacoCollabApi.getUserData().then(userData => {
+                        const host = userData?.others.find(u => u.peer.host);
+                        if (host && monacoCollabApi.getFollowedUser() === undefined) {
+                            monacoCollabApi.followUser(host.peer.id);
+                        }
+                    });
+                });
+            }
+            console.log('Joined room');
+        });
+    });
+
+    // on click of button with id login call login
+    const loginButton = document.getElementById('login');
+    loginButton?.addEventListener('click', () => {
+        monacoCollabApi.login().then((userAuthToken?: string) => {
+            let loginText = 'Failed to login';
+            if (userAuthToken) {
+                loginText = 'Successfully logged in';
+            }
+            document.getElementById('user')!.innerText = loginText;
+        });
+    });
+}

package/src/index.ts

@@ -0,0 +1,11 @@
+// ******************************************************************************
+// Copyright 2024 TypeFox GmbH
+// This program and the accompanying materials are made available under the
+// terms of the MIT License, which is available in the project root.
+// ******************************************************************************
+
+export * from './collaboration-connection.js';
+export * from './collaboration-instance.js';
+export * from './collaboration-peer.js';
+export * from './types.js';
+export * from './monaco-api.js';

package/src/monaco-api.ts

@@ -0,0 +1,235 @@
+// ******************************************************************************
+// Copyright 2024 TypeFox GmbH
+// This program and the accompanying materials are made available under the
+// terms of the MIT License, which is available in the project root.
+// ******************************************************************************
+
+import { ConnectionProvider, SocketIoTransportProvider } from '@hereugo/open-collaboration-protocol';
+import { CollaborationInstance, UsersChangeEvent, FileNameChangeEvent } from './collaboration-instance.js';
+import * as types from '@hereugo/open-collaboration-protocol';
+import { createRoom, joinRoom, login } from './collaboration-connection.js';
+import * as monaco from 'monaco-editor';
+
+let connectionProvider: ConnectionProvider | undefined;
+let instance: CollaborationInstance | undefined;
+
+types.initializeProtocol({
+    cryptoModule: globalThis.crypto
+});
+
+export type MonacoCollabCallbacks = {
+    onUserRequestsAccess: (user: types.User) => Promise<boolean>;
+    /**
+     * reports the status when joining or creating a room
+     * @param info information about the changed status
+     */
+    statusReporter?: (info: types.Info) => void;
+}
+
+export type MonacoCollabOptions = {
+    serverUrl: string;
+    callbacks: MonacoCollabCallbacks;
+    userToken?: string;
+    roomToken?: string;
+    useCookieAuth?: boolean;
+    loginPageOpener?: (token: string, authenticationMetadata: types.AuthMetadata) => Promise<boolean>;
+};
+
+export type OtherUserData = {peer: types.Peer, color: string};
+export type UserData = {me: types.Peer, others: OtherUserData[]};
+
+export type MonacoCollabApi = {
+    createRoom: () => Promise<string | undefined>
+    joinRoom: (roomToken: string) => Promise<string | undefined>
+    leaveRoom: () => void
+    login: () => Promise<string | undefined>
+    logout: () => Promise<void | undefined>
+    isLoggedIn: () => Promise<boolean>
+    setEditor: (editor: monaco.editor.IStandaloneCodeEditor) => void
+    getUserData: () => Promise<UserData | undefined>
+    onUsersChanged: (evt: UsersChangeEvent) => void
+    onFileNameChange: (callback: FileNameChangeEvent) => void
+    getCurrentConnection: () => types.ProtocolBroadcastConnection | undefined
+    followUser: (id?: string) => void
+    getFollowedUser: () => string | undefined
+    setFileName: (fileName: string) => void
+    getFileName: () => string | undefined
+    setWorkspaceName: (workspaceName: string) => void
+    getWorkspaceName: () => string | undefined
+}
+
+export function monacoCollab(options: MonacoCollabOptions): MonacoCollabApi {
+    connectionProvider = new ConnectionProvider({
+        url: options.serverUrl,
+        authenticationHandler: options.loginPageOpener ?? (async (_token, metaData) => {
+            // If this returns null, it means the window could not be opened and the authentication failed
+            return window.open(metaData.loginPageUrl, '_blank') !== null;
+        }),
+        transports: [SocketIoTransportProvider],
+        userToken: options.userToken,
+        useCookieAuth: options.useCookieAuth,
+        fetch: async (url, options) => {
+            const response = await fetch(url, options);
+            return {
+                ok: response.ok,
+                status: response.status,
+                json: async () => response.json(),
+                text: async () => response.text()
+            };
+        }
+    });
+
+    const doCreateRoom = async () => {
+        console.log('Creating room');
+
+        if (!connectionProvider) {
+            console.log('No OCT Server configured.');
+            throw new Error('No OCT Server configured.');
+        }
+
+        instance = await createRoom(connectionProvider, options.callbacks);
+        if (instance) {
+            return instance.roomId;
+        }
+        throw new Error('Failed to create room');
+    };
+
+    const doJoinRoom = async (roomToken: string) => {
+        console.log('Joining room', roomToken);
+
+        if (!connectionProvider) {
+            console.log('No OCT Server configured.');
+            throw new Error('No OCT Server configured.');
+        }
+
+        const res = await joinRoom(connectionProvider, options.callbacks, roomToken);
+        if (res && 'message' in res) {
+            console.log('Failed to join room: ', res.message);
+            throw new Error('Failed to join room: ' + res.message);
+        } else {
+            instance = res;
+            return instance.roomId;
+        }
+    };
+
+    const doLogin = async () => {
+        if (!connectionProvider) {
+            console.log('No OCT Server configured.');
+            throw new Error('No OCT Server configured.');
+        }
+        await login(connectionProvider);
+        return connectionProvider.authToken;
+    };
+
+    const doSetEditor = (editor: monaco.editor.IStandaloneCodeEditor) => {
+        if (instance) {
+            instance.setEditor(editor);
+        }
+    };
+
+    const doGetUserData = async () => {
+        let data: UserData | undefined;
+        if (instance) {
+            const me: types.Peer = await instance.ownUserData;
+            const others = instance.connectedUsers.map(
+                user => ({
+                    peer: user.peer,
+                    color: user.color ?? 'rgba(0, 0, 0, 0.5)'
+                }));
+            data = {me, others};
+        }
+        return data;
+    };
+
+    const registerUserChangeHandler = (evt: UsersChangeEvent) => {
+        if (instance) {
+            instance.onUsersChanged(evt);
+        }
+    };
+
+    const doFollowUser = (id?: string) => {
+        if (instance) {
+            instance.followUser(id);
+        }
+    };
+
+    const doGetFollowedUser = () => {
+        if (instance) {
+            return instance.following;
+        }
+        return undefined;
+    };
+
+    const doSetFileName = (fileName: string) => {
+        if (instance) {
+            instance.setFileName(fileName);
+        }
+    };
+
+    const doGetWorkspaceName = () => {
+        if (instance) {
+            return instance.workspaceName;
+        }
+        return undefined;
+    };
+
+    const doGetFileName = () => {
+        if (instance) {
+            return instance.fileName;
+        }
+        return undefined;
+    };
+
+    const registerFileNameChangeHandler = (callback: FileNameChangeEvent) => {
+        if (instance) {
+            instance.onFileNameChange(callback);
+        }
+    };
+
+    const doSetWorkspaceName = (workspaceName: string) => {
+        if (instance) {
+            instance.workspaceName = workspaceName;
+        }
+    };
+
+    const isLoggedIn = async () => {
+        if (!connectionProvider) {
+            return false;
+        }
+
+        if (options.useCookieAuth) {
+            const valid = await fetch(options.serverUrl + '/api/login/validate', {
+                credentials: 'include',
+                method: 'POST',
+            });
+            return valid.ok && (await valid.json())?.valid;
+        } else {
+            return !!connectionProvider.authToken;
+        }
+    };
+
+    return {
+        createRoom: doCreateRoom,
+        joinRoom: doJoinRoom,
+        leaveRoom: () => instance?.leaveRoom(),
+        login: doLogin,
+        logout: async () => connectionProvider?.logout(),
+        isLoggedIn: isLoggedIn,
+        setEditor: doSetEditor,
+        getUserData: doGetUserData,
+        onUsersChanged: registerUserChangeHandler,
+        onFileNameChange: registerFileNameChangeHandler,
+        followUser: doFollowUser,
+        getFollowedUser: doGetFollowedUser,
+        getCurrentConnection: () => instance?.getCurrentConnection(),
+        setFileName: doSetFileName,
+        getFileName: doGetFileName,
+        getWorkspaceName: doGetWorkspaceName,
+        setWorkspaceName: doSetWorkspaceName
+    };
+
+}
+
+export function deactivate() {
+    instance?.dispose();
+}

package/src/types.ts

@@ -0,0 +1,9 @@
+// ******************************************************************************
+// Copyright 2025 TypeFox GmbH
+// This program and the accompanying materials are made available under the
+// terms of the MIT License, which is available in the project root.
+// ******************************************************************************
+
+export type { Peer } from '@hereugo/open-collaboration-protocol';
+export type { User } from '@hereugo/open-collaboration-protocol';
+export type { AuthMetadata } from '@hereugo/open-collaboration-protocol';