From 06f5d125938c4c203769dd2b77db2c80d1b84dee Mon Sep 17 00:00:00 2001
From: Mateusz Russak <mateusz@russak.biz>
Date: Mon, 26 Feb 2024 10:23:19 +0100
Subject: [PATCH 1/3] fix: dynamically load pdf component

---
 ui/src/core_components/embed/CorePDF.vue | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/ui/src/core_components/embed/CorePDF.vue b/ui/src/core_components/embed/CorePDF.vue
index a9eb3e8c6..620e6c09e 100644
--- a/ui/src/core_components/embed/CorePDF.vue
+++ b/ui/src/core_components/embed/CorePDF.vue
@@ -103,8 +103,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { inject, ref, watch, computed } from "vue";
-import { VuePDF, usePDF } from "@tato30/vue-pdf";
+import { inject, ref, watch, computed, onMounted } from "vue";
 import injectionKeys from "../../injectionKeys";
 import "@tato30/vue-pdf/style.css";
 
@@ -112,7 +111,7 @@ type MatchType = { str: string; page: number; index: number };
 
 const fields = inject(injectionKeys.evaluatedFields);
 
-const { pdf, pages } = usePDF(fields.source);
+let pdf, pages, VuePDF;
 
 const highlightText = computed(() => {
 	return fields.highlights.value
@@ -136,6 +135,14 @@ const loading = ref(false);
 const pagesLoaded = ref(0);
 const highlightsList = ref([]);
 
+onMounted(async () => {
+	const VuePDFLib = await import("@tato30/vue-pdf");
+	VuePDF = VuePDFLib.VuePDF;
+	const usePDF = VuePDFLib.usePDF;
+	({ pdf, pages } = usePDF(fields.source));
+	reload();
+});
+
 const reload = () => {
 	loading.value = true;
 	pagesLoaded.value = 0;
@@ -258,6 +265,8 @@ const decrementScale = () => {
 	scale.value = scale.value > 0.25 ? scale.value - 0.1 : scale.value;
 };
 
+
+
 watch([highlightsList, pagesLoaded], () => {
 	if (
 		(!highlightText.value || highlightsList.value.length === pages.value) &&

From 40cd7499e5c2e4c24fb4b199034c5cc57295e691 Mon Sep 17 00:00:00 2001
From: Mateusz Russak <mateusz@russak.biz>
Date: Mon, 26 Feb 2024 10:27:36 +0100
Subject: [PATCH 2/3] chore: linter errors fix

---
 ui/src/core_components/embed/CorePDF.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/ui/src/core_components/embed/CorePDF.vue b/ui/src/core_components/embed/CorePDF.vue
index 620e6c09e..12379da05 100644
--- a/ui/src/core_components/embed/CorePDF.vue
+++ b/ui/src/core_components/embed/CorePDF.vue
@@ -265,8 +265,6 @@ const decrementScale = () => {
 	scale.value = scale.value > 0.25 ? scale.value - 0.1 : scale.value;
 };
 
-
-
 watch([highlightsList, pagesLoaded], () => {
 	if (
 		(!highlightText.value || highlightsList.value.length === pages.value) &&

From ee4719edb711cf0bee5e9ba1c38ade5f96739262 Mon Sep 17 00:00:00 2001
From: Mateusz Russak <mateusz@russak.biz>
Date: Mon, 26 Feb 2024 14:20:22 +0100
Subject: [PATCH 3/3] chore: fixed problem when removing the pdf component

---
 ui/src/core_components/embed/CorePDF.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/src/core_components/embed/CorePDF.vue b/ui/src/core_components/embed/CorePDF.vue
index 12379da05..2e6c43a41 100644
--- a/ui/src/core_components/embed/CorePDF.vue
+++ b/ui/src/core_components/embed/CorePDF.vue
@@ -225,6 +225,7 @@ const gotoHighlight = (matchIdx: number) => {
 		return;
 	}
 	const match = matches.value[matchIdx - 1];
+	if (!match) return;
 	const matchEls = rootEl.value.querySelectorAll(
 		`div[page='${match.page}'] span.highlight`,
 	);