`);\n this.getJsContainer().appendChild(view.scriptContainer.get(0));\n }\n\n view.el.id = id;\n view.scriptContainer.html('');\n // In editor, I make use of setTimeout as during the append process of elements\n // those will not be available immediately, therefore 'item' variable\n const script = document.createElement('script');\n const scriptFn = model.getScriptString();\n const scriptFnStr = model.get('script-props')\n ? scriptFn\n : `function(){\\n${scriptFn}\\n;}`;\n const scriptProps = JSON.stringify(model.__getScriptProps());\n script.innerHTML = `\n setTimeout(function() {\n var item = document.getElementById('${id}');\n if (!item) return;\n (${scriptFnStr}.bind(item))(${scriptProps})\n }, 1);`;\n // #873\n // Adding setTimeout will make js components work on init of the editor\n setTimeout(() => {\n const scr = view.scriptContainer;\n scr && scr.get(0).appendChild(script);\n }, 0);\n },\n\n /**\n * Get javascript container\n * @private\n */\n getJsContainer(view) {\n const frameView = this.getFrameView(view);\n return frameView && frameView.getJsContainer();\n },\n\n getFrameView(view) {\n return (view && view._getFrame()) || this.em.get('currentFrame');\n },\n\n _renderFrames() {\n if (!this.ready) return;\n const { model, frames, em, framesArea } = this;\n const frms = model.get('frames');\n frms.listenToLoad();\n frames.render();\n const mainFrame = frms.at(0);\n const currFrame = mainFrame && mainFrame.view;\n em.setCurrentFrame(currFrame);\n framesArea && framesArea.appendChild(frames.el);\n this.frame = currFrame;\n },\n\n render() {\n const { el, $el, ppfx, config } = this;\n $el.html(this.template());\n const $frames = $el.find('[data-frames]');\n this.framesArea = $frames.get(0);\n\n const toolsWrp = $el.find('[data-tools]');\n this.toolsWrapper = toolsWrp.get(0);\n toolsWrp.append(`\n
\n
\n `);\n const toolsEl = el.querySelector(`#${ppfx}tools`);\n this.hlEl = el.querySelector(`.${ppfx}highlighter`);\n this.badgeEl = el.querySelector(`.${ppfx}badge`);\n this.placerEl = el.querySelector(`.${ppfx}placeholder`);\n this.ghostEl = el.querySelector(`.${ppfx}ghost`);\n this.toolbarEl = el.querySelector(`.${ppfx}toolbar`);\n this.resizerEl = el.querySelector(`.${ppfx}resizer`);\n this.offsetEl = el.querySelector(`.${ppfx}offset-v`);\n this.fixedOffsetEl = el.querySelector(`.${ppfx}offset-fixed-v`);\n this.toolsGlobEl = el.querySelector(`.${ppfx}tools-gl`);\n this.toolsEl = toolsEl;\n this.el.className = this.className;\n this.ready = 1;\n this._renderFrames();\n\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/canvas/config/config.js)\n * ```js\n * const editor = grapesjs.init({\n * canvas: {\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 canvas = editor.Canvas;\n * ```\n *\n * * [getConfig](#getconfig)\n * * [getElement](#getelement)\n * * [getFrameEl](#getframeel)\n * * [getWindow](#getwindow)\n * * [getDocument](#getdocument)\n * * [getBody](#getbody)\n * * [setCustomBadgeLabel](#setcustombadgelabel)\n * * [hasFocus](#hasfocus)\n * * [scrollTo](#scrollto)\n * * [setZoom](#setzoom)\n * * [getZoom](#getzoom)\n *\n * @module Canvas\n */\n\nimport { getElement, getViewEl } from 'utils/mixins';\nimport defaults from './config/config';\nimport Canvas from './model/Canvas';\nimport canvasView from './view/CanvasView';\n\nexport default () => {\n let c = {};\n let canvas;\n let CanvasView;\n\n return {\n /**\n * Used inside RTE\n * @private\n */\n getCanvasView() {\n return CanvasView;\n },\n\n /**\n * Name of the module\n * @type {String}\n * @private\n */\n name: 'Canvas',\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 module: this\n };\n\n this.em = c.em;\n const ppfx = c.pStylePrefix;\n if (ppfx) c.stylePrefix = ppfx + c.stylePrefix;\n canvas = new Canvas(config);\n this.model = canvas;\n this.startAutoscroll = this.startAutoscroll.bind(this);\n this.stopAutoscroll = this.stopAutoscroll.bind(this);\n return this;\n },\n\n onLoad() {\n this.model.init();\n CanvasView = new canvasView({\n model: canvas,\n config: c\n });\n },\n\n getModel() {\n return canvas;\n },\n\n /**\n * Get the configuration object\n * @return {Object}\n */\n getConfig() {\n return c;\n },\n\n /**\n * Get the canvas element\n * @return {HTMLElement}\n */\n getElement() {\n return CanvasView.el;\n },\n\n getFrame(index) {\n return index ? this.getFrames()[index] : canvas.get('frame');\n },\n\n /**\n * Get the iframe element of the canvas\n * @return {HTMLIFrameElement}\n */\n getFrameEl() {\n const { frame } = CanvasView;\n return frame && frame.el;\n },\n\n getFramesEl() {\n return CanvasView.framesArea;\n },\n\n /**\n * Get the window instance of the iframe element\n * @return {Window}\n */\n getWindow() {\n return this.getFrameEl().contentWindow;\n },\n\n /**\n * Get the document of the iframe element\n * @return {HTMLDocument}\n */\n getDocument() {\n const frame = this.getFrameEl();\n return frame && frame.contentDocument;\n },\n\n /**\n * Get the body of the iframe element\n * @return {HTMLBodyElement}\n */\n getBody() {\n const doc = this.getDocument();\n return doc && doc.body;\n },\n\n _getCompFrame(compView) {\n return compView && compView._getFrame();\n },\n\n _getLocalEl(globalEl, compView, method) {\n let result = globalEl;\n const frameView = this._getCompFrame(compView);\n result = frameView ? frameView[method]() : result;\n\n return result;\n },\n\n /**\n * Returns element containing all global canvas tools\n * @return {HTMLElement}\n * @private\n */\n getGlobalToolsEl() {\n return CanvasView.toolsGlobEl;\n },\n\n /**\n * Returns element containing all canvas tools\n * @return {HTMLElement}\n * @private\n */\n getToolsEl(compView) {\n return this._getLocalEl(CanvasView.toolsEl, compView, 'getToolsEl');\n },\n\n /**\n * Returns highlighter element\n * @return {HTMLElement}\n * @private\n */\n getHighlighter(compView) {\n return this._getLocalEl(CanvasView.hlEl, compView, 'getHighlighter');\n },\n\n /**\n * Returns badge element\n * @return {HTMLElement}\n * @private\n */\n getBadgeEl(compView) {\n return this._getLocalEl(CanvasView.badgeEl, compView, 'getBadgeEl');\n },\n\n /**\n * Returns placer element\n * @return {HTMLElement}\n * @private\n */\n getPlacerEl() {\n return CanvasView.placerEl;\n },\n\n /**\n * Returns ghost element\n * @return {HTMLElement}\n * @private\n */\n getGhostEl() {\n return CanvasView.ghostEl;\n },\n\n /**\n * Returns toolbar element\n * @return {HTMLElement}\n * @private\n */\n getToolbarEl() {\n return CanvasView.toolbarEl;\n },\n\n /**\n * Returns resizer element\n * @return {HTMLElement}\n * @private\n */\n getResizerEl() {\n return CanvasView.resizerEl;\n },\n\n /**\n * Returns offset viewer element\n * @return {HTMLElement}\n * @private\n */\n getOffsetViewerEl(compView) {\n return this._getLocalEl(\n CanvasView.offsetEl,\n compView,\n 'getOffsetViewerEl'\n );\n },\n\n /**\n * Returns fixed offset viewer element\n * @return {HTMLElement}\n * @private\n */\n getFixedOffsetViewerEl() {\n return CanvasView.fixedOffsetEl;\n },\n\n /**\n * Render canvas\n * @private\n * */\n render() {\n return CanvasView.render().el;\n },\n\n /**\n * Get frame position\n * @return {Object}\n * @private\n */\n getOffset() {\n var frameOff = this.offset(this.getFrameEl());\n var canvasOff = this.offset(this.getElement());\n return {\n top: frameOff.top - canvasOff.top,\n left: frameOff.left - canvasOff.left\n };\n },\n\n /**\n * Get the offset of the passed component element\n * @param {HTMLElement} el\n * @return {Object}\n * @private\n */\n offset(el) {\n return CanvasView.offset(el);\n },\n\n /**\n * Set custom badge naming strategy\n * @param {Function} f\n * @example\n * canvas.setCustomBadgeLabel(function(component){\n * return component.getName();\n * });\n */\n setCustomBadgeLabel(f) {\n c.customBadgeLabel = f;\n },\n\n /**\n * Get element position relative to the canvas\n * @param {HTMLElement} el\n * @return {Object}\n * @private\n */\n getElementPos(el, opts) {\n return CanvasView.getElementPos(el, opts);\n },\n\n /**\n * Returns element's offsets like margins and paddings\n * @param {HTMLElement} el\n * @return {Object}\n * @private\n */\n getElementOffsets(el) {\n return CanvasView.getElementOffsets(el);\n },\n\n /**\n * Get canvas rectangular data\n * @returns {Object}\n */\n getRect() {\n const { top, left } = CanvasView.getPosition();\n return {\n ...CanvasView.getCanvasOffset(),\n topScroll: top,\n leftScroll: left\n };\n },\n\n /**\n * This method comes handy when you need to attach something like toolbars\n * to elements inside the canvas, dealing with all relative position,\n * offsets, etc. and returning as result the object with positions which are\n * viewable by the user (when the canvas is scrolled the top edge of the element\n * is not viewable by the user anymore so the new top edge is the one of the canvas)\n *\n * The target should be visible before being passed here as invisible elements\n * return empty string as width\n * @param {HTMLElement} target The target in this case could be the toolbar\n * @param {HTMLElement} element The element on which I'd attach the toolbar\n * @param {Object} options Custom options\n * @param {Boolean} options.toRight Set to true if you want the toolbar attached to the right\n * @return {Object}\n * @private\n */\n getTargetToElementDim(target, element, options = {}) {\n var opts = options || {};\n var canvasPos = CanvasView.getPosition();\n if (!canvasPos) return;\n var pos = opts.elPos || CanvasView.getElementPos(element);\n var toRight = options.toRight || 0;\n var targetHeight = opts.targetHeight || target.offsetHeight;\n var targetWidth = opts.targetWidth || target.offsetWidth;\n var eventToTrigger = opts.event || null;\n\n var elTop = pos.top - targetHeight;\n var elLeft = pos.left;\n elLeft += toRight ? pos.width : 0;\n elLeft = toRight ? elLeft - targetWidth : elLeft;\n\n var leftPos = elLeft < canvasPos.left ? canvasPos.left : elLeft;\n var topPos = elTop < canvasPos.top ? canvasPos.top : elTop;\n topPos = topPos > pos.top + pos.height ? pos.top + pos.height : topPos;\n\n var result = {\n top: topPos,\n left: leftPos,\n elementTop: pos.top,\n elementLeft: pos.left,\n elementWidth: pos.width,\n elementHeight: pos.height,\n targetWidth: target.offsetWidth,\n targetHeight: target.offsetHeight,\n canvasTop: canvasPos.top,\n canvasLeft: canvasPos.left,\n canvasWidth: canvasPos.width,\n canvasHeight: canvasPos.height\n };\n\n // In this way I can catch data and also change the position strategy\n if (eventToTrigger && c.em) {\n c.em.trigger(eventToTrigger, result);\n }\n\n return result;\n },\n\n canvasRectOffset(el, pos, opts = {}) {\n const getFrameElFromDoc = doc => {\n const { defaultView } = doc;\n return defaultView && defaultView.frameElement;\n };\n\n const rectOff = (el, top = 1, pos) => {\n const zoom = this.em.getZoomDecimal();\n const side = top ? 'top' : 'left';\n const doc = el.ownerDocument;\n const { offsetTop = 0, offsetLeft = 0 } = opts.offset\n ? getFrameElFromDoc(doc)\n : {};\n const { scrollTop = 0, scrollLeft = 0 } = doc.body || {};\n const scroll = top ? scrollTop : scrollLeft;\n const offset = top ? offsetTop : offsetLeft;\n\n // if (!top) {\n // console.log('LEFT', { posLeft: pos[side], scroll, offset }, el);\n // }\n\n return pos[side] - (scroll - offset) * zoom;\n };\n\n return {\n top: rectOff(el, 1, pos),\n left: rectOff(el, 0, pos)\n };\n },\n\n getTargetToElementFixed(el, elToMove, opts = {}) {\n const pos = opts.pos || this.getElementPos(el);\n const cvOff = opts.canvasOff || this.canvasRectOffset(el, pos);\n const toolbarH = elToMove.offsetHeight || 0;\n const toolbarW = elToMove.offsetWidth || 0;\n const elRight = pos.left + pos.width;\n const cv = this.getCanvasView();\n const frCvOff = cv.getPosition();\n const frameOffset = cv.getFrameOffset(el);\n const { event } = opts;\n\n let top = -toolbarH;\n let left = pos.width - toolbarW;\n left = pos.left < -left ? -pos.left : left;\n left = elRight > frCvOff.width ? left - (elRight - frCvOff.width) : left;\n\n // Scroll with the window if the top edge is reached and the\n // element is bigger than the canvas\n const fullHeight = pos.height + toolbarH;\n const elIsShort = fullHeight < frameOffset.height;\n\n if (cvOff.top < toolbarH) {\n if (elIsShort) {\n top = top + fullHeight;\n } else {\n top = -cvOff.top < pos.height ? -cvOff.top : pos.height;\n }\n }\n\n const result = {\n top,\n left,\n canvasOffsetTop: cvOff.top,\n canvasOffsetLeft: cvOff.left\n };\n\n // In this way I can catch data and also change the position strategy\n event && this.em.trigger(event, result);\n\n return result;\n },\n\n /**\n * Instead of simply returning e.clientX and e.clientY this function\n * calculates also the offset based on the canvas. This is helpful when you\n * need to get X and Y position while moving between the editor area and\n * canvas area, which is in the iframe\n * @param {Event} e\n * @return {Object}\n * @private\n */\n getMouseRelativePos(e, options) {\n var opts = options || {};\n var addTop = 0;\n var addLeft = 0;\n var subWinOffset = opts.subWinOffset;\n var doc = e.target.ownerDocument;\n var win = doc.defaultView || doc.parentWindow;\n var frame = win.frameElement;\n var yOffset = subWinOffset ? win.pageYOffset : 0;\n var xOffset = subWinOffset ? win.pageXOffset : 0;\n\n if (frame) {\n var frameRect = frame.getBoundingClientRect();\n addTop = frameRect.top || 0;\n addLeft = frameRect.left || 0;\n }\n\n return {\n y: e.clientY + addTop - yOffset,\n x: e.clientX + addLeft - xOffset\n };\n },\n\n /**\n * X and Y mouse position relative to the canvas\n * @param {Event} ev\n * @return {Object}\n * @private\n */\n getMouseRelativeCanvas(ev, opts) {\n const zoom = this.getZoomDecimal();\n const { top, left } = CanvasView.getPosition(opts);\n\n return {\n y: ev.clientY * zoom + top,\n x: ev.clientX * zoom + left\n };\n },\n\n /**\n * Check if the canvas is focused\n * @return {Boolean}\n */\n hasFocus() {\n return this.getDocument().hasFocus();\n },\n\n /**\n * Detects if some input is focused (input elements, text components, etc.)\n * @return {Boolean}\n * @private\n */\n isInputFocused() {\n const doc = this.getDocument();\n const frame = this.getFrameEl();\n const toIgnore = ['body', ...this.getConfig().notTextable];\n const docActive = frame && document.activeElement === frame;\n const focused = docActive\n ? doc && doc.activeElement\n : document.activeElement;\n\n return focused && !toIgnore.some(item => focused.matches(item));\n },\n\n /**\n * Scroll canvas to the element if it's not visible. The scrolling is\n * executed via `scrollIntoView` API and options of this method are\n * passed to it. For instance, you can scroll smoothly by using\n * `{ behavior: 'smooth' }`.\n * @param {HTMLElement|Component} el\n * @param {Object} [opts={}] Options, same as options for `scrollIntoView`\n * @param {Boolean} [opts.force=false] Force the scroll, even if the element is already visible\n * @example\n * const selected = editor.getSelected();\n * // Scroll smoothly (this behavior can be polyfilled)\n * canvas.scrollTo(selected, { behavior: 'smooth' });\n * // Force the scroll, even if the element is alredy visible\n * canvas.scrollTo(selected, { force: true });\n */\n scrollTo(el, opts = {}) {\n const elem = getElement(el);\n const view = elem && getViewEl(elem);\n view && view.scrollIntoView(opts);\n },\n\n /**\n * Start autoscroll\n * @private\n */\n startAutoscroll(frame) {\n const fr = (frame && frame.view) || this.em.getCurrentFrame();\n fr && fr.startAutoscroll();\n },\n\n /**\n * Stop autoscroll\n * @private\n */\n stopAutoscroll(frame) {\n const fr = (frame && frame.view) || this.em.getCurrentFrame();\n fr && fr.stopAutoscroll();\n },\n\n /**\n * Set zoom value\n * @param {Number} value The zoom value, from 0 to 100\n * @returns {this}\n */\n setZoom(value) {\n canvas.set('zoom', parseFloat(value));\n return this;\n },\n\n /**\n * Get zoom value\n * @returns {Number}\n */\n getZoom() {\n return parseFloat(canvas.get('zoom'));\n },\n\n getZoomDecimal() {\n return this.getZoom() / 100;\n },\n\n getZoomMultiplier() {\n const zoom = this.getZoomDecimal();\n return zoom ? 1 / zoom : 1;\n },\n\n toggleFramesEvents(on) {\n const { style } = this.getFramesEl();\n style.pointerEvents = on ? '' : 'none';\n },\n\n getFrames() {\n return canvas.get('frames').map(item => item);\n },\n\n /**\n * Add new frame to the canvas\n * @param {Object} props Frame properties\n * @returns {Frame}\n * @example\n *\n editor.Canvas.addFrame({\n name: 'Mobile home page',\n x: 100, // Position in canvas\n y: 100,\n width: 500, // Frame dimensions\n height: 600,\n // device: 'DEVICE-ID',\n components: [\n '
Title frame
',\n '
Paragraph frame
',\n ],\n styles: `\n .testh { color: red; }\n .testp { color: blue; }\n `,\n });\n */\n addFrame(props = {}, opts = {}) {\n return canvas.get('frames').add(\n {\n ...props\n },\n {\n ...opts,\n em: this.em\n }\n );\n },\n\n destroy() {\n canvas.stopListening();\n CanvasView && CanvasView.remove();\n [c, canvas, CanvasView].forEach(i => (i = {}));\n ['em', 'model', 'droppable'].forEach(i => (this[i] = {}));\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 const { model } = this;\n const cls = model.get('className');\n const { command, listen } = model.attributes;\n const config = o.config || {};\n const { em } = config;\n this.config = config;\n this.em = 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 + 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(model, 'change', this.render);\n this.listenTo(model, 'change:active updateActive', this.updateActive);\n this.listenTo(model, 'checkActive', this.checkActive);\n this.listenTo(model, 'change:bntsVis', this.updateBtnsVis);\n this.listenTo(model, 'change:attributes', this.updateAttributes);\n this.listenTo(model, 'change:className', this.updateClassName);\n this.listenTo(model, 'change:disable', this.updateDisable);\n\n if (em && isString(command) && listen) {\n const chnOpt = { fromListen: 1 };\n this.listenTo(em, `run:${command}`, () =>\n model.set('active', true, chnOpt)\n );\n this.listenTo(em, `stop:${command}`, () =>\n model.set('active', false, chnOpt)\n );\n }\n\n if (em && em.get) this.commands = 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(m, v, opts = {}) {\n const { model, commands, $el, activeCls } = this;\n const { fromCollection, fromListen } = 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 !fromListen &&\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 !fromListen &&\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 this.toggleVisible();\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