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

@@ -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) {