Allow nesting hydrated HTML

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

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git a/Tekst-Web/src/components/generic/HydratedHtml.vue b/Tekst-Web/src/components/generic/HydratedHtml.vue
@@ -72,7 +72,8 @@ function hydrate() {
       router.push({
         name: 'browse',
         params: {
-          textSlug: a.getAttribute('data-tekst-text') || router.currentRoute.value.params.textSlug,
+          textSlug:
+            a.getAttribute('data-tekst-text') || router.currentRoute.value.params.textSlug || null,
           locId: a.getAttribute('data-tekst-location'),
         },
       });
@@ -92,6 +93,6 @@ onMounted(hydrate);
     v-model:show="showModal"
     :title="modalId && modalTitles[modalId]"
   >
-    <div v-html="modalId && modalHtml[modalId]" :style="style"></div>
+    <hydrated-html :html="modalId && modalHtml[modalId]" :style="style" />
   </generic-modal>
 </template>
diff --git a/Tekst-Web/src/stores/browse.ts b/Tekst-Web/src/stores/browse.ts
@@ -48,7 +48,6 @@ export const useBrowseStore = defineStore('browse', () => {
       loadingLocationData.value = false;
       return;
     }
-    const targetSlug = state.text?.slug || state.defaultText?.slug || '';
     // request location data
     const { data: locationData, error } = await GET('/browse/location-data', {
       params: {
@@ -65,22 +64,27 @@ export const useBrowseStore = defineStore('browse', () => {
           locationData.contents?.find((c: AnyContentRead) => c.resourceId === r.originalId);
         r.contents = content ? [content] : [];
       });
-      // if the "locId" path param was missing, add it now
-      if (!locId) {
+      // set correct route params in case any were missing or an invalid combination
+      const textSlug =
+        state.textById(locationPath.value[locationPath.value.length - 1]?.textId)?.slug ||
+        state.text?.slug ||
+        state.defaultText?.slug ||
+        '';
+      if (!locId || !route.params.textSlug || (textSlug && route.params.textSlug !== textSlug)) {
         router.replace({
           name: 'browse',
           params: {
-            textSlug: targetSlug,
+            textSlug: textSlug,
             locId: locationPathHead.value?.id,
           },
         });
       }
     } else {
-      // on error, just reset to targetSlug and empty location ID
+      // on error, just reset textSlug and empty location ID
       router.replace({
         name: 'browse',
         params: {
-          textSlug: targetSlug,
+          textSlug: state.text?.slug || state.defaultText?.slug || '',
           locId: null,
         },
       });

diff --git a/Tekst-Web/src/views/InfoPageView.vue b/Tekst-Web/src/views/InfoPageView.vue
@@ -36,6 +36,8 @@ watchEffect(async () => {
     <icon-heading v-if="page.title" level="1" :icon="icon">
       {{ page.title }}
     </icon-heading>
-    <hydrated-html class="content-block" :html="page.html" style="padding: 1.2rem" />
+    <div class="content-block" style="padding: 1.2rem">
+      <hydrated-html :html="page.html" />
+    </div>
   </template>
 </template>