From 56b973f02e4cb3a6ba127bb2f3113ffeac20f892 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 25 Jan 2024 17:54:11 +0100
Subject: [PATCH] Add highlights to nested content content-blocks

Also refactor the ContentListBlock component
---
 .../content-blocks/ContentComponent.vue       |  1 +
 .../content-blocks/ContentListBlock.vue       | 55 ++++++++++---------
 2 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/client/src/components/content-blocks/ContentComponent.vue b/client/src/components/content-blocks/ContentComponent.vue
index 411b3903..553f967b 100644
--- a/client/src/components/content-blocks/ContentComponent.vue
+++ b/client/src/components/content-blocks/ContentComponent.vue
@@ -33,6 +33,7 @@ import Mark from 'mark.js';
 import highlightSidebar from '@/helpers/highlight-sidebar';
 
 export interface Props {
+  // todo: use useful types here
   component: any;
   parent: any;
   highlights: HighlightNode[];
diff --git a/client/src/components/content-blocks/ContentListBlock.vue b/client/src/components/content-blocks/ContentListBlock.vue
index f3a15962..d141f55a 100644
--- a/client/src/components/content-blocks/ContentListBlock.vue
+++ b/client/src/components/content-blocks/ContentListBlock.vue
@@ -9,33 +9,38 @@
   </content-list>
 </template>
 
-<script>
-import { defineAsyncComponent } from 'vue';
-const ContentList = defineAsyncComponent(() => import('@/components/content-blocks/ContentList.vue'));
-const ContentBlock = defineAsyncComponent(() => import('@/components/ContentBlock.vue'));
+<script setup lang="ts">
+import ContentList from '@/components/content-blocks/ContentList.vue';
+import ContentBlock from '@/components/ContentBlock.vue';
+import { computed } from '@vue/reactivity';
 
+export interface Props {
+  // todo: use useful types here
+  contents: any[];
+  parent: any;
+}
+
+const props = defineProps<Props>();
+
+const contentBlocks = computed(() => {
+  return props.contents.map((contentBlock) => {
+    const contents = contentBlock.value ? [...contentBlock.value] : [];
+    return Object.assign({}, contentBlock, {
+      contents,
+      indent: true,
+      bookmarks: props.parent.bookmarks,
+      notes: props.parent.notes,
+      highlights: props.parent.highlights,
+      root: props.parent.id,
+    });
+  });
+});
+</script>
+
+<script lang="ts">
 export default {
+  // can't really declare names with the new script setup syntax, that's why this is still here
+  // todo: does this name still matter anywhere?
   name: 'ContentBlockList',
-  props: ['contents', 'parent'],
-
-  components: {
-    ContentList,
-    ContentBlock,
-  },
-
-  computed: {
-    contentBlocks() {
-      return this.contents.map((contentBlock) => {
-        const contents = contentBlock.value ? [...contentBlock.value] : [];
-        return Object.assign({}, contentBlock, {
-          contents,
-          indent: true,
-          bookmarks: this.parent.bookmarks,
-          notes: this.parent.notes,
-          root: this.parent.id,
-        });
-      });
-    },
-  },
 };
 </script>