From 580116ea974dd278c1107aaa940a4dcb61d66eef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonatan=20K=C5=82osko?= <jonatanklosko@gmail.com>
Date: Tue, 15 Mar 2022 11:52:21 +0100
Subject: [PATCH] Keep cell hover when moving cursor to iframe (#1051)

---
 assets/css/js_interop.css  |  4 ++--
 assets/js/cell/index.js    | 10 ++++++++++
 assets/js/js_view/index.js | 16 ++++++++++++++++
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/assets/css/js_interop.css b/assets/css/js_interop.css
index efa29ebac..ef2ba54a7 100644
--- a/assets/css/js_interop.css
+++ b/assets/css/js_interop.css
@@ -73,7 +73,7 @@ solely client-side operations.
   @apply pointer-events-none;
 }
 
-[data-element="cell"]:not([data-js-focused]):hover
+[data-element="cell"]:not([data-js-focused])[data-js-hover]
   [data-element="actions"][data-primary] {
   @apply opacity-100 pointer-events-auto;
 }
@@ -92,7 +92,7 @@ solely client-side operations.
   @apply text-gray-900;
 }
 
-[data-element="cell"]:not([data-js-focused]):hover
+[data-element="cell"]:not([data-js-focused])[data-js-hover]
   [data-element="cell-focus-indicator"] {
   @apply bg-blue-200;
 }
diff --git a/assets/js/cell/index.js b/assets/js/cell/index.js
index 3b1ee33fd..c94be37b6 100644
--- a/assets/js/cell/index.js
+++ b/assets/js/cell/index.js
@@ -63,6 +63,16 @@ const Cell = {
       handleCellEditorRemoved(this, tag);
     });
 
+    // We manually track hover to correctly handle absolute iframe
+
+    this.el.addEventListener("mouseenter", (event) => {
+      this.el.setAttribute("data-js-hover", "true");
+    });
+
+    this.el.addEventListener("mouseleave", (event) => {
+      this.el.removeAttribute("data-js-hover");
+    });
+
     this._unsubscribeFromNavigationEvents = globalPubSub.subscribe(
       "navigation",
       (event) => {
diff --git a/assets/js/js_view/index.js b/assets/js/js_view/index.js
index 0d6987157..dd0c748a8 100644
--- a/assets/js/js_view/index.js
+++ b/assets/js/js_view/index.js
@@ -80,6 +80,22 @@ const JSView = {
 
     this.disconnectObservers = bindIframeSize(iframe, iframePlaceholder);
 
+    // Emulate mouse enter and leave on the placeholder. Note that we
+    // intentionally use bubbling to notify all parents that may have
+    // listeners on themselves
+
+    iframe.addEventListener("mouseenter", (event) => {
+      iframePlaceholder.dispatchEvent(
+        new MouseEvent("mouseenter", { bubbles: true })
+      );
+    });
+
+    iframe.addEventListener("mouseleave", (event) => {
+      iframePlaceholder.dispatchEvent(
+        new MouseEvent("mouseleave", { bubbles: true })
+      );
+    });
+
     // Register message chandler to communicate with the iframe
 
     function postMessage(message) {