chore(tests): internal links

README.md

@@ -148,13 +148,13 @@ You can override the default resolvers by passing a `resolver` prop to the `Stor
 
 ```html
 <script setup>
-  import { StoryblokRichText, BlockTypes } from "@storyblok/vue";
+  import { StoryblokRichText, BlockTypes, StoryblokRichTextNode } from "@storyblok/vue";
   import { RouterLink } from "vue-router";
   import CodeBlok from "./components/CodeBlok.vue";
 
   const resolvers = {
     // RouterLink example:
-    [MarkTypes.LINK]: (node: Node<VNode>) => {
+    [MarkTypes.LINK]: (node: StoryblokRichTextNode<VNode>) => {
       return node.attrs?.linktype === 'STORY'
         ? h(RouterLink, {
           to: node.attrs?.href,

lib/cypress/components/index.cy.js

@@ -6,7 +6,7 @@ import Feature from "@storyblok/vue-playground/components/Feature.vue";
 import MyCustomFallback from "@storyblok/vue-playground/components/MyCustomFallback.vue";
 import { StoryblokVue, apiPlugin } from "@storyblok/vue";
 import IframeEmbed from "../testing-components/IFrameEmbed.vue";
-
+import { RouterLink } from "vue-router";
 import Essential from "../testing-components/Essential.vue";
 import RealApi from "../testing-components/RealApi.vue";
 import RichText from "../testing-components/RichText.vue";
@@ -277,5 +277,17 @@ describe("@storyblok/vue", () => {
         .find("iframe")
         .should("have.attr", "src", "https://storyblok.com/");
     });
+
+    it("should redirect internal links", () => {
+      prepare({ use: [apiPlugin] }, RichText, {
+        components: { IframeEmbed, RouterLink },
+      });
+
+      cy.get("[data-test=root]")
+        .children()
+        .find("a")
+        .contains("Internal Link")
+        .should("have.attr", "href", "/vue/test");
+    });
   });
 });

lib/cypress/testing-components/RichTextChild.vue

@@ -1,10 +1,43 @@
-<script setup>
-import { useStoryblok, StoryblokRichText } from "@storyblok/vue";
+<script setup lang="ts">
+import {
+  useStoryblok,
+  StoryblokRichText,
+  type StoryblokRichTextNode,
+  MarkTypes,
+} from "@storyblok/vue";
+import { type VNode, h } from "vue";
+import { RouterLink } from "vue-router";
 const story = await useStoryblok("vue/test-richtext", { version: "draft" });
+
+const resolvers = {
+  [MarkTypes.LINK]: (node: StoryblokRichTextNode<VNode>) => {
+    return node.attrs?.linktype === "STORY"
+      ? h(
+          RouterLink,
+          {
+            to: node.attrs?.href,
+            target: node.attrs?.target,
+          },
+          node.text
+        )
+      : h(
+          "a",
+          {
+            href: node.attrs?.href,
+            target: node.attrs?.target,
+          },
+          node.text
+        );
+  },
+};
 </script>
 
 <template>
   <h2>RichText</h2>
   <!-- <pre>{{ story.content.richText }}</pre> -->
-  <StoryblokRichText v-if="story.content" :doc="story.content.richText" />
+  <StoryblokRichText
+    v-if="story.content"
+    :doc="story.content.richText"
+    :resolvers="resolvers"
+  />
 </template>

lib/index.ts

@@ -25,6 +25,13 @@ export {
   MarkTypes,
   richTextResolver,
   TextTypes,
+  type StoryblokRichTextOptions,
+  type StoryblokRichTextDocumentNode,
+  type StoryblokRichTextNodeTypes,
+  type StoryblokRichTextNode,
+  type StoryblokRichTextResolvers,
+  type StoryblokRichTextNodeResolver,
+  type StoryblokRichTextImageOptimizationOptions,
 } from "@storyblok/js";
 
 import StoryblokComponent from "./StoryblokComponent.vue";

playground/pages/RichTextDemo.vue

@@ -1,5 +1,12 @@
-<script setup>
-import { useStoryblok, StoryblokRichText } from "@storyblok/vue";
+<script setup lang="ts">
+import { type VNode, h } from "vue";
+import {
+  useStoryblok,
+  StoryblokRichText,
+  type StoryblokRichTextNode,
+  MarkTypes,
+} from "@storyblok/vue";
+import { RouterLink } from "vue-router";
 
 const story = await useStoryblok(
   "vue/test-richtext",
@@ -8,11 +15,34 @@ const story = await useStoryblok(
   }
   // { resolveRelations: "Article.categories" }
 );
+
+const resolvers = {
+  [MarkTypes.LINK]: (node: StoryblokRichTextNode<VNode>) => {
+    return node.attrs?.linktype === "STORY"
+      ? h(
+          RouterLink,
+          {
+            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/router/index.ts

@@ -2,6 +2,11 @@ import { createWebHistory, createRouter } from "vue-router";
 
 const routes = [
   { path: "/", name: "Home", component: () => import("../pages/Home.vue") },
+  {
+    path: "/vue/test",
+    name: "Home",
+    component: () => import("../pages/Home.vue"),
+  },
   {
     path: "/vue/test-richtext",
     name: "RichTextDemo",