Let's Build a Collaborative Rich Text Editor

The result of two operation must be equal irrespective of the order of the operations. So that it final result is same across all clients.

![CRDT](https://dev-to-uploads.s3.amazonaws.com/i/1ttl0lyqwytqjsl113hz.png)

This technique is used by Figma, Apple Notes etc.

Js libraries based on CRDT: [Yjs](https://github.com/yjs/yjs), [Automerge](https://github.com/automerge/automerge)

Note: OT and CRDT are much more complex than the short overview above. If you are planning to implement yourself read the research papers for better understanding.

### Code:

To implement this we will be using the following Js Libraries

1. [React](https://reactjs.org/docs/create-a-new-react-app.html)
2. [Nodejs](https://nodejs.org/en/)
3. [QuillJs](https://github.com/quilljs/quill)
4. [Websockets](https://www.npmjs.com/package/ws)
5. [Sharedb](https://www.npmjs.com/package/sharedb)
6. [websocket-json-stream](https://www.npmjs.com/package/@teamwork/websocket-json-stream)
7. [Rich-text](https://www.npmjs.com/package/rich-text)

#### Set up the Server:

```javascript


const WebSocket = require('ws');
const WebSocketJSONStream = require('@teamwork/websocket-json-stream');
const ShareDB = require('sharedb');

/**
 * By Default Sharedb uses JSON0 OT type.
 * To Make it compatible with our quill editor.
 * We are using this npm package called rich-text
 * which is based on quill delta
 */
ShareDB.types.register(require('rich-text').type);

const shareDBServer = new ShareDB();
const connection = shareDBServer.connect();

/**
 * 'documents' is collection name(table name in sql terms)
 * 'firstDocument' is the id of the document
 */
const doc = connection.get('documents', 'firstDocument');

doc.fetch(function (err) {
  if (err) throw err;
  if (doc.type === null) {
    /**
     * If there is no document with id "firstDocument" in memory
     * we are creating it and then starting up our ws server
     */
    doc.create([{ insert: 'Hello World!' }], 'rich-text', () => {
      const wss = new WebSocket.Server({ port: 8080 });

      wss.on('connection', function connection(ws) {
        // For transport we are using a ws JSON stream for communication
        // that can read and write js objects.
        const jsonStream = new WebSocketJSONStream(ws);
        share.listen(jsonStream);
      });
    });
    return;
  }
});

npx create-react-app collaborative-rte
cd collaborative-rte
yarn add sharedb rich-text quill

import React, { useEffect } from 'react';
import Quill from 'quill';
import 'quill/dist/quill.bubble.css';
import Sharedb from 'sharedb/lib/client';
import richText from 'rich-text';

// Registering the rich text type to make sharedb work
// with our quill editor
Sharedb.types.register(richText.type);

// Connecting to our socket server
const socket = new WebSocket('ws://127.0.0.1:8080');
const connection = new Sharedb.Connection(socket);

// Querying for our document
const doc = connection.get('documents', 'firstDocument');

function App() {
  useEffect(() => {
    doc.subscribe(function (err) {
      if (err) throw err;

      const toolbarOptions = ['bold', 'italic', 'underline', 'strike', 'align'];
      const options = {
        theme: 'bubble',
        modules: {
          toolbar: toolbarOptions,
        },
      };
      let quill = new Quill('#editor', options);
      /**
       * On Initialising if data is present in server
       * Updaing its content to editor
       */
      quill.setContents(doc.data);

      /**
       * On Text change publishing to our server
       * so that it can be broadcasted to all other clients
       */
      quill.on('text-change', function (delta, oldDelta, source) {
        if (source !== 'user') return;
        doc.submitOp(delta, { source: quill });
      });

      /** listening to changes in the document
       * that is coming from our server
       */
      doc.on('op', function (op, source) {
        if (source === quill) return;
        quill.updateContents(op);
      });
    });
    return () => {
      connection.close();
    };
  }, []);

  return (
    <div style={{ margin: '5%', border: '1px solid' }}>
      <div id='editor'></div>
    </div>
  );
}

export default App;