Merge pull request #131 from storyblok/bugfix/105-optional-keyed-reso…

…lvers

feat!: 105 optional keyed resolvers and 123 image issue in React

README.md

@@ -110,10 +110,20 @@ const html = richTextResolver<string>(options).render(doc);
 // Vue
 const options: StoryblokRichTextOptions<VNode> = {
   renderFn: h,
+  keyedResolvers: true,
 };
 const root = () => richTextResolver<VNode>(options).render(doc);
 ```
 
+```ts
+// React
+const options: StoryblokRichTextOptions<React.ReactElement> = {
+  renderFn: React.createElement,
+  keyedResolvers: true,
+};
+const root = () => richTextResolver<React.ReactElement>(options).render(doc);
+```
+
 ## Optimize Images
 
 To optimize images in the richtext, you can use the `optimizeImages` property on the `richTextResolver` options. For the full list of available options, check the [Image Optimization](https://github.com/storyblok/storyblok-js-client?tab=readme-ov-file#method-storyblokrichtextresolverrender) documentation.

playground/react/src/App.tsx

@@ -1,6 +1,7 @@
-import { richTextResolver } from '@storyblok/richtext';
+import { richTextResolver, type StoryblokRichTextOptions } from '@storyblok/richtext';
 import { useStoryblok } from '@storyblok/react';
 import './App.css';
+import type { ReactElement } from 'react';
 import React from 'react';
 
 function camelCase(str: string) {
@@ -454,10 +455,17 @@ function App() {
   if (!story?.content) {
     return <div>Loading...</div>;
   }
-
-  const html = richTextResolver({
+  const options: StoryblokRichTextOptions<ReactElement> = {
     renderFn: React.createElement,
-  }).render(story.content.richtext);
+    keyedResolvers: true,
+  };
+
+  const html = richTextResolver(
+    options,
+  ).render(story.content.richtext);
+
+  // eslint-disable-next-line no-console
+  console.log(html);
 
   const formattedHtml = convertAttributesInElement(html);