How to build a collaborative text editor with JavaScript

how-to-build-an-online-collaborative-text-editor-with-javascript-header-2.jpg

In this tutorial, you will learn to create your own online collaboration text editor with realtime collaboration features.

Introduction

This blog post was written under the Pusher Guest Writer program.

In this post we’ll learn to create an awesome, tweet-worthy Online Collaborative Text Editor . You can now collaborate realtime with your friends on an editor created by you! This article is for all those ninjas out there who love building their own components. You will get a step by step guidance on building a collaborative text editor, so the next time you make a trip with your friends, or take notes in a class or want to jot down your awesome ideas collectively you can do all of that in your own shiny doc!

This is a glimpse of what we will be building by the end of this post.

Try the Online Collaborative Text Editor for yourself. Open this link, and share with your friends and Whoaaaaa! Collaborate away!

Let’s add the skeleton

Create a super simple index.html and add a header and a div for our doc!

1<!DOCTYPE>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <title>Online Collaborative Text Editor</title>
8    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
9    <link href="/css/app.css" rel="stylesheet"></link>
10  </head>
11  <body>
12    <header class="header">
13      <h1 class="header__h1">Online Collab Edit</h1>
14    </header>
15    <div class="doc">
16      <div class="doc__background-ribbon"></div>
17      <div class="doc__text-editor hidden"></div>
18    </div>
19  </body>
20</html>

Create a CSS file, app.css and link it in the above HTML to start out with a pretty page!

Let’s make it a little more functional!

Create a JavaScript file in js directory, app.js, and add the following three lines to see the magic!

1var doc = document.getElementById('doc');
2doc.contentEditable = true;
3doc.focus();

And with that our doc is editable: go ahead and type. It even supports Ctrl+B, Ctrl+I to make text bold or italic

Make it

Generate a unique identifier if the doc is new, which will be used to implement collaborative edit feature and append it to the URL as a query param, so the URL becomes shareable and unique.

1var id = getUrlParameter('id');
2  if (!id) {
3    location.search = location.search
4      ? '&id=' + getUniqueId() : 'id=' + getUniqueId();
5    return;
6  }

getUrlParameter() and getUniqueId() are two utility functions that we defined to help us get query params and generate unique keys

1// a unique random key generator
2  function getUniqueId () {
3    return 'private-' + Math.random().toString(36).substr(2, 9);
4  }
5
6  // function to get a query param's value
7  function getUrlParameter(name) {
8    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
9    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
10    var results = regex.exec(location.search);
11    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
12  };

To make our online collaborative text editor we’ll use Pusher’s real time capabilities. We’ll trigger events whenever we make any change to the document and also at the same time listen for changes of other users for the same document.
Signup for Pusher, or Login if you already have an account.
Once you login, create an app by giving an app-name and choosing a cluster in the Create App screen
Now that we’ve registered and created the app, add the pusher's JavaScript library in your index.html

1<script src="https://js.pusher.com/4.0/pusher.min.js"></script>

Connect to your app by calling the Pusher constructor with your app key as shown in the below line

1var pusher = new Pusher(<INSERT_PUSHER_APP_KEY_HERE>);

Next, we need to subscribe to the changes which happen to our document
With Pusher these are called channels. Every new document will be a new channel for us. Channel is represented by a string, in our case it’ll be the unique Id we generated above. Read more about the awesome channels here.

1// subscribe to the changes via Pusher
2var channel = pusher.subscribe(id);
3channel.bind('some-fun-event', function(data) {
4  // do something meaningful with the data here
5});

Since we want to listen for all the events triggered for a document by all the users, we can do that directly without the need to route them to a server first. Enter Pusher’s Client Events
You need to enable Client Events in your Settings tab on Pusher’s Dashboard
Client Events should start with client-, and thus our event name client-text-edit. (Note that Client Events have a number of restrictions that are important to know about while creating your awesome app. Read about them here.)
With these two lines, we’ve set our app listening to any change made on the doc by any user!

1channel.bind('client-text-edit', function(html) {
2  doc.innerHTML = html;
3});

Similarly we trigger client-text-edit event when we change content, so that other clients can see the changes almost immediately!

1function triggerChange (e) {
2  channel.trigger('client-text-edit', e.target.innerHTML);
3}
4
5doc.addEventListener('input', triggerChange);

With Pusher’s library all of this complexity is abstracted out for us and we can truly focus on crafting superb product and top-class experience for our users!
All of this is wrapped in a Promise as you can only trigger changes to the channel when you’ve successfully subscribed to the channel itself!
To use private channels, you must be authenticated. Pusher makes writing an auth server easy. I used their NodeJS template here.
With that, we have our first version of Online Collaborative Text Editor ready! Whistles :P
This demo app doesn’t account for cases like concurrent edits at the same place in the document. For a production-like app you’d want to use Operational Transformation to solve the problem.

Brownie points!

We can use Pusher’s Presence channels which can even give information about the identity of the users who are editing your app!

Next Steps

Add support for code highlighting for your choice of language and you’ve a collaborative code editor ready, which you can use to solve a fun puzzle or for a remote interview!

PS:

Running locally

clone the repository

1git clone git@github.com:ankeetmaini/collaborative-text-editor.git
2  cd collaborative-text-editor
3  npm install
4  npm start

open http://localhost:5000

Show me the code

Code is hosted on GitHub collaborative-text-editor

Docs

Tutorials

Support

Glossary

How to build a collaborative text editor with JavaScript

Introduction

Let’s add the skeleton

Let’s make it a little more functional!

Make it

Brownie points!

Next Steps

PS:

Running locally

Show me the code

Products

Developers

Company

Legal