")),d(),'draggable'in o&&[o,s].forEach((function(t){t.ondragover=h,t.ondragleave=f,t.ondrop=p}))},render:function(){var t=this.$el,e=this.pfx,n=this.em;return t.html(this.template({title:n&&n.t('assetManager.uploadTitle'),uploadId:this.uploadId,disabled:this.disabled,multiUpload:this.multiUpload,pfx:e})),this.initDrop(),t.attr('class',e+'file-uploader'),this}},{embedAsBase64:function(t,e){var n=this,r=t.dataTransfer?t.dataTransfer.files:t.target.files,i={data:[]};if(FileReader){var o,a=[],s=/^(.+)\/(.+)$/,l=w(r);try{var c=function(){var t=o.value,e=new Promise((function(e,n){var r=new FileReader;r.addEventListener('load',(function(i){var o,a=t.name,l=s.exec(t.type);if('image'===(o=l?l[1]:t.type)){var c={src:r.result,name:a,type:o,height:0,width:0},u=new Image;u.addEventListener('error',(function(t){n(t)})),u.addEventListener('load',(function(){c.height=u.height,c.width=u.width,e(c)})),u.src=c.src}else e(o?{src:r.result,name:a,type:o}:r.result)})),r.addEventListener('error',(function(t){n(t)})),r.addEventListener('abort',(function(t){n('Aborted')})),r.readAsDataURL(t)}));a.push(e)};for(l.s();!(o=l.n()).done;)c()}catch(t){l.e(t)}finally{l.f()}Promise.all(a).then((function(t){i.data=t,n.onUploadResponse(i,e)}),(function(t){n.onUploadError(t)}))}else this.onUploadError(new Error('Unsupported platform, FileReader is not defined'))}});e["default"]=function(){var t,e,n,i={};return{name:'AssetManager',storageKey:'assets',getConfig:function(){return i},init:function(o){var a=this;for(var s in i=o||{},r)s in i||(i[s]=r[s]);var l=i.pStylePrefix,c=i.em;l&&(i.stylePrefix=l+i.stylePrefix),t=new g([]);var u={collection:new g([]),globalCollection:t,config:i};return n=new O(u),u.fu=n,e=new b(u),t.listenTo(t,'add',(function(t){a.getAllVisible().add(t),c&&c.trigger('asset:add',t)})),t.listenTo(t,'remove',(function(t){a.getAllVisible().remove(t),c&&c.trigger('asset:remove',t)})),this},add:function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return void 0===n.at&&(n.at=0),t.add(e,n)},get:function(e){return t.where({src:e})[0]},getAll:function(){return t},getAllVisible:function(){return e.collection},remove:function(t){var e=this.get(t);return this.getAll().remove(e),this},store:function(t){var e={},n=JSON.stringify(this.getAll().toJSON());return e[this.storageKey]=n,!t&&i.stm&&i.stm.store(e),e},load:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=this.storageKey,n=t[e]||[];if('string'==typeof n)try{n=JSON.parse(t[e])}catch(t){}return n&&n.length&&this.getAll().reset(n),n},getContainer:function(){return e.el},getAssetsEl:function(){return e.el.querySelector('[data-el=assets]')},render:function(t){var n=t||this.getAll().models;return e.rendered||e.render(),e.collection.reset(n),this.getContainer()},addType:function(t,e){this.getAll().addType(t,e)},getType:function(t){return this.getAll().getType(t)},getTypes:function(){return this.getAll().getTypes()},AssetsView:function(){return e},FileUploader:function(){return n},onLoad:function(){this.getAll().reset(i.assets)},postRender:function(t){i.dropzone&&n.initDropzone(t)},setTarget:function(t){e.collection.target=t},onSelect:function(t){e.collection.onSelect=t},onClick:function(t){i.onClick=t},onDblClick:function(t){i.onDblClick=t},destroy:function(){t.reset(),n.collection.reset(),n.remove(),e.remove(),[t,e,n].forEach((function(t){return null})),i={}}}}},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||{},l=a.shiftKey,c=Object(s["isArray"])(t),d=c?t:[t],h=this.get('selected'),f=this.getConfig('multipleSelection');c&&this.removeSelected(h.filter((function(t){return!Object(s["contains"])(d,t)}))),d.forEach((function(t){var r=Object(u["g"])(t,o["default"]);if(!r||r.get('selectable')){if(i&&f)return e.toggleSelected(r);if(l&&f){e.clearSelection(e.get('Canvas').getWindow());var a,d,p=r.collection,g=r.index();if(e.getSelectedAll().forEach((function(t){var e=t.collection,n=t.index();e===p&&(ng&&(d=Object(s["isUndefined"])(d)?n:Math.min(d,n)))})),!Object(s["isUndefined"])(a))for(;a!==g;)e.addSelected(p.at(a)),a++;if(!Object(s["isUndefined"])(d))for(;d!==g;)e.addSelected(p.at(d)),d--;return e.addSelected(r)}!c&&e.removeSelected(h.filter((function(t){return t!==r}))),e.addSelected(r,n),r}}))},addSelected:function(t){var e=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=Object(u["g"])(t,o["default"]),i=Object(s["isArray"])(r)?r:[r];i.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"]),i=Object(s["isArray"])(r)?r:[r];i.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(),s=this.get('CodeManager').getCode(a,'html',h(h({exportWrapper:r,wrapperIsBody:i},n),t));return s+=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