refactor: use effect, computed instead of toObservable

Author: KillerCodeMonkey

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

@@ -10,6 +10,7 @@ import {
   Component,
   DestroyRef,
   Directive,
+  effect,
   ElementRef,
   EventEmitter,
   forwardRef,
@@ -22,7 +23,7 @@ import {
   signal,
   ViewEncapsulation
 } from '@angular/core'
-import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
 import { debounceTime, fromEvent, Subscription } from 'rxjs'
 import { mergeMap } from 'rxjs/operators'
 
@@ -299,12 +300,15 @@ export abstract class QuillEditorBase implements ControlValueAccessor, Validator
       })
     })
 
-    toObservable(this.customToolbarPosition).pipe(takeUntilDestroyed()).subscribe((customToolbarPosition) => {
+    effect(() => {
+      const customToolbarPosition = this.customToolbarPosition()
       if (this.init && this.toolbarPosition() !== customToolbarPosition) {
         this.toolbarPosition.set(customToolbarPosition)
       }
     })
-    toObservable(this.readOnly).pipe(takeUntilDestroyed()).subscribe((readOnly) => {
+
+    effect(() => {
+      const readOnly = this.readOnly()
       if (this.init) {
         if (readOnly) {
           this.quillEditor?.disable()
@@ -313,8 +317,16 @@ export abstract class QuillEditorBase implements ControlValueAccessor, Validator
         }
       }
     })
-    toObservable(this.placeholder).pipe(takeUntilDestroyed()).subscribe((placeholder) => { if (this.init && this.quillEditor) this.quillEditor.root.dataset.placeholder = placeholder })
-    toObservable(this.styles).pipe(takeUntilDestroyed()).subscribe((styles) => {
+
+    effect(() => {
+      const placeholder = this.placeholder()
+      if (this.init && this.quillEditor) {
+         this.quillEditor.root.dataset.placeholder = placeholder
+      }
+    })
+
+    effect(() => {
+      const styles = this.styles()
       if (!this.init || !this.editorElem) {
         return
       }
@@ -332,8 +344,10 @@ export abstract class QuillEditorBase implements ControlValueAccessor, Validator
         })
       }
     })
-    toObservable(this.classes).pipe(takeUntilDestroyed()).subscribe((classes) => {
-      if (!this.init || !this.editorElem) {
+
+    effect(() => {
+      const classes = this.classes()
+      if (!this.init || !this.quillEditor) {
         return
       }
       const currentClasses = classes
@@ -347,7 +361,9 @@ export abstract class QuillEditorBase implements ControlValueAccessor, Validator
         this.addClasses(currentClasses)
       }
     })
-    toObservable(this.debounceTime).pipe(takeUntilDestroyed()).subscribe((debounceTime) => {
+
+    effect(() => {
+      const debounceTime = this.debounceTime()
       if (!this.init || !this.quillEditor) {
         return
       }

projects/ngx-quill/src/lib/quill-view-html.component.spec.ts

@@ -16,7 +16,7 @@ describe('Basic QuillViewHTMLComponent', () => {
     const element = fixture.nativeElement
 
     expect(element.querySelectorAll('.ql-editor').length).toBe(1)
-    expect(fixture.componentInstance.themeClass()).toBe('ql-snow')
+    expect(fixture.componentInstance.themeClass()).toBe('ql-snow ngx-quill-view-html')
     const viewElement = element.querySelector('.ql-container.ql-snow.ngx-quill-view-html > .ql-editor')
     expect(viewElement).toBeDefined()
   })

projects/ngx-quill/src/lib/quill-view-html.component.ts

@@ -1,15 +1,13 @@
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
+import { DomSanitizer } from '@angular/platform-browser'
 import { QuillService } from './quill.service'
 
 import {
   Component,
   ViewEncapsulation,
+  computed,
   inject,
-  input,
-  signal
+  input
 } from '@angular/core'
-import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'
-import { combineLatest } from 'rxjs'
 
 @Component({
   encapsulation: ViewEncapsulation.None,
@@ -31,27 +29,16 @@ export class QuillViewHTMLComponent {
   readonly theme = input<string | undefined>(undefined)
   readonly sanitize = input<boolean | undefined>(undefined)
 
-  readonly innerHTML = signal<SafeHtml>('')
-  readonly themeClass = signal('ql-snow')
+  readonly innerHTML = computed(() => {
+    const sanitize = this.sanitize()
+    const content = this.content()
+    return ([true, false].includes(sanitize) ? sanitize : (this.service.config.sanitize || false)) ? content : this.sanitizer.bypassSecurityTrustHtml(content)
+  })
+  readonly themeClass = computed(() => {
+    const base = this.service.config.theme ? this.service.config.theme : 'snow'
+    return `ql-${this.theme() || base} ngx-quill-view-html`
+  })
 
   private sanitizer = inject(DomSanitizer)
   private service = inject(QuillService)
-
-  constructor() {
-    toObservable(this.theme).pipe(takeUntilDestroyed()).subscribe((newTheme) => {
-      if (newTheme) {
-        const theme = newTheme || (this.service.config.theme ? this.service.config.theme : 'snow')
-        this.themeClass.set(`ql-${theme} ngx-quill-view-html`)
-      } else {
-        const theme = this.service.config.theme ? this.service.config.theme : 'snow'
-        this.themeClass.set(`ql-${theme} ngx-quill-view-html`)
-      }
-    })
-
-    combineLatest([toObservable(this.content), toObservable(this.sanitize)]).pipe(takeUntilDestroyed()).subscribe(([content, shouldSanitize]) => {
-      const sanitize = [true, false].includes(shouldSanitize) ? shouldSanitize : (this.service.config.sanitize || false)
-      const innerHTML = sanitize ? content : this.sanitizer.bypassSecurityTrustHtml(content)
-      this.innerHTML.set(innerHTML)
-    })
-  }
 }

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

@@ -12,10 +12,10 @@ import {
   SecurityContext,
   ViewEncapsulation,
   afterNextRender,
+  effect,
   inject,
   input
 } from '@angular/core'
-import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'
 import { DomSanitizer } from '@angular/platform-browser'
 import { mergeMap } from 'rxjs/operators'
 
@@ -125,7 +125,8 @@ export class QuillViewComponent {
       this.destroyRef.onDestroy(() => quillSubscription.unsubscribe())
     })
 
-    toObservable(this.content).pipe(takeUntilDestroyed()).subscribe((content) => {
+    effect(() => {
+      const content = this.content()
       if (!this.quillEditor || !this.init) {
         return
       }