open-collaboration-monaco/lib/example.js

Connect a single Monaco Editor to an Open Collaboration Tools session

// ******************************************************************************
// 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';
const value = `function sayHello(): string {
    return "Hello";
};`;
const workerLoaders = {
    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) => {
                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').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').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) => {
            let loginText = 'Failed to login';
            if (userAuthToken) {
                loginText = 'Successfully logged in';
            }
            document.getElementById('user').innerText = loginText;
        });
    });
}
//# sourceMappingURL=example.js.map