@storyblok/astro - npm Package Compare versions

Comparing version 2.3.5 to 2.4.0

dist/types/index.d.ts

@@ -6,3 +6,3 @@ import { StoryblokClient } 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 = {
@@ -9,0 +9,0 @@ /**

package.json

 {
   "name": "@storyblok/astro",
-  "version": "2.3.5",
+  "version": "2.4.0",
   "description": "Official Astro integration for the Storyblok Headless CMS",
@@ -10,3 +10,4 @@ "main": "./dist/storyblok-astro.js",
     "StoryblokComponent.astro",
-    "FallbackComponent.astro"
+    "FallbackComponent.astro",
+    "RichTextRenderer.astro"
   ],
@@ -20,3 +21,4 @@ "exports": {
     "./StoryblokComponent.astro": "./StoryblokComponent.astro",
-    "./FallbackComponent.astro": "./FallbackComponent.astro"
+    "./FallbackComponent.astro": "./FallbackComponent.astro",
+    "./RichTextRenderer.astro": "./RichTextRenderer.astro"
   },
@@ -23,0 +25,0 @@ "types": "./dist/types/index.d.ts",

README.md

@@ -259,5 +259,6 @@ <div align="center">
 
-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
 ---
@@ -274,2 +275,14 @@ import { renderRichText } from '@storyblok/astro';
 
+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:
@@ -301,2 +314,33 @@
 
+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
@@ -303,0 +347,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

51088

increased by4.67%

Number of package files

9

increased by12.5%

Number of lines in readme file

374

increased by13.33%

No dependency changes