fix: 1373 storyblokrichtext blok resolver not working #1388
Conversation
alvarosabu
commented
Mar 27, 2025
alvarosabu
commented
- Introduced new components for server-side rich text rendering.
- Updated existing components and pages to utilize the new rich text features.
- Enhanced the layout and styling of the playground for better user experience.
- Update Next.js playground with Tailwind CSS and rich text enhancements
- Added Tailwind CSS dependencies for styling.
- Added new custom blok to test - Added tailwindcss for styling
- Introduced new components for server-side rich text rendering. - Updated existing components and pages to utilize the new rich text features. - Enhanced the layout and styling of the playground for better user experience. - Update Next.js playground with Tailwind CSS and rich text enhancements - Added Tailwind CSS dependencies for styling.
- Added a missing semicolon to the `@apply m-0` rule for emoji images in `globals.css` and `styles.css` to ensure proper CSS parsing. - Removed an unused import of `EmojiRandomizer` in `page.tsx` to clean up the codebase.
commit: |
| <StoryblokServerRichText doc={story.content.richText} /> | ||
| </div> | ||
| ); | ||
| } |
There was a problem hiding this comment.
On this example we are using the rsc module which is meant for Next.js App Router, but the code does not reflect the changes in the DX (they are documented in the README).
So either we change the example detailing that this is for App Router and reuse the same code, or we document that this is a non-strict example that only details how to use the StoryblokServerRichText component but everything else needs to be adapted to the user's context.
| Or you can have more control by using the `useStoryblokServerRichText` hook: | ||
|
|
||
| ```ts | ||
| import { useStoryblokServerRichText, convertAttributesInElement } from '@storyblok/react'; |
There was a problem hiding this comment.
are them not exported from the rsc module?
| export function componentResolver(node: StoryblokRichTextNode<React.ReactElement>): React.ReactElement { | ||
| const body = node?.attrs?.body; | ||
| return React.createElement(StoryblokServerComponent, { | ||
| blok: Array.isArray(body) ? body[0] : undefined, |
There was a problem hiding this comment.
Could still be an empty array
| blok: Array.isArray(body) ? body[0] : undefined, | |
| blok: Array.isArray(body) && body.length > 0 ? body[0] : undefined, |
| const body = node?.attrs?.body; | ||
| return React.createElement(StoryblokServerComponent, { | ||
| blok: Array.isArray(body) ? body[0] : undefined, | ||
| key: node.attrs?.id, |
There was a problem hiding this comment.
Risk of an undefined key
| key: node.attrs?.id, | |
| key: node.attrs?.id || `storyblok-component-${Date.now()}`, |
| ...options.resolvers, | ||
| }, | ||
| keyedResolvers: true, | ||
| }; |
There was a problem hiding this comment.
What about the other options? You are only using options.resolvers instead of merging the whole options parameter
| import { useStoryblokServerRichText } from './server-richtext'; | ||
|
|
||
| const StoryblokRichText = forwardRef<HTMLDivElement, StoryblokRichTextProps>( | ||
| ({ doc, resolvers }, ref) => { |
There was a problem hiding this comment.
I would suggest to return immediately if we don't have the doc, something like
if (!doc) {
return null;
}
