Allow usage of hydrated HTML in client segments

VedaWebProject · Jan 16, 2025 · 4581e40 · 4581e40
1 parent 5a889ef
commit 4581e40
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/Tekst-Web/src/components/SegmentRenderer.vue b/Tekst-Web/src/components/SegmentRenderer.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import HydratedHtml from '@/components/generic/HydratedHtml.vue';
 import { usePlatformData } from '@/composables/platformData';
 import { useStateStore } from '@/stores';
 import { ref, watchEffect } from 'vue';
@@ -18,7 +19,7 @@ watchEffect(async () => {
 </script>
 
 <template>
-  <div v-if="html" class="segment-container" v-html="html"></div>
+  <hydrated-html v-if="html" class="segment-container" :html="html" />
 </template>
 
 <style>

diff --git a/Tekst-Web/src/components/generic/HydratedHtml.vue b/Tekst-Web/src/components/generic/HydratedHtml.vue
@@ -86,7 +86,7 @@ onMounted(hydrate);
 </script>
 
 <template>
-  <div ref="contentRef" v-html="html" :style="style"></div>
+  <div ref="contentRef" v-bind="$attrs" v-html="html" :style="style"></div>
   <generic-modal
     v-if="Object.keys(modalHtml).length"
     v-model:show="showModal"

diff --git a/Tekst-Web/src/views/InfoPageView.vue b/Tekst-Web/src/views/InfoPageView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ClientSegmentRead } from '@/api';
+import HydratedHtml from '@/components/generic/HydratedHtml.vue';
 import IconHeading from '@/components/generic/IconHeading.vue';
 import { usePlatformData } from '@/composables/platformData';
 import { useStateStore } from '@/stores';
@@ -35,6 +36,6 @@ watchEffect(async () => {
     <icon-heading v-if="page.title" level="1" :icon="icon">
       {{ page.title }}
     </icon-heading>
-    <div class="content-block" style="padding: 1.2rem" v-html="page.html"></div>
+    <hydrated-html class="content-block" :html="page.html" style="padding: 1.2rem" />
   </template>
 </template>