Rich-text type - how to install/setup?

[Rob Clayburn]

ShareJS using the rich-text ottype is pretty much everything you need in the back end. 

Hi everyone

I've been struggling with this all day and I was wondering if someone could shed some light on my problem for me.

Basically I am using ShareJs v 0.7.27, and I am trying to load the rich-text OT type, to use in conjunction with quill.js

On the server side of things I am doing the following:

var livedb = require('livedb');
var sharejs = require('share');
var express = require('express');
var exphbs = require('express-handlebars');
var Duplex = require('stream').Duplex;
var browserChannel = require('browserchannel').server;

var backend = livedb.client(livedb.memory());
var share = require('share').server.createClient({backend: backend});

var app = express();
app.use(express.static('public'));

// Load static share.js file into front end
app.use(express.static(sharejs.scriptsDir));

app.engine('handlebars', exphbs({defaultLayout: 'main'}));
app.set('view engine', 'handlebars');

// Do I need to do anyting with ottypes?
var otTypes = require('ottypes');
var richText = require('rich-text');
// try to register a custom type!
livedb.ot.registerType(richText);

app.use(browserChannel({webserver: express}, function (client) {
 var stream = new Duplex({objectMode: true});
 stream._write = function (chunk, encoding, callback) {
 if (client.state !== 'closed') {
 client.send(chunk);
 }
 callback();
 };


 stream._read = function () {
 };

 stream.headers = client.headers;
 stream.remoteAddress = stream.address;


 client.on('message', function (data) {
 console.log('client on message', data);
 stream.push(data);
 });
 stream.on('error', function (msg) {
 client.stop();
 });
 client.on('close', function (reason) {
 stream.emit('close');
 stream.emit('end');
 stream.end();
 });


 share.listen(stream);
}));


app.get('/', function (req, res) {
 res.render('home');
});


var server = app.listen(3000, function () {
 var host = server.address().address;
 var port = server.address().port;
 console.log('App listening at http://%s:%s', host, port);
});

here I'm really not clear if livedb.ot.registerType(richText); is the right way to go about adding the rich-text ot type?

my client js code looks like this:

var socket = new BCSocket(null, {reconnect: true});
var share = new sharejs.Connection(socket);
var sjs = new sharejs.Connection(socket);
var doc = sjs.get('docs', 'hello');

// Subscribe to changes
doc.subscribe();

// This will be called when we have a live copy of the server's data.
doc.whenReady(function() {
 console.log('doc ready, data: ', doc, doc.getSnapshot());

 // Create a rich-text doc - not working!
 if (!doc.type) doc.create('rich-text');

 var editor = new Quill('#editor', {
 modules: {
 'authorship': { authorId: 'galadriel', enabled: true },
 'multi-cursor': true,
 'toolbar': { container: '#toolbar' },
 'link-tooltip': true
 },
 theme: 'snow'
 });


 editor.on('selection-change', function(range) {
 console.log('selection-change', range)
 });
 editor.on('text-change', function(delta, source) {
 console.log('text-change', delta, source)
 doc.submitOp(delta);
 });
});

I can see that the ottypes node library doesn't include the rich-text OT type and thus isn't building it into its webclient folder, which means its not available to the client. However, I'm completely stumped on how the ottypes library grabs the code from the various type github repos, and how its then built into the files in the webclient folder. I tried simply browserifying the rich-text ot type but that doesn't seem to be how the other modules are built.

So, can anyone help me out on how to implement this. I'd love to be able to get it working and would certainly want to write a tutorial on the setup as it seems to be a recurring question that people are asking without any definitive answer, which is a shame as it would be a great addition to sharejs to have documents explaining this.

Cheers

Rob

[Soroush Hat]

Chekc this out: https://github.com/pollen8/plume

...

[Soroush Hat]

haha I just noticed you did it yourself. :)

[Rob Clayburn]

hehe yes, I figured it out, guess I should have posted the link back here, so thanks for doing that :)