vue-document-editor
Version:
Paper-sized WYSIWYG document editor for Vue apps
2 lines • 49.3 kB
JavaScript
(function(){"use strict";var e={8449:function(e,t,i){var n=i(9963),s=i(6252);const a={class:"main"};function o(e,t,i,n,o,r){const l=(0,s.up)("vue-file-toolbar-menu"),c=(0,s.up)("vue-document-editor");return(0,s.wg)(),(0,s.iD)("div",a,[(0,s.Wm)(l,{content:r.menu,class:"bar"},null,8,["content"]),(0,s.Wm)(c,{class:"editor",ref:"editor",content:o.content,"onUpdate:content":t[0]||(t[0]=e=>o.content=e),overlay:r.overlay,zoom:o.zoom,page_format_mm:o.page_format_mm,page_margins:o.page_margins,display:o.display},null,8,["content","overlay","zoom","page_format_mm","page_margins","display"])])}var r=i(3183),l=i(3577);const c={class:"editor",ref:"editor"},d={key:0,class:"overlays",ref:"overlays"},u=["innerHTML"],m=["contenteditable"];function h(e,t,i,n,a,o){return(0,s.wg)(),(0,s.iD)("div",c,[i.overlay?((0,s.wg)(),(0,s.iD)("div",d,[((0,s.wg)(!0),(0,s.iD)(s.HY,null,(0,s.Ko)(a.pages,((e,t)=>((0,s.wg)(),(0,s.iD)("div",{class:"overlay",key:e.uuid+"-overlay",ref_for:!0,ref:t=>a.pages_overlay_refs[e.uuid]=t,innerHTML:i.overlay(t+1,a.pages.length),style:(0,l.j5)(o.page_style(t,!1))},null,12,u)))),128))],512)):(0,s.kq)("",!0),(0,s._)("div",{class:"content",ref:"content",contenteditable:i.editable,style:(0,l.j5)(o.page_style(-1)),onInput:t[0]||(t[0]=(...e)=>o.input&&o.input(...e)),onKeyup:t[1]||(t[1]=(...e)=>o.process_current_text_style&&o.process_current_text_style(...e))},null,44,m)],512)}i(7658);function p(e,t){if(!e||!t)return!1;const i=e.childNodes;for(let n=0;n<i.length;n++)if(i[n].s_tag==t)return i[n];return!1}function g(e,t,i,n,s){while(e.childNodes.length&&!i()){s=s||1!=e.childNodes.length;const a=e.lastChild;if(a.nodeType==Node.TEXT_NODE){const e=a.textContent.match(/(\s|\S+)/g),n=document.createTextNode("");t.prepend(n);const o=e?e.length:0;for(let t=0;t<o;t++){if(t==o-1&&!s)return;if(a.textContent=e.slice(0,o-t-1).join(""),n.textContent=e.slice(o-t-1,o).join(""),i())return}}else if(!a.childNodes.length||a.tagName.match(/h\d/i)||a.tagName.match(/tr/i)||"function"===typeof n&&n(a)){if(!s)return void console.log("Move-forward: first child reached with no stop condition. Aborting");t.prepend(a)}else{let e=p(t,a.s_tag);if(!e){if(!a.s_tag){const e=Math.random().toString(36).slice(2,8);a.s_tag=e}e=a.cloneNode(!1),e.s_tag=a.s_tag,t.prepend(e)}g(a,e,i,n,s),e.normalize()}if(e.contains(a))if(0==a.childNodes.length||""==a.innerHTML)e.removeChild(a);else if(!i())throw console.log("sub_child:",a,"that is in child:",e),Error("Document editor is trying to remove a non-empty sub-child. This is a bug and should not happen. Please report a repeatable set of actions that leaded to this error to https://github.com/motla/vue-document-editor/issues/new")}}function f(e,t,i){while(!i()){const i=t.firstChild;var n=(e,t)=>{const i=p(e,t.s_tag);i&&t.childNodes.length?n(i,t.firstChild):(e.append(t),e.normalize())};n(e,i)}}var _={props:{content:{type:Array,required:!0},display:{type:String,default:"grid"},editable:{type:Boolean,default:!0},overlay:Function,page_format_mm:{type:Array,default:()=>[210,297]},page_margins:{type:[String,Function],default:"10mm 15mm"},zoom:{type:Number,default:1},do_not_break:Function},data(){return{pages:[],pages_overlay_refs:{},pages_height:0,editor_width:0,prevent_next_content_update_from_parent:!1,current_text_style:!1,printing_mode:!1}},mounted(){this.update_editor_width(),this.update_css_media_style(),this.reset_content(),window.addEventListener("resize",this.update_editor_width),window.addEventListener("click",this.process_current_text_style),window.addEventListener("beforeprint",this.before_print),window.addEventListener("afterprint",this.after_print)},beforeUpdate(){this.pages_overlay_refs=[]},beforeUnmount(){window.removeEventListener("resize",this.update_editor_width),window.removeEventListener("click",this.process_current_text_style),window.removeEventListener("beforeprint",this.before_print),window.removeEventListener("afterprint",this.after_print)},computed:{css_media_style(){const e=document.createElement("style");return document.head.appendChild(e),e}},methods:{new_uuid:()=>Math.random().toString(36).slice(-5),reset_content(){if(this.reset_in_progress)return;if(this.reset_in_progress=!0,!this.content.length)return this.reset_in_progress=!1,void this.$emit("update:content",[""]);this.pages=this.content.map(((e,t)=>({uuid:this.new_uuid(),content_idx:t,template:e.template,props:e.props}))),this.update_pages_elts();const e=this.pages[0].elt;this.$refs.content.contains(e)||this.$refs.content.appendChild(e),this.pages_height=e.clientHeight+1;for(const t of this.pages){if(this.content[t.content_idx]){if("string"==typeof this.content[t.content_idx])t.elt.innerHTML="<div>"+this.content[t.content_idx]+"</div>";else if(t.template){const e=(0,n.MW)(t.template);customElements.define("component-"+t.uuid,e),t.elt.appendChild(new e({modelValue:t.props}))}}else t.elt.innerHTML="<div><br></div>";this.$refs.content.contains(t.elt)||this.$refs.content.appendChild(t.elt)}this.fit_content_over_pages(),this.$refs.content.blur(),this.reset_in_progress=!1},fit_content_over_pages(){if(!this.pages_height)return;if(this.fit_in_progress)return;this.fit_in_progress=!0;for(let s=this.pages.length-1;s>=0;s--){const e=this.pages[s];e.elt&&document.body.contains(e.elt)||this.pages.splice(s,1)}if(!this.pages.length)return this.fit_in_progress=!1,void this.$emit("update:content",[""]);const e=window.getSelection(),t=document.createElement("null"),i=document.createElement("null");if(e&&e.rangeCount&&e.anchorNode&&(!e.anchorNode.dataset||null==e.anchorNode.dataset.isVDEPage)){const n=e.getRangeAt(0);n.insertNode(t),n.collapse(!1),n.insertNode(i)}let n=!1;for(let s=0;s<this.pages.length;s++){const e=this.pages[s];let t=this.pages[s+1],i=t?t.elt:null;!e.template&&(n||e.elt.innerHTML!=e.prev_innerHTML||i&&!t.template&&i.innerHTML!=t.prev_innerHTML)&&(n=!0,e.elt.clientHeight<=this.pages_height&&t&&t.content_idx==e.content_idx&&f(e.elt,i,(()=>!i.childNodes.length||e.elt.clientHeight>this.pages_height)),e.elt.clientHeight>this.pages_height&&(t&&t.content_idx==e.content_idx||(t={uuid:this.new_uuid(),content_idx:e.content_idx},this.pages.splice(s+1,0,t),this.update_pages_elts(),i=t.elt),g(e.elt,i,(()=>e.elt.clientHeight<=this.pages_height),this.do_not_break)),i&&t.content_idx==e.content_idx&&!i.childNodes.length&&this.pages.splice(s+1,1)),this.update_pages_elts()}for(const s of this.pages)s.template||s.elt.normalize();if(document.body.contains(t)){const n=document.createRange();n.setStart(t,0),document.body.contains(i)&&n.setEnd(i,0),e.removeAllRanges(),e.addRange(n)}t.parentElement&&t.parentElement.removeChild(t),i.parentElement&&i.parentElement.removeChild(i);for(const s of this.pages)s.prev_innerHTML=s.elt.innerHTML;this.fit_in_progress=!1},input(e){e&&(this.fit_content_over_pages(),this.emit_new_content(),"insertText"!=e.inputType&&this.process_current_text_style())},emit_new_content(){let e=!1;const t=this.content.map(((t,i)=>{const n=this.pages.filter((e=>e.content_idx==i));return n.length?"string"==typeof t?n.map((e=>{let t=e.elt;while(1==t.children.length&&t.firstChild.tagName&&"div"==t.firstChild.tagName.toLowerCase()&&!t.firstChild.getAttribute("style"))t=t.firstChild;return"<br>"==t.innerHTML||"\x3c!----\x3e"==t.innerHTML?"":t.innerHTML})).join(""):{template:t.template,props:{...t.props}}:(e=!0,!1)})).filter((e=>!1!==e));e||(this.prevent_next_content_update_from_parent=!0),this.$emit("update:content",t)},process_current_text_style(){let e=!1;const t=window.getSelection();if(t.focusNode){const i=t.focusNode.tagName?t.focusNode:t.focusNode.parentElement;if(i&&i.isContentEditable){e=window.getComputedStyle(i),e.textDecorationStack=[],e.headerLevel=0,e.isList=!1;let t=i;while(t){const i=window.getComputedStyle(t);if(e.textDecorationStack.push(i.textDecoration),"list-item"==i.display&&(e.isList=!0),!e.headerLevel)for(let n=1;n<=6;n++)if(t.tagName.toUpperCase()=="H"+n){e.headerLevel=n;break}t=t.parentElement}}}this.current_text_style=e},page_style(e,t){const i=.2645833333333,n=this.page_format_mm[0]/i,s=10,a=(s+this.page_format_mm[0])*this.zoom/i,o=20,r=this.editor_width-2*o;let l,c,d,u,m,h,p,g=1;if("horizontal"==this.display)r>this.pages.length*a?(g=Math.floor(r/a),u=r/(2*g)*(1+2*e)-n/2):(g=this.pages.length,u=a*e+n/2*(this.zoom-1)),m=0,h=this.zoom*(this.page_format_mm[0]*g+(g-1)*s),p=this.page_format_mm[1]*this.zoom;else{g=Math.floor(r/a),(g<1||"vertical"==this.display)&&(g=1),l=e%g,c=r/(2*g)*(1+2*l)-n/2,d=Math.max(0,(n*this.zoom-r)/2),u=c+d,m=(this.page_format_mm[1]+s)*this.zoom*Math.floor(e/g);const t=Math.ceil(this.pages.length/g);h=this.zoom*(this.page_format_mm[0]*g+(g-1)*s),p=this.zoom*(this.page_format_mm[1]*t+(t-1)*s)}if(e>=0){const i={position:"absolute",left:"calc("+u+"px + "+o+"px)",top:"calc("+m+"mm + "+o+"px)",width:this.page_format_mm[0]+"mm",padding:"function"==typeof this.page_margins?this.page_margins(e+1,this.pages.length):this.page_margins,transform:"scale("+this.zoom+")"};return i[t?"minHeight":"height"]=this.page_format_mm[1]+"mm",i}return{width:"calc("+h+"mm + "+2*o+"px)",height:"calc("+p+"mm + "+2*o+"px)"}},css_to_string:e=>Object.entries(e).map((([e,t])=>e.replace(/[A-Z]/g,(e=>"-"+e.toLowerCase()))+":"+t)).join(";"),update_pages_elts(){const e=[...this.$refs.content.children].filter((e=>!this.pages.find((t=>t.elt==e))));for(const t of e)t.remove();for(const[t,i]of this.pages.entries()){if(!i.elt){i.elt=document.createElement("div"),i.elt.className="page",i.elt.dataset.isVDEPage="";const e=this.pages[t+1];this.$refs.content.insertBefore(i.elt,e?e.elt:null)}i.elt.dataset.contentIdx=i.content_idx,this.printing_mode||(i.elt.style=Object.entries(this.page_style(t,!i.template)).map((([e,t])=>e.replace(/[A-Z]/g,(e=>"-"+e.toLowerCase()))+":"+t)).join(";")),i.elt.contentEditable=!(!this.editable||i.template)}},update_editor_width(){this.$refs.editor.classList.add("hide_children"),this.editor_width=this.$refs.editor.clientWidth,this.update_pages_elts(),this.$refs.editor.classList.remove("hide_children")},update_css_media_style(){this.css_media_style.innerHTML="@media print { @page { size: "+this.page_format_mm[0]+"mm "+this.page_format_mm[1]+"mm; margin: 0 !important; } .hidden-print { display: none !important; } }"},before_print(){this.printing_mode=!0,this._page_body=document.body;const e=document.createElement("body");e.style.margin="0",e.style.padding="0",e.style.background="white",e.style.font=window.getComputedStyle(this.$refs.editor).font,e.className=this.$refs.editor.className;for(const[i,n]of this.pages.entries()){n.elt.style="",n.elt.style.position="relative",n.elt.style.padding="function"==typeof this.page_margins?this.page_margins(i+1,this.pages.length):this.page_margins,n.elt.style.breakBefore=i?"page":"auto",n.elt.style.width="calc("+this.page_format_mm[0]+"mm - 2px)",n.elt.style.height="calc("+this.page_format_mm[1]+"mm - 2px)",n.elt.style.boxSizing="border-box",n.elt.style.overflow="hidden";const t=this.pages_overlay_refs[n.uuid];t&&(t.style.position="absolute",t.style.left="0",t.style.top="0",t.style.transform="none",t.style.padding="0",t.style.overflow="hidden",n.elt.prepend(t)),e.append(n.elt)}const t=document.createElement("div");t.className="hidden-print",t.style.position="fixed",t.style.left="0",t.style.top="0",t.style.right="0",t.style.bottom="0",t.style.display="flex",t.style.alignItems="center",t.style.justifyContent="center",t.style.background="rgba(255, 255, 255, 0.95)",t.style.cursor="pointer",t.innerHTML='<svg width="220" height="220"><path fill="rgba(0, 0, 0, 0.7)" d="M120.774,179.271v40c47.303,0,85.784-38.482,85.784-85.785c0-47.3-38.481-85.782-85.784-85.782H89.282L108.7,28.286L80.417,0L12.713,67.703l67.703,67.701l28.283-28.284L89.282,87.703h31.492c25.246,0,45.784,20.538,45.784,45.783C166.558,158.73,146.02,179.271,120.774,179.271z"/></svg>',t.addEventListener("click",this.after_print),e.append(t),document.body=e},after_print(){this.printing_mode=!1;for(const[e,t]of this.pages.entries()){t.elt.style=this.css_to_string(this.page_style(e,!t.template)),this.$refs.content.append(t.elt);const i=this.pages_overlay_refs[t.uuid];i&&(i.style=this.css_to_string(this.page_style(e,!1)),this.$refs.overlays.append(i))}document.body=this._page_body,this.update_editor_width()}},watch:{content:{handler(){this.prevent_next_content_update_from_parent?this.prevent_next_content_update_from_parent=!1:this.reset_content()},deep:!0},display:{handler(){this.update_pages_elts()}},page_format_mm:{handler(){this.update_css_media_style(),this.reset_content()}},page_margins:{handler(){this.reset_content()}},zoom:{handler(){this.update_pages_elts()}}}},y=i(3744);const b=(0,y.Z)(_,[["render",h],["__scopeId","data-v-ae3eff30"]]);var v=b,x="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk2QkI4RkE3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk2QkI4Rjk3NjE2MTFFNUE4NEU4RkIxNjQ5MTYyRDgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjU2QTEyNzk3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjU2QTEyN0E3NjkyMTFFMzkxODk4RDkwQkY4Q0U0NzYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5WHowqAAAXNElEQVR42uxda4xd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";const k=e=>((0,s.dD)("data-v-98a429fc"),e=e(),(0,s.Cn)(),e),w={class:"template"},C=(0,s.uE)('<div class="header" data-v-98a429fc><div data-v-98a429fc><h1 data-v-98a429fc><span class="hide-in-print" data-v-98a429fc>INTERACTIVE </span>INVOICE</h1><div class="hide-in-print" style="margin-bottom:10px;" data-v-98a429fc>This page is rendered from a "template" Vue.js component.<br data-v-98a429fc>You can modify the fields highlighted in green and interact with the buttons without having them in the print. Check out <a href="https://github.com/motla/vue-document-editor/blob/master/src/Demo/InvoiceTemplate.ce.vue" target="_blank" data-v-98a429fc>InvoiceTemplate.ce.vue</a></div></div><div data-v-98a429fc><img src="'+x+'" style="width:80px;" data-v-98a429fc></div></div>',1),L=k((()=>(0,s._)("thead",null,[(0,s._)("tr",null,[(0,s._)("td",null,"OUR DETAILS"),(0,s._)("td",{style:{"text-align":"right"}},"INVOICE DETAILS")])],-1))),I=k((()=>(0,s._)("td",{contenteditable:"true"},[(0,s._)("div",null,[(0,s._)("b",null,"MyCompany")]),(0,s._)("div",null,"24 Poazkz Pazoek"),(0,s._)("div",null,"89232 Oijzrazro"),(0,s._)("div",null,"FRIGNEDRY"),(0,s._)("div",null,"AB251648730890")],-1))),z={style:{"min-width":"250px","text-align":"right"}},M=k((()=>(0,s._)("b",null,"Invoice number:",-1))),E=k((()=>(0,s._)("b",null,"Invoice date:",-1))),N=k((()=>(0,s._)("b",null,"Order number:",-1))),A=k((()=>(0,s._)("b",null,"Order date:",-1))),T=k((()=>(0,s._)("b",null,"Your client number:",-1))),P={style:{margin:"10px 0 35px 0"}},R=k((()=>(0,s._)("td",{style:{width:"50%"}},"BILLING ADDRESS",-1))),B={class:"hide-in-print",style:{"margin-left":"10px"}},U=["innerHTML"],S={key:1,contenteditable:"true"},D=k((()=>(0,s._)("h2",null,"Your order",-1))),O={style:{"margin-top":"10px"},class:"order-table"},V=k((()=>(0,s._)("thead",null,[(0,s._)("tr",{style:{"font-size":"13px"}},[(0,s._)("td",null,"ITEM #"),(0,s._)("td",null,"REFERENCE"),(0,s._)("td",null,"DESIGNATION"),(0,s._)("td",null,"QUANTITY"),(0,s._)("td",null,"UNIT PRICE"),(0,s._)("td",{style:{"text-align":"right"}},"TOTAL PRICE")])],-1))),H=["onClick"],W={contenteditable:"true"},Z={contenteditable:"true"},j={style:{padding:"0","text-align":"center"}},Y=["onUpdate:modelValue"],G={style:{padding:"0"}},Q=["onUpdate:modelValue"],q={style:{"text-align":"right"}},J={colspan:"5",style:{"text-align":"right"}},K={colspan:"6",style:{"text-align":"right"}},X={colspan:"6",style:{"text-align":"right"}},F={colspan:"6",style:{"text-align":"right","font-weight":"bold"}},$=k((()=>(0,s._)("div",{style:{"margin-bottom":"20px"}},"Thank you for your order.",-1))),ee=k((()=>(0,s._)("b",null,"Payment method:",-1))),te=k((()=>(0,s._)("b",null,"Payment term:",-1)));function ie(e,t,i,a,o,r){return(0,s.wg)(),(0,s.iD)("div",w,[C,(0,s._)("table",null,[L,(0,s._)("tbody",null,[(0,s._)("tr",null,[I,(0,s._)("td",z,[(0,s._)("div",null,[M,(0,s.Uk)(),(0,s._)("span",{contenteditable:"true",onKeydown:t[0]||(t[0]=(...e)=>r.preventLineBreaks&&r.preventLineBreaks(...e))},(0,l.zw)(i.modelValue.invoice_number),33)]),(0,s._)("div",null,[E,(0,s.Uk)(),(0,s._)("span",{contenteditable:"true",onKeydown:t[1]||(t[1]=(...e)=>r.preventLineBreaks&&r.preventLineBreaks(...e))},(0,l.zw)(r.today),33)]),(0,s._)("div",null,[N,(0,s.Uk)(),(0,s._)("span",{contenteditable:"true",onKeydown:t[2]||(t[2]=(...e)=>r.preventLineBreaks&&r.preventLineBreaks(...e))},"W210984204",32)]),(0,s._)("div",null,[A,(0,s.Uk)(),(0,s._)("span",{contenteditable:"true",onKeydown:t[3]||(t[3]=(...e)=>r.preventLineBreaks&&r.preventLineBreaks(...e))},(0,l.zw)(r.today),33)]),(0,s._)("div",null,[T,(0,s.Uk)(),(0,s._)("span",{contenteditable:"true",onKeydown:t[4]||(t[4]=(...e)=>r.preventLineBreaks&&r.preventLineBreaks(...e))},"120948",32)])])])])]),(0,s._)("table",P,[(0,s._)("thead",null,[(0,s._)("tr",null,[R,(0,s._)("td",null,[(0,s.Uk)("SHIPPING ADDRESS "),(0,s._)("label",B,[(0,s.wy)((0,s._)("input",{type:"checkbox","onUpdate:modelValue":t[5]||(t[5]=e=>o.is_shipping_identical=e)},null,512),[[n.e8,o.is_shipping_identical]]),(0,s.Uk)(" Identical ")])])])]),(0,s._)("tbody",null,[(0,s._)("tr",null,[(0,s._)("td",{ref:"billing_address",contenteditable:"true",onInput:t[6]||(t[6]=e=>this.billing_address=e.target.innerHTML)},null,544),o.is_shipping_identical?((0,s.wg)(),(0,s.iD)("td",{key:0,innerHTML:o.billing_address,contenteditable:"false"},null,8,U)):((0,s.wg)(),(0,s.iD)("td",S,"Insert custom shipping address"))])])]),D,(0,s._)("table",O,[V,(0,s._)("tbody",null,[((0,s.wg)(!0),(0,s.iD)(s.HY,null,(0,s.Ko)(o.items,((e,t)=>((0,s.wg)(),(0,s.iD)("tr",{key:e.key},[(0,s._)("td",null,[(0,s._)("div",{class:"left-btn hide-in-print",onClick:()=>o.items.splice(t,1)},"➖",8,H),(0,s.Uk)((0,l.zw)(t+1),1)]),(0,s._)("td",W,(0,l.zw)(e.ref),1),(0,s._)("td",Z,(0,l.zw)(e.desc),1),(0,s._)("td",j,[(0,s.wy)((0,s._)("input",{type:"number",min:"1",style:{width:"3em"},"onUpdate:modelValue":t=>e.qty=t},null,8,Y),[[n.nr,e.qty]])]),(0,s._)("td",G,[(0,s.Uk)("€ "),(0,s.wy)((0,s._)("input",{type:"number",step:"0.01",style:{width:"4em"},"onUpdate:modelValue":t=>e.price=t},null,8,Q),[[n.nr,e.price]])]),(0,s._)("td",q,"€ "+(0,l.zw)((e.qty*e.price).toFixed(2)),1)])))),128)),(0,s._)("tr",null,[(0,s._)("td",null,[o.items.length<5?((0,s.wg)(),(0,s.iD)("div",{key:0,class:"left-btn hide-in-print",onClick:t[7]||(t[7]=()=>o.items.push({key:Math.random(),ref:"MyRef",desc:"My description",qty:1,price:0}))},"➕")):(0,s.kq)("",!0)]),(0,s._)("td",J,"Sub-total: € "+(0,l.zw)(r.sub_total.toFixed(2)),1)]),(0,s._)("tr",null,[(0,s._)("td",K,[(0,s.Uk)("Taxes: "),(0,s._)("span",{ref:"tax_percent",contenteditable:"true",onInput:t[8]||(t[8]=e=>this.tax_percent=parseFloat(e.target.innerText))},null,544),(0,s.Uk)("%")])]),(0,s._)("tr",null,[(0,s._)("td",X,[(0,s.Uk)("Shipping: € "),(0,s._)("span",{ref:"shipping",contenteditable:"true",onInput:t[9]||(t[9]=e=>this.shipping=parseFloat(e.target.innerText))},null,544)])]),(0,s._)("tr",null,[(0,s._)("td",F,"Order total: € "+(0,l.zw)(r.total.toFixed(2)),1)])])]),$,(0,s._)("div",null,[ee,(0,s.Uk)(),(0,s._)("span",{contenteditable:"true",onKeydown:t[10]||(t[10]=(...e)=>r.preventLineBreaks&&r.preventLineBreaks(...e))},"Bank transfer",32)]),(0,s._)("div",null,[te,(0,s.Uk)(),(0,s._)("span",{contenteditable:"true",onKeydown:t[11]||(t[11]=(...e)=>r.preventLineBreaks&&r.preventLineBreaks(...e))},(0,l.zw)(r.next_month),33)])])}var ne={props:{modelValue:Object},data(){return{is_shipping_identical:!0,billing_address:"<b>M. John Doe</b><br>98 Ooezfjefoi Laozdij<br>09823 Ljeiznr<br>FOPKSOFOF<br>AC310592815039",items:[{key:Math.random(),ref:"X3000",desc:"My great product",qty:1,price:299}],tax_percent:20,shipping:15}},mounted(){this.$refs.billing_address.innerHTML=this.billing_address,this.$refs.tax_percent.innerHTML=this.tax_percent,this.$refs.shipping.innerHTML=this.shipping+".00"},computed:{today(){var e=new Date;return e.toJSON().slice(0,10).replace(/-/g,".")},next_month(){var e=new Date;return e.setDate(e.getDate()+30),e.toJSON().slice(0,10).replace(/-/g,".")},sub_total(){return this.items.reduce(((e,t)=>e+t.qty*t.price),0)},total(){return this.sub_total*(1+this.tax_percent/100)+this.shipping}},methods:{preventLineBreaks(e){13==e.which&&e.preventDefault()}}},se='\ntable[data-v-98a429fc] {\n width: 100%;\n border-spacing: 0;\n}\ntable td[data-v-98a429fc] {\n position: relative;\n padding: 6px;\n vertical-align: top;\n}\ntable.order-table td[data-v-98a429fc] {\n vertical-align: middle;\n}\ntable thead td[data-v-98a429fc] {\n font-weight: bold;\n}\ntable tbody td[data-v-98a429fc] {\n border-top: solid 1px #CCC;\n}\ninput[type=number][data-v-98a429fc] {\n border: none;\n font-family: inherit;\n font-size: inherit;\n color: inherit;\n background: rgba(200, 250, 230, 0.4);\n padding: 6px;\n}\n*[contenteditable="true"][data-v-98a429fc] {\n background: rgba(200, 250, 230, 0.4);\n cursor: text;\n transition: padding 0.05s linear;\n}\nspan[contenteditable="true"][data-v-98a429fc]:focus {\n padding: 0 4px;\n}\n@media print {\n*[contenteditable="true"][data-v-98a429fc], input[data-v-98a429fc] {\n background: none;\n}\n.hide-in-print[data-v-98a429fc] {\n display: none;\n}\ninput[data-v-98a429fc]::-webkit-outer-spin-button,\n input[data-v-98a429fc]::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\ninput[type=number][data-v-98a429fc] {\n -moz-appearance: textfield;\n background: none;\n}\n}\n.header[data-v-98a429fc] {\n display: flex;\n justify-content: space-between;\n margin-bottom: 10px;\n}\n.order[data-v-98a429fc] {\n display: flex;\n justify-content: space-between;\n margin-bottom: 10px;\n}\n.left-btn[data-v-98a429fc] {\n position: absolute;\n left: -40px;\n top: 2px;\n}\n.left-btn[data-v-98a429fc]:hover {\n opacity: 0.6;\n}\n';const ae=(0,y.Z)(ne,[["render",ie],["styles",[se]],["__scopeId","data-v-98a429fc"]]);var oe=ae,re=i(2262),le={components:{VueDocumentEditor:v,VueFileToolbarMenu:r.Z},data(){return{content:['<h1>Hello world!</h1><p>This is a rich-text editor built on top of <span contenteditable="false"><a href="https://vuejs.org/" target="_blank">Vue.js</a></span> using the native <span contenteditable="false"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content" target="_blank"><i>contenteditable</i></a></span> browser implementation and some JavaScript trickery to spread content over paper-sized pages.</p><p>Built-in functionality includes:</p><ul><li>Using Vue.js components as interactive page templates (see next page)</li><li>Word-by-word page splitting (<u>still experimental - only for plain HTML content</u>)</li><li>Native Print compatible</li><li>Dynamic document format and margins in millimeters</li><li>Custom page overlays (headers, footers, page numbers)</li><li>Page breaks</li><li>Smart zoom and page display modes</li><li>Computes text style at caret position</li></ul><p>This library may be useful if you design an application that generate documents and you would let the user to modify them slightly before printing / saving, but with limited / interactive possibilities. It does not intend to replace a proper document editor with full functionality.<br>Make sure this project is suitable to your needs before using it.</p><p>This demo adds:</p><ul><li>The top bar (<span contenteditable="false"><a href="https://github.com/motla/vue-file-toolbar-menu" target="_blank">vue-file-toolbar-menu</a></span> component) and the functions associated with it</li><li>Rewritten history stack (undo/redo) compatible with native commands</li><li>Pinch and trackpad zooming</li></ul><p>Check out the <span contenteditable="false"><a href="https://github.com/motla/vue-document-editor/blob/master/src/Demo/Demo.vue" target="_blank">Demo.vue</a></span> file if you need to add these functionalities to your application.</p><p>The link below is an example of non-editable block set with <code>contenteditable="false"</code>:</p><p style="text-align:center" contenteditable="false"><a href="https://github.com/motla/vue-document-editor">View docs on Github</a>, you can\'t edit me.</p><p>But you can still edit this.</p>',{template:(0,re.Xl)(oe),props:{invoice_number:"AB38052985"}},'<br><br><h1>Headers / footers example</h1><br>Page numbers have been added on every page of this document.<br>Header and footer overlays will be added from page 3 to all subsequent ones.<br><br>Check out the <code>overlay</code> method of the <span contenteditable="false"><a href="https://github.com/motla/vue-document-editor/blob/master/src/Demo/Demo.vue" target="_blank">Demo.vue</a></span> file to customize this.','<h1>«</h1><div style="width:80%; text-align:justify; margin:auto"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p><p>Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.</p><p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p><p>Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.</p><p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.</p></div><h1 style="text-align:right">»</h1>','<h3 style="text-align:center">--- This is a page break. ---</h3>'],zoom:.8,zoom_min:.1,zoom_max:5,page_format_mm:[210,297],page_margins:"10mm 15mm",display:"grid",mounted:!1,undo_count:-1,content_history:[]}},created(){let e=!1,t=!1,i=!1;window.addEventListener("wheel",(e=>{e.ctrlKey&&(e.preventDefault(),this.zoom=Math.min(Math.max(this.zoom-.01*e.deltaY,this.zoom_min),this.zoom_max))}),{passive:!1}),window.addEventListener("gesturestart",(t=>{t.preventDefault(),e=this.zoom})),window.addEventListener("gesturechange",(t=>{t.preventDefault(),i||(this.zoom=Math.min(Math.max(e*t.scale,this.zoom_min),this.zoom_max))})),window.addEventListener("gestureend",(()=>{e=!1})),window.addEventListener("touchstart",(e=>{2==e.touches.length&&(e.preventDefault(),t=Math.hypot(e.touches[0].pageX-e.touches[1].pageX,e.touches[0].pageY-e.touches[1].pageY),i=this.zoom)}),{passive:!1}),window.addEventListener("touchmove",(e=>{if(t&&i){e.preventDefault();let n=i*Math.hypot(e.touches[0].pageX-e.touches[1].pageX,e.touches[0].pageY-e.touches[1].pageY)/t;this.zoom=Math.min(Math.max(n,this.zoom_min),this.zoom_max)}}),{passive:!1}),window.addEventListener("touchend",(()=>{t=!1,i=!1}),{passive:!1});const n=e=>{switch(e&&e.inputType){case"historyUndo":e.preventDefault(),e.stopPropagation(),this.undo();break;case"historyRedo":e.preventDefault(),e.stopPropagation(),this.redo();break}};window.addEventListener("beforeinput",n),window.addEventListener("input",n)},mounted(){this.mounted=!0},computed:{menu(){return[{text:"New",title:"New",icon:"description",click:()=>{confirm("This will create an empty document. Are you sure?")&&(this.content=[""],this.resetContentHistory())}},{text:"Print",title:"Print",icon:"print",click:()=>window.print()},{is:"spacer"},{title:"Undo",icon:"undo",disabled:!this.can_undo,hotkey:this.isMacLike?"command+z":"ctrl+z",click:()=>this.undo()},{title:"Redo",icon:"redo",disabled:!this.can_redo,hotkey:this.isMacLike?"shift+command+z":"ctrl+y",click:()=>this.redo()},{is:"spacer"},{icon:"format_align_left",title:"Align left",active:this.isLeftAligned,disabled:!this.current_text_style,hotkey:this.isMacLike?"shift+command+l":"ctrl+shift+l",click:()=>document.execCommand("justifyLeft")},{icon:"format_align_center",title:"Align center",active:this.isCentered,disabled:!this.current_text_style,hotkey:this.isMacLike?"shift+command+e":"ctrl+shift+e",click:()=>document.execCommand("justifyCenter")},{icon:"format_align_right",title:"Align right",active:this.isRightAligned,disabled:!this.current_text_style,hotkey:this.isMacLike?"shift+command+r":"ctrl+shift+r",click:()=>document.execCommand("justifyRight")},{icon:"format_align_justify",title:"Justify content",active:this.isJustified,disabled:!this.current_text_style,hotkey:this.isMacLike?"shift+command+j":"ctrl+shift+j",click:()=>document.execCommand("justifyFull")},{is:"separator"},{icon:"format_bold",title:"Bold",active:this.isBold,disabled:!this.current_text_style,hotkey:this.isMacLike?"command+b":"ctrl+b",click:()=>document.execCommand("bold")},{icon:"format_italic",title:"Italic",active:this.isItalic,disabled:!this.current_text_style,hotkey:this.isMacLike?"command+i":"ctrl+i",click:()=>document.execCommand("italic")},{icon:"format_underline",title:"Underline",active:this.isUnderline,disabled:!this.current_text_style,hotkey:this.isMacLike?"command+u":"ctrl+u",click:()=>document.execCommand("underline")},{icon:"format_strikethrough",title:"Strike through",active:this.isStrikeThrough,disabled:!this.current_text_style,click:()=>document.execCommand("strikethrough")},{is:"button-color",type:"compact",menu_class:"align-center",disabled:!this.current_text_style,color:this.curColor,update_color:e=>document.execCommand("foreColor",!1,e.hex8)},{is:"separator"},{icon:"format_list_numbered",title:"Numbered list",active:this.isNumberedList,disabled:!this.current_text_style,click:()=>document.execCommand("insertOrderedList")},{icon:"format_list_bulleted",title:"Bulleted list",active:this.isBulletedList,disabled:!this.current_text_style,click:()=>document.execCommand("insertUnorderedList")},{html:"<b>H1</b>",title:"Header 1",active:this.isH1,disabled:!this.current_text_style,click:()=>document.execCommand("formatBlock",!1,"<h1>")},{html:"<b>H2</b>",title:"Header 2",active:this.isH2,disabled:!this.current_text_style,click:()=>document.execCommand("formatBlock",!1,"<h2>")},{html:"<b>H3</b>",title:"Header 3",active:this.isH3,disabled:!this.current_text_style,click:()=>document.execCommand("formatBlock",!1,"<h3>")},{icon:"format_clear",title:"Clear format",disabled:!this.current_text_style,click(){document.execCommand("removeFormat"),document.execCommand("formatBlock",!1,"<div>")}},{icon:"splitscreen",title:"Page break",disabled:!this.current_text_style,click:()=>this.insertPageBreak()},{is:"spacer"},{text:this.current_format_name,title:"Format",icon:"crop_free",chevron:!0,menu:this.formats.map((([e,t,i])=>({text:e,active:this.page_format_mm[0]==t&&this.page_format_mm[1]==i,click:()=>{this.page_format_mm=[t,i]}}))),menu_width:80,menu_height:280},{text:this.current_margins_name,title:"Margins",icon:"select_all",chevron:!0,menu:this.margins.map((([e,t])=>({text:e+" ("+t+")",active:this.page_margins==t,click:()=>{this.page_margins=t}}))),menu_width:200,menu_class:"align-center"},{text:Math.floor(100*this.zoom)+"%",title:"Zoom",icon:"zoom_in",chevron:!0,menu:[["200%",2],["150%",1.5],["125%",1.25],["100%",1],["75%",.75],["50%",.5],["25%",.25]].map((([e,t])=>({text:e,active:this.zoom==t,click:()=>{this.zoom=t}}))),menu_width:80,menu_height:280,menu_class:"align-center"},{title:"Display",icon:"horizontal"==this.display?"view_column":"vertical"==this.display?"view_stream":"view_module",chevron:!0,menu:[{icon:"view_module",active:"grid"==this.display,click:()=>{this.display="grid"}},{icon:"view_column",active:"horizontal"==this.display,click:()=>{this.display="horizontal"}},{icon:"view_stream",active:"vertical"==this.display,click:()=>{this.display="vertical"}}],menu_width:55,menu_class:"align-right"}]},current_format_name(){const e=this.formats.find((([,e,t])=>this.page_format_mm[0]==e&&this.page_format_mm[1]==t));return e?e[0]:this.page_format_mm[0]+"mm x "+this.page_format_mm[1]+"mm"},formats:()=>[["A0",841,1189],["A0L",1189,841],["A1",594,841],["A1L",841,594],["A2",420,594],["A2L",594,420],["A3",297,420],["A3L",420,297],["A4",210,297],["A4L",297,210],["A5",148,210],["A5L",210,148],["A6",105,148],["A6L",148,105]],current_margins_name(){const e=this.margins.find((([,e])=>this.page_margins==e));return e?e[0]:this.page_margins},margins:()=>[["Medium","20mm"],["Small","15mm"],["Slim","10mm 15mm"],["Tiny","5mm"]],current_text_style(){return!!this.mounted&&this.$refs.editor.current_text_style},isLeftAligned(){return["start","left","-moz-left"].includes(this.current_text_style.textAlign)},isRightAligned(){return["end","right","-moz-right"].includes(this.current_text_style.textAlign)},isCentered(){return["center","-moz-center"].includes(this.current_text_style.textAlign)},isJustified(){return["justify","justify-all"].includes(this.current_text_style.textAlign)},isBold(){const e=this.current_text_style.fontWeight;return e&&(parseInt(e)>400||0==e.indexOf("bold"))},isItalic(){return"italic"==this.current_text_style.fontStyle},isUnderline(){const e=this.current_text_style.textDecorationStack;return e&&e.some((e=>0==e.indexOf("underline")))},isStrikeThrough(){const e=this.current_text_style.textDecorationStack;return e&&e.some((e=>0==e.indexOf("line-through")))},isNumberedList(){return this.current_text_style.isList&&"decimal"==this.current_text_style.listStyleType},isBulletedList(){return this.current_text_style.isList&&["disc","circle"].includes(this.current_text_style.listStyleType)},isH1(){return 1==this.current_text_style.headerLevel},isH2(){return 2==this.current_text_style.headerLevel},isH3(){return 3==this.current_text_style.headerLevel},curColor(){return this.current_text_style.color||"transparent"},isMacLike:()=>/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform),can_undo(){return this.undo_count>0},can_redo(){return this.content_history.length-this.undo_count-1>0}},methods:{overlay(e,t){let i='<div style="position: absolute; bottom: 8mm; '+(e%2?"right":"left")+': 10mm">Page '+e+" of "+t+"</div>";return e>=3&&(i+='<div style="position: absolute; left: 0; top: 0; right: 0; padding: 3mm 5mm; background: rgba(200, 220, 240, 0.5)"><strong>MYCOMPANY</strong> example.com /// This is a custom header overlay</div>',i+='<div style="position: absolute; left: 10mm; right: 10mm; bottom: 5mm; text-align:center; font-size:10pt">MY COMPANY - example.com /// This is a custom footer overlay</div>'),i},undo(){this.can_undo&&(this._mute_next_content_watcher=!0,this.content=this.content_history[--this.undo_count])},redo(){this.can_redo&&(this._mute_next_content_watcher=!0,this.content=this.content_history[++this.undo_count])},resetContentHistory(){this.content_history=[],this.undo_count=-1},async insertPageBreak(){document.execCommand("insertParagraph");const e="###PB###";document.execCommand("insertText",!1,e),await this.$nextTick(),await this.$nextTick();const t=new RegExp("<(p|div|h\\d)( [^/>]+)*>(<[^/>]+>)*"+e);for(let i=0;i<this.content.length;i++){const n=this.content[i];if("string"!=typeof n)continue;const s=t.exec(n);if(s){const t=s[0].slice(0,-e.length);let a=n.substr(s.index+s[0].length);return 0==a.indexOf("</")&&(a="<br>"+a),void this.content.splice(i,1,n.substr(0,s.index),t+a)}}for(let i=0;i<this.content.length;i++){const t=this.content[i];if(!("string"!=typeof t||t.indexOf(e)<0)){this.content.splice(i,1,t.replace(e,""));break}}}},watch:{content:{immediate:!0,handler(e){this._mute_next_content_watcher||(this.content_history[++this.undo_count]=e,this.content_history.length=this.undo_count+1),this._mute_next_content_watcher=!1}}}};const ce=(0,y.Z)(le,[["render",o],["__scopeId","data-v-d2c209e0"]]);var de=ce;const ue=(0,n.ri)(de);ue.config.devtools=!0,ue.mount("#app")}},t={};function i(n){var s=t[n];if(void 0!==s)return s.exports;var a=t[n]={exports:{}};return e[n].call(a.exports,a,a.exports,i),a.exports}i.m=e,function(){var e=[];i.O=function(t,n,s,a){if(!n){var o=1/0;for(d=0;d<e.length;d++){n=e[d][0],s=e[d][1],a=e[d][2];for(var r=!0,l=0;l<n.length;l++)(!1&a||o>=a)&&Object.keys(i.O).every((function(e){return i.O[e](n[l])}))?n.splice(l--,1):(r=!1,a<o&&(o=a));if(r){e.splice(d--,1);var c=s();void 0!==c&&(t=c)}}return t}a=a||0;for(var d=e.length;d>0&&e[d-1][2]>a;d--)e[d]=e[d-1];e[d]=[n,s,a]}}(),function(){i.d=function(e,t){for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})}}(),function(){i.g=function(){if("object"===typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"===typeof window)return window}}()}(),function(){i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}}(),function(){i.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}}(),function(){var e={143:0};i.O.j=function(t){return 0===e[t]};var t=function(t,n){var s,a,o=n[0],r=n[1],l=n[2],c=0;if(o.some((function(t){return 0!==e[t]}))){for(s in r)i.o(r,s)&&(i.m[s]=r[s]);if(l)var d=l(i)}for(t&&t(n);c<o.length;c++)a=o[c],i.o(e,a)&&e[a]&&e[a][0](),e[a]=0;return i.O(d)},n=self["webpackChunkvue_document_editor"]=self["webpackChunkvue_document_editor"]||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}();var n=i.O(void 0,[998],(function(){return i(8449)}));n=i.O(n)})();
//# sourceMappingURL=app.c7c9ff63.js.map