ImageNode — Custom preview handling

ImageNode renders images and emits events for user interactions. We expose a click event on images so you can take over the click behavior (for example to open a custom image preview / lightbox) without replacing the whole renderer.

• Events: click — emitted when a user clicks a successfully loaded image. Payload is [Event, string] where the second item is the src actually used for rendering (this may be a fallback URL).
• Events: load / error — emitted when an image finishes loading or fails, payload is the image src.

Example: wrapper + VitePress registration

Create a small wrapper component that intercepts click and use setCustomComponents to register it in the client app.

1) CustomImageNode.vue (simple wrapper)

<script setup lang="ts">
import ImageNode from 'markstream-vue'

const emit = defineEmits(['load', 'error', 'click'])

function onImageClick(payload: [Event, string]) {
  const [, src] = payload
  // Simple example: open the image in a new tab for preview.
  // Replace this with a modal/lightbox call in real apps.
  window.open(src, '_blank')
  // Re-emit the click so parent code can also react if needed.
  emit('click', payload)
}
</script>

<template>
  <ImageNode v-bind="$attrs" @load="emit('load', $event)" @error="emit('error', $event)" @click="onImageClick" />
</template>

2) Register in VitePress client enhance

import { setCustomComponents } from 'markstream-vue'
// .vitepress/clientAppEnhance.ts
import CustomImageNode from './components/CustomImageNode.vue'

export default ({ app }) => {
  setCustomComponents('vitepress-image-preview', { ImageNode: CustomImageNode })
}

Optional: richer preview interactions

For zoom/gesture/slide support, call a lightbox library such as photoswipe, fslightbox or basiclightbox inside onImageClick, or control an application-level modal to show the preview.

Summary

The click event from ImageNode is the primary hook for implementing custom previews. The usual approach is wrapping the original component and registering it with setCustomComponents in the client app. The wrapper can also forward load/error events or add additional behavior (analytics, alternative lazy-load handling, custom placeholders, etc.).