Initalizing SharedDoc

js-collaboration-ot-client provides client-side APIs, allowing developers to connect to a server and create shared documents (SharedDoc) to enable real-time collaborative editing. This document explains how to initialize the client, including:

• Install dependencies

• Configure the connection

• Create document instances

Installation

Install the required dependency packages via npm:

npm install @mescius/js-collaboration-client @mescius/js-collaboration-ot-client

• js-collaboration-client: Provides the Client and Connection classes, used to establish a connection with the server.

• js-collaboration-ot-client: Provides OT functionality and the SharedDoc class.

Initialization

1. Register the OT Type

   Register the OT Type to define operation behavior. Here is an example of registering a simple text type:

   import { TypesManager } from '@mescius/js-collaboration-ot';
   
   const textType = {
       uri: '<http://example.com/types/text',>
       create: (data) => data || '', // Initialize as an empty string
       transform: (op1, op2, side) => {
           if (op1.pos > op2.pos || (op1.pos === op2.pos && side === 'left')) {
               return { pos: op1.pos + op2.text.length, text: op1.text };
           }
           return op1;
       },
       apply: (snapshot, op) => {
           return snapshot.slice(0, op.pos) + op.text + snapshot.slice(op.pos);
       }
   };
   
   TypesManager.register(textType);

2. Create a Client Instance

   Use the Client class to create a client instance and specify the server address.

   import { Client } from '@mescius/js-collaboration';
   const client = new Client();

3. Connect to a Room

   Use the connect method to connect to a specific room on the server, returning a Connection object.

   const connection = client.connect('room1');

4. Initialize SharedDoc

   Use the SharedDoc class to create a shared document instance, binding it to the Connection. The SharedDoc uses the Connection to send and receive messages, with the message type being "ot-doc".

   import { SharedDoc } from '@mescius/js-collaboration-ot';
   const doc = new SharedDoc(connection);

   Parameter:

   connection: The Connection object returned from client.connect.

   Role: Creates a shared document instance, used for operating on snapshots and submitting operations.

Complete Example

Below is a complete example of SharedDoc initialization:

import { Client } from '@mescius/js-collaboration';
import { SharedDoc, TypesManager } from '@mescius/js-collaboration-ot';

// Define the OT Type
const textType = {
    uri: 'rich-text-ot-type',
    create: (data) => data || '', // Initialize as an empty string
    transform: (op1, op2, side) => {
        if (op1.pos > op2.pos || (op1.pos === op2.pos && side === 'left')) {
            return { pos: op1.pos + op2.text.length, text: op1.text };
        }
        return op1;
    },
    apply: (snapshot, op) => {
        return snapshot.slice(0, op.pos) + op.text + snapshot.slice(op.pos);
    }
};

// Register the OT Type
TypesManager.register(textType);

// Initialize the client
const client = new Client();
const connection = client.connect('room1');
const doc = new SharedDoc(connection);

Next Steps

Create document and submit/receive Ops, refer to: SharedDoc Class