diff --git a/docs/modules/Components-js.md b/docs/modules/Components-js.md index e2264e015..7613b9e84 100644 --- a/docs/modules/Components-js.md +++ b/docs/modules/Components-js.md @@ -68,7 +68,7 @@ As you see the editor attaches a unique ID to all components with scripts and re Keep in mind that all component scripts are executed only inside the iframe of the canvas (isolated, just like your final template), and therefore are NOT part of the current `document`. All your external libraries (eg. jQuery) are not there, but you'll see later how to manage scripted components with dependencies. -One thing you might be concerned about is a string used for the `script`, definitely not the best way to deal with a code, for this reason GrapesJS is able also to handle functions for you, so the previous example might look like this: +One thing you might be concerned about is a string used for the `script`. Definitely not the best way to deal with a code, for this reason GrapesJS is also able to handle functions for you, so the previous example might look like this: ```js editor.BlockManager.add('test-block', { @@ -82,7 +82,7 @@ editor.BlockManager.add('test-block', { } }); ``` -This is much better, but be aware of a string conversion, you can't use variables outside of the function scope. Take a look at this scenario: +This is much better, but be aware though, that the function body is converted to string internally, before it can be placed in the document, so you can't use variables outside of the function scope. Take a look at this scenario: ```js var myVar = 'John'; diff --git a/package-lock.json b/package-lock.json index 4f9304387..254c881ab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9801,11 +9801,6 @@ } } }, - "font-awesome": { - "version": "4.7.0", - "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz", - "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=" - }, "for-in": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", @@ -9940,7 +9935,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -9961,12 +9957,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -9981,17 +9979,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -10108,7 +10109,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -10120,6 +10122,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -10134,6 +10137,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -10141,12 +10145,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -10165,6 +10171,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -10245,7 +10252,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -10257,6 +10265,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -10342,7 +10351,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -10378,6 +10388,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -10397,6 +10408,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -10440,12 +10452,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -10835,9 +10849,9 @@ "dev": true }, "handlebars": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.2.0.tgz", - "integrity": "sha512-Kb4xn5Qh1cxAKvQnzNWZ512DhABzyFNmsaJf3OAkWNa4NkaqWcNI8Tao8Tasi0/F4JD9oyG0YxuFyvyR57d+Gw==", + "version": "4.5.3", + "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.5.3.tgz", + "integrity": "sha512-3yPecJoJHK/4c6aZhSvxOyG4vJKDshV36VHp0iVCDVh7o9w2vwi3NSnL2MMPj3YdduqaBcu7cGbggJQM0br9xA==", "dev": true, "requires": { "neo-async": "^2.6.0", diff --git a/src/dom_components/view/ComponentView.js b/src/dom_components/view/ComponentView.js index 35932cefb..1231ef0ea 100644 --- a/src/dom_components/view/ComponentView.js +++ b/src/dom_components/view/ComponentView.js @@ -208,7 +208,7 @@ export default Backbone.View.extend({ const em = this.em; const model = this.model; - if (em && em.get('avoidInlineStyle')) { + if (em && em.getConfig('avoidInlineStyle')) { this.el.id = model.getId(); const style = model.getStyle(); !isEmpty(style) && model.setStyle(style); diff --git a/src/dom_components/view/ToolbarButtonView.js b/src/dom_components/view/ToolbarButtonView.js index 21d7dd9d6..6714d1468 100644 --- a/src/dom_components/view/ToolbarButtonView.js +++ b/src/dom_components/view/ToolbarButtonView.js @@ -22,9 +22,32 @@ export default Backbone.View.extend({ handleClick(event) { event.preventDefault(); event.stopPropagation(); - const { em } = this; + + /* + * Since the toolbar lives outside the canvas frame, the event's + * generated on it have clientX and clientY relative to the page. + * + * This causes issues during events like dragging, where they depend + * on the clientX and clientY. + * + * This makes sure the offsets are calculated. + * + * More information on + * https://github.com/artf/grapesjs/issues/2372 + * https://github.com/artf/grapesjs/issues/2207 + */ + + const { editor, em } = this; + const { left, top } = editor.Canvas.getFrameEl().getBoundingClientRect(); + + const calibrated = { + ...event, + clientX: event.clientX - left, + clientY: event.clientY - top + }; + em.trigger('toolbar:run:before'); - this.execCommand(event); + this.execCommand(calibrated); }, execCommand(event) {