Fix image blocks zoomable behaviour (#2756)

GitbookIO · Jan 20, 2025 · 1b8a456 · 1b8a456
1 parent 38de9eb
commit 1b8a456
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 0 deletions.
diff --git a/.changeset/grumpy-zoos-rush.md b/.changeset/grumpy-zoos-rush.md
@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Fix Image blocks zoomable behaviour
diff --git a/packages/gitbook/e2e/pages.spec.ts b/packages/gitbook/e2e/pages.spec.ts
@@ -378,6 +378,21 @@ const testCases: TestsCase[] = [
                 fullPage: true,
                 screenshot: { threshold: 0.8 },
             },
+            {
+                name: 'Images (with zoom)',
+                url: 'blocks/block-images',
+                run: async (page) => {
+                    await waitForCookiesDialog(page);
+                    const zoomImage = page.getByTestId('zoom-image');
+                    if (!zoomImage) {
+                        throw new Error('Image block not found');
+                    }
+                    await zoomImage.first().click();
+                    await page.waitForSelector('[data-testid="zoom-image-modal"]');
+                },
+                fullPage: true,
+                screenshot: { threshold: 0.8 },
+            },
             {
                 name: 'Inline Images',
                 url: 'blocks/inline-images',

diff --git a/packages/gitbook/src/components/DocumentView/Caption.tsx b/packages/gitbook/src/components/DocumentView/Caption.tsx
@@ -39,6 +39,7 @@ export function Caption(
             'after:block',
             'after:absolute',
             'after:-inset-[0]',
+            'after:pointer-events-none',
             fit ? 'w-fit' : null,
             withBorder
                 ? 'rounded straight-corners:rounded-none after:border-dark/2 after:border after:rounded straight-corners:after:rounded-none dark:after:border-light/1 dark:after:mix-blend-plus-lighter after:pointer-events-none'

diff --git a/packages/gitbook/src/components/utils/ZoomImage.tsx b/packages/gitbook/src/components/utils/ZoomImage.tsx
@@ -142,6 +142,7 @@ export function ZoomImage(
             ) : (
                 // When zooming, remove the image from the DOM to let the browser animates it with View Transition.
                 <img
+                    data-testid="zoom-image"
                     ref={imgRef}
                     {...props}
                     alt={alt ?? ''}
@@ -206,6 +207,7 @@ function ZoomImageModal(props: {
 
     return (
         <div
+            data-testid="zoom-image-modal"
             className={classNames(
                 styles.zoomModal,
                 tcls(