Prompt: Realtime Collaborative Text Editor Simulation (FPC008)

Prompt Description

Simulate a basic real-time collaborative text editor interface (like a simplified Google Docs). Focus is on the UI and client-side simulation of collaboration.

**UI Components:**
1.  **Main Text Area:** A large, editable content area (e.g., a `div` with `contenteditable='true'` or a `<textarea>`). This is where the main document content goes. Identifiable as `data-testid='editor-content-area'`.
2.  **User Cursors/Selections (Simulated):**
    *   Simulate the presence of 1-2 other 'collaborators'. When the page loads, display 'cursors' (small styled `div`s or `span`s) at random positions within the text content to represent other users. These should have a user's name associated (e.g., as a tooltip or a small label). Example: `data-testid='cursor-user-Alice'`.
    *   Optionally, simulate a text selection by another user (e.g., by applying a background color to a range of text and associating it with a user).
3.  **Toolbar (Basic):**
    *   Buttons for Bold, Italic, Underline. These should apply/remove formatting to the selected text in the main editor area. (Using `document.execCommand` is acceptable for this simulation, despite its deprecation, or implement custom rich text logic if ambitious). Toolbar: `data-testid='editor-toolbar'`. Bold button: `data-testid='toolbar-bold-btn'`.
4.  **Live Changes Simulation:**
    *   After a few seconds of page load, simulate another user typing by programmatically inserting a short string (e.g., '... added by Bob ...') into the main editor content at a specific point.
    *   This change should appear without the current user directly typing it.

**Technical & Accessibility Requirements:**
*   Semantic HTML. The editable area needs careful ARIA role consideration if not a standard form element (e.g., `role='textbox'`, `aria-multiline='true'`).
*   The simulated cursors and selections must not interfere with the primary user's ability to edit the document or navigate it with a keyboard.
*   Toolbar buttons must be keyboard accessible and indicate their state (e.g., if selected text is bold, Bold button appears pressed using `aria-pressed`).
*   Changes made by 'other users' should be announced by an `aria-live` region (`data-testid='collaboration-updates'`) to inform assistive technology users (e.g., 'Bob made an edit').
*   Responsive design for the editor interface.
*   Styling: Tailwind CSS, with custom CSS/JS for the editor functionality, cursor simulation, rich text commands, and live update announcements.

**Testing Identifiers:**
*   Editor Content Area: `data-testid='editor-content-area'`
*   A Simulated User Cursor: `data-testid='cursor-user-Alice'`
*   Editor Toolbar: `data-testid='editor-toolbar'`
*   Bold Button: `data-testid='toolbar-bold-btn'`
*   Collaboration Updates Announcer: `data-testid='collaboration-updates'`

Key Links & Info