Updates for newer quillJs

README.md

@@ -2,3 +2,58 @@ d-quill
 =======
 
 Derby rich text editor component based on Quill
+
+
+To get you started Use
+===
+
+
+
+server.js
+---
+        require('derby-starter').run(__dirname);
+
+
+package.json:
+---
+
+ * include in the dependencies section:
+
+
+  `"dependencies": {
+    "d-quill": "0.18.0",
+    "derby": "^0.6.0-alpha24",
+    "derby-starter": "^0.2.1"
+  },`
+
+
+index.html
+----
+
+`<Title:>`Quill Test
+
+`<Head:>`
+
+`  <link rel="stylesheet" href="//cdn.quilljs.com/latest/quill.snow.css" />`
+
+`<Body:>`
+`  <d-quill name="editor" value="{{ dquillExample.value }}"></d-quill>`
+
+
+
+index.js
+---
+
+`var app = module.exports = require('derby').createApp('dquillExample', __filename);`
+
+`app.loadViews(__dirname);`
+
+
+`app.component(require('d-quill'));`
+
+`app.get (/\/([^\/]*)\/?/, function (page, model){
+        model.subscribe('dquillExample.value', function(){
+                page.render();
+        });
+});`
+

index.html

@@ -1,2 +1,51 @@
 <index: element="d-quill">
-  <div as="editor">{{unbound value}}</div>
+
+<div as="toolbar" id="toolbar" class="toolbar ql-toolbar">
+  <span class="ql-format-group">
+    <select class="ql-size">
+      <option value="small" >Small</option>
+      <option value="normal" selected>Normal</option>
+      <option value="large">Large</option>
+      <option value="huge">Huge</option>
+    </select>
+    <select class="ql-font">
+      <option value='serif'>Serif</option>
+      <option value='sans-serif'>Sans Serif</option>
+      <option value='monospace'>Monospace</option>
+    </select>
+  </span>
+
+  <span class="ql-format-group">
+    <span title="Bold" class="ql-format-button ql-bold"></span>
+    <span title="Italics" class="ql-format-button ql-italic"></span>
+    <span title="Strike Through" class="ql-format-button ql-strike"></span>
+    <span title="Underline" class="ql-format-button ql-underline"></span>
+  </span >
+
+  <span class="ql-format-separator"></span>
+
+  <span class="ql-format-group">
+    <span title="List"   class="ql-format-button ql-list"></span>
+    <span title="Bullet" class="ql-format-button ql-bullet"></span>
+  </span>
+
+  <span class="ql-format-separator"></span>
+
+  <select class="Text Alignment" class="ql-align">
+    <option value="left" label="Left"></option>
+    <option value="center" label="Center"></option>
+    <option value="right" label="Right"></option>
+    <option value="justiry" label="Justify"></option>
+  </select>
+
+  <span class="ql-format-separator"></span>
+
+  <span class="ql-format-group">
+    <span title="Link"        class="ql-format-button ql-link"></span>
+    <span title="Image"  class="ql-format-button ql-image"></span>
+    <span title="Toggle Author" class="ql-format-button ql-authorship"></span>
+  </span>
+
+</div>
+
+<div as="editor"> {{ unbound value }}</div>

index.js

@@ -3,51 +3,185 @@ var Range = require('quilljs/lib/lib/range');
 var LINE_FORMATS = {
   'align': true
 };
+
+//
+//  1 Magenta
+//  2 aqua
+//  3 Yellow
+//  4 Grey
+//
+
+// Add Authors here  hardcode now, dynamic later.
+//
+var AUTHORCOLORS = {
+  "":"rgb(119,136,153)"
+};
+
+
 var BINARY_FORMATS = {
-  'bold': true
-, 'italic': true
-, 'strike': true
-, 'underline': true
+  'bold': true,
+  'italic': true,
+  'strike': true,
+  'underline': true,
+  'font': true,
+  'size':true,
+  'color': true,
+  'background': true,
+  'image': true,
+  'link': true,
+  'bullet': true,
+  'list': true,
+  'align':true,
+  'author':true,
+  'multi-cursor':true
 };
+
 var MIXED_FORMAT_VALUE = '*';
 
 module.exports = DerbyQuill;
-function DerbyQuill() {}
-DerbyQuill.prototype.view = __dirname;
+function DerbyQuill() {};
+
+
 
 DerbyQuill.prototype.init = function() {
   this.quill = null;
   this.activeFormats = this.model.at('activeFormats');
   this.value = this.model.at('value');
+  this.toolbar = this.model.at('toolbar');
 };
 
+DerbyQuill.prototype.view = __dirname;
+
 DerbyQuill.prototype.create = function() {
+  var self = this;
+
+  var _author = self.page.params.url.substring(1);
+
   var Quill = require('quilljs');
-  var quill = this.quill = new Quill(this.editor);
+  var options = {};
+    options.theme = "snow";
+    options.modules = {
+      "link-tooltip": true,
+      "toolbar": {"container":'#toolbar'},
+      'image-tooltip': true,
+      'multi-cursor': true
+      };
+
+  if(_author) {
+    options.modules["authorship"] = {authorId: _author, enabled: true};
+  }
+
+  var quill = this.quill = new Quill(this.editor, options);
+
+  if(_author) {
+    var authorship = this.quill.getModule("authorship");
+    authorship.addAuthor(_author, AUTHORCOLORS[_author]);
+  }
+
+  var cursorship = this.quill.getModule("multi-cursor");
+  cursorship.setCursor(_author, this.quill.getLength()-1, _author, AUTHORCOLORS[_author]);
+
+  // Hack - to get the HTML into the Quill Editor
+  // and not just the view.
+  this.quill.setHTML(this.model.data.value);
+  var model = this.model;
+
+
+
+
+  // THe Model has changed.  THis means ANOTHER quill connected to this
+  // thing has changed the data.  Update the quill editor.
+  //
+  model.on("change", "value", function(newVal, oldVal, passed){
+    self.quill.setHTML(newVal);
+  });
+
+  self.dom.on('click', function (mouseEvent) {
+    if( "Toggle Author" == mouseEvent.target.title) {
+      var a = self.quill.getModule("authorship");
+          a.enable();
+    }
+  });
+
+  var getDeltaEnd = function (delta) {
+    for (var index in delta.ops){
+      for (var name in delta.ops[index]) {
+        switch(name){
+          case "insert":
+          case "delete":
+              break;
+          case "retain":
+              return delta.ops[index][name];
+              break;
+        }
+
+      }
+    }
+  }
+
+  var getDeltaAuthor = function (delta) {
+    for (var index in delta.ops){
+      for (var name in delta.ops[index]) {
+        switch(name){
+          case "insert":
+          case "delete":
+          case "retain":
+              break;
+          case "attributes":
+              return delta.ops[index].attributes.author;
+        }
+
+      }
+    }
+
+  }
+
+  // this current user has changed or the model has changed.
+  // need to check which one "user" or "api" made the change
+  //
+  quill.on('text-change', function(delta, source) {
+    var _end = getDeltaEnd(delta);
+
+    if(source == "user"){
+      self.value.set(quill.editor.innerHTML);
+
+    cursorship.moveCursor(_author, _end);
+    _end++;
+      self.quill.setSelection(_end, _end);
+    }
+
+    // else {
+    //
+    //   var _author = getDeltaAuthor(delta);
+    //
+    //   cursorship.moveCursor(_author, _end);
+    // }
 
-  var self = this;
-  quill.on('text-change', function() {
-    self.value.set(quill.editor.innerHTML);
     var range = quill.getSelection();
     self.updateActiveFormats(range);
   });
-  quill.on('selection-change', function(range) {
+
+
+  quill.on('selection-change', function(range, source) {
     self.updateActiveFormats(range);
   });
+
   // HACK: Quill should provide an event here, but we wrap the method to
   // get a hook into what's going on instead
   var prepareFormat = quill.prepareFormat;
   quill.prepareFormat = function(name, value) {
     prepareFormat.call(quill, name, value);
     self.activeFormats.set(name, value);
   };
+
   // Iframes will stop bubbling at their window, so re-dispatch all clicks
   // that bubble to the top of the iframe document on the containing element.
   // This is helpful for popups to figure out when they should close
   this.dom.on('click', quill.root.ownerDocument, function(e) {
     var event = new MouseEvent(e.type, e);
     self.editor.dispatchEvent(event);
   });
+
 };
 
 DerbyQuill.prototype.clearFormatting = function() {
@@ -161,8 +295,8 @@ DerbyQuill.prototype.setRangeContents = function(range, value, attributes) {
   var startLength = this.quill.getLength();
   this.quill.setContents({
     startLength: startLength
-  , ops: [
-      {start: 0, end: range.start}
+    , ops: [
+    {start: 0, end: range.start}
     , {value: value, attributes: attributes}
     , {start: range.end, end: startLength}
     ]

package.json

@@ -16,10 +16,19 @@
   "bugs": {
     "url": "https://github.com/codeparty/d-quill/issues"
   },
-  "author": "Nate Smith",
+  "author": {
+    "name": "Nate Smith"
+  },
   "license": "MIT",
   "dependencies": {
-    "quilljs": "^0.13.4"
+    "quilljs": "0.13.7"
   },
-  "devDependencies": {}
+  "devDependencies": {},
+  "readme": "d-quill\n=======\n\nDerby rich text editor component based on Quill\n",
+  "readmeFilename": "README.md",
+  "homepage": "https://github.com/codeparty/d-quill",
+  "_id": "[email protected]",
+  "_shasum": "5b96c03109e395aa9dfdf13d170db04bd82f80ef",
+  "_from": "d-quill@*",
+  "_resolved": "https://registry.npmjs.org/d-quill/-/d-quill-0.0.3.tgz"
 }