From 2ee56aa3c01c2790c3b52f54b5dd95a724ad3be5 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 29 Feb 2024 10:50:52 +0100
Subject: [PATCH] Fix positioning of popover

---
 client/src/helpers/highlight.ts | 85 +++++++++++++++++++--------------
 1 file changed, 50 insertions(+), 35 deletions(-)

diff --git a/client/src/helpers/highlight.ts b/client/src/helpers/highlight.ts
index 71b6196d..cfc6bf71 100644
--- a/client/src/helpers/highlight.ts
+++ b/client/src/helpers/highlight.ts
@@ -292,43 +292,51 @@ const onUpdateTextCurry = (highlight: HighlightNode) => (text: string) =>
     },
   });
 
-const markClickListenerCurry = (popoverWrapper: HTMLElement | null, highlight: HighlightNode) => () => {
-  if (popoverWrapper) {
-    const onChooseColor = async (color: string) => {
-      try {
-        const {
-          data: {
-            updateHighlight: { highlight: newHighlight },
-          },
-        } = await doUpdateHighlight({
-          input: {
-            color: color,
-            id: highlight.id,
-          },
-        });
+interface ClickListenerCurryOptions {
+  wrapper: HTMLElement; // the element the popover will be the direct child of, which has relative positioning
+  parent: HTMLElement; // the element (paragraph/list) the highlight is inside
+  highlight: HighlightNode;
+}
+const markClickListenerCurry =
+  ({ wrapper, parent, highlight }: ClickListenerCurryOptions) =>
+  () => {
+    if (wrapper) {
+      const onChooseColor = async (color: string) => {
+        try {
+          const {
+            data: {
+              updateHighlight: { highlight: newHighlight },
+            },
+          } = await doUpdateHighlight({
+            input: {
+              color: color,
+              id: highlight.id,
+            },
+          });
 
-        // we need to refresh the sidebar
-        highlightSidebar.open({
-          highlight,
-          onUpdateText: onUpdateTextCurry(newHighlight),
-        });
-      } catch (error) {
-        console.error('Error updating highlight:', error);
-      }
-    };
+          // we need to refresh the sidebar
+          highlightSidebar.open({
+            highlight,
+            onUpdateText: onUpdateTextCurry(newHighlight),
+          });
+        } catch (error) {
+          console.error('Error updating highlight:', error);
+        }
+      };
 
-    popover.show({
-      wrapper: popoverWrapper,
-      offsetTop: 0,
-      onChooseColor,
-      onDelete: deleteHighlightCurry(highlight),
+      const top = parent.getBoundingClientRect().top - wrapper.getBoundingClientRect().top;
+      popover.show({
+        wrapper: wrapper,
+        offsetTop: top,
+        onChooseColor,
+        onDelete: deleteHighlightCurry(highlight),
+      });
+    }
+    highlightSidebar.open({
+      highlight,
+      onUpdateText: onUpdateTextCurry(highlight),
     });
-  }
-  highlightSidebar.open({
-    highlight,
-    onUpdateText: onUpdateTextCurry(highlight),
-  });
-};
+  };
 
 export const markHighlight = (highlight: HighlightNode, element: HTMLElement, popoverElement: HTMLElement | null) => {
   const instance = new Mark(element);
@@ -345,7 +353,14 @@ export const markHighlight = (highlight: HighlightNode, element: HTMLElement, po
     each: (newMark: HTMLElement) => {
       newMark.dataset.id = highlight.id;
       newMark.dataset.cy = 'highlight-mark';
-      newMark.addEventListener('click', markClickListenerCurry(popoverElement, highlight));
+      newMark.addEventListener(
+        'click',
+        markClickListenerCurry({
+          wrapper: popoverElement,
+          parent: element,
+          highlight,
+        })
+      );
     },
   });
 };