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:
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.
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 astyle="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 π§π·