feat: global customModules and customOptions

README.md

@@ -223,6 +223,11 @@ See [Quill Configuration](https://quilljs.com/docs/configuration/) for a full li
 
 The `QuillModule` exports the `defaultModules` if you want to extend them :).
 
+### Custom Modules and options/formats
+
+- use customOptions for adding for example custom font sizes or other options/formats
+- use customModules for adding and overwriting modules, e.g. image-resize or your own modules
+
 ## QuillEditorComponent
 
 ### Hint

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ngx-quill",
   "license": "MIT",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "author": {
     "name": "Bengt Weiße"
   },

src/quill-editor.component.spec.ts

@@ -1102,6 +1102,14 @@ describe('QuillEditor - base config', () => {
       declarations: [TestComponent, TestToolbarComponent],
       imports: [FormsModule, QuillModule],
       providers: QuillModule.forRoot({
+        customModules: [{
+          path: 'modules/custom',
+          implementation: CustomModule
+        }],
+        customOptions: [{
+          import: 'attributors/style/size',
+          whitelist: ['14']
+        }],
         bounds: 'body',
         debug: false,
         format: 'object',
@@ -1122,6 +1130,8 @@ describe('QuillEditor - base config', () => {
 
   it('renders editor with config',  async () => {
     fixture = TestBed.createComponent(TestComponent)
+    const spy = spyOn(QuillNamespace, 'register').and.callThrough()
+    const spy2 = spyOn(QuillNamespace, 'import').and.callThrough()
     fixture.detectChanges()
     await fixture.whenStable()
 
@@ -1141,6 +1151,10 @@ describe('QuillEditor - base config', () => {
 
     expect(JSON.stringify(fixture.componentInstance.title)).toEqual(JSON.stringify({ ops: [{ attributes: { bold: true }, insert: `content`}, {'insert':'\n'}] }))
     expect(editor.root.dataset.placeholder).toEqual('placeholder')
+    expect(spy2).toHaveBeenCalledWith('attributors/style/size')
+    expect(spy).toHaveBeenCalledWith({'attrName': 'size', 'keyName': 'font-size', 'scope': 5, 'whitelist': ['14']}, true)
+    expect(spy).toHaveBeenCalledWith('formats/size', {'attrName': 'size', 'keyName': 'font-size', 'scope': 5, 'whitelist': ['14']}, true)
+    expect(spy).toHaveBeenCalledWith('modules/custom', CustomModule)
 
     expect(fixture).toMatchSnapshot()
   })

src/quill-editor.component.ts

@@ -1,7 +1,7 @@
 import {DOCUMENT, isPlatformServer} from '@angular/common'
 import {DomSanitizer} from '@angular/platform-browser'
 
-import {QUILL_CONFIG_TOKEN, QuillConfig, QuillModules} from './quill-editor.interfaces'
+import {QUILL_CONFIG_TOKEN, QuillConfig, QuillModules, CustomOption, CustomModule} from './quill-editor.interfaces'
 
 import Quill, { Delta } from 'quill'
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -31,16 +31,6 @@ import {defaultModules} from './quill-defaults'
 
 import {getFormat} from './helpers'
 
-export interface CustomOption {
-  import: string
-  whitelist: any[]
-}
-
-export interface CustomModule {
-  path: string
-  implementation: any
-}
-
 export interface Range {
   index: number
   length: number
@@ -244,13 +234,15 @@ export class QuillEditorComponent implements AfterViewInit, ControlValueAccessor
       this.addClasses(this.classes)
     }
 
-    this.customOptions.forEach((customOption) => {
+    const customOptions = [...(this.config.customOptions || []), ...this.customOptions]
+    customOptions.forEach((customOption) => {
       const newCustomOption = QuillNamespace.import(customOption.import)
       newCustomOption.whitelist = customOption.whitelist
       QuillNamespace.register(newCustomOption, true)
     })
 
-    this.customModules.forEach(({implementation, path}) => {
+    const customModules = [...(this.config.customModules || []), ...this.customModules]
+    customModules.forEach(({implementation, path}) => {
       QuillNamespace.register(path, implementation)
     })
 

src/quill-editor.interfaces.ts

@@ -1,5 +1,15 @@
 import { InjectionToken } from '@angular/core'
 
+export interface CustomOption {
+  import: string
+  whitelist: any[]
+}
+
+export interface CustomModule {
+  implementation: any
+  path: string
+}
+
 export type QuillToolbarConfig = Array<Array< string | {
   indent?: string
   list?: string
@@ -41,6 +51,8 @@ export type QuillFormat = 'object' | 'json' | 'html' | 'text'
 
 export interface QuillConfig {
   bounds?: HTMLElement | string
+  customModules?: CustomModule[]
+  customOptions?: CustomOption[]
   debug?: 'error' | 'warn' | 'log' | false
   format?: QuillFormat
   formats?: string[]

src/quill-view.component.spec.ts

@@ -24,7 +24,16 @@ describe('Basic QuillViewComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
-        QuillModule.forRoot()
+        QuillModule.forRoot({
+          customModules: [{
+            path: 'modules/custom',
+            implementation: CustomModule
+          }],
+          customOptions: [{
+            import: 'attributors/style/size',
+            whitelist: ['14']
+          }],
+        })
       ],
       providers: QuillModule.forRoot().providers
     })

src/quill-view.component.ts

@@ -19,7 +19,7 @@ import {
 } from '@angular/core'
 
 import { defaultModules } from './quill-defaults'
-import { CustomOption, CustomModule } from './quill-editor.component'
+import { CustomOption, CustomModule } from './quill-editor.interfaces'
 import {getFormat} from './helpers'
 
 @Component({
@@ -88,13 +88,15 @@ export class QuillViewComponent implements AfterViewInit, OnChanges {
     const modules = Object.assign({}, this.modules || (this.config.modules || defaultModules))
     modules.toolbar = false
 
-    this.customOptions.forEach((customOption) => {
+    const customOptions = [...(this.config.customOptions || []), ...this.customOptions]
+    customOptions.forEach((customOption) => {
       const newCustomOption = QuillNamespace.import(customOption.import)
       newCustomOption.whitelist = customOption.whitelist
       QuillNamespace.register(newCustomOption, true)
     })
 
-    this.customModules.forEach(({implementation, path}) => {
+    const customModules = [...(this.config.customModules || []), ...this.customModules]
+    customModules.forEach(({implementation, path}) => {
       QuillNamespace.register(path, implementation)
     })
 

src/quill.module.ts

@@ -1,5 +1,7 @@
 import { CommonModule } from '@angular/common'
 import { ModuleWithProviders, NgModule } from '@angular/core'
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const Quill = require('quill')
 
 import { defaultModules } from './quill-defaults'
 import { QuillEditorComponent } from './quill-editor.component'
@@ -19,6 +21,17 @@ import { QuillViewComponent } from './quill-view.component'
 })
 export class QuillModule {
   static forRoot(config?: QuillConfig): ModuleWithProviders {
+    if (config) {
+      config.customOptions?.forEach((customOption) => {
+        const newCustomOption = Quill.import(customOption.import)
+        newCustomOption.whitelist = customOption.whitelist
+        Quill.register(newCustomOption, true)
+      })
+
+      config.customModules?.forEach(({implementation, path}) => {
+        Quill.register(path, implementation)
+      })
+    }
     return {
       ngModule: QuillModule,
       providers: [