ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Update highlights on cache change

This commit is contained in:
Ramon Wenger 2024-01-16 16:58:09 +01:00
parent 7932b65895
commit 4f72c9564d
1 changed files with 34 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
client/src/components/content-blocks/ContentComponent.vue
View File

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