Adds arrow navigation to mentions options (#3)

sertxudeveloper · Jul 29, 2022 · 0a5a07b · 0a5a07b
1 parent 47dc2d0
commit 0a5a07b
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 3 deletions.
diff --git a/src/plugins/mentions/Mentions.ts b/src/plugins/mentions/Mentions.ts
@@ -52,10 +52,63 @@ export default class Mentions extends Plugin {
         if (this.editor.config.mentions.length === 0) return;
 
         this.editor.textarea.addEventListener('keyup', this.onKeyUp.bind(this), { once: true });
+
+        if (this.mentionsListbox) {
+            let items = this.mentionsListbox.querySelectorAll('.mentions-listbox-item');
+
+            if (event.key === 'ArrowUp') {
+                event.preventDefault();
+
+                let current = this.mentionsListbox.querySelector('.mentions-listbox-item-active');
+
+                if (!current) {
+                    items[items.length - 1].classList.add('mentions-listbox-item-active');
+                } else {
+                    let index = Array.from(items).indexOf(current);
+                    current.classList.remove('mentions-listbox-item-active');
+
+                    if (index > 0) {
+                        items[index - 1].classList.add('mentions-listbox-item-active');
+                    } else {
+                        items[items.length - 1].classList.add('mentions-listbox-item-active');
+                    }
+                }
+            } else if (event.key === 'ArrowDown') {
+                event.preventDefault();
+
+                let current = this.mentionsListbox.querySelector('.mentions-listbox-item-active');
+
+                if (!current) {
+                    items[0].classList.add('mentions-listbox-item-active');
+                } else {
+                    let index = Array.from(items).indexOf(current);
+                    current.classList.remove('mentions-listbox-item-active');
+
+                    if (index + 1 < items.length) {
+                        items[index + 1].classList.add('mentions-listbox-item-active');
+                    } else {
+                        items[0].classList.add('mentions-listbox-item-active');
+                    }
+                }
+            } else if (event.key === 'Enter' || event.key === 'Tab') {
+                event.preventDefault();
+
+                let current: HTMLDivElement = this.mentionsListbox.querySelector(
+                    '.mentions-listbox-item-active'
+                );
+
+                if (current) {
+                    current.click();
+                }
+            }
+        }
     }
 
     /** Use keyup instead of keydown event, pressed character not inserted until keyup */
     onKeyUp(event: KeyboardEvent): void {
+        // Check if the key is a letter or a number
+        if (event.key.length > 1 && event.key !== 'Backspace' && event.key !== 'Delete') return;
+
         this.debouncedHandler(event);
     }
 
@@ -171,6 +224,7 @@ export default class Mentions extends Plugin {
 
                 // Add the click event handler
                 element.addEventListener('click', this.onMentionClick.bind(this, item));
+                element.role = 'button';
 
                 return element;
             });
@@ -179,6 +233,9 @@ export default class Mentions extends Plugin {
 
             this.mentionsListbox.append(...mentionsElements);
 
+            // Mark the first item as active
+            mentionsElements[0].classList.add('mentions-listbox-item-active');
+
             this.editor.textarea.parentElement.appendChild(this.mentionsListbox);
         });
     }

diff --git a/src/scss/main.scss b/src/scss/main.scss
@@ -54,12 +54,12 @@
             }
 
             .mentions-listbox {
-                @apply border border-solid rounded-md shadow-md w-64 bg-white;
+                @apply border border-solid rounded-md shadow-md w-64 bg-white overflow-hidden;
 
                 .mentions-listbox-item {
-                    @apply py-2 px-3;
+                    @apply py-2 px-3 cursor-pointer;
 
-                    &:hover {
+                    &.mentions-listbox-item-active {
                         @apply bg-blue-100;
                     }