Richtext Resolver - accept React components

[kylehotchkiss]

Description

Currently (or as I understand it), the richText resolver only supports static HTML strings as input. This makes the WYSIWYG blocks less functional than they could be for several reasons:

1. Tailwind, a fairly common CSS framework, doesn't extrapolate classnames out of HTML strings
2. ReactDOM stringify functions are not available for use within Next.js rendered pages,
3. ReactDOM can be dynamically imported as a workaround, but the resolver cannot support async callbacks

Suggested solution or improvement

Accept react components as children in the richText resolver

Additional context

Roughly I'd like to be able to do either of the following:

    resolver: async (component, blok) => {
      switch (component) {
        case 'quote':
          return (<div>Test</div>)
        case 'relatedPosts':
          const { renderToStaticMarkup } = await import('react-dom/server');
          return renderToStaticMarkup(createElement(RelatedPosts));
        default:
          return 'Resolver not defined'
      }
    },
  }

Validations

• Follow our Code of Conduct

[edodusi]

hi @kylehotchkiss, in version 4.3.0 we added a new RichText component that supports React components, can you try it and give us feedback?

Here's the link to some documentation about it https://github.com/storyblok/storyblok-react#overriding-the-default-resolvers