refactor: extract duplicated isEditableElement util

Author: serhalp

app/app.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Directions } from '@nuxtjs/i18n'
 import { useEventListener } from '@vueuse/core'
+import { isEditableElement } from '~/utils/input'
 
 const route = useRoute()
 const router = useRouter()
@@ -39,12 +40,7 @@ if (import.meta.server) {
 // "/" focuses search or navigates to search page
 // "?" highlights all keyboard shortcut elements
 function handleGlobalKeydown(e: KeyboardEvent) {
-  const target = e.target as HTMLElement
-
-  const isEditableTarget =
-    target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable
-
-  if (isEditableTarget) return
+  if (isEditableElement(e.target)) return
 
   if (e.key === '/') {
     e.preventDefault()

app/components/AppHeader.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { isEditableElement } from '~/utils/input'
+
 withDefaults(
   defineProps<{
     showLogo?: boolean
@@ -62,11 +64,7 @@ function handleSearchFocus() {
 onKeyStroke(
   ',',
   e => {
-    // Don't trigger if user is typing in an input
-    const target = e.target as HTMLElement
-    if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
-      return
-    }
+    if (isEditableElement(e.target)) return
 
     e.preventDefault()
     navigateTo('/settings')
@@ -79,12 +77,7 @@ onKeyStroke(
   e => {
     // Allow more specific handlers to take precedence
     if (e.defaultPrevented) return
-
-    // Don't trigger if user is typing in an input
-    const target = e.target as HTMLElement
-    if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
-      return
-    }
+    if (isEditableElement(e.target)) return
 
     e.preventDefault()
     navigateTo('/compare')

app/pages/[...package].vue

@@ -4,6 +4,7 @@ import type { JsrPackageInfo } from '#shared/types/jsr'
 import { assertValidPackageName } from '#shared/utils/npm'
 import { joinURL } from 'ufo'
 import { areUrlsEquivalent } from '#shared/utils/url'
+import { isEditableElement } from '~/utils/input'
 
 definePageMeta({
   name: 'package',
@@ -319,10 +320,7 @@ useSeoMeta({
 onKeyStroke(
   '.',
   e => {
-    const target = e.target as HTMLElement
-    if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
-      return
-    }
+    if (isEditableElement(e.target)) return
     if (pkg.value && displayVersion.value) {
       e.preventDefault()
       navigateTo({
@@ -339,10 +337,7 @@ onKeyStroke(
 onKeyStroke(
   'd',
   e => {
-    const target = e.target as HTMLElement
-    if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
-      return
-    }
+    if (isEditableElement(e.target)) return
     if (docsLink.value) {
       e.preventDefault()
       navigateTo(docsLink.value)
@@ -352,10 +347,7 @@ onKeyStroke(
 )
 
 onKeyStroke('c', e => {
-  const target = e.target as HTMLElement
-  if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
-    return
-  }
+  if (isEditableElement(e.target)) return
   if (pkg.value) {
     e.preventDefault()
     router.push({ path: '/compare', query: { packages: pkg.value.name } })

app/utils/input.ts

@@ -4,3 +4,12 @@ export const noCorrect = {
   autocorrect: 'off',
   spellcheck: 'false',
 } as const
+
+/**
+ * Check if an event target is an editable element (input, textarea, or contenteditable).
+ * Useful for keyboard shortcut handlers that should not trigger when the user is typing.
+ */
+export function isEditableElement(target: EventTarget | null): boolean {
+  if (!target || !(target instanceof HTMLElement)) return false
+  return target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable
+}