Update highlights on cache change

client/src/components/content-blocks/ContentComponent.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineAsyncComponent, ref, computed, onMounted } from 'vue';
+import { defineAsyncComponent, ref, computed, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
 import { constructContentComponentBookmarkMutation } from '@/helpers/update-content-bookmark-mutation';
 import { useMutation } from '@vue/apollo-composable';
@@ -144,6 +144,21 @@ const componentClass = computed(() => {
   }
   return classes;
 });
+const paragraphs = computed(() =>
+  contentComponentDiv.value ? contentComponentDiv.value.getElementsByTagName('p') : []
+);
+
+watch(
+  () => filteredHighlights.value.length,
+  () => {
+    for (const paragraph of paragraphs.value) {
+      console.log(paragraph);
+      const instance = new Mark(paragraph);
+      instance.unmark();
+    }
+    markHighlights();
+  }
+);
 
 const addNote = (id: string) => {
   const type = Object.prototype.hasOwnProperty.call(props.parent, '__typename')
@@ -179,33 +194,28 @@ const bookmarkContent = (bookmarked: boolean) => {
       bookmarked,
     },
   };
-  console.log(newVars);
   mutateBookmarkContent(newVars);
 };
 
-onMounted(() => {
-  setTimeout(() => {
-    if (contentComponentDiv.value) {
-      const paragraphs = contentComponentDiv.value.getElementsByTagName('p');
+const markHighlights = () => {
   for (const highlight of filteredHighlights.value) {
-        console.log(paragraphs);
-        console.log(highlight);
-
-        const element = paragraphs[highlight.paragraphIndex];
-        console.log(element);
+    const element = paragraphs.value[highlight.paragraphIndex];
     const instance = new Mark(element);
-        console.log(instance);
     const ranges: Mark.Range[] = [
       {
         start: highlight.startPosition,
-            length: highlight.startPosition,
+        length: highlight.selectionLength,
       },
     ];
-        console.log(ranges);
-        instance.markRanges(ranges);
+    instance.markRanges(ranges, {
+      className: `highlight highlight--${highlight.color}`,
+    });
   }
-    }
-  }, 2000);
+};
+
+onMounted(() => {
+  console.log('onMounted ContentComponent called');
+  setTimeout(markHighlights, 500);
 });
 </script>