From 9fe8139576d67ba225cf1a78e04b17381999681d Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Wed, 27 Nov 2024 14:02:02 -0500
Subject: [PATCH] Enable selecting the text underneath annotations Fixes #778

---
 .../components/viewer/AnnotationLayer.svelte  |  2 +-
 src/lib/components/viewer/PDFPage.svelte      | 29 +++++++++++++++++++
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/viewer/AnnotationLayer.svelte b/src/lib/components/viewer/AnnotationLayer.svelte
index 45fe77f44..dc2b6141d 100644
--- a/src/lib/components/viewer/AnnotationLayer.svelte
+++ b/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 {
diff --git a/src/lib/components/viewer/PDFPage.svelte b/src/lib/components/viewer/PDFPage.svelte
index 4e944d18d..37f02e43a 100644
--- a/src/lib/components/viewer/PDFPage.svelte
+++ b/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);
   }