feat: add new richtext

README.md

@@ -269,7 +269,55 @@ Which is the short-hand equivalent to using `useStoryblokApi` inside `useState`
 
 > The `useState` is an SSR-friendly `ref` replacement. Its value will be preserved after server-side rendering (during client-side hydration).
 
-## Rendering Rich Text
+### Rendering Rich Text
+
+You can render rich-text fields by using the `StoryblokRichText` component:
+
+```html
+<script setup>
+  import { StoryblokRichText } from "@storyblok/nuxt";
+</script>
+
+<template>
+  <StoryblokRichText :doc="blok.articleContent" />
+</template>
+```
+
+#### Overriding the default resolvers
+
+You can override the default resolvers by passing a `resolver` prop to the `StoryblokRichText` component, for example, to use vue-router links or add a custom codeblok component: :
+
+```html
+<script setup>
+  import { NuxtLink } from '#components';
+  import type { StoryblokRichTextNode } from '@storyblok/vue';
+  import CodeBlok from "./components/CodeBlok.vue";
+
+  const resolvers = {
+    // NuxtLink example:
+    [MarkTypes.LINK]: (node: StoryblokRichTextNode<VNode>) =>
+      h(NuxtLink, {
+        to: node.attrs?.href,
+        target: node.attrs?.target,
+      }, node.text),
+    // Custom code block component example:
+    [BlockTypes.CODE_BLOCK]: (node: Node) => {
+      return h(CodeBlock, {
+        class: node?.attrs?.class,
+      }, node.children)
+    },
+  }
+</script>
+
+<template>
+  <StoryblokRichText :doc="blok.articleContent" :resolvers="resolvers" />
+</template>
+```
+
+## Legacy Rendering Rich Text
+
+> [!WARNING]  
+> The legacy `richTextResolver` is soon to be deprecated. We recommend migrating to the new `useRichText` composable described above instead.
 
 You can easily render rich text by using the `renderRichText` function that comes with `@storyblok/nuxt` and a Vue computed property:
 

playground/pages/richtext.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { NuxtLink } from '#build/components';
+import { MarkTypes, type StoryblokRichTextNode } from '@storyblok/vue';
+
+const story = await useAsyncStoryblok(
+  "vue/test-richtext",
+  {
+    version: "draft"
+  }
+  // { resolveRelations: "Article.categories" }
+);
+
+const resolvers = {
+  [MarkTypes.LINK]: (node: StoryblokRichTextNode<VNode>) => {
+    return node.attrs?.linktype === "STORY"
+      ? h(
+          NuxtLink,
+          {
+            to: node.attrs?.href,
+            target: node.attrs?.target
+          },
+          node.text
+        )
+      : h(
+          "a",
+          {
+            href: node.attrs?.href,
+            target: node.attrs?.target
+          },
+          node.text
+        );
+  }
+};
+</script>
+
+<template>
+  <StoryblokRichText
+    v-if="story.content.richText"
+    :doc="story.content.richText"
+    :resolvers="resolvers"
+  />
+</template>

playground/storyblok/iframe-embed/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps({
+  blok: {
+    type: Object,
+    required: true
+  }
+});
+</script>
+<template>
+  <iframe :src="blok.url.url" class="w-full aspect-video" frameborder="0" />
+</template>

src/module.ts

@@ -68,6 +68,12 @@ export default defineNuxtModule<ModuleOptions>({
       'useStoryblokBridge',
       'renderRichText',
       'RichTextSchema',
+      'StoryblokRichText',
+      'useStoryblokRichText',
+      'MarkTypes',
+      'BlockTypes',
+      'LinkTypes',
+      'AssetTypes',
     ];
     for (const name of names) {
       addImports({ name, as: name, from: '@storyblok/vue' });