claus / storyblok-rich-text-react-renderer

A React renderer for Storyblok rich text content
MIT License
86 stars 16 forks source link

textStyleMarkResolver implementation that avoids hydration errors #46

Closed guilhermespopolin closed 6 months ago

guilhermespopolin commented 7 months ago

Hello πŸ‘‹πŸ»

I've been getting some hydration errors on this app I worked on that uses your library and, even though the root reason for them to exist is not mainly connected to your library (more on that later), I thought it would be nice if we could avoid them without the necessity of custom render options. So I took the liberty of open this PR that updates textStyleMarkResolver by preventing the creation of React elements that include { style: { color: '' } } as the resulting DOM will not include a style="color: on such cases, which causing hydration errors.

Context For some reason I couldn't figure it out and therefore prevent, storyblok sometimes send rich text content text style markers without any color associated with it 🀷🏻

With the current implementation of textStyleMarkResolver, the React representation for such elements end being:

React.createElement('span', { props: { style: { color: '' } } }, 'some text')

While in the DOM we have

<span>some text</span>

Ideally storyblok wouldn't not send rich text content in such weird state but I think we could be safer here as resolver for text style markers defined in storyblok-js-client is.

Let me know what you think :)

Cheers πŸ‡§πŸ‡·