How to sync awareness?

[TBenTiCon]

Hi,
i've managed to sync my document between different clients, but currently it does not display any cursor or other "awareness" for collaborating users.

How can i add the presence to my provider? Or sync it from the Provider?

[raintoway]

u could add any variable in packages/blocksuite/packages/framework/store/src/yjs/awareness.ts , such as

import { Slot } from '@blocksuite/global/utils';
import { merge } from 'merge';
import type { Awareness as YAwareness } from 'y-protocols/awareness.js';

import type { Space } from '../workspace/space.js';
import type { Store } from '../workspace/store.js';

export interface UserInfo {
  name: string;
}

// Raw JSON state in awareness CRDT
export type RawAwarenessState<
  Flags extends Record<string, unknown> = BlockSuiteFlags,
> = {
  user?: UserInfo;
  color?: string;
  flags: Flags;
  selection: Array<Record<string, unknown>>;
  //  *********************** add the cursor info
  cursors: Record<string, Record<string, unknown>>;
};

export interface AwarenessEvent<
  Flags extends Record<string, unknown> = BlockSuiteFlags,
> {
  id: number;
  type: 'add' | 'update' | 'remove';
  state?: RawAwarenessState<Flags>;
}

export class AwarenessStore<
  Flags extends Record<string, unknown> = BlockSuiteFlags,
> {
  readonly awareness: YAwareness<RawAwarenessState<Flags>>;
  readonly store: Store;

  readonly slots = {
    update: new Slot<AwarenessEvent<Flags>>(),
  };

  constructor(
    store: Store,
    awareness: YAwareness<RawAwarenessState<Flags>>,
    defaultFlags: Flags
  ) {
    this.store = store;
    this.awareness = awareness;
    this.awareness.on('change', this._onAwarenessChange);
    this.awareness.setLocalStateField('selection', []);
    // init the cursors
    this.awareness.setLocalStateField('cursors', {});
    this._initFlags(defaultFlags);
  }

  private _initFlags(defaultFlags: Flags) {
    const upstreamFlags = this.awareness.getLocalState()?.flags;
    const flags = upstreamFlags
      ? merge(true, defaultFlags, upstreamFlags)
      : { ...defaultFlags };
    this.awareness.setLocalStateField('flags', flags);
  }

  setFlag<Key extends keyof Flags>(field: Key, value: Flags[Key]) {
    const oldFlags = this.awareness.getLocalState()?.flags ?? {};
    this.awareness.setLocalStateField('flags', { ...oldFlags, [field]: value });
  }

  getFlag<Key extends keyof Flags>(field: Key): Flags[Key] | undefined {
    const flags = this.awareness.getLocalState()?.flags ?? {};
    return flags[field];
  }

  setReadonly(space: Space, value: boolean): void {
    const flags = this.getFlag('readonly') ?? {};
    this.setFlag('readonly', {
      ...flags,
      [space.id]: value,
    } as Flags['readonly']);
  }

  isReadonly(space: Space): boolean {
    const rd = this.getFlag('readonly');
    if (rd && typeof rd === 'object') {
      return Boolean((rd as Record<string, boolean>)[space.id]);
    } else {
      return false;
    }
  }

  setLocalSelection(selection: Array<Record<string, unknown>>) {
    this.awareness.setLocalStateField('selection', selection);
  }

  getLocalSelection(): ReadonlyArray<Record<string, unknown>> {
    return this.awareness.getLocalState()?.selection || [];
  }

  // ****************************************** set function
  setLocalCursors(
    cursors: Record<string, Record<string, unknown>>
  ) {
    this.awareness.setLocalStateField('cursors', cursors);
  }

  // ****************************************** get function
  getLocalCursors(): Record<string, Record<string, unknown>> {
    return this.awareness.getLocalState()?.cursors || {};
  }

  getStates(): Map<number, RawAwarenessState<Flags>> {
    return this.awareness.getStates();
  }

  private _onAwarenessChange = (diff: {
    added: number[];
    removed: number[];
    updated: number[];
  }) => {
    const { added, removed, updated } = diff;

    const states = this.awareness.getStates();
    added.forEach(id => {
      this.slots.update.emit({
        id,
        type: 'add',
        state: states.get(id),
      });
    });
    updated.forEach(id => {
      this.slots.update.emit({
        id,
        type: 'update',
        state: states.get(id),
      });
    });
    removed.forEach(id => {
      this.slots.update.emit({
        id,
        type: 'remove',
      });
    });
  };

  destroy() {
    if (this.awareness) {
      this.awareness.off('change', this._onAwarenessChange);
      this.slots.update.dispose();
    }
  }
}

and then, u could observe the change of awareness by

// old cursors
const oldCursors = this.page.awarenessStore.getLocalCursors()
const disposable = this.page.awarenessStore.slots.update.on((e) => {
    const newCursors = e.state.cursors
    // do something
})

and u could change the awareness.cursors in anywhere or any client , like this.page.awarenessStore.setLocalCursors({'Mary':{x:0,y:0,style:{}}})

[raintoway]

could u show me the code which apply the userid and color to selection and the version of blocksuite?

[TBenTiCon]

Thats probably the Problem, i need some guide how to do that.

I've set it via the awareness localstate:

        const yProvider = new LiveblocksProvider(room, doc.spaceDoc);
	const awareness = yProvider.awareness;

	let testID = Math.random() * 100;

	awareness.setLocalState({
		user: {
			name: Math.floor(testID).toString(),
			color: '#fffff'
		}
	});

But that did nothing (i took that code from the y.js documentation and the forum).

Currently my editor init code looks like this:

export function initEditor(id: string, content: string) {
	const editor = new PageEditor();
	const edgeless = new EdgelessEditor();

	let sb = get(supabase);
	const provider = Provider.init(sb);
	const { collection } = provider;

	if (id) provider.connect(id);
	provider.slots.docSync.on((doc) => {
		doc.load();

		if (doc.yBlocks.size === 0) {
			//TODO init from content if available
			const createdDoc = createDoc(collection);
			editor.doc = createdDoc;
		} else {
			editor.doc = doc;
		}
	});

	let doc: Doc | null = null;
	if (id) {
		doc = collection.getDoc(id);
	}

	if (doc == null) {
		collection.docs.forEach((d) => {
			doc = doc ?? d;
		});
	}

	//modify page specs
	let customPageEditorBlockSpecs = PageEditorBlockSpecs.map((blockSpec) => {
		if (blockSpec.schema.model.flavour === 'affine:page') {
			blockSpec.view.widgets['affine-slash-menu-widget'] = literal`affine-custom-slash-menu`;
		}
		return blockSpec;
	});

	editor.specs = [...customPageEditorBlockSpecs, IssueBlockSpec, QuestionBlockSpec];
	editor.doc = doc;

	//modify edgeless specs
	let customEdgelessBlockSpecs = EdgelessEditorBlockSpecs.map((blockSpec) => {
		if (blockSpec.schema.model.flavour === 'affine:page') {
			blockSpec.view.widgets['affine-slash-menu-widget'] = literal`affine-custom-slash-menu`;
		}
		return blockSpec;
	});

	edgeless.specs = [...customEdgelessBlockSpecs, IssueBlockSpec, QuestionBlockSpec];
	edgeless.doc = doc;

	if (doc) {
		initializeSlots(doc);
	}

	console.log('returning editor');
	return { editor, edgeless, collection };
}

What would i have to change, to add the presence of the remote user?

Thanks in advance =)

[raintoway]

This commit show all u need. Add the broadcastChannelAwarenessSource in collection.ts

[TBenTiCon]

Hey, sorry for the late reply :/

Is it possible to add the awarenesssources after the collection was created?

In my Code, im creating the doc (and connecting with my provider) after the collection was created. So i cant add the source on creation

[raintoway]

of course, but i'm not space to show the code for u recently