avoid inserting custom html with plain js

KillerCodeMonkey · May 9, 2022 · 999cc38 · 999cc38
1 parent f7bffa3
commit 999cc38
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 13 deletions.
diff --git a/projects/ngx-quill/src/lib/quill-editor.component.ts b/projects/ngx-quill/src/lib/quill-editor.component.ts
@@ -19,6 +19,7 @@ import {
   NgZone,
   OnChanges,
   OnDestroy,
+  OnInit,
   Output,
   PLATFORM_ID,
   Renderer2,
@@ -72,7 +73,7 @@ export type EditorChangeSelection = SelectionChange & { event: 'selection-change
 
 @Directive()
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
-export abstract class QuillEditorBase implements AfterViewInit, ControlValueAccessor, OnChanges, OnDestroy, Validator {
+export abstract class QuillEditorBase implements AfterViewInit, ControlValueAccessor, OnChanges, OnInit, OnDestroy, Validator {
   @Input() format?: 'object' | 'html' | 'text' | 'json'
   @Input() theme?: string
   @Input() modules?: QuillModules
@@ -125,6 +126,8 @@ export abstract class QuillEditorBase implements AfterViewInit, ControlValueAcce
   editorElem!: HTMLElement
   content: any
   disabled = false // used to store initial value before ViewInit
+  preserve = false
+  toolbarPosition = 'top'
 
   onModelChange: (modelValue?: any) => void
   onModelTouched: () => void
@@ -203,6 +206,11 @@ export abstract class QuillEditorBase implements AfterViewInit, ControlValueAcce
     return value
   }
 
+  ngOnInit() {
+    this.preserve = this.preserveWhitespace
+    this.toolbarPosition = this.customToolbarPosition
+  }
+
   ngAfterViewInit() {
     if (isPlatformServer(this.platformId)) {
       return
@@ -213,11 +221,6 @@ export abstract class QuillEditorBase implements AfterViewInit, ControlValueAcce
 
     // eslint-disable-next-line @typescript-eslint/naming-convention
     this.quillSubscription = this.service.getQuill().subscribe(Quill => {
-      this.elementRef.nativeElement.insertAdjacentHTML(
-        this.customToolbarPosition === 'top' ? 'beforeend' : 'afterbegin',
-        this.preserveWhitespace ? '<pre quill-editor-element></pre>' : '<div quill-editor-element></div>'
-      )
-
       this.editorElem = this.elementRef.nativeElement.querySelector(
         '[quill-editor-element]'
       )
@@ -733,7 +736,15 @@ export abstract class QuillEditorBase implements AfterViewInit, ControlValueAcce
   ],
   selector: 'quill-editor',
   template: `
+  <ng-container *ngIf="toolbarPosition !== 'top'">
+    <div quill-editor-element *ngIf="!preserve"></div>
+    <pre quill-editor-element *ngIf="preserve"></pre>
+  </ng-container>
   <ng-content select="[quill-editor-toolbar]"></ng-content>
+  <ng-container *ngIf="toolbarPosition === 'top'">
+    <div quill-editor-element *ngIf="!preserve"></div>
+    <pre quill-editor-element *ngIf="preserve"></pre>
+  </ng-container>
 `,
   styles: [
     `

diff --git a/projects/ngx-quill/src/lib/quill-view.component.ts b/projects/ngx-quill/src/lib/quill-view.component.ts
@@ -17,7 +17,8 @@ import {
   ViewEncapsulation,
   NgZone,
   SecurityContext,
-  OnDestroy
+  OnDestroy,
+  OnInit
 } from '@angular/core'
 import { Subscription } from 'rxjs'
 
@@ -35,9 +36,11 @@ import { DomSanitizer } from '@angular/platform-browser'
 }
 `],
   template: `
+<div quill-view-element *ngIf="!preserve"></div>
+<pre quill-view-element *ngIf="preserve"></pre>
 `
 })
-export class QuillViewComponent implements AfterViewInit, OnChanges, OnDestroy {
+export class QuillViewComponent implements AfterViewInit, OnChanges, OnDestroy, OnInit {
   @Input() format?: 'object' | 'html' | 'text' | 'json'
   @Input() theme?: string
   @Input() modules?: QuillModules
@@ -54,6 +57,7 @@ export class QuillViewComponent implements AfterViewInit, OnChanges, OnDestroy {
 
   quillEditor!: QuillType
   editorElem!: HTMLElement
+  public preserve = false
 
   private quillSubscription: Subscription | null = null
 
@@ -89,6 +93,10 @@ export class QuillViewComponent implements AfterViewInit, OnChanges, OnDestroy {
     }
   }
 
+  ngOnInit() {
+    this.preserve = this.preserveWhitespace
+  }
+
   ngOnChanges(changes: SimpleChanges) {
     if (!this.quillEditor) {
       return
@@ -130,11 +138,6 @@ export class QuillViewComponent implements AfterViewInit, OnChanges, OnDestroy {
       }
       const theme = this.theme || (this.service.config.theme ? this.service.config.theme : 'snow')
 
-      this.elementRef.nativeElement.insertAdjacentHTML(
-        'afterbegin',
-        this.preserveWhitespace ? '<pre quill-view-element></pre>' : '<div quill-view-element></div>'
-      )
-
       this.editorElem = this.elementRef.nativeElement.querySelector(
         '[quill-view-element]'
       ) as HTMLElement