`);\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.remove();\n [c, canvas, CanvasView].forEach(i => (i = {}));\n ['em', 'model', 'droppable'].forEach(i => (this[i] = {}));\n }\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