From 5daabae05df49215f99b1b8136609f3ada508eeb Mon Sep 17 00:00:00 2001
From: alvarosabu <alvaro.saburido@gmail.com>
Date: Tue, 10 Sep 2024 15:38:58 +0200
Subject: [PATCH 1/7] feat: add new richtext imports

---
 package-lock.json                           | 36 +++++++++++--------
 package.json                                |  2 +-
 playground/pages/richtext.vue               | 39 +++++++++++++++++++++
 playground/storyblok/iframe-embed/index.vue | 11 ++++++
 src/module.ts                               | 11 +++++-
 5 files changed, 83 insertions(+), 16 deletions(-)
 create mode 100644 playground/pages/richtext.vue
 create mode 100644 playground/storyblok/iframe-embed/index.vue

diff --git a/package-lock.json b/package-lock.json
index 7f9bdb11..3435c75e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "@storyblok/nuxt",
       "version": "0.0.1",
       "dependencies": {
-        "@storyblok/vue": "^8.0.0"
+        "@storyblok/vue": "^8.1.0"
       },
       "devDependencies": {
         "@commitlint/cli": "^19.0.3",
@@ -19,7 +19,7 @@
         "@nuxt/module-builder": "^0.6.0",
         "@nuxt/schema": "^3.8.0",
         "@nuxt/test-utils": "^3.8.0",
-        "@nuxtjs/eslint-config-typescript": "*",
+        "@nuxtjs/eslint-config-typescript": "latest",
         "@types/node": "^20.8.10",
         "cypress": "^13.4.0",
         "eslint": "^8.52.0",
@@ -5537,19 +5537,28 @@
       }
     },
     "node_modules/@storyblok/js": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/@storyblok/js/-/js-3.0.8.tgz",
-      "integrity": "sha512-JY+abbswBId84Ubr0yRwNpq5Klf9546Ia2Qs1pn6en5Trz8o6EcBJIwxvR6evjJ0Vp2cLKT7MV1yfGLAtnzycA==",
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/@storyblok/js/-/js-3.1.4.tgz",
+      "integrity": "sha512-Uh+ESR4xF+8C7veSiVA3IeYNqPdwRDOxJdqyGHAVBZ7OuQ2SzZkW3eAKax2TiX8W4DPSljIKvI6MKpvEG3KwWA==",
+      "dependencies": {
+        "@storyblok/richtext": "^2.0.0",
+        "storyblok-js-client": "^6.9.2"
+      }
+    },
+    "node_modules/@storyblok/richtext": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@storyblok/richtext/-/richtext-2.0.0.tgz",
+      "integrity": "sha512-yJm5BgWrCRGUdwZtviPgGno3rLXcnEvjK1bL1Ut4GmU1UOEVLC42m543EtrrOBVGDZdRPD9dK8ObgyHp6zNwqw==",
       "dependencies": {
-        "storyblok-js-client": "^6.7.2"
+        "consola": "^3.2.3"
       }
     },
     "node_modules/@storyblok/vue": {
-      "version": "8.0.8",
-      "resolved": "https://registry.npmjs.org/@storyblok/vue/-/vue-8.0.8.tgz",
-      "integrity": "sha512-ReYbMVeekQpj6wNE4V/ac2u59YYxsENrtWGmyMwWiqohTOm4106tznMbzWmVJgEwO8N2eXhIkg1MZ7FlADqAlw==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@storyblok/vue/-/vue-8.1.0.tgz",
+      "integrity": "sha512-KLECtIOrgWOh9i9l4oeIaCZ42Vw0tkou0GBwiBsFTEpMSEOgJtuu61/wg1BYUFBOVgugB4ILZRG7qGuc1gFFEQ==",
       "dependencies": {
-        "@storyblok/js": "^3.0.8"
+        "@storyblok/js": "^3.1.0"
       }
     },
     "node_modules/@stylistic/eslint-plugin": {
@@ -8005,7 +8014,6 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/consola/-/consola-3.2.3.tgz",
       "integrity": "sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==",
-      "dev": true,
       "engines": {
         "node": "^14.18.0 || >=16.10.0"
       }
@@ -18418,9 +18426,9 @@
       "dev": true
     },
     "node_modules/storyblok-js-client": {
-      "version": "6.7.2",
-      "resolved": "https://registry.npmjs.org/storyblok-js-client/-/storyblok-js-client-6.7.2.tgz",
-      "integrity": "sha512-5+cCZQhvIPSP5fin7jMUyyiAfV3FSbhH2q0YmDpb8NqxsY0pog6r+igHshVXNHed5yB5AZcVn0Mduao0X1MdBA=="
+      "version": "6.9.2",
+      "resolved": "https://registry.npmjs.org/storyblok-js-client/-/storyblok-js-client-6.9.2.tgz",
+      "integrity": "sha512-31GM5X/SIP4eJsSMCpAnaPDRmmUotSSWD3Umnuzf3CGqjyakot2Gv5QmuV23fRM7TCDUQlg5wurROmAzkKMKKg=="
     },
     "node_modules/stream-combiner": {
       "version": "0.0.4",
diff --git a/package.json b/package.json
index 4a8999a0..ae8a0167 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
     "start-server-and-test": "^2.0.1"
   },
   "dependencies": {
-    "@storyblok/vue": "^8.0.0"
+    "@storyblok/vue": "^8.1.0"
   },
   "lint-staged": {
     "*.{vue,js,css}": [
diff --git a/playground/pages/richtext.vue b/playground/pages/richtext.vue
new file mode 100644
index 00000000..41ce3a55
--- /dev/null
+++ b/playground/pages/richtext.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+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>
diff --git a/playground/storyblok/iframe-embed/index.vue b/playground/storyblok/iframe-embed/index.vue
new file mode 100644
index 00000000..a68d559a
--- /dev/null
+++ b/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>
diff --git a/src/module.ts b/src/module.ts
index 94986fe1..cfd60e7e 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -67,11 +67,20 @@ export default defineNuxtModule<ModuleOptions>({
       "useStoryblokApi",
       "useStoryblokBridge",
       "renderRichText",
-      "RichTextSchema"
+      "RichTextSchema",
+      "StoryblokRichText",
+      "useStoryblokRichText",
+      "MarkTypes",
+      "BlockTypes",
+      "LinkTypes",
+      "AssetTypes",
     ];
     for (const name of names) {
       addImports({ name, as: name, from: "@storyblok/vue" });
     }
+    nuxt.hook('prepare:types', ({ references }) => {
+      references.push({ types: '@storyblok/vue' })
+    })
     addImportsDir(resolver.resolve("./runtime/composables"));
 
     if (options.devtools) {

From 2e5275d24ecfa0aac26a160d64921105932271e9 Mon Sep 17 00:00:00 2001
From: alvarosabu <alvaro.saburido@gmail.com>
Date: Wed, 6 Nov 2024 11:33:36 +0100
Subject: [PATCH 2/7] chore: fix lint

---
 src/module.ts | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/module.ts b/src/module.ts
index 5991fda1..ed4139bd 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -63,17 +63,17 @@ export default defineNuxtModule<ModuleOptions>({
 
     // Add auto imports
     const names = [
-      "useStoryblok",
-      "useStoryblokApi",
-      "useStoryblokBridge",
-      "renderRichText",
-      "RichTextSchema",
-      "StoryblokRichText",
-      "useStoryblokRichText",
-      "MarkTypes",
-      "BlockTypes",
-      "LinkTypes",
-      "AssetTypes",
+      'useStoryblok',
+      'useStoryblokApi',
+      'useStoryblokBridge',
+      'renderRichText',
+      'RichTextSchema',
+      'StoryblokRichText',
+      'useStoryblokRichText',
+      'MarkTypes',
+      'BlockTypes',
+      'LinkTypes',
+      'AssetTypes',
     ];
     for (const name of names) {
       addImports({ name, as: name, from: '@storyblok/vue' });

From 079168c425334d51273d7b5de354d223badae865 Mon Sep 17 00:00:00 2001
From: alvarosabu <alvaro.saburido@gmail.com>
Date: Fri, 8 Nov 2024 10:03:47 +0100
Subject: [PATCH 3/7] docs: added new richtext DX to the README.md

---
 README.md                     | 50 ++++++++++++++++++++++++++++++++++-
 playground/pages/richtext.vue |  3 +++
 2 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index dcfff140..37b45236 100755
--- a/README.md
+++ b/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:
 
diff --git a/playground/pages/richtext.vue b/playground/pages/richtext.vue
index 41ce3a55..9dfd7a9f 100644
--- a/playground/pages/richtext.vue
+++ b/playground/pages/richtext.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { NuxtLink } from '#build/components';
+import { MarkTypes, type StoryblokRichTextNode } from '@storyblok/vue';
+
 const story = await useAsyncStoryblok(
   "vue/test-richtext",
   {

From fe1b72a6f4aeb3f3613479c604f14757d9f8f52c Mon Sep 17 00:00:00 2001
From: Alvaro Saburido <alvaro.saburido@gmail.com>
Date: Fri, 8 Nov 2024 10:47:57 +0100
Subject: [PATCH 4/7] Update README.md

Co-authored-by: Alex Jover <alexjovermorales@gmail.com>
---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 37b45236..74bb0c08 100755
--- a/README.md
+++ b/README.md
@@ -271,7 +271,7 @@ Which is the short-hand equivalent to using `useStoryblokApi` inside `useState`
 
 ### Rendering Rich Text
 
-You can render rich-text fields by using the `StoryblokRichText` component:
+You can render rich text fields by using the `StoryblokRichText` component:
 
 ```html
 <script setup>

From c9fc2fd1c3fd04d3b10788fbdb3ede84b8787742 Mon Sep 17 00:00:00 2001
From: Alvaro Saburido <alvaro.saburido@gmail.com>
Date: Fri, 8 Nov 2024 10:48:05 +0100
Subject: [PATCH 5/7] Update README.md

Co-authored-by: Alex Jover <alexjovermorales@gmail.com>
---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 74bb0c08..70958f25 100755
--- a/README.md
+++ b/README.md
@@ -317,7 +317,7 @@ You can override the default resolvers by passing a `resolver` prop to the `Stor
 ## Legacy Rendering Rich Text
 
 > [!WARNING]  
-> The legacy `richTextResolver` is soon to be deprecated. We recommend migrating to the new `useRichText` composable described above instead.
+> The legacy `richTextResolver` is soon to be deprecated. We recommend migrating to the new `useStoryblokRichText` 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:
 

From 008d7ef3d5fa6636bc6688616f0f6fbd814bc268 Mon Sep 17 00:00:00 2001
From: alvarosabu <alvaro.saburido@gmail.com>
Date: Fri, 8 Nov 2024 10:59:49 +0100
Subject: [PATCH 6/7] docs: add `useStoryblokRichText` composable docs

---
 README.md | 51 ++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 46 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 37b45236..efe60405 100755
--- a/README.md
+++ b/README.md
@@ -269,20 +269,35 @@ 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
+<template>
+  <StoryblokRichText :doc="blok.articleContent" />
+</template>
+```
+
+Or you can have more control by using the `useStoryblokRichText` composable:
+
 ```html
 <script setup>
-  import { StoryblokRichText } from "@storyblok/nuxt";
+  const { render } = useStoryblokRichText({
+    // options like resolvers
+  })
+
+  const root = () => render(blok.articleContent);
 </script>
 
 <template>
-  <StoryblokRichText :doc="blok.articleContent" />
+  <root />
 </template>
 ```
 
+For more incredible options you can pass to the `useStoryblokRichtext`, please consult the [Full options](https://github.com/storyblok/richtext?tab=readme-ov-file#options) documentation.
+
+
 #### 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: :
@@ -314,10 +329,36 @@ You can override the default resolvers by passing a `resolver` prop to the `Stor
 </template>
 ```
 
-## Legacy Rendering Rich Text
+If you want to use the `useStoryblokRichText` composable, you can pass the `resolvers` via the options object:
+
+```html
+<script setup>
+  import CodeBlok from "./components/CodeBlok.vue";
+
+  const { render } = useStoryblokRichText({
+    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) => 
+        h(CodeBlock, {
+          class: node?.attrs?.class,
+        }, node.children)
+    }
+  });
+
+  const root = () => render(blok.articleContent);
+</script>
+```
+
+### Legacy Rendering Rich Text
 
 > [!WARNING]  
-> The legacy `richTextResolver` is soon to be deprecated. We recommend migrating to the new `useRichText` composable described above instead.
+> The legacy `richTextResolver` is soon to be deprecated. We recommend migrating to the new approach described above instead.
 
 You can easily render rich text by using the `renderRichText` function that comes with `@storyblok/nuxt` and a Vue computed property:
 

From b6c257e2de9e92e8fb8f0ec6f5befd83393ac440 Mon Sep 17 00:00:00 2001
From: alvarosabu <alvaro.saburido@gmail.com>
Date: Fri, 8 Nov 2024 11:03:49 +0100
Subject: [PATCH 7/7] docs: typo

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 4d7f17a6..ae10a5f7 100755
--- a/README.md
+++ b/README.md
@@ -295,7 +295,7 @@ Or you can have more control by using the `useStoryblokRichText` composable:
 </template>
 ```
 
-For more incredible options you can pass to the `useStoryblokRichtext`, please consult the [Full options](https://github.com/storyblok/richtext?tab=readme-ov-file#options) documentation.
+For more incredible options you can pass to the `useStoryblokRichText`, please consult the [Full options](https://github.com/storyblok/richtext?tab=readme-ov-file#options) documentation.
 
 
 #### Overriding the default resolvers