Lightbox uses Stimulus target callbacks instead of data-action

Remove data-action from the sanitizer allowlist to disallow injection
of potentially malicious Stimulus actions in user-provided
content. The lightbox controller now uses imageTarget callbacks to
handle clicks on image links.

Also add the file name as a caption in the light box, and fix the
caption color for dark mode visibility.
This commit is contained in:
Mike Dalessio
2025-12-13 16:45:59 -05:00
parent 51df4af6ba
commit e9cb2956ee
6 changed files with 34 additions and 6 deletions
@@ -3,9 +3,22 @@ import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = [ "caption", "image", "dialog", "zoomedImage" ]
open(event) {
imageTargetConnected(element) {
element.addEventListener("click", this.#handleImageClick)
}
imageTargetDisconnected(element) {
element.removeEventListener("click", this.#handleImageClick)
}
#handleImageClick = (event) => {
event.preventDefault()
this.#open(event.currentTarget)
}
#open(link) {
this.dialogTarget.showModal()
this.#set(event.target.closest("a"))
this.#set(link)
}
// Wait for the transition to finish before resetting the image