Fix richtext

components/Elements/Link.vue

@@ -1,19 +1,43 @@
 <template>
   <span>
-    <NuxtLink class="underline" to="/">{{
-      richTextElement.data.data["lt_text"]
-    }}</NuxtLink>
+    <NuxtLink
+      v-if="richTextElement.data.template === 'internal_link'"
+      class="underline"
+      :to="internalLinkRoute"
+    >
+      <ElementsRichText :richtext="richTextElement.content" />
+    </NuxtLink>
+    <a
+      v-else
+      :href="richTextElement.data.data['lt_url']"
+      :target="richTextElement.data.data['lt_link_behavior']?.identifier"
+      class="underline"
+    >
+      <ElementsRichText :richtext="richTextElement.content"
+    /></a>
   </span>
 </template>
 
 <script setup lang="ts">
 import { RichTextElement, Link } from "fsxa-api";
 
+const { navigationData } = useNavigationData();
+
 interface RichTextLink {
   type: "link";
   content: RichTextElement[];
   data: Link;
 }
 
-defineProps<{ richTextElement: RichTextLink }>();
+const props = defineProps<{ richTextElement: RichTextLink }>();
+
+const internalLinkRoute = computed(() => {
+  const referenceId: string =
+    props.richTextElement.data.data["lt_link"]?.referenceId;
+  if (!referenceId) return "";
+
+  const target = navigationData.value?.idMap[referenceId];
+
+  return target?.seoRoute ?? "";
+});
 </script>

components/Elements/RichTextElement.vue

@@ -1,21 +1,24 @@
 <template>
-  <component
-    :is="richtTextElementComponent"
-    class=""
-    :rich-text-element="richTextElement"
-    :richtext="richTextElement.content"
-  />
+  <span :class="richTextElementClasses">
+    <component
+      :is="richtTextElementComponent"
+      v-if="Array.isArray(richTextElement.content)"
+      class=""
+      :rich-text-element="richTextElement"
+      :richtext="richTextElement.content"
+    />
+    <span v-else>{{ richTextElement.content }}</span>
+  </span>
 </template>
 
 <script lang="ts" setup>
 import { RichTextElement } from "fsxa-api";
-// TODO: remove all data any types
 const props = defineProps<{ richTextElement: RichTextElement }>();
 
 const richtTextElementComponent = computed(() => {
   switch (props.richTextElement.type) {
     case "text":
-      return resolveComponent("ElementsText");
+      return resolveComponent("ElementsRichText");
     case "link":
       return resolveComponent("ElementsLink");
     case "block":
@@ -26,4 +29,18 @@ const richtTextElementComponent = computed(() => {
       return resolveComponent("ElementsUnknownRichtextElement");
   }
 });
+
+const richTextElementClasses = computed(() => {
+  const fsStyle = (props.richTextElement.data as Record<string, unknown>)[
+    "data-fs-style"
+  ];
+  switch (fsStyle) {
+    case "format.span_yellow_text":
+      return "text-yellow-500";
+    case "format.standard":
+      return "";
+    default:
+      return "";
+  }
+});
 </script>

docs/modules/ROOT/pages/Richtext.adoc

@@ -32,12 +32,16 @@ RichtextElement.vue
 [source,xml]
 ----
 <template>
-  <component
-    :is="richtTextElementComponent"
-    class=""
-    :rich-text-element="richTextElement"
-    :richtext="richTextElement.content"
-  />
+  <span :class="richTextElementClasses">
+    <component
+      :is="richtTextElementComponent"
+      v-if="Array.isArray(richTextElement.content)"
+      class=""
+      :rich-text-element="richTextElement"
+      :richtext="richTextElement.content"
+    />
+    <span v-else>{{ richTextElement.content }}</span>
+  </span>
 </template>
 
 <script setup lang="ts">
@@ -49,9 +53,24 @@ const richtTextElementComponent = computed(() => {
     case "customRichtextElement":
       return resolveComponent("ElementsCustomRichtextComponent");
     default:
-      return resolveComponent("unknown");
+      return resolveComponent("ElementsUnknownRichtextElement");
   }
 });
+
+const richTextElementClasses = computed(() => {
+  const fsStyle = (props.richTextElement.data as Record<string, unknown>)[
+    "data-fs-style"
+  ];
+  switch (fsStyle) {
+    case "format.span_yellow_text":
+      return "text-yellow-500";
+    case "format.standard":
+      return "";
+    default:
+      return "";
+  }
+});
+
 // ...
 </script>
 
@@ -73,7 +92,6 @@ Clicking on it will show you further information about the missing component.
 
 image:RichText/RichTextInfoWindow.png[RichText Info Window]
 
-And finally, clicking the content tab in the info window will reveal all of the data that will be passed into your component.
 
 [source,json]
 ----

plugins/1.setupRemoteApi.server.ts

@@ -32,7 +32,7 @@ export default defineNuxtPlugin(() => {
       appConfig.logLevel ||
       LogLevel.NONE,
     enableEventStream:
-      runtimeConfig.private["enableEventStream"] ||
+      !!runtimeConfig.private["enableEventStream"] ||
       appConfig.enableEventStream ||
       false,
   };

tests/testutils/renderConfig.ts

@@ -27,7 +27,6 @@ import RichText from "../../components/Elements/RichText.vue";
 import RichTextElement from "../../components/Elements/RichTextElement.vue";
 import Button from "../../components/Elements/Button.vue";
 import Link from "../../components/Elements/Link.vue";
-import Text from "../../components/Elements/Text.vue";
 
 import InternalLink from "../../components/InternalLink.vue";
 
@@ -58,7 +57,6 @@ export const renderConfig = {
       ElementsRichTextElement: RichTextElement,
       ElementsButton: Button,
       ElementsLink: Link,
-      ElementsText: Text,
 
       NuxtLayout: DefaultLayout,