directus-extension-unlayer/dist/index.js

This is an email editor to build beautiful, responsive designs quickly and easily.

import{defineComponent as e,shallowRef as t,openBlock as i,createElementBlock as o,normalizeStyle as n,resolveComponent as r,Fragment as s,createVNode as d,createElementVNode as a,createCommentVNode as l}from"vue";const c="vue-email-editor",p="2.1.0",u="//editor.unlayer.com/embed.js?2",h=[];let m=!1;const g=()=>{if(m){let e;for(;e=h.shift();)e()}},f=e=>{if((e=>{h.push(e)})(e),(()=>{const e=document.querySelectorAll("script");let t=!1;return e.forEach((e=>{e.src.includes(u)&&(t=!0)})),t})())g();else{const e=document.createElement("script");e.setAttribute("src",u),e.onload=()=>{m=!0,g()},document.head.appendChild(e)}};let v=0;const y=e({name:"EmailEditor",props:{editorId:String,minHeight:{type:String,default:"500px"},options:Object,appearance:Object,locale:String,projectId:Number,tools:Object},computed:{id(){return this.editorId||"editor-"+ ++v}},setup:()=>({editor:t(null)}),mounted(){f(this.loadEditor.bind(this))},methods:{loadEditor(){const e=this.options||{};this.appearance&&(e.appearance=this.appearance),this.locale&&(e.locale=this.locale),this.projectId&&(e.projectId=this.projectId),this.tools&&(e.tools=this.tools),this.editor=unlayer.createEditor({...e,id:this.id,source:{name:c,version:p}}),this.$emit("load"),this.editor.addEventListener("editor:ready",(()=>{this.$emit("ready")}))},exportHtml(e){var t;null==(t=this.editor)||t.exportHtml(e)},loadDesign(e){var t;null==(t=this.editor)||t.loadDesign(e)},saveDesign(e){var t;null==(t=this.editor)||t.saveDesign(e)}}}),E=["id"];var j=(e,t)=>{const i=e.__vccOpts||e;for(const[e,o]of t)i[e]=o;return i};const b={props:{value:{type:JSON,default:null}},emits:["input"],setup:(e,{emit:t})=>({handleChange:function(e){t("input",e)}}),name:"app",components:{EmailEditor:((e,t)=>{const i=e.__vccOpts||e;for(const[e,o]of t)i[e]=o;return i})(y,[["render",function(e,t,r,s,d,a){return i(),o("div",{id:e.id,class:"unlayer-editor",style:n({minHeight:e.minHeight})},null,12,E)}],["__scopeId","data-v-4f9aebc6"]])},data:()=>({minHeight:"1000px",locale:"en",projectId:0,tools:{image:{enabled:!0}},options:{},appearance:{theme:"dark",panels:{tools:{dock:"right"}}}}),methods:{editorReady(){if(document.querySelector("iframe").style.minWidth="100%",document.querySelector("iframe").style.minHeight="1000px",null!=this.$props.value){var e=JSON.parse(JSON.stringify(this.$props.value.design));this.$refs.emailEditor.editor.loadDesign(e)}this.$refs.emailEditor.editor.addEventListener("design:updated",this.saveDesign)},saveDesign(){this.$refs.emailEditor.editor.saveDesign((e=>{this.handleChange({design:e}),console.log("saveDesign",e)}))}}},D=a("div",null,[l(" Removed the Export HTML button ")],-1);var H={id:"directus-extension-unlayer",name:"Unlayer Email Editor",icon:"email",description:"This is an email editor to build beautiful, responsive designs quickly and easily.",component:j(b,[["render",function(e,t,n,a,l,c){const p=r("EmailEditor");return i(),o(s,null,[D,d(p,{ref:"emailEditor",editor:e.editor,"onUpdate:editor":t[0]||(t[0]=t=>e.editor=t),"min-height":l.minHeight,"project-id":l.projectId,locale:l.locale,tools:l.tools,options:l.options,onReady:c.editorReady},null,8,["editor","min-height","project-id","locale","tools","options","onReady"])],64)}],["__file","interface.vue"]]),options:null,types:["json"]};export{H as default};