ngx-quill - npm Package Compare versions

Comparing version 0.3.4 to 0.4.0

bundles/index.js

@@ -151,5 +151,11 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	        var _this = this;
-	        this.editorElem = this.elementRef.nativeElement.children[0];
+	        var toolbarElem = this.elementRef.nativeElement.querySelector('[quill-editor-toolbar]');
+	        var modules = this.modules || this.defaultModules;
+	        if (toolbarElem) {
+	            modules['toolbar'] = toolbarElem;
+	        }
+	        this.elementRef.nativeElement.insertAdjacentHTML('beforeend', '<div quill-editor-element></div>');
+	        this.editorElem = this.elementRef.nativeElement.querySelector('[quill-editor-element]');
 	        this.quillEditor = new Quill(this.editorElem, {
-	            modules: this.modules || this.defaultModules,
+	            modules: modules,
 	            placeholder: this.placeholder || 'Insert text here ...',
@@ -264,3 +270,3 @@ readOnly: this.readOnly || false,
 	            selector: 'quill-editor',
-	            template: "\n<div></div>\n",
+	            template: "\n  <ng-content select=\"[quill-editor-toolbar]\"></ng-content>\n",
 	            providers: [{
@@ -267,0 +273,0 @@ provide: forms_1.NG_VALUE_ACCESSOR,

bundles/ngx-quill.umd.js

@@ -151,5 +151,11 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	        var _this = this;
-	        this.editorElem = this.elementRef.nativeElement.children[0];
+	        var toolbarElem = this.elementRef.nativeElement.querySelector('[quill-editor-toolbar]');
+	        var modules = this.modules || this.defaultModules;
+	        if (toolbarElem) {
+	            modules['toolbar'] = toolbarElem;
+	        }
+	        this.elementRef.nativeElement.insertAdjacentHTML('beforeend', '<div quill-editor-element></div>');
+	        this.editorElem = this.elementRef.nativeElement.querySelector('[quill-editor-element]');
 	        this.quillEditor = new Quill(this.editorElem, {
-	            modules: this.modules || this.defaultModules,
+	            modules: modules,
 	            placeholder: this.placeholder || 'Insert text here ...',
@@ -264,3 +270,3 @@ readOnly: this.readOnly || false,
 	            selector: 'quill-editor',
-	            template: "\n<div></div>\n",
+	            template: "\n  <ng-content select=\"[quill-editor-toolbar]\"></ng-content>\n",
 	            providers: [{
@@ -267,0 +273,0 @@ provide: forms_1.NG_VALUE_ACCESSOR,

package.json

 {
   "name": "ngx-quill",
   "license": "MIT",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "author": {
@@ -6,0 +6,0 @@ "name": "Bengt Weiße"

README.md

@@ -95,2 +95,26 @@ # ngx-quill [![Build Status](https://travis-ci.org/KillerCodeMonkey/ngx-quill.svg?branch=develop)](https://travis-ci.org/KillerCodeMonkey/ngx-quill)
 - minLength - add valdiation for minlength - set model state to `invalid` and add `ng-invalid` class, only set invalid if editor text not empty --> if you want to check if text is required --> use the required attribute
+- possbility to create a custom toolbar via projection slot `[quill-editor-toolbar]`:
+```
+<quill-editor>
+  <div quill-editor-toolbar>
+    <span class="ql-formats">
+      <button class="ql-bold" [title]="'Bold'"></button>
+    </span>
+    <span class="ql-formats">
+      <select class="ql-align" [title]="'Aligment'">
+        <option selected></option>
+        <option value="center"></option>
+        <option value="right"></option>
+        <option value="justify"></option>
+      </select>
+      <select class="ql-align" [title]="'Aligment2'">
+        <option selected></option>
+        <option value="center"></option>
+        <option value="right"></option>
+        <option value="justify"></option>
+      </select>
+    </span>
+  </div>
+</quill-editor>
+```
 
@@ -97,0 +121,0 @@ ## Outputs

src/quill-editor.component.spec.ts

@@ -24,3 +24,40 @@ import { TestBed, async, fakeAsync, tick, ComponentFixture } from '@angular/core/testing';
 
+@Component({
+    template: `
+<quill-editor [(ngModel)]="title" ng-required="required" [minLength]="minLength" [maxLength]="maxLength" [readOnly]="isReadOnly" (onEditorCreated)="handleEditorCreated($event)" (onContentChanged)="handleChange($event);">
+    <div quill-editor-toolbar="true">
+        <span class="ql-formats">
+            <button class="ql-bold" [title]="'Bold'"></button>
+        </span>
+        <span class="ql-formats">
+            <select class="ql-align" [title]="'Aligment'">
+                <option selected></option>
+                <option value="center"></option>
+                <option value="right"></option>
+                <option value="justify"></option>
+            </select>
+            <select class="ql-align">
+                <option selected></option>
+                <option value="center"></option>
+                <option value="right"></option>
+                <option value="justify"></option>
+            </select>
+        </span>
+    </div>
+</quill-editor>
+`
+})
+class TestToolbarComponent {
+    title = 'Hallo';
+    isReadOnly = false;
+    required = true;
+    minLength = 0;
+    maxLength = 0;
 
+    handleEditorCreated(event: any) {}
+
+    handleChange(event: any) {}
+}
+
+
 describe('Basic QuillEditorComponent', () => {
@@ -55,7 +92,7 @@
         TestBed.configureTestingModule({
-            declarations: [QuillEditorComponent, TestComponent],
+            declarations: [QuillEditorComponent, TestComponent, TestToolbarComponent],
             imports: [FormsModule]
         }).compileComponents();
 
-        this.fixture = TestBed.createComponent(TestComponent)  as ComponentFixture<TestComponent>;
+        this.fixture = TestBed.createComponent(TestComponent) as ComponentFixture<TestComponent>;
     });
@@ -224,2 +261,10 @@
     }));
+
+    it('should add custom toolbar', async(() => {
+        // get editor component
+        this.fixture = TestBed.createComponent(TestToolbarComponent) as ComponentFixture<TestToolbarComponent>;
+
+        this.fixture.detectChanges();
+        expect(this.fixture.nativeElement.querySelector('[quill-editor-toolbar]').querySelector('span[title=Alignment]')).toBeDefined();
+    }));
 });

src/quill-editor.component.ts

@@ -27,3 +27,3 @@ import {
   template: `
-<div></div>
+  <ng-content select="[quill-editor-toolbar]"></ng-content>
 `,
@@ -94,6 +94,13 @@ providers: [{
   ngAfterViewInit() {
-    this.editorElem = this.elementRef.nativeElement.children[0];
+    const toolbarElem = this.elementRef.nativeElement.querySelector('[quill-editor-toolbar]');
+    let modules = this.modules || this.defaultModules;
 
+    if (toolbarElem) {
+      modules['toolbar'] = toolbarElem;
+    }
+    this.elementRef.nativeElement.insertAdjacentHTML('beforeend', '<div quill-editor-element></div>');
+    this.editorElem = this.elementRef.nativeElement.querySelector('[quill-editor-element]');
+
     this.quillEditor = new Quill(this.editorElem, {
-      modules: this.modules || this.defaultModules,
+      modules: modules,
       placeholder: this.placeholder || 'Insert text here ...',
@@ -100,0 +107,0 @@ readOnly: this.readOnly || false,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

53683

increased by7.08%

Lines of code

1185

increased by5.15%

Number of lines in readme file

131

increased by22.43%

No dependency changes