How to use a Y.js Provider

[TBenTiCon]

Hi there =)
im currently trying to get the Collaboration Feature to work using the WebsocketProvider by "y-websocket".

I can get it to initially connect with the Websocket by using:

const wsProvider = new WebsocketProvider('ws://localhost:5544', 'my-roomname', page.doc)

But im failing to find the correct place to register it with the editor and sync the clients.

I looked at the playground code, but that one seems to use its own custom provider and indexeddb (which i dont want to use at all).

Can you maybe lead me into the right direction? Is there a specific option, i have to parse to the page on init, so that it auto connects with the provider (similar to tiptap)?

[doodlewind]

Could you try connecting the provider with page.spaceDoc? This is the actual content inside its subdoc. Due to historical reason, the current page.doc is actually the same one with workspace.doc. I plan to rename it as page.rootDoc afterwards.

[TBenTiCon]

Seems to work now, weird. Just had to restart Webstorm a couple of times.
It just has a minor bug in safari, but i guess thats a generell "lit" problem? Works in every other Browser.

[Error] TypeError: Object.hasOwn is not a function. (In 'Object.hasOwn(widgets, AFFINE_FORMAT_BAR_WIDGET)', 'Object.hasOwn' is undefined)
	connectedCallback (chunk-M4OD77LM.js:79023)
	insertBefore
	_commitNode (chunk-ZF4DGBQJ.js:522)
	_commitTemplateResult (chunk-ZF4DGBQJ.js:604)
	_$setValue (chunk-ZF4DGBQJ.js:480)
	render (chunk-ZF4DGBQJ.js:928)
	update (chunk-QS7QUF72.js:51)
	performUpdate (chunk-ZP32ZAEQ.js:716)
	scheduleUpdate (chunk-ZP32ZAEQ.js:660)
	(anonyme Funktion) (chunk-ZP32ZAEQ.js:636)
	asyncFunctionResume
	(anonyme Funktion)
	promiseReactionJobWithoutPromise
[Error] ReferenceError: Can't find variable: requestIdleCallback
	(anonyme Funktion) (chunk-K2QAR2UZ.js:9314)
	

[TBenTiCon]

How would i know get the Provider to show the "colab" cursors, like in the playground? Is that another register, i have to make?

[doodlewind]

The cursor state is also synced over the provider, these are all under the page.awarenessStore to reuse. It's exactly using the Y.Awareness

[TBenTiCon]

how would i set the page.awarenessStore?

I tried this

        const wsProvider = new WebsocketProvider('ws://localhost:5544', room, page.spaceDoc, {
            awareness: page.awarenessStore.awareness,
        });

And while this shows an "unknown" cursor. This cursor always stays at the same position and im getting errors every second;

TypeError: Cannot read properties of undefined (reading 'map')
    at manager.ts:132:10
    at Map.forEach (<anonymous>)
    at get remoteSelections [as remoteSelections] (manager.ts:129:29)
    at question-block.ts:49:48
    at slot.ts:106:9
    at Array.forEach (<anonymous>)
    at _Slot.emit (slot.ts:104:21)
    at awareness.ts:115:25
    at Array.forEach (<anonymous>)
    at AwarenessStore._onAwarenessChange (awareness.ts:114:13)

[TBenTiCon]

Okay, i more or less got it to work. The awarness just doesnt seem to sync, if a block has more than one RichText element. (the indicator for a user, stays in the first one). But that can be ignored for now.

Currently my only remaining hurdle is the correct way to sync the client. . Im having this weird error, where the clients sometimes not sync correctly and then i have to restart them multiple times to work.

This is my current workflow:

1. open a browsertab with the "init" param (like in playground).
2. open a second window, without the init param
3. start writing

I now have the following problem:
Sometimes, the second window loads random content, that was written minutes ago (does it store the content somewhere?).
Sometimes the second editor is just completly empty.

Im always getting the correct message ("connected") and "insync" which im logging to the console. But somehow, the websocket seems to not sync them correctly.

This is my (otherwise) working example:

import '@blocksuite/editor/themes/affine.css';

    import {Workspace, type Page, Job} from '@blocksuite/store';
    import {EditorContainer} from '@blocksuite/editor';
    import {onMount} from "svelte";
    import {
        createEditor,
        createWorkspaceOptions,
    } from "$lib/editor/utils";
    import {ContentParser} from "@blocksuite/blocks/content-parser";
    import {WebsocketProvider} from "y-websocket";

    const params = new URLSearchParams(window.location.search);
    const options = createWorkspaceOptions();
    import * as awarenessProtocol from 'y-protocols/awareness.js'

    async function initWorkspace(){
        if (window.workspace) {
            return;
        }

        const workspace = new Workspace(options);
        window.workspace = workspace;
        window.job = new Job({ workspace });
        window.Y = Workspace.Y;
        window.ContentParser = ContentParser;

        return workspace as Workspace;
    }

    async function main(){
        const workspace = await initWorkspace();
        const page = await workspace?.createPage() as Page;

        //initialize the Editor
        const app = document.getElementById('editor-wrapper');
        await createEditor(page, app);

        //load the content
        if(params.get('init')){
            console.log("init");
            await page.load(() => {
                const pageBlocKId = page.addBlock('affine:page', {});
                const noteBlockId = page.addBlock('affine:note', {}, pageBlocKId);
                page.addBlock("affine:surface", {}, pageBlocKId);
                page.addBlock("question", {}, noteBlockId);
            });
        } else {
            console.log("loading");
            await page.load();
        }

        const room = params.get('room');

        const wsProvider = new WebsocketProvider('ws://localhost:1234', room, page.spaceDoc, {
            awareness: page.awarenessStore.awareness
        });

        wsProvider.on('sync',async  isSynced => {
            console.log("isSynced: " + isSynced)
        })

        //wsProvider.connect();

        wsProvider.on('status', event => {
            console.log(event.status) // logs "connected" or "disconnected"
        })
    }

    onMount(async ()=>{
        main();
    })