feat(web): add PhotoSwipe lightbox for richtext images

Author: jhb-dev

pnpm-lock.yaml

@@ -24,6 +24,7 @@
     "cms": "workspace:*",
     "geist": "^1.7.0",
     "payload": "3.85.0",
+    "photoswipe": "^5.4.4",
     "schema-dts": "^1.1.5"
   },
   "devDependencies": {

web/package.json

@@ -1,7 +1,7 @@
 ---
 import type { UploadNode } from '@jhb.software/astro-payload-richtext-lexical'
 import type { Image } from 'cms/src/payload-types'
-import Img from '../../Img.astro'
+import Img, { getFileSize } from '../../Img.astro'
 
 type Props = { node: UploadNode }
 
@@ -11,13 +11,27 @@ const { node } = Astro.props
 {
   (() => {
     if (node.relationTo === 'images' && typeof node.value === 'object') {
+      const image = node.value as unknown as Image
+      // Use the largest available size for the lightbox to balance quality and performance.
+      const lightboxSize = getFileSize('xl', image)
+      const galleryId = `richtext-image-${image.id}`
+
       return (
-        <Img
-          image={node.value as unknown as Image}
-          size="md"
-          class="w-full rounded-2xl md:max-w-128"
-        />
+        <div data-pswp-gallery={galleryId}>
+          <a
+            href={lightboxSize.url}
+            data-pswp-width={lightboxSize.width}
+            data-pswp-height={lightboxSize.height}
+            class="block w-full cursor-zoom-in overflow-hidden md:max-w-128"
+          >
+            <Img image={image} size="md" class="w-full" />
+          </a>
+        </div>
       )
     }
   })()
 }
+
+<script>
+  import '@/scripts/photoswipe'
+</script>

web/src/components/blocks/RichTextBlock/UploadRenderer.astro

@@ -0,0 +1,48 @@
+import PhotoSwipe from 'photoswipe'
+import PhotoSwipeLightbox from 'photoswipe/lightbox'
+import 'photoswipe/style.css'
+
+const lightboxes: PhotoSwipeLightbox[] = []
+
+function initPhotoSwipe() {
+  lightboxes.forEach((lb) => lb.destroy())
+  lightboxes.length = 0
+
+  const galleries = document.querySelectorAll('[data-pswp-gallery]')
+
+  if (galleries.length === 0) return
+
+  galleries.forEach((gallery) => {
+    const galleryId = gallery.getAttribute('data-pswp-gallery')
+
+    const galleryLightbox = new PhotoSwipeLightbox({
+      pswpModule: PhotoSwipe,
+      children: 'a',
+      gallery: `[data-pswp-gallery="${galleryId}"]`,
+      showHideAnimationType: 'fade',
+      showAnimationDuration: 333,
+      hideAnimationDuration: 333,
+      bgClickAction: 'close',
+      tapAction: 'close',
+      arrowPrev: true,
+      arrowNext: true,
+      padding: {
+        top: 46,
+        bottom: 46,
+        left: 17,
+        right: 17,
+      },
+    })
+
+    galleryLightbox.init()
+    lightboxes.push(galleryLightbox)
+  })
+}
+
+document.addEventListener('DOMContentLoaded', initPhotoSwipe)
+document.addEventListener('astro:page-load', initPhotoSwipe)
+
+document.addEventListener('astro:before-preparation', () => {
+  lightboxes.forEach((lb) => lb.destroy())
+  lightboxes.length = 0
+})