feat: native blur and focus listeners

README.md

@@ -388,6 +388,21 @@ or
 }
 ```
 
+- onNativeFocus - editor is focused, based on native focus event
+```TS
+{
+  editor: editorInstance, // Quill
+  source: source // ('dom')
+}
+```
+- onNativeBlur - editor is blured, based on native blur event
+```TS
+{
+  editor: editorInstance, // Quill
+  source: source // ('dom')
+}
+```
+
 ## QuillViewComponent, QuillViewHTMLComponent & How to present the editor content
 
 In most cases a wysiwyg editor is used in backoffice to store the content to the database. On the other side this value should be used, to show the content to the enduser.

projects/ngx-quill/src/lib/quill-editor.component.spec.ts

@@ -32,6 +32,8 @@ class CustomModule {
 <quill-editor
   (onBlur)="blured = true"
   (onFocus)="focused = true"
+  (onNativeBlur)="bluredNative = true"
+  (onNativeFocus)="focusedNative = true"
   [(ngModel)]="title"
   [customOptions]="[{import: 'attributors/style/size', whitelist: ['14']}]"
   [styles]="style"
@@ -55,6 +57,8 @@ class TestComponent {
   minLength = 0
   focused = false
   blured = false
+  focusedNative = false
+  bluredNative = false
   maxLength = 0
   style: {
     backgroundColor?: string
@@ -1005,6 +1009,18 @@ describe('Advanced QuillEditorComponent', () => {
     expect(fixture.componentInstance.focused).toBe(true)
   })
 
+  it('should emit onNativeFocus when scroll container receives focus', async () => {
+    fixture.detectChanges()
+    await fixture.whenStable()
+
+    const editorFixture = fixture.debugElement.children[0]
+
+    editorFixture.componentInstance.quillEditor.scroll.domNode.focus()
+    fixture.detectChanges()
+
+    expect(fixture.componentInstance.focusedNative).toBe(true)
+  })
+
   it('should emit onBlur when blured', async () => {
     fixture.detectChanges()
     await fixture.whenStable()
@@ -1018,6 +1034,19 @@ describe('Advanced QuillEditorComponent', () => {
     expect(fixture.componentInstance.blured).toBe(true)
   })
 
+  it('should emit onNativeBlur when scroll container receives blur', async () => {
+    fixture.detectChanges()
+    await fixture.whenStable()
+
+    const editorFixture = fixture.debugElement.children[0]
+
+    editorFixture.componentInstance.quillEditor.scroll.domNode.focus()
+    editorFixture.componentInstance.quillEditor.scroll.domNode.blur()
+    fixture.detectChanges()
+
+    expect(fixture.componentInstance.bluredNative).toBe(true)
+  })
+
   it('should validate minlength', async () => {
     fixture.detectChanges()
     await fixture.whenStable()

projects/ngx-quill/src/lib/quill-editor.component.ts

@@ -120,6 +120,8 @@ export abstract class QuillEditorBase implements AfterViewInit, ControlValueAcce
   @Output() onSelectionChanged: EventEmitter<SelectionChange> = new EventEmitter()
   @Output() onFocus: EventEmitter<Focus> = new EventEmitter()
   @Output() onBlur: EventEmitter<Blur> = new EventEmitter()
+  @Output() onNativeFocus: EventEmitter<Focus> = new EventEmitter()
+  @Output() onNativeBlur: EventEmitter<Blur> = new EventEmitter()
 
   quillEditor!: QuillType
   editorElem!: HTMLElement
@@ -307,6 +309,23 @@ export abstract class QuillEditorBase implements AfterViewInit, ControlValueAcce
           theme: this.theme || (this.service.config.theme ? this.service.config.theme : 'snow')
         })
 
+        if (this.onNativeBlur.observed) {
+          // https://github.com/quilljs/quill/issues/2186#issuecomment-533401328
+          this.quillEditor.scroll.domNode.addEventListener('blur', () => this.onNativeBlur.next({
+            editor: this.quillEditor,
+            source: 'dom'
+          }))
+          // https://github.com/quilljs/quill/issues/2186#issuecomment-803257538
+          this.quillEditor.getModule('toolbar').container.addEventListener('mousedown', (e) =>  e.preventDefault())
+        }
+
+        if (this.onNativeFocus.observed) {
+          this.quillEditor.scroll.domNode.addEventListener('focus', () => this.onNativeFocus.next({
+            editor: this.quillEditor,
+            source: 'dom'
+          }))
+        }
+
         // Set optional link placeholder, Quill has no native API for it so using workaround
         if (this.linkPlaceholder) {
           const tooltip = (this.quillEditor as any)?.theme?.tooltip