import * as i0 from '@angular/core'; import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Output, ContentChild, Input, ContentChildren, NgModule } from '@angular/core'; import * as i1 from '@angular/common'; import { CommonModule } from '@angular/common'; import { Header, PrimeTemplate, SharedModule } from 'primeng/api'; import { DomHandler } from 'primeng/dom'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import * as Quill from 'quill'; const EDITOR_VALUE_ACCESSOR = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Editor), multi: true }; class Editor { constructor(el) { this.el = el; this.onTextChange = new EventEmitter(); this.onSelectionChange = new EventEmitter(); this.onInit = new EventEmitter(); this.onModelChange = () => { }; this.onModelTouched = () => { }; } ngAfterViewInit() { let editorElement = DomHandler.findSingle(this.el.nativeElement, 'div.p-editor-content'); let toolbarElement = DomHandler.findSingle(this.el.nativeElement, 'div.p-editor-toolbar'); let defaultModule = { toolbar: toolbarElement }; let modules = this.modules ? Object.assign(Object.assign({}, defaultModule), this.modules) : defaultModule; this.quill = new Quill(editorElement, { modules: modules, placeholder: this.placeholder, readOnly: this.readonly, theme: 'snow', formats: this.formats, bounds: this.bounds, debug: this.debug, scrollingContainer: this.scrollingContainer }); if (this.value) { this.quill.setContents(this.quill.clipboard.convert(this.value)); } this.quill.on('text-change', (delta, oldContents, source) => { if (source === 'user') { let html = DomHandler.findSingle(editorElement, '.ql-editor').innerHTML; let text = this.quill.getText().trim(); if (html === '


') { html = null; } this.onTextChange.emit({ htmlValue: html, textValue: text, delta: delta, source: source }); this.onModelChange(html); this.onModelTouched(); } }); this.quill.on('selection-change', (range, oldRange, source) => { this.onSelectionChange.emit({ range: range, oldRange: oldRange, source: source }); }); this.onInit.emit({ editor: this.quill }); } ngAfterContentInit() { this.templates.forEach((item) => { switch (item.getType()) { case 'header': this.headerTemplate = item.template; break; } }); } writeValue(value) { this.value = value; if (this.quill) { if (value) this.quill.setContents(this.quill.clipboard.convert(value)); else this.quill.setText(''); } } registerOnChange(fn) { this.onModelChange = fn; } registerOnTouched(fn) { this.onModelTouched = fn; } getQuill() { return this.quill; } get readonly() { return this._readonly; } set readonly(val) { this._readonly = val; if (this.quill) { if (this._readonly) this.quill.disable(); else this.quill.enable(); } } } Editor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: Editor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); Editor.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: Editor, selector: "p-editor", inputs: { style: "style", styleClass: "styleClass", placeholder: "placeholder", formats: "formats", modules: "modules", bounds: "bounds", scrollingContainer: "scrollingContainer", debug: "debug", readonly: "readonly" }, outputs: { onTextChange: "onTextChange", onSelectionChange: "onSelectionChange", onInit: "onInit" }, host: { classAttribute: "p-element" }, providers: [EDITOR_VALUE_ACCESSOR], queries: [{ propertyName: "toolbar", first: true, predicate: Header, descendants: true }, { propertyName: "templates", predicate: PrimeTemplate }], ngImport: i0, template: `
`, isInline: true, styles: [".p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item{width:auto;height:auto}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: Editor, decorators: [{ type: Component, args: [{ selector: 'p-editor', template: `
`, providers: [EDITOR_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'p-element' }, styles: [".p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item{width:auto;height:auto}\n"] }] }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onTextChange: [{ type: Output }], onSelectionChange: [{ type: Output }], toolbar: [{ type: ContentChild, args: [Header] }], style: [{ type: Input }], styleClass: [{ type: Input }], placeholder: [{ type: Input }], formats: [{ type: Input }], modules: [{ type: Input }], bounds: [{ type: Input }], scrollingContainer: [{ type: Input }], debug: [{ type: Input }], onInit: [{ type: Output }], templates: [{ type: ContentChildren, args: [PrimeTemplate] }], readonly: [{ type: Input }] } }); class EditorModule { } EditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: EditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); EditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: EditorModule, declarations: [Editor], imports: [CommonModule], exports: [Editor, SharedModule] }); EditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: EditorModule, imports: [[CommonModule], SharedModule] }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: EditorModule, decorators: [{ type: NgModule, args: [{ imports: [CommonModule], exports: [Editor, SharedModule], declarations: [Editor] }] }] }); /** * Generated bundle index. Do not edit. */ export { EDITOR_VALUE_ACCESSOR, Editor, EditorModule };