search

prismicio / prismic-react

React components and hooks to fetch and present Prismic content
https://prismic.io/docs/technologies/homepage-reactjs
Apache License 2.0
154 stars 40 forks source link

Only standard tag element serializers supported #48

Closed dcecile closed 4 years ago

dcecile commented 4 years ago

I tried to override elements={{[Elements.image]: CustomImage}}, but got a confusing error:

Error: img is a void element tag and must neither have children nor use dangerouslySetInnerHTML.

This is because for any custom elements, the library only provides children, which is invalid in the case of img.

Maybe in the places where createElement('...', ...) is used in richtext.js, try checking elements first?

hypervillain commented 4 years ago

Hey @dcecile ,

it makes a lot of sense. The elements property is really new, I'm already happy you tried it out! Expect a fix in the coming days 👍In the meantime, you can use the htmlSerializer of course

dcecile commented 4 years ago

Thanks, looking forward to it!

I was able to work around this initially using a CSS rule for img, but we'd also like to use Next.js Link components for hyperlinks within our site.

dcecile commented 4 years ago

@hypervillain We'd also like to substitute button elements for links to a special content type (deep linking into a chat flow).

I don't see the new code yet, so can you update this issue once the feature is released? We'd start using it right away instead of doing a workaround that would involve HTML building or element replacing.

hypervillain commented 4 years ago

Hey, thanks for your patience, I just merged a PR that should better handle different element types. Thank you for reporting this @dcecile

dcecile commented 4 years ago

@hypervillain OK thanks, we'll take a look! 👀

hypervillain commented 4 years ago

Awesome! It's been deployed as a minor version bump

On Thu, Mar 12, 2020 at 1:50 PM Dan Cecile notifications@github.com wrote:

@hypervillain https://github.com/hypervillain OK thanks, we'll take a look! 👀

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/prismicio/prismic-reactjs/issues/48#issuecomment-598167377, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABSDRAIIZ76PJCQXQFOZX4TRHDK75ANCNFSM4KQXZKDQ .