From 552635562104158e92518c820ebd74ffbea9fb56 Mon Sep 17 00:00:00 2001
From: Xylit <56483075+xyl1t@users.noreply.github.com>
Date: Tue, 27 Feb 2024 02:16:56 +0100
Subject: [PATCH] fix: dark mode tag selection and suggestion (#3004)

* fix: use correct higlight color on selecting a tag in darkmode

* fix: take scrolling into account in tab suggestion

Issue: When editing a long memo and editing a tag somewhere where the user has
to scroll down to, the tag suggestions would be out of place (too far down)
because the scrolling wouldn't be taken into account.

Fix: Substract the suggestions div by the scroll amount.

* fix: don't show tag suggestion when on '#'

Fixes this issue like this:
1. Text #tag text
        ^ backspace here
2. Text#tag text
       ^ space
3. Text #tag text
        ^ tag suggestion opens
---
 .../MemoEditor/Editor/TagSuggestions.tsx           | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/web/src/components/MemoEditor/Editor/TagSuggestions.tsx b/web/src/components/MemoEditor/Editor/TagSuggestions.tsx
index f236c265a..35fdf7635 100644
--- a/web/src/components/MemoEditor/Editor/TagSuggestions.tsx
+++ b/web/src/components/MemoEditor/Editor/TagSuggestions.tsx
@@ -75,11 +75,17 @@ const TagSuggestions = ({ editorRef, editorActions }: Props) => {
   };
 
   const handleInput = () => {
-    if (!editorRef.current) return;
+    const editor = editorRef.current;
+    if (!editor) return;
+
     select(0);
     const [word, index] = getCurrentWord();
-    const isActive = word.startsWith("#") && !word.slice(1).includes("#");
-    isActive ? setPosition(getCaretCoordinates(editorRef.current, index)) : hide();
+    const currentChar = editor.value[editor.selectionEnd];
+    const isActive = word.startsWith("#") && currentChar !== "#";
+
+    const caretCordinates = getCaretCoordinates(editor, index);
+    caretCordinates.top -= editor.scrollTop;
+    isActive ? setPosition(caretCordinates) : hide();
   };
 
   const listenersAreRegisteredRef = useRef(false);
@@ -106,7 +112,7 @@ const TagSuggestions = ({ editorRef, editorActions }: Props) => {
           onMouseDown={() => autocomplete(tag)}
           className={classNames(
             "rounded p-1 px-2 w-full truncate text-sm dark:text-gray-300 cursor-pointer hover:bg-zinc-200 dark:hover:bg-zinc-800",
-            i === selected ? "bg-zinc-300 dark:bg-zinc-700" : "",
+            i === selected ? "bg-zinc-300 dark:bg-zinc-600" : "",
           )}
         >
           <OverflowTip>#{tag}</OverflowTip>