From 10c06b5072dd6a2ed2336ff9cd7a1dea45972a36 Mon Sep 17 00:00:00 2001
From: Jason Chen <jhchen7@gmail.com>
Date: Thu, 5 Nov 2015 16:17:00 -0800
Subject: [PATCH] add equation demo

---
 examples/index.jade     |  3 +++
 src/blots/cursor.js     |  3 +--
 src/editor.js           |  4 +++-
 src/formats/equation.js | 24 ++++++++++++++++++++++++
 src/modules/toolbar.js  | 11 ++++++++++-
 src/quill.js            |  3 ++-
 6 files changed, 43 insertions(+), 5 deletions(-)
 create mode 100644 src/formats/equation.js

diff --git a/examples/index.jade b/examples/index.jade
index 0e78c10715..33fd1c7018 100644
--- a/examples/index.jade
+++ b/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', {
diff --git a/src/blots/cursor.js b/src/blots/cursor.js
index b72a1ef2d7..0c0c6c9fe5 100644
--- a/src/blots/cursor.js
+++ b/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 };
diff --git a/src/editor.js b/src/editor.js
index 3963023bac..ac10deb1b9 100644
--- a/src/editor.js
+++ b/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') {
diff --git a/src/formats/equation.js b/src/formats/equation.js
new file mode 100644
index 0000000000..116b9e19c5
--- /dev/null
+++ b/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 };
diff --git a/src/modules/toolbar.js b/src/modules/toolbar.js
index aee0298500..12f566345b 100644
--- a/src/modules/toolbar.js
+++ b/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://');
diff --git a/src/quill.js b/src/quill.js
index d8a9f31ef0..2c32762e44 100644
--- a/src/quill.js
+++ b/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,