stencil-quill
Version:
Native web component for quill editor
2 lines • 9.46 kB
JavaScript
import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-c6a20355.js";var QuillEditorComponent=function(){function t(t){registerInstance(this,t);this.editorInit=createEvent(this,"editorInit",7);this.editorChange=createEvent(this,"editorChange",7);this.editorContentChange=createEvent(this,"editorContentChange",7);this.editorSelectionChange=createEvent(this,"editorSelectionChange",7);this.editorFocus=createEvent(this,"editorFocus",7);this.editorBlur=createEvent(this,"editorBlur",7);this.format="html";this.debug="warn";this.placeholder="Insert text here ...";this.styles="{}";this.theme="snow";this.customToolbarPosition="top";this.defaultEmptyValue=null;this.defaultModules={toolbar:[["bold","italic","underline","strike"],["blockquote","code-block"],[{header:1},{header:2}],[{list:"ordered"},{list:"bullet"}],[{script:"sub"},{script:"super"}],[{indent:"-1"},{indent:"+1"}],[{direction:"rtl"}],[{size:["small",false,"large","huge"]}],[{header:[1,2,3,4,5,6,false]}],[{color:[].slice()},{background:[].slice()}],[{font:[].slice()}],[{align:[].slice()}],["clean"],["link","image","video"]]}}t.prototype.setEditorContent=function(t){if(this.format==="html"){var e=this.quillEditor.clipboard.convert(t);this.quillEditor.setContents(e,"api")}else if(this.format==="text"){this.quillEditor.setText(t,"api")}else if(this.format==="json"){try{this.quillEditor.setContents(JSON.parse(t),"api")}catch(e){this.quillEditor.setText(t,"api")}}else{this.quillEditor.setText(t,"api")}};t.prototype.getEditorContent=function(){var t=this.quillEditor.getText();var e=this.quillEditor.getContents();var i=this.quillEditor.getSemanticHTML();if(this.isEmptyValue(i)){i=this.defaultEmptyValue}if(this.format==="html"){return i}else if(this.format==="text"){return t}else if(this.format==="json"){try{return JSON.stringify(e)}catch(e){return t}}else{return t}};t.prototype.componentDidLoad=function(){var t=this;this.editorElement=document.createElement("div");this.editorElement.setAttribute("quill-editor","");var e=this.modules?JSON.parse(this.modules):this.defaultModules;var i=this.wrapperElement.querySelector('[slot="quill-toolbar"]');if(i){e["toolbar"]=i;if(this.customToolbarPosition==="bottom"){this.wrapperElement.prepend(this.editorElement)}else{this.wrapperElement.append(this.editorElement)}}else{this.wrapperElement.append(this.editorElement)}this.quillEditor=new Quill(this.editorElement,{debug:this.debug,modules:e,placeholder:this.placeholder,readOnly:this.readOnly||false,theme:this.theme||"snow",formats:this.formats,bounds:this.bounds?this.bounds==="self"?this.editorElement:this.bounds:document.body});if(this.styles){var n=JSON.parse(this.styles);Object.keys(n).forEach((function(e){t.editorElement.style.setProperty(e,n[e])}))}if(this.content){this.setEditorContent(this.content);this.quillEditor["history"].clear()}this.editorChangeEvent=this.quillEditor.on("editor-change",(function(e,i,n,s){if(e==="text-change"){var r=t.quillEditor.getText();var l=t.quillEditor.getContents();var h=t.quillEditor.getSemanticHTML();if(t.isEmptyValue(h)){h=null}t.editorChange.emit({content:l,delta:i,editor:t.quillEditor,event:e,html:h,oldDelta:n,source:s,text:r})}else{t.editorChange.emit({editor:t.quillEditor,event:e,oldRange:n,range:i,source:s})}}));this.selectionChangeEvent=this.quillEditor.on("selection-change",(function(e,i,n){if(e===null){t.editorBlur.emit({editor:t.quillEditor,source:n})}else if(i===null){t.editorFocus.emit({editor:t.quillEditor,source:n})}t.editorSelectionChange.emit({editor:t.quillEditor,range:e,oldRange:i,source:n})}));this.textChangeEvent=this.quillEditor.on("text-change",(function(e,i,n){var s=t.quillEditor.getText();var r=t.quillEditor.getContents();var l=t.quillEditor.getSemanticHTML();if(t.isEmptyValue(l)){l=null}t.editorContentChange.emit({editor:t.quillEditor,content:r,delta:e,html:l,oldDelta:i,source:n,text:s})}));setTimeout((function(){t.editorInit.emit(t.quillEditor)}))};t.prototype.disconnectedCallback=function(){if(this.selectionChangeEvent){this.selectionChangeEvent.removeListener("selection-change")}if(this.textChangeEvent){this.textChangeEvent.removeListener("text-change")}if(this.editorChangeEvent){this.editorChangeEvent.removeListener("editor-change")}};t.prototype.updateContent=function(t){if(!this.quillEditor){return}var e=this.getEditorContent();if(["text","html","json"].indexOf(this.format)>-1&&t===e){return null}else{var i=false;try{var n=JSON.stringify(t);i=JSON.stringify(e)!==n}catch(t){return null}if(!i){return null}}this.setEditorContent(t)};t.prototype.updateReadOnly=function(t,e){if(!this.quillEditor){return}if(t!==e){this.quillEditor.enable(!t)}};t.prototype.updatePlaceholder=function(t,e){if(!this.quillEditor){return}if(t!==e){this.quillEditor.root.dataset.placeholder=t}};t.prototype.updateStyle=function(t,e){var i=this;if(!this.editorElement){return}if(e){var n=JSON.parse(e);Object.keys(n).forEach((function(t){i.editorElement.style.setProperty(t,"")}))}if(t){var s=JSON.parse(t);Object.keys(s).forEach((function(t){i.editorElement.style.setProperty(t,s[t])}))}};t.prototype.render=function(){h(Host,null,h("slot",{name:"quill-toolbar","quill-toolbar":""}))};t.prototype.isEmptyValue=function(t){return t==="<p></p>"||t==="<div></div>"||t==="<p><br></p>"||t==="<div><br></div>"};Object.defineProperty(t.prototype,"wrapperElement",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{content:["updateContent"],readOnly:["updateReadOnly"],placeholder:["updatePlaceholder"],styles:["updateStyle"]}},enumerable:false,configurable:true});return t}();var quillViewCss=".ql-container.quill-view.sc-quill-view{border:0}";var QuillViewStyle0=quillViewCss;var QuillViewComponent=function(){function t(t){registerInstance(this,t);this.format="html";this.debug="warn";this.strict=true;this.styles="{}";this.theme="snow";this.defaultEmptyValue=null}t.prototype.setEditorContent=function(t){if(!this.quillEditor){return null}if(this.format==="html"){var e=this.quillEditor.clipboard.convert(t);this.quillEditor.setContents(e,"api")}else if(this.format==="text"){this.quillEditor.setText(t,"api")}else if(this.format==="json"){try{this.quillEditor.setContents(JSON.parse(t),"api")}catch(e){this.quillEditor.setText(t,"api")}}else{this.quillEditor.setText(t,"api")}};t.prototype.getEditorContent=function(){if(!this.quillEditor){return null}var t=this.quillEditor.getText();var e=this.quillEditor.getContents();var i=this.quillEditor.getSemanticHTML();if(this.isEmptyValue(i)){i=this.defaultEmptyValue}if(this.format==="html"){return i}else if(this.format==="text"){return t}else if(this.format==="json"){try{return JSON.stringify(e)}catch(e){return t}}else{return t}};t.prototype.componentDidLoad=function(){var t=this;var e=this.modules?JSON.parse(this.modules):{toolbar:false};if(e.toolbar){e.toolbar=false}this.quillEditor=new Quill(this.editorElement,{debug:this.debug,modules:e,readOnly:true,theme:this.theme||"snow",formats:this.formats,strict:this.strict});if(this.styles){var i=JSON.parse(this.styles);Object.keys(i).forEach((function(e){t.editorElement.style.setProperty(e,i[e])}))}this.editorElement.classList.add("quill-view");if(this.content){this.setEditorContent(this.content);this.quillEditor["history"].clear()}};t.prototype.updateStyle=function(t,e){var i=this;if(!this.editorElement){return}if(e){var n=JSON.parse(e);Object.keys(n).forEach((function(t){i.editorElement.style.setProperty(t,"")}))}if(t){var s=JSON.parse(t);Object.keys(s).forEach((function(t){i.editorElement.style.setProperty(t,s[t])}))}};t.prototype.updateContent=function(t){if(!this.quillEditor){return null}var e=this.getEditorContent();if(["text","html","json"].indexOf(this.format)>-1&&t===e){return null}else{var i=false;try{var n=JSON.stringify(t);i=JSON.stringify(e)!==n}catch(t){return null}if(!i){return null}}this.setEditorContent(t)};t.prototype.isEmptyValue=function(t){return t==="<p></p>"||t==="<div></div>"||t==="<p><br></p>"||t==="<div><br></div>"};t.prototype.render=function(){var t=this;return h("div",{key:"b5d966c20180db2d28ee0de2ab8547aa50341bc3","quill-element":true,ref:function(e){t.editorElement=e}})};Object.defineProperty(t.prototype,"wrapperElement",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{styles:["updateStyle"],content:["updateContent"]}},enumerable:false,configurable:true});return t}();QuillViewComponent.style=QuillViewStyle0;var quillViewHtmlCss=".ql-container.quill-view-html.sc-quill-view-html{border:0}";var QuillViewHtmlStyle0=quillViewHtmlCss;var QuillViewHTMLComponent=function(){function t(t){registerInstance(this,t);this.theme="snow";this.themeClass="ql-snow"}t.prototype.updateTheme=function(t){this.themeClass="ql-".concat(t||"snow")};t.prototype.render=function(){var t="ql-container ".concat(this.themeClass," quill-view-html");return h("div",{key:"a7136b962b0fd69180276ef7add2d89b8389ba3a",class:t},h("div",{key:"598a89699ee3255a5406b999b9775f8947a42396",class:"ql-editor",innerHTML:this.content}))};Object.defineProperty(t,"watchers",{get:function(){return{theme:["updateTheme"]}},enumerable:false,configurable:true});return t}();QuillViewHTMLComponent.style=QuillViewHtmlStyle0;export{QuillEditorComponent as quill_editor,QuillViewComponent as quill_view,QuillViewHTMLComponent as quill_view_html};
//# sourceMappingURL=quill-editor_3.entry.js.map