feat(plugin-emoji): add 'input' event handler for mobile browsers w/ …

…virtual keyboard (#93)

* add 'input' event handler for mobile browsers w/ virtual keyboard

* fix 'input' event handler for mobile browsers w/ virtual keyboard

packages/plugin-emoji/src/lib/Emoji.svelte

@@ -18,19 +18,23 @@
 
 	onMount(() => {
 		carta.input?.textarea.addEventListener('keydown', handleKeyDown);
-		carta.input?.textarea.addEventListener('keyup', handleKeyUp);
+		carta.input?.textarea.addEventListener('input', handleKeyInput);
 		carta.input?.textarea.addEventListener('click', hide);
 		carta.input?.textarea.addEventListener('blur', hideAfterDelay);
 	});
 
 	onDestroy(() => {
 		carta.input?.textarea.removeEventListener('keydown', handleKeyDown);
-		carta.input?.textarea.removeEventListener('keyup', handleKeyUp);
+		carta.input?.textarea.removeEventListener('input', handleKeyInput);
 		carta.input?.textarea.removeEventListener('click', hide);
 		carta.input?.textarea.removeEventListener('blur', hideAfterDelay);
 	});
 
 	function hideAfterDelay() {
+		const el = document.activeElement;
+		const ignoreBlur = el && el.tagName === 'TEXTAREA' && el.id === 'md';
+		if (ignoreBlur) return;
+
 		setTimeout(hide, 250);
 	}
 
@@ -70,26 +74,48 @@
 					hoveringIndex = (emojis.length + hoveringIndex + 1) % emojis.length;
 				}
 			}
-		} else if (e.key === ':') {
-			// Open
-			visible = true;
-			colonPosition = carta.input.textarea.selectionStart;
-			filter = '';
 		}
 	}
 
-	function handleKeyUp(e: KeyboardEvent) {
+	function handleKeyInput(e: KeyboardEvent) {
 		if (!carta.input) return;
+
+		if (e.inputType === 'insertText' && e.data === ':') {
+			if (!visible) {
+				// open
+				visible = true;
+				colonPosition = carta.input.textarea.selectionStart - 1;
+				filter = '';
+				return;
+			} else {
+				// close
+				visible = false;
+				return;
+			}
+		}
 		if (!visible) return;
-		// Has moved out of slash argument
 		if (carta.input.textarea.selectionStart < colonPosition) {
 			visible = false;
-		} else if (e.key.length === 1 || e.key === 'Backspace') {
+			return;
+		}
+		if (
+			e.inputType === 'insertText' ||
+			e.inputType === 'insertCompositionText' ||
+			e.inputType === 'deleteContentBackward'
+		) {
 			filter = carta.input.textarea.value.slice(
 				colonPosition + 1,
 				carta.input.textarea.selectionStart
 			);
-			emojis = nodeEmoji.search(filter).slice(0, maxResults);
+
+			const last_char = filter.length ? filter[filter.length - 1] : '';
+
+			if (last_char === ' ') {
+				visible = false;
+				return;
+			}
+
+			emojis = filter.length ? nodeEmoji.search(filter).slice(0, maxResults) : [];
 			hoveringIndex = 0;
 		}
 	}