stencil-quill
Version:
Native web component for quill editor
340 lines (339 loc) • 10.6 kB
JavaScript
import { h } from "@stencil/core";
export class QuillViewComponent {
constructor() {
this.format = 'html';
this.debug = 'warn';
this.strict = true;
this.styles = '{}';
this.theme = 'snow';
this.defaultEmptyValue = null;
}
setEditorContent(value) {
if (!this.quillEditor) {
return null;
}
if (this.format === 'html') {
const contents = this.quillEditor.clipboard.convert(value);
this.quillEditor.setContents(contents, 'api');
}
else if (this.format === 'text') {
this.quillEditor.setText(value, 'api');
}
else if (this.format === 'json') {
try {
this.quillEditor.setContents(JSON.parse(value), 'api');
}
catch (e) {
this.quillEditor.setText(value, 'api');
}
}
else {
this.quillEditor.setText(value, 'api');
}
}
getEditorContent() {
if (!this.quillEditor) {
return null;
}
const text = this.quillEditor.getText();
const content = this.quillEditor.getContents();
let html = this.quillEditor.getSemanticHTML();
if (this.isEmptyValue(html)) {
html = this.defaultEmptyValue;
}
if (this.format === 'html') {
return html;
}
else if (this.format === 'text') {
return text;
}
else if (this.format === 'json') {
try {
return JSON.stringify(content);
}
catch (e) {
return text;
}
}
else {
return text;
}
}
componentDidLoad() {
let modules = this.modules
? JSON.parse(this.modules)
: {
toolbar: false,
};
if (modules.toolbar) {
modules.toolbar = false;
}
this.quillEditor = new Quill(this.editorElement, {
debug: this.debug,
modules: modules,
readOnly: true,
theme: this.theme || 'snow',
formats: this.formats,
strict: this.strict,
});
if (this.styles) {
const styles = JSON.parse(this.styles);
Object.keys(styles).forEach((key) => {
this.editorElement.style.setProperty(key, styles[key]);
});
}
this.editorElement.classList.add('quill-view');
if (this.content) {
this.setEditorContent(this.content);
this.quillEditor['history'].clear();
}
}
updateStyle(newValue, oldValue) {
if (!this.editorElement) {
return;
}
if (oldValue) {
const old = JSON.parse(oldValue);
Object.keys(old).forEach((key) => {
this.editorElement.style.setProperty(key, '');
});
}
if (newValue) {
const value = JSON.parse(newValue);
Object.keys(value).forEach((key) => {
this.editorElement.style.setProperty(key, value[key]);
});
}
}
updateContent(newValue) {
if (!this.quillEditor) {
return null;
}
const editorContents = this.getEditorContent();
if (['text', 'html', 'json'].indexOf(this.format) > -1 && newValue === editorContents) {
return null;
}
else {
let changed = false;
try {
const newContentString = JSON.stringify(newValue);
changed = JSON.stringify(editorContents) !== newContentString;
}
catch (_a) {
return null;
}
if (!changed) {
return null;
}
}
this.setEditorContent(newValue);
}
isEmptyValue(html) {
return html === '<p></p>' || html === '<div></div>' || html === '<p><br></p>' || html === '<div><br></div>';
}
render() {
return (h("div", { key: 'b5d966c20180db2d28ee0de2ab8547aa50341bc3', "quill-element": true, ref: (el) => { this.editorElement = el; } }));
}
static get is() { return "quill-view"; }
static get encapsulation() { return "scoped"; }
static get originalStyleUrls() {
return {
"$": ["./quill-view.css"]
};
}
static get styleUrls() {
return {
"$": ["quill-view.css"]
};
}
static get properties() {
return {
"format": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'html' | 'text' | 'json'",
"resolved": "\"html\" | \"json\" | \"text\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "format",
"reflect": false,
"defaultValue": "'html'"
},
"content": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "content",
"reflect": false
},
"debug": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "debug",
"reflect": false,
"defaultValue": "'warn'"
},
"formats": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "string[]",
"resolved": "string[]",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false
},
"modules": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "modules",
"reflect": false
},
"strict": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "strict",
"reflect": false,
"defaultValue": "true"
},
"styles": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "styles",
"reflect": false,
"defaultValue": "'{}'"
},
"theme": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "theme",
"reflect": false,
"defaultValue": "'snow'"
},
"defaultEmptyValue": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "default-empty-value",
"reflect": false,
"defaultValue": "null"
}
};
}
static get elementRef() { return "wrapperElement"; }
static get watchers() {
return [{
"propName": "styles",
"methodName": "updateStyle"
}, {
"propName": "content",
"methodName": "updateContent"
}];
}
}
//# sourceMappingURL=quill-view.js.map