<script>

  import { escapeKey } from '$lib/actions/escape-key.svelte';

</script>

<div use:escapeKey={() => alert('^_^')}>

  <p>Press escape key</p>

</div>

// Track components using escape key action

const activeKeyListeners: Set<HTMLElement> = new Set();

export function escapeKey(node: HTMLElement, callback: (event: KeyboardEvent) => void) {

  function handleKeydown(event: KeyboardEvent) {

    if (event.key === 'Escape') {

      // Execute the callback of top most element

      const elements = Array.from(activeKeyListeners);

      const topmostElement = elements[elements.length - 1];

      if (node === topmostElement) callback(event);

    }

  }

  $effect(() => {

    activeKeyListeners.add(node);

    document.addEventListener('keydown', handleKeydown);

    return () => {

      activeKeyListeners.delete(node);

      document.removeEventListener('keydown', handleKeydown);

    };

  });

}