add equation demo

examples/index.jade

@@ -3,6 +3,7 @@ html
   head
     title Quill Editor Demo
     meta(charset='utf-8')
+    link(rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.3.0/katex.min.css")
     style.
       body {
         font-family: 'Helvetica', 'Arial', san-serif;
@@ -73,11 +74,13 @@ html
         button.ql-strike(title='Strikethrough') Strike
         button.ql-link(title='Link') Link
         button.ql-image(title='Image') Image
+        button.ql-equation(title='Equation') Equation
         button.ql-list(title='Bullet' data-value='bullet') Bullet
         button.ql-list(title='List' data-value='ordered') List
       #editor-container
         p Test
 
+    script(type='text/javascript', src='//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.3.0/katex.min.js')
     script(type='text/javascript', src='../quill.js')
     script(type='text/javascript').
       var quill = new Quill('#editor-container', {

src/blots/cursor.js

@@ -23,7 +23,6 @@ Cursor.tagName = 'span';
 Cursor.CONTENTS = "\uFEFF";   // Zero width space
 
 
-Parchment.register(Cursor);
-Parchment.register(Parchment.Inline);   // Redefine to overwrite cursor
+Parchment.register(Cursor, false);
 
 export { Cursor as default };

src/editor.js

@@ -17,11 +17,13 @@ class Editor extends Parchment.Container {
   applyDelta(delta) {
     delta.ops.reduce((index, op) => {
       if (op.insert != null) {
+        // TODO handle insert with attributes
         if (typeof op.insert === 'string') {
           this.insertAt(index, op.insert);
           return index + op.insert.length;
         } else {
-          this.insertAt(index, op.attributes);
+          let key = Object.keys(op.insert)[0];
+          this.insertAt(index, key, op.insert[key]);
           return index + 1;
         }
       } else if (typeof op.delete === 'number') {

src/formats/equation.js

@@ -0,0 +1,24 @@
+import Parchment from 'parchment';
+
+
+class Equation extends Parchment.Embed {
+  constructor(value) {
+    super(value);
+    if (typeof value === 'string') {
+      katex.render(value, this.domNode);
+      this.domNode.setAttribute('data-value', value);
+    }
+    this.domNode.setAttribute('contenteditable', false);
+  }
+
+  getValue() {
+    return { equation: this.domNode.getAttribute('data-value') };
+  }
+}
+Equation.blotName = 'equation';
+Equation.tagName = 'SPAN';
+
+
+Parchment.register(Equation, false);
+
+export { Equation as default };

src/modules/toolbar.js

@@ -91,13 +91,22 @@ class Toolbar {
 Toolbar.DEFAULTS = {
   container: null,
   formats: {
+    equation: function(input, range, callback) {
+      let value = prompt('Enter equation:');
+      this.quill.insertEmbed(range.start, 'equation', value, Quill.sources.USER);
+      this.quill.insertText(range.start + 1, ' ', Quill.sources.USER);
+      if (!range.isCollapsed()) {
+        this.quill.deleteText(range, Quill.sources.USER);
+      }
+      this.quill.setSelection(range.start + 2, range.start + 2, Quill.sources.SILENT);
+    },
     image: function(input, range, callback) {
       let value = prompt('Enter image url:', 'http://');
       this.quill.insertEmbed(range.start, 'image', { url: value });
       if (!range.isCollapsed()) {
         this.quill.deleteText(range, Quill.sources.USER);
       }
-      this.quill.setSelection(range.start + 1, range.start + 1, Quill.sources.USER);
+      this.quill.setSelection(range.start + 1, range.start + 1, Quill.sources.SILENT);
     },
     link: function(input, range, callback) {
       let value = prompt('Enter link url:', 'http://');

src/quill.js

@@ -13,6 +13,7 @@ import BreakBlot from './blots/break';
 import CursorBlot from './blots/cursor';
 
 import HeaderFormat from './formats/header';
+import EquationFormat from './formats/equation';
 import ImageFormat from './formats/image';
 import InlineFormat from './formats/inline';
 
@@ -347,7 +348,7 @@ Quill.DEFAULTS = {
     'bold', 'code', 'italic', 'script', 'strike', 'underline',
     'link',
     'background', 'color', 'font', 'size',
-    'image'
+    'image', 'equation'
   ],
   modules: {
     'keyboard': true,