Refactor composition to allow overriding

core/composition.ts

@@ -6,13 +6,17 @@ class Composition {
   isComposing = false;
 
   constructor(private scroll: Scroll, private emitter: Emitter) {
-    scroll.domNode.addEventListener('compositionstart', event => {
+    this.setupListeners();
+  }
+
+  private setupListeners() {
+    this.scroll.domNode.addEventListener('compositionstart', event => {
       if (!this.isComposing) {
         this.handleCompositionStart(event);
       }
     });
 
-    scroll.domNode.addEventListener('compositionend', event => {
+    this.scroll.domNode.addEventListener('compositionend', event => {
       if (this.isComposing) {
         this.handleCompositionEnd(event);
       }

test/unit.js

@@ -12,6 +12,7 @@ import './unit/blots/inline';
 
 import './unit/core/editor';
 import './unit/core/selection';
+import './unit/core/composition';
 import './unit/core/quill';
 
 import './unit/formats/color';

test/unit/core/composition.js

@@ -0,0 +1,17 @@
+import Emitter from '../../../core/emitter';
+import Composition from '../../../core/composition';
+import Scroll from '../../../blots/scroll';
+
+describe('Selection', function () {
+  it('triggers events on compositionstart', function (done) {
+    const scroll = this.initialize(Scroll, '<p></p>');
+    const emitter = new Emitter();
+    new Composition(scroll, emitter);
+
+    emitter.on(Emitter.events.COMPOSITION_BEFORE_START, () => {
+      done();
+    });
+
+    scroll.domNode.dispatchEvent(new CompositionEvent('compositionstart'));
+  });
+});