Code Monkey home page Code Monkey logo

quill-ot.js's Introduction

Quill-ot

An Operational Transformation implementation for use with the web based rich text editor Quill. This library was based on Operational-Transformation created by Tim Baumann. As of right now I'm not sure if I'll try to add this library to the Operational-Transformation Github group because I added some breaking changes and function renaming to better represent what each means.

About OT (Operational Transformation)

OT is a way to implement real time collaboration on data, and in this case specifically rich text from Quill. In this library we use Quill's own operation representation (Deltas) to show that text has either been retained, inserted, or deleted. If you want more in depth detail, you can again visit Operational-Transformation or read the original paper on OT.

Future

As of right now I'm not sure if I'll try to add this library to the Operational-Transformation group because I added some breaking changes and function renaming to better represent what each means (operation became delta).

Sample Code

On the server:

var server = new ot.Server();

server.broadcast = function(delta) {
  // You're in charge of how you want to send out data
  // Websockets are probably your best bet, i like http://socketcluster.io/
}

function onReceiveDelta(version, delta) {
  var deltaToSend = server.receiveDelta(version, delta);
  server.broadcast(deltaToSend);
}

On the client:

// Client joining at revision 0
var otClient = new ot.Client(0);

// Overridden method
otClient.sendDelta = function(version, delta) {
  // Send this delta to the server
  // Again, you choose how
}

// Overridden method
otClient.applyDelta = function(delta) {
  quillEditor.updateContents(delta, 'api');
}

// When the user makes a change
quillEditor.on('text-change', function(delta, oldDelta, source) {
  // Make sure the change came from a user (not the api)
  if (source === 'user') {
    otClient.applyFromClient(delta);
  }
});

function onReceiveDelta(delta) {
  // If this delta was sent by this client they need to call otClient.serverAck() instead
  // this prevents deltas that have already been applied by the user from being applied twice
  otClient.applyFromServer(delta);
}

quill-ot.js's People

Contributors

arslnb avatar cjenright avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.