♻️ Turn Composition into a module

This change allows consumers to modify the behaviour of the new
`Composition` class by registering an alternative class instead of the
default module.

core.ts

@@ -16,6 +16,7 @@ import Selection from './core/selection';
 import Uploader from './modules/uploader';
 import Delta, { Op, OpIterator, AttributeMap } from '@reedsy/quill-delta';
 import Input from './modules/input';
+import Composition from './core/composition';
 
 export { Delta, Op, OpIterator, AttributeMap };
 
@@ -31,6 +32,7 @@ Quill.register({
   'blots/text': TextBlot,
 
   'modules/clipboard': Clipboard,
+  'modules/composition': Composition,
   'modules/history': History,
   'modules/keyboard': Keyboard,
   'modules/selection': Selection,

core/composition.ts

@@ -1,18 +1,26 @@
 import Embed from '../blots/embed';
 import Scroll from '../blots/scroll';
 import Emitter from './emitter';
+import Module from './module';
 
-class Composition {
+class Composition extends Module {
   isComposing = false;
 
-  constructor(private scroll: Scroll, private emitter: Emitter) {
-    scroll.domNode.addEventListener('compositionstart', event => {
+  private scroll: Scroll;
+  private emitter: Emitter;
+
+  constructor(quill, options) {
+    super(quill, options);
+    this.scroll = quill.scroll;
+    this.emitter = quill.emitter;
+
+    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);
       }

core/quill.ts

@@ -174,8 +174,8 @@ class Quill {
       emitter: this.emitter,
     });
     this.editor = new Editor(this.scroll);
-    this.composition = new Composition(this.scroll, this.emitter);
     this.theme = new this.options.theme(this, this.options); // eslint-disable-line new-cap
+    this.composition = this.theme.addModule('composition');
     this.selection = this.theme.addModule('selection');
     this.keyboard = this.theme.addModule('keyboard');
     this.clipboard = this.theme.addModule('clipboard');

core/theme.ts

@@ -4,6 +4,7 @@ import History from '../modules/history';
 import Keyboard from '../modules/keyboard';
 import Uploader from '../modules/uploader';
 import Selection from '../core/selection';
+import Composition from './composition';
 
 interface ThemeOptions {
   modules: Record<string, unknown>;
@@ -31,6 +32,7 @@ class Theme {
   }
 
   addModule(name: 'clipboard'): Clipboard;
+  addModule(name: 'composition'): Composition;
   addModule(name: 'keyboard'): Keyboard;
   addModule(name: 'uploader'): Uploader;
   addModule(name: 'history'): History;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reedsy/quill",
-  "version": "2.0.0-reedsy-3.0.2",
+  "version": "2.0.0-reedsy-3.1.0",
   "description": "Your powerful, rich text editor",
   "author": "Jason Chen <jhchen7@gmail.com>",
   "homepage": "http://quilljs.com",

themes/base.ts

@@ -12,6 +12,7 @@ import History from '../modules/history';
 import Keyboard from '../modules/keyboard';
 import Uploader from '../modules/uploader';
 import Selection from '../core/selection';
+import Composition from '../core/composition';
 
 const ALIGNS = [false, 'center', 'right', 'justify'];
 
@@ -93,6 +94,7 @@ class BaseTheme extends Theme {
   }
 
   addModule(name: 'clipboard'): Clipboard;
+  addModule(name: 'composition'): Composition;
   addModule(name: 'keyboard'): Keyboard;
   addModule(name: 'uploader'): Uploader;
   addModule(name: 'history'): History;