Merge pull request #9 from EGAMAGZ/development

Avoid triggerring easter eggs when typing on inputs

deno.json

@@ -1,6 +1,6 @@
 {
   "name": "@egamagz/paska-ovo",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "exports": "./mod.ts",
   "lock": false,
   "compilerOptions": {

example/.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+    "files.exclude": {
+        "**/.git": true,
+        "**/.svn": true,
+        "**/.hg": true,
+        "**/CVS": true,
+        "**/.DS_Store": true,
+        "**/Thumbs.db": true,
+        "**/.classpath": true,
+        "**/.project": true,
+        "**/.settings": true,
+        "**/.factorypath": true,
+        "**/node_modules": false
+    }
+}

example/package.json

@@ -10,18 +10,18 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/check": "^0.5.10",
-    "@astrojs/preact": "^3.2.0",
+    "@astrojs/check": "^0.7.0",
+    "@astrojs/preact": "^3.3.0",
     "@astrojs/tailwind": "^5.1.0",
     "@preact/signals": "^1.2.3",
     "@preact/signals-core": "^1.6.0",
-    "@tabler/icons-preact": "^3.3.0",
-    "astro": "^4.6.3",
-    "preact": "^10.20.2",
+    "@tabler/icons-preact": "^3.5.0",
+    "astro": "^4.9.2",
+    "preact": "^10.22.0",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5"
   },
   "devDependencies": {
-    "shiki": "^1.4.0"
+    "shiki": "^1.6.0"
   }
 }

src/paska-ovo.ts

@@ -7,6 +7,7 @@
 
 import type { Callback, EasterEgg, EasterEggState } from "./types.ts";
 import { codeToChars } from "./util/code.ts";
+import { isInputElement } from "./util/dom.ts";
 
 /**
  * Class that is used to manage easter eggs.
@@ -106,13 +107,18 @@ export class PaskaOvo {
 	}
 
 	/**
-	 * Handles the key event for the current instance of PaskaOvo.
+	 * Handles the key event for the current instance of PaskaOvo. In case the 
+	 * active element is an input element (select, input or textarea), it will 
+	 * not handle the key event to avoid triggering an easter egg.
 	 *
 	 * @param {KeyboardEvent} event - The key event to handle.
 	 * @param {EasterEgg[]} easterEggs - List of easter eggs to trigger.
 	 */
 	private handleKeyEvent(event: KeyboardEvent, easterEggs: EasterEgg[]) {
 		const { key } = event;
+
+		if (isInputElement(document.activeElement)) return;
+
 		for (const easterEgg of easterEggs) {
 			const actualCodePosition = this.easterEggState[easterEgg.tag] || 0;
 			const actualCode = easterEgg.code[actualCodePosition];

src/util/constants.ts

@@ -7,7 +7,7 @@
 /**
  *  A map of special key names to their corresponding standardized key codes.
  *  This is a constant record type to ensure immutability.
- */  
+ */
 export const SPECIAL_KEYS: Record<string, string> = {
     "slash": "/",
     "up": "ArrowUp",
@@ -21,3 +21,13 @@ export const SPECIAL_KEYS: Record<string, string> = {
     "tab": "Tab",
     "esc": "Escape",
 } as const;
+
+/**
+ * List of tag input elements.
+ */
+
+export const INPUT_ELEMENTS = [
+    "textarea",
+    "input",
+    "select"
+];

src/util/dom.ts

@@ -0,0 +1,11 @@
+import { INPUT_ELEMENTS } from "./constants.ts"
+
+/**
+ * Checks if the given element is an input element.
+ *
+ * @param {Element | null} actualElement - The element to check.
+ * @return {boolean} Returns true if the element is an input element, false otherwise.
+ */
+export const isInputElement =
+    (actualElement: Element | null): boolean =>
+        Boolean(actualElement && INPUT_ELEMENTS.includes(actualElement.tagName.toLowerCase()));