realtimecursor/test-app/sdk-dist/README.md

Real-time collaboration system with cursor tracking and approval workflow

# RealtimeCursor SDK

A powerful SDK for integrating real-time cursor tracking and collaboration features into your web applications.

## Installation

```bash
npm install realtimecursor-sdk
```

## Quick Start

### React Integration

```jsx
import React, { useState, useRef } from 'react';
import { useRealtimeCursor, CursorOverlay } from 'realtimecursor-sdk';
import 'realtimecursor-sdk/dist/cursor.css';

function CollaborativeEditor() {
  const [content, setContent] = useState('');
  const editorRef = useRef(null);
  
  const { 
    cursors, 
    updateCursor, 
    updateContent,
    updateCursorPosition 
  } = useRealtimeCursor({
    apiUrl: 'https://your-api-url.com',
    projectId: 'your-project-id',
    user: {
      id: 'user-123',
      name: 'John Doe',
      color: '#3b82f6' // Optional, random color will be assigned if not provided
    }
  });

  const handleMouseMove = (e) => {
    if (!editorRef.current) return;
    
    const rect = editorRef.current.getBoundingClientRect();
    updateCursor({
      x: e.clientX,
      y: e.clientY,
      textPosition: editorRef.current.selectionStart
    });
  };

  const handleChange = (e) => {
    const newContent = e.target.value;
    setContent(newContent);
    updateContent(newContent, e.target.selectionStart);
  };

  const handleSelect = () => {
    if (!editorRef.current) return;
    updateCursorPosition(editorRef.current.selectionStart);
  };

  return (
    <div className="editor-container">
      <textarea
        ref={editorRef}
        value={content}
        onChange={handleChange}
        onMouseMove={handleMouseMove}
        onSelect={handleSelect}
        className="editor"
      />
      
      {/* Render other users' cursors */}
      <CursorOverlay 
        cursors={cursors} 
        content={content} 
        editorRef={editorRef} 
      />
    </div>
  );
}
```

### Vanilla JavaScript Integration

```javascript
import { RealtimeCursor } from 'realtimecursor-sdk';
import 'realtimecursor-sdk/dist/cursor.css';

// Initialize the cursor client
const cursorClient = new RealtimeCursor({
  apiUrl: 'https://your-api-url.com',
  projectId: 'your-project-id',
  user: {
    id: 'user-123',
    name: 'John Doe'
  }
});

// Connect to the real-time service
cursorClient.connect();

// Set up event handlers
cursorClient.onCursorUpdate = ({ socketId, user, x, y }) => {
  // Render cursor for this user
  renderCursor(socketId, user, x, y);
};

cursorClient.onContentUpdate = ({ content }) => {
  // Update editor content
  document.getElementById('editor').value = content;
};

// Update cursor position on mouse move
document.getElementById('editor').addEventListener('mousemove', (e) => {
  cursorClient.updateCursor({
    x: e.clientX,
    y: e.clientY
  });
});

// Update content on change
document.getElementById('editor').addEventListener('input', (e) => {
  cursorClient.updateContent(e.target.value);
});

// Clean up on page unload
window.addEventListener('beforeunload', () => {
  cursorClient.disconnect();
});
```

## Documentation

For complete documentation, visit [https://github.com/sourabhpunase/realtimecursor](https://github.com/sourabhpunase/realtimecursor)