quill rich text stuff

generator.coffee

{Delta} = require 'tandem-core'
utils = require('tandem-core/build/delta_generator').getUtils()

tandem = require './tandem'

tandem.generateRandomDoc = ->
  Delta.getInitial 'abcde'

tandem.generateRandomOp = (delta) ->
  newDelta = utils.getRandomDelta delta, 0
  expectedResult = delta.compose newDelta

  [newDelta, expectedResult]
  


module.exports = tandem

quill.html

<style>
  #editor {
    width: 100%;
    height: 100%;
    font-size: 20px;
    font-family: monaco;
    background: -webkit-canvas(cursors);
    background-repeat: no-repeat;
  }
  body {
    margin: 0;
  }
</style>
<link rel="stylesheet" href="quill.snow.css">
<div id="toolbar" class="toolbar">
      <span class="ql-format-group">
  <select title="Font" class="ql-font">
    <option value="sans-serif" selected>Sans Serif</option>
    <option value="serif">Serif</option>
    <option value="monospace">Monospace</option>
  </select>
  <select title="Size" class="ql-size">
    <option value="10px">Small</option>
    <option value="13px" selected>Normal</option>
    <option value="18px">Large</option>
    <option value="32px">Huge</option>
  </select>
</span>
<span class="ql-format-group">
  <span title="Bold" class="ql-format-button ql-bold"></span>
  <span class="ql-format-separator"></span>
  <span title="Italic" class="ql-format-button ql-italic"></span>
  <span class="ql-format-separator"></span>
  <span title="Underline" class="ql-format-button ql-underline"></span>
  <span class="ql-format-separator"></span>
  <span title="Strikethrough" class="ql-format-button ql-strike"></span>
</span>
<span class="ql-format-group">
  <select title="Text Color" class="ql-color">
    <option value="rgb(0, 0, 0)" label="rgb(0, 0, 0)" selected></option>
    <option value="rgb(230, 0, 0)" label="rgb(230, 0, 0)"></option>
    <option value="rgb(255, 153, 0)" label="rgb(255, 153, 0)"></option>
    <option value="rgb(255, 255, 0)" label="rgb(255, 255, 0)"></option>
    <option value="rgb(0, 138, 0)" label="rgb(0, 138, 0)"></option>
    <option value="rgb(0, 102, 204)" label="rgb(0, 102, 204)"></option>
    <option value="rgb(153, 51, 255)" label="rgb(153, 51, 255)"></option>
    <option value="rgb(255, 255, 255)" label="rgb(255, 255, 255)"></option>
    <option value="rgb(250, 204, 204)" label="rgb(250, 204, 204)"></option>
    <option value="rgb(255, 235, 204)" label="rgb(255, 235, 204)"></option>
    <option value="rgb(255, 255, 204)" label="rgb(255, 255, 204)"></option>
    <option value="rgb(204, 232, 204)" label="rgb(204, 232, 204)"></option>
    <option value="rgb(204, 224, 245)" label="rgb(204, 224, 245)"></option>
    <option value="rgb(235, 214, 255)" label="rgb(235, 214, 255)"></option>
    <option value="rgb(187, 187, 187)" label="rgb(187, 187, 187)"></option>
    <option value="rgb(240, 102, 102)" label="rgb(240, 102, 102)"></option>
    <option value="rgb(255, 194, 102)" label="rgb(255, 194, 102)"></option>
    <option value="rgb(255, 255, 102)" label="rgb(255, 255, 102)"></option>
    <option value="rgb(102, 185, 102)" label="rgb(102, 185, 102)"></option>
    <option value="rgb(102, 163, 224)" label="rgb(102, 163, 224)"></option>
    <option value="rgb(194, 133, 255)" label="rgb(194, 133, 255)"></option>
    <option value="rgb(136, 136, 136)" label="rgb(136, 136, 136)"></option>
    <option value="rgb(161, 0, 0)" label="rgb(161, 0, 0)"></option>
    <option value="rgb(178, 107, 0)" label="rgb(178, 107, 0)"></option>
    <option value="rgb(178, 178, 0)" label="rgb(178, 178, 0)"></option>
    <option value="rgb(0, 97, 0)" label="rgb(0, 97, 0)"></option>
    <option value="rgb(0, 71, 178)" label="rgb(0, 71, 178)"></option>
    <option value="rgb(107, 36, 178)" label="rgb(107, 36, 178)"></option>
    <option value="rgb(68, 68, 68)" label="rgb(68, 68, 68)"></option>
    <option value="rgb(92, 0, 0)" label="rgb(92, 0, 0)"></option>
    <option value="rgb(102, 61, 0)" label="rgb(102, 61, 0)"></option>
    <option value="rgb(102, 102, 0)" label="rgb(102, 102, 0)"></option>
    <option value="rgb(0, 55, 0)" label="rgb(0, 55, 0)"></option>
    <option value="rgb(0, 41, 102)" label="rgb(0, 41, 102)"></option>
    <option value="rgb(61, 20, 102)" label="rgb(61, 20, 102)"></option>
  </select>
  <span class="ql-format-separator"></span>
  <select title="Background Color" class="ql-background">
    <option value="rgb(0, 0, 0)" label="rgb(0, 0, 0)"></option>
    <option value="rgb(230, 0, 0)" label="rgb(230, 0, 0)"></option>
    <option value="rgb(255, 153, 0)" label="rgb(255, 153, 0)"></option>
    <option value="rgb(255, 255, 0)" label="rgb(255, 255, 0)"></option>
    <option value="rgb(0, 138, 0)" label="rgb(0, 138, 0)"></option>
    <option value="rgb(0, 102, 204)" label="rgb(0, 102, 204)"></option>
    <option value="rgb(153, 51, 255)" label="rgb(153, 51, 255)"></option>
    <option value="rgb(255, 255, 255)" label="rgb(255, 255, 255)" selected></option>
    <option value="rgb(250, 204, 204)" label="rgb(250, 204, 204)"></option>
    <option value="rgb(255, 235, 204)" label="rgb(255, 235, 204)"></option>
    <option value="rgb(255, 255, 204)" label="rgb(255, 255, 204)"></option>
    <option value="rgb(204, 232, 204)" label="rgb(204, 232, 204)"></option>
    <option value="rgb(204, 224, 245)" label="rgb(204, 224, 245)"></option>
    <option value="rgb(235, 214, 255)" label="rgb(235, 214, 255)"></option>
    <option value="rgb(187, 187, 187)" label="rgb(187, 187, 187)"></option>
    <option value="rgb(240, 102, 102)" label="rgb(240, 102, 102)"></option>
    <option value="rgb(255, 194, 102)" label="rgb(255, 194, 102)"></option>
    <option value="rgb(255, 255, 102)" label="rgb(255, 255, 102)"></option>
    <option value="rgb(102, 185, 102)" label="rgb(102, 185, 102)"></option>
    <option value="rgb(102, 163, 224)" label="rgb(102, 163, 224)"></option>
    <option value="rgb(194, 133, 255)" label="rgb(194, 133, 255)"></option>
    <option value="rgb(136, 136, 136)" label="rgb(136, 136, 136)"></option>
    <option value="rgb(161, 0, 0)" label="rgb(161, 0, 0)"></option>
    <option value="rgb(178, 107, 0)" label="rgb(178, 107, 0)"></option>
    <option value="rgb(178, 178, 0)" label="rgb(178, 178, 0)"></option>
    <option value="rgb(0, 97, 0)" label="rgb(0, 97, 0)"></option>
    <option value="rgb(0, 71, 178)" label="rgb(0, 71, 178)"></option>
    <option value="rgb(107, 36, 178)" label="rgb(107, 36, 178)"></option>
    <option value="rgb(68, 68, 68)" label="rgb(68, 68, 68)"></option>
    <option value="rgb(92, 0, 0)" label="rgb(92, 0, 0)"></option>
    <option value="rgb(102, 61, 0)" label="rgb(102, 61, 0)"></option>
    <option value="rgb(102, 102, 0)" label="rgb(102, 102, 0)"></option>
    <option value="rgb(0, 55, 0)" label="rgb(0, 55, 0)"></option>
    <option value="rgb(0, 41, 102)" label="rgb(0, 41, 102)"></option>
    <option value="rgb(61, 20, 102)" label="rgb(61, 20, 102)"></option>
  </select>
</span>
<span class="ql-format-group">
  <span title="List" class="ql-format-button ql-list"></span>
  <span class="ql-format-separator"></span>
  <span title="Bullet" class="ql-format-button ql-bullet"></span>
  <span class="ql-format-separator"></span>
  <select title="Text Alignment" class="ql-align">
    <option value="left" label="Left" selected></option>
    <option value="center" label="Center"></option>
    <option value="right" label="Right"></option>
    <option value="justify" label="Justify"></option>
  </select>
</span>
      <span class="ql-format-group">
        <span title="Link" class="ql-format-button ql-link"></span>
        <span class="ql-format-separator"></span>
        <span title="Image" class="ql-format-button ql-image"></span>
      </span>
    </div>
<div id='editor'></div>
<script src="channel/bcsocket.js"></script>
<script src="quill.js"></script>
<script src="share.uncompressed.js"></script>
<script>

var tandem = Quill.Tandem;
var makeDelta = tandem.Delta.makeDelta;

var tandemType = {
  name: 'tandem',
  uri: 'http://quilljs.com/tandem',
  create: function(initialString) {
    return tandem.Delta.getInitial(initialString || '\n');
  },
  apply: function(snapshot, op) {
    return makeDelta(snapshot).compose(makeDelta(op));
  },
  transform: function(op1, op2, side) {
    return op1.transform(op2, side === 'left');
  },
  compose: function(op1, op2) {
    return op1.compose(op2);
  },
  deserialize: function(data) {
    return makeDelta(data);
  }
};

ottypes[tandemType.name] = tandemType;
ottypes[tandemType.uri] = tandemType;

var elem = document.getElementById('pad');

var s = new BCSocket(null, {reconnect: true});

var sjs = new window.sharejs.Connection(s);

var editor = new Quill('#editor', { 
  modules: {
    toolbar: { container: '#toolbar' }
  },
  theme: 'snow'
});

var doc = sjs.get('users', 'seph');
console.log(doc);
doc.subscribe();

doc.whenReady(function () {
  if (!doc.type) doc.create('tandem');

  if (doc.type && doc.type.name === 'tandem')
    attach(editor, doc.createContext());
});


function attach(editor, ctx) {
  window.ctx = ctx;

  console.log('ctx', ctx.getSnapshot());

  editor.setContents(makeDelta(ctx.getSnapshot()));

  editor.on('text-change', function(delta, src) {
    if (src !== 'user') return;

    console.log('text-change', delta);
    ctx.submitOp(delta);
  });

  ctx._onOp = function(op) {
    console.log('onop', op);
    editor.updateContents(makeDelta(op));
  };
}

</script>

tandem.coffee

tandem = require 'tandem-core'

makeDelta = tandem.Delta.makeDelta

module.exports =
  name: 'tandem'
  uri: 'http://quilljs.com/tandem'

  create: (initialString) ->
    tandem.Delta.getInitial initialString || '\n'

  apply: (snapshot, op) ->
    makeDelta(snapshot).compose makeDelta(op)

  transform: (op1, op2, side) ->
    op1.transform op2, side == 'left'

  compose: (op1, op2) ->
    op1.compose op2

  deserialize: (data) ->
    tandem.Delta.makeDelta data

test.coffee

randomizer = require 'ottypes/randomizer'

generator = require './generator'

randomizer generator