stencil-quill
Version:
Native web component for quill editor
2 lines • 8.19 kB
JavaScript
import{r as t,c as i,h as e,H as s,g as h}from"./p-d874274f.js";const l=class{constructor(e){t(this,e);this.editorInit=i(this,"editorInit",7);this.editorChange=i(this,"editorChange",7);this.editorContentChange=i(this,"editorContentChange",7);this.editorSelectionChange=i(this,"editorSelectionChange",7);this.editorFocus=i(this,"editorFocus",7);this.editorBlur=i(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"]]}}setEditorContent(t){if(this.format==="html"){const i=this.quillEditor.clipboard.convert(t);this.quillEditor.setContents(i,"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(i){this.quillEditor.setText(t,"api")}}else{this.quillEditor.setText(t,"api")}}getEditorContent(){const t=this.quillEditor.getText();const i=this.quillEditor.getContents();let e=this.quillEditor.getSemanticHTML();if(this.isEmptyValue(e)){e=this.defaultEmptyValue}if(this.format==="html"){return e}else if(this.format==="text"){return t}else if(this.format==="json"){try{return JSON.stringify(i)}catch(i){return t}}else{return t}}componentDidLoad(){this.editorElement=document.createElement("div");this.editorElement.setAttribute("quill-editor","");let t=this.modules?JSON.parse(this.modules):this.defaultModules;const i=this.wrapperElement.querySelector('[slot="quill-toolbar"]');if(i){t["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:t,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){const t=JSON.parse(this.styles);Object.keys(t).forEach((i=>{this.editorElement.style.setProperty(i,t[i])}))}if(this.content){this.setEditorContent(this.content);this.quillEditor["history"].clear()}this.editorChangeEvent=this.quillEditor.on("editor-change",((t,i,e,s)=>{if(t==="text-change"){const h=this.quillEditor.getText();const l=this.quillEditor.getContents();let n=this.quillEditor.getSemanticHTML();if(this.isEmptyValue(n)){n=null}this.editorChange.emit({content:l,delta:i,editor:this.quillEditor,event:t,html:n,oldDelta:e,source:s,text:h})}else{this.editorChange.emit({editor:this.quillEditor,event:t,oldRange:e,range:i,source:s})}}));this.selectionChangeEvent=this.quillEditor.on("selection-change",((t,i,e)=>{if(t===null){this.editorBlur.emit({editor:this.quillEditor,source:e})}else if(i===null){this.editorFocus.emit({editor:this.quillEditor,source:e})}this.editorSelectionChange.emit({editor:this.quillEditor,range:t,oldRange:i,source:e})}));this.textChangeEvent=this.quillEditor.on("text-change",((t,i,e)=>{const s=this.quillEditor.getText();const h=this.quillEditor.getContents();let l=this.quillEditor.getSemanticHTML();if(this.isEmptyValue(l)){l=null}this.editorContentChange.emit({editor:this.quillEditor,content:h,delta:t,html:l,oldDelta:i,source:e,text:s})}));setTimeout((()=>{this.editorInit.emit(this.quillEditor)}))}disconnectedCallback(){if(this.selectionChangeEvent){this.selectionChangeEvent.removeListener("selection-change")}if(this.textChangeEvent){this.textChangeEvent.removeListener("text-change")}if(this.editorChangeEvent){this.editorChangeEvent.removeListener("editor-change")}}updateContent(t){if(!this.quillEditor){return}const i=this.getEditorContent();if(["text","html","json"].indexOf(this.format)>-1&&t===i){return null}else{let e=false;try{const s=JSON.stringify(t);e=JSON.stringify(i)!==s}catch(t){return null}if(!e){return null}}this.setEditorContent(t)}updateReadOnly(t,i){if(!this.quillEditor){return}if(t!==i){this.quillEditor.enable(!t)}}updatePlaceholder(t,i){if(!this.quillEditor){return}if(t!==i){this.quillEditor.root.dataset.placeholder=t}}updateStyle(t,i){if(!this.editorElement){return}if(i){const t=JSON.parse(i);Object.keys(t).forEach((t=>{this.editorElement.style.setProperty(t,"")}))}if(t){const i=JSON.parse(t);Object.keys(i).forEach((t=>{this.editorElement.style.setProperty(t,i[t])}))}}render(){e(s,null,e("slot",{name:"quill-toolbar","quill-toolbar":""}))}isEmptyValue(t){return t==="<p></p>"||t==="<div></div>"||t==="<p><br></p>"||t==="<div><br></div>"}get wrapperElement(){return h(this)}static get watchers(){return{content:["updateContent"],readOnly:["updateReadOnly"],placeholder:["updatePlaceholder"],styles:["updateStyle"]}}};const n=".ql-container.quill-view.sc-quill-view{border:0}";const r=n;const o=class{constructor(i){t(this,i);this.format="html";this.debug="warn";this.strict=true;this.styles="{}";this.theme="snow";this.defaultEmptyValue=null}setEditorContent(t){if(!this.quillEditor){return null}if(this.format==="html"){const i=this.quillEditor.clipboard.convert(t);this.quillEditor.setContents(i,"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(i){this.quillEditor.setText(t,"api")}}else{this.quillEditor.setText(t,"api")}}getEditorContent(){if(!this.quillEditor){return null}const t=this.quillEditor.getText();const i=this.quillEditor.getContents();let e=this.quillEditor.getSemanticHTML();if(this.isEmptyValue(e)){e=this.defaultEmptyValue}if(this.format==="html"){return e}else if(this.format==="text"){return t}else if(this.format==="json"){try{return JSON.stringify(i)}catch(i){return t}}else{return t}}componentDidLoad(){let t=this.modules?JSON.parse(this.modules):{toolbar:false};if(t.toolbar){t.toolbar=false}this.quillEditor=new Quill(this.editorElement,{debug:this.debug,modules:t,readOnly:true,theme:this.theme||"snow",formats:this.formats,strict:this.strict});if(this.styles){const t=JSON.parse(this.styles);Object.keys(t).forEach((i=>{this.editorElement.style.setProperty(i,t[i])}))}this.editorElement.classList.add("quill-view");if(this.content){this.setEditorContent(this.content);this.quillEditor["history"].clear()}}updateStyle(t,i){if(!this.editorElement){return}if(i){const t=JSON.parse(i);Object.keys(t).forEach((t=>{this.editorElement.style.setProperty(t,"")}))}if(t){const i=JSON.parse(t);Object.keys(i).forEach((t=>{this.editorElement.style.setProperty(t,i[t])}))}}updateContent(t){if(!this.quillEditor){return null}const i=this.getEditorContent();if(["text","html","json"].indexOf(this.format)>-1&&t===i){return null}else{let e=false;try{const s=JSON.stringify(t);e=JSON.stringify(i)!==s}catch(t){return null}if(!e){return null}}this.setEditorContent(t)}isEmptyValue(t){return t==="<p></p>"||t==="<div></div>"||t==="<p><br></p>"||t==="<div><br></div>"}render(){return e("div",{key:"b5d966c20180db2d28ee0de2ab8547aa50341bc3","quill-element":true,ref:t=>{this.editorElement=t}})}get wrapperElement(){return h(this)}static get watchers(){return{styles:["updateStyle"],content:["updateContent"]}}};o.style=r;const a=".ql-container.quill-view-html.sc-quill-view-html{border:0}";const c=a;const u=class{constructor(i){t(this,i);this.theme="snow";this.themeClass="ql-snow"}updateTheme(t){this.themeClass=`ql-${t||"snow"}`}render(){const t=`ql-container ${this.themeClass} quill-view-html`;return e("div",{key:"a7136b962b0fd69180276ef7add2d89b8389ba3a",class:t},e("div",{key:"598a89699ee3255a5406b999b9775f8947a42396",class:"ql-editor",innerHTML:this.content}))}static get watchers(){return{theme:["updateTheme"]}}};u.style=c;export{l as quill_editor,o as quill_view,u as quill_view_html};
//# sourceMappingURL=p-13527e7d.entry.js.map