quill-component.js

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);
  }

});