Collaborative User Presence Tracker

Build a user presence tracking system for a collaborative rich text editor. The system should display real-time information about active users in the editing session.

Requirements

Implement a collaborative editor that tracks user presence. The system must:

1. Initialize a collaborative editor with Y.js document synchronization
2. Configure user awareness to broadcast the current user's name and color
3. Display visual cursors showing remote users' current positions in the document
4. Maintain a live list of active users that updates when users join or leave

Test Cases

• When a user joins the session, their name and color appear in the active users list @test
• When a user leaves the session, their name is removed from the active users list @test
• Remote user cursors are displayed at their current positions in the editor @test
• The current user's awareness data is properly broadcast to other participants @test

Implementation

@generates

API

/**
 * Initialize a collaborative editor with user presence tracking
 */
export function createPresenceEditor(options: {
  element: HTMLElement;
  username: string;
  onUsersChange: (users: User[]) => void;
}): Editor;

/**
 * Represents a user in the collaborative session
 */
export interface User {
  id: string;
  name: string;
  color: string;
}

Dependencies { .dependencies }

@tiptap/core { .dependency }

Provides the core editor functionality for building rich text editors.

@satisfied-by

@tiptap/extension-collaboration { .dependency }

Enables real-time collaborative editing with Y.js integration.

@satisfied-by

@tiptap/extension-collaboration-cursor { .dependency }

Displays remote user cursors and selections in the collaborative editor.

@satisfied-by

yjs { .dependency }

Provides CRDT-based data structures for conflict-free collaborative editing.

@satisfied-by

y-websocket { .dependency }

WebSocket provider for syncing Y.js documents across clients.

@satisfied-by