feat: projection points - above and below toolbar

KillerCodeMonkey · Oct 13, 2023 · ba132cf · ba132cf
1 parent e458cf3
commit ba132cf
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 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
@@ -119,6 +119,12 @@ class TestComponent {
       </select>
     </span>
   </div>
+  <div above-quill-editor-toolbar="true">
+    <span>above</span>
+  </div>
+  <div below-quill-editor-toolbar="true">
+    <span>below</span>
+  </div>
 </quill-editor>
 `
 })
@@ -1222,8 +1228,10 @@ describe('Advanced QuillEditorComponent', () => {
     toolbarFixture.detectChanges()
     await toolbarFixture.whenStable()
 
-    expect(toolbarFixture.debugElement.children[0].nativeElement.children[1].attributes['quill-editor-element']).toBeDefined()
-    expect(toolbarFixture.debugElement.children[0].nativeElement.children[0].attributes['quill-editor-toolbar']).toBeDefined()
+    expect(toolbarFixture.debugElement.children[0].nativeElement.children[0].attributes['above-quill-editor-toolbar']).toBeDefined()
+    expect(toolbarFixture.debugElement.children[0].nativeElement.children[1].attributes['quill-editor-toolbar']).toBeDefined()
+    expect(toolbarFixture.debugElement.children[0].nativeElement.children[2].attributes['below-quill-editor-toolbar']).toBeDefined()
+    expect(toolbarFixture.debugElement.children[0].nativeElement.children[3].attributes['quill-editor-element']).toBeDefined()
 
     const editorComponent = toolbarFixture.debugElement.children[0].componentInstance
     expect(editorComponent.required).toBe(true)
@@ -1239,7 +1247,9 @@ describe('Advanced QuillEditorComponent', () => {
     await toolbarFixture.whenStable()
 
     expect(toolbarFixture.debugElement.children[0].nativeElement.children[0].attributes['quill-editor-element']).toBeDefined()
-    expect(toolbarFixture.debugElement.children[0].nativeElement.children[1].attributes['quill-editor-toolbar']).toBeDefined()
+    expect(toolbarFixture.debugElement.children[0].nativeElement.children[1].attributes['above-quill-editor-toolbar']).toBeDefined()
+    expect(toolbarFixture.debugElement.children[0].nativeElement.children[2].attributes['quill-editor-toolbar']).toBeDefined()
+    expect(toolbarFixture.debugElement.children[0].nativeElement.children[3].attributes['below-quill-editor-toolbar']).toBeDefined()
 
     const editorComponent = toolbarFixture.debugElement.children[0].componentInstance
     expect(editorComponent.customToolbarPosition).toEqual('bottom')

diff --git a/projects/ngx-quill/src/lib/quill-editor.component.ts b/projects/ngx-quill/src/lib/quill-editor.component.ts
@@ -760,10 +760,15 @@ export abstract class QuillEditorBase implements AfterViewInit, ControlValueAcce
     <ng-template [ngIf]="toolbarPosition !== 'top'">
       <pre quill-editor-element *ngIf="preserve; else noPreserveTpl"></pre>
     </ng-template>
+
+    <ng-content select="[above-quill-editor-toolbar]"></ng-content>
     <ng-content select="[quill-editor-toolbar]"></ng-content>
+    <ng-content select="[below-quill-editor-toolbar]"></ng-content>
+
     <ng-template [ngIf]="toolbarPosition === 'top'">
-      <pre quill-editor-element *ngIf="preserve; else noPreserveTpl"></pre>
+      <pre quill-editor-element *ngIf="preserve; else noPreserveTpl"></pre>  
     </ng-template>
+
     <ng-template #noPreserveTpl>
       <div quill-editor-element></div>
     </ng-template>