chore: native focus/blur usage

package.json

@@ -22,7 +22,7 @@
     "@angular/platform-browser-dynamic": "^16.0.0",
     "@angular/router": "^16.0.0",
     "katex": "^0.16.7",
-    "ngx-quill": "^22.0.0",
+    "ngx-quill": "^22.1.0-beta.2",
     "quill": "^1.3.7",
     "quill-emoji": "^0.2.0",
     "quill-image-resize-module": "^3.0.0",

src/app/default/default.component.html

@@ -1,9 +1,9 @@
 <h3 id="focusBlur">Default editor with height of 200px</h3>
 <p>focused: {{ focused }}, blurred: {{ blurred }}</p>
-<quill-editor [styles]="{height: '200px'}" (onFocus)="focus($event)" (onEditorChanged)="changedEditor($event)" (onBlur)="blur($event)" (onEditorCreated)="created($event)"></quill-editor>
+<quill-editor [styles]="{height: '200px'}" (onFocus)="focus($event)" (onNativeFocus)="nativeFocus($event)" (onEditorChanged)="changedEditor($event)" (onBlur)="blur($event)" (onNativeBlur)="nativeBlur($event)" (onEditorCreated)="created($event)"></quill-editor>
 
 <h4>Material Quill</h4>
 
 <mat-form-field appearance="fill">
-  <mat-quill [styles]="{height: '200px'}" (onFocus)="focus($event)" (onEditorChanged)="changedEditor($event)" (onBlur)="blur($event)" (onEditorCreated)="created($event)"></mat-quill>
+  <mat-quill [styles]="{height: '200px'}" (onFocus)="focus($event)" (onNativeFocus)="nativeFocus($event)" (onEditorChanged)="changedEditor($event)" (onBlur)="blur($event)" (onNativeBlur)="nativeBlur($event)" (onEditorCreated)="created($event)"></mat-quill>
 </mat-form-field>

src/app/default/default.component.ts

@@ -26,11 +26,19 @@ export class DefaultComponent {
     this.focused = true
     this.blurred = false
   }
+  nativeFocus($event) {
+    // tslint:disable-next-line:no-console
+    console.log('native-focus', $event)
+  }
 
   blur($event) {
     // tslint:disable-next-line:no-console
     console.log('blur', $event)
     this.focused = false
     this.blurred = true
   }
+  nativeBlur($event) {
+    // tslint:disable-next-line:no-console
+    console.log('native-blur', $event)
+  }
 }