Collaboration Guide

November 30, 2025 ยท View on GitHub

Enable real-time multi-user editing with live cursors and conflict resolution.

Quick Setup

Basic Collaboration

const editor = new ArmorEditor({
  container: '#editor',
  collaboration: {
    enabled: true,
    channelId: 'document-123',
    userId: 'user-456',
    userName: 'John Doe'
  }
});

Features

Real-time Editing

Multiple users can edit simultaneously with instant sync.

Live Cursors

See where other users are typing in real-time.

User Presence

Online/offline indicators for all collaborators.

Conflict Resolution

Automatic handling of simultaneous edits.

Setup Guide

Step 1: Enable Collaboration

const editor = new ArmorEditor({
  container: '#editor',
  collaboration: {
    enabled: true,
    channelId: 'my-document',    // Unique document ID
    userId: getCurrentUserId(),   // Current user ID
    userName: getCurrentUserName() // Display name
  }
});

Step 2: Handle Events

// User joined
editor.on('userJoined', (user) => {
  console.log(`${user.name} joined the document`);
});

// User left
editor.on('userLeft', (user) => {
  console.log(`${user.name} left the document`);
});

// Content changed by another user
editor.on('remoteChange', (change) => {
  console.log('Document updated by:', change.author);
});

Step 3: Manage Users

// Get active users
const users = editor.getActiveUsers();

// Set user info
editor.setUserInfo({
  userId: 'user-123',
  userName: 'Jane Smith',
  userColor: '#ff6b6b',
  avatar: 'https://example.com/avatar.jpg'
});

Advanced Features

Comments System

const editor = new ArmorEditor({
  collaboration: {
    enabled: true,
    channelId: 'document-123'
  },
  comments: true,
  trackChanges: true
});

// Add comment
editor.addComment('This needs revision', position);

// Reply to comment
editor.replyToComment(commentId, 'I agree, let me fix this');

Track Changes

const editor = new ArmorEditor({
  collaboration: {
    enabled: true
  },
  trackChanges: true
});

// Accept change
editor.acceptChange(changeId);

// Reject change
editor.rejectChange(changeId);

Permissions

const editor = new ArmorEditor({
  collaboration: {
    enabled: true,
    permissions: {
      canEdit: true,
      canComment: true,
      canShare: false
    }
  }
});

Use Cases

Team Document Editing

const teamEditor = new ArmorEditor({
  container: '#team-doc',
  collaboration: {
    enabled: true,
    channelId: 'team-report-2024',
    userId: getEmployeeId(),
    userName: getEmployeeName(),
    role: 'editor'
  },
  trackChanges: true,
  comments: true
});

// Team workflow
teamEditor.on('userJoined', (user) => {
  showNotification(`${user.name} joined the document`);
});

Student Collaboration

const studentEditor = new ArmorEditor({
  container: '#group-project',
  collaboration: {
    enabled: true,
    channelId: 'project-group-5',
    userId: getStudentId(),
    userName: getStudentName(),
    maxUsers: 6 // Limit group size
  }
});

// Track contributions
studentEditor.on('contentChanged', (change) => {
  trackContribution(change.userId, change.wordCount);
});

Client Review

const reviewEditor = new ArmorEditor({
  container: '#client-review',
  collaboration: {
    enabled: true,
    channelId: 'contract-review-v2'
  },
  permissions: {
    roles: {
      'client': ['comment', 'suggest'],
      'lawyer': ['edit', 'approve'],
      'paralegal': ['comment', 'research']
    }
  }
});

API Methods

Collaboration Control

// Join collaboration
editor.joinCollaboration(channelId, userId, userName);

// Leave collaboration
editor.leaveCollaboration();

// Check status
const isCollaborating = editor.isCollaborating();

User Management

// Get active users
const users = editor.getActiveUsers();

// Get user by ID
const user = editor.getUser(userId);

// Update presence
editor.updatePresence('active'); // 'active', 'idle', 'away'

Comments

// Add comment
const commentId = editor.addComment(text, position);

// Reply to comment
editor.replyToComment(commentId, replyText);

// Resolve comment
editor.resolveComment(commentId);

// Get comments
const comments = editor.getComments();

Track Changes

// Get changes
const changes = editor.getChanges();

// Accept change
editor.acceptChange(changeId);

// Reject change
editor.rejectChange(changeId);

// Accept all changes
editor.acceptAllChanges();

Configuration Options

OptionTypeDefaultDescription
enabledbooleanfalseEnable collaboration
channelIdstring-Document identifier
userIdstring-User identifier
userNamestring-Display name
userColorstringautoUser cursor color
showCursorsbooleantrueShow live cursors
showPresencebooleantrueShow user presence
maxUsersnumber10Max concurrent users
conflictResolutionstring'auto'Conflict handling

Conflict Resolution

Automatic (Default)

collaboration: {
  conflictResolution: 'auto' // Handles conflicts automatically
}

Manual

collaboration: {
  conflictResolution: 'manual'
}

editor.on('conflict', (conflict) => {
  // Show resolution UI
  showConflictDialog(conflict);
});

Last Writer Wins

collaboration: {
  conflictResolution: 'last-writer-wins'
}

Security

Encrypted Collaboration

const editor = new ArmorEditor({
  collaboration: {
    enabled: true,
    encryption: true,
    auditLog: true
  }
});

Access Control

collaboration: {
  enabled: true,
  security: {
    requireInvite: true,
    moderatedJoin: true,
    sessionTimeout: 3600 // 1 hour
  }
}

Performance

Large Documents

collaboration: {
  enabled: true,
  performance: {
    chunkSize: 1000,
    debounceDelay: 300,
    maxHistory: 100
  }
}

Network Optimization

collaboration: {
  enabled: true,
  network: {
    batchUpdates: true,
    compression: true,
    reconnectAttempts: 5
  }
}

Troubleshooting

Connection Issues

editor.on('connectionLost', () => {
  showNotification('Connection lost. Reconnecting...');
});

editor.on('connectionRestored', () => {
  showNotification('Connection restored');
});

Sync Problems

editor.on('syncError', (error) => {
  console.error('Sync error:', error);
  // Handle gracefully
});

Examples