fix: avoid registering text click listeners multiple times

Author: paulpestov

src/components/ContentView.vue

@@ -56,11 +56,14 @@ const contentStyle = computed(() => ({
   fontSize: `${props.fontSize}px`,
 }));
 
+let clickListener = null
+
 watch(
   () => props.url,
   loadContent,
   { immediate: true },
 );
+
 async function loadContent(url) {
   const annotationStore = useAnnotationsStore();
   content.value = '';
@@ -82,7 +85,9 @@ async function loadContent(url) {
 
       const root = textContainer.value;
       annotationStore.addHighlightAttributesToText(root);
-      await annotationStore.addHighlightClickListeners(root);
+
+      if (clickListener) root.removeEventListener('click', clickListener);
+      clickListener = annotationStore.addHighlightClickListeners(root);
 
       // In case of multiple text panels, we need to pass the panel index to track changes on the content in the annotation panel.
       contentStore.setActiveContentMap(props.url, props.panelIndex);

src/stores/annotations.ts

@@ -328,7 +328,8 @@ export const useAnnotationsStore = defineStore('annotations', () => {
 
   const addHighlightClickListeners = (root: HTMLElement) => {
     if (!root) return;
-    root.addEventListener('click', ({target}) => {
+
+    const listener = ({target}) => {
       // The click event handler works like this:
       // When clicking on the text we pick the whole part of the text which belongs to the highest parent annotation.
       // Since the annotations can be nested we avoid handling each of them separately
@@ -346,7 +347,11 @@ export const useAnnotationsStore = defineStore('annotations', () => {
         return;
       }
       TextEventBus.emit('click', { target })
-    });
+    }
+
+    root.addEventListener('click', listener);
+
+    return listener
   };
 
   function getNearestParentAnnotation(element) {