From 78d7860fd1bf6b40fd5d436424989419f0e8f6f0 Mon Sep 17 00:00:00 2001
From: Chris Gray <christophergray15@gmail.com>
Date: Tue, 28 Jun 2022 22:45:15 -0300
Subject: [PATCH 1/2] fix: moved image popover code to img.onclick event
 instead of ImageView's selectNode()

---
 src/rich-text/node-views/image.ts | 33 ++++++++++++++++++-------------
 test/rich-text/editor.e2e.test.ts | 27 +++++++++++++++++++++++++
 2 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/src/rich-text/node-views/image.ts b/src/rich-text/node-views/image.ts
index c51b6193..e89576d1 100644
--- a/src/rich-text/node-views/image.ts
+++ b/src/rich-text/node-views/image.ts
@@ -33,22 +33,9 @@ export class ImageView implements NodeView {
             this.preventClose(event)
         );
     }
-    /**
-     * We want to trigger Stacks' showing and hiding of popovers whenever an image is considered
-     * "selected" by prosemirror. This can happen by mouse-clicking or arrowing through the editor
-     */
+
     selectNode(): void {
         this.img.classList.add("bs-ring");
-        this.selectionActive = true;
-        // tell Stacks to hide the popover
-        this.img.dispatchEvent(new Event("image-popover-show"));
-
-        const inputFields = this.form.querySelectorAll("input");
-        if (inputFields.length > 0) {
-            inputFields[0].focus({
-                preventScroll: true,
-            });
-        }
     }
 
     deselectNode(): void {
@@ -87,6 +74,8 @@ export class ImageView implements NodeView {
         if (node.attrs.alt) img.alt = node.attrs.alt as string;
         if (node.attrs.title) img.title = node.attrs.title as string;
 
+        img.onclick = () => this.handleClick();
+
         return img;
     }
 
@@ -158,4 +147,20 @@ export class ImageView implements NodeView {
             event.preventDefault();
         }
     }
+
+    /**
+     * We want to trigger Stacks' showing and hiding of popovers whenever an image is clicked
+     */
+    private handleClick(): void {
+        this.selectionActive = true;
+        // tell Stacks to hide the popover
+        this.img.dispatchEvent(new Event("image-popover-show"));
+
+        const inputFields = this.form.querySelectorAll("input");
+        if (inputFields.length > 0) {
+            inputFields[0].focus({
+                preventScroll: true,
+            });
+        }
+    }
 }
diff --git a/test/rich-text/editor.e2e.test.ts b/test/rich-text/editor.e2e.test.ts
index 22054d46..4c17fe1f 100644
--- a/test/rich-text/editor.e2e.test.ts
+++ b/test/rich-text/editor.e2e.test.ts
@@ -250,5 +250,32 @@ test.describe.serial("rich-text mode", () => {
                 )
             ).toBe(false);
         });
+
+        test("should not show image popover when navigating with left/right arrow keys", async () => {
+            await enterTextAsMarkdown(
+                page,
+                "![an image](https://localhost/some-image)"
+            );
+
+            // move over the image from the left side
+            await page.keyboard.press("ArrowRight");
+            await page.keyboard.press("ArrowRight");
+
+            expect(
+                await page.$eval(imagePopoverSelector, (el) =>
+                    el.classList.contains("is-visible")
+                )
+            ).toBe(false);
+
+            // move over the image from the right side
+            await page.keyboard.press("ArrowLeft");
+            await page.keyboard.press("ArrowLeft");
+
+            expect(
+                await page.$eval(imagePopoverSelector, (el) =>
+                    el.classList.contains("is-visible")
+                )
+            ).toBe(false);
+        });
     });
 });

From 3a1591ca5879bcf8958e0e1ddf484646b1f8c6f8 Mon Sep 17 00:00:00 2001
From: Chris Gray <christophergray15@gmail.com>
Date: Wed, 29 Jun 2022 21:59:00 -0300
Subject: [PATCH 2/2] test: added e2e test to image.e2e

---
 test/rich-text/node-views/image.e2e.test.ts | 27 +++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/test/rich-text/node-views/image.e2e.test.ts b/test/rich-text/node-views/image.e2e.test.ts
index 5a25e1ed..22c91132 100644
--- a/test/rich-text/node-views/image.e2e.test.ts
+++ b/test/rich-text/node-views/image.e2e.test.ts
@@ -52,4 +52,31 @@ test.describe.serial("rich-text image nodeview", () => {
             )
         ).toBe(false);
     });
+
+    test("should not show image popover when navigating with left/right arrow keys", async () => {
+        await enterTextAsMarkdown(
+            page,
+            "![an image](https://localhost/some-image)"
+        );
+
+        // move over the image from the left side
+        await page.keyboard.press("ArrowRight");
+        await page.keyboard.press("ArrowRight");
+
+        expect(
+            await page.$eval(imagePopoverSelector, (el) =>
+                el.classList.contains("is-visible")
+            )
+        ).toBe(false);
+
+        // move over the image from the right side
+        await page.keyboard.press("ArrowLeft");
+        await page.keyboard.press("ArrowLeft");
+
+        expect(
+            await page.$eval(imagePopoverSelector, (el) =>
+                el.classList.contains("is-visible")
+            )
+        ).toBe(false);
+    });
 });