Keep cell hover when moving cursor to iframe (#1051)

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;
 }

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

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