import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, Output, ContentChild, Input, ContentChildren, NgModule } from '@angular/core';
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 = editorElement.children[0].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 'toolbar':
this.toolbarTemplate = item.template;
break;
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.decorators = [
{ type: Component, args: [{
selector: 'p-editor',
template: `
`,
providers: [EDITOR_VALUE_ACCESSOR],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
styles: [".p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item{height:auto;width:auto}"]
},] }
];
Editor.ctorParameters = () => [
{ type: ElementRef }
];
Editor.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.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
exports: [Editor, SharedModule],
declarations: [Editor]
},] }
];
/**
* Generated bundle index. Do not edit.
*/
export { EDITOR_VALUE_ACCESSOR, Editor, EditorModule };
//# sourceMappingURL=primeng-editor.js.map