realtime-editor

Ever had the same feeling as us about how complicated and soul-crushing it can be to implement some sort of a collaborative editor? ..Even a simple one?

If Etherpad are either too big or too much of what you need and shareJS doesnt fit your application (as ours don't since we build upon socket.io this plugin might be what you're looking for.

Here at T.A.K.E. we have made a very simple "textarea" where the only needs required were to have it be on some sort of collaborative level while not requiring insane amount of server configuration nor external/extra db logic.

This realtime-editor is a lightweight node module with a server and client side script. It uses socket.io and diff-match-patch. It doesnt solve all the collaborative problems or needs but if it fits your needs go ahead and use it.

NOTE: Before we begin, this is a really early beta version and is quite unstable.. more updates and documentations is on its way..

Setup

Npm install the sucker and include it to your server index.js

npm install realtime-editor

var realtimeEditor = require('realtime-editor');

Add the client part aswell to your application's index.html

<script src="node_modules/realtime-editor/realtime-editor.js"></script>

And dont forget the 2 dependencies socket.io and diff-match-patch client parts aswell if you dont have them included allready

<script src="node_modules/socket.io-client/dist/socket.io.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js"></script>

Usage

It's currently build around MDL-Lite's material design framework but it should work without it (Dont blame us if doesnt!).

For the MDL styles check the example in the demo folder. For now, here is the bare one. Feel free to include your own styles and a label tag inside the div wrapper at the bottom

<div style="position: relative;">
    <div id="textarea1" ondragstart="return false" contenteditable="true" spellcheck="false">
        <div><br></div>
    </div>
</div>

Now init socket.io client part and the the textarea through javascript

var socket = io.connect();
 
var editor = new realtimeEditor(options);

The options argument needs atleast the id of the text field aswell as an unique identifier fx a project id. It takes several others optional parameters such as an user color.

The text property consist of an array with an object for each line created in it. The array can either start empty or with some data (fx. stored from your database). The format of the objects inside the text array needs to have the properties as shown below, alltho they are auto generated when new lines are created, but make sure you save the whole text array when storing it to your database.

var options = {
    id: 'textarea1', // unique to the textfield
    projectId: 'someUniqueIdentifier', // required in order to have several active editors on the same page
    room: 'uniqueTextRoom', // unique room id, default is projectId combined with the element id
    text: [ // init the textarea with the newest text
        {
            author: '',
            text: 'line_1',
            id: '1459856606818_16407750' // id of the line auto generated.
        },
        {
            author: '',
            text: 'line_2',
            id: '1459865117436_19682870'
        },
        {
            author: '',
            text: 'line_3',
            id: '1459865208855_19888940'
        }
    ],
    custom: { // custom object such as specific appication IDs. Fx in order to save it on the server side
        appId: 1,
        customProperty: 'some_application_specific_here'
    }
};
 
new realtimeEditor(options);

Options

Parameter	Type	Default	Description
id	string	undefined	The id of the textarea. Is requried
projectId	integer	1	Will be renamed at some point. is required in order to have multiple editors on same page
room	string	projectId + id	Room name for socket.io. Make sure its unqiue in order to avoid conflicts. Default is the id of the textarea
color	string	random	Set a user color as such #1d1d1d
author	string	random	Set an id of the user. make sure its unique and no spaces
authorName	string	random	Set name of author. random name is generated if none applied. Not complete
message	string	Connection lost. please wait..	Message will be desplayed below when socket connection is lost. Change it here to fit your language
custom	object	{}	This is where you add your applications specific properties incase you want to do something with the data like save it to your own db in a hook

Hooks

On your server side you can add a hook which will fire when something changes

var editor = new realtimeEditor(options);
 
realtimeEditor.onSave(function (data) {
    // do something with the data object here like stringify it and save it to your fauvorite db
});

Demo

A demo is included. Check it out by cloning the demo folder, go into it and run npm install followed by a node demo.js Open your browser and go to http://localhost:2000 to see the example

Todo

• Atm you cant write on same line as it updates the text per line
• More stable version aka. better server testing / fallback
• Undo/redo availability (keyboard shortcuts)
• More test!
• Author text string on an individual line is not getting set correctly atm
• Gif demo example.. gotta have those animated gifs!
• maybe include text styling in the long run like a WYSIWYG editor
• did I mention test?

Keep making it better

Feel free to donate in order to help us out. Any amount will be greatly appreciated, for the many hours invested into this, aswell as in future developement.