From 5e6bc48dea7573493f856174a35ff7d16fc66cf0 Mon Sep 17 00:00:00 2001 From: Emil Sedgh Date: Sun, 3 Nov 2019 22:00:25 -0800 Subject: [PATCH 1/9] Define editor first component.setDragMode('absolute') and then start dragging, you'd get a lot of `editor is not defined` errors. --- src/commands/view/ComponentDrag.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/commands/view/ComponentDrag.js b/src/commands/view/ComponentDrag.js index 2dee0a6e4..5c94f4cbb 100644 --- a/src/commands/view/ComponentDrag.js +++ b/src/commands/view/ComponentDrag.js @@ -120,7 +120,7 @@ export default { }, updateGuides(guides) { - (guides || this.guides).forEach(item => { + const { editor } = this(guides || this.guides).forEach(item => { const { origin } = item; const { top, height, left, width } = editor.Canvas.getElementPos(origin); From 88e828287a1b2fef519f8083711b5ceba4ea1ba4 Mon Sep 17 00:00:00 2001 From: Emil Sedgh Date: Sun, 3 Nov 2019 22:12:55 -0800 Subject: [PATCH 4/9] Bad habits. Fix syntax really. --- src/commands/view/ComponentDrag.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/commands/view/ComponentDrag.js b/src/commands/view/ComponentDrag.js index 5c94f4cbb..eb62e49b0 100644 --- a/src/commands/view/ComponentDrag.js +++ b/src/commands/view/ComponentDrag.js @@ -120,7 +120,9 @@ export default { }, updateGuides(guides) { - const { editor } = this(guides || this.guides).forEach(item => { + const { editor } = this; + + (guides || this.guides).forEach(item => { const { origin } = item; const { top, height, left, width } = editor.Canvas.getElementPos(origin); From c5586233d7ce65e36e2bdaffc0ed931b954c53f5 Mon Sep 17 00:00:00 2001 From: Emil Sedgh Date: Mon, 4 Nov 2019 09:35:24 -0800 Subject: [PATCH 5/9] Calibrate the coordinates based on frame position. Since the toolbar lives outside the canvas frame, the event's generated on it have clientX and clientY relative to the page. This makes sure we consider frame offset from the page. Fixes #2207,#2372 --- src/dom_components/view/ToolbarButtonView.js | 28 +++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/src/dom_components/view/ToolbarButtonView.js b/src/dom_components/view/ToolbarButtonView.js index 164302e3f..6a1eb73e8 100644 --- a/src/dom_components/view/ToolbarButtonView.js +++ b/src/dom_components/view/ToolbarButtonView.js @@ -20,7 +20,33 @@ export default Backbone.View.extend({ handleClick(event) { event.preventDefault(); event.stopPropagation(); - this.execCommand(event); + + /* + * 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 { + left, + top + } = this.editor.Canvas.getFrameEl().getBoundingClientRect(); + + const calibrated = { + ...event, + clientX: event.clientX - left, + clientY: event.clientY - top + }; + + this.execCommand(calibrated); }, execCommand(event) { From 26de1c466eadcd5ba9a17a2e2470155082dedf3b Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 26 Dec 2019 19:24:13 +0000 Subject: [PATCH 6/9] Bump handlebars from 4.2.0 to 4.5.3 Bumps [handlebars](https://github.com/wycats/handlebars.js) from 4.2.0 to 4.5.3. - [Release notes](https://github.com/wycats/handlebars.js/releases) - [Changelog](https://github.com/wycats/handlebars.js/blob/master/release-notes.md) - [Commits](https://github.com/wycats/handlebars.js/compare/v4.2.0...v4.5.3) Signed-off-by: dependabot[bot] --- package-lock.json | 52 ++++++++++++++++++++++++++++++----------------- 1 file changed, 33 insertions(+), 19 deletions(-) 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", From c7febbf03cdcd24043b5328ab4561d2ba393c77d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADt=C4=9Bzslav=20Ackermann=20Ferko?= Date: Mon, 30 Dec 2019 10:36:40 +0100 Subject: [PATCH 7/9] Update Components-js.md This change makes more clear what is going on and why the code will not work as expected. Even though it was already written there, I was still unsure and I have almost posted a _[Question]_. But upon re-reading what I wrote ten more times, I finally understood what you meant by `but be aware of a string conversion,`. --- docs/modules/Components-js.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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'; From 44a52a503939173e5558fed22f08245120d03db6 Mon Sep 17 00:00:00 2001 From: Emil Sedgh Date: Wed, 1 Jan 2020 01:15:02 -0800 Subject: [PATCH 8/9] Read avoidInlineStyle from config not from attributes If you change config after the initial configuration (like grapesjs-mjml does) it wont be reflected on editor.attributes.avoidInlineStyle. This means ComponentView in some cases will not respect the configuration. --- src/dom_components/view/ComponentView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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); From f703ce71f7e6150199bfbc169e5e38eee68e4034 Mon Sep 17 00:00:00 2001 From: Emil Sedgh Date: Thu, 2 Jan 2020 09:05:17 -0800 Subject: [PATCH 9/9] Define the variable before using it --- src/dom_components/view/ToolbarButtonView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/dom_components/view/ToolbarButtonView.js b/src/dom_components/view/ToolbarButtonView.js index e50120e7b..6714d1468 100644 --- a/src/dom_components/view/ToolbarButtonView.js +++ b/src/dom_components/view/ToolbarButtonView.js @@ -37,7 +37,7 @@ export default Backbone.View.extend({ * https://github.com/artf/grapesjs/issues/2207 */ - const { editor } = this; + const { editor, em } = this; const { left, top } = editor.Canvas.getFrameEl().getBoundingClientRect(); const calibrated = {