How to build? about rich-text

[jhchen]

If you want to build for the frontend you'd probably want to use browserify. Otherwise this project is currently packaged as a backend node.js project.

[pollen8]

Thanks for replying
I'd tried that but hadn't had any success so far - I'll keep chipping away at the issue though.

[jhchen]

What issue did you run into with browserify?

[pollen8]

Hi
My issue was that the rich-text ot type wasn't being assigned to the browser window.ottypes global object.
Using browserify I had to add this to the bottom of rich-text/lib/type.js:

if (typeof(window) !== 'undefined') {
    var _types = window.ottypes = window.ottypes || {};
    var _t = module.exports;
    _types['rich-text'] = _t.type;

    if (_t.uri) _types[_t.uri] = _t.type;
}

I'd hacked that from the 'after.js' script.

Then I browserified type.js and placed it in node_modules/share/webclient/

In my node app script i've

var livedb = require('livedb');
var sharejs = require('share');
var express = require('express');
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 otTypes = require('ottypes');
var richText = require('rich-text');

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

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

// Register the share ot custom type!
livedb.ot.registerType(richText.type);

My front end js is currently looking like this:

 var socket = new BCSocket(null, {reconnect: true});
        var sjs = new sharejs.Connection(socket);

        sharejs.registerType(window.ottypes['rich-text']);

        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 
            if (!doc.type) {
                console.log('doc has not type - trying to create a rich-text doc');
                doc.create('rich-text', '');
                console.log('created as ', doc);
            }

            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, function (error, appliedOp) {
console.log('submit op done', error, appliedOp);
                });
            });

// This is not currently picking up other clients changes
            doc.on('remoteop', function(op) {
                console.log('remote op received', op);
            })
        });

I'm not yet picking up the ot changes - but Im pretty happy so far as I seem to be on the right path