joshuaob · December 29, 2016 21:47 · May 11, 2015
diff --git a/quill-component.js b/quill-component.js
@@ -0,0 +1,76 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend(KeyHandling, {
+
+  setupQuill: Ember.on("didInsertElement", function() {
+    this.quill = new Quill(this.$('.rich-text-editor__contents').get(0));
+
+    this.quill.on("text-change", this.editorChanged.bind(this));
+    this.quill.on("selection-change", this.selectionChanged.bind(this));
+
+    this.quill.onModuleLoad('keyboard', (keyboard) => {
+      // remove built-in tabbing behaviour
+      keyboard.hotkeys[KEY_CODES.tab] = [];
+
+      const tabs = [
+        {key: KEY_CODES.tab},
+        {key: KEY_CODES.tab, shiftKey: true}
+      ];
+      keyboard.addHotkey(tabs, (sel, key, e) => this.tabPressed(e));
+
+      // make sure our handlers get called before the editor's internal ones
+      // otherwise text has already been deleted
+      keyboard.addHotkey(KEY_CODES.delete,    (sel, key, e) => this.deletePressed(e)    );
+      keyboard.hotkeys[KEY_CODES.delete].reverse();
+
+      keyboard.addHotkey(KEY_CODES.backspace, (sel, key, e) => this.backspacePressed(e) );
+      keyboard.hotkeys[KEY_CODES.backspace].reverse();
+
+      // Quill enter handling happens before we get a chance to respond, so
+      // replace with our own enter handler & call into the original ones after
+      const origEnterHandler = keyboard.hotkeys[KEY_CODES.enter][0];
+      keyboard.hotkeys[KEY_CODES.enter] = [];
+
+      const enter = [
+        {key: KEY_CODES.enter},
+        {key: KEY_CODES.enter, shiftKey: true},
+        {key: KEY_CODES.enter, metaKey: true}
+      ];
+
+      keyboard.addHotkey(enter, (sel, key, e) => {
+        e.preventDefault();
+        if (this.enterPressed(e)) {
+          origEnterHandler.callback(sel, key, e);
+        }
+      });
+    });
+
+    this.valueDidChange();
+  }),
+
+  destroyQuill: Ember.on("willDestroyElement", function() {
+    this.quill.destroy();
+  }),
+
+  valueDidChange: Ember.observer("value", function() {
+    if (this._state !== "inDOM") {
+      return;
+    }
+
+    const value   = this.get("value");
+    const current = this.get("_value"); // don't use this.quill.getHTML() as we may have diverged with fast typing
+
+    if (value !== current) {
+      this.quill.setHTML(value || "");
+      this.set("_value", value);
+    }
+  }),
+
+  editorChanged(delta, source) {
+    const value = this.quill.getHTML();
+    this.set("_value", value);
+    if (source === 'api') { return; }
+    this.sendAction("change", value);
+  }
+
+});