Enable selecting the text underneath annotations

src/lib/components/viewer/AnnotationLayer.svelte

@@ -373,7 +373,7 @@ Assumes it's a child of a ViewerContext
     opacity: 0.5;
     pointer-events: all;
     mix-blend-mode: multiply;
-    /* pointer-events: none; */
+    pointer-events: none;
   }
 
   a.note-highlight.public {

src/lib/components/viewer/PDFPage.svelte

@@ -10,6 +10,7 @@ Selectable text can be rendered in one of two ways:
 - Passed in as a server-fetched JSON object
 -->
 <script lang="ts">
+  import { onMount } from "svelte";
   import type { TextPosition } from "$lib/api/types";
 
   import { page as pageStore } from "$app/stores";
@@ -174,6 +175,34 @@ Selectable text can be rendered in one of two ways:
     });
   }
 
+  function checkForHighlightClick(click: MouseEvent) {
+    const clickX = click.clientX;
+    const clickY = click.clientY;
+
+    const highlights: NodeListOf<HTMLElement> =
+      container.querySelectorAll(".note-highlight");
+    highlights.forEach((highlight) => {
+      const { top, left, right, bottom } = highlight.getBoundingClientRect();
+      const isSelectionClick = window.getSelection()?.type === "Range";
+      const isNoteClick =
+        clickX >= left &&
+        clickX <= right &&
+        clickY >= top &&
+        clickY <= bottom &&
+        !isSelectionClick;
+      if (isNoteClick) {
+        highlight.click();
+      }
+    });
+  }
+
+  onMount(() => {
+    container.addEventListener("click", checkForHighlightClick);
+    return () => {
+      container.removeEventListener("click", checkForHighlightClick);
+    };
+  });
+
   function onResize() {
     numericScale = fitPage(width, height, container, scale);
   }