update parchment, use es6 import

blots/block.js

@@ -1,21 +1,26 @@
 import extend from 'extend';
 import Delta from 'quill-delta';
-import Parchment from 'parchment';
+import Parchment, {
+  AttributorStore,
+  BlockBlot,
+  EmbedBlot,
+  LeafBlot,
+} from 'parchment';
 import Break from './break';
 import Inline from './inline';
 import TextBlot from './text';
 
 const NEWLINE_LENGTH = 1;
 
-class Block extends Parchment.Block {
+class Block extends BlockBlot {
   constructor(domNode) {
     super(domNode);
     this.cache = {};
   }
 
   delta() {
     if (this.cache.delta == null) {
-      this.cache.delta = this.descendants(Parchment.Leaf)
+      this.cache.delta = this.descendants(LeafBlot)
         .reduce((delta, leaf) => {
           if (leaf.length() === 0) {
             return delta;
@@ -126,12 +131,12 @@ class Block extends Parchment.Block {
 Block.blotName = 'block';
 Block.tagName = 'P';
 Block.defaultChild = Break;
-Block.allowedChildren = [Break, Inline, Parchment.Embed, TextBlot];
+Block.allowedChildren = [Break, Inline, EmbedBlot, TextBlot];
 
-class BlockEmbed extends Parchment.Embed {
+class BlockEmbed extends EmbedBlot {
   attach() {
     super.attach();
-    this.attributes = new Parchment.Attributor.Store(this.domNode);
+    this.attributes = new AttributorStore(this.domNode);
   }
 
   delta() {

blots/break.js

@@ -1,6 +1,6 @@
-import Parchment from 'parchment';
+import { EmbedBlot } from 'parchment';
 
-class Break extends Parchment.Embed {
+class Break extends EmbedBlot {
   static value() {
     return undefined;
   }

blots/container.js

@@ -1,5 +1,5 @@
-import Parchment from 'parchment';
+import { ContainerBlot } from 'parchment';
 
-class Container extends Parchment.Container {}
+class Container extends ContainerBlot {}
 
 export default Container;

blots/cursor.js

@@ -1,7 +1,7 @@
-import Parchment from 'parchment';
+import Parchment, { EmbedBlot } from 'parchment';
 import TextBlot from './text';
 
-class Cursor extends Parchment.Embed {
+class Cursor extends EmbedBlot {
   static value() {
     return undefined;
   }

blots/embed.js

@@ -1,9 +1,9 @@
-import Parchment from 'parchment';
+import Parchment, { EmbedBlot } from 'parchment';
 import TextBlot from './text';
 
 const GUARD_TEXT = '\uFEFF';
 
-class Embed extends Parchment.Embed {
+class Embed extends EmbedBlot {
   constructor(node) {
     super(node);
     this.contentNode = document.createElement('span');

blots/inline.js

@@ -1,8 +1,8 @@
-import Parchment from 'parchment';
+import Parchment, { EmbedBlot, InlineBlot } from 'parchment';
 import Break from './break';
 import Text from './text';
 
-class Inline extends Parchment.Inline {
+class Inline extends InlineBlot {
   static compare(self, other) {
     const selfIndex = Inline.order.indexOf(self);
     const otherIndex = Inline.order.indexOf(other);
@@ -42,7 +42,7 @@ class Inline extends Parchment.Inline {
     }
   }
 }
-Inline.allowedChildren = [Inline, Break, Parchment.Embed, Text];
+Inline.allowedChildren = [Inline, Break, EmbedBlot, Text];
 // Lower index means deeper in the DOM tree, since not found (-1) is for embeds
 Inline.order = [
   'cursor',

blots/scroll.js

@@ -1,4 +1,4 @@
-import Parchment from 'parchment';
+import Parchment, { ScrollBlot, ContainerBlot } from 'parchment';
 import Emitter from '../core/emitter';
 import Block, { BlockEmbed } from './block';
 import Break from './break';
@@ -8,7 +8,7 @@ function isLine(blot) {
   return blot instanceof Block || blot instanceof BlockEmbed;
 }
 
-class Scroll extends Parchment.Scroll {
+class Scroll extends ScrollBlot {
   constructor(domNode, config) {
     super(domNode);
     this.emitter = config.emitter;
@@ -123,7 +123,7 @@ class Scroll extends Parchment.Scroll {
         (child, childIndex, childLength) => {
           if (isLine(child)) {
             lines.push(child);
-          } else if (child instanceof Parchment.Container) {
+          } else if (child instanceof ContainerBlot) {
             lines = lines.concat(getLines(child, childIndex, lengthLeft));
           }
           lengthLeft -= childLength;

blots/text.js

@@ -1,5 +1,5 @@
-import Parchment from 'parchment';
+import { TextBlot } from 'parchment';
 
-class TextBlot extends Parchment.Text { }
+class Text extends TextBlot {}
 
-export default TextBlot;
+export default Text;

core/editor.js

@@ -3,7 +3,7 @@ import equal from 'deep-equal';
 import extend from 'extend';
 import Delta from 'quill-delta';
 import DeltaOp from 'quill-delta/lib/op';
-import Parchment from 'parchment';
+import Parchment, { LeafBlot } from 'parchment';
 import CursorBlot from '../blots/cursor';
 import Block, { bubbleFormats } from '../blots/block';
 import Break from '../blots/break';
@@ -39,7 +39,7 @@ class Editor {
           const [line, offset] = this.scroll.line(index);
           let formats = extend({}, bubbleFormats(line));
           if (line instanceof Block) {
-            const [leaf] = line.descendant(Parchment.Leaf, offset);
+            const [leaf] = line.descendant(LeafBlot, offset);
             formats = extend(formats, bubbleFormats(leaf));
           }
           attributes = DeltaOp.attributes.diff(formats, attributes) || {};
@@ -112,13 +112,13 @@ class Editor {
         const [blot] = path;
         if (blot instanceof Block) {
           lines.push(blot);
-        } else if (blot instanceof Parchment.Leaf) {
+        } else if (blot instanceof LeafBlot) {
           leaves.push(blot);
         }
       });
     } else {
       lines = this.scroll.lines(index, length);
-      leaves = this.scroll.descendants(Parchment.Leaf, index, length);
+      leaves = this.scroll.descendants(LeafBlot, index, length);
     }
     const formatsArr = [lines, leaves].map(blots => {
       if (blots.length === 0) return {};

core/selection.js

@@ -1,4 +1,4 @@
-import Parchment from 'parchment';
+import Parchment, { LeafBlot, ContainerBlot } from 'parchment';
 import clone from 'clone';
 import equal from 'deep-equal';
 import Emitter from './emitter';
@@ -111,7 +111,7 @@ class Selection {
       const blot = Parchment.find(nativeRange.start.node, false);
       if (blot == null) return;
       // TODO Give blot ability to not split
-      if (blot instanceof Parchment.Leaf) {
+      if (blot instanceof LeafBlot) {
         const after = blot.split(nativeRange.start.offset);
         blot.parent.insertBefore(this.cursor, after);
       } else {
@@ -203,7 +203,7 @@ class Selection {
       const index = blot.offset(this.scroll);
       if (offset === 0) {
         return index;
-      } else if (blot instanceof Parchment.Container) {
+      } else if (blot instanceof ContainerBlot) {
         return index + blot.length();
       }
       return index + blot.index(node, offset);

docs/docs/standalone/collaborative2.md

@@ -0,0 +1,108 @@
+---
+layout: standalone
+title: Collaborative Example
+permalink: /standalone/collaborative/
+---
+
+<!-- head -->
+
+<link rel="stylesheet" href="{{site.highlightjs}}/styles/monokai-sublime.min.css">
+<link rel="stylesheet" href="{{site.cdn}}{{site.version}}/quill.bubble.css">
+<link rel="stylesheet" href="{{site.cdn}}{{site.version}}/quill.snow.css">
+<style>
+  body {
+    padding: 25px;
+  }
+  #bubble-container, #snow-container {
+    margin-bottom: 25px;
+    height: 200px;
+  }
+</style>
+<!-- head -->
+<div>
+  <button id="insert-table">Insert Table</button>
+  <button id="insert-row-above">Insert Row Above</button>
+  <button id="insert-row-below">Insert Row Below</button>
+  <button id="insert-column-left">Insert Column Left</button>
+  <button id="insert-column-right">Insert Column Right</button>
+  <button id="delete-row">Delete Row</button>
+  <button id="delete-column">Delete Column</button>
+  <button id="delete-table">Delete Table</button>
+</div>
+<div id="snow-container"></div>
+<div id="bubble-container"></div>
+<!-- script -->
+<script src="{{site.highlightjs}}/highlight.min.js"></script>
+<script src="{{site.cdn}}{{site.version}}/{{site.quill}}"></script>
+<script>
+  var Delta = Quill.import('delta');
+  var bubble = new Quill('#bubble-container', {
+    theme: 'bubble',
+    modules: {
+      syntax: true,
+      table: true,
+      keyboard: {
+        bindings: {
+          'markdown-code-block': {
+            key: 13,
+            prefix: /^```$/,
+            collapsed: true,
+            format: { 'code-block': false },
+            handler(range) {
+              this.quill.history.cutoff();
+              const delta = new Delta().retain(range.index - 3)
+                .delete(3)
+                .retain(1, { 'code-block': true });
+              this.quill.updateContents(delta, Quill.sources.USER);
+              this.quill.history.cutoff();
+            },
+          },
+        }
+      }
+    }
+  });
+  var snow = new Quill('#snow-container', {
+    theme: 'snow',
+    modules: {
+      syntax: true,
+      table: true,
+      toolbar: [['code-block', 'clean']]
+    }
+  });
+  bubble.on('text-change', function(delta, old, source) {
+    if (source === 'user') {
+      snow.updateContents(delta, 'api');
+    }
+  });
+  const table = snow.getModule('table');
+  snow.on('text-change', function(delta, old, source) {
+    if (source === 'user') {
+      bubble.updateContents(delta, 'api');
+    }
+  });
+  document.querySelector('#insert-table').addEventListener('click', function() {
+    table.insertTable(2, 2);
+  });
+  document.querySelector('#insert-row-above').addEventListener('click', function() {
+    table.insertRowAbove();
+  });
+  document.querySelector('#insert-row-below').addEventListener('click', function() {
+    table.insertRowBelow();
+  });
+  document.querySelector('#insert-column-left').addEventListener('click', function() {
+    table.insertColumnLeft();
+  });
+  document.querySelector('#insert-column-right').addEventListener('click', function() {
+    table.insertColumnRight();
+  });
+  document.querySelector('#delete-row').addEventListener('click', function() {
+    table.deleteRow();
+  });
+  document.querySelector('#delete-column').addEventListener('click', function() {
+    table.deleteColumn();
+  });
+  document.querySelector('#delete-table').addEventListener('click', function() {
+    table.deleteTable();
+  });
+</script>
+<!-- script -->

formats/align.js

@@ -1,20 +1,16 @@
-import Parchment from 'parchment';
+import Parchment, {
+  Attributor,
+  ClassAttributor,
+  StyleAttributor,
+} from 'parchment';
 
 const config = {
   scope: Parchment.Scope.BLOCK,
   whitelist: ['right', 'center', 'justify'],
 };
 
-const AlignAttribute = new Parchment.Attributor.Attribute(
-  'align',
-  'align',
-  config,
-);
-const AlignClass = new Parchment.Attributor.Class('align', 'ql-align', config);
-const AlignStyle = new Parchment.Attributor.Style(
-  'align',
-  'text-align',
-  config,
-);
+const AlignAttribute = new Attributor('align', 'align', config);
+const AlignClass = new ClassAttributor('align', 'ql-align', config);
+const AlignStyle = new StyleAttributor('align', 'text-align', config);
 
 export { AlignAttribute, AlignClass, AlignStyle };

formats/background.js

@@ -1,7 +1,7 @@
-import Parchment from 'parchment';
+import Parchment, { ClassAttributor } from 'parchment';
 import { ColorAttributor } from './color';
 
-const BackgroundClass = new Parchment.Attributor.Class('background', 'ql-bg', {
+const BackgroundClass = new ClassAttributor('background', 'ql-bg', {
   scope: Parchment.Scope.INLINE,
 });
 const BackgroundStyle = new ColorAttributor('background', 'background-color', {

formats/color.js

@@ -1,6 +1,6 @@
-import Parchment from 'parchment';
+import Parchment, { ClassAttributor, StyleAttributor } from 'parchment';
 
-class ColorAttributor extends Parchment.Attributor.Style {
+class ColorAttributor extends StyleAttributor {
   value(domNode) {
     let value = super.value(domNode);
     if (!value.startsWith('rgb(')) return value;
@@ -13,7 +13,7 @@ class ColorAttributor extends Parchment.Attributor.Style {
   }
 }
 
-const ColorClass = new Parchment.Attributor.Class('color', 'ql-color', {
+const ColorClass = new ClassAttributor('color', 'ql-color', {
   scope: Parchment.Scope.INLINE,
 });
 const ColorStyle = new ColorAttributor('color', 'color', {

formats/direction.js

@@ -1,24 +1,16 @@
-import Parchment from 'parchment';
+import Parchment, {
+  Attributor,
+  ClassAttributor,
+  StyleAttributor,
+} from 'parchment';
 
 const config = {
   scope: Parchment.Scope.BLOCK,
   whitelist: ['rtl'],
 };
 
-const DirectionAttribute = new Parchment.Attributor.Attribute(
-  'direction',
-  'dir',
-  config,
-);
-const DirectionClass = new Parchment.Attributor.Class(
-  'direction',
-  'ql-direction',
-  config,
-);
-const DirectionStyle = new Parchment.Attributor.Style(
-  'direction',
-  'direction',
-  config,
-);
+const DirectionAttribute = new Attributor('direction', 'dir', config);
+const DirectionClass = new ClassAttributor('direction', 'ql-direction', config);
+const DirectionStyle = new StyleAttributor('direction', 'direction', config);
 
 export { DirectionAttribute, DirectionClass, DirectionStyle };