From 5e6bc48dea7573493f856174a35ff7d16fc66cf0 Mon Sep 17 00:00:00 2001
From: Emil Sedgh <emilsedgh@kde.org>
Date: Sun, 3 Nov 2019 22:00:25 -0800
Subject: [PATCH 1/6] 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 <emilsedgh@kde.org>
Date: Sun, 3 Nov 2019 22:12:55 -0800
Subject: [PATCH 4/6] 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 <emilsedgh@kde.org>
Date: Mon, 4 Nov 2019 09:35:24 -0800
Subject: [PATCH 5/6] 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 f703ce71f7e6150199bfbc169e5e38eee68e4034 Mon Sep 17 00:00:00 2001
From: Emil Sedgh <emilsedgh@kde.org>
Date: Thu, 2 Jan 2020 09:05:17 -0800
Subject: [PATCH 6/6] 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 = {