ngx-quill - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

bundles/index.js

@@ -165,2 +165,5 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	        });
+	        if (this.content) {
+	            this.quillEditor.pasteHTML(this.content);
+	        }
 	        this.onEditorCreated.emit(this.quillEditor);
@@ -173,3 +176,4 @@ // mark model as touched if editor lost focus
 	                oldRange: oldRange,
-	                source: source
+	                source: source,
+	                bounds: _this.bounds || document.body
 	            });
@@ -225,3 +229,3 @@ if (!range) {
 	        var textLength = this.quillEditor.getText().trim().length;
-	        if (this.minLength) {
+	        if (this.minLength && textLength && textLength < this.minLength) {
 	            err.minLengthError = {
@@ -231,5 +235,5 @@ given: textLength,
 	            };
-	            valid = textLength >= this.minLength || !textLength;
+	            valid = false;
 	        }
-	        if (this.maxLength) {
+	        if (this.maxLength && textLength > this.maxLength) {
 	            err.maxLengthError = {
@@ -239,4 +243,10 @@ given: textLength,
 	            };
-	            valid = textLength <= this.maxLength && valid;
+	            valid = false;
 	        }
+	        if (this.required && !textLength) {
+	            err.requiredError = {
+	                empty: true
+	            };
+	            valid = false;
+	        }
 	        return valid ? null : err;
@@ -272,5 +282,13 @@ };
 	    core_1.Input(),
+	    __metadata("design:type", Boolean)
+	], QuillEditorComponent.prototype, "required", void 0);
+	__decorate([
+	    core_1.Input(),
 	    __metadata("design:type", Array)
 	], QuillEditorComponent.prototype, "formats", void 0);
 	__decorate([
+	    core_1.Input(),
+	    __metadata("design:type", Object)
+	], QuillEditorComponent.prototype, "bounds", void 0);
+	__decorate([
 	    core_1.Output(),
@@ -277,0 +295,0 @@ __metadata("design:type", core_1.EventEmitter)

bundles/ngx-quill.umd.js

@@ -165,2 +165,5 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	        });
+	        if (this.content) {
+	            this.quillEditor.pasteHTML(this.content);
+	        }
 	        this.onEditorCreated.emit(this.quillEditor);
@@ -173,3 +176,4 @@ // mark model as touched if editor lost focus
 	                oldRange: oldRange,
-	                source: source
+	                source: source,
+	                bounds: _this.bounds || document.body
 	            });
@@ -225,3 +229,3 @@ if (!range) {
 	        var textLength = this.quillEditor.getText().trim().length;
-	        if (this.minLength) {
+	        if (this.minLength && textLength && textLength < this.minLength) {
 	            err.minLengthError = {
@@ -231,5 +235,5 @@ given: textLength,
 	            };
-	            valid = textLength >= this.minLength || !textLength;
+	            valid = false;
 	        }
-	        if (this.maxLength) {
+	        if (this.maxLength && textLength > this.maxLength) {
 	            err.maxLengthError = {
@@ -239,4 +243,10 @@ given: textLength,
 	            };
-	            valid = textLength <= this.maxLength && valid;
+	            valid = false;
 	        }
+	        if (this.required && !textLength) {
+	            err.requiredError = {
+	                empty: true
+	            };
+	            valid = false;
+	        }
 	        return valid ? null : err;
@@ -272,5 +282,13 @@ };
 	    core_1.Input(),
+	    __metadata("design:type", Boolean)
+	], QuillEditorComponent.prototype, "required", void 0);
+	__decorate([
+	    core_1.Input(),
 	    __metadata("design:type", Array)
 	], QuillEditorComponent.prototype, "formats", void 0);
 	__decorate([
+	    core_1.Input(),
+	    __metadata("design:type", Object)
+	], QuillEditorComponent.prototype, "bounds", void 0);
+	__decorate([
 	    core_1.Output(),
@@ -277,0 +295,0 @@ __metadata("design:type", core_1.EventEmitter)

package.json

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

README.md

@@ -93,4 +93,6 @@ # ngx-quill [![Build Status](https://travis-ci.org/KillerCodeMonkey/ngx-quill.svg?branch=develop)](https://travis-ci.org/KillerCodeMonkey/ngx-quill)
 - placeholder - placeholder text, default is `Insert text here ...`
+- bounds - boundary of the editor, default `document.body`
 - maxLength - add valdiation for maxlength - set model state to `invalid` and add `ng-invalid` class
 - 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
+- required - add validation for required field - `[required]=true` - default: false, boolean expected (no strings!)
 - possbility to create a custom toolbar via projection slot `[quill-editor-toolbar]`:
@@ -97,0 +99,0 @@ ```

src/quill-editor.component.d.ts

@@ -40,3 +40,5 @@ import { AfterViewInit, ElementRef, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
     minLength: number;
+    required: boolean;
     formats: string[];
+    bounds: HTMLElement | string;
     onEditorCreated: EventEmitter<any>;
@@ -62,3 +64,6 @@ onContentChanged: EventEmitter<any>;
         };
+        requiredError?: {
+            empty: boolean;
+        };
     };
 }

src/quill-editor.component.spec.ts

@@ -1,2 +0,2 @@
-import { TestBed, async, fakeAsync, tick, ComponentFixture } from '@angular/core/testing';
+import { TestBed, async, ComponentFixture } from '@angular/core/testing';
 import { Component } from '@angular/core';
@@ -9,3 +9,3 @@ import { FormsModule } from '@angular/forms';
     template: `
-<quill-editor [(ngModel)]="title" ng-required="required" [minLength]="minLength" [maxLength]="maxLength" [readOnly]="isReadOnly" (onEditorCreated)="handleEditorCreated($event)" (onContentChanged)="handleChange($event);" (onSelectionChanged)="handleSelection($event);"></quill-editor>
+<quill-editor [(ngModel)]="title" [required]="required" [minLength]="minLength" [maxLength]="maxLength" [readOnly]="isReadOnly" (onEditorCreated)="handleEditorCreated($event)" (onContentChanged)="handleChange($event);" (onSelectionChanged)="handleSelection($event);"></quill-editor>
 `
@@ -16,3 +16,3 @@ })
     isReadOnly = false;
-    required = true;
+    required = false;
     minLength = 0;
@@ -37,3 +37,3 @@ maxLength = 0;
     template: `
-<quill-editor [(ngModel)]="title" ng-required="required" [minLength]="minLength" [maxLength]="maxLength" [readOnly]="isReadOnly" (onEditorCreated)="handleEditorCreated($event)" (onContentChanged)="handleChange($event);">
+<quill-editor [(ngModel)]="title" [required]="true" [minLength]="minLength" [maxLength]="maxLength" [readOnly]="isReadOnly" (onEditorCreated)="handleEditorCreated($event)" (onContentChanged)="handleChange($event);">
     <div quill-editor-toolbar="true">
@@ -64,3 +64,2 @@ <span class="ql-formats">
     isReadOnly = false;
-    required = true;
     minLength = 0;
@@ -111,3 +110,3 @@ maxLength = 0;
 
-    it('should set editor settings', fakeAsync(() => {
+    it('should set editor settings', async(() => {
         this.fixture.detectChanges();
@@ -121,6 +120,7 @@ const editorElem = this.fixture.debugElement.children[0];
         this.fixture.detectChanges();
-        tick();
 
-        expect(editorCmp.readOnly).toBe(true);
-        expect(editorElem.nativeElement.querySelectorAll('div.ql-container.ql-disabled').length).toBe(1);
+        this.fixture.whenStable().then(() => {
+            expect(editorCmp.readOnly).toBe(true);
+            expect(editorElem.nativeElement.querySelectorAll('div.ql-container.ql-disabled').length).toBe(1);
+        });
     }));
@@ -140,3 +140,3 @@
 
-    it('should set required state correctly', fakeAsync(() => {
+    it('should set required state correctly', async(() => {
         // get editor component
@@ -147,5 +147,5 @@ const editorElement = this.fixture.debugElement.children[0].nativeElement;
         this.fixture.detectChanges();
-        tick();
-
-        expect(editorElement.className).toMatch('ng-valid');
+        this.fixture.whenStable().then(() => {
+            expect(editorElement.className).toMatch('ng-valid');
+        });
     }));
@@ -160,13 +160,11 @@
 
-    it('should emit onContentChanged when content of editor changed', fakeAsync(() => {
+    it('should emit onContentChanged when content of editor changed', async(() => {
         spyOn(this.fixture.componentInstance, 'handleChange').and.callThrough();
         this.fixture.detectChanges();
-        tick();
-
-        this.fixture.componentInstance.title = '1234';
-
-        this.fixture.detectChanges();
-        tick();
-
-        expect(this.fixture.componentInstance.handleChange).toHaveBeenCalledWith(this.fixture.componentInstance.changed);
+        this.fixture.whenStable().then(() => {
+            this.fixture.componentInstance.title = '1234';
+            return this.fixture.detectChanges();
+        }).then(() => {
+            expect(this.fixture.componentInstance.handleChange).toHaveBeenCalledWith(this.fixture.componentInstance.changed);
+        });
     }));
@@ -187,3 +185,3 @@
 
-    it('should validate minlength', fakeAsync(() => {
+    it('should validate minlength', async(() => {
         // get editor component
@@ -194,19 +192,20 @@ const editorComponent = this.fixture.debugElement.children[0].componentInstance;
         this.fixture.detectChanges();
-        tick();
-        expect(editorElement.className).toMatch('ng-valid');
+        this.fixture.whenStable().then(() => {
+            expect(editorElement.className).toMatch('ng-valid');
 
-        // set minlength
-        this.fixture.componentInstance.minLength = 8;
-        this.fixture.componentInstance.title = 'Hallo12';
+            // set minlength
+            this.fixture.componentInstance.minLength = 8;
+            this.fixture.componentInstance.title = 'Hallo1';
 
-        this.fixture.detectChanges();
-        tick();
-        this.fixture.detectChanges();
-        tick();
+            this.fixture.detectChanges();
 
-        expect(editorComponent.minLength).toBe(8);
-        expect(editorElement.className).toMatch('ng-invalid');
+            return this.fixture.whenStable();
+        }).then(() => {
+            this.fixture.detectChanges();
+            expect(editorComponent.minLength).toBe(8);
+            expect(editorElement.className).toMatch('ng-invalid');
+        });
     }));
 
-    it('should set valid minlength if model is empty', fakeAsync(() => {
+    it('should set valid minlength if model is empty', async(() => {
         // get editor component
@@ -217,18 +216,17 @@ const editorComponent = this.fixture.debugElement.children[0].componentInstance;
         this.fixture.detectChanges();
-        tick();
+        this.fixture.whenStable().then(() => {
+            // set min length
+            editorComponent.minLength = 2;
+            // change text
+            editorComponent.quillEditor.setText('');
 
-        // set min length
-        editorComponent.minLength = 2;
-        // change text
-        editorComponent.quillEditor.setText('');
-
-        this.fixture.detectChanges();
-        tick();
-        this.fixture.detectChanges();
-        tick();
-
-        expect(editorElement.className).toMatch('ng-valid');
+            this.fixture.detectChanges();
+            return this.fixture.whenStable();
+        }).then(() => {
+            this.fixture.detectChanges();
+            expect(editorElement.className).toMatch('ng-valid');
+        });
     }));
 
-    it('should validate maxlength', fakeAsync(() => {
+    it('should validate maxlength', async(() => {
         // get editor component
@@ -239,18 +237,19 @@ const editorComponent = this.fixture.debugElement.children[0].componentInstance;
         this.fixture.detectChanges();
-        tick();
+        this.fixture.whenStable().then(() => {
+            expect(this.fixture.debugElement.children[0].nativeElement.className).toMatch('ng-valid');
 
-        expect(this.fixture.debugElement.children[0].nativeElement.className).toMatch('ng-valid');
+            this.fixture.componentInstance.maxLength = 3;
+            this.fixture.componentInstance.title = '1234';
+            this.fixture.detectChanges();
 
-        this.fixture.componentInstance.maxLength = 3;
-        this.fixture.componentInstance.title = '1234';
-        this.fixture.detectChanges();
-        tick();
-        this.fixture.detectChanges();
-        tick();
+            return this.fixture.whenStable();
+        }).then(() => {
+            this.fixture.detectChanges();
 
-        expect(editorComponent.maxLength).toBe(3);
-        expect(editorElement.className).toMatch('ng-invalid');
+            expect(editorComponent.maxLength).toBe(3);
+            expect(editorElement.className).toMatch('ng-invalid');
+        });
     }));
 
-    it('should validate maxlength and minlength', fakeAsync(() => {
+    it('should validate maxlength and minlength', async(() => {
         // get editor component
@@ -260,27 +259,54 @@ const editorElement = this.fixture.debugElement.children[0].nativeElement;
         this.fixture.detectChanges();
-        tick();
+        this.fixture.whenStable().then(() => {
+            expect(this.fixture.debugElement.children[0].nativeElement.className).toMatch('ng-valid');
 
-        expect(this.fixture.debugElement.children[0].nativeElement.className).toMatch('ng-valid');
+            this.fixture.componentInstance.minLength = 3;
+            this.fixture.componentInstance.maxLength = 5;
+            this.fixture.componentInstance.title = '123456';
 
-        this.fixture.componentInstance.minLength = 3;
-        this.fixture.componentInstance.maxLength = 5;
-        this.fixture.componentInstance.title = '123456';
+            this.fixture.detectChanges();
+            return this.fixture.whenStable();
+        }).then(() => {
+            this.fixture.detectChanges();
+            expect(editorElement.className).toMatch('ng-invalid');
 
-        this.fixture.detectChanges();
-        tick();
-        this.fixture.detectChanges();
-        tick();
+            this.fixture.componentInstance.title = '1234';
 
-        expect(editorElement.className).toMatch('ng-invalid');
+            this.fixture.detectChanges();
+            return this.fixture.whenStable();
+        }).then(() => {
+            this.fixture.detectChanges();
+            expect(editorElement.className).toMatch('ng-valid');
+        });
+    }));
 
-        this.fixture.componentInstance.minLength = 3;
-        this.fixture.componentInstance.maxLength = 5;
-        this.fixture.componentInstance.title = '1234';
+    it('should validate required', async(() => {
+        // get editor component
+        const editorElement = this.fixture.debugElement.children[0].nativeElement;
+        const editorComponent = this.fixture.debugElement.children[0].componentInstance;
 
         this.fixture.detectChanges();
-        tick();
-        this.fixture.detectChanges();
-        tick();
+        this.fixture.whenStable().then(() => {
+            expect(this.fixture.debugElement.children[0].nativeElement.className).toMatch('ng-valid');
+            expect(editorComponent.required).toBeFalsy();
 
-        expect(editorElement.className).toMatch('ng-valid');
+            this.fixture.componentInstance.required = true;
+            this.fixture.componentInstance.title = '';
+
+            this.fixture.detectChanges();
+            return this.fixture.whenStable();
+        }).then(() => {
+            this.fixture.detectChanges();
+
+            expect(editorComponent.required).toBeTruthy();
+            expect(editorElement.className).toMatch('ng-invalid');
+
+            this.fixture.componentInstance.title = '1';
+
+            this.fixture.detectChanges();
+            return this.fixture.whenStable();
+        }).then(() => {
+            this.fixture.detectChanges();
+            expect(editorElement.className).toMatch('ng-valid');
+        });
     }));
@@ -294,3 +320,6 @@
         expect(this.fixture.nativeElement.querySelector('[quill-editor-toolbar]').querySelector('span[title=Alignment]')).toBeDefined();
+
+        const editorComponent = this.fixture.debugElement.children[0].componentInstance;
+        expect(editorComponent.required).toBe(true)
     }));
 });

src/quill-editor.component.ts

@@ -76,3 +76,5 @@ import {
   @Input() minLength: number;
+  @Input() required: boolean;
   @Input() formats: string[];
+  @Input() bounds: HTMLElement | string;
 
@@ -106,2 +108,6 @@ @Output() onEditorCreated: EventEmitter<any> = new EventEmitter();
 
+    if (this.content) {
+      this.quillEditor.pasteHTML(this.content)
+    }
+
     this.onEditorCreated.emit(this.quillEditor);
@@ -115,3 +121,4 @@
         oldRange: oldRange,
-        source: source
+        source: source,
+        bounds: this.bounds || document.body
       });
@@ -180,2 +187,3 @@
       maxLengthError?: {given: number, maxLength: number};
+      requiredError?: {empty: boolean}
     } = {},
@@ -186,3 +194,3 @@ valid = true;
 
-    if (this.minLength) {
+    if (this.minLength && textLength && textLength < this.minLength) {
       err.minLengthError = {
@@ -193,6 +201,6 @@ given: textLength,
 
-      valid = textLength >= this.minLength || !textLength;
+      valid = false;
     }
 
-    if (this.maxLength) {
+    if (this.maxLength && textLength > this.maxLength) {
       err.maxLengthError = {
@@ -203,7 +211,15 @@ given: textLength,
 
-      valid = textLength <= this.maxLength && valid;
+      valid = false;
     }
 
+    if (this.required && !textLength) {
+      err.requiredError = {
+        empty: true
+      }
+
+      valid = false;
+    }
+
     return valid ? null : err;
   }
 }

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

196573

increased by1.91%

Lines of code

1369

increased by6.54%

Number of lines in readme file

147

increased by1.38%

No dependency changes