javascriptadvanced120 minutes

Build a Real-Time Collaborative Text Editor with Operational Transformation in JavaScript

Create a real-time collaborative text editor that allows multiple users to edit a shared document simultaneously using Operational Transformation (OT) to handle concurrent changes and keep the document state consistent across clients.

Challenge prompt

Build a JavaScript application that implements a real-time collaborative text editor supporting multiple users editing the same document concurrently. Use Operational Transformation (OT) to merge concurrent text changes without conflicts, ensuring all users see a consistent document state. Your code should manage insertion and deletion operations, apply transformations to concurrent operations, and broadcast updates to connected clients. The application should expose functions for applying local edits, receiving remote operations, and maintaining the current document state. Assume a simplified environment without UI rendering; focus on the core OT algorithm and state synchronization logic.

Guidance

• Implement data structures to represent text operations (insert, delete) and define how to transform operations against each other.
• Maintain a consistent document state and apply incoming remote operations after transforming them based on local changes.
• Design functions for applying local edits and integrating remote edits to handle concurrent changes robustly.

Hints

• Start by defining the operation format, e.g., {type: 'insert'|'delete', position: number, char?: string}.
• Research simple Operational Transformation algorithms such as Jupiter OT for text documents.
• Test your implementation by simulating sequences of local and remote operations with overlapping edits.

Starter code

class TextEditorOT {
  constructor() {
    this.document = '';
    this.history = [];
  }

  // Apply a local edit operation (insert/delete)
  applyLocalOperation(op) {
    // Your code here
  }

  // Receive and integrate a remote operation
  applyRemoteOperation(op) {
    // Your code here
  }

  // Transform an operation against another concurrent operation
  transform(op1, op2) {
    // Your code here
  }

  getDocument() {
    return this.document;
  }
}

Expected output

After applying the following operations: 1) Local insert 'A' at position 0 2) Remote insert 'B' at position 0 concurrently The document should be consistent for all users as either 'AB' or 'BA' depending on transformation order, demonstrating conflict resolution. Final document example: 'AB'

Core concepts

Operational TransformationConcurrency ControlData StructuresText Processing

Challenge a Friend

Send this duel to someone else and see if they can solve it.