usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-11-07 16:07:35 +08:00
Code Issues Projects Releases Packages Wiki Activity

fix: dark mode tag selection and suggestion (#3004)

Browse source 
* 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
This commit is contained in:
Xylit 2024-02-27 02:16:56 +01:00 • committed by GitHub
parent 1ae9bf23a0
commit 5526355621
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
web/src/components/MemoEditor/Editor/TagSuggestions.tsx
View file

@ -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>