Custom prose img components will cause hydration mismatch

[enpitsuLin]

I try override prose component <ProseImg/> to show caption under image in nuxt/content template, but got hydration mismatch warning, I thought it was cause by content module(nuxt/content#2640), but this issue also be found in MDC playground

I just add <figure/> and <figurecaption/>, after several try that I realized if there are some unexpected element wrap it would cause hydration mismatch, but cant resolve it

Reproduction

https://stackblitz.com/edit/github-1szhfr

[enpitsuLin]

Just figured out the <figure/> is block element cant be placed in the paragraph or those elements which not flow elements

[stared]

@enpitsuLin How did you solve this one?

Markdown parser automatically wraps things in paragraphs.

EDIT: I see it can be solved by the following hack nuxt/content#1537 (comment).