diff --git a/app/components/content/ProseImg.vue b/app/components/content/ProseImg.vue index 5b9df9c..70b21db 100644 --- a/app/components/content/ProseImg.vue +++ b/app/components/content/ProseImg.vue @@ -17,32 +17,32 @@ const props = withDefaults(defineProps(), { const attrs = useAttrs() -const figureClass = computed(() => { +// Use instead of
to avoid block-in-

invalid HTML +// that breaks SSR hydration (browser auto-removes

wrapper around block elements). +const wrapperClass = computed(() => { const base = 'not-prose my-6' - // Si des classes custom sont passées via MDC {.class}, on retire les classes - // de layout automatiques — l'utilisateur contrôle tout. - if (attrs.class) return base + if (attrs.class) return `${base} block` switch (props.align) { - case 'left': return `${base} float-left mr-6 mb-2 w-1/2 max-w-xs` - case 'right': return `${base} float-right ml-6 mb-2 w-1/2 max-w-xs` - case 'center': return `${base} mx-auto table` - default: return `${base} w-full` + case 'left': return `${base} block float-left mr-6 mb-2 w-1/2 max-w-xs` + case 'right': return `${base} block float-right ml-6 mb-2 w-1/2 max-w-xs` + case 'center': return `${base} block mx-auto` + default: return `${base} block w-full` } }) -const figureStyle = computed(() => { +const wrapperStyle = computed(() => { if (props.width && props.align !== 'full') return `width: ${props.width}px` return undefined })