").append('")),this.$cn.append(this.$header),this.$cn2.append('
').concat(n.t("traitManager.label"),"
")),this.$cn2.append(a.render().el);var l=t.Panels;(l.getPanel("views-container")?l.getPanel("views-container"):l.addPanel({id:"views-container"})).set("appendContent",this.$cn.get(0)).trigger("change:appendContent"),this.target=t.getModel(),this.listenTo(this.target,"component:toggled",this.toggleTm)}this.toggleTm()},toggleTm:function(){var t=this.sender;t&&t.get&&!t.get("active")||(1===this.target.getSelectedAll().length?(this.$cn2.show(),this.$header.hide()):(this.$cn2.hide(),this.$header.show()))},stop:function(){this.$cn2&&this.$cn2.hide(),this.$header&&this.$header.hide()}}},function(t,e,n){"use strict";n.r(e);var r=n(0);e.default={run:function(t){var e=t.getModel().get("clipboard"),n=t.getSelected();e&&n&&(t.getSelectedAll().forEach(function(n){if(n){var i,o=n.collection,a=o.indexOf(n)+1,s=e.filter(function(t){return t.get("copyable")});i=Object(r.contains)(e,n)&&n.get("copyable")?o.add(n.clone(),{at:a}):o.add(s.map(function(t){return t.clone()}),{at:a}),(i=Object(r.isArray)(i)?i:[i]).forEach(function(e){return t.trigger("component:paste",e)})}}),n.emitUpdate())}}},function(t,e,n){"use strict";n.r(e);var r=n(7),i=n.n(r),o=n(0),a="sw-visibility";e.default={getPanels:function(t){return this.panels||(this.panels=t.Panels.getPanels()),this.panels},preventDrag:function(t){t.abort=1},tglEffects:function(t){var e=this.em,n=t?"on":"off";if(e){var r=e.get("Canvas"),i=r.getBody(),a=r.getToolbarEl();a&&(a.style.display=t?"none":"");var s=i.querySelectorAll(".".concat(this.ppfx,"no-pointer"));Object(o.each)(s,function(e){return e.style.pointerEvents=t?"all":""}),e[n]("run:tlb-move:before",this.preventDrag)}},run:function(t,e){var n=this;this.sender=e,this.selected=i()(t.getSelectedAll()),t.select(),this.shouldRunSwVisibility||(this.shouldRunSwVisibility=t.Commands.isActive(a)),this.shouldRunSwVisibility&&t.stopCommand(a),t.getModel().stopDefault();var r=this.getPanels(t),o=t.Canvas.getElement(),s=t.getEl(),l=t.Config.stylePrefix;if(!this.helper){var c=document.createElement("span");c.className="".concat(l,"off-prv fa fa-eye-slash"),s.appendChild(c),c.onclick=function(){return n.stopCommand()},this.helper=c}this.helper.style.display="inline-block",r.forEach(function(t){return t.set("visible",!1)});var u=o.style;u.width="100%",u.height="100%",u.top="0",u.left="0",u.padding="0",u.margin="0",t.refresh(),this.tglEffects(1)},stop:function(t){var e=this.sender,n=void 0===e?{}:e,r=this.selected;n.set&&n.set("active",0);var i=this.getPanels(t);this.shouldRunSwVisibility&&(t.runCommand(a),this.shouldRunSwVisibility=!1),t.getModel().runDefault(),i.forEach(function(t){return t.set("visible",!0)}),t.Canvas.getElement().setAttribute("style",""),r&&t.select(r),delete this.selected,this.helper&&(this.helper.style.display="none"),t.refresh(),this.tglEffects()}}},function(t,e,n){"use strict";n.r(e),e.default={run:function(t,e,n){var r=n||{},i=r.el||"",o=t.Canvas,a=this.canvasResizer,s=r.options||{},l=o.getCanvasView();return s.appendTo=o.getResizerEl(),s.prefix=t.getConfig().stylePrefix,s.posFetcher=l.getElementPos.bind(l),s.mousePosFetcher=o.getMouseRelativePos,a&&!r.forceNew||(this.canvasResizer=t.Utils.Resizer.init(s),a=this.canvasResizer),a.setOptions(s),a.blur(),a.focus(i),a},stop:function(){var t=this.canvasResizer;t&&t.blur()}}},function(t,e,n){"use strict";n.r(e);var r=n(2),i=n.n(r),o=n(1),a=n.n(o),s=n(0),l=n(3);function c(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n.push.apply(n,r)}return n}var u=a.a.$;e.default={getOffsetMethod:function(t){return"get"+(t||"")+"OffsetViewerEl"},run:function(t,e,n){var r=n||{},o=r.state||"",a=t.getConfig(),d=this.em.getZoomDecimal(),h=r.el||"";if(!a.showOffsets||Object(l.r)(h)||!a.showOffsetsSelected&&"Fixed"==o)t.stopCommand(this.id,n);else{var f=t.Canvas,p=function(t){for(var e=1;e
')).get(0),D=u('')).get(0),A=v+E+"-el",L="".concat(v+P+"-el"," ").concat(v+P),_="".concat(A," ").concat(v+E);y=u('
')).get(0),w=u('
')).get(0),x=u('
')).get(0),O=u('
')).get(0),C=u('
')).get(0),S=u('
')).get(0),k=u('
')).get(0),j=u('
')).get(0),this["marginT"+o]=y,this["marginB"+o]=w,this["marginL"+o]=x,this["marginR"+o]=O,this["padT"+o]=C,this["padB"+o]=S,this["padL"+o]=k,this["padR"+o]=j,M.appendChild(y),M.appendChild(w),M.appendChild(x),M.appendChild(O),D.appendChild(C),D.appendChild(S),D.appendChild(k),D.appendChild(j),b.appendChild(M),b.appendChild(D),this[m]="1"}var N="px",I=parseFloat(g.marginLeft.replace(N,""))*d,F=parseFloat(g.marginRight.replace(N,""))*d,V=parseFloat(g.marginTop.replace(N,""))*d,R=parseFloat(g.marginBottom.replace(N,""))*d,z=y.style,H=w.style,$=x.style,U=O.style,B=C.style,W=S.style,q=k.style,G=j.style,K=parseFloat(p.left),Y=parseFloat(g.width)*d+N;z.height=V+N,z.width=Y,z.top=p.top-V+N,z.left=K+N,H.height=R+N,H.width=Y,H.top=p.top+p.height+N,H.left=K+N;var X=p.height+V+R+N,J=p.top-V+N;$.height=X,$.width=I+N,$.top=J,$.left=K-I+N,U.height=X,U.width=F+N,U.top=J,U.left=K+p.width+N;var Z=parseFloat(g.paddingTop)*d;B.height=Z+N;var Q=parseFloat(g.paddingBottom)*d;W.height=Q+N;var tt=p.height-Q-Z+N,et=p.top+Z+N;q.height=tt,q.width=parseFloat(g.paddingLeft)*d+N,q.top=et;var nt=parseFloat(g.paddingRight)*d;G.height=tt,G.width=nt+N,G.top=et}},stop:function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=(n||{}).state||"",i=this.getOffsetMethod(r);t.Canvas[i](n.view).style.opacity=0}}},function(t,e,n){"use strict";n.r(e),e.default={run:function(t){this.toggleVis(t)},stop:function(t){this.toggleVis(t,0)},toggleVis:function(t){var e=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;if(!t.Commands.isActive("preview")){var r=n?"add":"remove";t.Canvas.getFrames().forEach(function(t){t.view.getBody().classList[r]("".concat(e.ppfx,"dashed"))})}}}},function(t,e,n){"use strict";n.r(e);var r=n(2),i=n.n(r),o={stylePrefix:"",appendTo:"",sortable:1,hidable:1,hideTextnode:1,root:"",showWrapper:1,showHover:1,scrollCanvas:{behavior:"smooth",block:"nearest"},scrollLayers:{behavior:"auto",block:"nearest"},highlightHover:1,onInit:function(){},onRender:function(){}},a=n(36),s=n(0);function l(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n.push.apply(n,r)}return n}function c(t){for(var e=1;e
0&&void 0!==arguments[0]?arguments[0]:{};return(n=c(c({},o),e)).stylePrefix=e.pStylePrefix,t=n.em,this},getConfig:function(){return n},onLoad:function(){e=new a.a({level:0,config:n,opened:n.opened||{},model:t.get("DomComponents").getWrapper()}),t&&t.on("component:selected",this.componentChanged),this.componentChanged()},postRender:function(){var t=n.appendTo,e=n.root;e&&this.setRoot(e),t&&(Object(s.isElement)(t)?t:document.querySelector(t)).appendChild(this.render())},setRoot:function(t){return e.setRoot(t),this},getRoot:function(){return e.model},getAll:function(){return e},componentChanged:function(e){if(!(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).fromLayers){var r=t.get("opened"),i=t.getSelected(),o=n.scrollLayers,a=i&&i.collection?i.collection.parent:null;for(var s in r)r[s].set("open",0);for(;a;)a.set("open",1),r[a.cid]=a,a=a.collection?a.collection.parent:null;if(i&&o){var l=i.viewLayer&&i.viewLayer.el;l&&l.scrollIntoView(o)}}},render:function(){return e.render().el},destroy:function(){e&&e.remove(),[t,e,n].forEach(function(t){return{}})}}}},function(t,e,n){var r,i,o;i=[n(0),n(1)],void 0===(o="function"==typeof(r=function(t,e){var n=Array.prototype.slice;function r(t,e,n){return n.length<=4?t.call(e,n[0],n[1],n[2],n[3]):t.apply(e,n)}function i(t,e){return n.call(t,e)}function o(e,n){return null!=e&&(t.isArray(n)||(n=i(arguments,1)),t.all(n,function(t){return t in e}))}var a,s,l=(a=!1,s=-1,function(){return a||(s++,a=!0,t.defer(function(){a=!1})),s});function c(){this.registeredObjects=[],this.cidIndexes=[]}function u(e,n,r,i){for(var o,a=0,s=n.length;aa.length?t.each(i,function(t){t in o||s.before.push(t)},this):t.each(a,function(t){t in r||s.after.push(t)})),{object:e,before:o,after:r,options:t.clone(n)}}},reset:{undo:function(t,e,n){t.reset(e)},redo:function(t,e,n){t.reset(n)},on:function(e,n){return{object:e,before:n.previousModels,after:t.clone(e.models)}}}};function p(){}function g(e,n,r,i){if("object"==typeof n)return t.each(n,function(t,n){2===e?g(e,t,r,i):g(e,n,t,r)});switch(e){case 0:o(r,"undo","redo","on")&&t.all(t.pick(r,"undo","redo","on"),t.isFunction)&&(i[n]=r);break;case 1:i[n]&&t.isObject(r)&&(i[n]=t.extend({},i[n],r));break;case 2:delete i[n]}return this}p.prototype=f;var v=e.Model.extend({defaults:{type:null,object:null,before:null,after:null,magicFusionIndex:null},undo:function(t){d("undo",this.attributes)},redo:function(t){d("redo",this.attributes)}}),m=e.Collection.extend({model:v,pointer:-1,track:!1,isCurrentlyUndoRedoing:!1,maximumStackLength:1/0,setMaxLength:function(t){this.maximumStackLength=t}}),b=e.Model.extend({defaults:{maximumStackLength:1/0,track:!1},initialize:function(e){this.stack=new m,this.objectRegistry=new c,this.undoTypes=new p,this.stack.setMaxLength(this.get("maximumStackLength")),this.on("change:maximumStackLength",function(t,e){this.stack.setMaxLength(e)},this),e&&e.track&&this.startTracking(),e&&e.register&&(t.isArray(e.register)||t.isArguments(e.register)?r(this.register,this,e.register):this.register(e.register))},startTracking:function(){this.set("track",!0),this.stack.track=!0},stopTracking:function(){this.set("track",!1),this.stack.track=!1},isTracking:function(){return this.get("track")},_addToStack:function(t){!function(t,e,n,i){if(t.track&&!t.isCurrentlyUndoRedoing&&e in i&&function(t,e){var n=t.condition,i=typeof n;return"function"===i?!!r(n,t,e):"boolean"!==i||n}(i[e],n)){var a=r(i[e].on,i[e],n);if(o(a,"object","before","after")){if(a.type=e,a.magicFusionIndex=l(),a.undoTypes=i,t.pointert.maximumStackLength&&(t.shift(),t.pointer--)}}}(this.stack,t,i(arguments,1),this.undoTypes)},register:function(){u("on",arguments,this._addToStack,this)},unregister:function(){u("off",arguments,this._addToStack,this)},unregisterAll:function(){r(this.unregister,this,this.objectRegistry.get())},undo:function(t){h("undo",this,this.stack,t)},undoAll:function(){h("undo",this,this.stack,!1,!0)},redo:function(t){h("redo",this,this.stack,t)},redoAll:function(){h("redo",this,this.stack,!1,!0)},isAvailable:function(t){var e=this.stack,n=e.length;switch(t){case"undo":return n>0&&e.pointer>-1;case"redo":return n>0&&e.pointer0&&void 0!==arguments[0]?arguments[0]:{};return e=d(d({},r),n),t=e.em,this.em=t,this},onLoad:function(){var t=e.defaults;for(var n in t){var r=t[n];this.add(n,r.keys,r.handler,r.opts||{})}},add:function(t,e,r){var o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},a=this.em,l=a.get("Commands"),u=a.getEditor(),d=a.get("Canvas"),h={id:t,keys:e,handler:r};return n[t]&&this.remove(t),n[t]=h,c()(e,function(e,n){var c={event:e,h:n};if(r=Object(s.isString)(r)?l.get(r):r,!a.isEditing()&&!u.Canvas.isInputFocused()||o.force){o.prevent&&d.getCanvasView().preventDefault(e),"object"==i()(r)?l.runCommand(r,c):r(u,0,c);var h=[t,n.shortcut,e];a.trigger.apply(a,["keymap:emit"].concat(h)),a.trigger.apply(a,["keymap:emit:".concat(t)].concat(h))}}),a.trigger("keymap:add",h),h},get:function(t){return n[t]},getAll:function(){return n},remove:function(t){var e=this.em,r=this.get(t);if(r)return delete n[t],r.keys.split(", ").forEach(function(t){return c.a.unbind(t.trim())}),e&&e.trigger("keymap:remove",r),r},removeAll:function(){var t=this;return Object.keys(n).forEach(function(e){return t.remove(e)}),this},destroy:function(){this.removeAll(),[t,e,n].forEach(function(t){return{}}),this.em={}}}}},function(t,e,n){"use strict";n.r(e);var r=n(2),i=n.n(r),o=n(70),a=n.n(o);function s(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n.push.apply(n,r)}return n}function l(t){for(var e=1;e0&&void 0!==arguments[0]?arguments[0]:{};n=l(l({},s),i),t=n.em,this.em=t,(e=new a.a(l({track:!0,register:[]},n))).changeUndoType("change",{condition:!1}),e.changeUndoType("add",{on:function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(!o(n))return{object:e,before:void 0,after:t,options:l({},n)}}}),e.changeUndoType("remove",{on:function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(!o(n))return{object:e,before:t,after:void 0,options:l({},n)}}});var c={on:function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(!r&&(r=t.previousAttributes()),!o(n)){var i={object:t,before:r,after:t.toJSON({keepSymbols:1})};return r=null,i}},undo:function(t,e,n,r){t.set(e)},redo:function(t,e,n,r){t.set(n)}};return["style","attributes","content","src"].forEach(function(t){return e.addUndoType("change:".concat(t),c)}),e.on("undo redo",function(){return t.trigger("component:toggled change:canvasOffset")}),["undo","redo"].forEach(function(n){return e.on(n,function(){return t.trigger(n)})}),this},getConfig:function(){return n},add:function(t){return e.register(t),this},remove:function(t){return e.unregister(t),this},removeAll:function(){return e.unregisterAll(),this},start:function(){return e.startTracking(),this},stop:function(){return e.stopTracking(),this},undo:function(){var n=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];return!t.isEditing()&&e.undo(n),this},undoAll:function(){return e.undoAll(),this},redo:function(){var n=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];return!t.isEditing()&&e.redo(n),this},redoAll:function(){return e.redoAll(),this},hasUndo:function(){return e.isAvailable("undo")},hasRedo:function(){return e.isAvailable("redo")},getStack:function(){return e.stack},getStackGroup:function(){var t=[],e=[];return this.getStack().forEach(function(n){var r=n.get("magicFusionIndex");e.indexOf(r)<0&&(e.push(r),t.push(n))}),t},getPointer:function(){return this.getStack().pointer},clear:function(){return e.clear(),this},getInstance:function(){return e},destroy:function(){this.clear().removeAll(),[t,e,n,r].forEach(function(t){return{}}),this.em={}}}}},function(t,e,n){(function(t){var r=void 0!==t&&t||"undefined"!=typeof self&&self||window,i=Function.prototype.apply;function o(t,e){this._id=t,this._clearFn=e}e.setTimeout=function(){return new o(i.call(setTimeout,r,arguments),clearTimeout)},e.setInterval=function(){return new o(i.call(setInterval,r,arguments),clearInterval)},e.clearTimeout=e.clearInterval=function(t){t&&t.close()},o.prototype.unref=o.prototype.ref=function(){},o.prototype.close=function(){this._clearFn.call(r,this._id)},e.enroll=function(t,e){clearTimeout(t._idleTimeoutId),t._idleTimeout=e},e.unenroll=function(t){clearTimeout(t._idleTimeoutId),t._idleTimeout=-1},e._unrefActive=e.active=function(t){clearTimeout(t._idleTimeoutId);var e=t._idleTimeout;e>=0&&(t._idleTimeoutId=setTimeout(function(){t._onTimeout&&t._onTimeout()},e))},n(80),e.setImmediate="undefined"!=typeof self&&self.setImmediate||void 0!==t&&t.setImmediate||this&&this.setImmediate,e.clearImmediate="undefined"!=typeof self&&self.clearImmediate||void 0!==t&&t.clearImmediate||this&&this.clearImmediate}).call(this,n(26))},function(t,e,n){(function(t,e){!function(t,n){"use strict";if(!t.setImmediate){var r,i,o,a,s,l=1,c={},u=!1,d=t.document,h=Object.getPrototypeOf&&Object.getPrototypeOf(t);h=h&&h.setTimeout?h:t,"[object process]"==={}.toString.call(t.process)?r=function(t){e.nextTick(function(){p(t)})}:function(){if(t.postMessage&&!t.importScripts){var e=!0,n=t.onmessage;return t.onmessage=function(){e=!1},t.postMessage("","*"),t.onmessage=n,e}}()?(a="setImmediate$"+Math.random()+"$",s=function(e){e.source===t&&"string"==typeof e.data&&0===e.data.indexOf(a)&&p(+e.data.slice(a.length))},t.addEventListener?t.addEventListener("message",s,!1):t.attachEvent("onmessage",s),r=function(e){t.postMessage(a+e,"*")}):t.MessageChannel?((o=new MessageChannel).port1.onmessage=function(t){p(t.data)},r=function(t){o.port2.postMessage(t)}):d&&"onreadystatechange"in d.createElement("script")?(i=d.documentElement,r=function(t){var e=d.createElement("script");e.onreadystatechange=function(){p(t),e.onreadystatechange=null,i.removeChild(e),e=null},i.appendChild(e)}):r=function(t){setTimeout(p,0,t)},h.setImmediate=function(t){"function"!=typeof t&&(t=new Function(""+t));for(var e=new Array(arguments.length-1),n=0;n1)for(var n=1;n=0||(i[n]=t[n]);return i}},function(t,e,n){!function(t){"use strict";var e={script:[["lang",/(javascript|babel)/i,"javascript"],["type",/^(?:text|application)\/(?:x-)?(?:java|ecma)script$|^module$|^$/i,"javascript"],["type",/./,"text/plain"],[null,null,"javascript"]],style:[["lang",/^css$/i,"css"],["type",/^(text\/)?(x-)?(stylesheet|css)$/i,"css"],["type",/./,"text/plain"],[null,null,"css"]]},n={};function r(t,e){var r=t.match(function(t){return n[t]||(n[t]=new RegExp("\\s+"+t+"\\s*=\\s*('|\")?([^'\"]+)('|\")?\\s*"))}(e));return r?/^\s*(.*?)\s*$/.exec(r[2])[1]:""}function i(t,e){return new RegExp((e?"^":"")+" ","i")}function o(t,e){for(var n in t)for(var r=e[n]||(e[n]=[]),i=t[n],o=i.length-1;o>=0;o--)r.unshift(i[o])}t.defineMode("htmlmixed",function(n,a){var s=t.getMode(n,{name:"xml",htmlMode:!0,multilineTagIndentFactor:a.multilineTagIndentFactor,multilineTagIndentPastTag:a.multilineTagIndentPastTag,allowMissingTagName:a.allowMissingTagName}),l={},c=a&&a.tags,u=a&&a.scriptTypes;if(o(e,l),c&&o(c,l),u)for(var d=u.length-1;d>=0;d--)l.script.unshift(["type",u[d].matches,u[d].mode]);function h(e,o){var a,c=s.token(e,o.htmlState),u=/\btag\b/.test(c);if(u&&!/[<>\s\/]/.test(e.current())&&(a=o.htmlState.tagName&&o.htmlState.tagName.toLowerCase())&&l.hasOwnProperty(a))o.inTag=a+" ";else if(o.inTag&&u&&/>$/.test(e.current())){var d=/^([\S]+) (.*)/.exec(o.inTag);o.inTag=null;var f=">"==e.current()&&function(t,e){for(var n=0;n-1?t.backUp(r.length-i):r.match(/<\/?$/)&&(t.backUp(r.length),t.match(e,!1)||t.match(r)),n}(t,v,e.localMode.token(t,e.localState))},o.localMode=p,o.localState=t.startState(p,s.indent(o.htmlState,"",""))}else o.inTag&&(o.inTag+=e.current(),e.eol()&&(o.inTag+=" "));return c}return{startState:function(){return{token:h,inTag:null,localMode:null,localState:null,htmlState:t.startState(s)}},copyState:function(e){var n;return e.localState&&(n=t.copyState(e.localMode,e.localState)),{token:e.token,inTag:e.inTag,localMode:e.localMode,localState:n,htmlState:t.copyState(s,e.htmlState)}},token:function(t,e){return e.token(t,e)},indent:function(e,n,r){return!e.localMode||/^\s*<\//.test(n)?s.indent(e.htmlState,n,r):e.localMode.indent?e.localMode.indent(e.localState,n,r):t.Pass},innerMode:function(t){return{state:t.localState||t.htmlState,mode:t.localMode||s}}}},"xml","javascript","css"),t.defineMIME("text/html","htmlmixed")}(n(13),n(84),n(85),n(44))},function(t,e,n){!function(t){"use strict";var e={autoSelfClosers:{area:!0,base:!0,br:!0,col:!0,command:!0,embed:!0,frame:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0,menuitem:!0},implicitlyClosed:{dd:!0,li:!0,optgroup:!0,option:!0,p:!0,rp:!0,rt:!0,tbody:!0,td:!0,tfoot:!0,th:!0,tr:!0},contextGrabbers:{dd:{dd:!0,dt:!0},dt:{dd:!0,dt:!0},li:{li:!0},option:{option:!0,optgroup:!0},optgroup:{optgroup:!0},p:{address:!0,article:!0,aside:!0,blockquote:!0,dir:!0,div:!0,dl:!0,fieldset:!0,footer:!0,form:!0,h1:!0,h2:!0,h3:!0,h4:!0,h5:!0,h6:!0,header:!0,hgroup:!0,hr:!0,menu:!0,nav:!0,ol:!0,p:!0,pre:!0,section:!0,table:!0,ul:!0},rp:{rp:!0,rt:!0},rt:{rp:!0,rt:!0},tbody:{tbody:!0,tfoot:!0},td:{td:!0,th:!0},tfoot:{tbody:!0},th:{td:!0,th:!0},thead:{tbody:!0,tfoot:!0},tr:{tr:!0}},doNotIndent:{pre:!0},allowUnquoted:!0,allowMissing:!0,caseFold:!0},n={autoSelfClosers:{},implicitlyClosed:{},contextGrabbers:{},doNotIndent:{},allowUnquoted:!1,allowMissing:!1,allowMissingTagName:!1,caseFold:!1};t.defineMode("xml",function(r,i){var o,a,s=r.indentUnit,l={},c=i.htmlMode?e:n;for(var u in c)l[u]=c[u];for(var u in i)l[u]=i[u];function d(t,e){function n(n){return e.tokenize=n,n(t,e)}var r=t.next();return"<"==r?t.eat("!")?t.eat("[")?t.match("CDATA[")?n(f("atom","]]>")):null:t.match("--")?n(f("comment","--\x3e")):t.match("DOCTYPE",!0,!0)?(t.eatWhile(/[\w\._\-]/),n(function t(e){return function(n,r){for(var i;null!=(i=n.next());){if("<"==i)return r.tokenize=t(e+1),r.tokenize(n,r);if(">"==i){if(1==e){r.tokenize=d;break}return r.tokenize=t(e-1),r.tokenize(n,r)}}return"meta"}}(1))):null:t.eat("?")?(t.eatWhile(/[\w\._\-]/),e.tokenize=f("meta","?>"),"meta"):(o=t.eat("/")?"closeTag":"openTag",e.tokenize=h,"tag bracket"):"&"==r?(t.eat("#")?t.eat("x")?t.eatWhile(/[a-fA-F\d]/)&&t.eat(";"):t.eatWhile(/[\d]/)&&t.eat(";"):t.eatWhile(/[\w\.\-:]/)&&t.eat(";"))?"atom":"error":(t.eatWhile(/[^&<]/),null)}function h(t,e){var n,r,i=t.next();if(">"==i||"/"==i&&t.eat(">"))return e.tokenize=d,o=">"==i?"endTag":"selfcloseTag","tag bracket";if("="==i)return o="equals",null;if("<"==i){e.tokenize=d,e.state=m,e.tagName=e.tagStart=null;var a=e.tokenize(t,e);return a?a+" tag error":"tag error"}return/[\'\"]/.test(i)?(e.tokenize=(n=i,(r=function(t,e){for(;!t.eol();)if(t.next()==n){e.tokenize=h;break}return"string"}).isInAttribute=!0,r),e.stringStartCol=t.column(),e.tokenize(t,e)):(t.match(/^[^\s\u00a0=<>\"\']*[^\s\u00a0=<>\"\'\/]/),"word")}function f(t,e){return function(n,r){for(;!n.eol();){if(n.match(e)){r.tokenize=d;break}n.next()}return t}}function p(t,e,n){this.prev=t.context,this.tagName=e||"",this.indent=t.indented,this.startOfLine=n,(l.doNotIndent.hasOwnProperty(e)||t.context&&t.context.noIndent)&&(this.noIndent=!0)}function g(t){t.context&&(t.context=t.context.prev)}function v(t,e){for(var n;;){if(!t.context)return;if(n=t.context.tagName,!l.contextGrabbers.hasOwnProperty(n)||!l.contextGrabbers[n].hasOwnProperty(e))return;g(t)}}function m(t,e,n){return"openTag"==t?(n.tagStart=e.column(),b):"closeTag"==t?y:m}function b(t,e,n){return"word"==t?(n.tagName=e.current(),a="tag",O):l.allowMissingTagName&&"endTag"==t?(a="tag bracket",O(t,0,n)):(a="error",b)}function y(t,e,n){if("word"==t){var r=e.current();return n.context&&n.context.tagName!=r&&l.implicitlyClosed.hasOwnProperty(n.context.tagName)&&g(n),n.context&&n.context.tagName==r||!1===l.matchClosing?(a="tag",w):(a="tag error",x)}return l.allowMissingTagName&&"endTag"==t?(a="tag bracket",w(t,0,n)):(a="error",x)}function w(t,e,n){return"endTag"!=t?(a="error",w):(g(n),m)}function x(t,e,n){return a="error",w(t,0,n)}function O(t,e,n){if("word"==t)return a="attribute",C;if("endTag"==t||"selfcloseTag"==t){var r=n.tagName,i=n.tagStart;return n.tagName=n.tagStart=null,"selfcloseTag"==t||l.autoSelfClosers.hasOwnProperty(r)?v(n,r):(v(n,r),n.context=new p(n,r,i==n.indented)),m}return a="error",O}function C(t,e,n){return"equals"==t?S:(l.allowMissing||(a="error"),O(t,0,n))}function S(t,e,n){return"string"==t?k:"word"==t&&l.allowUnquoted?(a="string",O):(a="error",O(t,0,n))}function k(t,e,n){return"string"==t?k:O(t,0,n)}return d.isInText=!0,{startState:function(t){var e={tokenize:d,state:m,indented:t||0,tagName:null,tagStart:null,context:null};return null!=t&&(e.baseIndent=t),e},token:function(t,e){if(!e.tagName&&t.sol()&&(e.indented=t.indentation()),t.eatSpace())return null;o=null;var n=e.tokenize(t,e);return(n||o)&&"comment"!=n&&(a=null,e.state=e.state(o||n,t,e),a&&(n="error"==a?n+" error":a)),n},indent:function(e,n,r){var i=e.context;if(e.tokenize.isInAttribute)return e.tagStart==e.indented?e.stringStartCol+1:e.indented+s;if(i&&i.noIndent)return t.Pass;if(e.tokenize!=h&&e.tokenize!=d)return r?r.match(/^(\s*)/)[0].length:0;if(e.tagName)return!1!==l.multilineTagIndentPastTag?e.tagStart+e.tagName.length+2:e.tagStart+s*(l.multilineTagIndentFactor||1);if(l.alignCDATA&&/$/,blockCommentStart:"\x3c!--",blockCommentEnd:"--\x3e",configuration:l.htmlMode?"html":"xml",helperType:l.htmlMode?"html":"xml",skipAttribute:function(t){t.state==S&&(t.state=O)},xmlCurrentTag:function(t){return t.tagName?{name:t.tagName,close:"closeTag"==t.type}:null},xmlCurrentContext:function(t){for(var e=[],n=t.context;n;n=n.prev)e.push(n.tagName);return e.reverse()}}}),t.defineMIME("text/xml","xml"),t.defineMIME("application/xml","xml"),t.mimeModes.hasOwnProperty("text/html")||t.defineMIME("text/html",{name:"xml",htmlMode:!0})}(n(13))},function(t,e,n){!function(t){"use strict";t.defineMode("javascript",function(e,n){var r,i,o=e.indentUnit,a=n.statementIndent,s=n.jsonld,l=n.json||s,c=n.typescript,u=n.wordCharacters||/[\w$\xa1-\uffff]/,d=function(){function t(t){return{type:t,style:"keyword"}}var e=t("keyword a"),n=t("keyword b"),r=t("keyword c"),i=t("keyword d"),o=t("operator"),a={type:"atom",style:"atom"};return{if:t("if"),while:e,with:e,else:n,do:n,try:n,finally:n,return:i,break:i,continue:i,new:t("new"),delete:r,void:r,throw:r,debugger:t("debugger"),var:t("var"),const:t("var"),let:t("var"),function:t("function"),catch:t("catch"),for:t("for"),switch:t("switch"),case:t("case"),default:t("default"),in:o,typeof:o,instanceof:o,true:a,false:a,null:a,undefined:a,NaN:a,Infinity:a,this:t("this"),class:t("class"),super:t("atom"),yield:r,export:t("export"),import:t("import"),extends:r,await:r}}(),h=/[+\-*&%=<>!?|~^@]/,f=/^@(context|id|value|language|type|container|list|set|reverse|index|base|vocab|graph)"/;function p(t,e,n){return r=t,i=n,e}function g(t,e){var n,r=t.next();if('"'==r||"'"==r)return e.tokenize=(n=r,function(t,e){var r,i=!1;if(s&&"@"==t.peek()&&t.match(f))return e.tokenize=g,p("jsonld-keyword","meta");for(;null!=(r=t.next())&&(r!=n||i);)i=!i&&"\\"==r;return i||(e.tokenize=g),p("string","string")}),e.tokenize(t,e);if("."==r&&t.match(/^\d[\d_]*(?:[eE][+\-]?[\d_]+)?/))return p("number","number");if("."==r&&t.match(".."))return p("spread","meta");if(/[\[\]{}\(\),;\:\.]/.test(r))return p(r);if("="==r&&t.eat(">"))return p("=>","operator");if("0"==r&&t.match(/^(?:x[\dA-Fa-f_]+|o[0-7_]+|b[01_]+)n?/))return p("number","number");if(/\d/.test(r))return t.match(/^[\d_]*(?:n|(?:\.[\d_]*)?(?:[eE][+\-]?[\d_]+)?)?/),p("number","number");if("/"==r)return t.eat("*")?(e.tokenize=v,v(t,e)):t.eat("/")?(t.skipToEnd(),p("comment","comment")):Yt(t,e,1)?(function(t){for(var e,n=!1,r=!1;null!=(e=t.next());){if(!n){if("/"==e&&!r)return;"["==e?r=!0:r&&"]"==e&&(r=!1)}n=!n&&"\\"==e}}(t),t.match(/^\b(([gimyus])(?![gimyus]*\2))+\b/),p("regexp","string-2")):(t.eat("="),p("operator","operator",t.current()));if("`"==r)return e.tokenize=m,m(t,e);if("#"==r&&"!"==t.peek())return t.skipToEnd(),p("meta","meta");if("#"==r&&t.eatWhile(u))return p("variable","property");if("<"==r&&t.match("!--")||"-"==r&&t.match("->")&&!/\S/.test(t.string.slice(0,t.start)))return t.skipToEnd(),p("comment","comment");if(h.test(r))return">"==r&&e.lexical&&">"==e.lexical.type||(t.eat("=")?"!"!=r&&"="!=r||t.eat("="):/[<>*+\-|&?]/.test(r)&&(t.eat(r),">"==r&&t.eat(r))),"?"==r&&t.eat(".")?p("."):p("operator","operator",t.current());if(u.test(r)){t.eatWhile(u);var i=t.current();if("."!=e.lastType){if(d.propertyIsEnumerable(i)){var o=d[i];return p(o.type,o.style,i)}if("async"==i&&t.match(/^(\s|\/\*([^*]|\*(?!\/))*?\*\/)*[\[\(\w]/,!1))return p("async","keyword",i)}return p("variable","variable",i)}}function v(t,e){for(var n,r=!1;n=t.next();){if("/"==n&&r){e.tokenize=g;break}r="*"==n}return p("comment","comment")}function m(t,e){for(var n,r=!1;null!=(n=t.next());){if(!r&&("`"==n||"$"==n&&t.eat("{"))){e.tokenize=g;break}r=!r&&"\\"==n}return p("quasi","string-2",t.current())}var b="([{}])";function y(t,e){e.fatArrowAt&&(e.fatArrowAt=null);var n=t.string.indexOf("=>",t.start);if(!(n<0)){if(c){var r=/:\s*(?:\w+(?:<[^>]*>|\[\])?|\{[^}]*\})\s*$/.exec(t.string.slice(t.start,n));r&&(n=r.index)}for(var i=0,o=!1,a=n-1;a>=0;--a){var s=t.string.charAt(a),l=b.indexOf(s);if(l>=0&&l<3){if(!i){++a;break}if(0==--i){"("==s&&(o=!0);break}}else if(l>=3&&l<6)++i;else if(u.test(s))o=!0;else if(/["'\/`]/.test(s))for(;;--a){if(0==a)return;if(t.string.charAt(a-1)==s&&"\\"!=t.string.charAt(a-2)){a--;break}}else if(o&&!i){++a;break}}o&&!i&&(e.fatArrowAt=a)}}var w={atom:!0,number:!0,variable:!0,string:!0,regexp:!0,this:!0,"jsonld-keyword":!0};function x(t,e,n,r,i,o){this.indented=t,this.column=e,this.type=n,this.prev=i,this.info=o,null!=r&&(this.align=r)}function O(t,e){for(var n=t.localVars;n;n=n.next)if(n.name==e)return!0;for(var r=t.context;r;r=r.prev)for(n=r.vars;n;n=n.next)if(n.name==e)return!0}var C={state:null,column:null,marked:null,cc:null};function S(){for(var t=arguments.length-1;t>=0;t--)C.cc.push(arguments[t])}function k(){return S.apply(null,arguments),!0}function j(t,e){for(var n=e;n;n=n.next)if(n.name==t)return!0;return!1}function T(t){var e=C.state;if(C.marked="def",e.context)if("var"==e.lexical.info&&e.context&&e.context.block){var r=function t(e,n){if(n){if(n.block){var r=t(e,n.prev);return r?r==n.prev?n:new E(r,n.vars,!0):null}return j(e,n.vars)?n:new E(n.prev,new M(e,n.vars),!1)}return null}(t,e.context);if(null!=r)return void(e.context=r)}else if(!j(t,e.localVars))return void(e.localVars=new M(t,e.localVars));n.globalVars&&!j(t,e.globalVars)&&(e.globalVars=new M(t,e.globalVars))}function P(t){return"public"==t||"private"==t||"protected"==t||"abstract"==t||"readonly"==t}function E(t,e,n){this.prev=t,this.vars=e,this.block=n}function M(t,e){this.name=t,this.next=e}var D=new M("this",new M("arguments",null));function A(){C.state.context=new E(C.state.context,C.state.localVars,!1),C.state.localVars=D}function L(){C.state.context=new E(C.state.context,C.state.localVars,!0),C.state.localVars=null}function _(){C.state.localVars=C.state.context.vars,C.state.context=C.state.context.prev}function N(t,e){var n=function(){var n=C.state,r=n.indented;if("stat"==n.lexical.type)r=n.lexical.indented;else for(var i=n.lexical;i&&")"==i.type&&i.align;i=i.prev)r=i.indented;n.lexical=new x(r,C.stream.column(),t,null,n.lexical,e)};return n.lex=!0,n}function I(){var t=C.state;t.lexical.prev&&(")"==t.lexical.type&&(t.indented=t.lexical.indented),t.lexical=t.lexical.prev)}function F(t){return function e(n){return n==t?k():";"==t||"}"==n||")"==n||"]"==n?S():k(e)}}function V(t,e){return"var"==t?k(N("vardef",e),wt,F(";"),I):"keyword a"==t?k(N("form"),$,V,I):"keyword b"==t?k(N("form"),V,I):"keyword d"==t?C.stream.match(/^\s*$/,!1)?k():k(N("stat"),B,F(";"),I):"debugger"==t?k(F(";")):"{"==t?k(N("}"),L,at,I,_):";"==t?k():"if"==t?("else"==C.state.lexical.info&&C.state.cc[C.state.cc.length-1]==I&&C.state.cc.pop()(),k(N("form"),$,V,I,jt)):"function"==t?k(Mt):"for"==t?k(N("form"),Tt,V,I):"class"==t||c&&"interface"==e?(C.marked="keyword",k(N("form","class"==t?t:e),Nt,I)):"variable"==t?c&&"declare"==e?(C.marked="keyword",k(V)):c&&("module"==e||"enum"==e||"type"==e)&&C.stream.match(/^\s*\w/,!1)?(C.marked="keyword","enum"==e?k(Gt):"type"==e?k(At,F("operator"),dt,F(";")):k(N("form"),xt,F("{"),N("}"),at,I,I)):c&&"namespace"==e?(C.marked="keyword",k(N("form"),z,V,I)):c&&"abstract"==e?(C.marked="keyword",k(V)):k(N("stat"),Q):"switch"==t?k(N("form"),$,F("{"),N("}","switch"),L,at,I,I,_):"case"==t?k(z,F(":")):"default"==t?k(F(":")):"catch"==t?k(N("form"),A,R,V,I,_):"export"==t?k(N("stat"),Rt,I):"import"==t?k(N("stat"),Ht,I):"async"==t?k(V):"@"==e?k(z,V):S(N("stat"),z,F(";"),I)}function R(t){if("("==t)return k(Lt,F(")"))}function z(t,e){return U(t,e,!1)}function H(t,e){return U(t,e,!0)}function $(t){return"("!=t?S():k(N(")"),B,F(")"),I)}function U(t,e,n){if(C.state.fatArrowAt==C.stream.start){var r=n?X:Y;if("("==t)return k(A,N(")"),it(Lt,")"),I,F("=>"),r,_);if("variable"==t)return S(A,xt,F("=>"),r,_)}var i=n?q:W;return w.hasOwnProperty(t)?k(i):"function"==t?k(Mt,i):"class"==t||c&&"interface"==e?(C.marked="keyword",k(N("form"),_t,I)):"keyword c"==t||"async"==t?k(n?H:z):"("==t?k(N(")"),B,F(")"),I,i):"operator"==t||"spread"==t?k(n?H:z):"["==t?k(N("]"),qt,I,i):"{"==t?ot(et,"}",null,i):"quasi"==t?S(G,i):"new"==t?k(function(t){return function(e){return"."==e?k(t?Z:J):"variable"==e&&c?k(mt,t?q:W):S(t?H:z)}}(n)):"import"==t?k(z):k()}function B(t){return t.match(/[;\}\)\],]/)?S():S(z)}function W(t,e){return","==t?k(B):q(t,e,!1)}function q(t,e,n){var r=0==n?W:q,i=0==n?z:H;return"=>"==t?k(A,n?X:Y,_):"operator"==t?/\+\+|--/.test(e)||c&&"!"==e?k(r):c&&"<"==e&&C.stream.match(/^([^<>]|<[^<>]*>)*>\s*\(/,!1)?k(N(">"),it(dt,">"),I,r):"?"==e?k(z,F(":"),i):k(i):"quasi"==t?S(G,r):";"!=t?"("==t?ot(H,")","call",r):"."==t?k(tt,r):"["==t?k(N("]"),B,F("]"),I,r):c&&"as"==e?(C.marked="keyword",k(dt,r)):"regexp"==t?(C.state.lastType=C.marked="operator",C.stream.backUp(C.stream.pos-C.stream.start-1),k(i)):void 0:void 0}function G(t,e){return"quasi"!=t?S():"${"!=e.slice(e.length-2)?k(G):k(z,K)}function K(t){if("}"==t)return C.marked="string-2",C.state.tokenize=m,k(G)}function Y(t){return y(C.stream,C.state),S("{"==t?V:z)}function X(t){return y(C.stream,C.state),S("{"==t?V:H)}function J(t,e){if("target"==e)return C.marked="keyword",k(W)}function Z(t,e){if("target"==e)return C.marked="keyword",k(q)}function Q(t){return":"==t?k(I,V):S(W,F(";"),I)}function tt(t){if("variable"==t)return C.marked="property",k()}function et(t,e){return"async"==t?(C.marked="property",k(et)):"variable"==t||"keyword"==C.style?(C.marked="property","get"==e||"set"==e?k(nt):(c&&C.state.fatArrowAt==C.stream.start&&(n=C.stream.match(/^\s*:\s*/,!1))&&(C.state.fatArrowAt=C.stream.pos+n[0].length),k(rt))):"number"==t||"string"==t?(C.marked=s?"property":C.style+" property",k(rt)):"jsonld-keyword"==t?k(rt):c&&P(e)?(C.marked="keyword",k(et)):"["==t?k(z,st,F("]"),rt):"spread"==t?k(H,rt):"*"==e?(C.marked="keyword",k(et)):":"==t?S(rt):void 0;var n}function nt(t){return"variable"!=t?S(rt):(C.marked="property",k(Mt))}function rt(t){return":"==t?k(H):"("==t?S(Mt):void 0}function it(t,e,n){function r(i,o){if(n?n.indexOf(i)>-1:","==i){var a=C.state.lexical;return"call"==a.info&&(a.pos=(a.pos||0)+1),k(function(n,r){return n==e||r==e?S():S(t)},r)}return i==e||o==e?k():n&&n.indexOf(";")>-1?S(t):k(F(e))}return function(n,i){return n==e||i==e?k():S(t,r)}}function ot(t,e,n){for(var r=3;r"),dt):void 0}function ht(t){if("=>"==t)return k(dt)}function ft(t){return"}"==t?k():","==t||";"==t?k(ft):S(pt,ft)}function pt(t,e){return"variable"==t||"keyword"==C.style?(C.marked="property",k(pt)):"?"==e||"number"==t||"string"==t?k(pt):":"==t?k(dt):"["==t?k(F("variable"),lt,F("]"),pt):"("==t?S(Dt,pt):t.match(/[;\}\)\],]/)?void 0:k()}function gt(t,e){return"variable"==t&&C.stream.match(/^\s*[?:]/,!1)||"?"==e?k(gt):":"==t?k(dt):"spread"==t?k(gt):S(dt)}function vt(t,e){return"<"==e?k(N(">"),it(dt,">"),I,vt):"|"==e||"."==t||"&"==e?k(dt):"["==t?k(dt,F("]"),vt):"extends"==e||"implements"==e?(C.marked="keyword",k(dt)):"?"==e?k(dt,F(":"),dt):void 0}function mt(t,e){if("<"==e)return k(N(">"),it(dt,">"),I,vt)}function bt(){return S(dt,yt)}function yt(t,e){if("="==e)return k(dt)}function wt(t,e){return"enum"==e?(C.marked="keyword",k(Gt)):S(xt,st,St,kt)}function xt(t,e){return c&&P(e)?(C.marked="keyword",k(xt)):"variable"==t?(T(e),k()):"spread"==t?k(xt):"["==t?ot(Ct,"]"):"{"==t?ot(Ot,"}"):void 0}function Ot(t,e){return"variable"!=t||C.stream.match(/^\s*:/,!1)?("variable"==t&&(C.marked="property"),"spread"==t?k(xt):"}"==t?S():"["==t?k(z,F("]"),F(":"),Ot):k(F(":"),xt,St)):(T(e),k(St))}function Ct(){return S(xt,St)}function St(t,e){if("="==e)return k(H)}function kt(t){if(","==t)return k(wt)}function jt(t,e){if("keyword b"==t&&"else"==e)return k(N("form","else"),V,I)}function Tt(t,e){return"await"==e?k(Tt):"("==t?k(N(")"),Pt,I):void 0}function Pt(t){return"var"==t?k(wt,Et):"variable"==t?k(Et):S(Et)}function Et(t,e){return")"==t?k():";"==t?k(Et):"in"==e||"of"==e?(C.marked="keyword",k(z,Et)):S(z,Et)}function Mt(t,e){return"*"==e?(C.marked="keyword",k(Mt)):"variable"==t?(T(e),k(Mt)):"("==t?k(A,N(")"),it(Lt,")"),I,ct,V,_):c&&"<"==e?k(N(">"),it(bt,">"),I,Mt):void 0}function Dt(t,e){return"*"==e?(C.marked="keyword",k(Dt)):"variable"==t?(T(e),k(Dt)):"("==t?k(A,N(")"),it(Lt,")"),I,ct,_):c&&"<"==e?k(N(">"),it(bt,">"),I,Dt):void 0}function At(t,e){return"keyword"==t||"variable"==t?(C.marked="type",k(At)):"<"==e?k(N(">"),it(bt,">"),I):void 0}function Lt(t,e){return"@"==e&&k(z,Lt),"spread"==t?k(Lt):c&&P(e)?(C.marked="keyword",k(Lt)):c&&"this"==t?k(st,St):S(xt,st,St)}function _t(t,e){return"variable"==t?Nt(t,e):It(t,e)}function Nt(t,e){if("variable"==t)return T(e),k(It)}function It(t,e){return"<"==e?k(N(">"),it(bt,">"),I,It):"extends"==e||"implements"==e||c&&","==t?("implements"==e&&(C.marked="keyword"),k(c?dt:z,It)):"{"==t?k(N("}"),Ft,I):void 0}function Ft(t,e){return"async"==t||"variable"==t&&("static"==e||"get"==e||"set"==e||c&&P(e))&&C.stream.match(/^\s+[\w$\xa1-\uffff]/,!1)?(C.marked="keyword",k(Ft)):"variable"==t||"keyword"==C.style?(C.marked="property",k(Vt,Ft)):"number"==t||"string"==t?k(Vt,Ft):"["==t?k(z,st,F("]"),Vt,Ft):"*"==e?(C.marked="keyword",k(Ft)):c&&"("==t?S(Dt,Ft):";"==t||","==t?k(Ft):"}"==t?k():"@"==e?k(z,Ft):void 0}function Vt(t,e){if("?"==e)return k(Vt);if(":"==t)return k(dt,St);if("="==e)return k(H);var n=C.state.lexical.prev;return S(n&&"interface"==n.info?Dt:Mt)}function Rt(t,e){return"*"==e?(C.marked="keyword",k(Wt,F(";"))):"default"==e?(C.marked="keyword",k(z,F(";"))):"{"==t?k(it(zt,"}"),Wt,F(";")):S(V)}function zt(t,e){return"as"==e?(C.marked="keyword",k(F("variable"))):"variable"==t?S(H,zt):void 0}function Ht(t){return"string"==t?k():"("==t?S(z):S($t,Ut,Wt)}function $t(t,e){return"{"==t?ot($t,"}"):("variable"==t&&T(e),"*"==e&&(C.marked="keyword"),k(Bt))}function Ut(t){if(","==t)return k($t,Ut)}function Bt(t,e){if("as"==e)return C.marked="keyword",k($t)}function Wt(t,e){if("from"==e)return C.marked="keyword",k(z)}function qt(t){return"]"==t?k():S(it(H,"]"))}function Gt(){return S(N("form"),xt,F("{"),N("}"),it(Kt,"}"),I,I)}function Kt(){return S(xt,St)}function Yt(t,e,n){return e.tokenize==g&&/^(?:operator|sof|keyword [bcd]|case|new|export|default|spread|[\[{}\(,;:]|=>)$/.test(e.lastType)||"quasi"==e.lastType&&/\{\s*$/.test(t.string.slice(0,t.pos-(n||0)))}return _.lex=!0,I.lex=!0,{startState:function(t){var e={tokenize:g,lastType:"sof",cc:[],lexical:new x((t||0)-o,0,"block",!1),localVars:n.localVars,context:n.localVars&&new E(null,null,!1),indented:t||0};return n.globalVars&&"object"==typeof n.globalVars&&(e.globalVars=n.globalVars),e},token:function(t,e){if(t.sol()&&(e.lexical.hasOwnProperty("align")||(e.lexical.align=!1),e.indented=t.indentation(),y(t,e)),e.tokenize!=v&&t.eatSpace())return null;var n=e.tokenize(t,e);return"comment"==r?n:(e.lastType="operator"!=r||"++"!=i&&"--"!=i?r:"incdec",function(t,e,n,r,i){var o=t.cc;for(C.state=t,C.stream=i,C.marked=null,C.cc=o,C.style=e,t.lexical.hasOwnProperty("align")||(t.lexical.align=!0);;)if((o.length?o.pop():l?z:V)(n,r)){for(;o.length&&o[o.length-1].lex;)o.pop()();return C.marked?C.marked:"variable"==n&&O(t,r)?"variable-2":e}}(e,n,r,i,t))},indent:function(e,r){if(e.tokenize==v||e.tokenize==m)return t.Pass;if(e.tokenize!=g)return 0;var i,s=r&&r.charAt(0),l=e.lexical;if(!/^\s*else\b/.test(r))for(var c=e.cc.length-1;c>=0;--c){var u=e.cc[c];if(u==I)l=l.prev;else if(u!=jt)break}for(;("stat"==l.type||"form"==l.type)&&("}"==s||(i=e.cc[e.cc.length-1])&&(i==W||i==q)&&!/^[,\.=+\-*:?[\(]/.test(r));)l=l.prev;a&&")"==l.type&&"stat"==l.prev.type&&(l=l.prev);var d=l.type,f=s==d;return"vardef"==d?l.indented+("operator"==e.lastType||","==e.lastType?l.info.length+1:0):"form"==d&&"{"==s?l.indented:"form"==d?l.indented+o:"stat"==d?l.indented+(function(t,e){return"operator"==t.lastType||","==t.lastType||h.test(e.charAt(0))||/[,.]/.test(e.charAt(0))}(e,r)?a||o:0):"switch"!=l.info||f||0==n.doubleIndentSwitch?l.align?l.column+(f?0:1):l.indented+(f?0:o):l.indented+(/^(?:case|default)\b/.test(r)?o:2*o)},electricInput:/^\s*(?:case .*?:|default:|\{|\})$/,blockCommentStart:l?null:"/*",blockCommentEnd:l?null:"*/",blockCommentContinue:l?null:" * ",lineComment:l?null:"//",fold:"brace",closeBrackets:"()[]{}''\"\"``",helperType:l?"json":"javascript",jsonldMode:s,jsonMode:l,expressionAllowed:Yt,skipExpression:function(t){var e=t.cc[t.cc.length-1];e!=z&&e!=H||t.cc.pop()}}}),t.registerHelper("wordChars","javascript",/[\w$]/),t.defineMIME("text/javascript","javascript"),t.defineMIME("text/ecmascript","javascript"),t.defineMIME("application/javascript","javascript"),t.defineMIME("application/x-javascript","javascript"),t.defineMIME("application/ecmascript","javascript"),t.defineMIME("application/json",{name:"javascript",json:!0}),t.defineMIME("application/x-json",{name:"javascript",json:!0}),t.defineMIME("application/manifest+json",{name:"javascript",json:!0}),t.defineMIME("application/ld+json",{name:"javascript",jsonld:!0}),t.defineMIME("text/typescript",{name:"javascript",typescript:!0}),t.defineMIME("application/typescript",{name:"javascript",typescript:!0})}(n(13))},function(t,e,n){!function(t){t.extendMode("css",{commentStart:"/*",commentEnd:"*/",newlineAfterToken:function(t,e){return/^[;{}]$/.test(e)}}),t.extendMode("javascript",{commentStart:"/*",commentEnd:"*/",newlineAfterToken:function(t,e,n,r){return this.jsonMode?/^[\[,{]$/.test(e)||/^}/.test(n):(";"!=e||!r.lexical||")"!=r.lexical.type)&&/^[;{}]$/.test(e)&&!/^;/.test(n)}});var e=/^(a|abbr|acronym|area|base|bdo|big|br|button|caption|cite|code|col|colgroup|dd|del|dfn|em|frame|hr|iframe|img|input|ins|kbd|label|legend|link|map|object|optgroup|option|param|q|samp|script|select|small|span|strong|sub|sup|textarea|tt|var)$/;t.extendMode("xml",{commentStart:"\x3c!--",commentEnd:"--\x3e",newlineAfterToken:function(t,n,r,i){var o=!1;return"html"==this.configuration&&(o=!!i.context&&e.test(i.context.tagName)),!o&&("tag"==t&&/>$/.test(n)&&i.context||/^-1&&s>-1&&s>a&&(t=t.substr(0,a)+t.substring(a+o.commentStart.length,s)+t.substr(s+o.commentEnd.length)),i.replaceRange(t,n,r)}})}),t.defineExtension("autoIndentRange",function(t,e){var n=this;this.operation(function(){for(var r=t.line;r<=e.line;r++)n.indentLine(r,"smart")})}),t.defineExtension("autoFormatRange",function(e,n){var r=this,i=r.getMode(),o=r.getRange(e,n).split("\n"),a=t.copyState(i,r.getTokenAt(e).state),s=r.getOption("tabSize"),l="",c=0,u=0===e.ch;function d(){l+="\n",u=!0,++c}for(var h=0;h0&&void 0!==arguments[0]?arguments[0]:{};this.opt=t;var e=t.config||{};this.level=t.level,this.config=e,this.preview=t.preview,this.ppfx=e.pStylePrefix||"",this.pfx=e.stylePrefix||"",this.parent=t.parent,this.parentView=t.parentView;var n=this.pfx,r=this.ppfx,i=this.parent,o=this.collection;this.listenTo(o,"add",this.addTo),this.listenTo(o,"reset resetNavigator",this.render),this.listenTo(o,"remove",this.removeChildren),this.className="".concat(n,"layers");var s=e.em;if(e.sortable&&!this.opt.sorter){var l=s.get("Utils");this.opt.sorter=new l.Sorter({container:e.sortContainer||this.el,containerSel:".".concat(this.className),itemSel:".".concat(n,"layer"),ignoreViewChildren:1,onEndMove:function(t,e,n){var r=e.getSourceModel();s.setSelected(r,{forceChange:1}),s.trigger("".concat(a.b,":end"),n)},avoidSelectOnEnd:1,nested:1,ppfx:r,pfx:n})}this.sorter=this.opt.sorter||"",this.$el.data("collection",o),i&&this.$el.data("model",i)},removeChildren:function(t){var e=t.viewLayer;e&&(e.remove(),t.viewLayer=0)},addTo:function(t){var e=this.collection.indexOf(t);this.addToCollection(t,null,e)},addToCollection:function(t,e,n){var r=this.level,i=this.parentView,a=e||null,s=new(0,o.a)({level:r,model:t,parentView:i,config:this.config,sorter:this.sorter,isCountable:this.isCountable,opened:this.opt.opened}).render().el;if(a)a.appendChild(s);else if(void 0!==n){var l="before";this.$el.children().length==n&&(n--,l="after"),n<0?this.$el.append(s):this.$el.children().eq(n)[l](s)}else this.$el.append(s);return s},isCountable:function(t,e){var n=t.get("type"),r=t.get("tagName");return!(("textnode"==n||"br"==r)&&e||!t.get("layerable"))},render:function(){var t=this,e=document.createDocumentFragment(),n=this.el;return n.innerHTML="",this.collection.each(function(n){return t.addToCollection(n,e)}),n.appendChild(e),n.className=this.className,this}})},function(t,e,n){var r={"./CanvasClear":45,"./CanvasClear.js":45,"./CanvasMove":46,"./CanvasMove.js":46,"./CommandAbstract":22,"./CommandAbstract.js":22,"./ComponentDelete":47,"./ComponentDelete.js":47,"./ComponentDrag":48,"./ComponentDrag.js":48,"./ComponentEnter":49,"./ComponentEnter.js":49,"./ComponentExit":50,"./ComponentExit.js":50,"./ComponentNext":51,"./ComponentNext.js":51,"./ComponentPrev":52,"./ComponentPrev.js":52,"./ComponentStyleClear":53,"./ComponentStyleClear.js":53,"./CopyComponent":54,"./CopyComponent.js":54,"./DeleteComponent":55,"./DeleteComponent.js":55,"./ExportTemplate":56,"./ExportTemplate.js":56,"./Fullscreen":57,"./Fullscreen.js":57,"./MoveComponent":58,"./MoveComponent.js":58,"./OpenAssets":59,"./OpenAssets.js":59,"./OpenBlocks":60,"./OpenBlocks.js":60,"./OpenLayers":61,"./OpenLayers.js":61,"./OpenStyleManager":62,"./OpenStyleManager.js":62,"./OpenTraitManager":63,"./OpenTraitManager.js":63,"./PasteComponent":64,"./PasteComponent.js":64,"./Preview":65,"./Preview.js":65,"./Resize":66,"./Resize.js":66,"./SelectComponent":14,"./SelectComponent.js":14,"./SelectPosition":27,"./SelectPosition.js":27,"./ShowOffset":67,"./ShowOffset.js":67,"./SwitchVisibility":68,"./SwitchVisibility.js":68};function i(t){var e=o(t);return n(e)}function o(t){if(!n.o(r,t)){var e=new Error("Cannot find module '"+t+"'");throw e.code="MODULE_NOT_FOUND",e}return r[t]}i.keys=function(){return Object.keys(r)},i.resolve=o,t.exports=i,i.id=91},function(t,e,n){"use strict";n.r(e);var r=n(8),i=n.n(r),o=n(2),a=n.n(o),s=n(1),l=n.n(s),c=n(0),u={stylePrefix:"comp-",wrapperId:"wrapper",wrapperName:"Body",wrapper:{removable:!1,copyable:!1,draggable:!1,components:[],traits:[],stylable:["background","background-color","background-image","background-repeat","background-attachment","background-position","background-size"]},components:[],draggableComponents:1,storeWrapper:0,processor:0,voidElements:["area","base","br","col","embed","hr","img","input","keygen","link","menuitem","meta","param","source","track","wbr"]},d=n(5),h=n(21),f=n(6),p=n(35);function g(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n.push.apply(n,r)}return n}function v(t){for(var e=1;e\n \n '),fallback:"\n \n '),file:""}),initialize:function(t,e){d.a.prototype.initialize.apply(this,arguments);var n=this.get("attributes").src;n&&this.set("src",n,{silent:1})},initToolbar:function(){for(var t=arguments.length,e=new Array(t),n=0;n0&&void 0!==arguments[0]?arguments[0]:{},e=this.get(t.fallback?"fallback":"src")||"",n=e;return e&&"2&&void 0!==arguments[2]?arguments[2]:{}).fromDisable&&this.disableEditing()},onActive:function(t){var e=this.rte,n=this.em;if(!(this.rteEnabled||!this.model.get("editable")||n&&n.isEditing())){if(t&&t.stopPropagation&&t.stopPropagation(),e)try{this.activeRte=e.enable(this,this.activeRte)}catch(t){n.logError(t)}this.toggleEvents(1)}},onDisable:function(){this.disableEditing()},disableEditing:function(){var t=this.model,e=this.rte,n=this.activeRte,r=this.em,i=t.get("editable");if(e&&i){try{e.disable(this,n)}catch(t){r.logError(t)}this.syncContent()}this.toggleEvents()},getContent:function(){var t=this.activeRte;return t&&"function"==typeof t.getContent?t.getContent():this.getChildrenContainer().innerHTML},syncContent:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=this.model,n=this.rte;if(this.rteEnabled||t.force){var r=this.getContent(),i=e.components(),o=nt({fromDisable:1},t);if(e.set("content","",o),n.customRte)i.length&&i.reset(null,t),e.set("content",r,o);else{var a=function e(n){var r=!!n.get("textable"),i=!["text","default",""].some(function(t){return n.is(t)})||r;n.set(nt({_innertext:!i,editable:i&&n.get("editable"),selectable:i,hoverable:i,removable:r,draggable:r,highlightable:0,copyable:r},!r&&{toolbar:""}),t),n.get("components").each(function(t){return e(t)})};i.reset(r,t),i.each(function(t){return a(t)}),i.trigger("resetNavigator")}}},onInput:function(){var t=this.em,e="component",n=["".concat(e,":update"),"".concat(e,":input")].join(" ");t&&t.trigger(n,this.model)},disablePropagation:function(t){t.stopPropagation()},toggleEvents:function(t){var e=this.em,n=this.model,r={on:tt.v,off:tt.u},i=t?"on":"off";e.setEditing(t),this.rteEnabled=!!t;var o=[this.el.ownerDocument,document];if(r.off(o,"mousedown",this.disableEditing),r[i](o,"mousedown",this.disableEditing),e[i]("toolbar:run:before",this.disableEditing),n[i]("removed",this.disableEditing),this.$el.off("mousedown",this.disablePropagation),this.$el[i]("mousedown",this.disablePropagation),this.config.draggableComponents)for(var a=this.el;a;)a.draggable=!t,(a=a.parentNode)&&"BODY"==a.tagName&&(a=0)}}),ot=it.extend({render:function(){for(var t=arguments.length,e=new Array(t),n=0;n /g,">").replace(/"/g,""").replace(/'/g,"'")}},{isComponent:function(t){var e="";return 3===t.nodeType&&(e={type:"textnode",content:t.textContent}),e}});function Dt(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n.push.apply(n,r)}return n}var At=Mt.extend({defaults:function(t){for(var e=1;e2&&void 0!==arguments[2]?arguments[2]:{},o=e.components(),a=t.get("UndoManager"),s=t.handleUpdates.bind(t),l=this.handleChanges.bind(this),c=this.handleChangesColl.bind(this),u=this.handleRemoves.bind(this);a&&a.add(e),a&&o&&a.add(o);[[e,"change:style change:content change:attributes change:src",s],[e,"change:components",c],[o,"add",l],[o,"remove reset",u],[e.get("classes"),"add remove",s]].forEach(function(e){t.stopListening(e[0],e[1],e[2]),t.listenTo(e[0],e[1],e[2])}),!i.avoidStore&&s("","",i),o.each(function(t){return r.handleChanges(t,n,i)})},handleChangesColl:function(e,n){var r=t.get("UndoManager");if(r&&n instanceof l.a.Collection){var i=this.handleChanges.bind(this),o=this.handleRemoves.bind(this);r.add(n),[[n,"add",i],[n,"remove reset",o]].forEach(function(e){t.stopListening(e[0],e[1],e[2]),t.listenTo(e[0],e[1],e[2])})}},handleRemoves:function(e,n,r){var i=r||n;t.handleUpdates(e,n,i)},load:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",e=this.em,n="";!t&&r.stm&&(t=r.em.getCacheLoad());var i=t,o=i.components,a=i.html;if(o)if(Object(c.isObject)(o)||Object(c.isArray)(o))n=o;else try{n=JSON.parse(o)}catch(t){e&&e.logError(t)}else a&&(n=a);var s=n&&n.constructor===Object;return(n&&n.length||s)&&(this.clear(),s?this.getWrapper().set(n):this.getComponents().add(n)),n},store:function(t){if(r.stm){var e={},n=this.storageKey();if(n.indexOf("html")>=0&&(e.html=r.em.getHtml()),n.indexOf("components")>=0){this.em;var i=r.storeWrapper?this.getWrapper():this.getComponents();e.components=JSON.stringify(i)}return t||r.stm.store(e),e}},getComponent:function(){return e},getWrapper:function(){return this.getComponent()},getComponents:function(){return this.getWrapper().get("components")},addComponent:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return this.getComponents().add(t,e)},render:function(){return n.render().el},clear:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return this.getComponents().map(function(t){return t}).forEach(function(e){return e.remove(t)}),this},setComponents:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.clear(e).addComponent(t,e)},addType:function(t,e){var n=this.em,r=e.model,o=void 0===r?{}:r,s=e.view,l=void 0===s?{}:s,u=e.isComponent,d=e.extend,h=e.extendView,f=e.extendFn,p=void 0===f?[]:f,g=e.extendFnView,v=void 0===g?[]:g,m=this.getType(t),b=this.getType(d),y=this.getType(h),w=b||m||this.getType("default"),x=w.model,O=y?y.view:w.view,C=function(t,e,n){return t.reduce(function(t,r){var i=e[r],o=n.prototype[r];return i&&o&&(t[r]=function(){o.bind(this).apply(void 0,arguments),i.bind(this).apply(void 0,arguments)}),t},{})};"object"===i()(o)&&(e.model=x.extend(Ft(Ft(Ft({},o),C(p,o,x)),{},{defaults:Ft(Ft({},x.prototype.defaults),Object(c.result)(o,"defaults")||{})}),{isComponent:!m||b||u?u||function(){return 0}:x.isComponent})),"object"===i()(l)&&(e.view=O.extend(Ft(Ft({},l),C(v,l,O)))),m?(m.model=e.model,m.view=e.view):(e.id=t,a.unshift(e));var S="component:type:".concat(m?"update":"add");return n&&n.trigger(S,m||e),this},getType:function(t){for(var e=a,n=0;n1&&void 0!==arguments[1]?arguments[1]:{};t&&(t.set({status:"selected"}),["component:selected","component:toggled"].forEach(function(r){return e.em.trigger(r,t,n)}))},selectRemove:function(t){var e=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};t&&(this.em,t.set({status:"",state:""}),["component:deselected","component:toggled"].forEach(function(r){return e.em.trigger(r,t,n)}))},componentHovered:function(){var t=r.em,e=t.get("componentHovered"),n=t.previous("componentHovered"),i="hovered";n&&n.get("status")==i&&n.set({status:"",state:""}),e&&Object(c.isEmpty)(e.get("status"))&&e.set("status",i)},allById:function(){return o},destroy:function(){this.clear(),n.remove(),[r,t,o,e,n].forEach(function(t){return{}}),this.em={}}}}},function(t,e,n){"use strict";n.r(e);var r=n(7),i=n.n(r),o=n(2),a=n.n(o),s=n(3),l=n(15),c=n.n(l),u=n(16),d=n.n(u),h=n(0),f=function(){function t(e,n){var r=this;c()(this,t),this.em=e;var i=n||e.get("Canvas").getFrames().map(function(t){return t.get("root").getEl()}),o=Array.isArray(i)?i:[i];return this.el=i,this.counter=0,Object(h.bindAll)(this,"handleDragEnter","handleDragOver","handleDrop","handleDragLeave"),o.forEach(function(t){return r.toggleEffects(t,1)}),this}return d()(t,[{key:"toggleEffects",value:function(t,e){var n={on:s.v,off:s.u},r=e?"on":"off";n[r](t,"dragenter",this.handleDragEnter),n[r](t,"dragover",this.handleDragOver),n[r](t,"drop",this.handleDrop),n[r](t,"dragleave",this.handleDragLeave)}},{key:"endDrop",value:function(t,e){var n=this.em,r=this.dragStop;this.counter=0,r&&r(t),n.trigger("canvas:dragend",e)}},{key:"handleDragLeave",value:function(t){this.updateCounter(-1,t)}},{key:"updateCounter",value:function(t,e){this.counter+=t,0===this.counter&&this.endDrop(1,e)}},{key:"handleDragEnter",value:function(t){var e=this,n=this.em,r=t.dataTransfer;if(this.updateCounter(1,t),!this.over){this.over=1;var i,o,a=n.get("Utils"),s=n.get("Canvas"),l=s.getBody(),c=n.get("dragContent")||" ";if(n.stopDefault(),n.inAbsoluteMode()){var u=n.get("DomComponents").getWrapper(),d=u.append({})[0],h=n.get("Commands").run("core:component-drag",{event:t,guidesInfo:1,center:1,target:d,onEnd:function(t,n,i){var o;if(!i.cancelled){o=u.append(c)[0];var a=d.getStyle(),s=a.left,l=a.top,h=a.position;o.addStyle({left:s,top:l,position:h})}e.handleDragEnd(o,r),d.remove()}});i=function(e){return h.stop(t,{cancel:e})},o=function(t){return c=t}}else{var f=new a.Sorter({em:n,wmargin:1,nested:1,canvasRelative:1,direction:"a",container:l,placer:s.getPlacerEl(),containerSel:"*",itemSel:"*",pfx:"gjs-",onEndMove:function(t){return e.handleDragEnd(t,r)},document:s.getFrameEl().contentDocument});f.setDropContent(c),f.startSort(),this.sorter=f,i=function(t){t&&(f.moved=0),f.endMove()},o=function(t){return f.setDropContent(t)}}this.dragStop=i,this.dragContent=o,n.trigger("canvas:dragenter",r,c)}}},{key:"handleDragEnd",value:function(t,e){var n=this.em;this.over=0,t&&(n.set("dragResult",t),n.trigger("canvas:drop",e,t)),n.runDefault({preserveSelected:1})}},{key:"handleDragOver",value:function(t){t.preventDefault(),this.em.trigger("canvas:dragover",t)}},{key:"handleDrop",value:function(t){t.preventDefault();var e=this.dragContent,n=t.dataTransfer,r=this.getContentByData(n).content;t.target.style.border="",r&&e&&e(r),this.endDrop(!r,t)}},{key:"getContentByData",value:function(t){var e=this.em,n=t.types,r=t.files||[],i=e.get("dragContent"),o=t.getData("text");if(r.length){o=[];for(var a=0;a=0)o=t.getData("text/html").replace(/<\/?meta[^>]*>/g,"");else if(Object(h.indexOf)(n,"text/uri-list")>=0)o={type:"link",attributes:{href:o},content:o};else if(Object(h.indexOf)(n,"text/json")>=0){var c=t.getData("text/json");c&&(o=JSON.parse(c))}else 1===n.length&&"text/plain"===n[0]&&(o="".concat(o,"
"));var u={content:o};return e.trigger("canvas:dragdata",t,u),u}}]),t}(),p={stylePrefix:"cv-",scripts:[],styles:[],customBadgeLabel:"",autoscrollLimit:50,notTextable:["button","a","input[type=checkbox]","input[type=radio]"]},g=n(1),v=n.n(g),m=n(5),b=n(33);function y(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n.push.apply(n,r)}return n}var w=v.a.Model.extend({defaults:{wrapper:"",width:null,height:null,head:"",x:0,y:0,root:0,components:0,styles:0,attributes:{}},initialize:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=this.attributes,r=n.root,i=n.styles,o=n.components;this.set("head",[]),this.em=e.em;var a={em:e.em,config:e.em.get("DomComponents").getConfig(),frame:this};!r&&this.set("root",new m.a({type:"wrapper",components:o||[]},a)),(!i||Object(h.isString)(i))&&this.set("styles",new b.a(i,a))},remove:function(){this.view=0;var t=this.collection;return t&&t.remove(this)},getHead:function(){return i()(this.get("head"))},setHead:function(t){return this.set("head",i()(t))},addHeadItem:function(t){var e=this.getHead();e.push(t),this.setHead(e)},getHeadByAttr:function(t,e,n){return this.getHead().filter(function(r){return r.attributes&&r.attributes[t]==e&&(!n||n===r.tag)})[0]},removeHeadByAttr:function(t,e,n){var r=this.getHead(),i=this.getHeadByAttr(t,e,n),o=r.indexOf(i);o>=0&&(r.splice(o,1),this.setHead(r))},addLink:function(t){var e="link";!this.getHeadByAttr("href",t,e)&&this.addHeadItem({tag:e,attributes:{href:t,rel:"stylesheet"}})},removeLink:function(t){this.removeHeadByAttr("href",t,"link")},addScript:function(t){var e="script";!this.getHeadByAttr("src",t,e)&&this.addHeadItem({tag:e,attributes:{src:t}})},removeScript:function(t){this.removeHeadByAttr("src",t,"script")},_emitUpdated:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.em.trigger("frame:updated",function(t){for(var e=1;e=this.itemsToLoad&&(this.trigger("loaded:all"),this.listenToLoadItems(0))},listenToLoad:function(){this.loadedItems=0,this.itemsToLoad=this.length,this.listenToLoadItems(1)},listenToLoadItems:function(t){var e=this;this.forEach(function(n){return n[t?"on":"off"]("loaded",e.itemLoaded)})}}),O=v.a.Model.extend({defaults:{frame:"",frames:"",wrapper:"",rulers:!1,zoom:100,x:0,y:0},initialize:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=t.em,n=t.styles,r=void 0===n?[]:n,i=t.scripts,o=void 0===i?[]:i,a=e&&e.getWrapper(),s=e&&e.getStyle(),l=new w({root:a,styles:s},t);r.forEach(function(t){return l.addLink(t)}),o.forEach(function(t){return l.addScript(t)}),this.em=e,this.set("frame",l),this.set("frames",new x([l],t)),this.listenTo(this,"change:zoom",this.onZoomChange),this.listenTo(e,"change:device",this.updateDevice)},updateDevice:function(){var t=this.em,e=t.getDeviceModel(),n=t.getCurrentFrameModel();if(n&&e){var r=e.attributes,i=r.width,o=r.height;n.set({width:i,height:o})}},onZoomChange:function(){this.get("zoom")<1&&this.set("zoom",1)}}),C=n(20),S=n(37),k=n(6),j=n(9);function T(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n.push.apply(n,r)}return n}function P(t){for(var e=1;ea&&(s+=i-a),!Object(h.isUndefined)(t)&&s!==r&&s>0&&s0){var i=r.shift(),o=Object(j.e)("script",P({type:"text/javascript"},Object(h.isString)(i)?{src:i}:i));o.onerror=o.onload=n.bind(null,r),e.contentDocument.head.appendChild(o)}else t.renderBody()}(i()(n.scripts))}},renderBody:function(){var t=this,e=this.config,n=this.model,r=this.ppfx,i=n.get("root"),o=n.get("styles"),a=e.em,l=this.getDoc(),c=this.getHead(),u=this.getBody(),d=this.getWindow(),f=a.get("Config"),p=[];d._isEditor=!0,e.styles.forEach(function(t){return p.push(Object(h.isString)(t)?{tag:"link",attributes:{href:t,rel:"stylesheet"}}:{tag:"link",attributes:P({rel:"stylesheet"},t)})}),p.length&&Object(j.c)(c,p),Object(j.a)(u,"")),this.root=new k.default({model:i,config:P(P({},i.config),{},{frameView:this})}).render(),Object(j.a)(u,this.root.el),Object(j.a)(u,new S.a({collection:o,config:P(P({},a.get("CssComposer").getConfig()),{},{frameView:this})}).render().el),Object(j.a)(u,this.getJsContainer()),Object(s.v)(u,"click",function(t){return t&&"A"==t.target.tagName&&t.preventDefault()}),Object(s.v)(u,"submit",function(t){return t&&t.preventDefault()}),[{event:"keydown keyup keypress",class:"KeyboardEvent"},{event:"mousedown mousemove mouseup",class:"MouseEvent"},{event:"wheel",class:"WheelEvent"}].forEach(function(e){return e.event.split(" ").forEach(function(n){l.addEventListener(n,function(n){return t.el.dispatchEvent(Object(j.d)(n,e.class))})})}),this._toggleEffects(1),n.trigger("loaded")},_toggleEffects:function(t){(t?s.v:s.u)(this.getWindow(),"".concat(j.i," resize"),this._emitUpdate)},_emitUpdate:function(){this.model._emitUpdated()}}),M=n(17);function D(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n.push.apply(n,r)}return n}function A(t){for(var e=1;e0&&void 0!==arguments[0]?arguments[0]:{},e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};Object(h.bindAll)(this,"onScroll","frameLoaded","updateOffset","remove","startDrag");var n=this.model,r=A(A({},t.config||e),{},{frameWrapView:this}),i=r.canvasView,o=r.em;this.cv=i,this.config=r,this.em=o,this.canvas=o&&o.get("Canvas"),this.ppfx=r.pStylePrefix||"",this.frame=new E({model:n,config:r}),this.classAnim="".concat(this.ppfx,"frame-wrapper--anim"),this.listenTo(n,"loaded",this.frameLoaded),this.listenTo(n,"change:x change:y",this.updatePos),this.listenTo(n,"change:width change:height",this.updateSize),this.listenTo(n,"destroy remove",this.remove),this.updatePos(),this.setupDragger()},setupDragger:function(){var t,e,n,r=this,i=this.canvas,o=this.model,a=function(t){i.toggleFramesEvents(t)};this.dragger=new M.a({onStart:function(){var i=o.attributes,s=i.x,l=i.y;n=r.em.getZoomMultiplier(),t=s,e=l,a()},onEnd:function(){return a(1)},setPosition:function(r){o.set({x:t+r.x*n,y:e+r.y*n})}})},startDrag:function(t){t&&this.dragger.start(t)},remove:function(){return this.frame.remove(),this.frame={},v.a.View.prototype.remove.apply(this,arguments),this},updateOffset:Object(h.debounce)(function(){var t=this.em,e=this.$el,n=this.frame;t.runDefault({preserveSelected:1}),e.removeClass(this.classAnim),n.model._emitUpdated()}),updatePos:function(t){var e=this.model,n=this.el,r=e.attributes,i=r.x,o=r.y,a=n.style;this.frame.rect=0,a.left=isNaN(i)?i:"".concat(i,"px"),a.top=isNaN(o)?o:"".concat(o,"px"),t&&this.updateOffset()},updateSize:Object(h.debounce)(function(){this.updateDim()}),updateDim:function(){var t=this.em,e=this.el,n=this.$el,r=this.model,i=this.classAnim,o=r.attributes,a=o.width,s=o.height,l=e.style,c=l.width||"",u=l.height||"",d=a||"",f=s||"",p=c==d&&u==f;if(this.frame.rect=0,n.addClass(i),l.width=Object(h.isNumber)(d)?"".concat(d).concat("px"):d,l.height=Object(h.isNumber)(f)?"".concat(f).concat("px"):f,Object(h.isNull)(a)||Object(h.isNull)(s)){var g=A(A({},a?{}:{width:e.offsetWidth}),s?{}:{height:e.offsetHeight});r.set(g,{silent:1})}t.stopDefault({preserveSelected:1}),p?this.updateOffset():n.one(j.i,this.updateOffset)},onScroll:function(){var t=this.frame;this.em.trigger("frame:scroll",{frame:t,body:t.getBody(),target:t.getWindow()})},frameLoaded:function(){this.frame.getWindow().onscroll=this.onScroll,this.updateDim()},render:function(){var t=this.frame,e=this.$el,n=this.ppfx,r=this.cv,i=this.model,o=this.el,a=i.attributes.onRender;t.render(),e.empty().attr({class:"".concat(n,"frame-wrapper")}).append('\n \n
\n ').concat(i.get("name")||"",'\n
\n
\n
\n
\n
\n
\n ')).append(t.el);var s=Object(j.e)("div",{class:"".concat(n,"tools"),style:"pointer-events:none; display: none"},'\n
\n
\n \n
\n
\n
\n \n
\n '));return this.elTools=s,r.toolsWrapper.appendChild(s),a&&a({el:o,elTop:o.querySelector("[data-frame-top]"),elRight:o.querySelector("[data-frame-right]"),elBottom:o.querySelector("[data-frame-bottom]"),elLeft:o.querySelector("[data-frame-left]"),frame:i,frameWrapperView:this,remove:this.remove,startDrag:this.startDrag}),this}}),_=C.a.extend({itemView:L,autoAdd:1,init:function(){this.listenTo(this.collection,"reset",this.render)},onRender:function(){var t=this.config,e=this.$el,n=t.em;n&&e.attr({class:"".concat(n.getConfig("stylePrefix"),"frames")})}});function N(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n.push.apply(n,r)}return n}function I(t){for(var e=1;e \n
\n ')},initialize:function(t){Object(h.bindAll)(this,"clearOff","onKeyPress","onCanvasMove"),Object(s.v)(window,"scroll resize",this.clearOff);var e=this.model,n=e.get("frames");this.config=t.config||{},this.em=this.config.em||{},this.pfx=this.config.stylePrefix||"",this.ppfx=this.config.pStylePrefix||"",this.className=this.config.stylePrefix+"canvas";var r=this.em,i=this.config;this.frames=new _({collection:n,config:I(I({},i),{},{canvasView:this,renderContent:1})}),this.listenTo(r,"change:canvasOffset",this.clearOff),this.listenTo(r,"component:selected",this.checkSelected),this.listenTo(e,"change:zoom change:x change:y",this.updateFrames),this.listenTo(n,"loaded:all",function(){return r.trigger("loaded")}),this.toggleListeners(1)},checkSelected:function(t){var e=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).scroll,n=this.em.get("currentFrame");e&&t.views.forEach(function(t){t._getFrame()!==n&&t.scrollIntoView(e)})},remove:function(){var t=this.model.get("frames");t.remove(t.models),this.frames.remove(),this.frames={},v.a.View.prototype.remove.apply(this,arguments),this.toggleListeners()},preventDefault:function(t){t&&(t.preventDefault(),t._parentEvent&&t._parentEvent.preventDefault())},onCanvasMove:function(t){},toggleListeners:function(t){this.el,(t?s.v:s.u)(document,"keypress",this.onKeyPress)},onKeyPress:function(t){var e=this.em;" "!==Object(s.f)(t)||1===e.getZoomDecimal()||e.get("Canvas").isInputFocused()||(this.preventDefault(t),e.get("Editor").runCommand("core:canvas-move"))},onWheel:function(t){if((t.ctrlKey||t.metaKey)&&this.em.getConfig("multiFrames")){this.preventDefault(t);var e=this.model,n=Math.max(-1,Math.min(1,t.wheelDelta||-t.detail)),r=e.get("zoom");e.set("zoom",r+2*n)}},updateFrames:function(t){var e=this.em,n=this.model.attributes,r=n.x,i=n.y,o=this.getZoom(),a={preserveSelected:1},s=o?1/o:1;this.framesArea.style.transform="scale(".concat(o,") translate(").concat(r*s,"px, ").concat(i*s,"px)"),this.clearOff(),e.stopDefault(a),e.trigger("canvas:update",t),F&&clearTimeout(F),F=setTimeout(function(){return e.runDefault(a)},300)},getZoom:function(){return this.em.getZoomDecimal()},isElInViewport:function(t){var e=Object(s.e)(t),n=Object(s.d)(e),r=this.getFrameOffset(e),i=n.top,o=n.left;return i>=0&&o>=0&&i<=r.height&&o<=r.width},offset:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=Object(s.d)(t),r=t.ownerDocument.body,i=e.noScroll;return{top:n.top+(i?0:r.scrollTop),left:n.left+(i?0:r.scrollLeft),width:n.width,height:n.height}},clearOff:function(){this.frmOff=null,this.cvsOff=null},getFrameOffset:function(t){if(!this.frmOff||t){var e=this.frame.el,n=t?t.ownerDocument.defaultView.frameElement:e;this.frmOff=this.offset(n||e)}return this.frmOff},getCanvasOffset:function(){return this.cvsOff||(this.cvsOff=this.offset(this.el)),this.cvsOff},getElementPos:function(t,e){var n=this.getZoom(),r=e||{},i=this.getFrameOffset(t),o=this.getCanvasOffset(),a=this.offset(t,e),s=r.avoidFrameOffset?0:i.top,l=r.avoidFrameOffset?0:i.left;return{top:a.top*n+s-o.top,left:a.left*n+l-o.left,height:a.height*n,width:a.width*n,zoom:n,rect:a}},getElementOffsets:function(t){var e=this;if(!t||Object(s.r)(t))return{};var n={},r=window.getComputedStyle(t);return["marginTop","marginRight","marginBottom","marginLeft","paddingTop","paddingRight","paddingBottom","paddingLeft"].forEach(function(t){n[t]=parseFloat(r[t])*e.getZoom()}),n},getPosition:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=this.frame.el.contentDocument;if(e){var n=e.body,r=this.getZoom(),i=this.getFrameOffset(),o=this.getCanvasOffset(),a=t.noScroll;return{top:i.top+(a?0:n.scrollTop)*r-o.top,left:i.left+(a?0:n.scrollLeft)*r-o.left,width:o.width,height:o.height}}},updateScript:function(t){var e=t.model,n=e.getId();t.scriptContainer||(t.scriptContainer=V('')),this.getJsContainer().appendChild(t.scriptContainer.get(0))),t.el.id=n,t.scriptContainer.html("");var r=document.createElement("script"),i=e.getScriptString(),o=e.get("script-props")?i:"function(){\n".concat(i,"\n;}"),a=JSON.stringify(e.__getScriptProps());r.innerHTML="\n setTimeout(function() {\n var item = document.getElementById('".concat(n,"');\n if (!item) return;\n (").concat(o,".bind(item))(").concat(a,")\n }, 1);"),setTimeout(function(){var e=t.scriptContainer;e&&e.get(0).appendChild(r)},0)},getJsContainer:function(t){var e=this.getFrameView(t);return e&&e.getJsContainer()},getFrameView:function(t){return t&&t._getFrame()||this.em.get("currentFrame")},render:function(){var t=this.el,e=this.$el,n=this.ppfx,r=this.model,i=this.em,o=this.frames,a=i.get("CssComposer"),s=r.get("wrapper");e.html(this.template());var l=e.find("[data-frames]");this.framesArea=l.get(0),this.wrapper=s,s&&"function"==typeof s.render&&r.get("frame").set({wrapper:s,root:s.getWrapper(),styles:a.getAll()});var c=e.find("[data-tools]");this.toolsWrapper=c.get(0),c.append('\n
\n
\n '));var u=t.querySelector("#".concat(n,"tools"));this.hlEl=t.querySelector(".".concat(n,"highlighter")),this.badgeEl=t.querySelector(".".concat(n,"badge")),this.placerEl=t.querySelector(".".concat(n,"placeholder")),this.ghostEl=t.querySelector(".".concat(n,"ghost")),this.toolbarEl=t.querySelector(".".concat(n,"toolbar")),this.resizerEl=t.querySelector(".".concat(n,"resizer")),this.offsetEl=t.querySelector(".".concat(n,"offset-v")),this.fixedOffsetEl=t.querySelector(".".concat(n,"offset-fixed-v")),this.toolsGlobEl=t.querySelector(".".concat(n,"tools-gl")),this.toolsEl=u,this.el.className=this.className;var d=r.get("frames");return d.listenToLoad(),o.render(),i.setCurrentFrame(d.at(0).view),l.append(o.el),this.frame=d.at(0).view,this}});function z(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n.push.apply(n,r)}return n}function H(t){for(var e=1;e
0&&void 0!==arguments[0]?arguments[0]:{};n=H(H(H({},p),r),{},{module:this}),this.em=n.em;var i=n.pStylePrefix;i&&(n.stylePrefix=i+n.stylePrefix),t=new O(r),e=new R({model:t,config:n});var o=n.em.get("DomComponents");return o&&this.setWrapper(o),this.model=t,this.startAutoscroll=this.startAutoscroll.bind(this),this.stopAutoscroll=this.stopAutoscroll.bind(this),this},getConfig:function(){return n},setWrapper:function(e){t.set("wrapper",e)},getElement:function(){return e.el},getFrame:function(e){return e?this.getFrames()[e]:t.get("frame")},getFrameEl:function(){var t=e.frame;return t&&t.el},getFramesEl:function(){return e.framesArea},getWindow:function(){return this.getFrameEl().contentWindow},getDocument:function(){var t=this.getFrameEl();return t&&t.contentDocument},getBody:function(){var t=this.getDocument();return t&&t.body},getWrapperEl:function(){var t=this.getBody();return t&&t.querySelector("#wrapper")},_getCompFrame:function(t){return t&&t._getFrame()},_getLocalEl:function(t,e,n){var r=t,i=this._getCompFrame(e);return i?i[n]():r},getGlobalToolsEl:function(){return e.toolsGlobEl},getToolsEl:function(t){return this._getLocalEl(e.toolsEl,t,"getToolsEl")},getHighlighter:function(t){return this._getLocalEl(e.hlEl,t,"getHighlighter")},getBadgeEl:function(t){return this._getLocalEl(e.badgeEl,t,"getBadgeEl")},getPlacerEl:function(){return e.placerEl},getGhostEl:function(){return e.ghostEl},getToolbarEl:function(){return e.toolbarEl},getResizerEl:function(){return e.resizerEl},getOffsetViewerEl:function(t){return this._getLocalEl(e.offsetEl,t,"getOffsetViewerEl")},getFixedOffsetViewerEl:function(){return e.fixedOffsetEl},render:function(){return e.render().el},getOffset:function(){var t=this.offset(this.getFrameEl()),e=this.offset(this.getElement());return{top:t.top-e.top,left:t.left-e.left}},offset:function(t){return e.offset(t)},setCustomBadgeLabel:function(t){n.customBadgeLabel=t},getElementPos:function(t,n){return e.getElementPos(t,n)},getElementOffsets:function(t){return e.getElementOffsets(t)},getRect:function(){var t=e.getPosition(),n=t.top,r=t.left;return H(H({},e.getCanvasOffset()),{},{topScroll:n,leftScroll:r})},getTargetToElementDim:function(t,r){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=i||{},a=e.getPosition();if(a){var s=o.elPos||e.getElementPos(r),l=i.toRight||0,c=o.targetHeight||t.offsetHeight,u=o.targetWidth||t.offsetWidth,d=o.event||null,h=s.top-c,f=s.left;f+=l?s.width:0;var p=(f=l?f-u:f)s.top+s.height?s.top+s.height:g,left:p,elementTop:s.top,elementLeft:s.left,elementWidth:s.width,elementHeight:s.height,targetWidth:t.offsetWidth,targetHeight:t.offsetHeight,canvasTop:a.top,canvasLeft:a.left,canvasWidth:a.width,canvasHeight:a.height};return d&&n.em&&n.em.trigger(d,v),v}},canvasRectOffset:function(t,e){var n=this,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,i=arguments.length>2?arguments[2]:void 0,o=n.em.getZoomDecimal(),a=e?"top":"left",s=t.ownerDocument,l=r.offset?function(t){var e=t.defaultView;return e&&e.frameElement}(s):{},c=l.offsetTop,u=void 0===c?0:c,d=l.offsetLeft,h=void 0===d?0:d,f=s.body||{},p=f.scrollTop,g=void 0===p?0:p,v=f.scrollLeft,m=e?g:void 0===v?0:v,b=e?u:h;return i[a]-(m-b)*o};return{top:i(t,1,e),left:i(t,0,e)}},getTargetToElementFixed:function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.pos||this.getElementPos(t),i=n.canvasOff||this.canvasRectOffset(t,r),o=e.offsetHeight||0,a=e.offsetWidth||0,s=r.left+r.width,l=this.getCanvasView(),c=l.getPosition(),u=l.getFrameOffset(t),d=n.event,h=-o,f=r.width-a;f=r.left<-f?-r.left:f,f=s>c.width?f-(s-c.width):f;var p=r.height+o,g=p1&&void 0!==arguments[1]?arguments[1]:{},n=Object(s.e)(t),r=n&&Object(s.j)(n);r&&r.scrollIntoView(e)},startAutoscroll:function(t){var e=t&&t.view||this.em.getCurrentFrame();e&&e.startAutoscroll()},stopAutoscroll:function(t){var e=t&&t.view||this.em.getCurrentFrame();e&&e.stopAutoscroll()},postRender:function(){Object(s.k)(n.em)&&(this.droppable=new f(n.em))},setZoom:function(e){return t.set("zoom",parseFloat(e)),this},getZoom:function(){return parseFloat(t.get("zoom"))},getZoomDecimal:function(){return this.getZoom()/100},getZoomMultiplier:function(){var t=this.getZoomDecimal();return t?1/t:1},toggleFramesEvents:function(t){this.getFramesEl().style.pointerEvents=t?"":"none"},getFrameWrapperEl:function(){return e.frame.getWrapper()},getFrames:function(){return t.get("frames").map(function(t){return t})},addFrame:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return t.get("frames").add(H({},e),H(H({},n),{},{em:this.em}))},destroy:function(){var r=this;t.stopListening(),e.remove(),[n,t,e].forEach(function(t){return{}}),["em","model","droppable"].forEach(function(t){return r[t]={}})}}}},function(t,e,n){"use strict";n.r(e);var r=n(2),i=n.n(r),o=n(11),a={stylePrefix:"gjs-",components:"",style:"",fromElement:0,noticeOnUnload:!0,showOffsets:!1,showOffsetsSelected:!1,forceClass:!0,height:"900px",width:"100%",log:["warning","error"],baseCss:"\n * {\n box-sizing: border-box;\n }\n html, body, [data-gjs-type=wrapper] {\n min-height: 100%;\n }\n body {\n margin: 0;\n height: 100%;\n background-color: #fff\n }\n [data-gjs-type=wrapper] {\n overflow: auto;\n overflow-x: hidden;\n }\n\n * ::-webkit-scrollbar-track {\n background: rgba(0, 0, 0, 0.1)\n }\n\n * ::-webkit-scrollbar-thumb {\n background: rgba(255, 255, 255, 0.2)\n }\n\n * ::-webkit-scrollbar {\n width: 10px\n }\n ",protectedCss:"* { box-sizing: border-box; } body {margin: 0;}",canvasCss:"",defaultCommand:"select-comp",showToolbar:1,allowScripts:0,showDevices:1,devicePreviewMode:0,mediaCondition:"max-width",tagVarStart:"{[ ",tagVarEnd:" ]}",keepEmptyTextNodes:0,jsInHtml:!0,nativeDnD:1,multipleSelection:1,exportWrapper:0,wrapperIsBody:1,optsHtml:{},optsCss:{},avoidInlineStyle:1,avoidDefaults:1,clearStyles:0,dragMode:0,listenToEl:[],cssIcons:"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css",el:"",i18n:{},undoManager:{},assetManager:{},canvas:{},layers:{},storageManager:{},richTextEditor:{},domComponents:{},modal:{},codeManager:{},panels:{},commands:{},cssComposer:{},selectorManager:{},deviceManager:{devices:[{id:"desktop",name:"Desktop",width:""},{id:"tablet",name:"Tablet",width:"768px",widthMedia:"992px"},{id:"mobileLandscape",name:"Mobile landscape",width:"568px",widthMedia:"768px"},{id:"mobilePortrait",name:"Mobile portrait",width:"320px",widthMedia:"480px"}]},styleManager:{sectors:[{name:"General",open:!1,buildProps:["float","display","position","top","right","left","bottom"]},{name:"Flex",open:!1,buildProps:["flex-direction","flex-wrap","justify-content","align-items","align-content","order","flex-basis","flex-grow","flex-shrink","align-self"]},{name:"Dimension",open:!1,buildProps:["width","height","max-width","min-height","margin","padding"]},{name:"Typography",open:!1,buildProps:["font-family","font-size","font-weight","letter-spacing","color","line-height","text-align","text-shadow"],properties:[{property:"text-align",list:[{value:"left",className:"fa fa-align-left"},{value:"center",className:"fa fa-align-center"},{value:"right",className:"fa fa-align-right"},{value:"justify",className:"fa fa-align-justify"}]}]},{name:"Decorations",open:!1,buildProps:["border-radius-c","background-color","border-radius","border","box-shadow","background"]},{name:"Extra",open:!1,buildProps:["transition","perspective","transform"]}]},blockManager:{},traitManager:{},textViewCode:"Code",keepUnusedStyles:0,multiFrames:0},s=n(0),l=n(1),c=n.n(l),u=n(3);function d(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n.push.apply(n,r)}return n}function h(t){for(var e=1;e0&&void 0!==arguments[0]?arguments[0]:{};this.config=e,this.set("Config",e),this.set("modules",[]),this.set("toLoad",[]),this.set("storables",[]),this.set("selected",new v),this.set("dmode",e.dragMode);var n=e.el,r=e.log,i=!0===r?Object(s.keys)(m):Object(s.isArray)(r)?r:[];Object(s.bindAll)(this,"initBaseColorPicker"),n&&e.fromElement&&(this.config.components=n.innerHTML),this.attrsOrig=n?Object(s.toArray)(n.attributes).reduce(function(t,e){return t[e.nodeName]=e.nodeValue,t},{}):"",g.forEach(function(e){return t.loadModule(e)}),this.on("change:componentHovered",this.componentHovered,this),this.on("change:changesCount",this.updateChanges,this),i.forEach(function(e){return t.listenLog(e)}),[{from:"change:selectedComponent",to:"component:toggled"}].forEach(function(e){var n=e.from,r=e.to;t.listenTo(t,n,function(){for(var e=arguments.length,i=new Array(e),o=0;o0&&void 0!==arguments[0]?arguments[0]:null,n=this.get("StorageManager");this.get("toLoad").forEach(function(t){t.onLoad()});var r=function(){t.get("modules").forEach(function(e){return e.postLoad&&e.postLoad(t)}),e&&e()};n&&n.canAutoload()?this.load(r):r()},updateChanges:function(){var t=this,e=this.get("StorageManager"),n=this.get("changesCount");p&&clearTimeout(p),p=setTimeout(function(){return t.trigger("update")}),this.config.noticeOnUnload&&(window.onbeforeunload=n?function(t){return 1}:null),e.isAutosave()&&n>=e.getStepsBeforeSave()&&this.store()},loadModule:function(t){var e=this.config,n=new(t.default||t),r=n.name.charAt(0).toLowerCase()+n.name.slice(1),i=Object(s.isUndefined)(e[r])?e[n.name]:e[r],o=i||{},a=this.get("StorageManager");if(o.pStylePrefix=e.pStylePrefix||"",Object(s.isUndefined)(i)||i||(o._disable=1),n.storageKey&&n.store&&n.load&&a){o.stm=a;var l="domComponents"==r?"unshift":"push";this.get("storables")[l](n)}return o.em=this,n.init(h({},o)),!n.private&&this.set(n.name,n),n.onLoad&&this.get("toLoad").push(n),this.get("modules").push(n),this},init:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.destroyed&&(this.initialize(e),this.destroyed=0),this.set("Editor",t)},getEditor:function(){return this.get("Editor")},handleUpdates:function(t,e){var n=this,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};r.temporary||r.noCount||r.avoidStore||(f&&clearTimeout(f),f=setTimeout(function(){n.set("changesCount",n.get("changesCount")+1,r)},0))},componentHovered:function(t,e,n){var r=this.previous("componentHovered");r&&this.trigger("component:unhovered",r,n),e&&this.trigger("component:hovered",e,n)},getSelected:function(){return this.get("selected").last()},getSelectedAll:function(){var t=this.get("selected");return t&&t.models||[]},setSelected:function(t){var e=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=n.event,i=r&&(r.ctrlKey||r.metaKey),a=(r||{}).shiftKey,l=Object(s.isArray)(t),c=l?t:[t],d=this.get("selected"),h=this.getConfig("multipleSelection");l&&this.removeSelected(d.filter(function(t){return!Object(s.contains)(c,t)})),c.forEach(function(t){var r=Object(u.g)(t,o.default);if(!r||r.get("selectable")){if(i&&h)return e.toggleSelected(r);if(a&&h){e.clearSelection(e.get("Canvas").getWindow());var c,f,p=r.collection,g=r.index();if(e.getSelectedAll().forEach(function(t){var e=t.collection,n=t.index();e===p&&(ng&&(f=Object(s.isUndefined)(f)?n:Math.min(f,n)))}),!Object(s.isUndefined)(c))for(;c!==g;)e.addSelected(p.at(c)),c++;if(!Object(s.isUndefined)(f))for(;f!==g;)e.addSelected(p.at(f)),f--;return e.addSelected(r)}!l&&e.removeSelected(d.filter(function(t){return t!==r})),e.addSelected(r,n)}})},addSelected:function(t){var e=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=Object(u.g)(t,o.default);(Object(s.isArray)(r)?r:[r]).forEach(function(t){if(!t||t.get("selectable")){var r=e.get("selected");n.forceChange&&r.remove(t,n),r.push(t,n)}})},removeSelected:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.get("selected").remove(Object(u.g)(t,o.default),e)},toggleSelected:function(t){var e=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=Object(u.g)(t,o.default);(Object(s.isArray)(r)?r:[r]).forEach(function(t){e.get("selected").contains(t)?e.removeSelected(t,n):e.addSelected(t,n)})},setHovered:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=Object(u.g)(t,o.default);n&&!n.get("hoverable")||(e.forceChange&&this.set("componentHovered",""),this.set("componentHovered",n,e))},getHovered:function(){return this.get("componentHovered")},setComponents:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return this.get("DomComponents").setComponents(t,e)},getComponents:function(){var t=this.get("DomComponents"),e=this.get("CodeManager");if(t&&e){var n=t.getComponents();return e.getCode(n,"json")}},setStyle:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=this.get("CssComposer");return n.clear(e),n.getAll().add(t,e),this},getStyle:function(){return this.get("CssComposer").getAll()},setState:function(t){return this.set("state",t),this},getState:function(){return this.get("state")||""},getHtml:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=this.config,n=e.optsHtml,r=e.exportWrapper,i=e.wrapperIsBody,o=e.jsInHtml?this.getJs():"",a=this.get("DomComponents").getComponent();return this.get("CodeManager").getCode(a,"html",h(h({exportWrapper:r,wrapperIsBody:i},n),t))+(o?"` : '';\n return html;\n },\n\n /**\n * Returns CSS built inside canvas\n * @param {Object} [opts={}] Options\n * @returns {string} CSS string\n * @private\n */\n getCss(opts = {}) {\n const config = this.config;\n const { optsCss } = config;\n const wrapperIsBody = config.wrapperIsBody;\n const avoidProt = opts.avoidProtected;\n const keepUnusedStyles = !isUndefined(opts.keepUnusedStyles)\n ? opts.keepUnusedStyles\n : config.keepUnusedStyles;\n const cssc = this.get('CssComposer');\n const wrp = this.get('DomComponents').getComponent();\n const protCss = !avoidProt ? config.protectedCss : '';\n\n return (\n protCss +\n this.get('CodeManager').getCode(wrp, 'css', {\n cssc,\n wrapperIsBody,\n keepUnusedStyles,\n ...optsCss\n })\n );\n },\n\n /**\n * Returns JS of all components\n * @return {string} JS string\n * @private\n */\n getJs() {\n var wrp = this.get('DomComponents').getWrapper();\n return this.get('CodeManager')\n .getCode(wrp, 'js')\n .trim();\n },\n\n /**\n * Store data to the current storage\n * @param {Function} clb Callback function\n * @return {Object} Stored data\n * @private\n */\n store(clb) {\n var sm = this.get('StorageManager');\n var store = {};\n if (!sm) return;\n\n // Fetch what to store\n this.get('storables').forEach(m => {\n var obj = m.store(1);\n for (var el in obj) store[el] = obj[el];\n });\n\n sm.store(store, res => {\n clb && clb(res);\n this.set('changesCount', 0);\n this.trigger('storage:store', store);\n });\n\n return store;\n },\n\n /**\n * Load data from the current storage\n * @param {Function} clb Callback function\n * @private\n */\n load(clb = null) {\n this.getCacheLoad(1, res => {\n this.get('storables').forEach(module => {\n module.load(res);\n module.postLoad && module.postLoad(this);\n });\n clb && clb(res);\n });\n },\n\n /**\n * Returns cached load\n * @param {Boolean} force Force to reload\n * @param {Function} clb Callback function\n * @return {Object}\n * @private\n */\n getCacheLoad(force, clb) {\n if (this.cacheLoad && !force) return this.cacheLoad;\n const sm = this.get('StorageManager');\n const load = [];\n\n if (!sm) return {};\n\n this.get('storables').forEach(m => {\n let key = m.storageKey;\n key = isFunction(key) ? key() : key;\n const keys = isArray(key) ? key : [key];\n keys.forEach(k => load.push(k));\n });\n\n sm.load(load, res => {\n this.cacheLoad = res;\n clb && clb(res);\n setTimeout(() => this.trigger('storage:load', res));\n });\n },\n\n /**\n * Returns device model by name\n * @return {Device|null}\n * @private\n */\n getDeviceModel() {\n var name = this.get('device');\n return this.get('DeviceManager').get(name);\n },\n\n /**\n * Run default command if setted\n * @param {Object} [opts={}] Options\n * @private\n */\n runDefault(opts = {}) {\n var command = this.get('Commands').get(this.config.defaultCommand);\n if (!command || this.defaultRunning) return;\n command.stop(this, this, opts);\n command.run(this, this, opts);\n this.defaultRunning = 1;\n },\n\n /**\n * Stop default command\n * @param {Object} [opts={}] Options\n * @private\n */\n stopDefault(opts = {}) {\n const commands = this.get('Commands');\n const command = commands.get(this.config.defaultCommand);\n if (!command) return;\n command.stop(this, this, opts);\n this.defaultRunning = 0;\n },\n\n /**\n * Update canvas dimensions and refresh data useful for tools positioning\n * @private\n */\n refreshCanvas(opts = {}) {\n this.set('canvasOffset', null);\n this.set('canvasOffset', this.get('Canvas').getOffset());\n opts.tools && this.trigger('canvas:updateTools');\n },\n\n /**\n * Clear all selected stuf inside the window, sometimes is useful to call before\n * doing some dragging opearation\n * @param {Window} win If not passed the current one will be used\n * @private\n */\n clearSelection(win) {\n var w = win || window;\n w.getSelection().removeAllRanges();\n },\n\n /**\n * Get the current media text\n * @return {string}\n */\n getCurrentMedia() {\n const config = this.config;\n const device = this.getDeviceModel();\n const condition = config.mediaCondition;\n const preview = config.devicePreviewMode;\n const width = device && device.get('widthMedia');\n return device && width && !preview ? `(${condition}: ${width})` : '';\n },\n\n /**\n * Return the component wrapper\n * @return {Component}\n */\n getWrapper() {\n return this.get('DomComponents').getWrapper();\n },\n\n setCurrentFrame(frameView) {\n return this.set('currentFrame', frameView);\n },\n\n getCurrentFrame() {\n return this.get('currentFrame');\n },\n\n getCurrentFrameModel() {\n return (this.getCurrentFrame() || {}).model;\n },\n\n /**\n * Return the count of changes made to the content and not yet stored.\n * This count resets at any `store()`\n * @return {number}\n */\n getDirtyCount() {\n return this.get('changesCount');\n },\n\n getZoomDecimal() {\n return this.get('Canvas').getZoomDecimal();\n },\n\n getZoomMultiplier() {\n return this.get('Canvas').getZoomMultiplier();\n },\n\n setDragMode(value) {\n return this.set('dmode', value);\n },\n\n t(...args) {\n return this.get('I18n').t(...args);\n },\n\n /**\n * Returns true if the editor is in absolute mode\n * @returns {Boolean}\n */\n inAbsoluteMode() {\n return this.get('dmode') === 'absolute';\n },\n\n /**\n * Destroy editor\n */\n destroyAll() {\n const { config } = this;\n const editor = this.getEditor();\n const { editors = [] } = config.grapesjs || {};\n this.stopDefault();\n this.get('modules')\n .slice()\n .reverse()\n .forEach(mod => mod.destroy());\n this.view.remove();\n this.stopListening();\n this.clear({ silent: true });\n this.destroyed = 1;\n ['config', 'view', '_previousAttributes', '_events', '_listeners'].forEach(\n i => (this[i] = {})\n );\n editors.splice(editors.indexOf(editor), 1);\n $(config.el)\n .empty()\n .attr(this.attrsOrig);\n },\n\n setEditing(value) {\n this.set('editing', value);\n return this;\n },\n\n isEditing() {\n return !!this.get('editing');\n },\n\n log(msg, opts = {}) {\n const { ns, level = 'debug' } = opts;\n this.trigger('log', msg, opts);\n level && this.trigger(`log:${level}`, msg, opts);\n\n if (ns) {\n const logNs = `log-${ns}`;\n this.trigger(logNs, msg, opts);\n level && this.trigger(`${logNs}:${level}`, msg, opts);\n }\n },\n\n logInfo(msg, opts) {\n this.log(msg, { ...opts, level: 'info' });\n },\n\n logWarning(msg, opts) {\n this.log(msg, { ...opts, level: 'warning' });\n },\n\n logError(msg, opts) {\n this.log(msg, { ...opts, level: 'error' });\n },\n\n initBaseColorPicker(el, opts = {}) {\n const config = this.getConfig();\n const { colorPicker = {} } = config;\n const elToAppend = config.el;\n const ppfx = config.stylePrefix;\n\n return $(el).spectrum({\n containerClassName: `${ppfx}one-bg ${ppfx}two-color`,\n appendTo: elToAppend || 'body',\n maxSelectionSize: 8,\n showPalette: true,\n palette: [],\n showAlpha: true,\n chooseText: 'Ok',\n cancelText: '⨯',\n ...opts,\n ...colorPicker\n });\n },\n\n /**\n * Set/get data from the HTMLElement\n * @param {HTMLElement} el\n * @param {string} name Data name\n * @param {any} value Date value\n * @return {any}\n * @private\n */\n data(el, name, value) {\n const varName = '_gjs-data';\n\n if (!el[varName]) {\n el[varName] = {};\n }\n\n if (isUndefined(value)) {\n return el[varName][name];\n } else {\n el[varName][name] = value;\n }\n }\n});\n","import { isObject, isString, each, isUndefined } from 'underscore';\n\nexport default ({ $ }) => {\n if ($ && $.prototype.constructor.name !== 'jQuery') {\n const fn = $.fn;\n\n // Additional helpers\n\n fn.hide = function() {\n return this.css('display', 'none');\n };\n\n fn.show = function() {\n return this.css('display', 'block');\n };\n\n fn.focus = function() {\n const el = this.get(0);\n el && el.focus();\n return this;\n };\n\n // For SVGs in IE\n // (fn.removeClass = function(c) {\n // if (!arguments.length) {\n // return this.attr('class', '');\n // }\n // const classes = isString(c) && c.match(/\\S+/g);\n // return classes\n // ? this.each(function(el) {\n // each(classes, function(c) {\n // if (el.classList) {\n // el.classList.remove(c);\n // } else {\n // const val = el.className;\n // const bval = el.className.baseVal;\n\n // if (!isUndefined(bval)) {\n // val.baseVal = bval.replace(c, '');\n // } else {\n // el.className = val.replace(c, '');\n // }\n // }\n // });\n // })\n // : this;\n // }),\n // (fn.remove = function() {\n // return this.each(node => {\n // return node.parentNode && node.parentNode.removeChild(node);\n // });\n // }),\n\n // For spectrum compatibility\n\n fn.bind = function(ev, h) {\n return this.on(ev, h);\n };\n\n fn.unbind = function(ev, h) {\n if (isObject(ev)) {\n for (let name in ev) {\n ev.hasOwnProperty(name) && this.off(name, ev[name]);\n }\n\n return this;\n } else {\n return this.off(ev, h);\n }\n };\n\n fn.click = function(h) {\n return h ? this.on('click', h) : this.trigger('click');\n };\n\n fn.change = function(h) {\n return h ? this.on('change', h) : this.trigger('change');\n };\n\n fn.keydown = function(h) {\n return h ? this.on('keydown', h) : this.trigger('keydown');\n };\n\n fn.delegate = function(selector, events, data, handler) {\n if (!handler) {\n handler = data;\n }\n\n return this.on(events, selector, function(e) {\n e.data = data;\n handler(e);\n });\n };\n\n fn.scrollLeft = function() {\n let el = this.get(0);\n el = el.nodeType == 9 ? el.defaultView : el;\n let win = el instanceof Window ? el : null;\n return win ? win.pageXOffset : el.scrollLeft || 0;\n };\n\n fn.scrollTop = function() {\n let el = this.get(0);\n el = el.nodeType == 9 ? el.defaultView : el;\n let win = el instanceof Window ? el : null;\n return win ? win.pageYOffset : el.scrollTop || 0;\n };\n\n const offset = $.prototype.offset;\n fn.offset = function(coords) {\n let top, left;\n\n if (coords) {\n top = coords.top;\n left = coords.left;\n }\n\n if (typeof top != 'undefined') {\n this.css('top', `${top}px`);\n }\n if (typeof left != 'undefined') {\n this.css('left', `${left}px`);\n }\n\n return offset.call(this);\n };\n\n $.map = function(items, clb) {\n const ar = [];\n\n for (var i = 0; i < items.length; i++) {\n ar.push(clb(items[i], i));\n }\n\n return ar;\n };\n\n const indexOf = Array.prototype.indexOf;\n\n $.inArray = function(val, arr, i) {\n return arr == null ? -1 : indexOf.call(arr, val, i);\n };\n\n $.Event = function(src, props) {\n if (!(this instanceof $.Event)) {\n return new $.Event(src, props);\n }\n\n this.type = src;\n this.isDefaultPrevented = () => false;\n };\n }\n};\n","import Backbone from 'backbone';\nimport { appendStyles } from 'utils/mixins';\n\nconst $ = Backbone.$;\n\nexport default Backbone.View.extend({\n initialize() {\n const { model } = this;\n model.view = this;\n this.conf = model.config;\n this.pn = model.get('Panels');\n this.cv = model.get('Canvas');\n model.on('loaded', () => {\n this.pn.active();\n this.pn.disableButtons();\n setTimeout(() => {\n model.runDefault();\n model.trigger('load', model.get('Editor'));\n });\n });\n },\n\n render() {\n const { model, $el, conf } = this;\n const pfx = conf.stylePrefix;\n const contEl = $(conf.el || `body ${conf.container}`);\n appendStyles(conf.cssIcons, { unique: 1, prepand: 1 });\n $el.empty();\n\n if (conf.width) contEl.css('width', conf.width);\n if (conf.height) contEl.css('height', conf.height);\n\n $el.append(this.cv.render());\n $el.append(this.pn.render());\n $el.attr('class', `${pfx}editor ${pfx}one-bg ${pfx}two-color`);\n contEl\n .addClass(`${pfx}editor-cont`)\n .empty()\n .append($el);\n\n return this;\n }\n});\n","/**\n * Editor contains the top level API which you'll probably use to customize the editor or extend it with plugins.\n * You get the Editor instance on init method and you can pass options via its [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/editor/config/config.js)\n *\n * ```js\n * const editor = grapesjs.init({\n * // options\n * });\n * ```\n *\n * ## Available Events\n *\n * You can make use of available events in this way\n * ```js\n * editor.on('EVENT-NAME', (some, argument) => {\n * // do something\n * })\n * ```\n *\n * ### Components\n * * `component:create` - Component is created (only the model, is not yet mounted in the canvas), called after the init() method\n * * `component:mount` - Component is mounted to an element and rendered in canvas\n * * `component:add` - Triggered when a new component is added to the editor, the model is passed as an argument to the callback\n * * `component:remove` - Triggered when a component is removed, the model is passed as an argument to the callback\n * * `component:remove:before` - Triggered before the remove of the component, the model, remove function (if aborted via options, with this function you can complete the remove) and options (use options.abort = true to prevent remove), are passed as arguments to the callback\n * * `component:clone` - Triggered when a component is cloned, the new model is passed as an argument to the callback\n * * `component:update` - Triggered when a component is updated (moved, styled, etc.), the model is passed as an argument to the callback\n * * `component:update:{propertyName}` - Listen any property change, the model is passed as an argument to the callback\n * * `component:styleUpdate` - Triggered when the style of the component is updated, the model is passed as an argument to the callback\n * * `component:styleUpdate:{propertyName}` - Listen for a specific style property change, the model is passed as an argument to the callback\n * * `component:selected` - New component selected, the selected model is passed as an argument to the callback\n * * `component:deselected` - Component deselected, the deselected model is passed as an argument to the callback\n * * `component:toggled` - Component selection changed, toggled model is passed as an argument to the callback\n * * `component:type:add` - New component type added, the new type is passed as an argument to the callback\n * * `component:type:update` - Component type updated, the updated type is passed as an argument to the callback\n * * `component:drag:start` - Component drag started. Passed an object, to the callback, containing the `target` (component to drag), `parent` (parent of the component) and `index` (component index in the parent)\n * * `component:drag` - During component drag. Passed the same object as in `component:drag:start` event, but in this case, `parent` and `index` are updated by the current pointer\n * * `component:drag:end` - Component drag ended. Passed the same object as in `component:drag:start` event, but in this case, `parent` and `index` are updated by the final pointer\n * ### Blocks\n * * `block:add` - New block added\n * * `block:remove` - Block removed\n * * `block:drag:start` - Started dragging block, model of the block is passed as an argument\n * * `block:drag` - Dragging block, the block's model and the drag event are passed as arguments\n * * `block:drag:stop` - Dragging of the block is stopped. As agruments for the callback you get, the dropped component model (if dropped successfully) and the model of the block\n * ### Assets\n * * `asset:add` - New asset added\n * * `asset:remove` - Asset removed\n * * `asset:upload:start` - Before the upload is started\n * * `asset:upload:end` - After the upload is ended\n * * `asset:upload:error` - On any error in upload, passes the error as an argument\n * * `asset:upload:response` - On upload response, passes the result as an argument\n * ### Keymaps\n * * `keymap:add` - New keymap added. The new keyamp object is passed as an argument\n * * `keymap:remove` - Keymap removed. The removed keyamp object is passed as an argument\n * * `keymap:emit` - Some keymap emitted, in arguments you get keymapId, shortcutUsed, Event\n * * `keymap:emit:{keymapId}` - `keymapId` emitted, in arguments you get keymapId, shortcutUsed, Event\n * ### Style Manager\n * * `styleManager:update:target` - The target (Component or CSSRule) is changed\n * * `styleManager:change` - Triggered on style property change from new selected component, the view of the property is passed as an argument to the callback\n * * `styleManager:change:{propertyName}` - As above but for a specific style property\n * ### Storages\n * * `storage:start` - Before the storage request is started\n * * `storage:start:store` - Before the store request. The object to store is passed as an argumnet (which you can edit)\n * * `storage:start:load` - Before the load request. Items to load are passed as an argumnet (which you can edit)\n * * `storage:load` - Triggered when something was loaded from the storage, loaded object passed as an argumnet\n * * `storage:store` - Triggered when something is stored to the storage, stored object passed as an argumnet\n * * `storage:end` - After the storage request is ended\n * * `storage:end:store` - After the store request\n * * `storage:end:load` - After the load request\n * * `storage:error` - On any error on storage request, passes the error as an argument\n * * `storage:error:store` - Error on store request, passes the error as an argument\n * * `storage:error:load` - Error on load request, passes the error as an argument\n * ### Canvas\n * * `canvas:dragenter` - When something is dragged inside the canvas, `DataTransfer` instance passed as an argument\n * * `canvas:dragover` - When something is dragging on canvas, `DataTransfer` instance passed as an argument\n * * `canvas:drop` - Something is dropped in canvas, `DataTransfer` instance and the dropped model are passed as arguments\n * * `canvas:dragend` - When a drag operation is ended, `DataTransfer` instance passed as an argument\n * * `canvas:dragdata` - On any dataTransfer parse, `DataTransfer` instance and the `result` are passed as arguments.\n * By changing `result.content` you're able to customize what is dropped\n * ### Selectors\n * * `selector:add` - New selector is add. Passes the new selector as an argument\n * * `selector:remove` - Selector removed. Passes the removed selector as an argument\n * * `selector:update` - Selector updated. Passes the updated selector as an argument\n * * `selector:state` - State changed. Passes the new state value as an argument\n * ### RTE\n * * `rte:enable` - RTE enabled. The view, on which RTE is enabled, is passed as an argument\n * * `rte:disable` - RTE disabled. The view, on which RTE is disabled, is passed as an argument\n * ### Modal\n * * `modal:open` - Modal is opened\n * * `modal:close` - Modal is closed\n * ### Parser\n * * `parse:html` - On HTML parse, an object containing the input and the output of the parser is passed as an argument\n * * `parse:css` - On CSS parse, an object containing the input and the output of the parser is passed as an argument\n * ### Commands\n * * `run:{commandName}` - Triggered when some command is called to run (eg. editor.runCommand('preview'))\n * * `stop:{commandName}` - Triggered when some command is called to stop (eg. editor.stopCommand('preview'))\n * * `run:{commandName}:before` - Triggered before the command is called\n * * `stop:{commandName}:before` - Triggered before the command is called to stop\n * * `abort:{commandName}` - Triggered when the command execution is aborted (`editor.on(`run:preview:before`, opts => opts.abort = 1);`)\n * * `run` - Triggered on run of any command. The id and the result are passed as arguments to the callback\n * * `stop` - Triggered on stop of any command. The id and the result are passed as arguments to the callback\n * ### General\n * * `canvasScroll` - Canvas is scrolled\n * * `update` - The structure of the template is updated (its HTML/CSS)\n * * `undo` - Undo executed\n * * `redo` - Redo executed\n * * `load` - Editor is loaded\n *\n * @module Editor\n */\nimport $ from 'cash-dom';\nimport defaults from './config/config';\nimport EditorModel from './model/Editor';\nimport EditorView from './view/EditorView';\n\nexport default (config = {}) => {\n const c = {\n ...defaults,\n ...config\n };\n\n c.pStylePrefix = c.stylePrefix;\n var em = new EditorModel(c);\n var editorView = new EditorView({\n model: em,\n config: c\n });\n\n return {\n $,\n\n /**\n * @property {EditorModel}\n * @private\n */\n editor: em,\n\n /**\n * Initialize editor model\n * @return {this}\n * @private\n */\n init(opts = {}) {\n em.init(this, { ...c, ...opts });\n\n [\n 'I18n',\n 'Utils',\n 'Config',\n 'Commands',\n 'Keymaps',\n 'Modal',\n 'Panels',\n 'Canvas',\n 'Parser',\n 'CodeManager',\n 'UndoManager',\n 'RichTextEditor',\n 'DomComponents',\n ['Components', 'DomComponents'],\n 'LayerManager',\n ['Layers', 'LayerManager'],\n 'CssComposer',\n ['Css', 'CssComposer'],\n 'StorageManager',\n ['Storage', 'StorageManager'],\n 'AssetManager',\n ['Assets', 'AssetManager'],\n 'BlockManager',\n ['Blocks', 'BlockManager'],\n 'TraitManager',\n ['Traits', 'TraitManager'],\n 'SelectorManager',\n ['Selectors', 'SelectorManager'],\n 'StyleManager',\n ['Styles', 'StyleManager'],\n 'DeviceManager',\n ['Devices', 'DeviceManager']\n ].forEach(prop => {\n if (Array.isArray(prop)) {\n this[prop[0]] = em.get(prop[1]);\n } else {\n this[prop] = em.get(prop);\n }\n });\n\n // Do post render stuff after the iframe is loaded otherwise it'll\n // be empty during tests\n em.on('loaded', () => {\n this.UndoManager.clear();\n em.get('modules').forEach(module => {\n module.postRender && module.postRender(editorView);\n });\n });\n\n return this;\n },\n\n /**\n * Returns configuration object\n * @param {string} [prop] Property name\n * @returns {any} Returns the configuration object or\n * the value of the specified property\n */\n getConfig(prop) {\n return em.getConfig(prop);\n },\n\n /**\n * Returns HTML built inside canvas\n * @param {Object} [opts={}] Options\n * @param {Boolean} [opts.cleanId=false] Remove unnecessary IDs (eg. those created automatically)\n * @returns {string} HTML string\n */\n getHtml(opts) {\n return em.getHtml(opts);\n },\n\n /**\n * Returns CSS built inside canvas\n * @param {Object} [opts={}] Options\n * @param {Boolean} [opts.avoidProtected=false] Don't include protected CSS\n * @returns {string} CSS string\n */\n getCss(opts) {\n return em.getCss(opts);\n },\n\n /**\n * Returns JS of all components\n * @returns {string} JS string\n */\n getJs() {\n return em.getJs();\n },\n\n /**\n * Return the complete tree of components. Use `getWrapper` to include also the wrapper\n * @return {Components}\n */\n getComponents() {\n return em.get('DomComponents').getComponents();\n },\n\n /**\n * Return the wrapper and its all components\n * @return {Component}\n */\n getWrapper() {\n return em.get('DomComponents').getWrapper();\n },\n\n /**\n * Set components inside editor's canvas. This method overrides actual components\n * @param {Array|Object|string} components HTML string or components model\n * @param {Object} opt the options object to be used by the [setComponents]{@link em#setComponents} method\n * @return {this}\n * @example\n * editor.setComponents('New component
');\n * // or\n * editor.setComponents({\n * type: 'text',\n * classes:['cls'],\n * content: 'New component'\n * });\n */\n setComponents(components, opt = {}) {\n em.setComponents(components, opt);\n return this;\n },\n\n /**\n * Add components\n * @param {Array|Object|string} components HTML string or components model\n * @param {Object} opts Options\n * @param {Boolean} [opts.avoidUpdateStyle=false] If the HTML string contains styles,\n * by default, they will be created and, if already exist, updated. When this option\n * is true, styles already created will not be updated.\n * @return {Array}\n * @example\n * editor.addComponents('New component
');\n * // or\n * editor.addComponents({\n * type: 'text',\n * classes:['cls'],\n * content: 'New component'\n * });\n */\n addComponents(components, opts) {\n return this.getWrapper().append(components, opts);\n },\n\n /**\n * Returns style in JSON format object\n * @return {Object}\n */\n getStyle() {\n return em.get('CssComposer').getAll();\n },\n\n /**\n * Set style inside editor's canvas. This method overrides actual style\n * @param {Array|Object|string} style CSS string or style model\n * @param {Object} opt the options object to be used by the [setStyle]{@link em#setStyle} method\n * @return {this}\n * @example\n * editor.setStyle('.cls{color: red}');\n * //or\n * editor.setStyle({\n * selectors: ['cls']\n * style: { color: 'red' }\n * });\n */\n setStyle(style, opt = {}) {\n em.setStyle(style, opt);\n return this;\n },\n\n /**\n * Returns the last selected component, if there is one\n * @return {Model}\n */\n getSelected() {\n return em.getSelected();\n },\n\n /**\n * Returns an array of all selected components\n * @return {Array}\n */\n getSelectedAll() {\n return em.getSelectedAll();\n },\n\n /**\n * Get a stylable entity from the selected component.\n * If you select a component without classes the entity is the Component\n * itself and all changes will go inside its 'style' attribute. Otherwise,\n * if the selected component has one or more classes, the function will\n * return the corresponding CSS Rule\n * @return {Model}\n */\n getSelectedToStyle() {\n let selected = em.getSelected();\n\n if (selected) {\n return this.StyleManager.getModelToStyle(selected);\n }\n },\n\n /**\n * Select a component\n * @param {Component|HTMLElement} el Component to select\n * @param {Object} [opts] Options\n * @param {Boolean} [opts.scroll] Scroll canvas to the selected element\n * @return {this}\n * @example\n * // Select dropped block\n * editor.on('block:drag:stop', function(model) {\n * editor.select(model);\n * });\n */\n select(el, opts) {\n em.setSelected(el, opts);\n return this;\n },\n\n /**\n * Add component to selection\n * @param {Component|HTMLElement|Array} el Component to select\n * @return {this}\n * @example\n * editor.selectAdd(model);\n */\n selectAdd(el) {\n em.addSelected(el);\n return this;\n },\n\n /**\n * Remove component from selection\n * @param {Component|HTMLElement|Array} el Component to select\n * @return {this}\n * @example\n * editor.selectRemove(model);\n */\n selectRemove(el) {\n em.removeSelected(el);\n return this;\n },\n\n /**\n * Toggle component selection\n * @param {Component|HTMLElement|Array} el Component to select\n * @return {this}\n * @example\n * editor.selectToggle(model);\n */\n selectToggle(el) {\n em.toggleSelected(el);\n return this;\n },\n\n /**\n * Set device to the editor. If the device exists it will\n * change the canvas to the proper width\n * @param {string} name Name of the device\n * @return {this}\n * @example\n * editor.setDevice('Tablet');\n */\n setDevice(name) {\n em.set('device', name);\n return this;\n },\n\n /**\n * Return the actual active device\n * @return {string} Device name\n * @example\n * var device = editor.getDevice();\n * console.log(device);\n * // 'Tablet'\n */\n getDevice() {\n return em.get('device');\n },\n\n /**\n * Execute command\n * @param {string} id Command ID\n * @param {Object} options Custom options\n * @return {*} The return is defined by the command\n * @example\n * editor.runCommand('myCommand', {someValue: 1});\n */\n runCommand(id, options = {}) {\n return em.get('Commands').run(id, options);\n },\n\n /**\n * Stop the command if stop method was provided\n * @param {string} id Command ID\n * @param {Object} options Custom options\n * @return {*} The return is defined by the command\n * @example\n * editor.stopCommand('myCommand', {someValue: 1});\n */\n stopCommand(id, options = {}) {\n return em.get('Commands').stop(id, options);\n },\n\n /**\n * Store data to the current storage\n * @param {Function} clb Callback function\n * @return {Object} Stored data\n */\n store(clb) {\n return em.store(clb);\n },\n\n /**\n * Load data from the current storage\n * @param {Function} clb Callback function\n * @return {Object} Stored data\n */\n load(clb) {\n return em.load(clb);\n },\n\n /**\n * Returns container element. The one which was indicated as 'container'\n * on init method\n * @return {HTMLElement}\n */\n getContainer() {\n return c.el;\n },\n\n /**\n * Return the count of changes made to the content and not yet stored.\n * This count resets at any `store()`\n * @return {number}\n */\n getDirtyCount() {\n return em.getDirtyCount();\n },\n\n /**\n * Update editor dimension offsets\n *\n * This method could be useful when you update, for example, some position\n * of the editor element (eg. canvas, panels, etc.) with CSS, where without\n * refresh you'll get misleading position of tools\n * @param {Object} [options] Options\n * @param {Boolean} [options.tools=false] Update the position of tools (eg. rich text editor, component highlighter, etc.)\n */\n refresh(opts) {\n em.refreshCanvas(opts);\n },\n\n /**\n * Replace the built-in Rich Text Editor with a custom one.\n * @param {Object} obj Custom RTE Interface\n * @example\n * editor.setCustomRte({\n * // Function for enabling custom RTE\n * // el is the HTMLElement of the double clicked Text Component\n * // rte is the same instance you have returned the first time you call\n * // enable(). This is useful if need to check if the RTE is already enabled so\n * // ion this case you'll need to return the RTE and the end of the function\n * enable: function(el, rte) {\n * rte = new MyCustomRte(el, {}); // this depends on the Custom RTE API\n * ...\n * return rte; // return the RTE instance\n * },\n *\n * // Disable the editor, called for example when you unfocus the Text Component\n * disable: function(el, rte) {\n * rte.blur(); // this depends on the Custom RTE API\n * }\n *\n * // Called when the Text Component is focused again. If you returned the RTE instance\n * // from the enable function, the enable won't be called again instead will call focus,\n * // in this case to avoid double binding of the editor\n * focus: function (el, rte) {\n * rte.focus(); // this depends on the Custom RTE API\n * }\n * });\n */\n setCustomRte(obj) {\n this.RichTextEditor.customRte = obj;\n },\n\n /**\n * Replace the default CSS parser with a custom one.\n * The parser function receives a CSS string as a parameter and expects\n * an array of CSSRule objects as a result. If you need to remove the\n * custom parser, pass `null` as the argument\n * @param {Function|null} parser Parser function\n * @return {this}\n * @example\n * editor.setCustomParserCss(css => {\n * const result = [];\n * // ... parse the CSS string\n * result.push({\n * selectors: '.someclass, div .otherclass',\n * style: { color: 'red' }\n * })\n * // ...\n * return result;\n * });\n */\n setCustomParserCss(parser) {\n this.Parser.getConfig().parserCss = parser;\n return this;\n },\n\n /**\n * Change the global drag mode of components.\n * To get more about this feature read: https://github.com/artf/grapesjs/issues/1936\n * @param {String} value Drag mode, options: 'absolute' | 'translate'\n * @returns {this}\n */\n setDragMode(value) {\n em.setDragMode(value);\n return this;\n },\n\n /**\n * Trigger event log message\n * @param {*} msg Message to log\n * @param {Object} [opts={}] Custom options\n * @param {String} [opts.ns=''] Namespace of the log (eg. to use in plugins)\n * @param {String} [opts.level='debug'] Level of the log, `debug`, `info`, `warning`, `error`\n * @return {this}\n * @example\n * editor.log('Something done!', { ns: 'from-plugin-x', level: 'info' });\n * // This will trigger following events\n * // `log`, `log:info`, `log-from-plugin-x`, `log-from-plugin-x:info`\n * // Callbacks of those events will always receive the message and\n * // options, as arguments, eg:\n * // editor.on('log:info', (msg, opts) => console.info(msg, opts))\n */\n log(msg, opts = {}) {\n em.log(msg, opts);\n return this;\n },\n\n /**\n * Translate label\n * @param {String} key Label to translate\n * @param {Object} [opts] Options for the translation\n * @param {Object} [opts.params] Params for the translation\n * @param {Boolean} [opts.noWarn] Avoid warnings in case of missing resources\n * @returns {String}\n * @example\n * editor.t('msg');\n * // use params\n * editor.t('msg2', { params: { test: 'hello' } });\n * // custom local\n * editor.t('msg2', { params: { test: 'hello' }, l: 'it' });\n */\n t(...args) {\n return em.t(...args);\n },\n\n /**\n * Attach event\n * @param {string} event Event name\n * @param {Function} callback Callback function\n * @return {this}\n */\n on(event, callback) {\n em.on(event, callback);\n return this;\n },\n\n /**\n * Attach event and detach it after the first run\n * @param {string} event Event name\n * @param {Function} callback Callback function\n * @return {this}\n */\n once(event, callback) {\n em.once(event, callback);\n return this;\n },\n\n /**\n * Detach event\n * @param {string} event Event name\n * @param {Function} callback Callback function\n * @return {this}\n */\n off(event, callback) {\n em.off(event, callback);\n return this;\n },\n\n /**\n * Trigger event\n * @param {string} event Event to trigger\n * @return {this}\n */\n trigger(event) {\n em.trigger.apply(em, arguments);\n return this;\n },\n\n /**\n * Destroy the editor\n */\n destroy() {\n return em.destroyAll();\n },\n\n /**\n * Returns editor element\n * @return {HTMLElement}\n * @private\n */\n getEl() {\n return editorView.el;\n },\n\n /**\n * Returns editor model\n * @return {Model}\n * @private\n */\n getModel() {\n return em;\n },\n\n /**\n * Render editor\n * @return {HTMLElement}\n */\n render() {\n editorView.render();\n return editorView.el;\n }\n };\n};\n","export default {\n plugins: []\n};\n","/**\n * File made for IE/Edge support\n * https://github.com/artf/grapesjs/issues/214\n */\n\nexport default () => {\n /**\n * Check if IE/Edge\n * @return {Boolean}\n */\n const isIE = () => {\n let match;\n const agent = window.navigator.userAgent;\n const rules = [\n ['edge', /Edge\\/([0-9\\._]+)/],\n ['ie', /MSIE\\s(7\\.0)/],\n ['ie', /MSIE\\s([0-9\\.]+);.*Trident\\/[4-7].0/],\n ['ie', /Trident\\/7\\.0.*rv\\:([0-9\\.]+).*\\).*Gecko$/]\n ];\n\n for (let i = 0; i < rules.length; i++) {\n const rule = rules[i];\n match = rule[1].exec(agent);\n if (match) break;\n }\n\n return !!match;\n };\n\n if (isIE()) {\n const originalCreateHTMLDocument =\n DOMImplementation.prototype.createHTMLDocument;\n DOMImplementation.prototype.createHTMLDocument = title => {\n if (!title) title = '';\n return originalCreateHTMLDocument.apply(document.implementation, [title]);\n };\n }\n};\n","import $ from 'cash-dom';\nimport Editor from './editor';\nimport { isElement, isFunction } from 'underscore';\nimport polyfills from 'utils/polyfills';\nimport PluginManager from './plugin_manager';\n\npolyfills();\n\nconst plugins = new PluginManager();\nconst editors = [];\nconst defaultConfig = {\n // If true renders editor on init\n autorender: 1,\n\n // Array of plugins to init\n plugins: [],\n\n // Custom options for plugins\n pluginsOpts: {}\n};\n\nexport default {\n $,\n\n editors,\n\n plugins,\n\n // Will be replaced on build\n version: '<# VERSION #>',\n\n /**\n * Initialize the editor with passed options\n * @param {Object} config Configuration object\n * @param {string|HTMLElement} config.container Selector which indicates where render the editor\n * @param {Boolean} [config.autorender=true] If true, auto-render the content\n * @param {Array} [config.plugins=[]] Array of plugins to execute on start\n * @param {Object} [config.pluginsOpts={}] Custom options for plugins\n * @return {Editor} Editor instance\n * @example\n * var editor = grapesjs.init({\n * container: '#myeditor',\n * components: 'Hello world ',\n * style: '.hello{color: red}',\n * })\n */\n init(config = {}) {\n const els = config.container;\n if (!els) throw new Error(\"'container' is required\");\n config = { ...defaultConfig, ...config, grapesjs: this };\n config.el = isElement(els) ? els : document.querySelector(els);\n const editor = new Editor(config).init();\n const em = editor.getModel();\n\n // Load plugins\n config.plugins.forEach(pluginId => {\n let plugin = plugins.get(pluginId);\n const plgOptions = config.pluginsOpts[pluginId] || {};\n\n // Try to search in global context\n if (!plugin) {\n const wplg = window[pluginId];\n plugin = wplg && wplg.default ? wplg.default : wplg;\n }\n\n if (plugin) {\n plugin(editor, plgOptions);\n } else if (isFunction(pluginId)) {\n pluginId(editor, plgOptions);\n } else {\n em.logWarning(`Plugin ${pluginId} not found`, {\n context: 'plugins',\n plugin: pluginId\n });\n }\n });\n\n // Execute `onLoad` on modules once all plugins are initialized.\n // A plugin might have extended/added some custom type so this\n // is a good point to load stuff like components, css rules, etc.\n em.loadOnStart();\n config.autorender && editor.render();\n editors.push(editor);\n\n return editor;\n }\n};\n","import defaults from './config/config';\n\nexport default config => {\n var c = config || {};\n\n // Set default options\n for (var name in defaults) {\n if (!(name in c)) c[name] = defaults[name];\n }\n\n var plugins = {};\n\n return {\n /**\n * Add new plugin. Plugins could not be overwritten\n * @param {string} id Plugin ID\n * @param {Function} plugin Function which contains all plugin logic\n * @return {Function} The plugin function\n * @example\n * PluginManager.add('some-plugin', function(editor){\n * editor.Commands.add('new-command', {\n * run: function(editor, senderBtn){\n * console.log('Executed new-command');\n * }\n * })\n * });\n */\n add(id, plugin) {\n if (plugins[id]) {\n return plugins[id];\n }\n\n plugins[id] = plugin;\n return plugin;\n },\n\n /**\n * Returns plugin by ID\n * @param {string} id Plugin ID\n * @return {Function|undefined} Plugin\n * @example\n * var plugin = PluginManager.get('some-plugin');\n * plugin(editor);\n */\n get(id) {\n return plugins[id];\n },\n\n /**\n * Returns object with all plugins\n * @return {Object}\n */\n getAll() {\n return plugins;\n }\n };\n};\n","export default {\n // Default assets\n // eg. [\n // 'https://...image1.png',\n // 'https://...image2.png',\n // {type: 'image', src: 'https://...image3.png', someOtherCustomProp: 1},\n // ..\n // ]\n assets: [],\n\n // Content to add where there is no assets to show\n // eg. 'No assets here, drag to upload'\n noAssets: '',\n\n // Style prefix\n stylePrefix: 'am-',\n\n // Upload endpoint, set `false` to disable upload\n // upload: 'https://endpoint/upload/assets',\n // upload: false,\n upload: 0,\n\n // The name used in POST to pass uploaded files\n uploadName: 'files',\n\n // Custom headers to pass with the upload request\n headers: {},\n\n // Custom parameters to pass with the upload request, eg. csrf token\n params: {},\n\n // The credentials setting for the upload request, eg. 'include', 'omit'\n credentials: 'include',\n\n // Allow uploading multiple files per request.\n // If disabled filename will not have '[]' appended\n multiUpload: true,\n\n // If true, tries to add automatically uploaded assets.\n // To make it work the server should respond with a JSON containing assets\n // in a data key, eg:\n // {\n // data: [\n // 'https://.../image.png',\n // ...\n // {src: 'https://.../image2.png'},\n // ...\n // ]\n // }\n autoAdd: 1,\n\n // To upload your assets, the module uses Fetch API, with this option you\n // overwrite it with something else.\n // It should return a Promise\n // @example\n // customFetch: (url, options) => axios(url, { data: options.body }),\n customFetch: '',\n\n // Custom uploadFile function.\n // Differently from the `customFetch` option, this gives a total control\n // over the uploading process, but you also have to emit all `asset:upload:*` events\n // by yourself (if you need to use them somewhere)\n // @example\n // uploadFile: (e) => {\n // var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;\n // // ...send somewhere\n // }\n uploadFile: '',\n\n // In the absence of 'uploadFile' or 'upload' assets will be embedded as Base64\n embedAsBase64: 1,\n\n // Handle the image url submit from the built-in 'Add image' form\n // @example\n // handleAdd: (textFromInput) => {\n // // some check...\n // editor.AssetManager.add(textFromInput);\n // }\n handleAdd: '',\n\n // Enable an upload dropzone on the entire editor (not document) when dragging\n // files over it\n // If active the dropzone disable/hide the upload dropzone in asset modal,\n // otherwise you will get double drops (#507)\n dropzone: 0,\n\n // Open the asset manager once files are been dropped via the dropzone\n openAssetsOnDrop: 1,\n\n // Any dropzone content to append inside dropzone element\n dropzoneContent: '',\n\n //method called before upload, on return false upload is canceled.\n // @example\n // beforeUpload: (files) => {\n // // logic...\n // var stopUpload = true;\n // if(stopUpload) return false;\n // }\n beforeUpload: null,\n\n // Toggles visiblity of assets url input\n showUrlInput: true\n};\n","import Backbone from 'backbone';\n\nexport default Backbone.Model.extend({\n idAttribute: 'src',\n\n defaults: {\n type: '',\n src: ''\n },\n\n /**\n * Get filename of the asset\n * @return {string}\n * @private\n * */\n getFilename() {\n return this.get('src')\n .split('/')\n .pop();\n },\n\n /**\n * Get extension of the asset\n * @return {string}\n * @private\n * */\n getExtension() {\n return this.getFilename()\n .split('.')\n .pop();\n }\n});\n","import Asset from './Asset';\n\nexport default Asset.extend({\n defaults: {\n ...Asset.prototype.defaults,\n type: 'image',\n unitDim: 'px',\n height: 0,\n width: 0\n }\n});\n","import { isFunction } from 'underscore';\nimport AssetView from './AssetView';\n\nexport default AssetView.extend({\n events: {\n 'click [data-toggle=asset-remove]': 'onRemove',\n click: 'onClick',\n dblclick: 'onDblClick'\n },\n\n getPreview() {\n const pfx = this.pfx;\n const src = this.model.get('src');\n return `\n
\n
\n `;\n },\n\n getInfo() {\n const pfx = this.pfx;\n const model = this.model;\n let name = model.get('name');\n let width = model.get('width');\n let height = model.get('height');\n let unit = model.get('unitDim');\n let dim = width && height ? `${width}x${height}${unit}` : '';\n name = name || model.getFilename();\n return `\n ${name}
\n ${dim}
\n `;\n },\n\n init(o) {\n const pfx = this.pfx;\n this.className += ` ${pfx}asset-image`;\n },\n\n /**\n * Triggered when the asset is clicked\n * @private\n * */\n onClick() {\n var onClick = this.config.onClick;\n var model = this.model;\n this.collection.trigger('deselectAll');\n this.$el.addClass(this.pfx + 'highlight');\n\n if (isFunction(onClick)) {\n onClick(model);\n } else {\n this.updateTarget(this.collection.target);\n }\n },\n\n /**\n * Triggered when the asset is double clicked\n * @private\n * */\n onDblClick() {\n const { em, model } = this;\n const onDblClick = this.config.onDblClick;\n\n if (isFunction(onDblClick)) {\n onDblClick(model);\n } else {\n this.updateTarget(this.collection.target);\n em && em.get('Modal').close();\n }\n\n var onSelect = this.collection.onSelect;\n isFunction(onSelect) && onSelect(model);\n },\n\n /**\n * Remove asset from collection\n * @private\n * */\n onRemove(e) {\n e.stopImmediatePropagation();\n this.model.collection.remove(this.model);\n }\n});\n","import Backbone from 'backbone';\nimport { clone } from 'underscore';\n\nexport default Backbone.View.extend({\n initialize(o = {}) {\n this.options = o;\n this.collection = o.collection;\n const config = o.config || {};\n this.config = config;\n this.pfx = config.stylePrefix || '';\n this.ppfx = config.pStylePrefix || '';\n this.em = config.em;\n this.className = this.pfx + 'asset';\n this.listenTo(this.model, 'destroy remove', this.remove);\n this.model.view = this;\n const init = this.init && this.init.bind(this);\n init && init(o);\n },\n\n template() {\n const pfx = this.pfx;\n return `\n \n ${this.getPreview()}\n
\n \n ${this.getInfo()}\n
\n \n ⨯\n
\n `;\n },\n\n /**\n * Update target if exists\n * @param {Model} target\n * @private\n * */\n updateTarget(target) {\n if (target && target.set) {\n target.set('attributes', clone(target.get('attributes')));\n target.set('src', this.model.get('src'));\n }\n },\n\n getPreview() {\n return '';\n },\n\n getInfo() {\n return '';\n },\n\n render() {\n const el = this.el;\n el.innerHTML = this.template(this, this.model);\n el.className = this.className;\n return this;\n }\n});\n","import Backbone from 'backbone';\nimport AssetImage from './AssetImage';\nimport AssetImageView from './../view/AssetImageView';\nimport TypeableCollection from 'domain_abstract/model/TypeableCollection';\n\nexport default Backbone.Collection.extend(TypeableCollection).extend({\n types: [\n {\n id: 'image',\n model: AssetImage,\n view: AssetImageView,\n isType(value) {\n if (typeof value == 'string') {\n return {\n type: 'image',\n src: value\n };\n }\n return value;\n }\n }\n ]\n});\n","import Backbone from 'backbone';\n\nexport default Backbone.View.extend({\n events: {\n submit: 'handleSubmit'\n },\n\n template({ pfx, ppfx, em, ...view }) {\n let form = '';\n if (this.config.showUrlInput) {\n form = `\n \n `;\n }\n\n return `\n \n `;\n },\n\n initialize(o) {\n this.options = o;\n this.config = o.config;\n this.pfx = this.config.stylePrefix || '';\n this.ppfx = this.config.pStylePrefix || '';\n this.em = this.config.em;\n const coll = this.collection;\n this.listenTo(coll, 'reset', this.renderAssets);\n this.listenTo(coll, 'add', this.addToAsset);\n this.listenTo(coll, 'remove', this.removedAsset);\n this.listenTo(coll, 'deselectAll', this.deselectAll);\n },\n\n /**\n * Add new asset to the collection via string\n * @param {Event} e Event object\n * @return {this}\n * @private\n */\n handleSubmit(e) {\n e.preventDefault();\n const input = this.getAddInput();\n const url = input && input.value.trim();\n const handleAdd = this.config.handleAdd;\n\n if (!url) {\n return;\n }\n\n input.value = '';\n this.getAssetsEl().scrollTop = 0;\n\n if (handleAdd) {\n handleAdd.bind(this)(url);\n } else {\n this.options.globalCollection.add(url, { at: 0 });\n }\n },\n\n /**\n * Returns assets element\n * @return {HTMLElement}\n * @private\n */\n getAssetsEl() {\n //if(!this.assets) // Not able to cache as after the rerender it losses the ref\n return this.el.querySelector(`.${this.pfx}assets`);\n },\n\n /**\n * Returns input url element\n * @return {HTMLElement}\n * @private\n */\n getAddInput() {\n if (!this.inputUrl || !this.inputUrl.value)\n this.inputUrl = this.el.querySelector(`.${this.pfx}add-asset input`);\n return this.inputUrl;\n },\n\n /**\n * Triggered when an asset is removed\n * @param {Asset} model Removed asset\n * @private\n */\n removedAsset(model) {\n if (!this.collection.length) {\n this.toggleNoAssets();\n }\n },\n\n /**\n * Add asset to collection\n * @private\n * */\n addToAsset(model) {\n if (this.collection.length == 1) {\n this.toggleNoAssets(1);\n }\n this.addAsset(model);\n },\n\n /**\n * Add new asset to collection\n * @param Object Model\n * @param Object Fragment collection\n * @return Object Object created\n * @private\n * */\n addAsset(model, fragmentEl = null) {\n const fragment = fragmentEl;\n const collection = this.collection;\n const config = this.config;\n const rendered = new model.typeView({\n model,\n collection,\n config\n }).render().el;\n\n if (fragment) {\n fragment.appendChild(rendered);\n } else {\n const assetsEl = this.getAssetsEl();\n if (assetsEl) {\n assetsEl.insertBefore(rendered, assetsEl.firstChild);\n }\n }\n\n return rendered;\n },\n\n /**\n * Checks if to show noAssets\n * @param {Boolean} hide\n * @private\n */\n toggleNoAssets(hide) {\n const assetsEl = this.$el.find(`.${this.pfx}assets`);\n\n if (hide) {\n assetsEl.empty();\n } else {\n const noAssets = this.config.noAssets;\n noAssets && assetsEl.append(noAssets);\n }\n },\n\n /**\n * Deselect all assets\n * @private\n * */\n deselectAll() {\n const pfx = this.pfx;\n this.$el.find(`.${pfx}highlight`).removeClass(`${pfx}highlight`);\n },\n\n renderAssets() {\n const fragment = document.createDocumentFragment();\n const assets = this.$el.find(`.${this.pfx}assets`);\n assets.empty();\n this.toggleNoAssets(this.collection.length);\n this.collection.each(model => this.addAsset(model, fragment));\n assets.append(fragment);\n },\n\n render() {\n const fuRendered = this.options.fu.render().el;\n this.$el.empty();\n this.$el.append(fuRendered).append(this.template(this));\n this.el.className = `${this.ppfx}asset-manager`;\n this.renderAssets();\n this.rendered = 1;\n return this;\n }\n});\n","import { template } from 'underscore';\nimport Backbone from 'backbone';\nimport fetch from 'utils/fetch';\n\nexport default Backbone.View.extend(\n {\n template: template(`\n \n `),\n\n events: {},\n\n initialize(opts = {}) {\n this.options = opts;\n const c = opts.config || {};\n this.config = c;\n this.em = this.config.em;\n this.pfx = c.stylePrefix || '';\n this.ppfx = c.pStylePrefix || '';\n this.target = this.options.globalCollection || {};\n this.uploadId = this.pfx + 'uploadFile';\n this.disabled =\n c.disableUpload !== undefined\n ? c.disableUpload\n : !c.upload && !c.embedAsBase64;\n this.multiUpload = c.multiUpload !== undefined ? c.multiUpload : true;\n this.events['change #' + this.uploadId] = 'uploadFile';\n let uploadFile = c.uploadFile;\n\n if (uploadFile) {\n this.uploadFile = uploadFile.bind(this);\n } else if (!c.upload && c.embedAsBase64) {\n this.uploadFile = this.constructor.embedAsBase64;\n }\n\n this.delegateEvents();\n },\n\n /**\n * Triggered before the upload is started\n * @private\n */\n onUploadStart() {\n const em = this.config.em;\n em && em.trigger('asset:upload:start');\n },\n\n /**\n * Triggered after the upload is ended\n * @param {Object|string} res End result\n * @private\n */\n onUploadEnd(res) {\n const { $el, config } = this;\n const em = config.em;\n em && em.trigger('asset:upload:end', res);\n const input = $el.find('input');\n input && input.val('');\n },\n\n /**\n * Triggered on upload error\n * @param {Object} err Error\n * @private\n */\n onUploadError(err) {\n const em = this.config.em;\n console.error(err);\n this.onUploadEnd(err);\n em && em.trigger('asset:upload:error', err);\n },\n\n /**\n * Triggered on upload response\n * @param {string} text Response text\n * @private\n */\n onUploadResponse(text, clb) {\n const em = this.config.em;\n const config = this.config;\n const target = this.target;\n let json;\n try {\n json = typeof text === 'string' ? JSON.parse(text) : text;\n } catch (e) {\n json = text;\n }\n\n em && em.trigger('asset:upload:response', json);\n\n if (config.autoAdd && target) {\n target.add(json.data, { at: 0 });\n }\n\n this.onUploadEnd(text);\n clb && clb(json);\n },\n\n /**\n * Upload files\n * @param {Object} e Event\n * @return {Promise}\n * @private\n * */\n uploadFile(e, clb) {\n const files = e.dataTransfer ? e.dataTransfer.files : e.target.files;\n const { config } = this;\n const { beforeUpload } = config;\n\n const beforeUploadResponse = beforeUpload && beforeUpload(files);\n if (beforeUploadResponse === false) return;\n\n const body = new FormData();\n const { params, customFetch } = config;\n\n for (let param in params) {\n body.append(param, params[param]);\n }\n\n if (this.multiUpload) {\n for (let i = 0; i < files.length; i++) {\n body.append(`${config.uploadName}[]`, files[i]);\n }\n } else if (files.length) {\n body.append(config.uploadName, files[0]);\n }\n\n var target = this.target;\n const url = config.upload;\n const headers = config.headers;\n const reqHead = 'X-Requested-With';\n\n if (typeof headers[reqHead] == 'undefined') {\n headers[reqHead] = 'XMLHttpRequest';\n }\n\n if (url) {\n this.onUploadStart();\n const fetchOpts = {\n method: 'post',\n credentials: config.credentials || 'include',\n headers,\n body\n };\n const fetchResult = customFetch\n ? customFetch(url, fetchOpts)\n : fetch(url, fetchOpts).then(res =>\n ((res.status / 200) | 0) == 1\n ? res.text()\n : res.text().then(text => Promise.reject(text))\n );\n return fetchResult\n .then(text => this.onUploadResponse(text, clb))\n .catch(err => this.onUploadError(err));\n }\n },\n\n /**\n * Make input file droppable\n * @private\n * */\n initDrop() {\n var that = this;\n if (!this.uploadForm) {\n this.uploadForm = this.$el.find('form').get(0);\n if ('draggable' in this.uploadForm) {\n var uploadFile = this.uploadFile;\n this.uploadForm.ondragover = function() {\n this.className = that.pfx + 'hover';\n return false;\n };\n this.uploadForm.ondragleave = function() {\n this.className = '';\n return false;\n };\n this.uploadForm.ondrop = function(e) {\n this.className = '';\n e.preventDefault();\n that.uploadFile(e);\n return;\n };\n }\n }\n },\n\n initDropzone(ev) {\n let addedCls = 0;\n const c = this.config;\n const em = ev.model;\n const edEl = ev.el;\n const editor = em.get('Editor');\n const container = em.get('Config').el;\n const frameEl = em.get('Canvas').getBody();\n const ppfx = this.ppfx;\n const updatedCls = `${ppfx}dropzone-active`;\n const dropzoneCls = `${ppfx}dropzone`;\n const cleanEditorElCls = () => {\n edEl.className = edEl.className.replace(updatedCls, '').trim();\n addedCls = 0;\n };\n const onDragOver = () => {\n if (!addedCls) {\n edEl.className += ` ${updatedCls}`;\n addedCls = 1;\n }\n return false;\n };\n const onDragLeave = () => {\n cleanEditorElCls();\n return false;\n };\n const onDrop = e => {\n cleanEditorElCls();\n e.preventDefault();\n e.stopPropagation();\n this.uploadFile(e);\n\n if (c.openAssetsOnDrop && editor) {\n const target = editor.getSelected();\n editor.runCommand('open-assets', {\n target,\n onSelect() {\n editor.Modal.close();\n editor.AssetManager.setTarget(null);\n }\n });\n }\n\n return false;\n };\n\n ev.$el.append(`${c.dropzoneContent}
`);\n cleanEditorElCls();\n\n if ('draggable' in edEl) {\n [edEl, frameEl].forEach(item => {\n item.ondragover = onDragOver;\n item.ondragleave = onDragLeave;\n item.ondrop = onDrop;\n });\n }\n },\n\n render() {\n const { $el, pfx, em } = this;\n $el.html(\n this.template({\n title: em && em.t('assetManager.uploadTitle'),\n uploadId: this.uploadId,\n disabled: this.disabled,\n multiUpload: this.multiUpload,\n pfx\n })\n );\n this.initDrop();\n $el.attr('class', pfx + 'file-uploader');\n return this;\n }\n },\n {\n embedAsBase64: function(e, clb) {\n // List files dropped\n const files = e.dataTransfer ? e.dataTransfer.files : e.target.files;\n const response = { data: [] };\n\n // Unlikely, widely supported now\n if (!FileReader) {\n this.onUploadError(\n new Error('Unsupported platform, FileReader is not defined')\n );\n return;\n }\n\n const promises = [];\n const mimeTypeMatcher = /^(.+)\\/(.+)$/;\n\n for (const file of files) {\n // For each file a reader (to read the base64 URL)\n // and a promise (to track and merge results and errors)\n const promise = new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.addEventListener('load', event => {\n let type;\n const name = file.name;\n\n // Try to find the MIME type of the file.\n const match = mimeTypeMatcher.exec(file.type);\n if (match) {\n type = match[1]; // The first part in the MIME, \"image\" in image/png\n } else {\n type = file.type;\n }\n\n /*\n // Show local video files, http://jsfiddle.net/dsbonev/cCCZ2/embedded/result,js,html,css/\n var URL = window.URL || window.webkitURL\n var file = this.files[0]\n var type = file.type\n var videoNode = document.createElement('video');\n var canPlay = videoNode.canPlayType(type) // can use also for 'audio' types\n if (canPlay === '') canPlay = 'no'\n var message = 'Can play type \"' + type + '\": ' + canPlay\n var isError = canPlay === 'no'\n displayMessage(message, isError)\n\n if (isError) {\n return\n }\n\n var fileURL = URL.createObjectURL(file)\n videoNode.src = fileURL\n */\n\n // If it's an image, try to find its size\n if (type === 'image') {\n const data = {\n src: reader.result,\n name,\n type,\n height: 0,\n width: 0\n };\n\n const image = new Image();\n image.addEventListener('error', error => {\n reject(error);\n });\n image.addEventListener('load', () => {\n data.height = image.height;\n data.width = image.width;\n resolve(data);\n });\n image.src = data.src;\n } else if (type) {\n // Not an image, but has a type\n resolve({\n src: reader.result,\n name,\n type\n });\n } else {\n // No type found, resolve with the URL only\n resolve(reader.result);\n }\n });\n reader.addEventListener('error', error => {\n reject(error);\n });\n reader.addEventListener('abort', error => {\n reject('Aborted');\n });\n\n reader.readAsDataURL(file);\n });\n\n promises.push(promise);\n }\n\n Promise.all(promises).then(\n data => {\n response.data = data;\n this.onUploadResponse(response, clb);\n },\n error => {\n this.onUploadError(error);\n }\n );\n }\n }\n);\n","/**\n * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/asset_manager/config/config.js)\n * ```js\n * const editor = grapesjs.init({\n * assetManager: {\n * // options\n * }\n * })\n * ```\n *\n * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance\n *\n * ```js\n * const assetManager = editor.AssetManager;\n * ```\n *\n * * [add](#add)\n * * [get](#get)\n * * [getAll](#getall)\n * * [getAllVisible](#getallvisible)\n * * [remove](#remove)\n * * [store](#store)\n * * [load](#load)\n * * [getContainer](#getcontainer)\n * * [getAssetsEl](#getassetsel)\n * * [addType](#addtype)\n * * [getType](#gettype)\n * * [getTypes](#gettypes)\n *\n * @module AssetManager\n */\n\nimport defaults from './config/config';\nimport Assets from './model/Assets';\nimport AssetsView from './view/AssetsView';\nimport FileUpload from './view/FileUploader';\n\nexport default () => {\n let c = {};\n let assets, am, fu;\n\n return {\n /**\n * Name of the module\n * @type {String}\n * @private\n */\n name: 'AssetManager',\n\n /**\n * Mandatory for the storage manager\n * @type {String}\n * @private\n */\n storageKey: 'assets',\n\n getConfig() {\n return c;\n },\n\n /**\n * Initialize module\n * @param {Object} config Configurations\n * @private\n */\n init(config) {\n c = config || {};\n\n for (let name in defaults) {\n if (!(name in c)) c[name] = defaults[name];\n }\n\n const ppfx = c.pStylePrefix;\n const em = c.em;\n\n if (ppfx) {\n c.stylePrefix = ppfx + c.stylePrefix;\n }\n\n // Global assets collection\n assets = new Assets([]);\n const obj = {\n // Collection visible in asset manager\n collection: new Assets([]),\n globalCollection: assets,\n config: c\n };\n fu = new FileUpload(obj);\n obj.fu = fu;\n am = new AssetsView(obj);\n\n // Setup the sync between the global and public collections\n assets.listenTo(assets, 'add', model => {\n this.getAllVisible().add(model);\n em && em.trigger('asset:add', model);\n });\n\n assets.listenTo(assets, 'remove', model => {\n this.getAllVisible().remove(model);\n em && em.trigger('asset:remove', model);\n });\n\n return this;\n },\n\n /**\n * Add new asset/s to the collection. URLs are supposed to be unique\n * @param {string|Object|Array|Array} asset URL strings or an objects representing the resource.\n * @param {Object} [opts] Options\n * @return {Model}\n * @example\n * // In case of strings, would be interpreted as images\n * assetManager.add('http://img.jpg');\n * assetManager.add(['http://img.jpg', './path/to/img.png']);\n *\n * // Using objects you could indicate the type and other meta informations\n * assetManager.add({\n * \tsrc: 'http://img.jpg',\n * \t//type: 'image',\t//image is default\n * \theight: 300,\n *\twidth: 200,\n * });\n * assetManager.add([{\n * \tsrc: 'http://img.jpg',\n * },{\n * \tsrc: './path/to/img.png',\n * }]);\n */\n add(asset, opts = {}) {\n // Put the model at the beginning\n if (typeof opts.at == 'undefined') {\n opts.at = 0;\n }\n\n return assets.add(asset, opts);\n },\n\n /**\n * Returns the asset by URL\n * @param {string} src URL of the asset\n * @return {Object} Object representing the asset\n * @example\n * var asset = assetManager.get('http://img.jpg');\n */\n get(src) {\n return assets.where({ src })[0];\n },\n\n /**\n * Return the global collection, containing all the assets\n * @return {Collection}\n */\n getAll() {\n return assets;\n },\n\n /**\n * Return the visible collection, which containes assets actually rendered\n * @return {Collection}\n */\n getAllVisible() {\n return am.collection;\n },\n\n /**\n * Remove the asset by its URL\n * @param {string} src URL of the asset\n * @return {this}\n * @example\n * assetManager.remove('http://img.jpg');\n */\n remove(src) {\n var asset = this.get(src);\n this.getAll().remove(asset);\n return this;\n },\n\n /**\n * Store assets data to the selected storage\n * @param {Boolean} noStore If true, won't store\n * @return {Object} Data to store\n * @example\n * var assets = assetManager.store();\n */\n store(noStore) {\n var obj = {};\n var assets = JSON.stringify(this.getAll().toJSON());\n obj[this.storageKey] = assets;\n if (!noStore && c.stm) c.stm.store(obj);\n return obj;\n },\n\n /**\n * Load data from the passed object.\n * The fetched data will be added to the collection.\n * @param {Object} data Object of data to load\n * @return {Object} Loaded assets\n * @example\n * var assets = assetManager.load({\n * \tassets: [...]\n * })\n *\n */\n load(data = {}) {\n const name = this.storageKey;\n let assets = data[name] || [];\n\n if (typeof assets == 'string') {\n try {\n assets = JSON.parse(data[name]);\n } catch (err) {}\n }\n\n if (assets && assets.length) {\n this.getAll().reset(assets);\n }\n\n return assets;\n },\n\n /**\n * Return the Asset Manager Container\n * @return {HTMLElement}\n */\n getContainer() {\n return am.el;\n },\n\n /**\n * Get assets element container\n * @return {HTMLElement}\n */\n getAssetsEl() {\n return am.el.querySelector('[data-el=assets]');\n },\n\n /**\n * Render assets\n * @param {array} assets Assets to render, without the argument will render\n * all global assets\n * @return {HTMLElement}\n * @example\n * // Render all assets\n * assetManager.render();\n *\n * // Render some of the assets\n * const assets = assetManager.getAll();\n * assetManager.render(assets.filter(\n * asset => asset.get('category') == 'cats'\n * ));\n */\n render(assets) {\n const toRender = assets || this.getAll().models;\n\n if (!am.rendered) {\n am.render();\n }\n\n am.collection.reset(toRender);\n return this.getContainer();\n },\n\n /**\n * Add new type. If you want to get more about type definition we suggest to read the [module's page](/modules/Assets.html)\n * @param {string} id Type ID\n * @param {Object} definition Definition of the type. Each definition contains\n * `model` (business logic), `view` (presentation logic)\n * and `isType` function which recognize the type of the\n * passed entity\n * @example\n * assetManager.addType('my-type', {\n * model: {},\n * view: {},\n * isType: (value) => {},\n * })\n */\n addType(id, definition) {\n this.getAll().addType(id, definition);\n },\n\n /**\n * Get type\n * @param {string} id Type ID\n * @return {Object} Type definition\n */\n getType(id) {\n return this.getAll().getType(id);\n },\n\n /**\n * Get types\n * @return {Array}\n */\n getTypes() {\n return this.getAll().getTypes();\n },\n\n //-------\n\n AssetsView() {\n return am;\n },\n\n FileUploader() {\n return fu;\n },\n\n onLoad() {\n this.getAll().reset(c.assets);\n },\n\n postRender(editorView) {\n c.dropzone && fu.initDropzone(editorView);\n },\n\n /**\n * Set new target\n * @param\t{Object}\tm Model\n * @private\n * */\n setTarget(m) {\n am.collection.target = m;\n },\n\n /**\n * Set callback after asset was selected\n * @param\t{Object}\tf Callback function\n * @private\n * */\n onSelect(f) {\n am.collection.onSelect = f;\n },\n\n /**\n * Set callback to fire when the asset is clicked\n * @param {function} func\n * @private\n */\n onClick(func) {\n c.onClick = func;\n },\n\n /**\n * Set callback to fire when the asset is double clicked\n * @param {function} func\n * @private\n */\n onDblClick(func) {\n c.onDblClick = func;\n },\n\n destroy() {\n assets.reset();\n fu.collection.reset();\n fu.remove();\n am.remove();\n [assets, am, fu].forEach(i => (i = null));\n c = {};\n }\n };\n};\n","export default {\n stylePrefix: 'trt-',\n\n // Specify the element to use as a container, string (query) or HTMLElement\n // With the empty value, nothing will be rendered\n appendTo: '',\n\n // Default options for the target input\n optionsTarget: [{ value: false }, { value: '_blank' }]\n};\n","import Backbone from 'backbone';\nimport { isUndefined, isString, isFunction } from 'underscore';\nimport { capitalize } from 'utils/mixins';\n\nconst $ = Backbone.$;\n\nexport default Backbone.View.extend({\n events: {},\n eventCapture: ['change'],\n\n appendInput: 1,\n\n attributes() {\n return this.model.get('attributes');\n },\n\n templateLabel() {\n const { ppfx } = this;\n const label = this.getLabel();\n return `${label}
`;\n },\n\n templateInput() {\n const { clsField } = this;\n return `
`;\n },\n\n initialize(o = {}) {\n const { config = {} } = o;\n const { model, eventCapture } = this;\n const { target } = model;\n const { type } = model.attributes;\n this.config = config;\n this.em = config.em;\n this.pfx = config.stylePrefix || '';\n this.ppfx = config.pStylePrefix || '';\n this.target = target;\n const { ppfx } = this;\n this.clsField = `${ppfx}field ${ppfx}field-${type}`;\n [\n ['change:value', this.onValueChange],\n ['remove', this.removeView]\n ].forEach(([event, clb]) => {\n model.off(event, clb);\n this.listenTo(model, event, clb);\n });\n model.view = this;\n this.listenTo(model, 'change:label', this.render);\n this.listenTo(model, 'change:placeholder', this.rerender);\n eventCapture.forEach(event => (this.events[event] = 'onChange'));\n this.delegateEvents();\n this.init();\n },\n\n getClbOpts() {\n return {\n component: this.target,\n trait: this.model,\n elInput: this.getInputElem()\n };\n },\n\n removeView() {\n this.remove();\n this.removed();\n },\n\n init() {},\n removed() {},\n onRender() {},\n onUpdate() {},\n onEvent() {},\n\n /**\n * Fires when the input is changed\n * @private\n */\n onChange(event) {\n const el = this.getInputElem();\n if (el && !isUndefined(el.value)) {\n this.model.set('value', el.value);\n }\n this.onEvent({\n ...this.getClbOpts(),\n event\n });\n },\n\n getValueForTarget() {\n return this.model.get('value');\n },\n\n setInputValue(value) {\n const el = this.getInputElem();\n el && (el.value = value);\n },\n\n /**\n * On change callback\n * @private\n */\n onValueChange(model, value, opts = {}) {\n if (opts.fromTarget) {\n this.setInputValue(model.get('value'));\n this.postUpdate();\n } else {\n const val = this.getValueForTarget();\n model.setTargetValue(val, opts);\n }\n },\n\n /**\n * Render label\n * @private\n */\n renderLabel() {\n const { $el, target } = this;\n const label = this.getLabel();\n let tpl = this.templateLabel(target);\n\n if (this.createLabel) {\n tpl =\n this.createLabel({\n label,\n component: target,\n trait: this\n }) || '';\n }\n\n $el.find('[data-label]').append(tpl);\n },\n\n /**\n * Returns label for the input\n * @return {string}\n * @private\n */\n getLabel() {\n const { em } = this;\n const { label, name } = this.model.attributes;\n return (\n em.t(`traitManager.traits.labels.${name}`) ||\n capitalize(label || name).replace(/-/g, ' ')\n );\n },\n\n /**\n * Returns current target component\n */\n getComponent() {\n return this.target;\n },\n\n /**\n * Returns input element\n * @return {HTMLElement}\n * @private\n */\n getInputEl() {\n if (!this.$input) {\n const { em, model } = this;\n const md = model;\n const { name } = model.attributes;\n const plh = md.get('placeholder') || md.get('default') || '';\n const type = md.get('type') || 'text';\n const min = md.get('min');\n const max = md.get('max');\n const value = this.getModelValue();\n const input = $(` `);\n const i18nAttr = em.t(`traitManager.traits.attributes.${name}`) || {};\n input.attr(i18nAttr);\n\n if (!isUndefined(value)) {\n md.set({ value }, { silent: true });\n input.prop('value', value);\n }\n\n if (min) {\n input.prop('min', min);\n }\n\n if (max) {\n input.prop('max', max);\n }\n\n this.$input = input;\n }\n return this.$input.get(0);\n },\n\n getInputElem() {\n const { input, $input } = this;\n return (\n input || ($input && $input.get && $input.get(0)) || this.getElInput()\n );\n },\n\n getModelValue() {\n let value;\n const model = this.model;\n const target = this.target;\n const name = model.get('name');\n\n if (model.get('changeProp')) {\n value = target.get(name);\n } else {\n const attrs = target.get('attributes');\n value = model.get('value') || attrs[name];\n }\n\n return !isUndefined(value) ? value : '';\n },\n\n getElInput() {\n return this.elInput;\n },\n\n /**\n * Renders input\n * @private\n * */\n renderField() {\n const { $el, appendInput, model } = this;\n const inputs = $el.find('[data-input]');\n const el = inputs[inputs.length - 1];\n let tpl = model.el;\n\n if (!tpl) {\n tpl = this.createInput\n ? this.createInput(this.getClbOpts())\n : this.getInputEl();\n }\n\n if (isString(tpl)) {\n el.innerHTML = tpl;\n this.elInput = el.firstChild;\n } else {\n appendInput ? el.appendChild(tpl) : el.insertBefore(tpl, el.firstChild);\n this.elInput = tpl;\n }\n\n model.el = this.elInput;\n },\n\n hasLabel() {\n const { label } = this.model.attributes;\n return !this.noLabel && label !== false;\n },\n\n rerender() {\n this.model.el = null;\n this.render();\n },\n\n postUpdate() {\n this.onUpdate(this.getClbOpts());\n },\n\n render() {\n const { $el, pfx, ppfx, model } = this;\n const { type, id } = model.attributes;\n const hasLabel = this.hasLabel && this.hasLabel();\n const cls = `${pfx}trait`;\n this.$input = null;\n let tmpl = `\n ${hasLabel ? `
` : ''}\n
\n ${\n this.templateInput\n ? isFunction(this.templateInput)\n ? this.templateInput(this.getClbOpts())\n : this.templateInput\n : ''\n }\n
\n
`;\n $el.empty().append(tmpl);\n hasLabel && this.renderLabel();\n this.renderField();\n this.el.className = `${cls}__wrp ${cls}__wrp-${id}`;\n this.postUpdate();\n this.onRender(this.getClbOpts());\n return this;\n }\n});\n","import Backbone from 'backbone';\nimport { isString, isUndefined } from 'underscore';\nimport TraitView from './TraitView';\n\nconst $ = Backbone.$;\n\nexport default TraitView.extend({\n init() {\n this.listenTo(this.model, 'change:options', this.rerender);\n },\n\n templateInput() {\n const { ppfx, clsField } = this;\n return ``;\n },\n\n /**\n * Returns input element\n * @return {HTMLElement}\n * @private\n */\n getInputEl() {\n if (!this.$input) {\n const { model, em } = this;\n const propName = model.get('name');\n const opts = model.get('options') || [];\n const values = [];\n let input = '';\n\n opts.forEach(el => {\n let attrs = '';\n let name, value, style;\n\n if (isString(el)) {\n name = el;\n value = el;\n } else {\n name = el.name || el.label || el.value;\n value = `${isUndefined(el.value) ? el.id : el.value}`.replace(\n /\"/g,\n '"'\n );\n style = el.style ? el.style.replace(/\"/g, '"') : '';\n attrs += style ? ` style=\"${style}\"` : '';\n }\n const resultName =\n em.t(`traitManager.traits.options.${propName}.${value}`) || name;\n input += `${resultName} `;\n values.push(value);\n });\n\n input += ' ';\n this.$input = $(input);\n const val = model.getTargetValue();\n const valResult = values.indexOf(val) >= 0 ? val : model.get('default');\n !isUndefined(valResult) && this.$input.val(valResult);\n }\n\n return this.$input.get(0);\n }\n});\n","import { isUndefined } from 'underscore';\nimport TraitView from './TraitView';\n\nexport default TraitView.extend({\n appendInput: 0,\n\n templateInput() {\n const { ppfx, clsField } = this;\n return `\n \n `;\n },\n\n /**\n * Fires when the input is changed\n * @private\n */\n onChange() {\n const value = this.getInputElem().checked;\n this.model.set('value', this.getCheckedValue(value));\n },\n\n getCheckedValue(checked) {\n let result = checked;\n const { valueTrue, valueFalse } = this.model.attributes;\n\n if (result && !isUndefined(valueTrue)) {\n result = valueTrue;\n }\n\n if (!result && !isUndefined(valueFalse)) {\n result = valueFalse;\n }\n\n return result;\n },\n\n /**\n * Returns input element\n * @return {HTMLElement}\n * @private\n */\n getInputEl(...args) {\n const toInit = !this.$input;\n const el = TraitView.prototype.getInputEl.apply(this, args);\n\n if (toInit) {\n let checked, targetValue;\n const { model, target } = this;\n const { valueTrue, valueFalse } = model.attributes;\n const name = model.get('name');\n\n if (model.get('changeProp')) {\n checked = target.get(name);\n targetValue = checked;\n } else {\n targetValue = target.get('attributes')[name];\n checked = targetValue || targetValue === '' ? !0 : !1;\n }\n\n if (!isUndefined(valueFalse) && targetValue === valueFalse) {\n checked = !1;\n }\n\n el.checked = checked;\n }\n\n return el;\n }\n});\n","import TraitView from './TraitView';\nimport { isUndefined } from 'underscore';\nimport InputNumber from 'domain_abstract/ui/InputNumber';\n\nexport default TraitView.extend({\n getValueForTarget() {\n const { model } = this;\n const { value, unit } = model.attributes;\n return !isUndefined(value) && value !== ''\n ? value + unit\n : model.get('default');\n },\n\n /**\n * Returns input element\n * @return {HTMLElement}\n * @private\n */\n getInputEl() {\n if (!this.input) {\n const { ppfx, model } = this;\n const value = this.getModelValue();\n const inputNumber = new InputNumber({\n contClass: `${ppfx}field-int`,\n type: 'number',\n model: model,\n ppfx\n });\n this.input = inputNumber.render();\n this.$input = this.input.inputEl;\n this.$unit = this.input.unitEl;\n model.set('value', value, { fromTarget: 1 });\n this.$input.val(value);\n this.input = inputNumber.el;\n }\n return this.input;\n }\n});\n","import TraitView from './TraitView';\nimport InputColor from 'domain_abstract/ui/InputColor';\n\nexport default TraitView.extend({\n templateInput: '',\n\n /**\n * Returns input element\n * @return {HTMLElement}\n * @private\n */\n getInputEl() {\n if (!this.input) {\n const model = this.model;\n const value = this.getModelValue();\n const inputColor = new InputColor({\n model,\n target: this.config.em,\n contClass: this.ppfx + 'field-color',\n ppfx: this.ppfx\n });\n const input = inputColor.render();\n input.setValue(value, { fromTarget: 1 });\n this.input = input.el;\n }\n\n return this.input;\n }\n});\n","import { isString } from 'underscore';\nimport TraitView from './TraitView';\n\nexport default TraitView.extend({\n events: {\n 'click button': 'handleClick'\n },\n\n templateInput: '',\n\n handleClick() {\n const { model, em } = this;\n const command = model.get('command');\n\n if (command) {\n if (isString(command)) {\n em.get('Commands').run(command);\n } else {\n command(em.get('Editor'), model);\n }\n }\n },\n\n renderLabel() {\n if (this.model.get('label')) {\n TraitView.prototype.renderLabel.apply(this, arguments);\n }\n },\n\n getInputEl() {\n const { model, ppfx } = this;\n const { labelButton, text, full } = model.props();\n const label = labelButton || text;\n const className = `${ppfx}btn`;\n const input = `${label} `;\n return input;\n }\n});\n","import DomainViews from 'domain_abstract/view/DomainViews';\nimport TraitView from './TraitView';\nimport TraitSelectView from './TraitSelectView';\nimport TraitCheckboxView from './TraitCheckboxView';\nimport TraitNumberView from './TraitNumberView';\nimport TraitColorView from './TraitColorView';\nimport TraitButtonView from './TraitButtonView';\n\nexport default DomainViews.extend({\n ns: 'Traits',\n itemView: TraitView,\n reuseView: 1,\n\n itemsView: {\n text: TraitView,\n number: TraitNumberView,\n select: TraitSelectView,\n checkbox: TraitCheckboxView,\n color: TraitColorView,\n button: TraitButtonView\n },\n\n initialize(o = {}) {\n const config = o.config || {};\n this.config = config;\n this.em = o.editor;\n this.pfx = config.stylePrefix || '';\n this.ppfx = config.pStylePrefix || '';\n this.className = this.pfx + 'traits';\n const toListen = 'component:toggled';\n this.listenTo(this.em, toListen, this.updatedCollection);\n this.updatedCollection();\n },\n\n /**\n * Update view collection\n * @private\n */\n updatedCollection() {\n const ppfx = this.ppfx;\n const comp = this.em.getSelected();\n this.el.className = `${this.className} ${ppfx}one-bg ${ppfx}two-color`;\n this.collection = comp ? comp.get('traits') : [];\n this.render();\n }\n});\n","import { defaults, isElement } from 'underscore';\nimport defaultOpts from './config/config';\nimport TraitsView from './view/TraitsView';\n\nexport default () => {\n let c = {};\n let TraitsViewer;\n\n return {\n TraitsView,\n\n /**\n * Name of the module\n * @type {String}\n * @private\n */\n name: 'TraitManager',\n\n /**\n * Get configuration object\n * @return {Object}\n * @private\n */\n getConfig() {\n return c;\n },\n\n /**\n * Initialize module. Automatically called with a new instance of the editor\n * @param {Object} config Configurations\n */\n init(config = {}) {\n c = config;\n defaults(c, defaultOpts);\n const ppfx = c.pStylePrefix;\n ppfx && (c.stylePrefix = `${ppfx}${c.stylePrefix}`);\n TraitsViewer = new TraitsView({\n collection: [],\n editor: c.em,\n config: c\n });\n return this;\n },\n\n postRender() {\n const elTo = this.getConfig().appendTo;\n\n if (elTo) {\n const el = isElement(elTo) ? elTo : document.querySelector(elTo);\n el.appendChild(this.render());\n }\n },\n\n /**\n *\n * Get Traits viewer\n * @private\n */\n getTraitsViewer() {\n return TraitsViewer;\n },\n\n /**\n * Add new trait type\n * @param {string} name Type name\n * @param {Object} methods Object representing the trait\n */\n addType(name, trait) {\n var itemView = TraitsViewer.itemView;\n TraitsViewer.itemsView[name] = itemView.extend(trait);\n },\n\n /**\n * Get trait type\n * @param {string} name Type name\n * @return {Object}\n */\n getType(name) {\n return TraitsViewer.itemsView[name];\n },\n\n render() {\n return TraitsViewer.render().el;\n },\n\n destroy() {\n TraitsViewer.remove();\n [c, TraitsViewer].forEach(i => (i = {}));\n }\n };\n};\n","export default {\n // Specify the element to use as a container, string (query) or HTMLElement\n // With the empty value, nothing will be rendered\n appendTo: '',\n\n // Append blocks to canvas on click\n appendOnClick: 0,\n\n blocks: []\n};\n","import Backbone from 'backbone';\n\nexport default Backbone.Model.extend({\n defaults: {\n // If true, triggers an 'active' event on dropped component\n activate: 0,\n // If true, the dropped component will be selected\n select: 0,\n // If true, all IDs of dropped component and its style will be changed\n resetId: 0,\n // Block label\n label: '',\n // Disable the drag of the block\n disable: 0,\n // HTML string for the media of the block, eg. SVG icon, image, etc.\n media: '',\n content: '',\n category: '',\n attributes: {}\n }\n});\n","import Backbone from 'backbone';\nimport Block from './Block';\n\nexport default Backbone.Collection.extend({\n model: Block\n});\n","import Backbone from 'backbone';\n\nexport default Backbone.Model.extend({\n defaults: {\n id: '',\n label: '',\n open: true,\n attributes: {}\n }\n});\n","import Backbone from 'backbone';\nimport Category from './Category';\n\nexport default Backbone.Collection.extend({\n model: Category\n});\n","import Backbone from 'backbone';\nimport { isObject } from 'underscore';\nimport { on, off, hasDnd } from 'utils/mixins';\n\nexport default Backbone.View.extend({\n events: {\n click: 'handleClick',\n mousedown: 'startDrag',\n dragstart: 'handleDragStart',\n drag: 'handleDrag',\n dragend: 'handleDragEnd'\n },\n\n initialize(o, config = {}) {\n const { model } = this;\n this.em = config.em;\n this.config = config;\n this.endDrag = this.endDrag.bind(this);\n this.ppfx = config.pStylePrefix || '';\n this.listenTo(model, 'destroy remove', this.remove);\n this.listenTo(model, 'change', this.render);\n },\n\n handleClick() {\n const { config, model, em } = this;\n if (!config.appendOnClick) return;\n const sorter = config.getSorter();\n const content = model.get('content');\n const selected = em.getSelected();\n sorter.setDropContent(content);\n let target, valid;\n\n // If there is a selected component, try first to append\n // the block inside, otherwise, try to place it as a next sibling\n if (selected) {\n valid = sorter.validTarget(selected.getEl(), content);\n\n if (valid.valid) {\n target = selected;\n } else {\n const parent = selected.parent();\n valid = sorter.validTarget(parent.getEl(), content);\n if (valid.valid) target = parent;\n }\n }\n\n // If no target found yet, try to append the block to the wrapper\n if (!target) {\n const wrapper = em.getWrapper();\n valid = sorter.validTarget(wrapper.getEl(), content);\n if (valid.valid) target = wrapper;\n }\n\n const result = target && target.append(content)[0];\n result && em.setSelected(result, { scroll: 1 });\n },\n\n /**\n * Start block dragging\n * @private\n */\n startDrag(e) {\n const { config, em, model } = this;\n const disable = model.get('disable');\n //Right or middel click\n if (e.button !== 0 || !config.getSorter || this.el.draggable || disable)\n return;\n em.refreshCanvas();\n const sorter = config.getSorter();\n sorter.setDragHelper(this.el, e);\n sorter.setDropContent(this.model.get('content'));\n sorter.startSort(this.el);\n on(document, 'mouseup', this.endDrag);\n },\n\n handleDragStart(ev) {\n const { em, model } = this;\n const content = model.get('content');\n const isObj = isObject(content);\n const data = isObj ? JSON.stringify(content) : content;\n em.set('dragResult');\n\n // Note: data are not available on dragenter for security reason,\n // we have to use dragContent as we need it for the Sorter context\n // IE11 supports only 'text' data type\n ev.dataTransfer.setData('text', data);\n em.set('dragContent', content);\n em.trigger('block:drag:start', model, ev);\n },\n\n handleDrag(ev) {\n this.em.trigger('block:drag', this.model, ev);\n },\n\n handleDragEnd() {\n const { em, model } = this;\n const result = em.get('dragResult');\n\n if (result) {\n const oldKey = 'activeOnRender';\n const oldActive = result.get && result.get(oldKey);\n\n if (model.get('activate') || oldActive) {\n result.trigger('active');\n result.unset(oldKey);\n }\n\n if (model.get('select')) {\n em.setSelected(result);\n }\n\n if (model.get('resetId')) {\n result.onAll(model => model.resetId());\n }\n }\n\n em.set({\n dragResult: null,\n dragContent: null\n });\n\n em.trigger('block:drag:stop', result, model);\n },\n\n /**\n * Drop block\n * @private\n */\n endDrag(e) {\n off(document, 'mouseup', this.endDrag);\n const sorter = this.config.getSorter();\n\n // After dropping the block in the canvas the mouseup event is not yet\n // triggerd on 'this.doc' and so clicking outside, the sorter, tries to move\n // things (throws false positives). As this method just need to drop away\n // the block helper I use the trick of 'moved = 0' to void those errors.\n sorter.moved = 0;\n sorter.endMove();\n },\n\n render() {\n const { em, el, $el, ppfx, model } = this;\n const disable = model.get('disable');\n const attr = model.get('attributes') || {};\n const cls = attr.class || '';\n const className = `${ppfx}block`;\n const label =\n (em && em.t(`blockManager.labels.${model.id}`)) || model.get('label');\n const render = model.get('render');\n const media = model.get('media');\n const clsAdd = disable ? `${className}--disable` : `${ppfx}four-color-h`;\n $el.attr(attr);\n el.className = `${cls} ${className} ${ppfx}one-bg ${clsAdd}`.trim();\n el.innerHTML = `\n ${media ? `${media}
` : ''}\n ${label}
\n `;\n el.title = el.textContent.trim();\n el.setAttribute('draggable', hasDnd(em) && !disable ? true : false);\n const result = render && render({ el, model, className, prefix: ppfx });\n if (result) el.innerHTML = result;\n return this;\n }\n});\n","import { template } from 'underscore';\nimport Backbone from 'backbone';\n\nexport default Backbone.View.extend({\n template: template(`\n title\">\n caret-icon\"> \n <%= label %>\n
\n blocks-c\">
\n `),\n\n events: {},\n\n initialize(o = {}, config = {}) {\n this.config = config;\n const pfx = config.pStylePrefix || '';\n this.em = config.em;\n this.pfx = pfx;\n this.caretR = 'fa fa-caret-right';\n this.caretD = 'fa fa-caret-down';\n this.iconClass = `${pfx}caret-icon`;\n this.activeClass = `${pfx}open`;\n this.className = `${pfx}block-category`;\n this.events[`click .${pfx}title`] = 'toggle';\n this.listenTo(this.model, 'change:open', this.updateVisibility);\n this.delegateEvents();\n },\n\n updateVisibility() {\n if (this.model.get('open')) this.open();\n else this.close();\n },\n\n open() {\n this.el.className = `${this.className} ${this.activeClass}`;\n this.getIconEl().className = `${this.iconClass} ${this.caretD}`;\n this.getBlocksEl().style.display = '';\n },\n\n close() {\n this.el.className = this.className;\n this.getIconEl().className = `${this.iconClass} ${this.caretR}`;\n this.getBlocksEl().style.display = 'none';\n },\n\n toggle() {\n var model = this.model;\n model.set('open', !model.get('open'));\n },\n\n getIconEl() {\n if (!this.iconEl) {\n this.iconEl = this.el.querySelector('.' + this.iconClass);\n }\n\n return this.iconEl;\n },\n\n getBlocksEl() {\n if (!this.blocksEl) {\n this.blocksEl = this.el.querySelector('.' + this.pfx + 'blocks-c');\n }\n\n return this.blocksEl;\n },\n\n append(el) {\n this.getBlocksEl().appendChild(el);\n },\n\n render() {\n const { em, el, $el, model } = this;\n const label =\n em.t(`blockManager.categories.${model.id}`) || model.get('label');\n el.innerHTML = this.template({\n pfx: this.pfx,\n label\n });\n el.className = this.className;\n $el.css({ order: model.get('order') });\n this.updateVisibility();\n\n return this;\n }\n});\n","import Backbone from 'backbone';\nimport { isString, isObject, bindAll } from 'underscore';\nimport BlockView from './BlockView';\nimport CategoryView from './CategoryView';\n\nexport default Backbone.View.extend({\n initialize(opts, config) {\n bindAll(this, 'getSorter', 'onDrag', 'onDrop');\n this.config = config || {};\n this.categories = opts.categories || '';\n this.renderedCategories = [];\n var ppfx = this.config.pStylePrefix || '';\n this.ppfx = ppfx;\n this.noCatClass = `${ppfx}blocks-no-cat`;\n this.blockContClass = `${ppfx}blocks-c`;\n this.catsClass = `${ppfx}block-categories`;\n const coll = this.collection;\n this.listenTo(coll, 'add', this.addTo);\n this.listenTo(coll, 'reset', this.render);\n this.em = this.config.em;\n this.tac = 'test-tac';\n this.grabbingCls = this.ppfx + 'grabbing';\n\n if (this.em) {\n this.config.getSorter = this.getSorter;\n this.canvas = this.em.get('Canvas');\n }\n },\n\n updateConfig(opts = {}) {\n this.config = {\n ...this.config,\n ...opts\n };\n },\n\n /**\n * Get sorter\n * @private\n */\n getSorter() {\n if (!this.em) return;\n if (!this.sorter) {\n var utils = this.em.get('Utils');\n var canvas = this.canvas;\n this.sorter = new utils.Sorter({\n container: canvas.getBody(),\n placer: canvas.getPlacerEl(),\n containerSel: '*',\n itemSel: '*',\n pfx: this.ppfx,\n onStart: this.onDrag,\n onEndMove: this.onDrop,\n onMove: this.onMove,\n document: canvas.getFrameEl().contentDocument,\n direction: 'a',\n wmargin: 1,\n nested: 1,\n em: this.em,\n canvasRelative: 1\n });\n }\n return this.sorter;\n },\n\n /**\n * Callback when block is on drag\n * @private\n */\n onDrag(e) {\n this.em.stopDefault();\n this.em.trigger('block:drag:start', e);\n },\n\n onMove(e) {\n this.em.trigger('block:drag:move', e);\n },\n\n /**\n * Callback when block is dropped\n * @private\n */\n onDrop(model) {\n const { em } = this;\n em.runDefault();\n\n if (model && model.get) {\n const oldActive = 'activeOnRender';\n\n if (model.get(oldActive)) {\n model.trigger('active');\n model.unset(oldActive);\n }\n\n em.trigger('block:drag:stop', model);\n }\n },\n\n /**\n * Add new model to the collection\n * @param {Model} model\n * @private\n * */\n addTo(model) {\n this.add(model);\n },\n\n /**\n * Render new model inside the view\n * @param {Model} model\n * @param {Object} fragment Fragment collection\n * @private\n * */\n add(model, fragment) {\n const { config } = this;\n var frag = fragment || null;\n var view = new BlockView(\n {\n model,\n attributes: model.get('attributes')\n },\n config\n );\n var rendered = view.render().el;\n var category = model.get('category');\n\n // Check for categories\n if (category && this.categories && !config.ignoreCategories) {\n if (isString(category)) {\n category = {\n id: category,\n label: category\n };\n } else if (isObject(category) && !category.id) {\n category.id = category.label;\n }\n\n var catModel = this.categories.add(category);\n var catId = catModel.get('id');\n var catView = this.renderedCategories[catId];\n var categories = this.getCategoriesEl();\n model.set('category', catModel, { silent: true });\n\n if (!catView && categories) {\n catView = new CategoryView(\n {\n model: catModel\n },\n this.config\n ).render();\n this.renderedCategories[catId] = catView;\n categories.appendChild(catView.el);\n }\n\n catView && catView.append(rendered);\n return;\n }\n\n if (frag) frag.appendChild(rendered);\n else this.append(rendered);\n },\n\n getCategoriesEl() {\n if (!this.catsEl) {\n this.catsEl = this.el.querySelector(`.${this.catsClass}`);\n }\n\n return this.catsEl;\n },\n\n getBlocksEl() {\n if (!this.blocksEl) {\n this.blocksEl = this.el.querySelector(\n `.${this.noCatClass} .${this.blockContClass}`\n );\n }\n\n return this.blocksEl;\n },\n\n append(el) {\n let blocks = this.getBlocksEl();\n blocks && blocks.appendChild(el);\n },\n\n render() {\n const ppfx = this.ppfx;\n const frag = document.createDocumentFragment();\n this.catsEl = null;\n this.blocksEl = null;\n this.renderedCategories = [];\n this.el.innerHTML = `\n
\n \n `;\n\n this.collection.each(model => this.add(model, frag));\n this.append(frag);\n const cls = `${this.blockContClass}s ${ppfx}one-bg ${ppfx}two-color`;\n this.$el.addClass(cls);\n this.rendered = true;\n return this;\n }\n});\n","/**\n * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/block_manager/config/config.js)\n * ```js\n * const editor = grapesjs.init({\n * blockManager: {\n * // options\n * }\n * })\n * ```\n *\n * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance\n *\n * ```js\n * const blockManager = editor.BlockManager;\n * ```\n * * [add](#add)\n * * [get](#get)\n * * [getAll](#getall)\n * * [getAllVisible](#getallvisible)\n * * [remove](#remove)\n * * [getConfig](#getconfig)\n * * [getCategories](#getcategories)\n * * [getContainer](#getcontainer)\n * * [render](#render)\n *\n * @module BlockManager\n */\nimport { isElement } from 'underscore';\nimport defaults from './config/config';\nimport Blocks from './model/Blocks';\nimport BlockCategories from './model/Categories';\nimport BlocksView from './view/BlocksView';\n\nexport default () => {\n var c = {};\n var blocks, blocksVisible, blocksView;\n var categories = [];\n\n return {\n /**\n * Name of the module\n * @type {String}\n * @private\n */\n name: 'BlockManager',\n\n /**\n * Initialize module. Automatically called with a new instance of the editor\n * @param {Object} config Configurations\n * @return {this}\n * @private\n */\n init(config) {\n c = config || {};\n const em = c.em;\n\n for (let name in defaults) {\n if (!(name in c)) {\n c[name] = defaults[name];\n }\n }\n\n // Global blocks collection\n blocks = new Blocks([]);\n blocksVisible = new Blocks([]);\n categories = new BlockCategories();\n\n // Setup the sync between the global and public collections\n blocks.listenTo(blocks, 'add', model => {\n blocksVisible.add(model);\n em && em.trigger('block:add', model);\n });\n\n blocks.listenTo(blocks, 'remove', model => {\n blocksVisible.remove(model);\n em && em.trigger('block:remove', model);\n });\n\n blocks.listenTo(blocks, 'reset', coll => {\n blocksVisible.reset(coll.models);\n });\n\n return this;\n },\n\n /**\n * Get configuration object\n * @return {Object}\n */\n getConfig() {\n return c;\n },\n\n /**\n * Load default blocks if the collection is empty\n */\n onLoad() {\n const blocks = this.getAll();\n !blocks.length && blocks.reset(c.blocks);\n },\n\n /**\n * Executed once the main editor instance is rendered\n * @private\n */\n postRender() {\n const collection = blocksVisible;\n blocksView = new BlocksView({ collection, categories }, c);\n const elTo = this.getConfig().appendTo;\n\n if (elTo) {\n const el = isElement(elTo) ? elTo : document.querySelector(elTo);\n el.appendChild(this.render(blocksVisible.models));\n }\n },\n\n /**\n * Add new block to the collection.\n * @param {string} id Block id\n * @param {Object} opts Options\n * @param {string} opts.label Name of the block\n * @param {string} opts.content HTML content\n * @param {string|Object} opts.category Group the block inside a catgegory.\n * You should pass objects with id property, eg:\n * {id: 'some-uid', label: 'My category'}\n * The string will be converted in:\n * 'someid' => {id: 'someid', label: 'someid'}\n * @param {Object} [opts.attributes={}] Block attributes\n * @return {Block} Added block\n * @example\n * blockManager.add('h1-block', {\n * label: 'Heading',\n * content: 'Put your title here ',\n * category: 'Basic',\n * attributes: {\n * title: 'Insert h1 block'\n * }\n * });\n */\n add(id, opts) {\n var obj = opts || {};\n obj.id = id;\n return blocks.add(obj);\n },\n\n /**\n * Return the block by id\n * @param {string} id Block id\n * @example\n * const block = blockManager.get('h1-block');\n * console.log(JSON.stringify(block));\n * // {label: 'Heading', content: 'Put your ...', ...}\n */\n get(id) {\n return blocks.get(id);\n },\n\n /**\n * Return all blocks\n * @return {Collection}\n * @example\n * const blocks = blockManager.getAll();\n * console.log(JSON.stringify(blocks));\n * // [{label: 'Heading', content: 'Put your ...'}, ...]\n */\n getAll() {\n return blocks;\n },\n\n /**\n * Return the visible collection, which containes blocks actually rendered\n * @return {Collection}\n */\n getAllVisible() {\n return blocksVisible;\n },\n\n /**\n * Remove a block by id\n * @param {string} id Block id\n * @return {Block} Removed block\n * @example\n * // Id of the block which need to be removed\n * const id = 'button';\n * blockManager.remove(id);\n */\n remove(id) {\n return blocks.remove(id);\n },\n\n /**\n * Get all available categories.\n * It's possible to add categories only within blocks via 'add()' method\n * @return {Array|Collection}\n */\n getCategories() {\n return categories;\n },\n\n /**\n * Return the Blocks container element\n * @return {HTMLElement}\n */\n getContainer() {\n return blocksView.el;\n },\n\n /**\n * Render blocks\n * @param {Array} blocks Blocks to render, without the argument will render all global blocks\n * @param {Object} [opts={}] Options\n * @param {Boolean} [opts.external] Render blocks in a new container (HTMLElement will be returned)\n * @param {Boolean} [opts.ignoreCategories] Render blocks without categories\n * @return {HTMLElement} Rendered element\n * @example\n * // Render all blocks (inside the global collection)\n * blockManager.render();\n *\n * // Render new set of blocks\n * const blocks = blockManager.getAll();\n * const filtered = blocks.filter(block => block.get('category') == 'sections')\n *\n * blockManager.render(filtered);\n * // Or a new set from an array\n * blockManager.render([\n * {label: 'Label text', content: ' Content
'}\n * ]);\n *\n * // Back to blocks from the global collection\n * blockManager.render();\n *\n * // You can also render your blocks outside of the main block container\n * const newBlocksEl = blockManager.render(filtered, { external: true });\n * document.getElementById('some-id').appendChild(newBlocksEl);\n */\n render(blocks, opts = {}) {\n const toRender = blocks || this.getAll().models;\n\n if (opts.external) {\n const collection = new Blocks(toRender);\n return new BlocksView(\n { collection, categories },\n { ...c, ...opts }\n ).render().el;\n }\n\n if (blocksView) {\n blocksView.updateConfig(opts);\n blocksView.collection.reset(toRender);\n\n if (!blocksView.rendered) {\n blocksView.render();\n blocksView.rendered = 1;\n }\n }\n\n return this.getContainer();\n },\n\n destroy() {\n blocks.reset();\n blocks.stopListening();\n blocksVisible.reset();\n categories.reset();\n blocksView && blocksView.remove();\n [blocks, blocksVisible, categories, blocksView].forEach(i => (i = null));\n c = {};\n }\n };\n};\n","const swv = 'sw-visibility';\nconst expt = 'export-template';\nconst osm = 'open-sm';\nconst otm = 'open-tm';\nconst ola = 'open-layers';\nconst obl = 'open-blocks';\nconst ful = 'fullscreen';\nconst prv = 'preview';\n\nexport default {\n stylePrefix: 'pn-',\n\n // Default panels fa-sliders for features\n defaults: [\n {\n id: 'commands',\n buttons: [{}]\n },\n {\n id: 'options',\n buttons: [\n {\n active: true,\n id: swv,\n className: 'fa fa-square-o',\n command: swv,\n context: swv,\n attributes: { title: 'View components' }\n },\n {\n id: prv,\n className: 'fa fa-eye',\n command: prv,\n context: prv,\n attributes: { title: 'Preview' }\n },\n {\n id: ful,\n className: 'fa fa-arrows-alt',\n command: ful,\n context: ful,\n attributes: { title: 'Fullscreen' }\n },\n {\n id: expt,\n className: 'fa fa-code',\n command: expt,\n attributes: { title: 'View code' }\n }\n ]\n },\n {\n id: 'views',\n buttons: [\n {\n id: osm,\n className: 'fa fa-paint-brush',\n command: osm,\n active: true,\n togglable: 0,\n attributes: { title: 'Open Style Manager' }\n },\n {\n id: otm,\n className: 'fa fa-cog',\n command: otm,\n togglable: 0,\n attributes: { title: 'Settings' }\n },\n {\n id: ola,\n className: 'fa fa-bars',\n command: ola,\n togglable: 0,\n attributes: { title: 'Open Layer Manager' }\n },\n {\n id: obl,\n className: 'fa fa-th-large',\n command: obl,\n togglable: 0,\n attributes: { title: 'Open Blocks' }\n }\n ]\n }\n ],\n\n // Editor model\n em: null,\n\n // Delay before show children buttons (in milliseconds)\n delayBtnsShow: 300\n};\n","import Backbone from 'backbone';\nimport Buttons from './Buttons';\n\nexport default Backbone.Model.extend({\n defaults: {\n id: '',\n content: '',\n visible: true,\n buttons: [],\n attributes: {}\n },\n\n initialize(options) {\n this.btn = this.get('buttons') || [];\n this.buttons = new Buttons(this.btn);\n this.set('buttons', this.buttons);\n }\n});\n","import Backbone from 'backbone';\nimport Panel from './Panel';\n\nexport default Backbone.Collection.extend({\n model: Panel\n});\n","import Backbone from 'backbone';\nimport { isString, isObject, isFunction } from 'underscore';\n\nconst $ = Backbone.$;\n\nexport default Backbone.View.extend({\n tagName() {\n return this.model.get('tagName');\n },\n\n events: {\n click: 'clicked'\n },\n\n initialize(o) {\n var cls = this.model.get('className');\n this.config = o.config || {};\n this.em = this.config.em || {};\n const pfx = this.config.stylePrefix || '';\n const ppfx = this.config.pStylePrefix || '';\n this.pfx = pfx;\n this.ppfx = this.config.pStylePrefix || '';\n this.id = pfx + this.model.get('id');\n this.activeCls = `${pfx}active ${ppfx}four-color`;\n this.disableCls = `${ppfx}disabled`;\n this.btnsVisCls = `${pfx}visible`;\n this.className = pfx + 'btn' + (cls ? ' ' + cls : '');\n this.listenTo(this.model, 'change', this.render);\n this.listenTo(this.model, 'change:active updateActive', this.updateActive);\n this.listenTo(this.model, 'checkActive', this.checkActive);\n this.listenTo(this.model, 'change:bntsVis', this.updateBtnsVis);\n this.listenTo(this.model, 'change:attributes', this.updateAttributes);\n this.listenTo(this.model, 'change:className', this.updateClassName);\n this.listenTo(this.model, 'change:disable', this.updateDisable);\n\n if (this.em && this.em.get) this.commands = this.em.get('Commands');\n },\n\n /**\n * Updates class name of the button\n *\n * @return void\n * */\n updateClassName() {\n const { model, pfx } = this;\n const cls = model.get('className');\n const attrCls = model.get('attributes').class;\n const classStr = `${attrCls ? attrCls : ''} ${pfx}btn ${cls ? cls : ''}`;\n this.$el.attr('class', classStr.trim());\n },\n\n /**\n * Updates attributes of the button\n *\n * @return void\n * */\n updateAttributes() {\n const { em, model, $el } = this;\n const attr = model.get('attributes') || {};\n const title = em && em.t && em.t(`panels.buttons.titles.${model.id}`);\n $el.attr(attr);\n title && $el.attr({ title });\n\n this.updateClassName();\n },\n\n /**\n * Updates visibility of children buttons\n *\n * @return void\n * */\n updateBtnsVis() {\n if (!this.$buttons) return;\n\n if (this.model.get('bntsVis')) this.$buttons.addClass(this.btnsVisCls);\n else this.$buttons.removeClass(this.btnsVisCls);\n },\n\n /**\n * Update active status of the button\n *\n * @return void\n * */\n updateActive(opts = {}) {\n const { model, commands, $el, activeCls } = this;\n const { fromCollection } = opts;\n const context = model.get('context');\n const options = model.get('options');\n const commandName = model.get('command');\n let command = {};\n\n if (!commandName) return;\n\n if (commands && isString(commandName)) {\n command = commands.get(commandName) || {};\n } else if (isFunction(commandName)) {\n command = commands.create({ run: commandName });\n } else if (commandName !== null && isObject(commandName)) {\n command = commands.create(commandName);\n }\n\n if (model.get('active')) {\n !fromCollection && model.collection.deactivateAll(context, model);\n model.set('active', true, { silent: true }).trigger('checkActive');\n commands.runCommand(command, { ...options, sender: model });\n\n // Disable button if the command has no stop method\n command.noStop && model.set('active', false);\n } else {\n $el.removeClass(activeCls);\n commands.stopCommand(command, { ...options, sender: model, force: 1 });\n }\n },\n\n updateDisable() {\n const { disableCls, model } = this;\n const disable = model.get('disable');\n this.$el[disable ? 'addClass' : 'removeClass'](disableCls);\n },\n\n /**\n * Update active style status\n *\n * @return void\n * */\n checkActive() {\n const { model, $el, activeCls } = this;\n model.get('active') ? $el.addClass(activeCls) : $el.removeClass(activeCls);\n },\n\n /**\n * Triggered when button is clicked\n * @param {Object} e Event\n *\n * @return void\n * */\n clicked(e) {\n const { model } = this;\n\n if (model.get('bntsVis') || model.get('disable') || !model.get('command'))\n return;\n\n this.toggleActive();\n },\n\n toggleActive() {\n const { model, em } = this;\n const { active, togglable } = model.attributes;\n\n if (active && !togglable) return;\n\n model.set('active', !active);\n\n // If the stop is requested\n if (active) {\n if (model.get('runDefaultCommand')) em.runDefault();\n } else {\n if (model.get('stopDefaultCommand')) em.stopDefault();\n }\n },\n\n render() {\n const { model } = this;\n const label = model.get('label');\n const { $el } = this;\n !model.get('el') && $el.empty();\n this.updateAttributes();\n label && $el.append(label);\n this.checkActive();\n this.updateDisable();\n\n return this;\n }\n});\n","import Backbone from 'backbone';\nimport ButtonView from './ButtonView';\nimport { result } from 'underscore';\n\nexport default Backbone.View.extend({\n initialize(o) {\n this.opt = o || {};\n this.config = this.opt.config || {};\n this.pfx = this.config.stylePrefix || '';\n this.parentM = this.opt.parentM || null;\n this.listenTo(this.collection, 'add', this.addTo);\n this.listenTo(this.collection, 'reset remove', this.render);\n this.className = this.pfx + 'buttons';\n },\n\n /**\n * Add to collection\n * @param Object Model\n *\n * @return Object\n * */\n addTo(model) {\n this.addToCollection(model);\n },\n\n /**\n * Add new object to collection\n * @param Object Model\n * @param Object Fragment collection\n *\n * @return Object Object created\n * */\n addToCollection(model, fragmentEl) {\n const fragment = fragmentEl || null;\n const viewObject = ButtonView;\n const el = model.get('el');\n const view = new viewObject({\n el,\n model,\n config: this.config,\n parentM: this.parentM\n });\n const rendered = view.render().el;\n\n if (fragment) {\n fragment.appendChild(rendered);\n } else {\n this.$el.append(rendered);\n }\n\n return rendered;\n },\n\n render() {\n var fragment = document.createDocumentFragment();\n this.$el.empty();\n\n this.collection.each(function(model) {\n this.addToCollection(model, fragment);\n }, this);\n\n this.$el.append(fragment);\n this.$el.attr('class', result(this, 'className'));\n return this;\n }\n});\n","import Backbone from 'backbone';\nimport ButtonsView from './ButtonsView';\n\nexport default Backbone.View.extend({\n initialize(o) {\n const config = o.config || {};\n const model = this.model;\n this.config = config;\n this.pfx = config.stylePrefix || '';\n this.ppfx = config.pStylePrefix || '';\n this.buttons = model.get('buttons');\n this.className = this.pfx + 'panel';\n this.id = this.pfx + model.get('id');\n this.listenTo(model, 'change:appendContent', this.appendContent);\n this.listenTo(model, 'change:content', this.updateContent);\n this.listenTo(model, 'change:visible', this.toggleVisible);\n model.view = this;\n },\n\n /**\n * Append content of the panel\n * */\n appendContent() {\n this.$el.append(this.model.get('appendContent'));\n },\n\n /**\n * Update content\n * */\n updateContent() {\n this.$el.html(this.model.get('content'));\n },\n\n toggleVisible() {\n if (!this.model.get('visible')) {\n this.$el.addClass(`${this.ppfx}hidden`);\n return;\n }\n this.$el.removeClass(`${this.ppfx}hidden`);\n },\n\n attributes() {\n return this.model.get('attributes');\n },\n\n initResize() {\n const em = this.config.em;\n const editor = em ? em.get('Editor') : '';\n const resizable = this.model.get('resizable');\n\n if (editor && resizable) {\n var resz = resizable === true ? [1, 1, 1, 1] : resizable;\n var resLen = resz.length;\n var tc,\n cr,\n bc,\n cl = 0;\n\n // Choose which sides of the panel are resizable\n if (resLen == 2) {\n tc = resz[0];\n bc = resz[0];\n cr = resz[1];\n cl = resz[1];\n } else if (resLen == 4) {\n tc = resz[0];\n cr = resz[1];\n bc = resz[2];\n cl = resz[3];\n }\n\n var resizer = editor.Utils.Resizer.init({\n tc,\n cr,\n bc,\n cl,\n tl: 0,\n tr: 0,\n bl: 0,\n br: 0,\n appendTo: this.el,\n silentFrames: 1,\n avoidContainerUpdate: 1,\n prefix: editor.getConfig().stylePrefix,\n onEnd() {\n em && em.trigger('change:canvasOffset');\n },\n posFetcher: (el, { target }) => {\n const style = el.style;\n const config = resizer.getConfig();\n const keyWidth = config.keyWidth;\n const keyHeight = config.keyHeight;\n const rect = el.getBoundingClientRect();\n const forContainer = target == 'container';\n const styleWidth = style[keyWidth];\n const styleHeight = style[keyHeight];\n const width =\n styleWidth && !forContainer ? parseFloat(styleWidth) : rect.width;\n const height =\n styleHeight && !forContainer\n ? parseFloat(styleHeight)\n : rect.height;\n return {\n left: 0,\n top: 0,\n width,\n height\n };\n },\n ...resizable\n });\n resizer.blur = () => {};\n resizer.focus(this.el);\n }\n },\n\n render() {\n const $el = this.$el;\n const ppfx = this.ppfx;\n const cls = `${this.className} ${this.id} ${ppfx}one-bg ${ppfx}two-color`;\n $el.addClass(cls);\n\n if (this.buttons.length) {\n var buttons = new ButtonsView({\n collection: this.buttons,\n config: this.config\n });\n $el.append(buttons.render().el);\n }\n\n $el.append(this.model.get('content'));\n return this;\n }\n});\n","import Backbone from 'backbone';\nimport PanelView from './PanelView';\n\nexport default Backbone.View.extend({\n initialize(o) {\n this.opt = o || {};\n this.config = this.opt.config || {};\n this.pfx = this.config.stylePrefix || '';\n const items = this.collection;\n this.listenTo(items, 'add', this.addTo);\n this.listenTo(items, 'reset', this.render);\n this.listenTo(items, 'remove', this.onRemove);\n this.className = this.pfx + 'panels';\n },\n\n onRemove(model) {\n const view = model.view;\n view && view.remove();\n },\n\n /**\n * Add to collection\n * @param Object Model\n *\n * @return Object\n * @private\n * */\n addTo(model) {\n this.addToCollection(model);\n },\n\n /**\n * Add new object to collection\n * @param Object Model\n * @param Object Fragment collection\n * @param integer Index of append\n *\n * @return Object Object created\n * @private\n * */\n addToCollection(model, fragmentEl) {\n const fragment = fragmentEl || null;\n const config = this.config;\n const el = model.get('el');\n const view = new PanelView({\n el,\n model,\n config\n });\n const rendered = view.render().el;\n const appendTo = model.get('appendTo');\n\n // Do nothing if the panel was requested to be another element\n if (el) {\n } else if (appendTo) {\n var appendEl = document.querySelector(appendTo);\n appendEl.appendChild(rendered);\n } else {\n if (fragment) {\n fragment.appendChild(rendered);\n } else {\n this.$el.append(rendered);\n }\n }\n\n view.initResize();\n return rendered;\n },\n\n render() {\n const $el = this.$el;\n const frag = document.createDocumentFragment();\n $el.empty();\n this.collection.each(model => this.addToCollection(model, frag));\n $el.append(frag);\n $el.attr('class', this.className);\n return this;\n }\n});\n","/**\n * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/panels/config/config.js)\n * ```js\n * const editor = grapesjs.init({\n * panels: {\n * // options\n * }\n * })\n * ```\n *\n * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance\n *\n * ```js\n * const panelManager = editor.Panels;\n * ```\n *\n * * [addPanel](#addpanel)\n * * [addButton](#addbutton)\n * * [getButton](#getbutton)\n * * [getPanel](#getpanel)\n * * [getPanels](#getpanels)\n * * [getPanelsEl](#getpanelsel)\n * * [removePanel](#removepanel)\n * * [removeButton](#removebutton)\n *\n * @module Panels\n */\nimport defaults from './config/config';\nimport Panel from './model/Panel';\nimport Panels from './model/Panels';\nimport PanelsView from './view/PanelsView';\n\nexport default () => {\n var c = {};\n var panels, PanelsViewObj;\n\n return {\n /**\n * Name of the module\n * @type {String}\n * @private\n */\n name: 'Panels',\n\n /**\n * Initialize module. Automatically called with a new instance of the editor\n * @param {Object} config Configurations\n * @private\n */\n init(config) {\n c = config || {};\n for (var name in defaults) {\n if (!(name in c)) c[name] = defaults[name];\n }\n\n var ppfx = c.pStylePrefix;\n if (ppfx) c.stylePrefix = ppfx + c.stylePrefix;\n\n panels = new Panels(c.defaults);\n PanelsViewObj = new PanelsView({\n collection: panels,\n config: c\n });\n return this;\n },\n\n /**\n * Returns the collection of panels\n * @return {Collection} Collection of panel\n */\n getPanels() {\n return panels;\n },\n\n /**\n * Returns panels element\n * @return {HTMLElement}\n */\n getPanelsEl() {\n return PanelsViewObj.el;\n },\n\n /**\n * Add new panel to the collection\n * @param {Object|Panel} panel Object with right properties or an instance of Panel\n * @return {Panel} Added panel. Useful in case passed argument was an Object\n * @example\n * var newPanel = panelManager.addPanel({\n * id: 'myNewPanel',\n * visible : true,\n * buttons : [...],\n * });\n */\n addPanel(panel) {\n return panels.add(panel);\n },\n\n /**\n * Remove a panel from the collection\n * @param {Object|Panel|String} panel Object with right properties or an instance of Panel or Painel id\n * @return {Panel} Removed panel. Useful in case passed argument was an Object\n * @example\n * const newPanel = panelManager.removePanel({\n * id: 'myNewPanel',\n * visible : true,\n * buttons : [...],\n * });\n *\n * const newPanel = panelManager.removePanel('myNewPanel');\n *\n */\n removePanel(panel) {\n return panels.remove(panel);\n },\n\n /**\n * Get panel by ID\n * @param {string} id Id string\n * @return {Panel|null}\n * @example\n * var myPanel = panelManager.getPanel('myNewPanel');\n */\n getPanel(id) {\n var res = panels.where({ id });\n return res.length ? res[0] : null;\n },\n\n /**\n * Add button to the panel\n * @param {string} panelId Panel's ID\n * @param {Object|Button} button Button object or instance of Button\n * @return {Button|null} Added button. Useful in case passed button was an Object\n * @example\n * var newButton = panelManager.addButton('myNewPanel',{\n * id: 'myNewButton',\n * className: 'someClass',\n * command: 'someCommand',\n * attributes: { title: 'Some title'},\n * active: false,\n * });\n * // It's also possible to pass the command as an object\n * // with .run and .stop methods\n * ...\n * command: {\n * run: function(editor) {\n * ...\n * },\n * stop: function(editor) {\n * ...\n * }\n * },\n * // Or simply like a function which will be evaluated as a single .run command\n * ...\n * command: function(editor) {\n * ...\n * }\n */\n addButton(panelId, button) {\n var pn = this.getPanel(panelId);\n return pn ? pn.get('buttons').add(button) : null;\n },\n\n /**\n * Remove button from the panel\n * @param {String} panelId Panel's ID\n * @param {String} buttonId Button's ID\n * @return {Button|null} Removed button.\n * @example\n * const removedButton = panelManager.addButton('myNewPanel',{\n * id: 'myNewButton',\n * className: 'someClass',\n * command: 'someCommand',\n * attributes: { title: 'Some title'},\n * active: false,\n * });\n *\n * const removedButton = panelManager.removeButton('myNewPanel', 'myNewButton');\n *\n */\n removeButton(panelId, button) {\n var pn = this.getPanel(panelId);\n return pn && pn.get('buttons').remove(button);\n },\n\n /**\n * Get button from the panel\n * @param {string} panelId Panel's ID\n * @param {string} id Button's ID\n * @return {Button|null}\n * @example\n * var button = panelManager.getButton('myPanel','myButton');\n */\n getButton(panelId, id) {\n var pn = this.getPanel(panelId);\n if (pn) {\n var res = pn.get('buttons').where({ id });\n return res.length ? res[0] : null;\n }\n return null;\n },\n\n /**\n * Render panels and buttons\n * @return {HTMLElement}\n * @private\n */\n render() {\n return PanelsViewObj.render().el;\n },\n\n /**\n * Active activable buttons\n * @private\n */\n active() {\n this.getPanels().each(p => {\n p.get('buttons').each(btn => {\n btn.get('active') && btn.trigger('updateActive');\n });\n });\n },\n\n /**\n * Disable buttons flagged as disabled\n * @private\n */\n disableButtons() {\n this.getPanels().each(p => {\n p.get('buttons').each(btn => {\n if (btn.get('disable')) btn.trigger('change:disable');\n });\n });\n },\n\n destroy() {\n panels.reset();\n panels.stopListening();\n PanelsViewObj.remove();\n [c, panels, PanelsViewObj].forEach(i => (i = {}));\n },\n\n Panel\n };\n};\n","export default {\n stylePrefix: 'sm-',\n\n sectors: [],\n\n // Specify the element to use as a container, string (query) or HTMLElement\n // With the empty value, nothing will be rendered\n appendTo: '',\n\n // Hide the property in case it's not stylable for the\n // selected component (each component has 'stylable' property)\n hideNotStylable: true,\n\n // Highlight changed properties of the selected component\n highlightChanged: true,\n\n // Highlight computed properties of the selected component\n highlightComputed: true,\n\n // Show computed properties of the selected component, if this value\n // is set to false, highlightComputed will not take effect\n showComputed: true,\n\n // Adds the possibility to clear property value from the target style\n clearProperties: 0,\n\n // Properties not to take in account for computed styles\n avoidComputed: ['width', 'height']\n};\n","export default () => ({\n /**\n * Build props object by their name\n * @param {Array|string} props Array of properties name\n * @return {Array}\n */\n build(props) {\n var objs = [];\n var dftFixedValues = ['initial', 'inherit'];\n\n if (typeof props === 'string') props = [props];\n\n for (var i = 0, len = props.length; i < len; i++) {\n var obj = {};\n var prop = props[i];\n obj.property = prop;\n\n // Property\n switch (prop) {\n case 'border-radius-c':\n obj.property = 'border-radius';\n break;\n }\n\n // Fixed values\n switch (prop) {\n case 'top':\n case 'right':\n case 'bottom':\n case 'left':\n case 'margin-top':\n case 'margin-right':\n case 'margin-bottom':\n case 'margin-left':\n case 'padding-top':\n case 'padding-right':\n case 'padding-bottom':\n case 'padding-left':\n case 'width':\n case 'max-width':\n case 'min-width':\n case 'height':\n case 'max-height':\n case 'min-height':\n case 'flex-basis':\n obj.fixedValues = ['initial', 'inherit', 'auto'];\n break;\n case 'font-size':\n obj.fixedValues = [\n 'medium',\n 'xx-small',\n 'x-small',\n 'small',\n 'large',\n 'x-large',\n 'xx-large',\n 'smaller',\n 'larger',\n 'length',\n 'initial',\n 'inherit'\n ];\n break;\n case 'letter-spacing':\n case 'line-height':\n obj.fixedValues = ['normal', 'initial', 'inherit'];\n break;\n }\n\n // Type\n switch (prop) {\n case 'float':\n case 'position':\n case 'text-align':\n obj.type = 'radio';\n break;\n case 'display':\n case 'flex-direction':\n case 'flex-wrap':\n case 'justify-content':\n case 'align-items':\n case 'align-content':\n case 'align-self':\n case 'font-family':\n case 'font-weight':\n case 'border-style':\n case 'box-shadow-type':\n case 'background-repeat':\n case 'background-position':\n case 'background-attachment':\n case 'background-size':\n case 'transition-property':\n case 'transition-timing-function':\n case 'cursor':\n case 'overflow':\n case 'overflow-x':\n case 'overflow-y':\n obj.type = 'select';\n break;\n case 'top':\n case 'right':\n case 'bottom':\n case 'left':\n case 'margin-top':\n case 'margin-right':\n case 'margin-bottom':\n case 'margin-left':\n case 'padding-top':\n case 'padding-right':\n case 'padding-bottom':\n case 'padding-left':\n case 'min-height':\n case 'min-width':\n case 'max-height':\n case 'max-width':\n case 'width':\n case 'height':\n case 'font-size':\n case 'letter-spacing':\n case 'line-height':\n case 'text-shadow-h':\n case 'text-shadow-v':\n case 'text-shadow-blur':\n case 'border-radius-c':\n case 'border-top-left-radius':\n case 'border-top-right-radius':\n case 'border-bottom-left-radius':\n case 'border-bottom-right-radius':\n case 'border-width':\n case 'box-shadow-h':\n case 'box-shadow-v':\n case 'box-shadow-blur':\n case 'box-shadow-spread':\n case 'transition-duration':\n case 'perspective':\n case 'transform-rotate-x':\n case 'transform-rotate-y':\n case 'transform-rotate-z':\n case 'transform-scale-x':\n case 'transform-scale-y':\n case 'transform-scale-z':\n case 'order':\n case 'flex-grow':\n case 'flex-shrink':\n case 'flex-basis':\n obj.type = 'integer';\n break;\n case 'margin':\n case 'padding':\n case 'border-radius':\n case 'border':\n case 'transform':\n obj.type = 'composite';\n break;\n case 'color':\n case 'text-shadow-color':\n case 'background-color':\n case 'border-color':\n case 'box-shadow-color':\n obj.type = 'color';\n break;\n case 'text-shadow':\n case 'box-shadow':\n case 'background':\n case 'transition':\n obj.type = 'stack';\n break;\n case 'background-image':\n obj.type = 'file';\n break;\n }\n\n // Defaults\n switch (prop) {\n case 'float':\n case 'background-color':\n case 'text-shadow':\n obj.defaults = 'none';\n break;\n case 'display':\n obj.defaults = 'block';\n break;\n case 'flex-direction':\n obj.defaults = 'row';\n break;\n case 'flex-wrap':\n obj.defaults = 'nowrap';\n break;\n case 'justify-content':\n obj.defaults = 'flex-start';\n break;\n case 'align-items':\n obj.defaults = 'stretch';\n break;\n case 'align-content':\n obj.defaults = 'stretch';\n break;\n case 'align-self':\n obj.defaults = 'auto';\n break;\n case 'position':\n obj.defaults = 'static';\n break;\n case 'margin-top':\n case 'margin-right':\n case 'margin-bottom':\n case 'margin-left':\n case 'padding-top':\n case 'padding-right':\n case 'padding-bottom':\n case 'padding-left':\n case 'text-shadow-h':\n case 'text-shadow-v':\n case 'text-shadow-blur':\n case 'border-radius-c':\n case 'box-shadow-h':\n case 'box-shadow-v':\n case 'box-shadow-spread':\n case 'perspective':\n case 'transform-rotate-x':\n case 'transform-rotate-y':\n case 'transform-rotate-z':\n case 'order':\n case 'flex-grow':\n obj.defaults = 0;\n break;\n case 'border-top-left-radius':\n case 'border-top-right-radius':\n case 'border-bottom-left-radius':\n case 'border-bottom-right-radius':\n obj.defaults = '0px';\n break;\n case 'transform-scale-x':\n case 'transform-scale-y':\n case 'transform-scale-z':\n case 'flex-shrink':\n obj.defaults = 1;\n break;\n case 'box-shadow-blur':\n obj.defaults = '5px';\n break;\n case 'top':\n case 'right':\n case 'bottom':\n case 'left':\n case 'min-height':\n case 'min-width':\n case 'max-height':\n case 'max-width':\n case 'width':\n case 'height':\n case 'background-size':\n case 'cursor':\n case 'flex-basis':\n obj.defaults = 'auto';\n break;\n case 'font-family':\n obj.defaults = 'Arial, Helvetica, sans-serif';\n break;\n case 'font-size':\n case 'border-width':\n obj.defaults = 'medium';\n break;\n case 'font-weight':\n obj.defaults = '400';\n break;\n case 'letter-spacing':\n case 'line-height':\n obj.defaults = 'normal';\n break;\n case 'color':\n case 'text-shadow-color':\n case 'border-color':\n case 'box-shadow-color':\n obj.defaults = 'black';\n break;\n case 'text-align':\n obj.defaults = 'left';\n break;\n case 'border-style':\n obj.defaults = 'solid';\n break;\n case 'box-shadow-type':\n obj.defaults = '';\n break;\n case 'background-repeat':\n obj.defaults = 'repeat';\n break;\n case 'background-position':\n obj.defaults = 'left top';\n break;\n case 'background-attachment':\n obj.defaults = 'scroll';\n break;\n case 'transition-property':\n obj.defaults = 'width';\n break;\n case 'transition-duration':\n obj.defaults = '2';\n break;\n case 'transition-timing-function':\n obj.defaults = 'ease';\n break;\n case 'overflow':\n case 'overflow-x':\n case 'overflow-y':\n obj.defaults = 'visible';\n break;\n }\n\n /*\n * Add styleable dependency on other properties. Allows properties to be\n * dynamically hidden or shown based on values of other properties.\n *\n * Property will be styleable if all of the properties (keys) in the\n * requires object have any of the values specified in the array.\n */\n switch (prop) {\n case 'flex-direction':\n case 'flex-wrap':\n case 'justify-content':\n case 'align-items':\n case 'align-content':\n obj.requires = { display: ['flex'] };\n break;\n case 'order':\n case 'flex-basis':\n case 'flex-grow':\n case 'flex-shrink':\n case 'align-self':\n obj.requiresParent = { display: ['flex'] };\n break;\n }\n\n // Units\n switch (prop) {\n case 'top':\n case 'bottom':\n case 'margin-top':\n case 'margin-bottom':\n case 'padding-top':\n case 'padding-bottom':\n case 'min-height':\n case 'max-height':\n case 'height':\n obj.units = ['px', '%', 'vh'];\n break;\n case 'right':\n case 'left':\n case 'margin-right':\n case 'margin-left':\n case 'padding-right':\n case 'padding-left':\n case 'min-width':\n case 'max-width':\n case 'width':\n obj.units = ['px', '%', 'vw'];\n break;\n case 'flex-basis':\n obj.units = ['px', '%', 'vw', 'vh'];\n break;\n case 'text-shadow-v':\n case 'text-shadow-h':\n case 'text-shadow-blur':\n case 'border-radius-c':\n case 'border-top-left-radius':\n case 'border-top-right-radius':\n case 'border-bottom-left-radius':\n case 'border-bottom-right-radius':\n case 'box-shadow-h':\n case 'box-shadow-v':\n obj.units = ['px', '%'];\n break;\n case 'font-size':\n case 'letter-spacing':\n case 'line-height':\n obj.units = ['px', 'em', 'rem', '%'];\n break;\n case 'border-width':\n obj.units = ['px', 'em'];\n break;\n case 'box-shadow-blur':\n case 'box-shadow-spread':\n case 'perspective':\n obj.units = ['px'];\n break;\n case 'transition-duration':\n obj.units = ['s'];\n break;\n case 'transform-rotate-x':\n case 'transform-rotate-y':\n case 'transform-rotate-z':\n obj.units = ['deg'];\n break;\n }\n\n // Min/Max\n switch (prop) {\n case 'padding-top':\n case 'padding-right':\n case 'padding-bottom':\n case 'padding-left':\n case 'min-height':\n case 'min-width':\n case 'max-height':\n case 'max-width':\n case 'width':\n case 'height':\n case 'font-size':\n case 'text-shadow-blur':\n case 'border-radius-c':\n case 'border-top-left-radius':\n case 'border-top-right-radius':\n case 'border-bottom-left-radius':\n case 'border-bottom-right-radius':\n case 'border-width':\n case 'box-shadow-blur':\n case 'transition-duration':\n case 'perspective':\n case 'flex-basis':\n obj.min = 0;\n break;\n }\n\n // Preview\n switch (prop) {\n case 'text-shadow':\n case 'box-shadow':\n case 'background':\n obj.preview = true;\n break;\n }\n\n // Detached\n switch (prop) {\n case 'background':\n obj.detached = true;\n break;\n }\n\n // Functions\n switch (prop) {\n case 'transform-rotate-x':\n obj.functionName = 'rotateX';\n break;\n case 'transform-rotate-y':\n obj.functionName = 'rotateY';\n break;\n case 'transform-rotate-z':\n obj.functionName = 'rotateZ';\n break;\n case 'transform-scale-x':\n obj.functionName = 'scaleX';\n break;\n case 'transform-scale-y':\n obj.functionName = 'scaleY';\n break;\n case 'transform-scale-z':\n obj.functionName = 'scaleZ';\n break;\n case 'background-image':\n obj.functionName = 'url';\n break;\n }\n\n // Options\n switch (prop) {\n case 'float':\n obj.list = [{ value: 'none' }, { value: 'left' }, { value: 'right' }];\n break;\n case 'display':\n obj.list = [\n { value: 'block' },\n { value: 'inline' },\n { value: 'inline-block' },\n { value: 'flex' },\n { value: 'none' }\n ];\n break;\n case 'flex-direction':\n obj.list = [\n { value: 'row' },\n { value: 'row-reverse' },\n { value: 'column' },\n { value: 'column-reverse' }\n ];\n break;\n case 'flex-wrap':\n obj.list = [\n { value: 'nowrap' },\n { value: 'wrap' },\n { value: 'wrap-reverse' }\n ];\n break;\n case 'justify-content':\n obj.list = [\n { value: 'flex-start' },\n { value: 'flex-end' },\n { value: 'center' },\n { value: 'space-between' },\n { value: 'space-around' },\n { value: 'space-evenly' }\n ];\n break;\n case 'align-items':\n obj.list = [\n { value: 'flex-start' },\n { value: 'flex-end' },\n { value: 'center' },\n { value: 'baseline' },\n { value: 'stretch' }\n ];\n break;\n case 'align-content':\n obj.list = [\n { value: 'flex-start' },\n { value: 'flex-end' },\n { value: 'center' },\n { value: 'space-between' },\n { value: 'space-around' },\n { value: 'stretch' }\n ];\n break;\n case 'align-self':\n obj.list = [\n { value: 'auto' },\n { value: 'flex-start' },\n { value: 'flex-end' },\n { value: 'center' },\n { value: 'baseline' },\n { value: 'stretch' }\n ];\n break;\n case 'position':\n obj.list = [\n { value: 'static' },\n { value: 'relative' },\n { value: 'absolute' },\n { value: 'fixed' }\n ];\n break;\n case 'font-family':\n var ss = ', sans-serif';\n var fonts = [\n 'Arial, Helvetica' + ss,\n 'Arial Black, Gadget' + ss,\n 'Brush Script MT' + ss,\n 'Comic Sans MS, cursive' + ss,\n 'Courier New, Courier, monospace',\n 'Georgia, serif',\n 'Helvetica' + ss,\n 'Impact, Charcoal' + ss,\n 'Lucida Sans Unicode, Lucida Grande' + ss,\n 'Tahoma, Geneva' + ss,\n 'Times New Roman, Times, serif',\n 'Trebuchet MS, Helvetica' + ss,\n 'Verdana, Geneva' + ss\n ];\n obj.list = [];\n for (var j = 0, l = fonts.length; j < l; j++) {\n var font = {};\n font.value = fonts[j];\n font.name = fonts[j].split(',')[0];\n obj.list.push(font);\n }\n break;\n case 'font-weight':\n obj.list = [\n { value: '100', name: 'Thin' },\n { value: '200', name: 'Extra-Light' },\n { value: '300', name: 'Light' },\n { value: '400', name: 'Normal' },\n { value: '500', name: 'Medium' },\n { value: '600', name: 'Semi-Bold' },\n { value: '700', name: 'Bold' },\n { value: '800', name: 'Extra-Bold' },\n { value: '900', name: 'Ultra-Bold' }\n ];\n break;\n case 'text-align':\n obj.list = [\n { value: 'left' },\n { value: 'center' },\n { value: 'right' },\n { value: 'justify' }\n ];\n break;\n case 'border-style':\n obj.list = [\n { value: 'none' },\n { value: 'solid' },\n { value: 'dotted' },\n { value: 'dashed' },\n { value: 'double' },\n { value: 'groove' },\n { value: 'ridge' },\n { value: 'inset' },\n { value: 'outset' }\n ];\n break;\n case 'box-shadow-type':\n obj.list = [\n { value: '', name: 'Outside' },\n { value: 'inset', name: 'Inside' }\n ];\n break;\n case 'background-repeat':\n obj.list = [\n { value: 'repeat' },\n { value: 'repeat-x' },\n { value: 'repeat-y' },\n { value: 'no-repeat' }\n ];\n break;\n case 'background-position':\n obj.list = [\n { value: 'left top' },\n { value: 'left center' },\n { value: 'left bottom' },\n { value: 'right top' },\n { value: 'right center' },\n { value: 'right bottom' },\n { value: 'center top' },\n { value: 'center center' },\n { value: 'center bottom' }\n ];\n break;\n case 'background-attachment':\n obj.list = [\n { value: 'scroll' },\n { value: 'fixed' },\n { value: 'local' }\n ];\n break;\n case 'background-size':\n obj.list = [\n { value: 'auto' },\n { value: 'cover' },\n { value: 'contain' }\n ];\n break;\n case 'transition-property':\n obj.list = [\n { value: 'all' },\n { value: 'width' },\n { value: 'height' },\n { value: 'background-color' },\n { value: 'transform' },\n { value: 'box-shadow' },\n { value: 'opacity' }\n ];\n break;\n case 'transition-timing-function':\n obj.list = [\n { value: 'linear' },\n { value: 'ease' },\n { value: 'ease-in' },\n { value: 'ease-out' },\n { value: 'ease-in-out' }\n ];\n break;\n case 'cursor':\n obj.list = [\n { value: 'auto' },\n { value: 'pointer' },\n { value: 'copy' },\n { value: 'crosshair' },\n { value: 'grab' },\n { value: 'grabbing' },\n { value: 'help' },\n { value: 'move' },\n { value: 'text' }\n ];\n break;\n case 'overflow':\n case 'overflow-x':\n case 'overflow-y':\n obj.list = [\n { value: 'visible' },\n { value: 'hidden' },\n { value: 'scroll' },\n { value: 'auto' }\n ];\n break;\n }\n\n // Properties\n switch (prop) {\n case 'margin':\n obj.properties = this.build([\n 'margin-top',\n 'margin-right',\n 'margin-bottom',\n 'margin-left'\n ]);\n break;\n case 'padding':\n obj.properties = this.build([\n 'padding-top',\n 'padding-right',\n 'padding-bottom',\n 'padding-left'\n ]);\n break;\n case 'text-shadow':\n obj.properties = this.build([\n 'text-shadow-h',\n 'text-shadow-v',\n 'text-shadow-blur',\n 'text-shadow-color'\n ]);\n break;\n case 'border':\n obj.properties = this.build([\n 'border-width',\n 'border-style',\n 'border-color'\n ]);\n break;\n case 'border-radius':\n obj.properties = this.build([\n 'border-top-left-radius',\n 'border-top-right-radius',\n 'border-bottom-right-radius',\n 'border-bottom-left-radius'\n ]);\n break;\n case 'box-shadow':\n obj.properties = this.build([\n 'box-shadow-h',\n 'box-shadow-v',\n 'box-shadow-blur',\n 'box-shadow-spread',\n 'box-shadow-color',\n 'box-shadow-type'\n ]);\n break;\n case 'background':\n obj.properties = this.build([\n 'background-image',\n 'background-repeat',\n 'background-position',\n 'background-attachment',\n 'background-size'\n ]);\n break;\n case 'transition':\n obj.properties = this.build([\n 'transition-property',\n 'transition-duration',\n 'transition-timing-function'\n ]);\n break;\n case 'transform':\n obj.properties = this.build([\n 'transform-rotate-x',\n 'transform-rotate-y',\n 'transform-rotate-z',\n 'transform-scale-x',\n 'transform-scale-y',\n 'transform-scale-z'\n ]);\n break;\n }\n\n objs.push(obj);\n }\n\n return objs;\n }\n});\n","import Backbone from 'backbone';\nimport { extend } from 'underscore';\nimport Properties from './Properties';\nimport PropertyFactory from './PropertyFactory';\n\nexport default Backbone.Model.extend({\n defaults: {\n id: '',\n name: '',\n open: true,\n buildProps: '',\n extendBuilded: 1,\n properties: []\n },\n\n initialize(opts) {\n const o = opts || {};\n const builded = this.buildProperties(o.buildProps);\n const name = this.get('name') || '';\n let props = [];\n !this.get('id') && this.set('id', name.replace(/ /g, '_').toLowerCase());\n\n if (!builded) props = this.get('properties');\n else props = this.extendProperties(builded);\n\n const propsModel = new Properties(props);\n propsModel.sector = this;\n this.set('properties', propsModel);\n },\n\n /**\n * Extend properties\n * @param {Array} props Start properties\n * @param {Array} moProps Model props\n * @param {Boolean} ex Returns the same amount of passed model props\n * @return {Array} Final props\n * @private\n */\n extendProperties(props, moProps, ex) {\n var pLen = props.length;\n var mProps = moProps || this.get('properties');\n var ext = this.get('extendBuilded');\n var isolated = [];\n\n for (var i = 0, len = mProps.length; i < len; i++) {\n var mProp = mProps[i];\n var found = 0;\n\n for (var j = 0; j < pLen; j++) {\n var prop = props[j];\n if (mProp.property == prop.property || mProp.id == prop.property) {\n // Check for nested properties\n var mPProps = mProp.properties;\n if (mPProps && mPProps.length) {\n mProp.properties = this.extendProperties(\n prop.properties || [],\n mPProps,\n 1\n );\n }\n props[j] = ext ? extend(prop, mProp) : mProp;\n isolated[j] = props[j];\n found = 1;\n continue;\n }\n }\n\n if (!found) {\n props.push(mProp);\n isolated.push(mProp);\n }\n }\n\n return ex ? isolated.filter(i => i) : props;\n },\n\n /**\n * Build properties\n * @param {Array} propr Array of props as sting\n * @return {Array}\n * @private\n */\n buildProperties(props) {\n var r;\n var buildP = props || [];\n\n if (!buildP.length) return;\n\n if (!this.propFactory) this.propFactory = new PropertyFactory();\n\n r = this.propFactory.build(buildP);\n\n return r;\n }\n});\n","import Backbone from 'backbone';\nimport Sector from './Sector';\n\nexport default Backbone.Collection.extend({\n model: Sector,\n\n initialize() {\n this.listenTo(this, 'reset', this.onReset);\n },\n\n onReset(models, opts = {}) {\n const prev = opts.previousModels || [];\n prev.forEach(sect => sect.get('properties').reset());\n }\n});\n","import Backbone from 'backbone';\nimport { template } from 'underscore';\nimport PropertiesView from './PropertiesView';\n\nexport default Backbone.View.extend({\n template: template(`\n title\" data-sector-title>\n caret\" class=\"fa\"> \n <%= label %>\n
`),\n\n events: {\n 'click [data-sector-title]': 'toggle'\n },\n\n initialize(o) {\n this.config = o.config || {};\n this.em = this.config.em;\n this.pfx = this.config.stylePrefix || '';\n this.target = o.target || {};\n this.propTarget = o.propTarget || {};\n this.caretR = 'fa-caret-right';\n this.caretD = 'fa-caret-down';\n const model = this.model;\n this.listenTo(model, 'change:open', this.updateOpen);\n this.listenTo(model, 'updateVisibility', this.updateVisibility);\n this.listenTo(model, 'destroy remove', this.remove);\n },\n\n /**\n * If all properties are hidden this will hide the sector\n */\n updateVisibility() {\n var show;\n this.model.get('properties').each(prop => {\n if (prop.get('visible')) {\n show = 1;\n }\n });\n this.el.style.display = show ? '' : 'none';\n },\n\n /**\n * Update visibility\n */\n updateOpen() {\n if (this.model.get('open')) this.show();\n else this.hide();\n },\n\n /**\n * Show the content of the sector\n * */\n show() {\n this.$el.addClass(this.pfx + 'open');\n this.getPropertiesEl().style.display = '';\n this.$caret.removeClass(this.caretR).addClass(this.caretD);\n },\n\n /**\n * Hide the content of the sector\n * */\n hide() {\n this.$el.removeClass(this.pfx + 'open');\n this.getPropertiesEl().style.display = 'none';\n this.$caret.removeClass(this.caretD).addClass(this.caretR);\n },\n\n getPropertiesEl() {\n return this.$el.find(`.${this.pfx}properties`).get(0);\n },\n\n /**\n * Toggle visibility\n * */\n toggle(e) {\n var v = this.model.get('open') ? 0 : 1;\n this.model.set('open', v);\n },\n\n render() {\n const { pfx, model, em, $el } = this;\n const { id, name } = model.attributes;\n const label = (em && em.t(`styleManager.sectors.${id}`)) || name;\n $el.html(this.template({ pfx, label }));\n this.$caret = $el.find(`#${pfx}caret`);\n this.renderProperties();\n $el.attr('class', `${pfx}sector ${pfx}sector__${id} no-select`);\n this.updateOpen();\n return this;\n },\n\n renderProperties() {\n var objs = this.model.get('properties');\n\n if (objs) {\n var view = new PropertiesView({\n collection: objs,\n target: this.target,\n propTarget: this.propTarget,\n config: this.config\n });\n this.$el.append(view.render().el);\n }\n }\n});\n","import Backbone from 'backbone';\nimport { extend, isString, isArray } from 'underscore';\nimport { isTaggableNode } from 'utils/mixins';\nimport { appendAtIndex } from 'utils/dom';\nimport SectorView from './SectorView';\n\nconst helperCls = 'hc-state';\n\nexport default Backbone.View.extend({\n initialize(o = {}) {\n const config = o.config || {};\n this.pfx = config.stylePrefix || '';\n this.ppfx = config.pStylePrefix || '';\n this.target = o.target || {};\n this.config = config;\n\n // The target that will emit events for properties\n const target = {};\n extend(target, Backbone.Events);\n const body = document.body;\n const dummy = document.createElement(`el-${new Date().getTime()}`);\n body.appendChild(dummy);\n target.computedDefault = { ...window.getComputedStyle(dummy) };\n body.removeChild(dummy);\n this.propTarget = target;\n const coll = this.collection;\n const events =\n 'component:toggled component:update:classes change:state change:device frame:resized';\n this.listenTo(coll, 'add', this.addTo);\n this.listenTo(coll, 'reset', this.render);\n this.listenTo(this.target, events, this.targetUpdated);\n },\n\n remove() {\n Backbone.View.prototype.remove.apply(this, arguments);\n ['target', 'config', 'propTarget'].forEach(i => (this[i] = {}));\n },\n\n /**\n * Add to collection\n * @param {Object} model Model\n * @return {Object}\n * @private\n * */\n addTo(model, coll, opts = {}) {\n this.addToCollection(model, null, opts);\n },\n\n toggleStateCls(targets = [], enable) {\n targets.forEach(trg => {\n const el = trg.getEl();\n el && el.classList && el.classList[enable ? 'add' : 'remove'](helperCls);\n });\n },\n\n /**\n * Fired when target is updated\n * @private\n */\n targetUpdated(trg) {\n const em = this.target;\n const pt = this.propTarget;\n const targets = em.getSelectedAll();\n let model = em.getSelected();\n const mdToClear = trg && !!trg.toHTML ? trg : model;\n\n // Clean components\n mdToClear && this.toggleStateCls([mdToClear]);\n if (!model) return;\n\n const config = em.get('Config');\n const state = !config.devicePreviewMode ? em.get('state') : '';\n const { componentFirst } = em.get('SelectorManager').getConfig();\n const el = model.getEl();\n pt.helper = null;\n pt.targets = null;\n\n // Create computed style container\n if (el && isTaggableNode(el)) {\n const stateStr = state ? `:${state}` : null;\n pt.computed = window.getComputedStyle(el, stateStr);\n }\n\n // Create a new rule for the state as a helper\n const appendStateRule = (style = {}) => {\n const cc = em.get('CssComposer');\n const rules = cc.getAll();\n let helperRule = cc.getClassRule(helperCls);\n\n if (!helperRule) {\n helperRule = cc.setClassRule(helperCls);\n } else {\n // I will make it last again, otherwise it could be overridden\n rules.remove(helperRule);\n rules.add(helperRule);\n }\n\n helperRule.set('important', 1);\n helperRule.setStyle(style);\n pt.helper = helperRule;\n };\n\n const sm = em.get('StyleManager');\n model = sm.getModelToStyle(model);\n\n if (state) {\n appendStateRule(model.getStyle());\n this.toggleStateCls(targets, 1);\n }\n\n pt.model = model;\n if (componentFirst) {\n pt.targets = targets.map(t => sm.getModelToStyle(t)).filter(Boolean);\n }\n pt.trigger('update');\n },\n\n /**\n * Select different target for the Style Manager.\n * It could be a Component, CSSRule, or a string of any CSS selector\n * @param {Component|CSSRule|String|Array} target\n * @return {Array} Array of Components/CSSRules\n */\n setTarget(target, opts = {}) {\n const em = this.target;\n const trgs = isArray(target) ? target : [target];\n const { targetIsClass, stylable } = opts;\n const models = [];\n\n trgs.forEach(target => {\n let model = target;\n\n if (isString(target)) {\n let rule;\n const rules = em.get('CssComposer').getAll();\n\n if (targetIsClass) {\n rule = rules.filter(\n rule => rule.get('selectors').getFullString() === target\n )[0];\n }\n\n if (!rule) {\n rule = rules.filter(rule => rule.get('selectorsAdd') === target)[0];\n }\n\n if (!rule) {\n rule = rules.add({ selectors: [], selectorsAdd: target });\n }\n\n stylable && rule.set({ stylable });\n model = rule;\n }\n\n models.push(model);\n });\n\n const pt = this.propTarget;\n pt.targets = models;\n pt.trigger('update', { targets: models });\n return models;\n },\n\n /**\n * Add new object to collection\n * @param {Object} model Model\n * @param {Object} fragmentEl collection\n * @return {Object} Object created\n * @private\n * */\n addToCollection(model, fragmentEl, opts = {}) {\n const { pfx, target, propTarget, config, el } = this;\n const appendTo = fragmentEl || el;\n const rendered = new SectorView({\n model,\n id: `${pfx}${model.get('id')}`,\n name: model.get('name'),\n properties: model.get('properties'),\n target,\n propTarget,\n config\n }).render().el;\n appendAtIndex(appendTo, rendered, opts.at);\n\n return rendered;\n },\n\n render() {\n const frag = document.createDocumentFragment();\n const $el = this.$el;\n const pfx = this.pfx;\n const ppfx = this.ppfx;\n $el.empty();\n this.collection.each(model => this.addToCollection(model, frag));\n $el.append(frag);\n $el.addClass(`${pfx}sectors ${ppfx}one-bg ${ppfx}two-color`);\n return this;\n }\n});\n","/**\n * With Style Manager you build categories (called sectors) of CSS properties which could be used to customize the style of components.\n * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/style_manager/config/config.js)\n * ```js\n * const editor = grapesjs.init({\n * styleManager: {\n * // options\n * }\n * })\n * ```\n *\n * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance\n *\n * ```js\n * const styleManager = editor.StyleManager;\n * ```\n *\n * * [getConfig](#getconfig)\n * * [addSector](#addsector)\n * * [getSector](#getsector)\n * * [removeSector](#removesector)\n * * [getSectors](#getsectors)\n * * [addProperty](#addproperty)\n * * [getProperty](#getproperty)\n * * [removeProperty](#removeproperty)\n * * [getProperties](#getproperties)\n * * [getModelToStyle](#getmodeltostyle)\n * * [addType](#addtype)\n * * [getType](#gettype)\n * * [getTypes](#gettypes)\n * * [createType](#createtype)\n *\n * @module StyleManager\n */\n\nimport { isElement } from 'underscore';\nimport defaults from './config/config';\nimport Sectors from './model/Sectors';\nimport Properties from './model/Properties';\nimport PropertyFactory from './model/PropertyFactory';\nimport SectorsView from './view/SectorsView';\n\nexport default () => {\n var c = {};\n let properties;\n var sectors, SectView;\n\n return {\n PropertyFactory: PropertyFactory(),\n\n /**\n * Name of the module\n * @type {String}\n * @private\n */\n name: 'StyleManager',\n\n /**\n * Get configuration object\n * @return {Object}\n */\n getConfig() {\n return c;\n },\n\n /**\n * Initialize module. Automatically called with a new instance of the editor\n * @param {Object} config Configurations\n * @private\n */\n init(config) {\n c = { ...defaults, ...config };\n const ppfx = c.pStylePrefix;\n this.em = c.em;\n if (ppfx) c.stylePrefix = ppfx + c.stylePrefix;\n properties = new Properties();\n sectors = new Sectors([], c);\n SectView = new SectorsView({\n collection: sectors,\n target: c.em,\n config: c\n });\n\n return this;\n },\n\n onLoad() {\n // Use silent as sectors' view will be created and rendered on StyleManager.render\n sectors.add(c.sectors, { silent: true });\n },\n\n postRender() {\n const elTo = this.getConfig().appendTo;\n\n if (elTo) {\n const el = isElement(elTo) ? elTo : document.querySelector(elTo);\n el.appendChild(this.render());\n }\n },\n\n /**\n * Add new sector to the collection. If the sector with the same id already exists,\n * that one will be returned\n * @param {string} id Sector id\n * @param {Object} sector Object representing sector\n * @param {string} [sector.name=''] Sector's label\n * @param {Boolean} [sector.open=true] Indicates if the sector should be opened\n * @param {Array} [sector.properties=[]] Array of properties\n * @param {Object} [options={}] Options\n * @return {Sector} Added Sector\n * @example\n * var sector = styleManager.addSector('mySector',{\n * name: 'My sector',\n * open: true,\n * properties: [{ name: 'My property'}]\n * }, { at: 0 });\n * // With `at: 0` we place the new sector at the beginning of the collection\n * */\n addSector(id, sector, opts = {}) {\n let result = this.getSector(id);\n\n if (!result) {\n sector.id = id;\n result = sectors.add(sector, opts);\n }\n\n return result;\n },\n\n /**\n * Get sector by id\n * @param {string} id Sector id\n * @return {Sector|null}\n * @example\n * var sector = styleManager.getSector('mySector');\n * */\n getSector(id, opts = {}) {\n const res = sectors.where({ id })[0];\n !res && opts.warn && this._logNoSector(id);\n return res;\n },\n\n /**\n * Remove a sector by id\n * @param {string} id Sector id\n * @return {Sector} Removed sector\n * @example\n * const removed = styleManager.removeSector('mySector');\n */\n removeSector(id) {\n return this.getSectors().remove(this.getSector(id, { warn: 1 }));\n },\n\n /**\n * Get all sectors\n * @return {Sectors} Collection of sectors\n * */\n getSectors() {\n return sectors;\n },\n\n /**\n * Add property to the sector identified by id\n * @param {string} sectorId Sector id\n * @param {Object} property Property object\n * @param {string} [property.name=''] Name of the property\n * @param {string} [property.property=''] CSS property, eg. `min-height`\n * @param {string} [property.type=''] Type of the property: integer | radio | select | color | file | composite | stack\n * @param {Array} [property.units=[]] Unit of measure available, eg. ['px','%','em']. Only for integer type\n * @param {string} [property.unit=''] Default selected unit from `units`. Only for integer type\n * @param {number} [property.min=null] Min possible value. Only for integer type\n * @param {number} [property.max=null] Max possible value. Only for integer type\n * @param {string} [property.defaults=''] Default value\n * @param {string} [property.info=''] Some description\n * @param {string} [property.icon=''] Class name. If exists no text will be displayed\n * @param {Boolean} [property.preview=false] Show layers preview. Only for stack type\n * @param {string} [property.functionName=''] Indicates if value need to be wrapped in some function, for istance `transform: rotate(90deg)`\n * @param {Array} [property.properties=[]] Nested properties for composite and stack type\n * @param {Array} [property.layers=[]] Layers for stack properties\n * @param {Array} [property.list=[]] List of possible options for radio and select types\n * @param {Object} [options={}] Options\n * @return {Property|null} Added Property or `null` in case sector doesn't exist\n * @example\n * var property = styleManager.addProperty('mySector',{\n * name: 'Minimum height',\n * property: 'min-height',\n * type: 'select',\n * defaults: '100px',\n * list: [{\n * value: '100px',\n * name: '100',\n * },{\n * value: '200px',\n * name: '200',\n * }],\n * }, { at: 0 });\n * // With `at: 0` we place the new property at the beginning of the collection\n */\n addProperty(sectorId, property, opts = {}) {\n const sector = this.getSector(sectorId, { warn: 1 });\n let prop = null;\n if (sector) prop = sector.get('properties').add(property, opts);\n\n return prop;\n },\n\n /**\n * Get property by its CSS name and sector id\n * @param {string} sectorId Sector id\n * @param {string} name CSS property name (or id), eg. 'min-height'\n * @return {Property|null}\n * @example\n * var property = styleManager.getProperty('mySector','min-height');\n */\n getProperty(sectorId, name) {\n const sector = this.getSector(sectorId, { warn: 1 });\n let prop;\n\n if (sector) {\n prop = sector\n .get('properties')\n .filter(\n prop => prop.get('property') === name || prop.get('id') === name\n )[0];\n }\n\n return prop || null;\n },\n\n /**\n * Remove a property from the sector\n * @param {string} sectorId Sector id\n * @param {string} name CSS property name, eg. 'min-height'\n * @return {Property} Removed property\n * @example\n * const property = styleManager.removeProperty('mySector', 'min-height');\n */\n removeProperty(sectorId, name) {\n const props = this.getProperties(sectorId);\n return props && props.remove(this.getProperty(sectorId, name));\n },\n\n /**\n * Get properties of the sector\n * @param {string} sectorId Sector id\n * @return {Properties} Collection of properties\n * @example\n * var properties = styleManager.getProperties('mySector');\n */\n getProperties(sectorId) {\n let props = null;\n const sector = this.getSector(sectorId, { warn: 1 });\n if (sector) props = sector.get('properties');\n\n return props;\n },\n\n /**\n * Get what to style inside Style Manager. If you select the component\n * without classes the entity is the Component itself and all changes will\n * go inside its 'style' property. Otherwise, if the selected component has\n * one or more classes, the function will return the corresponding CSS Rule\n * @param {Model} model\n * @return {Model}\n */\n getModelToStyle(model, options = {}) {\n const em = c.em;\n const { skipAdd } = options;\n const classes = model.get('classes');\n const id = model.getId();\n\n if (em) {\n const config = em.getConfig();\n const um = em.get('UndoManager');\n const cssC = em.get('CssComposer');\n const sm = em.get('SelectorManager');\n const smConf = sm ? sm.getConfig() : {};\n const state = !config.devicePreviewMode ? em.get('state') : '';\n const valid = classes.getStyleable();\n const hasClasses = valid.length;\n const useClasses = !smConf.componentFirst || options.useClasses;\n const addOpts = { noCount: 1 };\n const opts = { state, addOpts };\n let rule;\n\n // I stop undo manager here as after adding the CSSRule (generally after\n // selecting the component) and calling undo() it will remove the rule from\n // the collection, therefore updating it in style manager will not affect it\n // #268\n um.stop();\n\n if (hasClasses && useClasses) {\n const deviceW = em.getCurrentMedia();\n rule = cssC.get(valid, state, deviceW);\n\n if (!rule && !skipAdd) {\n rule = cssC.add(valid, state, deviceW, {}, addOpts);\n }\n } else if (config.avoidInlineStyle) {\n rule = cssC.getIdRule(id, opts);\n !rule && !skipAdd && (rule = cssC.setIdRule(id, {}, opts));\n if (model.is('wrapper')) rule.set('wrapper', 1);\n }\n\n rule && (model = rule);\n um.start();\n }\n\n return model;\n },\n\n /**\n * Add new property type\n * @param {string} id Type ID\n * @param {Object} definition Definition of the type. Each definition contains\n * `model` (business logic), `view` (presentation logic)\n * and `isType` function which recognize the type of the\n * passed entity\n *@example\n * styleManager.addType('my-custom-prop', {\n * create({ props, change }) {\n * const el = document.createElement('div');\n * el.innerHTML = ' ';\n * const inputEl = el.querySelector('.my-input');\n * inputEl.addEventListener('change', event => change({ event })); // change will trigger the emit\n * inputEl.addEventListener('input', event => change({ event, complete: false }));\n * return el;\n * },\n * emit({ props, updateStyle }, { event, complete }) {\n * const { value } = event.target;\n * const valueRes = value + 'px';\n * // Pass a string value for the exact CSS property or an object containing multiple properties\n * // eg. updateStyle({ [props.property]: valueRes, color: 'red' });\n * updateStyle(valueRes, { complete });\n * },\n * update({ value, el }) {\n * el.querySelector('.my-input').value = parseInt(value, 10);\n * },\n * destroy() {\n * // In order to prevent memory leaks, use this method to clean, eventually, created instances, global event listeners, etc.\n * }\n *})\n */\n addType(id, definition) {\n properties.addType(id, definition);\n },\n\n /**\n * Get type\n * @param {string} id Type ID\n * @return {Object} Type definition\n */\n getType(id) {\n return properties.getType(id);\n },\n\n /**\n * Get all types\n * @return {Array}\n */\n getTypes() {\n return properties.getTypes();\n },\n\n /**\n * Create new property from type\n * @param {string} id Type ID\n * @param {Object} [options={}] Options\n * @param {Object} [options.model={}] Custom model object\n * @param {Object} [options.view={}] Custom view object\n * @return {PropertyView}\n * @example\n * const propView = styleManager.createType('integer', {\n * model: {units: ['px', 'rem']}\n * });\n * propView.render();\n * propView.model.on('change:value', ...);\n * someContainer.appendChild(propView.el);\n */\n createType(id, { model = {}, view = {} } = {}) {\n const type = this.getType(id);\n\n if (type) {\n return new type.view({\n model: new type.model(model),\n config: c,\n ...view\n });\n }\n },\n\n /**\n * Select different target for the Style Manager.\n * It could be a Component, CSSRule, or a string of any CSS selector\n * @param {Component|CSSRule|String} target\n * @return {Styleable} A Component or CSSRule\n */\n setTarget(target, opts) {\n return SectView.setTarget(target, opts);\n },\n\n getEmitter() {\n return SectView.propTarget;\n },\n\n /**\n * Render sectors and properties\n * @return {HTMLElement}\n * @private\n * */\n render() {\n return SectView.render().el;\n },\n\n _logNoSector(sectorId) {\n const { em } = this;\n em && em.logWarning(`'${sectorId}' sector not found`);\n },\n\n destroy() {\n [properties, sectors].forEach(coll => {\n coll.reset();\n coll.stopListening();\n });\n SectView.remove();\n [c, properties, sectors, SectView].forEach(i => (i = {}));\n this.em = {};\n }\n };\n};\n","export default {\n // Style prefix\n stylePrefix: 'cm-',\n\n inlineCss: false\n};\n","import Backbone from 'backbone';\n\nexport default Backbone.Model.extend({\n build(model, opts = {}) {\n const models = model.components();\n const htmlOpts = {};\n const { em } = opts;\n\n // Remove unnecessary IDs\n if (opts.cleanId && em) {\n const rules = em.get('CssComposer').getAll();\n const idRules = rules\n .toJSON()\n .map(rule => {\n const sels = rule.selectors;\n const sel = sels && sels.length === 1 && sels.models[0];\n return sel && sel.isId() && sel.get('name');\n })\n .filter(i => i);\n\n htmlOpts.attributes = (mod, attrs) => {\n const { id } = attrs;\n if (\n id &&\n id[0] === 'i' && // all autogenerated IDs start with 'i'\n !mod.get('script') && // if the component has script, we have to leave the ID\n !mod.get('attributes').id && // id is not intentionally in attributes\n idRules.indexOf(id) < 0 // we shouldn't have any rule with this ID\n ) {\n delete attrs.id;\n }\n return attrs;\n };\n }\n\n if (opts.exportWrapper) {\n return model.toHTML({\n ...htmlOpts,\n ...(opts.wrapperIsBody && { tag: 'body' })\n });\n }\n\n return this.buildModels(models, htmlOpts);\n },\n\n buildModels(models, opts = {}) {\n let code = '';\n models.forEach(mod => (code += mod.toHTML(opts)));\n return code;\n }\n});\n","import { each } from 'underscore';\nimport Backbone from 'backbone';\n\nexport default Backbone.Model.extend({\n /** @inheritdoc */\n build(model) {\n var json = model.toJSON();\n this.beforeEach(json);\n\n each(\n json,\n function(v, attr) {\n var obj = json[attr];\n if (obj instanceof Backbone.Model) {\n json[attr] = this.build(obj);\n } else if (obj instanceof Backbone.Collection) {\n var coll = obj;\n json[attr] = [];\n if (coll.length) {\n coll.each(function(el, index) {\n json[attr][index] = this.build(el);\n }, this);\n }\n }\n },\n this\n );\n\n return json;\n },\n\n /**\n * Execute on each object\n * @param {Object} obj\n */\n beforeEach(obj) {\n delete obj.status;\n }\n});\n","import { extend } from 'underscore';\nimport Backbone from 'backbone';\n\nexport default Backbone.Model.extend({\n mapModel(model) {\n var code = '';\n var script = model.get('script-export') || model.get('script');\n var type = model.get('type');\n var comps = model.get('components');\n var id = model.getId();\n\n if (script) {\n // If the component has scripts we need to expose his ID\n var attr = model.get('attributes');\n attr = extend({}, attr, { id });\n model.set('attributes', attr, { silent: 1 });\n var scrStr = model.getScriptString(script);\n const scrProps = model.get('script-props');\n\n // If the script was updated, I'll put its code in a separate container\n if (model.get('scriptUpdated') && !scrProps) {\n this.mapJs[type + '-' + id] = { ids: [id], code: scrStr };\n } else {\n let props;\n const mapType = this.mapJs[type];\n\n if (scrProps) {\n props = model.__getScriptProps();\n }\n\n if (mapType) {\n mapType.ids.push(id);\n if (props) mapType.props[id] = props;\n } else {\n const res = { ids: [id], code: scrStr };\n if (props) res.props = { [id]: props };\n this.mapJs[type] = res;\n }\n }\n }\n\n comps.each(function(model) {\n code += this.mapModel(model);\n }, this);\n\n return code;\n },\n\n build(model) {\n this.mapJs = {};\n this.mapModel(model);\n let code = '';\n\n for (let type in this.mapJs) {\n const mapType = this.mapJs[type];\n\n if (mapType.props) {\n code += `\n var props = ${JSON.stringify(mapType.props)};\n var ids = Object.keys(props).map(function(id) { return '#'+id }).join(',');\n var els = document.querySelectorAll(ids);\n for (var i = 0, len = els.length; i < len; i++) {\n var el = els[i];\n (${mapType.code}.bind(el))(props[el.id]);\n }`;\n } else {\n // Deprecated\n const ids = '#' + mapType.ids.join(', #');\n code += `\n var items = document.querySelectorAll('${ids}');\n for (var i = 0, len = items.length; i < len; i++) {\n (function(){\\n${mapType.code}\\n}.bind(items[i]))();\n }`;\n }\n }\n\n return code;\n }\n});\n","import { bindAll } from 'underscore';\nimport Backbone from 'backbone';\nimport CodeMirror from 'codemirror/lib/codemirror';\nimport 'codemirror/mode/htmlmixed/htmlmixed';\nimport 'codemirror/mode/css/css';\nimport 'codemirror-formatting';\n\nexport default Backbone.Model.extend({\n CodeMirror,\n\n defaults: {\n input: '',\n label: '',\n codeName: '',\n theme: 'hopscotch',\n readOnly: true,\n lineNumbers: true\n },\n\n /** @inheritdoc */\n init(el) {\n bindAll(this, 'onChange');\n this.editor = CodeMirror.fromTextArea(el, {\n dragDrop: false,\n lineWrapping: true,\n mode: this.get('codeName'),\n ...this.attributes\n });\n this.element = el;\n this.editor.on('change', this.onChange);\n\n return this;\n },\n\n onChange() {\n this.trigger('update', this);\n },\n\n getEditor() {\n return this.editor;\n },\n\n /**\n * The element where the viewer is attached\n * @return {HTMLElement}\n */\n getElement() {\n return this.element;\n },\n\n /**\n * Set the element which contains the viewer attached.\n * Generally, it should be just a textarea, but some editor might require\n * a container for it some in that case this method can be used\n * @param {HTMLElement} el\n * @return {self}\n */\n setElement(el) {\n this.element = el;\n return this;\n },\n\n /**\n * Refresh the viewer\n * @return {self}\n */\n refresh() {\n this.getEditor().refresh();\n return this;\n },\n\n /**\n * Focus the viewer\n * @return {self}\n */\n focus() {\n this.getEditor().focus();\n return this;\n },\n\n getContent() {\n const ed = this.getEditor();\n return ed && ed.getValue();\n },\n\n /** @inheritdoc */\n setContent(v, opts = {}) {\n const { editor } = this;\n if (!editor) return;\n editor.setValue(v);\n\n if (editor.autoFormatRange) {\n CodeMirror.commands.selectAll(editor);\n editor.autoFormatRange(editor.getCursor(true), editor.getCursor(false));\n CodeMirror.commands.goDocStart(editor);\n }\n\n !opts.noRefresh && setTimeout(() => this.refresh());\n }\n});\n","import { template } from 'underscore';\nimport Backbone from 'backbone';\n\nexport default Backbone.View.extend({\n template: template(`\n editor\" id=\"<%= pfx %><%= codeName %>\">\n \t
title\"><%= label %>
\n \t
code\">
\n
`),\n\n initialize(o) {\n this.config = o.config || {};\n this.pfx = this.config.stylePrefix;\n },\n\n render() {\n var obj = this.model.toJSON();\n obj.pfx = this.pfx;\n this.$el.html(this.template(obj));\n this.$el.attr('class', this.pfx + 'editor-c');\n this.$el.find('#' + this.pfx + 'code').append(this.model.get('input'));\n return this;\n }\n});\n","/**\n * - [addGenerator](#addgenerator)\n * - [getGenerator](#getgenerator)\n * - [getGenerators](#getgenerators)\n * - [addViewer](#addviewer)\n * - [getViewer](#getviewer)\n * - [getViewers](#getviewers)\n * - [updateViewer](#updateviewer)\n * - [getCode](#getcode)\n *\n *\n * Before using methods you should get first the module from the editor instance, in this way:\n *\n * ```js\n * var codeManager = editor.CodeManager;\n * ```\n *\n * @module CodeManager\n */\nimport { isUndefined } from 'underscore';\nimport defaults from './config/config';\nimport gHtml from './model/HtmlGenerator';\nimport gCss from './model/CssGenerator';\nimport gJson from './model/JsonGenerator';\nimport gJs from './model/JsGenerator';\nimport eCM from './model/CodeMirrorEditor';\nimport editorView from './view/EditorView';\n\nexport default () => {\n var c = {};\n var generators = {},\n defGenerators = {},\n viewers = {},\n defViewers = {};\n\n const defaultViewer = 'CodeMirror';\n\n return {\n getConfig() {\n return c;\n },\n\n config: c,\n\n EditorView: editorView,\n\n /**\n * Name of the module\n * @type {String}\n * @private\n */\n name: 'CodeManager',\n\n /**\n * Initialize module. Automatically called with a new instance of the editor\n * @param {Object} config Configurations\n */\n init(config) {\n c = config || {};\n for (var name in defaults) {\n if (!(name in c)) c[name] = defaults[name];\n }\n\n var ppfx = c.pStylePrefix;\n if (ppfx) c.stylePrefix = ppfx + c.stylePrefix;\n\n defGenerators.html = new gHtml();\n defGenerators.css = new gCss();\n defGenerators.json = new gJson();\n defGenerators.js = new gJs();\n defViewers.CodeMirror = new eCM();\n this.loadDefaultGenerators().loadDefaultViewers();\n\n return this;\n },\n\n /**\n * Add new code generator to the collection\n * @param {string} id Code generator ID\n * @param {Object} generator Code generator wrapper\n * @param {Function} generator.build Function that builds the code\n * @return {this}\n * @example\n * codeManager.addGenerator('html7',{\n * build: function(model){\n * return 'myCode';\n * }\n * });\n * */\n addGenerator(id, generator) {\n generators[id] = generator;\n return this;\n },\n\n /**\n * Get code generator by id\n * @param {string} id Code generator ID\n * @return {Object|null}\n * @example\n * var generator = codeManager.getGenerator('html7');\n * generator.build = function(model){\n * //extend\n * };\n * */\n getGenerator(id) {\n return generators[id] || null;\n },\n\n /**\n * Returns all code generators\n * @return {Array}\n * */\n getGenerators() {\n return generators;\n },\n\n /**\n * Add new code viewer\n * @param {string} id Code viewer ID\n * @param {Object} viewer Code viewer wrapper\n * @param {Function} viewer.init Set element on which viewer will be displayed\n * @param {Function} viewer.setContent Set content to the viewer\n * @return {this}\n * @example\n * codeManager.addViewer('ace',{\n * init: function(el){\n * var ace = require('ace-editor');\n * this.editor = ace.edit(el.id);\n * },\n * setContent: function(code){\n * this.editor.setValue(code);\n * }\n * });\n * */\n addViewer(id, viewer) {\n viewers[id] = viewer;\n return this;\n },\n\n /**\n * Get code viewer by id\n * @param {string} id Code viewer ID\n * @return {Object|null}\n * @example\n * var viewer = codeManager.getViewer('ace');\n * */\n getViewer(id) {\n return viewers[id] || null;\n },\n\n /**\n * Returns all code viewers\n * @return {Array}\n * */\n getViewers() {\n return viewers;\n },\n\n createViewer(opts = {}) {\n const type = !isUndefined(opts.type) ? opts.type : defaultViewer;\n const viewer = this.getViewer(type) && this.getViewer(type).clone();\n const cont = document.createElement('div');\n const txtarea = document.createElement('textarea');\n cont.appendChild(txtarea);\n viewer.set(opts);\n viewer.init(txtarea);\n viewer.setElement(cont);\n\n return viewer;\n },\n\n /**\n * Update code viewer content\n * @param {Object} viewer Viewer instance\n * @param {string} code Code string\n * @example\n * var AceViewer = codeManager.getViewer('ace');\n * // ...\n * var viewer = AceViewer.init(el);\n * // ...\n * codeManager.updateViewer(AceViewer, 'code');\n * */\n updateViewer(viewer, code) {\n viewer.setContent(code);\n },\n\n /**\n * Get code from model\n * @param {Object} model Any kind of model that will be passed to the build method of generator\n * @param {string} genId Code generator id\n * @param {Object} [opt] Options\n * @return {string}\n * @example\n * var codeStr = codeManager.getCode(model, 'html');\n * */\n getCode(model, genId, opt = {}) {\n opt.em = c.em;\n var generator = this.getGenerator(genId);\n return generator ? generator.build(model, opt) : '';\n },\n\n /**\n * Load default code generators\n * @return {this}\n * @private\n * */\n loadDefaultGenerators() {\n for (var id in defGenerators) this.addGenerator(id, defGenerators[id]);\n\n return this;\n },\n\n /**\n * Load default code viewers\n * @return {this}\n * @private\n * */\n loadDefaultViewers() {\n for (var id in defViewers) this.addViewer(id, defViewers[id]);\n\n return this;\n },\n\n destroy() {\n [c, generators, defGenerators, viewers, defViewers].forEach(\n i => (i = {})\n );\n }\n };\n};\n","export default {\n devices: []\n};\n","import Backbone from 'backbone';\n\nexport default Backbone.Model.extend({\n idAttribute: 'name',\n\n defaults: {\n name: '',\n\n // Width to set for the editor iframe\n width: null,\n\n // Height to set for the editor iframe\n height: '',\n\n // The width which will be used in media queries,\n // If empty the width will be used\n widthMedia: null,\n\n // Setup the order of media queries\n priority: null\n },\n\n initialize() {\n this.get('widthMedia') === null &&\n this.set('widthMedia', this.get('width'));\n this.get('width') === null && this.set('width', this.get('widthMedia'));\n !this.get('priority') &&\n this.set('priority', parseFloat(this.get('widthMedia')) || 0);\n const toCheck = ['width', 'height', 'widthMedia'];\n toCheck.forEach(prop => this.checkUnit(prop));\n },\n\n checkUnit(prop) {\n const pr = this.get(prop) || '';\n const noUnit = (parseFloat(pr) || 0).toString() === pr.toString();\n noUnit && this.set(prop, `${pr}px`);\n }\n});\n","import Backbone from 'backbone';\nimport Device from './Device';\n\nexport default Backbone.Collection.extend({\n model: Device,\n\n comparator: (left, right) => {\n const max = Number.MAX_VALUE;\n return (right.get('priority') || max) - (left.get('priority') || max);\n },\n\n getSorted() {\n return this.sort();\n }\n});\n","import { template } from 'underscore';\nimport Backbone from 'backbone';\n\nexport default Backbone.View.extend({\n template: template(`\n device-label\"><%= deviceLabel %>
\n field <%= ppfx %>select\">\n
input-holder\">\n devices\"> \n \n
sel-arrow\">\n
d-s-arrow\">
\n
\n
\n add-trasp\">+ `),\n\n events: {\n change: 'updateDevice'\n },\n\n initialize(o) {\n this.config = o.config || {};\n this.em = this.config.em;\n this.ppfx = this.config.pStylePrefix || '';\n this.events['click .' + this.ppfx + 'add-trasp'] = this.startAdd;\n this.listenTo(this.em, 'change:device', this.updateSelect);\n this.delegateEvents();\n },\n\n /**\n * Start adding new device\n * @return {[type]} [description]\n * @private\n */\n startAdd() {},\n\n /**\n * Update device of the editor\n * @private\n */\n updateDevice() {\n var em = this.em;\n if (em) {\n var devEl = this.devicesEl;\n var val = devEl ? devEl.val() : '';\n em.set('device', val);\n }\n },\n\n /**\n * Update select value on device update\n * @private\n */\n updateSelect() {\n var em = this.em;\n var devEl = this.devicesEl;\n if (em && em.getDeviceModel && devEl) {\n var device = em.getDeviceModel();\n var name = device ? device.get('name') : '';\n devEl.val(name);\n }\n },\n\n /**\n * Return devices options\n * @return {string} String of options\n * @private\n */\n getOptions() {\n const { collection, em } = this;\n let result = '';\n\n collection.each(device => {\n const { name, id } = device.attributes;\n const label = (em && em.t && em.t(`deviceManager.devices.${id}`)) || name;\n result += `${label} `;\n });\n\n return result;\n },\n\n render() {\n const { em, ppfx, $el, el } = this;\n $el.html(\n this.template({\n ppfx,\n deviceLabel: em && em.t && em.t('deviceManager.device')\n })\n );\n this.devicesEl = $el.find(`.${ppfx}devices`);\n this.devicesEl.append(this.getOptions());\n el.className = `${ppfx}devices-c`;\n return this;\n }\n});\n","/**\n * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/device_manager/config/config.js)\n * ```js\n * const editor = grapesjs.init({\n * deviceManager: {\n * // options\n * }\n * })\n * ```\n *\n * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance\n *\n * ```js\n * const deviceManager = editor.DeviceManager;\n * ```\n *\n * * [add](#add)\n * * [get](#get)\n * * [getAll](#getAll)\n *\n * @module DeviceManager\n */\nimport defaults from './config/config';\nimport Devices from './model/Devices';\nimport DevicesView from './view/DevicesView';\n\nexport default () => {\n var c = {};\n var devices, view;\n\n return {\n /**\n * Name of the module\n * @type {String}\n * @private\n */\n name: 'DeviceManager',\n\n /**\n * Initialize module. Automatically called with a new instance of the editor\n * @param {Object} config Configurations\n * @param {Array} [config.devices=[]] Default devices\n * @example\n * ...\n * {\n * devices: [\n * {name: 'Desktop', width: ''}\n * {name: 'Tablet', width: '991px'}\n * ],\n * }\n * ...\n * @return {this}\n * @private\n */\n init(config) {\n c = config || {};\n for (var name in defaults) {\n if (!(name in c)) c[name] = defaults[name];\n }\n\n devices = new Devices();\n (c.devices || []).forEach(dv => this.add(dv.id || dv.name, dv.width, dv));\n view = new DevicesView({\n collection: devices,\n config: c\n });\n return this;\n },\n\n /**\n * Add new device to the collection. URLs are supposed to be unique\n * @param {String} id Device id\n * @param {String} width Width of the device\n * @param {Object} [opts] Custom options\n * @returns {Device} Added device\n * @example\n * deviceManager.add('tablet', '900px');\n * deviceManager.add('tablet2', '900px', {\n * height: '300px',\n * // At first, GrapesJS tries to localize the name by device id.\n * // In case is not found, the `name` property is used (or `id` if name is missing)\n * name: 'Tablet 2',\n * widthMedia: '810px', // the width that will be used for the CSS media\n * });\n */\n add(id, width, opts = {}) {\n const obj = {\n ...opts,\n id,\n name: opts.name || id,\n width: width\n };\n return devices.add(obj);\n },\n\n /**\n * Return device by name\n * @param {string} name Name of the device\n * @example\n * var device = deviceManager.get('Tablet');\n * console.log(JSON.stringify(device));\n * // {name: 'Tablet', width: '900px'}\n */\n get(name) {\n return devices.get(name);\n },\n\n /**\n * Return all devices\n * @return {Collection}\n * @example\n * var devices = deviceManager.getAll();\n * console.log(JSON.stringify(devices));\n * // [{name: 'Desktop', width: ''}, ...]\n */\n getAll() {\n return devices;\n },\n\n /**\n * Render devices\n * @return {string} HTML string\n * @private\n */\n render() {\n return view.render().el;\n },\n\n destroy() {\n devices.reset();\n devices.stopListening();\n view.remove();\n [devices, view].forEach(i => (i = null));\n c = {};\n }\n };\n};\n","export default {\n // Prefix identifier that will be used inside storing and loading\n id: 'gjs-',\n\n // Enable/Disable autosaving\n autosave: 1,\n\n // Indicates if load data inside editor after init\n autoload: 1,\n\n // Indicates which storage to use. Available: local | remote\n type: 'local',\n\n // If autosave enabled, indicates how many steps (general changes to structure)\n // need to be done before save. Useful with remoteStorage to reduce remote calls\n stepsBeforeSave: 1,\n\n //Enable/Disable components model (JSON format)\n storeComponents: 1,\n\n //Enable/Disable styles model (JSON format)\n storeStyles: 1,\n\n //Enable/Disable saving HTML template\n storeHtml: 1,\n\n //Enable/Disable saving CSS template\n storeCss: 1,\n\n // ONLY FOR LOCAL STORAGE\n // If enabled, checks if browser supports Local Storage\n checkLocal: 1,\n\n // ONLY FOR REMOTE STORAGE\n // Custom parameters to pass with the remote storage request, eg. csrf token\n params: {},\n\n // Custom headers for the remote storage request\n headers: {},\n\n // Endpoint where to save all stuff\n urlStore: '',\n\n // Endpoint where to fetch data\n urlLoad: '',\n\n //Callback before request\n beforeSend(jqXHR, settings) {},\n\n //Callback after request\n onComplete(jqXHR, status) {},\n\n // set contentType paramater of $.ajax\n // true: application/json; charset=utf-8'\n // false: 'x-www-form-urlencoded'\n contentTypeJson: true,\n\n credentials: 'include',\n\n // Pass custom options to fetch API (remote storage)\n // You can pass a simple object: { someOption: 'someValue' }\n // or a function wich returns and object to add:\n // currentOpts => {\n // return currentOpts.method === 'post' ? { method: 'patch' } : {};\n // }\n fetchOptions: ''\n};\n","import Backbone from 'backbone';\n\nexport default Backbone.Model.extend({\n defaults: {\n checkLocal: true\n },\n\n /**\n * @private\n */\n store(data, clb) {\n this.checkStorageEnvironment();\n\n for (var key in data) localStorage.setItem(key, data[key]);\n\n if (typeof clb == 'function') {\n clb();\n }\n },\n\n /**\n * @private\n */\n load(keys, clb) {\n this.checkStorageEnvironment();\n var result = {};\n\n for (var i = 0, len = keys.length; i < len; i++) {\n var value = localStorage.getItem(keys[i]);\n if (value) result[keys[i]] = value;\n }\n\n if (typeof clb == 'function') {\n clb(result);\n }\n\n return result;\n },\n\n /**\n * @private\n */\n remove(keys) {\n this.checkStorageEnvironment();\n\n for (var i = 0, len = keys.length; i < len; i++)\n localStorage.removeItem(keys[i]);\n },\n\n /**\n * Check storage environment\n * @private\n * */\n checkStorageEnvironment() {\n if (this.get('checkLocal') && !localStorage)\n console.warn(\"Your browser doesn't support localStorage\");\n }\n});\n","import Backbone from 'backbone';\nimport fetch from 'utils/fetch';\nimport { isUndefined, isFunction } from 'underscore';\n\nexport default Backbone.Model.extend({\n fetch,\n\n defaults: {\n urlStore: '',\n urlLoad: '',\n params: {},\n beforeSend() {},\n onComplete() {},\n contentTypeJson: false,\n credentials: 'include',\n fetchOptions: ''\n },\n\n /**\n * Triggered before the request is started\n * @private\n */\n onStart() {\n const em = this.get('em');\n const before = this.get('beforeSend');\n before && before();\n },\n\n /**\n * Triggered on request error\n * @param {Object} err Error\n * @param {Function} [clbErr] Error callback\n * @private\n */\n onError(err, clbErr) {\n if (clbErr) {\n clbErr(err);\n } else {\n const em = this.get('em');\n console.error(err);\n em && em.trigger('storage:error', err);\n }\n },\n\n /**\n * Triggered on request response\n * @param {string} text Response text\n * @private\n */\n onResponse(text, clb) {\n const em = this.get('em');\n const complete = this.get('onComplete');\n const typeJson = this.get('contentTypeJson');\n const parsable = text && typeof text === 'string';\n const res = typeJson && parsable ? JSON.parse(text) : text;\n complete && complete(res);\n clb && clb(res);\n em && em.trigger('storage:response', res);\n },\n\n store(data, clb, clbErr) {\n const body = {};\n\n for (let key in data) {\n body[key] = data[key];\n }\n\n this.request(this.get('urlStore'), { body }, clb, clbErr);\n },\n\n load(keys, clb, clbErr) {\n this.request(this.get('urlLoad'), { method: 'get' }, clb, clbErr);\n },\n\n /**\n * Execute remote request\n * @param {string} url Url\n * @param {Object} [opts={}] Options\n * @param {Function} [clb=null] Callback\n * @param {Function} [clbErr=null] Error callback\n * @private\n */\n request(url, opts = {}, clb = null, clbErr = null) {\n const typeJson = this.get('contentTypeJson');\n const headers = this.get('headers') || {};\n const params = this.get('params');\n const reqHead = 'X-Requested-With';\n const typeHead = 'Content-Type';\n const bodyObj = opts.body || {};\n let fetchOptions;\n let body;\n\n for (let param in params) {\n bodyObj[param] = params[param];\n }\n\n if (isUndefined(headers[reqHead])) {\n headers[reqHead] = 'XMLHttpRequest';\n }\n\n // With `fetch`, have to send FormData without any 'Content-Type'\n // https://stackoverflow.com/questions/39280438/fetch-missing-boundary-in-multipart-form-data-post\n\n if (isUndefined(headers[typeHead]) && typeJson) {\n headers[typeHead] = 'application/json; charset=utf-8';\n }\n\n if (typeJson) {\n body = JSON.stringify(bodyObj);\n } else {\n body = new FormData();\n\n for (let bodyKey in bodyObj) {\n body.append(bodyKey, bodyObj[bodyKey]);\n }\n }\n fetchOptions = {\n method: opts.method || 'post',\n credentials: this.get('credentials'),\n headers\n };\n\n // Body should only be included on POST method\n if (fetchOptions.method === 'post') {\n fetchOptions.body = body;\n }\n\n const fetchOpts = this.get('fetchOptions') || {};\n const addOpts = isFunction(fetchOpts)\n ? fetchOpts(fetchOptions)\n : fetchOptions;\n\n this.onStart();\n this.fetch(url, {\n ...fetchOptions,\n ...(addOpts || {})\n })\n .then(res =>\n ((res.status / 200) | 0) == 1\n ? res.text()\n : res.text().then(text => Promise.reject(text))\n )\n .then(text => this.onResponse(text, clb))\n .catch(err => this.onError(err, clbErr));\n }\n});\n","/**\n * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/storage_manager/config/config.js)\n * ```js\n * const editor = grapesjs.init({\n * storageManager: {\n * // options\n * }\n * })\n * ```\n *\n * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance\n *\n * ```js\n * const storageManager = editor.StorageManager;\n * ```\n *\n * * [getConfig](#getconfig)\n * * [isAutosave](#isautosave)\n * * [setAutosave](#setautosave)\n * * [getStepsBeforeSave](#getstepsbeforesave)\n * * [setStepsBeforeSave](#setstepsbeforesave)\n * * [setStepsBeforeSave](#setstepsbeforesave)\n * * [getStorages](#getstorages)\n * * [getCurrent](#getcurrent)\n * * [getCurrentStorage](#getcurrentstorage)\n * * [setCurrent](#setcurrent)\n * * [add](#add)\n * * [get](#get)\n * * [store](#store)\n * * [load](#load)\n *\n * @module StorageManager\n */\n\nimport defaults from './config/config';\nimport LocalStorage from './model/LocalStorage';\nimport RemoteStorage from './model/RemoteStorage';\n\nconst eventStart = 'storage:start';\nconst eventEnd = 'storage:end';\nconst eventError = 'storage:error';\n\nexport default () => {\n var c = {};\n let em;\n var storages = {};\n var defaultStorages = {};\n\n return {\n /**\n * Name of the module\n * @type {String}\n * @private\n */\n name: 'StorageManager',\n\n /**\n * Initialize module. Automatically called with a new instance of the editor\n * @param {Object} config Configurations\n * @param {string} [config.id='gjs-'] The prefix for the fields, useful to differentiate storing/loading\n * with multiple editors on the same page. For example, in local storage, the item of HTML will be saved like 'gjs-html'\n * @param {Boolean} [config.autosave=true] Indicates if autosave mode is enabled, works in conjunction with stepsBeforeSave\n * @param {number} [config.stepsBeforeSave=1] If autosave enabled, indicates how many steps/changes are necessary\n * before autosave is triggered\n * @param {string} [config.type='local'] Default storage type. Available: 'local' | 'remote' | ''(do not store)\n * @private\n * @example\n * ...\n * {\n * autosave: false,\n * type: 'remote',\n * }\n * ...\n */\n init(config = {}) {\n c = { ...defaults, ...config };\n em = c.em;\n if (c._disable) c.type = 0;\n defaultStorages.remote = new RemoteStorage(c);\n defaultStorages.local = new LocalStorage(c);\n c.currentStorage = c.type;\n this.loadDefaultProviders().setCurrent(c.type);\n return this;\n },\n\n /**\n * Get configuration object\n * @return {Object}\n * */\n getConfig() {\n return c;\n },\n\n /**\n * Checks if autosave is enabled\n * @return {Boolean}\n * */\n isAutosave() {\n return !!c.autosave;\n },\n\n /**\n * Set autosave value\n * @param {Boolean} v\n * @return {this}\n * */\n setAutosave(v) {\n c.autosave = !!v;\n return this;\n },\n\n /**\n * Returns number of steps required before trigger autosave\n * @return {number}\n * */\n getStepsBeforeSave() {\n return c.stepsBeforeSave;\n },\n\n /**\n * Set steps required before trigger autosave\n * @param {number} v\n * @return {this}\n * */\n setStepsBeforeSave(v) {\n c.stepsBeforeSave = v;\n return this;\n },\n\n /**\n * Add new storage\n * @param {string} id Storage ID\n * @param {Object} storage Storage wrapper\n * @param {Function} storage.load Load method\n * @param {Function} storage.store Store method\n * @return {this}\n * @example\n * storageManager.add('local2', {\n * load: function(keys, clb, clbErr) {\n * var res = {};\n * for (var i = 0, len = keys.length; i < len; i++){\n * var v = localStorage.getItem(keys[i]);\n * if(v) res[keys[i]] = v;\n * }\n * clb(res); // might be called inside some async method\n * // In case of errors...\n * // clbErr('Went something wrong');\n * },\n * store: function(data, clb, clbErr) {\n * for(var key in data)\n * localStorage.setItem(key, data[key]);\n * clb(); // might be called inside some async method\n * }\n * });\n * */\n add(id, storage) {\n storages[id] = storage;\n return this;\n },\n\n /**\n * Returns storage by id\n * @param {string} id Storage ID\n * @return {Object|null}\n * */\n get(id) {\n return storages[id] || null;\n },\n\n /**\n * Returns all storages\n * @return {Array}\n * */\n getStorages() {\n return storages;\n },\n\n /**\n * Returns current storage type\n * @return {string}\n * */\n getCurrent() {\n return c.currentStorage;\n },\n\n /**\n * Set current storage type\n * @param {string} id Storage ID\n * @return {this}\n * */\n setCurrent(id) {\n c.currentStorage = id;\n return this;\n },\n\n /**\n * Store key-value resources in the current storage\n * @param {Object} data Data in key-value format, eg. {item1: value1, item2: value2}\n * @param {Function} clb Callback function\n * @return {Object|null}\n * @example\n * storageManager.store({item1: value1, item2: value2});\n * */\n store(data, clb) {\n const st = this.get(this.getCurrent());\n const toStore = {};\n this.onStart('store', data);\n\n for (let key in data) {\n toStore[c.id + key] = data[key];\n }\n\n return st\n ? st.store(\n toStore,\n res => {\n clb && clb(res);\n this.onEnd('store', res);\n },\n err => {\n this.onError('store', err);\n }\n )\n : null;\n },\n\n /**\n * Load resource from the current storage by keys\n * @param {string|Array} keys Keys to load\n * @param {Function} clb Callback function\n * @example\n * storageManager.load(['item1', 'item2'], res => {\n * // res -> {item1: value1, item2: value2}\n * });\n * storageManager.load('item1', res => {\n * // res -> {item1: value1}\n * });\n * */\n load(keys, clb) {\n var st = this.get(this.getCurrent());\n var keysF = [];\n var result = {};\n\n if (typeof keys === 'string') keys = [keys];\n this.onStart('load', keys);\n\n for (var i = 0, len = keys.length; i < len; i++) {\n keysF.push(c.id + keys[i]);\n }\n\n if (st) {\n st.load(\n keysF,\n res => {\n // Restore keys name\n var reg = new RegExp('^' + c.id + '');\n for (var itemKey in res) {\n var itemKeyR = itemKey.replace(reg, '');\n result[itemKeyR] = res[itemKey];\n }\n\n clb && clb(result);\n this.onEnd('load', result);\n },\n err => {\n clb && clb(result);\n this.onError('load', err);\n }\n );\n } else {\n clb && clb(result);\n }\n },\n\n /**\n * Load default storages\n * @return {this}\n * @private\n * */\n loadDefaultProviders() {\n for (var id in defaultStorages) this.add(id, defaultStorages[id]);\n return this;\n },\n\n /**\n * Get current storage\n * @return {Storage}\n * */\n getCurrentStorage() {\n return this.get(this.getCurrent());\n },\n\n /**\n * On start callback\n * @private\n */\n onStart(ctx, data) {\n if (em) {\n em.trigger(eventStart);\n ctx && em.trigger(`${eventStart}:${ctx}`, data);\n }\n },\n\n /**\n * On end callback\n * @private\n */\n onEnd(ctx, data) {\n if (em) {\n em.trigger(eventEnd);\n ctx && em.trigger(`${eventEnd}:${ctx}`, data);\n }\n },\n\n /**\n * On error callback\n * @private\n */\n onError(ctx, data) {\n if (em) {\n em.trigger(eventError, data);\n ctx && em.trigger(`${eventError}:${ctx}`, data);\n this.onEnd(ctx, data);\n }\n },\n\n /**\n * Check if autoload is possible\n * @return {Boolean}\n * @private\n * */\n canAutoload() {\n const storage = this.getCurrentStorage();\n return storage && this.getConfig().autoload;\n },\n\n destroy() {\n [c, em, storages, defaultStorages].forEach(i => (i = {}));\n }\n };\n};\n","export default {\n textTags: ['br', 'b', 'i', 'u', 'a', 'ul', 'ol'],\n\n // Custom CSS parser\n parserCss: null,\n\n // Custom HTML parser\n parserHtml: null\n};\n","import { keys } from 'underscore';\n\n// At-rules\n// https://developer.mozilla.org/it/docs/Web/API/CSSRule#Type_constants\nconst atRules = {\n 4: 'media',\n 5: 'font-face',\n 6: 'page',\n 7: 'keyframes',\n 11: 'counter-style',\n 12: 'supports',\n 13: 'document',\n 14: 'font-feature-values',\n 15: 'viewport'\n};\nconst atRuleKeys = keys(atRules);\nconst singleAtRules = ['5', '6', '11', '15'];\nconst singleAtRulesNames = ['font-face', 'page', 'counter-style', 'viewport'];\n\n/**\n * Parse selector string to array.\n * Only classe based are valid as CSS rules inside editor, not valid\n * selectors will be dropped as additional\n * It's ok with the last part of the string as state (:hover, :active)\n * @param {string} str Selectors string\n * @return {Object}\n * @example\n * var res = parseSelector('.test1, .test1.test2, .test2 .test3');\n * console.log(res);\n * // {\n * //result: [['test1'], ['test1', 'test2']],\n * //add: ['.test2 .test3']\n * //}\n */\nexport const parseSelector = (str = '') => {\n const add = [];\n const result = [];\n const sels = str.split(',');\n\n for (var i = 0, len = sels.length; i < len; i++) {\n var sel = sels[i].trim();\n\n // Will accept only concatenated classes and last\n // class might be with state (eg. :hover), nothing else.\n // Can also accept SINGLE ID selectors, eg. `#myid`, `#myid:hover`\n // Composed are not valid: `#myid.some-class`, `#myid.some-class:hover`\n if (\n /^(\\.{1}[\\w\\-]+)+(:{1,2}[\\w\\-()]+)?$/gi.test(sel) ||\n /^(#{1}[\\w\\-]+){1}(:{1,2}[\\w\\-()]+)?$/gi.test(sel)\n ) {\n var cls = sel.split('.').filter(Boolean);\n result.push(cls);\n } else {\n add.push(sel);\n }\n }\n\n return {\n result,\n add\n };\n};\n\n/**\n * Parse style declarations of the node\n * @param {CSSRule} node\n * @return {Object}\n */\nexport const parseStyle = node => {\n const stl = node.style;\n const style = {};\n\n for (var i = 0, len = stl.length; i < len; i++) {\n const propName = stl[i];\n const propValue = stl.getPropertyValue(propName);\n const important = stl.getPropertyPriority(propName);\n style[propName] = `${propValue}${important ? ` !${important}` : ''}`;\n }\n\n return style;\n};\n\n/**\n * Get the condition when possible\n * @param {CSSRule} node\n * @return {string}\n */\nexport const parseCondition = node => {\n const condition =\n node.conditionText ||\n (node.media && node.media.mediaText) ||\n node.name ||\n node.selectorText ||\n '';\n return condition.trim();\n};\n\n/**\n * Create node for the editor\n * @param {Array} selectors Array containing strings of classes\n * @param {Object} style Key-value object of style declarations\n * @return {Object}\n */\nexport const createNode = (selectors, style = {}, opts = {}) => {\n const node = {};\n const selLen = selectors.length;\n const lastClass = selectors[selLen - 1];\n const stateArr = lastClass ? lastClass.split(/:(.+)/) : [];\n const state = stateArr[1];\n const { atRule, selectorsAdd, mediaText } = opts;\n const singleAtRule = singleAtRulesNames.indexOf(atRule) >= 0;\n singleAtRule && (node.singleAtRule = 1);\n atRule && (node.atRuleType = atRule);\n selectorsAdd && (node.selectorsAdd = selectorsAdd);\n mediaText && (node.mediaText = mediaText);\n\n // Isolate the state from selectors\n if (state) {\n selectors[selLen - 1] = stateArr[0];\n node.state = state;\n stateArr.splice(stateArr.length - 1, 1);\n }\n\n node.selectors = selectors;\n node.style = style;\n\n return node;\n};\n\n/**\n * Fetch data from node\n * @param {StyleSheet|CSSRule} el\n * @return {Array}\n */\nexport const parseNode = el => {\n var result = [];\n var nodes = el.cssRules || [];\n\n for (var i = 0, len = nodes.length; i < len; i++) {\n const node = nodes[i];\n const type = node.type.toString();\n let singleAtRule = 0;\n let atRuleType = '';\n let condition = '';\n // keyText is for CSSKeyframeRule\n let sels = node.selectorText || node.keyText;\n const isSingleAtRule = singleAtRules.indexOf(type) >= 0;\n\n // Check if the node is an at-rule\n if (isSingleAtRule) {\n singleAtRule = 1;\n atRuleType = atRules[type];\n condition = parseCondition(node);\n } else if (atRuleKeys.indexOf(type) >= 0) {\n var subRules = parseNode(node);\n condition = parseCondition(node);\n\n for (var s = 0, lens = subRules.length; s < lens; s++) {\n var subRule = subRules[s];\n condition && (subRule.mediaText = condition);\n subRule.atRuleType = atRules[type];\n }\n result = result.concat(subRules);\n }\n\n if (!sels && !isSingleAtRule) continue;\n const style = parseStyle(node);\n const selsParsed = parseSelector(sels);\n const selsAdd = selsParsed.add;\n sels = selsParsed.result;\n\n let lastRule;\n // For each group of selectors\n for (var k = 0, len3 = sels.length; k < len3; k++) {\n const model = createNode(sels[k], style, {\n atRule: atRules[type]\n });\n result.push(model);\n lastRule = model;\n }\n\n // Need to push somewhere not class-based selectors, if some rule was\n // created will push them there, otherwise will create a new rule\n if (selsAdd.length) {\n var selsAddStr = selsAdd.join(', ');\n if (lastRule) {\n lastRule.selectorsAdd = selsAddStr;\n } else {\n const model = {\n selectors: [],\n selectorsAdd: selsAddStr,\n style\n };\n singleAtRule && (model.singleAtRule = singleAtRule);\n atRuleType && (model.atRuleType = atRuleType);\n condition && (model.mediaText = condition);\n result.push(model);\n }\n }\n // console.log('LAST PUSH', result[result.length - 1]);\n }\n\n return result;\n};\n\n/**\n * Parse CSS string and return the array of objects\n * @param {String} str CSS string\n * @return {Array} Array of objects for the definition of CSSRules\n */\nexport default str => {\n const el = document.createElement('style');\n el.innerHTML = str;\n\n // There is no .sheet before adding it to the \n document.head.appendChild(el);\n const sheet = el.sheet;\n document.head.removeChild(el);\n\n return parseNode(sheet);\n};\n","import { isString } from 'underscore';\nimport BrowserCssParser, {\n parseSelector,\n createNode\n} from './BrowserParserCss';\n\nexport default (config = {}) => ({\n /**\n * Parse CSS string to a desired model object\n * @param {String} str CSS string\n * @return {Array}\n */\n parse(str) {\n let result = [];\n const { parserCss, em } = config;\n const editor = em && em.get && em.get('Editor');\n const nodes = parserCss ? parserCss(str, editor) : BrowserCssParser(str);\n nodes.forEach(node => (result = result.concat(this.checkNode(node))));\n em && em.trigger('parse:css', { input: str, output: result });\n\n return result;\n },\n\n /**\n * Check the returned node from a custom parser and transforms it to\n * a valid object for the CSS composer\n * @return {[type]}\n */\n checkNode(node) {\n const { selectors, style } = node;\n\n if (isString(selectors)) {\n const nodes = [];\n const selsParsed = parseSelector(selectors);\n const classSets = selsParsed.result;\n const selectorsAdd = selsParsed.add.join(', ');\n const opts = {\n atRule: node.atRule,\n mediaText: node.params\n };\n\n if (classSets.length) {\n classSets.forEach(classSet => {\n nodes.push(createNode(classSet, style, opts));\n });\n } else {\n nodes.push(createNode([], style, opts));\n }\n\n if (selectorsAdd) {\n const lastNode = nodes[nodes.length - 1];\n lastNode.selectorsAdd = selectorsAdd;\n }\n\n node = nodes;\n }\n\n return node;\n }\n});\n","import defaults from './config/config';\nimport parserCss from './model/ParserCss';\nimport parserHtml from './model/ParserHtml';\n\nexport default () => {\n let conf = {};\n let pHtml, pCss;\n\n return {\n compTypes: '',\n\n parserCss: null,\n\n parserHtml: null,\n\n /**\n * Name of the module\n * @type {String}\n * @private\n */\n name: 'Parser',\n\n /**\n * Get config object\n * @return {Object}\n */\n getConfig() {\n return conf;\n },\n\n /**\n * Initialize module. Automatically called with a new instance of the editor\n * @param {Object} config Configurations\n * @param {Array} [config.blocks=[]] Default blocks\n * @return {this}\n * @example\n * ...\n * {\n * blocks: [\n * {id:'h1-block' label: 'Heading', content:'... '},\n * ...\n * ],\n * }\n * ...\n */\n init(config = {}) {\n conf = { ...defaults, ...config };\n conf.Parser = this;\n pHtml = new parserHtml(conf);\n pCss = new parserCss(conf);\n this.em = conf.em;\n this.parserCss = pCss;\n this.parserHtml = pHtml;\n return this;\n },\n\n /**\n * Parse HTML string and return valid model\n * @param {string} str HTML string\n * @return {Object}\n */\n parseHtml(str) {\n const { em, compTypes } = this;\n pHtml.compTypes = em ? em.get('DomComponents').getTypes() : compTypes;\n return pHtml.parse(str, pCss);\n },\n\n /**\n * Parse CSS string and return valid model\n * @param {string} str CSS string\n * @return {Array}\n */\n parseCss(str) {\n return pCss.parse(str);\n },\n\n destroy() {\n [conf, pHtml, pCss].forEach(i => (i = {}));\n ['em', 'parserCss', 'parserHtml'].forEach(i => (this[i] = {}));\n }\n };\n};\n","export default {\n // Style prefix\n stylePrefix: 'clm-',\n\n // Specify the element to use as a container, string (query) or HTMLElement\n // With the empty value, nothing will be rendered\n appendTo: '',\n\n // Default selectors\n selectors: [],\n\n // States\n states: [{ name: 'hover' }, { name: 'active' }, { name: 'nth-of-type(2n)' }],\n\n // Custom selector name escaping strategy, eg.\n // name => name.replace(' ', '_')\n escapeName: 0,\n\n // Custom selected name strategy (the string you see after 'Selected')\n // ({ result, state, target }) => {\n // return `${result} - ID: ${target.getId()}`\n // }\n selectedName: 0,\n\n // Icon used to add new selector\n iconAdd:\n ' ',\n\n // Icon used to sync styles\n iconSync:\n ' ',\n\n // Icon to show when the selector is enabled\n iconTagOn:\n ' ',\n\n // Icon to show when the selector is disabled\n iconTagOff:\n ' ',\n\n // Icon used to remove the selector\n iconTagRemove:\n ' ',\n\n /**\n * Custom render function for the Select Manager\n * @example\n * render: ({ el, labelHead, labelStates, labelInfo, }) => {\n * // You can use the default `el` to extend/edit the current\n * // DOM element of the Selector Manager\n * const someEl = document.createElement('div');\n * // ...\n * el.appendChild(someEl);\n * // no need to return anything from the function\n *\n * // Create and return a new DOM element\n * const newEl = document.createElement('div');\n * // ...\n * return newEl;\n *\n * // Return an HTML string for a completely different layout.\n * // Use `data-*` attributes to make the module recognize some elements:\n * // `data-states` - Where to append state `` elements (or just write yours)\n * // `data-selectors` - Where to append selectors\n * // `data-input` - Input element which is used to add new selectors\n * // `data-add` - Element which triggers the add of a new selector on click\n * // `data-sync-style` - Element which triggers the sync of styles (visible with `componentFirst` enabled)\n * // `data-selected` - Where to print selected selectors\n * return `\n * \n * \n *
\n *
\n *
Add \n *
Sync \n *
\n * \n *
${labelInfo}
\n *
\n *
\n * `;\n * }\n */\n render: 0,\n\n // When you select a component in the canvas the selected Model (Component or CSS Rule)\n // is passed to the StyleManager which will be then able to be styled, these are the cases:\n // * Selected component doesn't have any classes: Component will be passed\n // * Selected component has at least one class: The CSS Rule will be passed\n //\n // With this option enabled, also in the second case, the Component will be passed.\n // This method allows to avoid styling classes directly and make, for example, some\n // unintended changes below the visible canvas area (when components share same classes)\n componentFirst: 0\n};\n","import Backbone from 'backbone';\n\nconst inputProp = 'contentEditable';\n\nexport default Backbone.View.extend({\n template() {\n const { pfx, model, config } = this;\n const label = model.get('label') || '';\n\n return `\n \n ${label} \n \n ${config.iconTagRemove}\n \n `;\n },\n\n events: {\n 'click [data-tag-remove]': 'removeTag',\n 'click [data-tag-status]': 'changeStatus',\n 'dblclick [data-tag-name]': 'startEditTag',\n 'focusout [data-tag-name]': 'endEditTag'\n },\n\n initialize(o) {\n const config = o.config || {};\n this.config = config;\n this.coll = o.coll || null;\n this.pfx = config.stylePrefix || '';\n this.ppfx = config.pStylePrefix || '';\n this.em = config.em;\n this.listenTo(this.model, 'change:active', this.updateStatus);\n },\n\n /**\n * Returns the element which containes the anme of the tag\n * @return {HTMLElement}\n */\n getInputEl() {\n if (!this.inputEl) {\n this.inputEl = this.el.querySelector('[data-tag-name]');\n }\n\n return this.inputEl;\n },\n\n /**\n * Start editing tag\n * @private\n */\n startEditTag() {\n const { em } = this;\n const inputEl = this.getInputEl();\n inputEl[inputProp] = true;\n inputEl.focus();\n em && em.setEditing(1);\n },\n\n /**\n * End editing tag. If the class typed already exists the\n * old one will be restored otherwise will be changed\n * @private\n */\n endEditTag() {\n const model = this.model;\n const inputEl = this.getInputEl();\n const label = inputEl.textContent;\n const em = this.em;\n const sm = em && em.get('SelectorManager');\n inputEl[inputProp] = false;\n em && em.setEditing(0);\n\n if (sm) {\n const name = sm.escapeName(label);\n\n if (sm.get(name)) {\n inputEl.innerText = model.get('label');\n } else {\n model.set({ name, label });\n }\n }\n },\n\n /**\n * Update status of the tag\n * @private\n */\n changeStatus() {\n const { model } = this;\n model.set('active', !model.get('active'));\n },\n\n /**\n * Remove tag from the selected component\n * @param {Object} e\n * @private\n */\n removeTag() {\n const { em, model } = this;\n const targets = em && em.getSelectedAll();\n targets.forEach(sel => {\n !model.get('protected') && sel && sel.getSelectors().remove(model);\n });\n },\n\n /**\n * Update status of the checkbox\n * @private\n */\n updateStatus() {\n const { model, $el, config } = this;\n const { iconTagOn, iconTagOff } = config;\n const $chk = $el.find('[data-tag-status]');\n\n if (model.get('active')) {\n $chk.html(iconTagOn);\n $el.removeClass('opac50');\n } else {\n $chk.html(iconTagOff);\n $el.addClass('opac50');\n }\n },\n\n render() {\n const pfx = this.pfx;\n const ppfx = this.ppfx;\n this.$el.html(this.template());\n this.$el.attr('class', `${pfx}tag ${ppfx}three-bg`);\n this.updateStatus();\n return this;\n }\n});\n","import { isEmpty, isArray, isString, debounce } from 'underscore';\nimport Backbone from 'backbone';\nimport ClassTagView from './ClassTagView';\n\nexport default Backbone.View.extend({\n template({\n labelInfo,\n labelStates,\n labelHead,\n iconSync,\n iconAdd,\n pfx,\n ppfx\n }) {\n return `\n \n \n `;\n },\n\n events: {\n 'change [data-states]': 'stateChanged',\n 'click [data-add]': 'startNewTag',\n 'focusout [data-input]': 'endNewTag',\n 'keyup [data-input]': 'onInputKeyUp',\n 'click [data-sync-style]': 'syncStyle'\n },\n\n initialize(o = {}) {\n this.config = o.config || {};\n this.pfx = this.config.stylePrefix || '';\n this.ppfx = this.config.pStylePrefix || '';\n this.className = this.pfx + 'tags';\n this.stateInputId = this.pfx + 'states';\n this.stateInputC = this.pfx + 'input-c';\n this.states = this.config.states || [];\n const { em } = this.config;\n const coll = this.collection;\n this.target = this.config.em;\n this.em = em;\n const emitter = this.getStyleEmitter();\n const toList = 'component:toggled component:update:classes';\n const toListCls = 'component:update:classes change:state';\n this.listenTo(em, toList, this.componentChanged);\n this.listenTo(emitter, 'update', this.componentChanged);\n this.listenTo(em, toListCls, this.__handleStateChange);\n this.listenTo(em, 'styleable:change change:device', this.checkSync); // component:styleUpdate\n this.listenTo(coll, 'add', this.addNew);\n this.listenTo(coll, 'reset', this.renderClasses);\n this.listenTo(coll, 'remove', this.tagRemoved);\n this.delegateEvents();\n },\n\n syncStyle() {\n const { em } = this;\n const target = this.getTarget();\n const cssC = em.get('CssComposer');\n const opts = { noDisabled: 1 };\n const selectors = this.getCommonSelectors({ opts });\n const state = em.get('state');\n const mediaText = em.getCurrentMedia();\n const ruleComponents = [];\n const rule =\n cssC.get(selectors, state, mediaText) ||\n cssC.add(selectors, state, mediaText);\n let style;\n\n this.getTargets().forEach(target => {\n const ruleComponent = cssC.getIdRule(target.getId(), {\n state,\n mediaText\n });\n style = ruleComponent.getStyle();\n ruleComponent.setStyle({});\n ruleComponents.push(ruleComponent);\n });\n\n style && rule.addStyle(style);\n em.trigger('component:toggled');\n em.trigger('component:sync-style', {\n component: target,\n selectors,\n mediaText,\n rule,\n ruleComponents,\n state\n });\n },\n\n getStyleEmitter() {\n const { em } = this;\n const sm = em && em.get('StyleManager');\n const emitter = sm && sm.getEmitter();\n return emitter || {};\n },\n\n /**\n * Triggered when a tag is removed from collection\n * @param {Object} model Removed model\n * @private\n */\n tagRemoved(model) {\n this.updateStateVis();\n },\n\n /**\n * Create select input with states\n * @return {string} String of options\n * @private\n */\n getStateOptions() {\n const { states, em } = this;\n let result = [];\n\n states.forEach(state =>\n result.push(\n ` ${em.t(\n `selectorManager.states.${state.name}`\n ) ||\n state.label ||\n state.name} `\n )\n );\n\n return result.join('');\n },\n\n /**\n * Add new model\n * @param {Object} model\n * @private\n */\n addNew(model) {\n this.addToClasses(model);\n },\n\n /**\n * Start tag creation\n * @param {Object} e\n * @private\n */\n startNewTag() {\n this.$addBtn.css({ display: 'none' });\n this.$input.show().focus();\n },\n\n /**\n * End tag creation\n * @param {Object} e\n * @private\n */\n endNewTag() {\n this.$addBtn.css({ display: '' });\n this.$input.hide().val('');\n },\n\n /**\n * Checks what to do on keyup event\n * @param {Object} e\n * @private\n */\n onInputKeyUp(e) {\n if (e.keyCode === 13) this.addNewTag(this.$input.val());\n else if (e.keyCode === 27) this.endNewTag();\n },\n\n checkStates() {\n const state = this.em.getState();\n const statesEl = this.getStates();\n statesEl && statesEl.val(state);\n },\n\n /**\n * Triggered when component is changed\n * @param {Object} e\n * @private\n */\n componentChanged: debounce(function({ targets } = {}) {\n this.updateSelection(targets);\n }),\n\n updateSelection(targets) {\n let trgs = targets || this.getTargets();\n trgs = isArray(trgs) ? trgs : [trgs];\n let selectors = [];\n\n if (trgs && trgs.length) {\n selectors = this.getCommonSelectors({ targets: trgs });\n this.checkSync({ validSelectors: selectors });\n }\n\n this.collection.reset(selectors);\n this.updateStateVis(trgs);\n\n return selectors;\n },\n\n getCommonSelectors({ targets, opts = {} } = {}) {\n const trgs = targets || this.getTargets();\n const selectors = trgs\n .map(tr => tr.getSelectors && tr.getSelectors().getValid(opts))\n .filter(i => i);\n return this._commonSelectors(...selectors);\n },\n\n _commonSelectors(...args) {\n if (!args.length) return [];\n if (args.length === 1) return args[0];\n if (args.length === 2)\n return args[0].filter(item => args[1].indexOf(item) >= 0);\n\n return args\n .slice(1)\n .reduce((acc, item) => this._commonSelectors(acc, item), args[0]);\n },\n\n checkSync: debounce(function() {\n const { $btnSyncEl, config, collection } = this;\n const target = this.getTarget();\n let hasStyle;\n\n if (target && config.componentFirst && collection.length) {\n const style = target.getStyle();\n hasStyle = !isEmpty(style);\n }\n\n $btnSyncEl && $btnSyncEl[hasStyle ? 'show' : 'hide']();\n }),\n\n getTarget() {\n return this.target.getSelected();\n },\n\n getTargets() {\n return this.target.getSelectedAll();\n },\n\n /**\n * Update states visibility. Hides states in case there is no tags\n * inside collection\n * @private\n */\n updateStateVis(target) {\n const em = this.em;\n const avoidInline = em && em.getConfig('avoidInlineStyle');\n const display = this.collection.length || avoidInline ? '' : 'none';\n this.getStatesC().css('display', display);\n this.updateSelector(target);\n },\n\n __handleStateChange() {\n this.updateSelector(this.getTargets());\n },\n\n /**\n * Update selector helper\n * @return {this}\n * @private\n */\n updateSelector(targets) {\n const elSel = this.el.querySelector('[data-selected]');\n const result = [];\n let trgs = targets || this.getTargets();\n trgs = isArray(trgs) ? trgs : [trgs];\n\n trgs.forEach(target => result.push(this.__getName(target)));\n elSel && (elSel.innerHTML = result.join(', '));\n this.checkStates();\n },\n\n __getName(target) {\n const { pfx, config, em } = this;\n const { selectedName, componentFirst } = config;\n let result;\n\n if (isString(target)) {\n result = `${target} `;\n } else {\n const sel = target && target.get && target.getSelectors();\n if (!sel) return;\n const selectors = sel.getStyleable();\n const state = em.get('state');\n const idRes = target.getId\n ? `${target.getName()} #${target.getId()} `\n : '';\n result = this.collection.getFullString(selectors);\n result = result\n ? `${result} `\n : target.get('selectorsAdd') || idRes;\n result = componentFirst && idRes ? idRes : result;\n result += state ? `:${state} ` : '';\n result = selectedName ? selectedName({ result, state, target }) : result;\n }\n\n return result && `${result} `;\n },\n\n /**\n * Triggered when the select with states is changed\n * @param {Object} e\n * @private\n */\n stateChanged(ev) {\n const { em } = this;\n const { value } = ev.target;\n em.set('state', value);\n },\n\n /**\n * Add new tag to collection, if possible, and to the component\n * @param {Object} e\n * @private\n */\n addNewTag(label) {\n const { em } = this;\n\n if (!label.trim()) return;\n\n if (em) {\n const sm = em.get('SelectorManager');\n const model = sm.add({ label });\n\n this.getTargets().forEach(target => {\n target.getSelectors().add(model);\n this.collection.add(model);\n this.updateStateVis();\n });\n }\n\n this.endNewTag();\n },\n\n /**\n * Add new object to collection\n * @param {Object} model Model\n * @param {Object} fragmentEl Fragment collection\n * @return {Object} Object created\n * @private\n * */\n addToClasses(model, fragmentEl = null) {\n const fragment = fragmentEl;\n const classes = this.getClasses();\n const rendered = new ClassTagView({\n model,\n config: this.config,\n coll: this.collection\n }).render().el;\n\n fragment ? fragment.appendChild(rendered) : classes.append(rendered);\n\n return rendered;\n },\n\n /**\n * Render the collection of classes\n * @private\n */\n renderClasses() {\n const frag = document.createDocumentFragment();\n const classes = this.getClasses();\n classes.empty();\n this.collection.each(model => this.addToClasses(model, frag));\n classes.append(frag);\n },\n\n /**\n * Return classes element\n * @return {HTMLElement}\n * @private\n */\n getClasses() {\n return this.$el.find('[data-selectors]');\n },\n\n /**\n * Return states element\n * @return {HTMLElement}\n * @private\n */\n getStates() {\n if (!this.$states) {\n const el = this.$el.find('[data-states]');\n this.$states = el[0] && el;\n }\n return this.$states;\n },\n\n /**\n * Return states container element\n * @return {HTMLElement}\n * @private\n */\n getStatesC() {\n if (!this.$statesC) this.$statesC = this.$el.find('#' + this.stateInputC);\n return this.$statesC;\n },\n\n render() {\n const { em, pfx, ppfx, config, $el, el } = this;\n const { render, iconSync, iconAdd } = config;\n const tmpOpts = {\n iconSync,\n iconAdd,\n labelHead: em.t('selectorManager.label'),\n labelStates: em.t('selectorManager.emptyState'),\n labelInfo: em.t('selectorManager.selected'),\n ppfx,\n pfx,\n el\n };\n $el.html(this.template(tmpOpts));\n const renderRes = render && render(tmpOpts);\n renderRes && renderRes !== el && $el.empty().append(renderRes);\n this.$input = $el.find('[data-input]');\n this.$addBtn = $el.find('[data-add]');\n this.$classes = $el.find('#' + pfx + 'tags-c');\n this.$btnSyncEl = $el.find('[data-sync-style]');\n this.$input.hide();\n const statesEl = this.getStates();\n statesEl && statesEl.append(this.getStateOptions());\n this.renderClasses();\n $el.attr('class', `${this.className} ${ppfx}one-bg ${ppfx}two-color`);\n return this;\n }\n});\n","/**\n * Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To illustrate this concept let's take\n * a look at this code:\n *\n * ```css\n * span > #send-btn.btn{\n * ...\n * }\n * ```\n * ```html\n * \n * \n * \n * ```\n *\n * In this scenario we get:\n * * span -> selector of type `tag`\n * * send-btn -> selector of type `id`\n * * btn -> selector of type `class`\n *\n * So, for example, being `btn` the same class entity it'll be easier to refactor and track things.\n *\n * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/selector_manager/config/config.js)\n * ```js\n * const editor = grapesjs.init({\n * selectorManager: {\n * // options\n * }\n * })\n * ```\n *\n * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance\n *\n * ```js\n * const selectorManager = editor.SelectorManager;\n * ```\n *\n * * [getConfig](#getconfig)\n * * [add](#add)\n * * [addClass](#addclass)\n * * [get](#get)\n * * [getAll](#getall)\n * * [setState](#setstate)\n * * [getState](#getstate)\n *\n * @module SelectorManager\n */\n\nimport { isString, isElement, isObject, isArray } from 'underscore';\nimport { isComponent, isRule } from 'utils/mixins';\nimport defaults from './config/config';\nimport Selector from './model/Selector';\nimport Selectors from './model/Selectors';\nimport ClassTagsView from './view/ClassTagsView';\n\nconst isId = str => isString(str) && str[0] == '#';\nconst isClass = str => isString(str) && str[0] == '.';\n\nexport default config => {\n var c = config || {};\n var selectors;\n\n return {\n Selector,\n\n Selectors,\n\n /**\n * Name of the module\n * @type {String}\n * @private\n */\n name: 'SelectorManager',\n\n /**\n * Get configuration object\n * @return {Object}\n */\n getConfig() {\n return c;\n },\n\n /**\n * Initialize module. Automatically called with a new instance of the editor\n * @param {Object} config Configurations\n * @return {this}\n * @private\n */\n init(conf = {}) {\n c = {\n ...defaults,\n ...conf\n };\n const em = c.em;\n const ppfx = c.pStylePrefix;\n this.em = em;\n\n if (ppfx) {\n c.stylePrefix = ppfx + c.stylePrefix;\n }\n\n this.selectorTags = new ClassTagsView({\n collection: new Selectors([], { em, config: c }),\n config: c\n });\n\n // Global selectors container\n selectors = new Selectors(c.selectors);\n selectors.on('add', model => em.trigger('selector:add', model));\n selectors.on('remove', model => em.trigger('selector:remove', model));\n selectors.on('change', model =>\n em.trigger(\n 'selector:update',\n model,\n model.previousAttributes(),\n model.changedAttributes()\n )\n );\n em.on('change:state', (m, value) => em.trigger('selector:state', value));\n\n return this;\n },\n\n postRender() {\n const elTo = this.getConfig().appendTo;\n\n if (elTo) {\n const el = isElement(elTo) ? elTo : document.querySelector(elTo);\n el.appendChild(this.render([]));\n }\n },\n\n select(value, opts = {}) {\n const targets = Array.isArray(value) ? value : [value];\n const toSelect = this.em.get('StyleManager').setTarget(targets, opts);\n const res = toSelect\n .filter(i => i)\n .map(sel =>\n isComponent(sel)\n ? sel\n : isRule(sel) && !sel.get('selectorsAdd')\n ? sel\n : sel.getSelectorsString()\n );\n this.selectorTags.componentChanged({ targets: res });\n return this;\n },\n\n /**\n * Change the selector state\n * @param {String} value State value\n * @returns {this}\n * @example\n * selectorManager.setState('hover');\n */\n setState(value) {\n this.em.setState(value);\n return this;\n },\n\n /**\n * Get the current selector state\n * @returns {String}\n */\n getState() {\n return this.em.getState();\n },\n\n addSelector(name, opt = {}) {\n let opts = { ...opt };\n\n if (isObject(name)) {\n opts = name;\n } else {\n opts.name = name;\n }\n\n if (isId(opts.name)) {\n opts.name = opts.name.substr(1);\n opts.type = Selector.TYPE_ID;\n } else if (isClass(opts.name)) {\n opts.name = opts.name.substr(1);\n }\n\n if (opts.label && !opts.name) {\n opts.name = this.escapeName(opts.label);\n }\n\n const cname = opts.name;\n const selector = cname\n ? this.get(cname, opts.type)\n : selectors.where(opts)[0];\n\n if (!selector) {\n return selectors.add(opts, { config: c });\n }\n\n return selector;\n },\n\n getSelector(name, type = Selector.TYPE_CLASS) {\n if (isId(name)) {\n name = name.substr(1);\n type = Selector.TYPE_ID;\n } else if (isClass(name)) {\n name = name.substr(1);\n }\n\n return selectors.where({ name, type })[0];\n },\n\n /**\n * Add a new selector to collection if it's not already exists. Class type is a default one\n * @param {String|Array} name Selector/s name\n * @param {Object} opts Selector options\n * @param {String} [opts.label=''] Label for the selector, if it's not provided the label will be the same as the name\n * @param {String} [opts.type=1] Type of the selector. At the moment, only 'class' (1) is available\n * @return {Model|Array}\n * @example\n * const selector = selectorManager.add('selectorName');\n * // Same as\n * const selector = selectorManager.add('selectorName', {\n * type: 1,\n * label: 'selectorName'\n * });\n * // Multiple selectors\n * const selectors = selectorManager.add(['.class1', '.class2', '#id1']);\n * */\n add(name, opts = {}) {\n if (isArray(name)) {\n return name.map(item => this.addSelector(item, opts));\n } else {\n return this.addSelector(name, opts);\n }\n },\n\n /**\n * Add class selectors\n * @param {Array|string} classes Array or string of classes\n * @return {Array} Array of added selectors\n * @example\n * sm.addClass('class1');\n * sm.addClass('class1 class2');\n * sm.addClass(['class1', 'class2']);\n * // -> [SelectorObject, ...]\n */\n addClass(classes) {\n const added = [];\n\n if (isString(classes)) {\n classes = classes.trim().split(' ');\n }\n\n classes.forEach(name => added.push(this.addSelector(name)));\n return added;\n },\n\n /**\n * Get the selector by its name\n * @param {String|Array} name Selector name\n * @param {String} type Selector type\n * @return {Model|Array}\n * @example\n * const selector = selectorManager.get('selectorName');\n * // or get an array\n * const selectors = selectorManager.get(['class1', 'class2']);\n * */\n get(name, type) {\n if (isArray(name)) {\n const result = [];\n const selectors = name\n .map(item => this.getSelector(item))\n .filter(item => item);\n selectors.forEach(\n item => result.indexOf(item) < 0 && result.push(item)\n );\n return result;\n } else {\n return this.getSelector(name, type);\n }\n },\n\n /**\n * Get all selectors\n * @return {Collection}\n * */\n getAll() {\n return selectors;\n },\n\n /**\n * Return escaped selector name\n * @param {String} name Selector name to escape\n * @returns {String} Escaped name\n */\n escapeName(name) {\n const { escapeName } = c;\n return escapeName ? escapeName(name) : Selector.escapeName(name);\n },\n\n /**\n * Render class selectors. If an array of selectors is provided a new instance of the collection will be rendered\n * @param {Array} selectors\n * @return {HTMLElement}\n * @private\n */\n render(selectors) {\n if (selectors) {\n this.selectorTags = new ClassTagsView({\n collection: new Selectors(selectors),\n config: c\n });\n return this.selectorTags.render().el;\n } else return this.selectorTags.render().el;\n },\n\n destroy() {\n selectors.reset();\n selectors.stopListening();\n this.selectorTags.remove();\n [c, selectors].forEach(i => (i = {}));\n this.em = {};\n this.selectorTags = {};\n }\n };\n};\n","export default {\n stylePrefix: 'mdl-',\n\n title: '',\n\n content: '',\n\n backdrop: true\n};\n","import Backbone from 'backbone';\n\nexport default Backbone.Model.extend({\n defaults: {\n title: '',\n content: '',\n open: false\n }\n});\n","import Backbone from 'backbone';\n\nexport default Backbone.View.extend({\n template({ pfx, ppfx, content, title }) {\n return `\n
`;\n },\n\n events: {\n click: 'onClick',\n 'click [data-close-modal]': 'hide'\n },\n\n initialize(o) {\n const model = this.model;\n const config = o.config || {};\n const pfx = config.stylePrefix || '';\n this.config = config;\n this.pfx = pfx;\n this.ppfx = config.pStylePrefix || '';\n this.listenTo(model, 'change:open', this.updateOpen);\n this.listenTo(model, 'change:title', this.updateTitle);\n this.listenTo(model, 'change:content', this.updateContent);\n },\n\n onClick(e) {\n const bkd = this.config.backdrop;\n bkd && e.target === this.el && this.hide();\n },\n\n /**\n * Returns collector element\n * @return {HTMLElement}\n * @private\n */\n getCollector() {\n if (!this.$collector)\n this.$collector = this.$el.find('.' + this.pfx + 'collector');\n return this.$collector;\n },\n\n /**\n * Returns content element\n * @return {HTMLElement}\n * @private\n */\n getContent() {\n const pfx = this.pfx;\n\n if (!this.$content) {\n this.$content = this.$el.find(`.${pfx}content #${pfx}c`);\n }\n\n return this.$content;\n },\n\n /**\n * Returns title element\n * @return {HTMLElement}\n * @private\n */\n getTitle() {\n if (!this.$title) this.$title = this.$el.find('.' + this.pfx + 'title');\n return this.$title.get(0);\n },\n\n /**\n * Update content\n * @private\n * */\n updateContent() {\n var content = this.getContent();\n const children = content.children();\n const coll = this.getCollector();\n const body = this.model.get('content');\n children.length && coll.append(children);\n content.empty().append(body);\n },\n\n /**\n * Update title\n * @private\n * */\n updateTitle() {\n var title = this.getTitle();\n if (title) title.innerHTML = this.model.get('title');\n },\n\n /**\n * Update open\n * @private\n * */\n updateOpen() {\n this.el.style.display = this.model.get('open') ? '' : 'none';\n },\n\n /**\n * Hide modal\n * @private\n * */\n hide() {\n this.model.set('open', 0);\n },\n\n /**\n * Show modal\n * @private\n * */\n show(opts = {}) {\n this.model.set('open', 1);\n this.updateAttr(opts.attributes);\n },\n\n updateAttr(attr) {\n const { pfx, $el, el } = this;\n const currAttr = [].slice.call(el.attributes).map(i => i.name);\n $el.removeAttr(currAttr.join(' '));\n $el.attr({\n ...(attr || {}),\n class: `${pfx}container ${(attr && attr.class) || ''}`.trim()\n });\n },\n\n render() {\n const el = this.$el;\n const obj = this.model.toJSON();\n obj.pfx = this.pfx;\n obj.ppfx = this.ppfx;\n el.html(this.template(obj));\n this.updateAttr();\n this.updateOpen();\n return this;\n }\n});\n","/**\n * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/modal_dialog/config/config.js)\n * ```js\n * const editor = grapesjs.init({\n * modal: {\n * // options\n * }\n * })\n * ```\n *\n * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance\n *\n * ```js\n * const modal = editor.Modal;\n * ```\n *\n * * [open](#open)\n * * [close](#close)\n * * [isOpen](#isopen)\n * * [setTitle](#settitle)\n * * [getTitle](#gettitle)\n * * [setContent](#setcontent)\n * * [getContent](#getcontent)\n * * [onceClose](#onceclose)\n * * [onceOpen](#onceopen)\n *\n * @module Modal\n */\n\nimport defaults from './config/config';\nimport ModalM from './model/Modal';\nimport ModalView from './view/ModalView';\n\nexport default () => {\n var c = {};\n var model, modal;\n\n const triggerEvent = (enable, em) => {\n em && em.trigger(`modal:${enable ? 'open' : 'close'}`);\n };\n\n return {\n /**\n * Name of the module\n * @type {String}\n * @private\n */\n name: 'Modal',\n\n getConfig() {\n return c;\n },\n\n /**\n * Initialize module. Automatically called with a new instance of the editor\n * @param {Object} config Configurations\n * @private\n */\n init(config = {}) {\n c = {\n ...defaults,\n ...config\n };\n\n const em = c.em;\n this.em = em;\n var ppfx = c.pStylePrefix;\n if (ppfx) c.stylePrefix = ppfx + c.stylePrefix;\n\n model = new ModalM(c);\n model.on('change:open', (m, enb) => triggerEvent(enb, em));\n modal = new ModalView({\n model,\n config: c\n });\n\n return this;\n },\n\n postRender(view) {\n const el = view.model.getConfig().el || view.el;\n this.render().appendTo(el);\n },\n\n /**\n * Open the modal window\n * @param {Object} [opts={}] Options\n * @param {String|HTMLElement} [opts.title] Title to set for the modal\n * @param {String|HTMLElement} [opts.content] Content to set for the modal\n * @param {Object} [opts.attributes] Updates the modal wrapper with custom attributes\n * @return {this}\n */\n open(opts = {}) {\n opts.title && this.setTitle(opts.title);\n opts.content && this.setContent(opts.content);\n modal.show(opts);\n return this;\n },\n\n /**\n * Close the modal window\n * @return {this}\n */\n close() {\n modal.hide();\n return this;\n },\n\n /**\n * Execute callback when the modal will be closed.\n * The callback will be called one only time\n * @param {Function} clb\n * @returns {this}\n */\n onceClose(clb) {\n this.em.once('modal:close', clb);\n return this;\n },\n\n /**\n * Execute callback when the modal will be opened.\n * The callback will be called one only time\n * @param {Function} clb\n * @returns {this}\n */\n onceOpen(clb) {\n this.em.once('modal:open', clb);\n return this;\n },\n\n /**\n * Checks if the modal window is open\n * @return {Boolean}\n */\n isOpen() {\n return !!model.get('open');\n },\n\n /**\n * Set the title to the modal window\n * @param {string} title Title\n * @return {this}\n * @example\n * modal.setTitle('New title');\n */\n setTitle(title) {\n model.set('title', title);\n return this;\n },\n\n /**\n * Returns the title of the modal window\n * @return {string}\n */\n getTitle() {\n return model.get('title');\n },\n\n /**\n * Set the content of the modal window\n * @param {string|HTMLElement} content Content\n * @return {this}\n * @example\n * modal.setContent('Some HTML content
');\n */\n setContent(content) {\n model.set('content', ' ');\n model.set('content', content);\n return this;\n },\n\n /**\n * Get the content of the modal window\n * @return {string}\n */\n getContent() {\n return model.get('content');\n },\n\n /**\n * Returns content element\n * @return {HTMLElement}\n * @private\n */\n getContentEl() {\n return modal.getContent().get(0);\n },\n\n /**\n * Returns modal model\n * @return {Model}\n * @private\n */\n getModel() {\n return model;\n },\n\n /**\n * Render the modal window\n * @return {HTMLElement}\n * @private\n */\n render() {\n return modal.render().$el;\n },\n\n destroy() {\n modal.remove();\n [c, model, modal].forEach(i => (i = {}));\n this.em = {};\n }\n };\n};\n","import Backbone from 'backbone';\nimport {\n isString,\n isFunction,\n isArray,\n result,\n each,\n bindAll\n} from 'underscore';\nimport {\n on,\n off,\n matches,\n getElement,\n getPointerEvent,\n isTextNode,\n getModel\n} from 'utils/mixins';\nconst $ = Backbone.$;\n\nexport default Backbone.View.extend({\n initialize(opt) {\n this.opt = opt || {};\n bindAll(\n this,\n 'startSort',\n 'onMove',\n 'endMove',\n 'rollback',\n 'updateOffset',\n 'moveDragHelper'\n );\n var o = opt || {};\n this.elT = 0;\n this.elL = 0;\n this.borderOffset = o.borderOffset || 10;\n\n var el = o.container;\n this.el = typeof el === 'string' ? document.querySelector(el) : el;\n this.$el = $(this.el);\n\n this.containerSel = o.containerSel || 'div';\n this.itemSel = o.itemSel || 'div';\n this.draggable = o.draggable || true;\n this.nested = o.nested || 0;\n this.pfx = o.pfx || '';\n this.ppfx = o.ppfx || '';\n this.freezeClass = o.freezeClass || this.pfx + 'freezed';\n this.onStart = o.onStart || '';\n this.onEndMove = o.onEndMove || '';\n this.direction = o.direction || 'v'; // v (vertical), h (horizontal), a (auto)\n this.onMoveClb = o.onMove || '';\n this.relative = o.relative || 0;\n this.ignoreViewChildren = o.ignoreViewChildren || 0;\n this.ignoreModels = o.ignoreModels || 0;\n this.plh = o.placer || '';\n // Frame offset\n this.wmargin = o.wmargin || 0;\n this.offTop = o.offsetTop || 0;\n this.offLeft = o.offsetLeft || 0;\n this.document = o.document || document;\n this.$document = $(this.document);\n this.dropContent = null;\n this.em = o.em || '';\n this.dragHelper = null;\n this.canvasRelative = o.canvasRelative || 0;\n this.selectOnEnd = !o.avoidSelectOnEnd;\n this.scale = o.scale;\n this.activeTextModel = null;\n\n if (this.em && this.em.on) {\n this.em.on('change:canvasOffset', this.updateOffset);\n this.updateOffset();\n }\n },\n\n getScale() {\n return result(this, scale) || 1;\n },\n\n getContainerEl(elem) {\n if (elem) this.el = elem;\n\n if (!this.el) {\n var el = this.opt.container;\n this.el = typeof el === 'string' ? document.querySelector(el) : el;\n this.$el = $(this.el);\n }\n return this.el;\n },\n\n getDocuments(el) {\n const em = this.em;\n const elDoc = el\n ? el.ownerDocument\n : em && em.get('Canvas').getBody().ownerDocument;\n const docs = [document];\n elDoc && docs.push(elDoc);\n return docs;\n },\n\n /**\n * Triggered when the offset of the editro is changed\n */\n updateOffset() {\n const offset = this.em.get('canvasOffset') || {};\n this.offTop = offset.top;\n this.offLeft = offset.left;\n },\n\n /**\n * Set content to drop\n * @param {String|Object} content\n */\n setDropContent(content) {\n this.dropModel = null;\n this.dropContent = content;\n },\n\n updateTextViewCursorPosition(e) {\n const Canvas = this.em.get('Canvas');\n const targetDoc = Canvas.getDocument();\n let range = null;\n\n if (targetDoc.caretRangeFromPoint) {\n // Chrome\n const poiner = getPointerEvent(e);\n range = targetDoc.caretRangeFromPoint(poiner.clientX, poiner.clientY);\n } else if (e.rangeParent) {\n // Firefox\n range = targetDoc.createRange();\n range.setStart(e.rangeParent, e.rangeOffset);\n }\n\n const sel = Canvas.getWindow().getSelection();\n Canvas.getFrameEl().focus();\n sel.removeAllRanges();\n range && sel.addRange(range);\n },\n\n setContentEditable(model, mode) {\n if (model) {\n const el = model.getEl();\n if (el.contentEditable != mode) el.contentEditable = mode;\n }\n },\n\n /**\n * Toggle cursor while sorting\n * @param {Boolean} active\n */\n toggleSortCursor(active) {\n const { em } = this;\n const cv = em && em.get('Canvas');\n\n // Avoid updating body className as it causes a huge repaint\n // Noticeable with \"fast\" drag of blocks\n cv && (active ? cv.startAutoscroll() : cv.stopAutoscroll());\n },\n\n /**\n * Set drag helper\n * @param {HTMLElement} el\n * @param {Event} event\n */\n setDragHelper(el, event) {\n const ev = event || '';\n const clonedEl = el.cloneNode(1);\n const rect = el.getBoundingClientRect();\n const computed = getComputedStyle(el);\n let style = '';\n\n for (var i = 0; i < computed.length; i++) {\n const prop = computed[i];\n style += `${prop}:${computed.getPropertyValue(prop)};`;\n }\n\n document.body.appendChild(clonedEl);\n clonedEl.className += ` ${this.pfx}bdrag`;\n clonedEl.setAttribute('style', style);\n this.dragHelper = clonedEl;\n clonedEl.style.width = `${rect.width}px`;\n clonedEl.style.height = `${rect.height}px`;\n ev && this.moveDragHelper(ev);\n\n // Listen mouse move events\n if (this.em) {\n $(this.em.get('Canvas').getBody().ownerDocument)\n .off('mousemove', this.moveDragHelper)\n .on('mousemove', this.moveDragHelper);\n }\n $(document)\n .off('mousemove', this.moveDragHelper)\n .on('mousemove', this.moveDragHelper);\n },\n\n /**\n * Update the position of the helper\n * @param {Event} e\n */\n moveDragHelper(e) {\n const doc = e.target.ownerDocument;\n\n if (!this.dragHelper || !doc) {\n return;\n }\n\n let posY = e.pageY;\n let posX = e.pageX;\n let addTop = 0;\n let addLeft = 0;\n const window = doc.defaultView || doc.parentWindow;\n const frame = window.frameElement;\n const dragHelperStyle = this.dragHelper.style;\n\n // If frame is present that means mouse has moved over the editor's canvas,\n // which is rendered inside the iframe and the mouse move event comes from\n // the iframe, not the parent window. Mouse position relative to the frame's\n // parent window needs to account for the frame's position relative to the\n // parent window.\n if (frame) {\n const frameRect = frame.getBoundingClientRect();\n addTop = frameRect.top + document.documentElement.scrollTop;\n addLeft = frameRect.left + document.documentElement.scrollLeft;\n posY = e.clientY;\n posX = e.clientX;\n }\n\n dragHelperStyle.top = posY + addTop + 'px';\n dragHelperStyle.left = posX + addLeft + 'px';\n },\n\n /**\n * Returns true if the element matches with selector\n * @param {Element} el\n * @param {String} selector\n * @return {Boolean}\n */\n matches(el, selector, useBody) {\n return matches.call(el, selector);\n },\n\n /**\n * Closest parent\n * @param {Element} el\n * @param {String} selector\n * @return {Element|null}\n */\n closest(el, selector) {\n if (!el) return;\n var elem = el.parentNode;\n while (elem && elem.nodeType === 1) {\n if (this.matches(elem, selector)) return elem;\n elem = elem.parentNode;\n }\n return null;\n },\n\n /**\n * Get the offset of the element\n * @param {HTMLElement} el\n * @return {Object}\n */\n offset(el) {\n var rect = el.getBoundingClientRect();\n return {\n top: rect.top + document.body.scrollTop,\n left: rect.left + document.body.scrollLeft\n };\n },\n\n /**\n * Create placeholder\n * @return {HTMLElement}\n */\n createPlaceholder() {\n var pfx = this.pfx;\n var el = document.createElement('div');\n var ins = document.createElement('div');\n el.className = pfx + 'placeholder';\n el.style.display = 'none';\n el.style['pointer-events'] = 'none';\n ins.className = pfx + 'placeholder-int';\n el.appendChild(ins);\n return el;\n },\n\n /**\n * Picking component to move\n * @param {HTMLElement} src\n * */\n startSort(src, opts = {}) {\n const em = this.em;\n const itemSel = this.itemSel;\n const contSel = this.containerSel;\n const container = this.getContainerEl(opts.container);\n const docs = this.getDocuments(src);\n const onStart = this.onStart;\n let srcModel;\n let plh = this.plh;\n this.dropModel = null;\n this.target = null;\n this.prevTarget = null;\n this.moved = 0;\n\n // Check if the start element is a valid one, if not get the\n // closest valid one\n if (src && !this.matches(src, `${itemSel}, ${contSel}`)) {\n src = this.closest(src, itemSel);\n }\n\n this.eV = src;\n\n // Create placeholder if not yet exists\n if (!plh) {\n plh = this.createPlaceholder();\n container.appendChild(plh);\n this.plh = plh;\n }\n\n if (src) {\n srcModel = this.getSourceModel(src);\n srcModel && srcModel.set && srcModel.set('status', 'freezed');\n this.srcModel = srcModel;\n }\n\n on(container, 'mousemove dragover', this.onMove);\n on(docs, 'mouseup dragend touchend', this.endMove);\n on(docs, 'keydown', this.rollback);\n onStart &&\n onStart({\n target: srcModel,\n parent: srcModel && srcModel.parent(),\n index: srcModel && srcModel.index()\n });\n\n // Avoid strange effects on dragging\n em && em.clearSelection();\n this.toggleSortCursor(1);\n\n em && em.trigger('sorter:drag:start', src, srcModel);\n },\n\n /**\n * Get the model from HTMLElement target\n * @return {Model|null}\n */\n getTargetModel(el) {\n let elem = el || this.target;\n return $(elem).data('model');\n },\n\n /**\n * Get the model of the current source element (element to drag)\n * @return {Model}\n */\n getSourceModel(source, { target, avoidChildren = 1 } = {}) {\n const { em, eV } = this;\n const src = source || eV;\n let { dropModel, dropContent } = this;\n const isTextable = src =>\n src &&\n target &&\n src.opt &&\n src.opt.avoidChildren &&\n this.isTextableActive(src, target);\n\n if (dropContent && em) {\n if (isTextable(dropModel)) {\n dropModel = null;\n }\n\n if (!dropModel) {\n const comps = em.get('DomComponents').getComponents();\n const opts = {\n avoidChildren,\n avoidStore: 1,\n avoidUpdateStyle: 1\n };\n const tempModel = comps.add(dropContent, { ...opts, temporary: 1 });\n dropModel = comps.remove(tempModel, opts);\n dropModel = dropModel instanceof Array ? dropModel[0] : dropModel;\n this.dropModel = dropModel;\n\n if (isTextable(dropModel)) {\n return this.getSourceModel(src, { target, avoidChildren: 0 });\n }\n }\n\n return dropModel;\n }\n\n return src && $(src).data('model');\n },\n\n /**\n * Highlight target\n * @param {Model|null} model\n */\n selectTargetModel(model, source) {\n if (model instanceof Backbone.Collection) {\n return;\n }\n\n // Prevents loops in Firefox\n // https://github.com/artf/grapesjs/issues/2911\n if (source && source === model) return;\n\n const { targetModel } = this;\n\n // Reset the previous model but not if it's the same as the source\n // https://github.com/artf/grapesjs/issues/2478#issuecomment-570314736\n if (targetModel && targetModel !== this.srcModel) {\n targetModel.set('status', '');\n }\n\n if (model && model.set) {\n model.set('status', 'selected-parent');\n this.targetModel = model;\n }\n },\n\n /**\n * During move\n * @param {Event} e\n * */\n onMove(e) {\n const ev = e;\n const { em, onMoveClb, plh } = this;\n this.moved = 1;\n\n // Turn placeholder visibile\n var dsp = plh.style.display;\n if (!dsp || dsp === 'none') plh.style.display = 'block';\n\n // Cache all necessary positions\n var eO = this.offset(this.el);\n this.elT = this.wmargin ? Math.abs(eO.top) : eO.top;\n this.elL = this.wmargin ? Math.abs(eO.left) : eO.left;\n var rY = e.pageY - this.elT + this.el.scrollTop;\n var rX = e.pageX - this.elL + this.el.scrollLeft;\n\n if (this.canvasRelative && em) {\n const mousePos = em\n .get('Canvas')\n .getMouseRelativeCanvas(e, { noScroll: 1 });\n rX = mousePos.x;\n rY = mousePos.y;\n }\n\n this.rX = rX;\n this.rY = rY;\n this.eventMove = e;\n\n //var targetNew = this.getTargetFromEl(e.target);\n const sourceModel = this.getSourceModel();\n const dims = this.dimsFromTarget(e.target, rX, rY);\n const target = this.target;\n const targetModel = target && this.getTargetModel(target);\n this.selectTargetModel(targetModel, sourceModel);\n if (!targetModel) plh.style.display = 'none';\n if (!target) return;\n\n this.lastDims = dims;\n const pos = this.findPosition(dims, rX, rY);\n\n if (this.isTextableActive(sourceModel, targetModel)) {\n this.activeTextModel = targetModel;\n this.setContentEditable(targetModel, true);\n\n plh.style.display = 'none';\n this.lastPos = pos;\n this.updateTextViewCursorPosition(ev);\n } else {\n this.disableTextable();\n this.activeTextModel = null;\n\n // If there is a significant changes with the pointer\n if (\n !this.lastPos ||\n this.lastPos.index != pos.index ||\n this.lastPos.method != pos.method\n ) {\n this.movePlaceholder(this.plh, dims, pos, this.prevTargetDim);\n if (!this.$plh) this.$plh = $(this.plh);\n\n // With canvasRelative the offset is calculated automatically for\n // each element\n if (!this.canvasRelative) {\n if (this.offTop) this.$plh.css('top', '+=' + this.offTop + 'px');\n if (this.offLeft) this.$plh.css('left', '+=' + this.offLeft + 'px');\n }\n\n this.lastPos = pos;\n }\n }\n\n isFunction(onMoveClb) &&\n onMoveClb({\n event: e,\n target: sourceModel,\n parent: targetModel,\n index: pos.index + (pos.method == 'after' ? 1 : 0)\n });\n\n em &&\n em.trigger('sorter:drag', {\n target,\n targetModel,\n sourceModel,\n dims,\n pos,\n x: rX,\n y: rY\n });\n },\n\n isTextableActive(src, trg) {\n return src && src.get && src.get('textable') && trg && trg.is('text');\n },\n\n disableTextable() {\n const { activeTextModel } = this;\n activeTextModel && activeTextModel.getView().disableEditing();\n },\n\n /**\n * Returns true if the elements is in flow, so is not in flow where\n * for example the component is with float:left\n * @param {HTMLElement} el\n * @param {HTMLElement} parent\n * @return {Boolean}\n * @private\n * */\n isInFlow(el, parent) {\n if (!el) return false;\n\n parent = parent || document.body;\n var ch = -1,\n h;\n var elem = el;\n h = elem.offsetHeight;\n if (/*h < ch || */ !this.styleInFlow(elem, parent)) return false;\n else return true;\n },\n\n /**\n * Check if el has style to be in flow\n * @param {HTMLElement} el\n * @param {HTMLElement} parent\n * @return {Boolean}\n * @private\n */\n styleInFlow(el, parent) {\n if (isTextNode(el)) return;\n const style = el.style || {};\n const $el = $(el);\n const $parent = parent && $(parent);\n\n if (style.overflow && style.overflow !== 'visible') return;\n if ($el.css('float') !== 'none') return;\n if (\n $parent &&\n $parent.css('display') == 'flex' &&\n $parent.css('flex-direction') !== 'column'\n )\n return;\n switch (style.position) {\n case 'static':\n case 'relative':\n case '':\n break;\n default:\n return;\n }\n switch (el.tagName) {\n case 'TR':\n case 'TBODY':\n case 'THEAD':\n case 'TFOOT':\n return true;\n }\n switch ($el.css('display')) {\n case 'block':\n case 'list-item':\n case 'table':\n case 'flex':\n return true;\n }\n return;\n },\n\n /**\n * Check if the target is valid with the actual source\n * @param {HTMLElement} trg\n * @return {Boolean}\n */\n validTarget(trg, src) {\n const trgModel = this.getTargetModel(trg);\n const srcModel = this.getSourceModel(src, { target: trgModel });\n src = srcModel && srcModel.view && srcModel.view.el;\n trg = trgModel && trgModel.view && trgModel.view.el;\n let result = {\n valid: true,\n src,\n srcModel,\n trg,\n trgModel\n };\n\n if (!src || !trg) {\n result.valid = false;\n return result;\n }\n\n // check if the source is draggable in target\n let draggable = srcModel.get('draggable');\n draggable = draggable instanceof Array ? draggable.join(', ') : draggable;\n result.dragInfo = draggable;\n draggable = isString(draggable) ? this.matches(trg, draggable) : draggable;\n result.draggable = draggable;\n\n // Check if the target could accept the source\n let droppable = trgModel.get('droppable');\n droppable = droppable instanceof Backbone.Collection ? 1 : droppable;\n droppable = droppable instanceof Array ? droppable.join(', ') : droppable;\n result.dropInfo = droppable;\n droppable = isString(droppable) ? this.matches(src, droppable) : droppable;\n droppable =\n draggable && this.isTextableActive(srcModel, trgModel) ? 1 : droppable;\n result.droppable = droppable;\n\n if (!droppable || !draggable) {\n result.valid = false;\n }\n\n return result;\n },\n\n /**\n * Get dimensions of nodes relative to the coordinates\n * @param {HTMLElement} target\n * @param {number} rX Relative X position\n * @param {number} rY Relative Y position\n * @return {Array}\n */\n dimsFromTarget(target, rX, rY) {\n const em = this.em;\n var dims = [];\n\n if (!target) {\n return dims;\n }\n\n // Select the first valuable target\n if (!this.matches(target, `${this.itemSel}, ${this.containerSel}`)) {\n target = this.closest(target, this.itemSel);\n }\n\n // If draggable is an array the target will be one of those\n if (this.draggable instanceof Array) {\n target = this.closest(target, this.draggable.join(','));\n }\n\n if (!target) {\n return dims;\n }\n\n // Check if the target is different from the previous one\n if (this.prevTarget && this.prevTarget != target) {\n this.prevTarget = null;\n }\n\n // New target found\n if (!this.prevTarget) {\n this.targetP = this.closest(target, this.containerSel);\n\n // Check if the source is valid with the target\n let validResult = this.validTarget(target);\n em && em.trigger('sorter:drag:validation', validResult);\n\n if (!validResult.valid && this.targetP) {\n return this.dimsFromTarget(this.targetP, rX, rY);\n }\n\n this.prevTarget = target;\n this.prevTargetDim = this.getDim(target);\n this.cacheDimsP = this.getChildrenDim(this.targetP);\n this.cacheDims = this.getChildrenDim(target);\n }\n\n // If the target is the previous one will return the cached dims\n if (this.prevTarget == target) dims = this.cacheDims;\n\n // Target when I will drop element to sort\n this.target = this.prevTarget;\n\n // Generally, on any new target the poiner enters inside its area and\n // triggers nearBorders(), so have to take care of this\n if (\n this.nearBorders(this.prevTargetDim, rX, rY) ||\n (!this.nested && !this.cacheDims.length)\n ) {\n const targetParent = this.targetP;\n\n if (targetParent && this.validTarget(targetParent).valid) {\n dims = this.cacheDimsP;\n this.target = targetParent;\n }\n }\n\n this.lastPos = null;\n return dims;\n },\n\n /**\n * Get valid target from element\n * This method should replace dimsFromTarget()\n * @param {HTMLElement} el\n * @return {HTMLElement}\n */\n getTargetFromEl(el) {\n let target = el;\n let targetParent;\n let targetPrev = this.targetPrev;\n const em = this.em;\n const containerSel = this.containerSel;\n const itemSel = this.itemSel;\n\n // Select the first valuable target\n if (!this.matches(target, `${itemSel}, ${containerSel}`)) {\n target = this.closest(target, itemSel);\n }\n\n // If draggable is an array the target will be one of those\n // TODO check if this options is used somewhere\n if (this.draggable instanceof Array) {\n target = this.closest(target, this.draggable.join(','));\n }\n\n // Check if the target is different from the previous one\n if (targetPrev && targetPrev != target) {\n this.targetPrev = '';\n }\n\n // New target found\n if (!this.targetPrev) {\n targetParent = this.closest(target, containerSel);\n\n // If the current target is not valid (src/trg reasons) try with\n // the parent one (if exists)\n const validResult = this.validTarget(target);\n em && em.trigger('sorter:drag:validation', validResult);\n\n if (!validResult.valid && targetParent) {\n return this.getTargetFromEl(targetParent);\n }\n\n this.targetPrev = target;\n }\n\n // Generally, on any new target the poiner enters inside its area and\n // triggers nearBorders(), so have to take care of this\n if (this.nearElBorders(target)) {\n targetParent = this.closest(target, containerSel);\n\n if (targetParent && this.validTarget(targetParent).valid) {\n target = targetParent;\n }\n }\n\n return target;\n },\n\n /**\n * Check if the current pointer is neare to element borders\n * @return {Boolen}\n */\n nearElBorders(el) {\n const off = 10;\n const rect = el.getBoundingClientRect();\n const body = el.ownerDocument.body;\n const { x, y } = this.getCurrentPos();\n const top = rect.top + body.scrollTop;\n const left = rect.left + body.scrollLeft;\n const width = rect.width;\n const height = rect.height;\n\n if (\n y < top + off || // near top edge\n y > top + height - off || // near bottom edge\n x < left + off || // near left edge\n x > left + width - off // near right edge\n ) {\n return 1;\n }\n },\n\n getCurrentPos() {\n const ev = this.eventMove;\n const x = ev.pageX || 0;\n const y = ev.pageY || 0;\n return { x, y };\n },\n\n /**\n * Returns dimensions and positions about the element\n * @param {HTMLElement} el\n * @return {Array}\n */\n getDim(el) {\n const { em, canvasRelative } = this;\n var top, left, height, width;\n\n if (canvasRelative && em) {\n const canvas = em.get('Canvas');\n const pos = canvas.getElementPos(el, { noScroll: 1 });\n const elOffsets = canvas.getElementOffsets(el);\n top = pos.top - elOffsets.marginTop;\n left = pos.left - elOffsets.marginLeft;\n height = pos.height + elOffsets.marginTop + elOffsets.marginBottom;\n width = pos.width + elOffsets.marginLeft + elOffsets.marginRight;\n } else {\n var o = this.offset(el);\n top = this.relative\n ? el.offsetTop\n : o.top - (this.wmargin ? -1 : 1) * this.elT;\n left = this.relative\n ? el.offsetLeft\n : o.left - (this.wmargin ? -1 : 1) * this.elL;\n height = el.offsetHeight;\n width = el.offsetWidth;\n }\n\n return [top, left, height, width];\n },\n\n /**\n * Get children dimensions\n * @param {HTMLELement} el Element root\n * @retun {Array}\n * */\n getChildrenDim(trg) {\n const dims = [];\n if (!trg) return dims;\n\n // Get children based on getChildrenContainer\n const trgModel = this.getTargetModel(trg);\n if (trgModel && trgModel.view && !this.ignoreViewChildren) {\n const view = trgModel.getCurrentView\n ? trgModel.getCurrentView()\n : trgModel.view;\n trg = view.getChildrenContainer();\n }\n\n each(trg.children, (el, i) => {\n const model = getModel(el, $);\n const elIndex = model && model.index ? model.index() : i;\n\n if (!isTextNode(el) && !this.matches(el, this.itemSel)) {\n return;\n }\n\n const dim = this.getDim(el);\n let dir = this.direction;\n\n if (dir == 'v') dir = true;\n else if (dir == 'h') dir = false;\n else dir = this.isInFlow(el, trg);\n\n dim.push(dir, el, elIndex);\n dims.push(dim);\n });\n\n return dims;\n },\n\n /**\n * Check if the coordinates are near to the borders\n * @param {Array} dim\n * @param {number} rX Relative X position\n * @param {number} rY Relative Y position\n * @return {Boolean}\n * */\n nearBorders(dim, rX, rY) {\n var result = 0;\n var off = this.borderOffset;\n var x = rX || 0;\n var y = rY || 0;\n var t = dim[0];\n var l = dim[1];\n var h = dim[2];\n var w = dim[3];\n if (t + off > y || y > t + h - off || l + off > x || x > l + w - off)\n result = 1;\n\n return !!result;\n },\n\n /**\n * Find the position based on passed dimensions and coordinates\n * @param {Array} dims Dimensions of nodes to parse\n * @param {number} posX X coordindate\n * @param {number} posY Y coordindate\n * @retun {Object}\n * */\n findPosition(dims, posX, posY) {\n var result = { index: 0, indexEl: 0, method: 'before' };\n var leftLimit = 0,\n xLimit = 0,\n dimRight = 0,\n yLimit = 0,\n xCenter = 0,\n yCenter = 0,\n dimDown = 0,\n dim = 0;\n // Each dim is: Top, Left, Height, Width\n for (var i = 0, len = dims.length; i < len; i++) {\n dim = dims[i];\n // Right position of the element. Left + Width\n dimRight = dim[1] + dim[3];\n // Bottom position of the element. Top + Height\n dimDown = dim[0] + dim[2];\n // X center position of the element. Left + (Width / 2)\n xCenter = dim[1] + dim[3] / 2;\n // Y center position of the element. Top + (Height / 2)\n yCenter = dim[0] + dim[2] / 2;\n // Skip if over the limits\n if (\n (xLimit && dim[1] > xLimit) ||\n (yLimit && yCenter >= yLimit) || // >= avoid issue with clearfixes\n (leftLimit && dimRight < leftLimit)\n )\n continue;\n result.index = i;\n result.indexEl = dim[6];\n // If it's not in flow (like 'float' element)\n if (!dim[4]) {\n if (posY < dimDown) yLimit = dimDown;\n //If x lefter than center\n if (posX < xCenter) {\n xLimit = xCenter;\n result.method = 'before';\n } else {\n leftLimit = xCenter;\n result.method = 'after';\n }\n } else {\n // If y upper than center\n if (posY < yCenter) {\n result.method = 'before';\n break;\n } else result.method = 'after'; // After last element\n }\n }\n return result;\n },\n\n /**\n * Updates the position of the placeholder\n * @param {HTMLElement} phl\n * @param {Array} dims\n * @param {Object} pos Position object\n * @param {Array} trgDim target dimensions\n * */\n movePlaceholder(plh, dims, pos, trgDim) {\n var marg = 0,\n t = 0,\n l = 0,\n w = 0,\n h = 0,\n un = 'px',\n margI = 5,\n method = pos.method;\n var elDim = dims[pos.index];\n\n // Placeholder orientation\n plh.classList.remove('vertical');\n plh.classList.add('horizontal');\n\n if (elDim) {\n // If it's not in flow (like 'float' element)\n if (!elDim[4]) {\n w = 'auto';\n h = elDim[2] - marg * 2 + un;\n t = elDim[0] + marg;\n l = method == 'before' ? elDim[1] - marg : elDim[1] + elDim[3] - marg;\n\n plh.classList.remove('horizontal');\n plh.classList.add('vertical');\n } else {\n w = elDim[3] + un;\n h = 'auto';\n t = method == 'before' ? elDim[0] - marg : elDim[0] + elDim[2] - marg;\n l = elDim[1];\n }\n } else {\n if (!this.nested) {\n plh.style.display = 'none';\n return;\n }\n if (trgDim) {\n t = trgDim[0] + margI;\n l = trgDim[1] + margI;\n w = parseInt(trgDim[3]) - margI * 2 + un;\n h = 'auto';\n }\n }\n plh.style.top = t + un;\n plh.style.left = l + un;\n if (w) plh.style.width = w;\n if (h) plh.style.height = h;\n },\n\n /**\n * Leave item\n * @param event\n *\n * @return void\n * */\n endMove(e) {\n const src = this.eV;\n const moved = [];\n const docs = this.getDocuments();\n const container = this.getContainerEl();\n const onEndMove = this.onEndMove;\n const { target, lastPos } = this;\n let srcModel;\n off(container, 'mousemove dragover', this.onMove);\n off(docs, 'mouseup dragend touchend', this.endMove);\n off(docs, 'keydown', this.rollback);\n this.plh.style.display = 'none';\n\n if (src) {\n srcModel = this.getSourceModel();\n if (this.selectOnEnd && srcModel && srcModel.set) {\n srcModel.set('status', '');\n srcModel.set('status', 'selected');\n }\n }\n\n if (this.moved) {\n const toMove = this.toMove;\n const toMoveArr = isArray(toMove) ? toMove : toMove ? [toMove] : [src];\n toMoveArr.forEach(model => {\n moved.push(this.move(target, model, lastPos));\n });\n }\n\n if (this.plh) this.plh.style.display = 'none';\n var dragHelper = this.dragHelper;\n\n if (dragHelper) {\n dragHelper.parentNode.removeChild(dragHelper);\n this.dragHelper = null;\n }\n\n this.disableTextable();\n this.selectTargetModel();\n this.toggleSortCursor();\n\n this.toMove = null;\n this.eventMove = 0;\n this.dropModel = null;\n\n if (isFunction(onEndMove)) {\n const data = {\n target: srcModel,\n parent: srcModel && srcModel.parent(),\n index: srcModel && srcModel.index()\n };\n moved.length\n ? moved.forEach(m => onEndMove(m, this, data))\n : onEndMove(null, this, { ...data, cancelled: 1 });\n }\n },\n\n /**\n * Move component to new position\n * @param {HTMLElement} dst Destination target\n * @param {HTMLElement} src Element to move\n * @param {Object} pos Object with position coordinates\n * */\n move(dst, src, pos) {\n const { em, activeTextModel, dropContent } = this;\n const srcEl = getElement(src);\n em && em.trigger('component:dragEnd:before', dst, srcEl, pos); // @depricated\n let index = pos.indexEl;\n let modelToDrop, modelTemp, created;\n const warns = [];\n const validResult = this.validTarget(dst, srcEl);\n const targetCollection = $(dst).data('collection');\n const model = validResult.srcModel;\n let { droppable } = validResult;\n const { trgModel, draggable } = validResult;\n const dropInfo =\n validResult.dropInfo || (trgModel && trgModel.get('droppable'));\n const dragInfo = validResult.dragInfo || (model && model.get('draggable'));\n droppable = trgModel instanceof Backbone.Collection ? 1 : droppable;\n const isTextableActive = this.isTextableActive(model, trgModel);\n\n if (targetCollection && droppable && draggable) {\n index = pos.method === 'after' ? index + 1 : index;\n var opts = { at: index, noIncrement: 1 };\n\n if (!dropContent) {\n // Putting `avoidStore` here will make the UndoManager behave wrong\n opts.temporary = 1;\n modelTemp = targetCollection.add({}, { ...opts });\n\n if (model.collection) {\n modelToDrop = model.collection.remove(model, { temporary: 1 });\n }\n } else {\n modelToDrop = dropContent;\n opts.silent = false;\n opts.avoidUpdateStyle = 1;\n }\n\n if (isTextableActive) {\n const viewActive = activeTextModel.getView();\n activeTextModel.trigger('active');\n const { activeRte } = viewActive;\n const modelEl = model.getEl();\n delete model.opt.temporary;\n model.getView().render();\n modelEl.setAttribute('data-gjs-textable', 'true');\n const { outerHTML } = modelEl;\n activeRte.insertHTML && activeRte.insertHTML(outerHTML);\n } else {\n created = targetCollection.add(modelToDrop, opts);\n }\n\n if (!dropContent) {\n targetCollection.remove(modelTemp);\n } else {\n this.dropContent = null;\n }\n\n // This will cause to recalculate children dimensions\n this.prevTarget = null;\n } else if (em) {\n !targetCollection && warns.push('Target collection not found');\n !droppable &&\n dropInfo &&\n warns.push(`Target is not droppable, accepts [${dropInfo}]`);\n !draggable &&\n dragInfo &&\n warns.push(`Component not draggable, acceptable by [${dragInfo}]`);\n em.logWarning('Invalid target position', {\n errors: warns,\n model,\n context: 'sorter',\n target: trgModel\n });\n }\n\n if (em) {\n em.trigger('component:dragEnd', targetCollection, modelToDrop, warns); // @depricated\n em.trigger('sorter:drag:end', {\n targetCollection,\n modelToDrop,\n warns,\n validResult,\n dst,\n srcEl\n });\n }\n\n return created;\n },\n\n /**\n * Rollback to previous situation\n * @param {Event}\n * @param {Bool} Indicates if rollback in anycase\n * */\n rollback(e) {\n off(this.getDocuments(), 'keydown', this.rollback);\n const key = e.which || e.keyCode;\n\n if (key == 27) {\n this.moved = 0;\n this.endMove();\n }\n }\n});\n","import { bindAll, defaults, isFunction, each } from 'underscore';\nimport { on, off, normalizeFloat } from 'utils/mixins';\n\nvar defaultOpts = {\n // Function which returns custom X and Y coordinates of the mouse\n mousePosFetcher: null,\n // Indicates custom target updating strategy\n updateTarget: null,\n // Function which gets HTMLElement as an arg and returns it relative position\n ratioDefault: 0,\n posFetcher: null,\n onStart: null,\n onMove: null,\n onEnd: null,\n onUpdateContainer: () => {},\n\n // Resize unit step\n step: 1,\n\n // Minimum dimension\n minDim: 10,\n\n // Maximum dimension\n maxDim: '',\n\n // Unit used for height resizing\n unitHeight: 'px',\n\n // Unit used for width resizing\n unitWidth: 'px',\n\n // The key used for height resizing\n keyHeight: 'height',\n\n // The key used for width resizing\n keyWidth: 'width',\n\n // If true, will override unitHeight and unitWidth, on start, with units\n // from the current focused element (currently used only in SelectComponent)\n currentUnit: 1,\n\n // With this option active the mousemove event won't be altered when\n // the pointer comes over iframes\n silentFrames: 0,\n\n // If true the container of handlers won't be updated\n avoidContainerUpdate: 0,\n\n // If height is 'auto', this setting will preserve it and only update width\n keepAutoHeight: false,\n\n // If width is 'auto', this setting will preserve it and only update height\n keepAutoWidth: false,\n\n // When keepAutoHeight is true and the height has the value 'auto', this is set to true and height isn't updated\n autoHeight: false,\n\n // When keepAutoWidth is true and the width has the value 'auto', this is set to true and width isn't updated\n autoWidth: false,\n\n // Handlers\n tl: 1, // Top left\n tc: 1, // Top center\n tr: 1, // Top right\n cl: 1, // Center left\n cr: 1, // Center right\n bl: 1, // Bottom left\n bc: 1, // Bottom center\n br: 1 // Bottom right\n};\n\nvar createHandler = (name, opts) => {\n var pfx = opts.prefix || '';\n var el = document.createElement('i');\n el.className = pfx + 'resizer-h ' + pfx + 'resizer-h-' + name;\n el.setAttribute('data-' + pfx + 'handler', name);\n return el;\n};\n\nvar getBoundingRect = (el, win) => {\n var w = win || window;\n var rect = el.getBoundingClientRect();\n return {\n left: rect.left + w.pageXOffset,\n top: rect.top + w.pageYOffset,\n width: rect.width,\n height: rect.height\n };\n};\n\nclass Resizer {\n /**\n * Init the Resizer with options\n * @param {Object} options\n */\n constructor(opts = {}) {\n this.setOptions(opts);\n bindAll(this, 'handleKeyDown', 'handleMouseDown', 'move', 'stop');\n return this;\n }\n\n /**\n * Get current connfiguration options\n * @return {Object}\n */\n getConfig() {\n return this.opts;\n }\n\n /**\n * Setup options\n * @param {Object} options\n */\n setOptions(options = {}) {\n this.opts = defaults(options, defaultOpts);\n this.setup();\n }\n\n /**\n * Setup resizer\n */\n setup() {\n const opts = this.opts;\n const pfx = opts.prefix || '';\n const appendTo = opts.appendTo || document.body;\n let container = this.container;\n\n // Create container if not yet exist\n if (!container) {\n container = document.createElement('div');\n container.className = `${pfx}resizer-c`;\n appendTo.appendChild(container);\n this.container = container;\n }\n\n while (container.firstChild) {\n container.removeChild(container.firstChild);\n }\n\n // Create handlers\n const handlers = {};\n ['tl', 'tc', 'tr', 'cl', 'cr', 'bl', 'bc', 'br'].forEach(\n hdl => (handlers[hdl] = opts[hdl] ? createHandler(hdl, opts) : '')\n );\n\n for (let n in handlers) {\n const handler = handlers[n];\n handler && container.appendChild(handler);\n }\n\n this.handlers = handlers;\n this.mousePosFetcher = opts.mousePosFetcher;\n this.updateTarget = opts.updateTarget;\n this.posFetcher = opts.posFetcher;\n this.onStart = opts.onStart;\n this.onMove = opts.onMove;\n this.onEnd = opts.onEnd;\n this.onUpdateContainer = opts.onUpdateContainer;\n }\n\n /**\n * Toggle iframes pointer event\n * @param {Boolean} silent If true, iframes will be silented\n */\n toggleFrames(silent) {\n if (this.opts.silentFrames) {\n const frames = document.querySelectorAll('iframe');\n each(frames, frame => (frame.style.pointerEvents = silent ? 'none' : ''));\n }\n }\n\n /**\n * Detects if the passed element is a resize handler\n * @param {HTMLElement} el\n * @return {Boolean}\n */\n isHandler(el) {\n var handlers = this.handlers;\n\n for (var n in handlers) {\n if (handlers[n] === el) return true;\n }\n\n return false;\n }\n\n /**\n * Returns the focused element\n * @return {HTMLElement}\n */\n getFocusedEl() {\n return this.el;\n }\n\n /**\n * Returns the parent of the focused element\n * @return {HTMLElement}\n */\n getParentEl() {\n return this.el.parentElement;\n }\n\n /**\n * Returns documents\n */\n getDocumentEl() {\n return [this.el.ownerDocument, document];\n }\n\n /**\n * Return element position\n * @param {HTMLElement} el\n * @param {Object} opts Custom options\n * @return {Object}\n */\n getElementPos(el, opts = {}) {\n var posFetcher = this.posFetcher || '';\n return posFetcher ? posFetcher(el, opts) : getBoundingRect(el);\n }\n\n /**\n * Focus resizer on the element, attaches handlers to it\n * @param {HTMLElement} el\n */\n focus(el) {\n // Avoid focusing on already focused element\n if (el && el === this.el) {\n return;\n }\n\n this.el = el;\n this.updateContainer({ forceShow: 1 });\n on(this.getDocumentEl(), 'mousedown', this.handleMouseDown);\n }\n\n /**\n * Blur from element\n */\n blur() {\n this.container.style.display = 'none';\n\n if (this.el) {\n off(this.getDocumentEl(), 'mousedown', this.handleMouseDown);\n this.el = null;\n }\n }\n\n /**\n * Start resizing\n * @param {Event} e\n */\n start(e) {\n //Right or middel click\n if (e.button !== 0) return;\n e.preventDefault();\n e.stopPropagation();\n const el = this.el;\n const parentEl = this.getParentEl();\n const resizer = this;\n const config = this.opts || {};\n var attrName = 'data-' + config.prefix + 'handler';\n var rect = this.getElementPos(el, { target: 'el' });\n var parentRect = this.getElementPos(parentEl);\n this.handlerAttr = e.target.getAttribute(attrName);\n this.clickedHandler = e.target;\n this.startDim = {\n t: rect.top,\n l: rect.left,\n w: rect.width,\n h: rect.height\n };\n this.rectDim = {\n t: rect.top,\n l: rect.left,\n w: rect.width,\n h: rect.height\n };\n this.startPos = {\n x: e.clientX,\n y: e.clientY\n };\n this.parentDim = {\n t: parentRect.top,\n l: parentRect.left,\n w: parentRect.width,\n h: parentRect.height\n };\n\n // Listen events\n var doc = this.getDocumentEl();\n on(doc, 'mousemove', this.move);\n on(doc, 'keydown', this.handleKeyDown);\n on(doc, 'mouseup', this.stop);\n isFunction(this.onStart) &&\n this.onStart(e, { docs: doc, config, el, resizer });\n this.toggleFrames(1);\n this.move(e);\n }\n\n /**\n * While resizing\n * @param {Event} e\n */\n move(e) {\n const onMove = this.onMove;\n var mouseFetch = this.mousePosFetcher;\n var currentPos = mouseFetch\n ? mouseFetch(e)\n : {\n x: e.clientX,\n y: e.clientY\n };\n\n this.currentPos = currentPos;\n this.delta = {\n x: currentPos.x - this.startPos.x,\n y: currentPos.y - this.startPos.y\n };\n this.keys = {\n shift: e.shiftKey,\n ctrl: e.ctrlKey,\n alt: e.altKey\n };\n\n this.rectDim = this.calc(this);\n this.updateRect(0);\n\n // Move callback\n onMove && onMove(e);\n\n // In case the mouse button was released outside of the window\n if (e.which === 0) {\n this.stop(e);\n }\n }\n\n /**\n * Stop resizing\n * @param {Event} e\n */\n stop(e) {\n const config = this.opts;\n var doc = this.getDocumentEl();\n off(doc, 'mousemove', this.move);\n off(doc, 'keydown', this.handleKeyDown);\n off(doc, 'mouseup', this.stop);\n this.updateRect(1);\n this.toggleFrames();\n isFunction(this.onEnd) && this.onEnd(e, { docs: doc, config });\n }\n\n /**\n * Update rect\n */\n updateRect(store) {\n const el = this.el;\n const resizer = this;\n const config = this.opts;\n const rect = this.rectDim;\n const updateTarget = this.updateTarget;\n const selectedHandler = this.getSelectedHandler();\n const { unitHeight, unitWidth, keyWidth, keyHeight } = config;\n\n // Use custom updating strategy if requested\n if (isFunction(updateTarget)) {\n updateTarget(el, rect, {\n store,\n selectedHandler,\n resizer,\n config\n });\n } else {\n const elStyle = el.style;\n elStyle[keyWidth] = rect.w + unitWidth;\n elStyle[keyHeight] = rect.h + unitHeight;\n }\n\n this.updateContainer();\n }\n\n updateContainer(opt = {}) {\n const { opts, container, el } = this;\n const { style } = container;\n\n if (!opts.avoidContainerUpdate && el) {\n // On component resize container fits the tool,\n // to check if this update is required somewhere else point\n // const toUpdate = ['left', 'top', 'width', 'height'];\n // const rectEl = this.getElementPos(el, { target: 'container' });\n // toUpdate.forEach(pos => (style[pos] = `${rectEl[pos]}px`));\n if (opt.forceShow) style.display = 'block';\n }\n\n this.onUpdateContainer({\n el: container,\n resizer: this,\n opts: {\n ...opts,\n ...opt\n }\n });\n }\n\n /**\n * Get selected handler name\n * @return {string}\n */\n getSelectedHandler() {\n var handlers = this.handlers;\n\n if (!this.selectedHandler) {\n return;\n }\n\n for (let n in handlers) {\n if (handlers[n] === this.selectedHandler) return n;\n }\n }\n\n /**\n * Handle ESC key\n * @param {Event} e\n */\n handleKeyDown(e) {\n if (e.keyCode === 27) {\n // Rollback to initial dimensions\n this.rectDim = this.startDim;\n this.stop(e);\n }\n }\n\n /**\n * Handle mousedown to check if it's possible to start resizing\n * @param {Event} e\n */\n handleMouseDown(e) {\n var el = e.target;\n if (this.isHandler(el)) {\n this.selectedHandler = el;\n this.start(e);\n } else if (el !== this.el) {\n this.selectedHandler = '';\n this.blur();\n }\n }\n\n /**\n * All positioning logic\n * @return {Object}\n */\n calc(data) {\n let value;\n const opts = this.opts || {};\n const step = opts.step;\n const startDim = this.startDim;\n const minDim = opts.minDim;\n const maxDim = opts.maxDim;\n const deltaX = data.delta.x;\n const deltaY = data.delta.y;\n const parentW = this.parentDim.w;\n const parentH = this.parentDim.h;\n const unitWidth = this.opts.unitWidth;\n const unitHeight = this.opts.unitHeight;\n const startW =\n unitWidth === '%' ? (startDim.w / 100) * parentW : startDim.w;\n const startH =\n unitHeight === '%' ? (startDim.h / 100) * parentH : startDim.h;\n var box = {\n t: 0,\n l: 0,\n w: startW,\n h: startH\n };\n\n if (!data) return;\n\n var attr = data.handlerAttr;\n if (~attr.indexOf('r')) {\n value =\n unitWidth === '%'\n ? normalizeFloat(((startW + deltaX * step) / parentW) * 100, 0.01)\n : normalizeFloat(startW + deltaX * step, step);\n value = Math.max(minDim, value);\n maxDim && (value = Math.min(maxDim, value));\n box.w = value;\n }\n if (~attr.indexOf('b')) {\n value =\n unitHeight === '%'\n ? normalizeFloat(((startH + deltaY * step) / parentH) * 100, 0.01)\n : normalizeFloat(startH + deltaY * step, step);\n value = Math.max(minDim, value);\n maxDim && (value = Math.min(maxDim, value));\n box.h = value;\n }\n if (~attr.indexOf('l')) {\n value =\n unitWidth === '%'\n ? normalizeFloat(((startW - deltaX * step) / parentW) * 100, 0.01)\n : normalizeFloat(startW - deltaX * step, step);\n value = Math.max(minDim, value);\n maxDim && (value = Math.min(maxDim, value));\n box.w = value;\n }\n if (~attr.indexOf('t')) {\n value =\n unitHeight === '%'\n ? normalizeFloat(((startH - deltaY * step) / parentH) * 100, 0.01)\n : normalizeFloat(startH - deltaY * step, step);\n value = Math.max(minDim, value);\n maxDim && (value = Math.min(maxDim, value));\n box.h = value;\n }\n\n // Enforce aspect ratio (unless shift key is being held)\n var ratioActive = opts.ratioDefault ? !data.keys.shift : data.keys.shift;\n if (attr.indexOf('c') < 0 && ratioActive) {\n var ratio = startDim.w / startDim.h;\n if (box.w / box.h > ratio) {\n box.h = Math.round(box.w / ratio);\n } else {\n box.w = Math.round(box.h * ratio);\n }\n }\n\n if (~attr.indexOf('l')) {\n box.l = startDim.w - box.w;\n }\n if (~attr.indexOf('t')) {\n box.t = startDim.h - box.h;\n }\n\n return box;\n }\n}\n\nexport default {\n init(opts) {\n return new Resizer(opts);\n }\n};\n","import Dragger from './Dragger';\nimport Sorter from './Sorter';\nimport Resizer from './Resizer';\n\nexport default () => {\n return {\n /**\n * Name of the module\n * @type {String}\n * @private\n */\n name: 'Utils',\n\n /**\n * Initialize module\n */\n init() {\n return this;\n },\n\n destroy() {},\n\n Sorter,\n Resizer,\n Dragger\n };\n};\n","const traitInputAttr = { placeholder: 'eg. Text here' };\n\nexport default {\n assetManager: {\n addButton: 'Add image',\n inputPlh: 'http://path/to/the/image.jpg',\n modalTitle: 'Select Image',\n uploadTitle: 'Drop files here or click to upload'\n },\n // Here just as a reference, GrapesJS core doesn't contain any block,\n // so this should be omitted from other local files\n blockManager: {\n labels: {\n // 'block-id': 'Block Label',\n },\n categories: {\n // 'category-id': 'Category Label',\n }\n },\n domComponents: {\n names: {\n '': 'Box',\n wrapper: 'Body',\n text: 'Text',\n comment: 'Comment',\n image: 'Image',\n video: 'Video',\n label: 'Label',\n link: 'Link',\n map: 'Map',\n tfoot: 'Table foot',\n tbody: 'Table body',\n thead: 'Table head',\n table: 'Table',\n row: 'Table row',\n cell: 'Table cell'\n }\n },\n deviceManager: {\n device: 'Device',\n devices: {\n desktop: 'Desktop',\n tablet: 'Tablet',\n mobileLandscape: 'Mobile Landscape',\n mobilePortrait: 'Mobile Portrait'\n }\n },\n panels: {\n buttons: {\n titles: {\n preview: 'Preview',\n fullscreen: 'Fullscreen',\n 'sw-visibility': 'View components',\n 'export-template': 'View code',\n 'open-sm': 'Open Style Manager',\n 'open-tm': 'Settings',\n 'open-layers': 'Open Layer Manager',\n 'open-blocks': 'Open Blocks'\n }\n }\n },\n selectorManager: {\n label: 'Classes',\n selected: 'Selected',\n emptyState: '- State -',\n states: {\n hover: 'Hover',\n active: 'Click',\n 'nth-of-type(2n)': 'Even/Odd'\n }\n },\n styleManager: {\n empty: 'Select an element before using Style Manager',\n layer: 'Layer',\n fileButton: 'Images',\n sectors: {\n general: 'General',\n layout: 'Layout',\n typography: 'Typography',\n decorations: 'Decorations',\n extra: 'Extra',\n flex: 'Flex',\n dimension: 'Dimension'\n },\n // The core library generates the name by their `property` name\n properties: {\n // float: 'Float',\n }\n },\n traitManager: {\n empty: 'Select an element before using Trait Manager',\n label: 'Component settings',\n traits: {\n // The core library generates the name by their `name` property\n labels: {\n // id: 'Id',\n // alt: 'Alt',\n // title: 'Title',\n // href: 'Href',\n },\n // In a simple trait, like text input, these are used on input attributes\n attributes: {\n id: traitInputAttr,\n alt: traitInputAttr,\n title: traitInputAttr,\n href: { placeholder: 'eg. https://google.com' }\n },\n // In a trait like select, these are used to translate option names\n options: {\n target: {\n false: 'This window',\n _blank: 'New window'\n }\n }\n }\n }\n};\n","import en from './locale/en';\n\nexport default {\n // Locale value\n locale: 'en',\n\n // Fallback locale\n localeFallback: 'en',\n\n // Detect locale by checking browser language\n detectLocale: 1,\n\n // Show warnings when some of the i18n resources are missing\n debug: 0,\n\n // Messages to translate\n messages: {\n en\n }\n};\n","/**\n * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/i18n/config.js)\n * ```js\n * const editor = grapesjs.init({\n * i18n: {\n * locale: 'en',\n * localeFallback: 'en',\n * messages: {\n * it: { hello: 'Ciao', ... },\n * ...\n * }\n * }\n * })\n * ```\n *\n * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance\n *\n * ```js\n * const i18n = editor.I18n;\n * ```\n *\n * ### Events\n * * `i18n:add` - New set of messages is added\n * * `i18n:update` - The set of messages is updated\n * * `i18n:locale` - Locale changed\n *\n * @module I18n\n */\nimport { isUndefined, isString } from 'underscore';\nimport config from './config';\n\nconst isObj = el => !Array.isArray(el) && el !== null && typeof el === 'object';\n\nconst deepAssign = (...args) => {\n const target = { ...args[0] };\n\n for (let i = 1; i < args.length; i++) {\n const source = { ...args[i] };\n\n for (let key in source) {\n const targValue = target[key];\n const srcValue = source[key];\n\n if (isObj(targValue) && isObj(srcValue)) {\n target[key] = deepAssign(targValue, srcValue);\n } else {\n target[key] = srcValue;\n }\n }\n }\n\n return target;\n};\n\nexport default () => {\n return {\n name: 'I18n',\n\n config,\n\n /**\n * Initialize module\n * @param {Object} config Configurations\n * @private\n */\n init(opts = {}) {\n this.config = {\n ...config,\n ...opts,\n messages: {\n ...config.messages,\n ...(opts.messages || {})\n }\n };\n\n if (this.config.detectLocale) {\n this.config.locale = this._localLang();\n }\n\n this.em = opts.em;\n return this;\n },\n\n /**\n * Get module configurations\n * @returns {Object} Configuration object\n */\n getConfig() {\n return this.config;\n },\n\n /**\n * Update current locale\n * @param {String} locale Locale value\n * @returns {this}\n * @example\n * i18n.setLocale('it');\n */\n setLocale(locale) {\n const { em, config } = this;\n const evObj = { value: locale, valuePrev: config.locale };\n em && em.trigger('i18n:locale', evObj);\n config.locale = locale;\n return this;\n },\n\n /**\n * Get current locale\n * @returns {String} Current locale value\n */\n getLocale() {\n return this.config.locale;\n },\n\n /**\n * Get all messages\n * @param {String} [lang] Specify the language of messages to return\n * @param {Object} [opts] Options\n * @param {Boolean} [opts.debug] Show warnings in case of missing language\n * @returns {Object}\n * @example\n * i18n.getMessages();\n * // -> { en: { hello: '...' }, ... }\n * i18n.getMessages('en');\n * // -> { hello: '...' }\n */\n getMessages(lang, opts = {}) {\n const { messages } = this.config;\n lang &&\n !messages[lang] &&\n this._debug(`'${lang}' i18n lang not found`, opts);\n return lang ? messages[lang] : messages;\n },\n\n /**\n * Set new set of messages\n * @param {Object} msg Set of messages\n * @returns {this}\n * @example\n * i18n.getMessages();\n * // -> { en: { msg1: 'Msg 1', msg2: 'Msg 2', } }\n * i18n.setMessages({ en: { msg2: 'Msg 2 up', msg3: 'Msg 3', } });\n * // Set replaced\n * i18n.getMessages();\n * // -> { en: { msg2: 'Msg 2 up', msg3: 'Msg 3', } }\n */\n setMessages(msg) {\n const { em, config } = this;\n config.messages = msg;\n em && em.trigger('i18n:update', msg);\n return this;\n },\n\n /**\n * Update messages\n * @param {Object} msg Set of messages to add\n * @returns {this}\n * @example\n * i18n.getMessages();\n * // -> { en: { msg1: 'Msg 1', msg2: 'Msg 2', } }\n * i18n.addMessages({ en: { msg2: 'Msg 2 up', msg3: 'Msg 3', } });\n * // Set updated\n * i18n.getMessages();\n * // -> { en: { msg1: 'Msg 1', msg2: 'Msg 2 up', msg3: 'Msg 3', } }\n */\n addMessages(msg) {\n const { em } = this;\n const { messages } = this.config;\n em && em.trigger('i18n:add', msg);\n this.setMessages(deepAssign(messages, msg));\n\n return this;\n },\n\n /**\n * Translate the locale message\n * @param {String} key Label to translate\n * @param {Object} [opts] Options for the translation\n * @param {Object} [opts.params] Params for the translation\n * @param {Boolean} [opts.debug] Show warnings in case of missing resources\n * @returns {String}\n * @example\n * obj.setMessages({\n * en: { msg: 'Msg', msg2: 'Msg {test}'},\n * it: { msg2: 'Msg {test} it'},\n * });\n * obj.t('msg');\n * // -> outputs `Msg`\n * obj.t('msg2', { params: { test: 'hello' } }); // use params\n * // -> outputs `Msg hello`\n * obj.t('msg2', { l: 'it', params: { test: 'hello' } }); // custom local\n * // -> outputs `Msg hello it`\n */\n t(key, opts = {}) {\n const { config } = this;\n const param = opts.params || {};\n const locale = opts.l || this.getLocale();\n const localeFlb = opts.lFlb || config.localeFallback;\n let result = this._getMsg(key, locale, opts);\n\n // Try with fallback\n if (!result) result = this._getMsg(key, localeFlb, opts);\n\n !result &&\n this._debug(`'${key}' i18n key not found in '${locale}' lang`, opts);\n result =\n result && isString(result) ? this._addParams(result, param) : result;\n\n return result;\n },\n\n _localLang() {\n const nav = window.navigator || {};\n const lang = nav.language || nav.userLanguage;\n return lang ? lang.split('-')[0] : 'en';\n },\n\n _addParams(str, params) {\n const reg = new RegExp(`\\{([\\\\w\\\\d-]*)\\}`, 'g');\n return str.replace(reg, (m, val) => params[val] || '').trim();\n },\n\n _getMsg(key, locale, opts = {}) {\n const msgSet = this.getMessages(locale, opts);\n\n // Lang set is missing\n if (!msgSet) return;\n\n let result = msgSet[key];\n\n // Check for nested getter\n if (!result && key.indexOf('.') > 0) {\n result = key.split('.').reduce((lang, key) => {\n if (isUndefined(lang)) return;\n return lang[key];\n }, msgSet);\n }\n\n return result;\n },\n\n _debug(str, opts = {}) {\n const { em, config } = this;\n (opts.debug || config.debug) && em && em.logWarning(str);\n },\n\n destroy() {\n this.config = config;\n this.em = {};\n }\n };\n};\n","// The initial version of this RTE was borrowed from https://github.com/jaredreich/pell\n// and adapted to the GrapesJS's need\n\nimport { on, off } from 'utils/mixins';\n\nconst RTE_KEY = '_rte';\n\nconst btnState = {\n ACTIVE: 1,\n INACTIVE: 0,\n DISABLED: -1\n};\nconst isValidAnchor = rte => {\n const anchor = rte.selection().anchorNode;\n const parentNode = anchor && anchor.parentNode;\n const nextSibling = anchor && anchor.nextSibling;\n return (\n (parentNode && parentNode.nodeName == 'A') ||\n (nextSibling && nextSibling.nodeName == 'A')\n );\n};\nconst defActions = {\n bold: {\n name: 'bold',\n icon: 'B ',\n attributes: { title: 'Bold' },\n result: rte => rte.exec('bold')\n },\n italic: {\n name: 'italic',\n icon: 'I ',\n attributes: { title: 'Italic' },\n result: rte => rte.exec('italic')\n },\n underline: {\n name: 'underline',\n icon: 'U ',\n attributes: { title: 'Underline' },\n result: rte => rte.exec('underline')\n },\n strikethrough: {\n name: 'strikethrough',\n icon: 'S ',\n attributes: { title: 'Strike-through' },\n result: rte => rte.exec('strikeThrough')\n },\n link: {\n icon: `⫘ `,\n name: 'link',\n attributes: {\n style: 'font-size:1.4rem;padding:0 4px 2px;',\n title: 'Link'\n },\n state: (rte, doc) => {\n if (rte && rte.selection()) {\n return isValidAnchor(rte) ? btnState.ACTIVE : btnState.INACTIVE;\n } else {\n return btnState.INACTIVE;\n }\n },\n result: rte => {\n if (isValidAnchor(rte)) {\n rte.exec('unlink');\n } else {\n rte.insertHTML(`${rte.selection()} `);\n }\n }\n }\n};\n\nexport default class RichTextEditor {\n constructor(settings = {}) {\n const el = settings.el;\n\n if (el[RTE_KEY]) {\n return el[RTE_KEY];\n }\n\n el[RTE_KEY] = this;\n this.setEl(el);\n this.updateActiveActions = this.updateActiveActions.bind(this);\n\n const settAct = settings.actions || [];\n settAct.forEach((action, i) => {\n if (typeof action === 'string') {\n action = defActions[action];\n } else if (defActions[action.name]) {\n action = { ...defActions[action.name], ...action };\n }\n settAct[i] = action;\n });\n const actions = settAct.length\n ? settAct\n : Object.keys(defActions).map(action => defActions[action]);\n\n settings.classes = {\n ...{\n actionbar: 'actionbar',\n button: 'action',\n active: 'active',\n disabled: 'disabled',\n inactive: 'inactive'\n },\n ...settings.classes\n };\n\n const classes = settings.classes;\n let actionbar = settings.actionbar;\n this.actionbar = actionbar;\n this.settings = settings;\n this.classes = classes;\n this.actions = actions;\n\n if (!actionbar) {\n const actionbarCont = settings.actionbarContainer;\n actionbar = document.createElement('div');\n actionbar.className = classes.actionbar;\n actionbarCont.appendChild(actionbar);\n this.actionbar = actionbar;\n actions.forEach(action => this.addAction(action));\n }\n\n settings.styleWithCSS && this.exec('styleWithCSS');\n this.syncActions();\n\n return this;\n }\n\n destroy() {\n this.el = 0;\n this.doc = 0;\n this.actionbar = 0;\n this.settings = {};\n this.classes = {};\n this.actions = [];\n }\n\n setEl(el) {\n this.el = el;\n this.doc = el.ownerDocument;\n }\n\n updateActiveActions() {\n this.getActions().forEach(action => {\n const btn = action.btn;\n const update = action.update;\n const { active, inactive, disabled } = { ...this.classes };\n const state = action.state;\n const name = action.name;\n const doc = this.doc;\n btn.className = btn.className.replace(active, '').trim();\n btn.className = btn.className.replace(inactive, '').trim();\n btn.className = btn.className.replace(disabled, '').trim();\n\n // if there is a state function, which depicts the state,\n // i.e. `active`, `disabled`, then call it\n if (state) {\n switch (state(this, doc)) {\n case btnState.ACTIVE:\n btn.className += ` ${active}`;\n break;\n case btnState.INACTIVE:\n btn.className += ` ${inactive}`;\n break;\n case btnState.DISABLED:\n btn.className += ` ${disabled}`;\n break;\n }\n } else {\n // otherwise default to checking if the name command is supported & enabled\n if (doc.queryCommandSupported(name) && doc.queryCommandState(name)) {\n btn.className += ` ${active}`;\n }\n }\n update && update(this, action);\n });\n }\n\n enable() {\n if (this.enabled) {\n return this;\n }\n\n this.actionbarEl().style.display = '';\n this.el.contentEditable = true;\n on(this.el, 'mouseup keyup', this.updateActiveActions);\n this.syncActions();\n this.updateActiveActions();\n this.el.focus();\n this.enabled = 1;\n return this;\n }\n\n disable() {\n this.actionbarEl().style.display = 'none';\n this.el.contentEditable = false;\n off(this.el, 'mouseup keyup', this.updateActiveActions);\n this.enabled = 0;\n return this;\n }\n\n /**\n * Sync actions with the current RTE\n */\n syncActions() {\n this.getActions().forEach(action => {\n if (this.settings.actionbar) {\n if (\n !action.state ||\n (action.state && action.state(this, this.doc) >= 0)\n ) {\n const event = action.event || 'click';\n action.btn[`on${event}`] = e => {\n action.result(this, action);\n this.updateActiveActions();\n };\n }\n }\n });\n }\n\n /**\n * Add new action to the actionbar\n * @param {Object} action\n * @param {Object} [opts={}]\n */\n addAction(action, opts = {}) {\n const sync = opts.sync;\n const btn = document.createElement('span');\n const icon = action.icon;\n const attr = action.attributes || {};\n btn.className = this.classes.button;\n action.btn = btn;\n\n for (let key in attr) {\n btn.setAttribute(key, attr[key]);\n }\n\n if (typeof icon == 'string') {\n btn.innerHTML = icon;\n } else {\n btn.appendChild(icon);\n }\n\n this.actionbarEl().appendChild(btn);\n\n if (sync) {\n this.actions.push(action);\n this.syncActions();\n }\n }\n\n /**\n * Get the array of current actions\n * @return {Array}\n */\n getActions() {\n return this.actions;\n }\n\n /**\n * Returns the Selection instance\n * @return {Selection}\n */\n selection() {\n return this.doc.getSelection();\n }\n\n /**\n * Execute the command\n * @param {string} command Command name\n * @param {any} [value=null Command's arguments\n */\n exec(command, value = null) {\n this.doc.execCommand(command, false, value);\n }\n\n /**\n * Get the actionbar element\n * @return {HTMLElement}\n */\n actionbarEl() {\n return this.actionbar;\n }\n\n /**\n * Set custom HTML to the selection, useful as the default 'insertHTML' command\n * doesn't work in the same way on all browsers\n * @param {string} value HTML string\n */\n insertHTML(value) {\n let lastNode;\n const doc = this.doc;\n const sel = doc.getSelection();\n\n if (sel && sel.rangeCount) {\n const node = doc.createElement('div');\n const range = sel.getRangeAt(0);\n range.deleteContents();\n node.innerHTML = value;\n Array.prototype.slice.call(node.childNodes).forEach(nd => {\n range.insertNode(nd);\n lastNode = nd;\n });\n\n sel.removeAllRanges();\n sel.addRange(range);\n this.el.focus();\n }\n }\n}\n","export default {\n stylePrefix: 'rte-',\n\n // If true, moves the toolbar below the element when the top canvas\n // edge is reached\n adjustToolbar: 1,\n\n // Default RTE actions\n actions: ['bold', 'italic', 'underline', 'strikethrough', 'link']\n};\n","/**\n * This module allows to customize the built-in toolbar of the Rich Text Editor and use commands from the [HTML Editing APIs](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand).\n * It's highly recommended to keep this toolbar as small as possible, especially from styling commands (eg. 'fontSize') and leave this task to the Style Manager\n *\n * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/rich_text_editor/config/config.js)\n * ```js\n * const editor = grapesjs.init({\n * richTextEditor: {\n * // options\n * }\n * })\n * ```\n *\n * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance\n *\n * ```js\n * const rte = editor.RichTextEditor;\n * ```\n *\n * * [add](#add)\n * * [get](#get)\n * * [getAll](#getall)\n * * [remove](#remove)\n * * [getToolbarEl](#gettoolbarel)\n *\n * @module RichTextEditor\n */\n\nimport RichTextEditor from './model/RichTextEditor';\nimport { on, off } from 'utils/mixins';\nimport defaults from './config/config';\n\nexport default () => {\n let config = {};\n let toolbar, actions, lastEl, lastElPos, globalRte;\n\n const hideToolbar = () => {\n const style = toolbar.style;\n const size = '-1000px';\n style.top = size;\n style.left = size;\n style.display = 'none';\n };\n\n return {\n customRte: null,\n\n /**\n * Name of the module\n * @type {String}\n * @private\n */\n name: 'RichTextEditor',\n\n getConfig() {\n return config;\n },\n\n /**\n * Initialize module. Automatically called with a new instance of the editor\n * @param {Object} opts Options\n * @private\n */\n init(opts = {}) {\n config = {\n ...defaults,\n ...opts\n };\n const ppfx = config.pStylePrefix;\n\n if (ppfx) {\n config.stylePrefix = ppfx + config.stylePrefix;\n }\n\n this.pfx = config.stylePrefix;\n actions = config.actions || [];\n toolbar = document.createElement('div');\n toolbar.className = `${ppfx}rte-toolbar ${ppfx}one-bg`;\n globalRte = this.initRte(document.createElement('div'));\n\n //Avoid closing on toolbar clicking\n on(toolbar, 'mousedown', e => e.stopPropagation());\n return this;\n },\n\n destroy() {\n const { customRte } = this;\n globalRte && globalRte.destroy();\n customRte && customRte.destroy && customRte.destroy();\n this.actionbar = 0;\n this.actions = 0;\n [config, toolbar, actions, lastEl, lastElPos, globalRte].forEach(\n i => (i = {})\n );\n },\n\n /**\n * Post render callback\n * @param {View} ev\n * @private\n */\n postRender(ev) {\n const canvas = ev.model.get('Canvas');\n toolbar.style.pointerEvents = 'all';\n hideToolbar();\n canvas.getToolsEl().appendChild(toolbar);\n },\n\n /**\n * Init the built-in RTE\n * @param {HTMLElement} el\n * @return {RichTextEditor}\n * @private\n */\n initRte(el) {\n const pfx = this.pfx;\n const actionbarContainer = toolbar;\n const actionbar = this.actionbar;\n const actions = this.actions || [...config.actions];\n const classes = {\n actionbar: `${pfx}actionbar`,\n button: `${pfx}action`,\n active: `${pfx}active`,\n inactive: `${pfx}inactive`,\n disabled: `${pfx}disabled`\n };\n const rte = new RichTextEditor({\n el,\n classes,\n actions,\n actionbar,\n actionbarContainer\n });\n globalRte && globalRte.setEl(el);\n\n if (rte.actionbar) {\n this.actionbar = rte.actionbar;\n }\n\n if (rte.actions) {\n this.actions = rte.actions;\n }\n\n return rte;\n },\n\n /**\n * Add a new action to the built-in RTE toolbar\n * @param {string} name Action name\n * @param {Object} action Action options\n * @example\n * rte.add('bold', {\n * icon: 'B ',\n * attributes: {title: 'Bold'},\n * result: rte => rte.exec('bold')\n * });\n * rte.add('link', {\n * icon: document.getElementById('t'),\n * attributes: {title: 'Link',}\n * // Example on it's easy to wrap a selected content\n * result: rte => rte.insertHTML(`${rte.selection()} `)\n * });\n * // An example with fontSize\n * rte.add('fontSize', {\n * icon: `\n * 1 \n * 4 \n * 7 \n * `,\n * // Bind the 'result' on 'change' listener\n * event: 'change',\n * result: (rte, action) => rte.exec('fontSize', action.btn.firstChild.value),\n * // Callback on any input change (mousedown, keydown, etc..)\n * update: (rte, action) => {\n * const value = rte.doc.queryCommandValue(action.name);\n * if (value != 'false') { // value is a string\n * action.btn.firstChild.value = value;\n * }\n * }\n * })\n * // An example with state\n * const isValidAnchor = (rte) => {\n * // a utility function to help determine if the selected is a valid anchor node\n * const anchor = rte.selection().anchorNode;\n * const parentNode = anchor && anchor.parentNode;\n * const nextSibling = anchor && anchor.nextSibling;\n * return (parentNode && parentNode.nodeName == 'A') || (nextSibling && nextSibling.nodeName == 'A')\n * }\n * rte.add('toggleAnchor', {\n * icon: `⫘ `,\n * state: (rte, doc) => {\n * if (rte && rte.selection()) {\n * // `btnState` is a integer, -1 for disabled, 0 for inactive, 1 for active\n * return isValidAnchor(rte) ? btnState.ACTIVE : btnState.INACTIVE;\n * } else {\n * return btnState.INACTIVE;\n * }\n * },\n * result: (rte, action) => {\n * if (isValidAnchor(rte)) {\n * rte.exec('unlink');\n * } else {\n * rte.insertHTML(`${rte.selection()} `);\n * }\n * }\n * })\n */\n add(name, action = {}) {\n action.name = name;\n globalRte.addAction(action, { sync: 1 });\n },\n\n /**\n * Get the action by its name\n * @param {string} name Action name\n * @return {Object}\n * @example\n * const action = rte.get('bold');\n * // {name: 'bold', ...}\n */\n get(name) {\n let result;\n globalRte.getActions().forEach(action => {\n if (action.name == name) {\n result = action;\n }\n });\n return result;\n },\n\n /**\n * Get all actions\n * @return {Array}\n */\n getAll() {\n return globalRte.getActions();\n },\n\n /**\n * Remove the action from the toolbar\n * @param {string} name\n * @return {Object} Removed action\n * @example\n * const action = rte.remove('bold');\n * // {name: 'bold', ...}\n */\n remove(name) {\n const actions = this.getAll();\n const action = this.get(name);\n\n if (action) {\n const btn = action.btn;\n const index = actions.indexOf(action);\n btn.parentNode.removeChild(btn);\n actions.splice(index, 1);\n }\n\n return action;\n },\n\n /**\n * Get the toolbar element\n * @return {HTMLElement}\n */\n getToolbarEl() {\n return toolbar;\n },\n\n /**\n * Triggered when the offset of the editor is changed\n * @private\n */\n updatePosition() {\n const un = 'px';\n const canvas = config.em.get('Canvas');\n const { style } = toolbar;\n const pos = canvas.getTargetToElementFixed(lastEl, toolbar, {\n event: 'rteToolbarPosUpdate'\n });\n\n style.top = pos.top + un;\n style.left = 0 + un;\n },\n\n /**\n * Enable rich text editor on the element\n * @param {View} view Component view\n * @param {Object} rte The instance of already defined RTE\n * @private\n * */\n enable(view, rte) {\n lastEl = view.el;\n const canvas = config.em.get('Canvas');\n const em = config.em;\n const el = view.getChildrenContainer();\n const customRte = this.customRte;\n lastElPos = canvas.getElementPos(lastEl);\n\n toolbar.style.display = '';\n rte = customRte ? customRte.enable(el, rte) : this.initRte(el).enable();\n\n if (em) {\n setTimeout(this.updatePosition.bind(this), 0);\n const event =\n 'change:canvasOffset canvasScroll frame:scroll component:update';\n em.off(event, this.updatePosition, this);\n em.on(event, this.updatePosition, this);\n em.trigger('rte:enable', view, rte);\n }\n\n return rte;\n },\n\n /**\n * Unbind rich text editor from the element\n * @param {View} view\n * @param {Object} rte The instance of already defined RTE\n * @private\n * */\n disable(view, rte) {\n const em = config.em;\n const customRte = this.customRte;\n var el = view.getChildrenContainer();\n\n if (customRte) {\n customRte.disable(el, rte);\n } else {\n rte && rte.disable();\n }\n\n hideToolbar();\n em && em.trigger('rte:disable', view, rte);\n }\n };\n};\n","export default {\n // Style prefix\n stylePrefix: 'css-',\n\n // Custom CSS string to render on top\n staticRules: '',\n\n // Default CSS style\n rules: []\n};\n","/**\n * This module contains and manage CSS rules for the template inside the canvas.\n * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/css_composer/config/config.js)\n * ```js\n * const editor = grapesjs.init({\n * cssComposer: {\n * // options\n * }\n * })\n * ```\n *\n * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance\n *\n * ```js\n * const cssComposer = editor.CssComposer;\n * ```\n *\n * * [load](#load)\n * * [store](#store)\n * * [add](#add)\n * * [get](#get)\n * * [getAll](#getall)\n * * [clear](#clear)\n * * [setRule](#setrule)\n * * [getRule](#getrule)\n *\n * @module CssComposer\n */\n\nimport { isArray } from 'underscore';\nimport defaults from './config/config';\nimport CssRule from './model/CssRule';\nimport CssRules from './model/CssRules';\nimport CssRulesView from './view/CssRulesView';\nimport Selectors from 'selector_manager/model/Selectors';\nimport Selector from 'selector_manager/model/Selector';\n\nexport default () => {\n let em;\n var c = {};\n var rules, rulesView;\n\n return {\n Selectors,\n\n /**\n * Name of the module\n * @type {String}\n * @private\n */\n name: 'CssComposer',\n\n getConfig() {\n return c;\n },\n\n /**\n * Mandatory for the storage manager\n * @type {String}\n * @private\n */\n storageKey() {\n var keys = [];\n var smc = (c.stm && c.stm.getConfig()) || {};\n if (smc.storeCss) keys.push('css');\n if (smc.storeStyles) keys.push('styles');\n return keys;\n },\n\n /**\n * Initializes module. Automatically called with a new instance of the editor\n * @param {Object} config Configurations\n * @private\n */\n init(config) {\n c = config || {};\n for (var name in defaults) {\n if (!(name in c)) c[name] = defaults[name];\n }\n\n var ppfx = c.pStylePrefix;\n if (ppfx) c.stylePrefix = ppfx + c.stylePrefix;\n\n var elStyle = (c.em && c.em.config.style) || '';\n c.rules = elStyle || c.rules;\n\n em = c.em;\n rules = new CssRules([], c);\n rulesView = new CssRulesView({\n collection: rules,\n config: c\n });\n return this;\n },\n\n /**\n * On load callback\n * @private\n */\n onLoad() {\n rules.add(c.rules);\n },\n\n /**\n * Do stuff after load\n * @param {Editor} em\n * @private\n */\n postLoad(em) {\n const ev = 'add remove';\n const rules = this.getAll();\n const um = em.get('UndoManager');\n um && um.add(rules);\n em.stopListening(rules, ev, this.handleChange);\n em.listenTo(rules, ev, this.handleChange);\n rules.each(rule => this.handleChange(rule, null, { avoidStore: 1 }));\n },\n\n /**\n * Handle rule changes\n * @private\n */\n handleChange(model, val, opts = {}) {\n const ev = 'change:style';\n const um = em.get('UndoManager');\n um && um.add(model);\n const handleUpdates = em.handleUpdates.bind(em);\n em.stopListening(model, ev, handleUpdates);\n em.listenTo(model, ev, handleUpdates);\n !opts.avoidStore && handleUpdates('', '', opts);\n },\n\n /**\n * Load data from the passed object, if the object is empty will try to fetch them\n * autonomously from the storage manager.\n * The fetched data will be added to the collection\n * @param {Object} data Object of data to load\n * @return {Object} Loaded rules\n */\n load(data) {\n var d = data || '';\n\n if (!d && c.stm) {\n d = c.em.getCacheLoad();\n }\n\n var obj = d.styles || '';\n\n if (d.styles) {\n try {\n obj = JSON.parse(d.styles);\n } catch (err) {}\n } else if (d.css) {\n obj = c.em.get('Parser').parseCss(d.css);\n }\n\n if (isArray(obj)) {\n obj.length && rules.reset(obj);\n } else if (obj) {\n rules.reset(obj);\n }\n\n return obj;\n },\n\n /**\n * Store data to the selected storage\n * @param {Boolean} noStore If true, won't store\n * @return {Object} Data to store\n */\n store(noStore) {\n if (!c.stm) return;\n var obj = {};\n var keys = this.storageKey();\n if (keys.indexOf('css') >= 0) obj.css = c.em.getCss();\n if (keys.indexOf('styles') >= 0) obj.styles = JSON.stringify(rules);\n if (!noStore) c.stm.store(obj);\n return obj;\n },\n\n /**\n * Add new rule to the collection, if not yet exists with the same selectors\n * @param {Array} selectors Array of selectors\n * @param {String} state Css rule state\n * @param {String} width For which device this style is oriented\n * @param {Object} props Other props for the rule\n * @param {Object} opts Options for the add of new rule\n * @return {Model}\n * @example\n * var sm = editor.SelectorManager;\n * var sel1 = sm.add('myClass1');\n * var sel2 = sm.add('myClass2');\n * var rule = cssComposer.add([sel1, sel2], 'hover');\n * rule.set('style', {\n * width: '100px',\n * color: '#fff',\n * });\n * */\n add(selectors, state, width, opts = {}, addOpts = {}) {\n var s = state || '';\n var w = width || '';\n var opt = { ...opts };\n var rule = this.get(selectors, s, w, opt);\n\n // do not create rules that were found before\n // unless this is a single at-rule, for which multiple declarations\n // make sense (e.g. multiple `@font-type`s)\n if (rule && rule.config && !rule.config.singleAtRule) {\n return rule;\n } else {\n opt.state = s;\n opt.mediaText = w;\n opt.selectors = [];\n rule = new CssRule(opt, c);\n rule.get('selectors').add(selectors, addOpts);\n rules.add(rule, addOpts);\n return rule;\n }\n },\n\n /**\n * Get the rule\n * @param {Array} selectors Array of selectors\n * @param {String} state Css rule state\n * @param {String} width For which device this style is oriented\n * @param {Object} ruleProps Other rule props\n * @return {Model|null}\n * @example\n * var sm = editor.SelectorManager;\n * var sel1 = sm.add('myClass1');\n * var sel2 = sm.add('myClass2');\n * var rule = cssComposer.get([sel1, sel2], 'hover');\n * // Update the style\n * rule.set('style', {\n * width: '300px',\n * color: '#000',\n * });\n * */\n get(selectors, state, width, ruleProps) {\n var rule = null;\n rules.each(m => {\n if (rule) return;\n if (m.compare(selectors, state, width, ruleProps)) rule = m;\n });\n return rule;\n },\n\n /**\n * Get the collection of rules\n * @return {Collection}\n * */\n getAll() {\n return rules;\n },\n\n /**\n * Remove all rules\n * @return {this}\n */\n clear(opts = {}) {\n this.getAll().reset(null, opts);\n return this;\n },\n\n /**\n * Add a raw collection of rule objects\n * This method overrides styles, in case, of already defined rule\n * @param {Array} data Array of rule objects, eg . [{selectors: ['class1'], style: {....}}, ..]\n * @param {Object} opts Options\n * @return {Array}\n * @private\n */\n addCollection(data, opts = {}) {\n var result = [];\n var d = data instanceof Array ? data : [data];\n\n for (var i = 0, l = d.length; i < l; i++) {\n var rule = d[i] || {};\n if (!rule.selectors) continue;\n var sm = c.em && c.em.get('SelectorManager');\n if (!sm) console.warn('Selector Manager not found');\n var sl = rule.selectors;\n var sels = sl instanceof Array ? sl : [sl];\n var newSels = [];\n\n for (var j = 0, le = sels.length; j < le; j++) {\n var selec = sm.add(sels[j]);\n newSels.push(selec);\n }\n\n var modelExists = this.get(newSels, rule.state, rule.mediaText, rule);\n var model = this.add(newSels, rule.state, rule.mediaText, rule);\n var updateStyle = !modelExists || !opts.avoidUpdateStyle;\n const style = rule.style || {};\n\n if (updateStyle) {\n let styleUpdate = opts.extend\n ? { ...model.get('style'), ...style }\n : style;\n model.set('style', styleUpdate);\n }\n\n result.push(model);\n }\n\n return result;\n },\n\n /**\n * Add/update the CSS rule with a generic selector\n * @param {string} selectors Selector, eg. '.myclass'\n * @param {Object} style Style properties and values\n * @param {Object} [opts={}] Additional properties\n * @param {String} [opts.atRuleType=''] At-rule type, eg. 'media'\n * @param {String} [opts.atRuleParams=''] At-rule parameters, eg. '(min-width: 500px)'\n * @return {CssRule} The new/updated rule\n * @example\n * // Simple class-based rule\n * const rule = cc.setRule('.class1.class2', { color: 'red' });\n * console.log(rule.toCSS()) // output: .class1.class2 { color: red }\n * // With state and other mixed selector\n * const rule = cc.setRule('.class1.class2:hover, div#myid', { color: 'red' });\n * // output: .class1.class2:hover, div#myid { color: red }\n * // With media\n * const rule = cc.setRule('.class1:hover', { color: 'red' }, {\n * atRuleType: 'media',\n * atRuleParams: '(min-width: 500px)',\n * });\n * // output: @media (min-width: 500px) { .class1:hover { color: red } }\n */\n setRule(selectors, style, opts = {}) {\n const { atRuleType, atRuleParams } = opts;\n const node = em.get('Parser').parserCss.checkNode({\n selectors,\n style\n })[0];\n const { state, selectorsAdd } = node;\n const sm = em.get('SelectorManager');\n const selector = sm.add(node.selectors);\n const rule = this.add(selector, state, atRuleParams, {\n selectorsAdd,\n atRule: atRuleType\n });\n rule.setStyle(style, opts);\n return rule;\n },\n\n /**\n * Get the CSS rule by a generic selector\n * @param {string} selectors Selector, eg. '.myclass:hover'\n * @param {String} [opts.atRuleType=''] At-rule type, eg. 'media'\n * @param {String} [opts.atRuleParams=''] At-rule parameters, eg. '(min-width: 500px)'\n * @return {CssRule}\n * @example\n * const rule = cc.getRule('.myclass1:hover');\n * const rule2 = cc.getRule('.myclass1:hover, div#myid');\n * const rule3 = cc.getRule('.myclass1', {\n * atRuleType: 'media',\n * atRuleParams: '(min-width: 500px)',\n * });\n */\n getRule(selectors, opts = {}) {\n const sm = em.get('SelectorManager');\n const node = em.get('Parser').parserCss.checkNode({ selectors })[0];\n const selector = sm.get(node.selectors);\n const { state, selectorsAdd } = node;\n const { atRuleType, atRuleParams } = opts;\n return (\n selector &&\n this.get(selector, state, atRuleParams, {\n selectorsAdd,\n atRule: atRuleType\n })\n );\n },\n\n /**\n * Find rules, in different states (eg. like `:hover`) and media queries, matching the selector.\n * @param {string} selector Selector, eg. '.myclass'\n * @returns {Array}\n * @example\n * // Common scenario, take all the component specific rules\n * const id = someComponent.getId();\n * const rules = cc.getRules(`#${id}`);\n * console.log(rules.map(rule => rule.toCSS()))\n */\n getRules(selector) {\n const rules = this.getAll();\n const result = rules.filter(\n r => r.getSelectors().getFullString() === selector\n );\n return result;\n },\n\n /**\n * Add/update the CSS rule with id selector\n * @param {string} name Id selector name, eg. 'my-id'\n * @param {Object} style Style properties and values\n * @param {Object} [opts={}] Custom options, like `state` and `mediaText`\n * @return {CssRule} The new/updated rule\n * @private\n * @example\n * const rule = cc.setIdRule('myid', { color: 'red' });\n * const ruleHover = cc.setIdRule('myid', { color: 'blue' }, { state: 'hover' });\n * // This will add current CSS:\n * // #myid { color: red }\n * // #myid:hover { color: blue }\n */\n setIdRule(name, style = {}, opts = {}) {\n const { addOpts = {} } = opts;\n const state = opts.state || '';\n const media = opts.mediaText || em.getCurrentMedia();\n const sm = em.get('SelectorManager');\n const selector = sm.add({ name, type: Selector.TYPE_ID }, addOpts);\n const rule = this.add(selector, state, media, {}, addOpts);\n rule.setStyle(style, { ...opts, ...addOpts });\n return rule;\n },\n\n /**\n * Get the CSS rule by id selector\n * @param {string} name Id selector name, eg. 'my-id'\n * @param {Object} [opts={}] Custom options, like `state` and `mediaText`\n * @return {CssRule}\n * @private\n * @example\n * const rule = cc.getIdRule('myid');\n * const ruleHover = cc.setIdRule('myid', { state: 'hover' });\n */\n getIdRule(name, opts = {}) {\n const state = opts.state || '';\n const media = opts.mediaText || em.getCurrentMedia();\n const selector = em.get('SelectorManager').get(name, Selector.TYPE_ID);\n return selector && this.get(selector, state, media);\n },\n\n /**\n * Add/update the CSS rule with class selector\n * @param {string} name Class selector name, eg. 'my-class'\n * @param {Object} style Style properties and values\n * @param {Object} [opts={}] Custom options, like `state` and `mediaText`\n * @return {CssRule} The new/updated rule\n * @private\n * @example\n * const rule = cc.setClassRule('myclass', { color: 'red' });\n * const ruleHover = cc.setClassRule('myclass', { color: 'blue' }, { state: 'hover' });\n * // This will add current CSS:\n * // .myclass { color: red }\n * // .myclass:hover { color: blue }\n */\n setClassRule(name, style = {}, opts = {}) {\n const state = opts.state || '';\n const media = opts.mediaText || em.getCurrentMedia();\n const sm = em.get('SelectorManager');\n const selector = sm.add({ name, type: Selector.TYPE_CLASS });\n const rule = this.add(selector, state, media);\n rule.setStyle(style, opts);\n return rule;\n },\n\n /**\n * Get the CSS rule by class selector\n * @param {string} name Class selector name, eg. 'my-class'\n * @param {Object} [opts={}] Custom options, like `state` and `mediaText`\n * @return {CssRule}\n * @private\n * @example\n * const rule = cc.getClassRule('myclass');\n * const ruleHover = cc.getClassRule('myclass', { state: 'hover' });\n */\n getClassRule(name, opts = {}) {\n const state = opts.state || '';\n const media = opts.mediaText || em.getCurrentMedia();\n const selector = em.get('SelectorManager').get(name, Selector.TYPE_CLASS);\n return selector && this.get(selector, state, media);\n },\n\n /**\n * Render the block of CSS rules\n * @return {HTMLElement}\n * @private\n */\n render() {\n return rulesView.render().el;\n },\n\n destroy() {\n rules.reset();\n rules.stopListening();\n rulesView.remove();\n [em, rules, rulesView].forEach(i => (i = null));\n c = {};\n }\n };\n};\n","export default {\n stylePrefix: 'com-',\n\n // Default array of commands\n defaults: [],\n\n // If true, stateful commands (with `run` and `stop` methods) can't be runned multiple times.\n // So, if the command is already active, running it again will not execute the `run` method\n strict: 1\n};\n","/**\n * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/commands/config/config.js)\n * ```js\n * const editor = grapesjs.init({\n * commands: {\n * // options\n * }\n * })\n * ```\n *\n * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance\n *\n * ```js\n * const commands = editor.Commands;\n * ```\n *\n * * [add](#add)\n * * [get](#get)\n * * [getAll](#getall)\n * * [extend](#extend)\n * * [has](#has)\n * * [run](#run)\n * * [stop](#stop)\n * * [isActive](#isactive)\n * * [getActive](#getactive)\n *\n * @module Commands\n */\n\nimport { isFunction, includes } from 'underscore';\nimport CommandAbstract from './view/CommandAbstract';\nimport defaults from './config/config';\nimport { eventDrag } from 'dom_components/model/Component';\n\nconst commandsDef = [\n ['preview', 'Preview', 'preview'],\n ['resize', 'Resize', 'resize'],\n ['fullscreen', 'Fullscreen', 'fullscreen'],\n ['copy', 'CopyComponent'],\n ['paste', 'PasteComponent'],\n ['canvas-move', 'CanvasMove'],\n ['canvas-clear', 'CanvasClear'],\n ['open-code', 'ExportTemplate', 'export-template'],\n ['open-layers', 'OpenLayers', 'open-layers'],\n ['open-styles', 'OpenStyleManager', 'open-sm'],\n ['open-traits', 'OpenTraitManager', 'open-tm'],\n ['open-blocks', 'OpenBlocks', 'open-blocks'],\n ['open-assets', 'OpenAssets', 'open-assets'],\n ['component-select', 'SelectComponent', 'select-comp'],\n ['component-outline', 'SwitchVisibility', 'sw-visibility'],\n ['component-offset', 'ShowOffset', 'show-offset'],\n ['component-move', 'MoveComponent', 'move-comp'],\n ['component-next', 'ComponentNext'],\n ['component-prev', 'ComponentPrev'],\n ['component-enter', 'ComponentEnter'],\n ['component-exit', 'ComponentExit', 'select-parent'],\n ['component-delete', 'ComponentDelete'],\n ['component-style-clear', 'ComponentStyleClear'],\n ['component-drag', 'ComponentDrag']\n];\n\nexport default () => {\n let em;\n let c = {};\n const commands = {};\n const defaultCommands = {};\n const active = {};\n\n // Need it here as it would be used below\n const add = function(id, obj) {\n if (isFunction(obj)) obj = { run: obj };\n if (!obj.stop) obj.noStop = 1;\n delete obj.initialize;\n obj.id = id;\n commands[id] = CommandAbstract.extend(obj);\n return this;\n };\n\n return {\n CommandAbstract,\n\n /**\n * Name of the module\n * @type {String}\n * @private\n */\n name: 'Commands',\n\n /**\n * Initialize module. Automatically called with a new instance of the editor\n * @param {Object} config Configurations\n * @private\n */\n init(config = {}) {\n c = {\n ...defaults,\n ...config\n };\n em = c.em;\n const ppfx = c.pStylePrefix;\n if (ppfx) c.stylePrefix = ppfx + c.stylePrefix;\n\n // Load commands passed via configuration\n Object.keys(c.defaults).forEach(k => {\n const obj = c.defaults[k];\n if (obj.id) this.add(obj.id, obj);\n });\n\n defaultCommands['tlb-delete'] = {\n run(ed) {\n return ed.runCommand('core:component-delete');\n }\n };\n\n defaultCommands['tlb-clone'] = {\n run(ed) {\n ed.runCommand('core:copy');\n ed.runCommand('core:paste');\n }\n };\n\n defaultCommands['tlb-move'] = {\n run(ed, sender, opts = {}) {\n let dragger;\n const em = ed.getModel();\n const event = opts && opts.event;\n const { target } = opts;\n const sel = target || ed.getSelected();\n const selAll = target ? [target] : [...ed.getSelectedAll()];\n const nativeDrag = event && event.type == 'dragstart';\n const defComOptions = { preserveSelected: 1 };\n const modes = ['absolute', 'translate'];\n\n if (!sel || !sel.get('draggable')) {\n return em.logWarning('The element is not draggable');\n }\n\n const mode = sel.get('dmode') || em.get('dmode');\n const hideTlb = () => em.stopDefault(defComOptions);\n const altMode = includes(modes, mode);\n selAll.forEach(sel => sel.trigger('disable'));\n\n // Without setTimeout the ghost image disappears\n nativeDrag ? setTimeout(hideTlb, 0) : hideTlb();\n\n const onStart = data => {\n em.trigger(`${eventDrag}:start`, data);\n };\n const onDrag = data => {\n em.trigger(eventDrag, data);\n };\n const onEnd = (e, opts, data) => {\n selAll.forEach(sel => sel.set('status', 'selected'));\n ed.select(selAll);\n sel.emitUpdate();\n em.trigger(`${eventDrag}:end`, data);\n\n // Defer selectComponent in order to prevent canvas \"freeze\" #2692\n setTimeout(() => em.runDefault(defComOptions));\n\n // Dirty patch to prevent parent selection on drop\n (altMode || data.cancelled) && em.set('_cmpDrag', 1);\n };\n\n if (altMode) {\n // TODO move grabbing func in editor/canvas from the Sorter\n dragger = ed.runCommand('core:component-drag', {\n guidesInfo: 1,\n mode,\n target: sel,\n onStart,\n onDrag,\n onEnd,\n event\n });\n } else {\n if (nativeDrag) {\n event.dataTransfer.setDragImage(sel.view.el, 0, 0);\n //sel.set('status', 'freezed');\n }\n\n const cmdMove = ed.Commands.get('move-comp');\n cmdMove.onStart = onStart;\n cmdMove.onDrag = onDrag;\n cmdMove.onEndMoveFromModel = onEnd;\n cmdMove.initSorterFromModels(selAll);\n }\n\n selAll.forEach(sel => sel.set('status', 'freezed-selected'));\n }\n };\n\n // Core commands\n defaultCommands['core:undo'] = e => e.UndoManager.undo();\n defaultCommands['core:redo'] = e => e.UndoManager.redo();\n commandsDef.forEach(item => {\n const oldCmd = item[2];\n const cmd = require(`./view/${item[1]}`).default;\n const cmdName = `core:${item[0]}`;\n defaultCommands[cmdName] = cmd;\n if (oldCmd) {\n defaultCommands[oldCmd] = cmd;\n // Propogate old commands (can be removed once we stop to call old commands)\n ['run', 'stop'].forEach(name => {\n em.on(`${name}:${oldCmd}`, (...args) =>\n em.trigger(`${name}:${cmdName}`, ...args)\n );\n });\n }\n });\n\n if (c.em) c.model = c.em.get('Canvas');\n\n this.loadDefaultCommands();\n\n return this;\n },\n\n /**\n * Add new command to the collection\n * @param\t{string} id Command's ID\n * @param\t{Object|Function} command Object representing your command,\n * By passing just a function it's intended as a stateless command\n * (just like passing an object with only `run` method).\n * @return {this}\n * @example\n * commands.add('myCommand', {\n * \trun(editor, sender) {\n * \t\talert('Hello world!');\n * \t},\n * \tstop(editor, sender) {\n * \t},\n * });\n * // As a function\n * commands.add('myCommand2', editor => { ... });\n * */\n add,\n\n /**\n * Get command by ID\n * @param\t{string}\tid Command's ID\n * @return {Object} Object representing the command\n * @example\n * var myCommand = commands.get('myCommand');\n * myCommand.run();\n * */\n get(id) {\n let el = commands[id];\n\n if (isFunction(el)) {\n el = new el(c);\n commands[id] = el;\n } else if (!el) {\n em.logWarning(`'${id}' command not found`);\n }\n\n return el;\n },\n\n /**\n * Extend the command. The command to extend should be defined as an object\n * @param\t{string}\tid Command's ID\n * @param {Object} Object with the new command functions\n * @returns {this}\n * @example\n * commands.extend('old-command', {\n * someInnerFunction() {\n * // ...\n * }\n * });\n * */\n extend(id, cmd = {}) {\n const command = this.get(id);\n if (command) {\n const cmdObj = {\n ...command.constructor.prototype,\n ...cmd\n };\n this.add(id, cmdObj);\n // Extend also old name commands if exist\n const oldCmd = commandsDef.filter(\n cmd => `core:${cmd[0]}` === id && cmd[2]\n )[0];\n oldCmd && this.add(oldCmd[2], cmdObj);\n }\n return this;\n },\n\n /**\n * Check if command exists\n * @param\t{string}\tid Command's ID\n * @return {Boolean}\n * */\n has(id) {\n return !!commands[id];\n },\n\n /**\n * Get an object containing all the commands\n * @return {Object}\n */\n getAll() {\n return commands;\n },\n\n /**\n * Execute the command\n * @param {String} id Command ID\n * @param {Object} [options={}] Options\n * @return {*} The return is defined by the command\n * @example\n * commands.run('myCommand', { someOption: 1 });\n */\n run(id, options = {}) {\n return this.runCommand(this.get(id), options);\n },\n\n /**\n * Stop the command\n * @param {String} id Command ID\n * @param {Object} [options={}] Options\n * @return {*} The return is defined by the command\n * @example\n * commands.stop('myCommand', { someOption: 1 });\n */\n stop(id, options = {}) {\n return this.stopCommand(this.get(id), options);\n },\n\n /**\n * Check if the command is active. You activate commands with `run`\n * and disable them with `stop`. If the command was created without `stop`\n * method it can't be registered as active\n * @param {String} id Command id\n * @return {Boolean}\n * @example\n * const cId = 'some-command';\n * commands.run(cId);\n * commands.isActive(cId);\n * // -> true\n * commands.stop(cId);\n * commands.isActive(cId);\n * // -> false\n */\n isActive(id) {\n return this.getActive().hasOwnProperty(id);\n },\n\n /**\n * Get all active commands\n * @return {Object}\n * @example\n * console.log(commands.getActive());\n * // -> { someCommand: itsLastReturn, anotherOne: ... };\n */\n getActive() {\n return active;\n },\n\n /**\n * Load default commands\n * @return {this}\n * @private\n * */\n loadDefaultCommands() {\n for (var id in defaultCommands) {\n this.add(id, defaultCommands[id]);\n }\n\n return this;\n },\n\n /**\n * Run command via its object\n * @param {Object} command\n * @param {Object} options\n * @return {*} Result of the command\n * @private\n */\n runCommand(command, options = {}) {\n let result;\n\n if (command && command.run) {\n const id = command.id;\n const editor = em.get('Editor');\n\n if (!this.isActive(id) || options.force || !c.strict) {\n result = command.callRun(editor, options);\n if (id && command.stop && !command.noStop && !options.abort) {\n active[id] = result;\n }\n }\n }\n\n return result;\n },\n\n /**\n * Stop the command\n * @param {Object} command\n * @param {Object} options\n * @return {*} Result of the command\n * @private\n */\n stopCommand(command, options = {}) {\n let result;\n\n if (command && command.run) {\n const id = command.id;\n const editor = em.get('Editor');\n\n if (this.isActive(id) || options.force || !c.strict) {\n if (id) delete active[id];\n result = command.callStop(editor, options);\n }\n }\n\n return result;\n },\n\n /**\n * Create anonymous Command instance\n * @param {Object} command Command object\n * @return {Command}\n * @private\n * */\n create(command) {\n if (!command.stop) command.noStop = 1;\n const cmd = CommandAbstract.extend(command);\n return new cmd(c);\n },\n\n destroy() {\n [em, c, commands, defaultCommands, active].forEach(i => (i = {}));\n }\n };\n};\n","!function(t,e){\"object\"==typeof exports&&\"object\"==typeof module?module.exports=e():\"function\"==typeof define&&define.amd?define([],e):\"object\"==typeof exports?exports[\"grapesjs-mjml\"]=e():t[\"grapesjs-mjml\"]=e()}(window,(function(){return function(t){var e={};function r(n){if(e[n])return e[n].exports;var i=e[n]={i:n,l:!1,exports:{}};return t[n].call(i.exports,i,i.exports,r),i.l=!0,i.exports}return r.m=t,r.c=e,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){\"undefined\"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:\"Module\"}),Object.defineProperty(t,\"__esModule\",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&\"object\"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,\"default\",{enumerable:!0,value:t}),2&e&&\"string\"!=typeof t)for(var i in t)r.d(n,i,function(e){return t[e]}.bind(null,i));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,\"a\",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p=\"\",r(r.s=6)}([function(t,e,r){\"use strict\";r.r(e),e.default={\"grapesjs-mjml\":{category:\"\",panels:{buttons:{undo:\"Undo\",redo:\"Redo\",desktop:\"Desktop\",tablet:\"Tablet\",mobile:\"Mobile\",import:\"Import MJML\"},import:{title:\"Import MJML\",button:\"Import\",label:\"\"},export:{title:\"Export MJML\"}},components:{names:{body:\"Body\",button:\"Button\",column:\"Column\",oneColumn:\"1 Column\",twoColumn:\"2 Columns\",threeColumn:\"3 Columns\",divider:\"Divider\",group:\"Group\",hero:\"Hero\",image:\"Image\",navBar:\"Navbar\",navLink:\"Navbar Link\",section:\"Section\",socialGroup:\"Group Social\",socialElement:\"Social Element\",spacer:\"Spacer\",text:\"Text\",wrapper:\"Wrapper\",raw:\"Raw\"}}}}},function(t,e,r){var n;window,n=function(){return e=[function(t){t.exports=function(t){return t&&t.__esModule?t:{default:t}}},function(t){\"function\"==typeof Object.create?t.exports=function(t,e){e&&(t.super_=e,t.prototype=Object.create(e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}))}:t.exports=function(t,e){var r;e&&(t.super_=e,(r=function(){}).prototype=e.prototype,t.prototype=new r,t.prototype.constructor=t)}},function(t,e,r){var n=r(6),i=n.Buffer;function o(t,e){for(var r in t)e[r]=t[r]}function a(t,e,r){return i(t,e,r)}i.from&&i.alloc&&i.allocUnsafe&&i.allocUnsafeSlow?t.exports=n:(o(n,e),e.Buffer=a),a.prototype=Object.create(i.prototype),o(i,a),a.from=function(t,e,r){if(\"number\"==typeof t)throw new TypeError(\"Argument must not be a number\");return i(t,e,r)},a.alloc=function(t,e,r){if(\"number\"!=typeof t)throw new TypeError(\"Argument must be a number\");return t=i(t),void 0!==e?\"string\"==typeof r?t.fill(e,r):t.fill(e):t.fill(0),t},a.allocUnsafe=function(t){if(\"number\"!=typeof t)throw new TypeError(\"Argument must be a number\");return i(t)},a.allocUnsafeSlow=function(t){if(\"number\"!=typeof t)throw new TypeError(\"Argument must be a number\");return n.SlowBuffer(t)}},function(t){t.exports=function(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}},function(t,e,r){\"use strict\";(function(t){function n(t){return(n=\"function\"==typeof Symbol&&\"symbol\"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&\"function\"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?\"symbol\":typeof t})(t)}function i(t,e){var r,n=Object.keys(t);return Object.getOwnPropertySymbols&&(r=Object.getOwnPropertySymbols(t),e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)),n}function o(t){for(var e=1;e=a())throw new RangeError(\"Attempt to allocate Buffer larger than maximum size: 0x\"+a().toString(16)+\" bytes\");return 0|t}function d(t,e){if(u.isBuffer(t))return t.length;if(\"undefined\"!=typeof ArrayBuffer&&\"function\"==typeof ArrayBuffer.isView&&(ArrayBuffer.isView(t)||t instanceof ArrayBuffer))return t.byteLength;\"string\"!=typeof t&&(t=\"\"+t);var r=t.length;if(0===r)return 0;for(var n=!1;;)switch(e){case\"ascii\":case\"latin1\":case\"binary\":return r;case\"utf8\":case\"utf-8\":case void 0:return M(t).length;case\"ucs2\":case\"ucs-2\":case\"utf16le\":case\"utf-16le\":return 2*r;case\"hex\":return r>>>1;case\"base64\":return C(t).length;default:if(n)return M(t).length;e=(\"\"+e).toLowerCase(),n=!0}}function m(t,e,r){var n=t[e];t[e]=t[r],t[r]=n}function g(t,e,r,n,i){if(0===t.length)return-1;if(\"string\"==typeof r?(n=r,r=0):2147483647=t.length){if(i)return-1;r=t.length-1}else if(r<0){if(!i)return-1;r=0}if(\"string\"==typeof e&&(e=u.from(e,n)),u.isBuffer(e))return 0===e.length?-1:b(t,e,r,n,i);if(\"number\"==typeof e)return e&=255,u.TYPED_ARRAY_SUPPORT&&\"function\"==typeof Uint8Array.prototype.indexOf?(i?Uint8Array.prototype.indexOf:Uint8Array.prototype.lastIndexOf).call(t,e,r):b(t,[e],r,n,i);throw new TypeError(\"val must be string, number or Buffer\")}function b(t,e,r,n,i){var o=1,a=t.length,s=e.length;if(void 0!==n&&(\"ucs2\"===(n=String(n).toLowerCase())||\"ucs-2\"===n||\"utf16le\"===n||\"utf-16le\"===n)){if(t.length<2||e.length<2)return-1;a/=o=2,s/=2,r/=2}function u(t,e){return 1===o?t[e]:t.readUInt16BE(e*o)}if(i)for(var c=-1,l=r;l>>10&1023|55296),l=56320|1023&l),n.push(l),i+=f}return function(t){var e=t.length;if(e<=v)return String.fromCharCode.apply(String,t);for(var r=\"\",n=0;nthis.length)return\"\";if((void 0===r||r>this.length)&&(r=this.length),r<=0)return\"\";if((r>>>=0)<=(e>>>=0))return\"\";for(t=t||\"utf8\";;)switch(t){case\"hex\":return function(t,e,r){var n=t.length;(!e||e<0)&&(e=0),(!r||r<0||nr&&(t+=\" ... \")),\"\"},u.prototype.compare=function(t,e,r,n,i){if(!u.isBuffer(t))throw new TypeError(\"Argument must be a Buffer\");if(void 0===e&&(e=0),void 0===r&&(r=t?t.length:0),void 0===n&&(n=0),void 0===i&&(i=this.length),e<0||r>t.length||n<0||i>this.length)throw new RangeError(\"out of range index\");if(i<=n&&r<=e)return 0;if(i<=n)return-1;if(r<=e)return 1;if(this===t)return 0;for(var o=(i>>>=0)-(n>>>=0),a=(r>>>=0)-(e>>>=0),s=Math.min(o,a),c=this.slice(n,i),l=t.slice(e,r),f=0;fthis.length)throw new RangeError(\"Attempt to write outside buffer bounds\");n=n||\"utf8\";for(var o=!1;;)switch(n){case\"hex\":return function(t,e,r,n){r=Number(r)||0;var i=t.length-r;if((!n||i<(n=Number(n)))&&(n=i),(i=e.length)%2!=0)throw new TypeError(\"Invalid hex string\");i/2>8,n%=256,i.push(n),i.push(r);return i}(e,t.length-r),t,r,n)}(this,t,e,r);default:if(o)throw new TypeError(\"Unknown encoding: \"+n);n=(\"\"+n).toLowerCase(),o=!0}},u.prototype.toJSON=function(){return{type:\"Buffer\",data:Array.prototype.slice.call(this._arr||this,0)}};var v=4096;function w(t,e,r){if(t%1!=0||t<0)throw new RangeError(\"offset is not uint\");if(rt.length)throw new RangeError(\"Index out of range\")}function T(t,e,r,n){e<0&&(e=65535+e+1);for(var i=0,o=Math.min(t.length-r,2);i>>8*(n?i:1-i)}function A(t,e,r,n){e<0&&(e=4294967295+e+1);for(var i=0,o=Math.min(t.length-r,4);i>>8*(n?i:3-i)&255}function x(t,e,r,n){if(r+n>t.length)throw new RangeError(\"Index out of range\");if(r<0)throw new RangeError(\"Index out of range\")}function S(t,e,r,n,o){return o||x(t,0,r,4),i.write(t,e,r,n,23,4),r+4}function O(t,e,r,n,o){return o||x(t,0,r,8),i.write(t,e,r,n,52,8),r+8}u.prototype.slice=function(t,e){var r=this.length;if((t=~~t)<0?(t+=r)<0&&(t=0):r>>8):T(this,t,e,!0),e+2},u.prototype.writeUInt16BE=function(t,e,r){return t=+t,e|=0,r||E(this,t,e,2,65535,0),u.TYPED_ARRAY_SUPPORT?(this[e]=t>>>8,this[e+1]=255&t):T(this,t,e,!1),e+2},u.prototype.writeUInt32LE=function(t,e,r){return t=+t,e|=0,r||E(this,t,e,4,4294967295,0),u.TYPED_ARRAY_SUPPORT?(this[e+3]=t>>>24,this[e+2]=t>>>16,this[e+1]=t>>>8,this[e]=255&t):A(this,t,e,!0),e+4},u.prototype.writeUInt32BE=function(t,e,r){return t=+t,e|=0,r||E(this,t,e,4,4294967295,0),u.TYPED_ARRAY_SUPPORT?(this[e]=t>>>24,this[e+1]=t>>>16,this[e+2]=t>>>8,this[e+3]=255&t):A(this,t,e,!1),e+4},u.prototype.writeIntLE=function(t,e,r,n){t=+t,e|=0,n||E(this,t,e,r,(n=Math.pow(2,8*r-1))-1,-n);var i=0,o=1,a=0;for(this[e]=255&t;++i>0)-a&255;return e+r},u.prototype.writeIntBE=function(t,e,r,n){t=+t,e|=0,n||E(this,t,e,r,(n=Math.pow(2,8*r-1))-1,-n);var i=r-1,o=1,a=0;for(this[e+i]=255&t;0<=--i&&(o*=256);)t<0&&0===a&&0!==this[e+i+1]&&(a=1),this[e+i]=(t/o>>0)-a&255;return e+r},u.prototype.writeInt8=function(t,e,r){return t=+t,e|=0,r||E(this,t,e,1,127,-128),u.TYPED_ARRAY_SUPPORT||(t=Math.floor(t)),t<0&&(t=255+t+1),this[e]=255&t,e+1},u.prototype.writeInt16LE=function(t,e,r){return t=+t,e|=0,r||E(this,t,e,2,32767,-32768),u.TYPED_ARRAY_SUPPORT?(this[e]=255&t,this[e+1]=t>>>8):T(this,t,e,!0),e+2},u.prototype.writeInt16BE=function(t,e,r){return t=+t,e|=0,r||E(this,t,e,2,32767,-32768),u.TYPED_ARRAY_SUPPORT?(this[e]=t>>>8,this[e+1]=255&t):T(this,t,e,!1),e+2},u.prototype.writeInt32LE=function(t,e,r){return t=+t,e|=0,r||E(this,t,e,4,2147483647,-2147483648),u.TYPED_ARRAY_SUPPORT?(this[e]=255&t,this[e+1]=t>>>8,this[e+2]=t>>>16,this[e+3]=t>>>24):A(this,t,e,!0),e+4},u.prototype.writeInt32BE=function(t,e,r){return t=+t,e|=0,r||E(this,t,e,4,2147483647,-2147483648),t<0&&(t=4294967295+t+1),u.TYPED_ARRAY_SUPPORT?(this[e]=t>>>24,this[e+1]=t>>>16,this[e+2]=t>>>8,this[e+3]=255&t):A(this,t,e,!1),e+4},u.prototype.writeFloatLE=function(t,e,r){return S(this,t,e,!0,r)},u.prototype.writeFloatBE=function(t,e,r){return S(this,t,e,!1,r)},u.prototype.writeDoubleLE=function(t,e,r){return O(this,t,e,!0,r)},u.prototype.writeDoubleBE=function(t,e,r){return O(this,t,e,!1,r)},u.prototype.copy=function(t,e,r,n){if(r=r||0,n||0===n||(n=this.length),e>=t.length&&(e=t.length),e=e||0,0=this.length)throw new RangeError(\"sourceStart out of bounds\");if(n<0)throw new RangeError(\"sourceEnd out of bounds\");n>this.length&&(n=this.length),t.length-e>>=0,r=void 0===r?this.length:r>>>0,\"number\"==typeof(t=t||0))for(s=e;s>6|192,63&r|128)}else if(r<65536){if((e-=3)<0)break;o.push(r>>12|224,r>>6&63|128,63&r|128)}else{if(!(r<1114112))throw new Error(\"Invalid code point\");if((e-=4)<0)break;o.push(r>>18|240,r>>12&63|128,r>>6&63|128,63&r|128)}}return o}function C(t){return n.toByteArray(function(t){if((t=function(t){return t.trim?t.trim():t.replace(/^\\s+|\\s+$/g,\"\")}(t).replace(k,\"\")).length<2)return\"\";for(;t.length%4!=0;)t+=\"=\";return t}(t))}function R(t,e,r,n){for(var i=0;i=e.length||i>=t.length);++i)e[i+r]=t[i];return i}}).call(this,r(9))},function(t){t.exports={AT_RULE:\"at-rule\",AT_RULE_BLOCK:\"at-rule-block\",AT_RULE_BLOCK_SCOPE:\"at-rule-block-scope\",COMMENT:\"comment\",NESTED_BLOCK:\"nested-block\",NESTED_BLOCK_SCOPE:\"nested-block-scope\",PROPERTY:\"property\",PROPERTY_BLOCK:\"property-block\",PROPERTY_NAME:\"property-name\",PROPERTY_VALUE:\"property-value\",RAW:\"raw\",RULE:\"rule\",RULE_SCOPE:\"rule-scope\"}},function(t){var e=Array.isArray;t.exports=e},function(t){function e(t){return(e=\"function\"==typeof Symbol&&\"symbol\"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&\"function\"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?\"symbol\":typeof t})(t)}var r=function(){return this}();try{r=r||new Function(\"return this\")()}catch(t){\"object\"===(\"undefined\"==typeof window?\"undefined\":e(window))&&(r=window)}t.exports=r},function(t,e,r){var n=r(169);function i(t,e){t.output.push(\"string\"==typeof e?e:e[1])}function o(){return{output:[],store:i}}t.exports={all:function(t){var e=o();return n.all(e,t),e.output.join(\"\")},body:function(t){var e=o();return n.body(e,t),e.output.join(\"\")},property:function(t,e){var r=o();return n.property(r,t,e,!0),r.output.join(\"\")},rules:function(t){var e=o();return n.rules(e,t),e.output.join(\"\")},value:function(t){var e=o();return n.value(e,t),e.output.join(\"\")}}},function(t,e,r){(function(t){function e(t){return(e=\"function\"==typeof Symbol&&\"symbol\"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&\"function\"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?\"symbol\":typeof t})(t)}!function(t,n){\"use strict\";function i(t,e){if(!t)throw new Error(e||\"Assertion failed\")}function o(t,e){function r(){}t.super_=e,r.prototype=e.prototype,t.prototype=new r,t.prototype.constructor=t}function a(t,e,r){if(a.isBN(t))return t;this.negative=0,this.words=null,this.length=0,(this.red=null)!==t&&(\"le\"!==e&&\"be\"!==e||(r=e,e=10),this._init(t||0,e||10,r||\"be\"))}var s;\"object\"===e(t)?t.exports=a:n.BN=a,(a.BN=a).wordSize=26;try{s=r(779).Buffer}catch(t){}function u(t,e,r){for(var n=0,i=Math.min(t.length,r),o=e;o>>26-s&67108863,26<=(s+=24)&&(s-=26,n++);else if(\"le\"===r)for(n=a=0;a>>26-s&67108863,26<=(s+=24)&&(s-=26,n++);return this.strip()},a.prototype._parseHex=function(t,e){this.length=Math.ceil((t.length-e)/6),this.words=new Array(this.length);for(var r,n=0;n>>26-i&4194303,26<=(i+=24)&&(i-=26,o++);n+6!==e&&(r=u(t,e,n+6),this.words[o]|=r<>>26-i&4194303),this.strip()},a.prototype._parseBase=function(t,e,r){this.words=[0];for(var n=0,i=this.length=1;i<=67108863;i*=e)n++;n--,i=i/e|0;for(var o=t.length-r,a=o%n,s=Math.min(o,o-a)+r,u=0,l=r;l\"};var l=[\"\",\"0\",\"00\",\"000\",\"0000\",\"00000\",\"000000\",\"0000000\",\"00000000\",\"000000000\",\"0000000000\",\"00000000000\",\"000000000000\",\"0000000000000\",\"00000000000000\",\"000000000000000\",\"0000000000000000\",\"00000000000000000\",\"000000000000000000\",\"0000000000000000000\",\"00000000000000000000\",\"000000000000000000000\",\"0000000000000000000000\",\"00000000000000000000000\",\"000000000000000000000000\",\"0000000000000000000000000\"],f=[0,0,25,16,12,11,10,9,8,8,7,7,7,7,6,6,6,6,6,6,6,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5],h=[0,0,33554432,43046721,16777216,48828125,60466176,40353607,16777216,43046721,1e7,19487171,35831808,62748517,7529536,11390625,16777216,24137569,34012224,47045881,64e6,4084101,5153632,6436343,7962624,9765625,11881376,14348907,17210368,20511149,243e5,28629151,33554432,39135393,45435424,52521875,60466176];function p(t,e,r){r.negative=e.negative^t.negative;var n=t.length+e.length|0,i=(n=(r.length=n)-1|0,67108863&(f=(0|t.words[0])*(0|e.words[0]))),o=f/67108864|0;r.words[0]=i;for(var a=1;a>>26,u=67108863&o,c=Math.min(a,e.length-1),l=Math.max(0,a-t.length+1);l<=c;l++){var f,h=a-l|0;s+=(f=(0|t.words[h])*(0|e.words[l])+u)/67108864|0,u=67108863&f}r.words[a]=0|u,o=0|s}return 0!==o?r.words[a]=0|o:r.length--,r.strip()}a.prototype.toString=function(t,e){if(e=0|e||1,16===(t=t||10)||\"hex\"===t){u=\"\";for(var r=0,n=0,o=0;o