fix: use getSemanticHTML instead of innerHTML

KillerCodeMonkey · Mar 10, 2024 · 845cba7 · 845cba7
1 parent 33dcc50
commit 845cba7
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/projects/ngx-quill/src/lib/quill-editor.component.spec.ts b/projects/ngx-quill/src/lib/quill-editor.component.spec.ts
@@ -311,7 +311,7 @@ describe('Formats', () => {
     `
     })
     class HTMLComponent {
-      title = '<p>Hallo</p>'
+      title = '<p>Hallo<ol><li>ordered</li></ol><ul><li>unordered</li></ul></p>'
       editor: any
 
       handleEditorCreated(event: any) {
@@ -348,7 +348,9 @@ describe('Formats', () => {
       await fixture.whenStable()
     })
     it('should be set html', async () => {
-      expect(component.editor.getText().trim()).toEqual('Hallo')
+      expect(component.editor.getText().trim()).toEqual(`Hallo
+ordered
+unordered`)
     })
 
     it('should update html', async () => {
@@ -359,7 +361,7 @@ describe('Formats', () => {
     })
 
     it('should update model if editor html changes', async () => {
-      expect(component.title.trim()).toEqual('<p>Hallo</p>')
+      expect(component.title.trim()).toEqual('<p>Hallo<ol><li>ordered</li></ol><ul><li>unordered</li></ul></p>')
       component.editor.setText('1234', 'user')
       fixture.detectChanges()
       await fixture.whenStable()

diff --git a/projects/ngx-quill/src/lib/quill-editor.component.ts b/projects/ngx-quill/src/lib/quill-editor.component.ts
@@ -161,8 +161,8 @@ export abstract class QuillEditorBase implements AfterViewInit, ControlValueAcce
   }
 
   @Input()
-  valueGetter = (quillEditor: QuillType, editorElement: HTMLElement): string | any => {
-    let html: string | null = editorElement.querySelector('.ql-editor')!.innerHTML
+  valueGetter = (quillEditor: QuillType): string | any => {
+    let html: string | null = quillEditor.getSemanticHTML()
     if (html === '<p><br></p>' || html === '<div><br></div>') {
       html = this.defaultEmptyValue
     }
@@ -412,7 +412,7 @@ export abstract class QuillEditorBase implements AfterViewInit, ControlValueAcce
     const text = this.quillEditor.getText()
     const content = this.quillEditor.getContents()
 
-    let html: string | null = this.editorElem!.querySelector('.ql-editor')!.innerHTML
+    let html: string | null = this.quillEditor.getSemanticHTML()
     if (html === '<p><br></p>' || html === '<div><br></div>') {
       html = this.defaultEmptyValue
     }
@@ -428,7 +428,7 @@ export abstract class QuillEditorBase implements AfterViewInit, ControlValueAcce
     this.zone.run(() => {
       if (shouldTriggerOnModelChange) {
         this.onModelChange(
-          this.valueGetter(this.quillEditor, this.editorElem!)
+          this.valueGetter(this.quillEditor)
         )
       }
 
@@ -461,7 +461,7 @@ export abstract class QuillEditorBase implements AfterViewInit, ControlValueAcce
       const text = this.quillEditor.getText()
       const content = this.quillEditor.getContents()
 
-      let html: string | null = this.editorElem!.querySelector('.ql-editor')!.innerHTML
+      let html: string | null = this.quillEditor.getSemanticHTML()
       if (html === '<p><br></p>' || html === '<div><br></div>') {
         html = this.defaultEmptyValue
       }