@storyblok/astro 2.3.5 → 2.4.0

package/README.md

@@ -256,9 +256,10 @@ If you want to deploy a dedicated preview environment with the Bridge enabled, a
 
 ### Rendering Rich Text
 
-You can easily render rich text by using the `renderRichText` function that comes with `@storyblok/astro`. Then you can use the [`set:html` directive](https://docs.astro.build/en/reference/directives-reference/#sethtml):
+You can easily render rich text by using either the `renderRichText` function or the `<RichTextRenderer />` component, both of which are included in `@storyblok/astro`.
+Use `renderRichText`, which only supports parsing and returning native HTML tags, if you are not embedding `bloks` in your rich text. Then you can use the [`set:html` directive](https://docs.astro.build/en/reference/directives-reference/#sethtml):
 
-```html
+```jsx
 ---
 import { renderRichText } from '@storyblok/astro';
 
@@ -270,6 +271,18 @@ const renderedRichText = renderRichText(blok.text)
 <div set:html="{renderedRichText}"></div>
 ```
 
+Use the `<RichTextRenderer />` component if you are embedding `bloks` in your rich text:
+
+```jsx
+---
+import { renderRichText, RichTextRenderer } from '@storyblok/astro';
+
+const { blok } = Astro.props
+---
+
+<RichTextRenderer richTextData="{blok.richtext}" />
+```
+
 You can also set a **custom Schema and component resolver** by passing the options as the second parameter of the `renderRichText` function:
 
 ```js
@@ -296,6 +309,37 @@ const renderedRichText = renderRichText(blok.text, {
 });
 ```
 
+The same can be done with the `<RichTextRenderer />` component by passing along the options via the `richTextOptions` prop:
+
+```js
+---
+import { RichTextSchema, renderRichText, RichTextRenderer } from "@storyblok/astro";
+import cloneDeep from "clone-deep";
+
+const mySchema = cloneDeep(RichTextSchema); // you can make a copy of the default RichTextSchema
+// ... and edit the nodes and marks, or add your own.
+// Check the base RichTextSchema source here https://github.com/storyblok/storyblok-js-client/blob/v4/source/schema.js
+
+const { blok } = Astro.props;
+
+const options = {
+  schema: mySchema,
+  resolver: (component, blok) => {
+    switch (component) {
+      case "my-custom-component":
+        return `<div class="my-component-class">${blok.text}</div>`;
+        break;
+      default:
+        return `Component ${component} not found`;
+    }
+  },
+};
+---
+
+<RichTextRenderer richTextData="{blok.richtext}" richTextOptions="{options}" />
+
+```
+
 ## API
 
 ### useStoryblokApi()

package/RichTextRenderer.astro

@@ -0,0 +1,32 @@
+---
+import { renderRichText } from ".";
+import type { ISbRichtext, SbBlokData, SbRichTextOptions } from "./dist/types";
+
+import StoryblokComponent from "./StoryblokComponent.astro";
+
+export interface Props {
+  richTextData?: ISbRichtext;
+  richTextOptions?: SbRichTextOptions;
+}
+
+const { richTextData, richTextOptions } = Astro.props;
+---
+
+{
+  richTextData?.content?.map((richTextNode: ISbRichtext) => {
+    if (richTextNode.type === "blok") {
+      return richTextNode.attrs.body.map((blok: SbBlokData) => (
+        <StoryblokComponent blok={blok} />
+      ));
+    } else {
+      return (
+        <Fragment
+          set:html={renderRichText(
+            { type: richTextNode.type, content: [richTextNode] },
+            richTextOptions
+          )}
+        />
+      );
+    }
+  })
+}

package/dist/types/index.d.ts

@@ -3,7 +3,7 @@ import type { AstroIntegration } from "astro";
 import type { ISbConfig, ISbRichtext, SbRichTextOptions } from "./types";
 export { storyblokEditable, loadStoryblokBridge, RichTextResolver, RichTextSchema, } from "@storyblok/js";
 export declare function useStoryblokApi(): StoryblokClient;
-export declare function renderRichText(data: ISbRichtext, options?: SbRichTextOptions): string;
+export declare function renderRichText(data?: ISbRichtext, options?: SbRichTextOptions): string;
 export type IntegrationOptions = {
     /**
      * The access token from your space.

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@storyblok/astro",
-  "version": "2.3.5",
+  "version": "2.4.0",
   "description": "Official Astro integration for the Storyblok Headless CMS",
   "main": "./dist/storyblok-astro.js",
   "module": "./dist/storyblok-astro.mjs",
   "files": [
     "dist",
     "StoryblokComponent.astro",
-    "FallbackComponent.astro"
+    "FallbackComponent.astro",
+    "RichTextRenderer.astro"
   ],
   "exports": {
     ".": {
@@ -16,7 +17,8 @@
       "require": "./dist/storyblok-astro.js"
     },
     "./StoryblokComponent.astro": "./StoryblokComponent.astro",
-    "./FallbackComponent.astro": "./FallbackComponent.astro"
+    "./FallbackComponent.astro": "./FallbackComponent.astro",
+    "./RichTextRenderer.astro": "./RichTextRenderer.astro"
   },
   "types": "./dist/types/index.d.ts",
   "scripts": {