Different ways to check if a keyDown or keyPress event is originating from a text element, usually to avoid processing it.

isEventTargetComposable.ts

// There are multiple ways to check for that, here are a couple that I use!

export function isComposableElement(element: Maybe<HTMLElement | Element>) {
  if (!element) {
    return false;
  }

  return (
    (element as HTMLElement).contentEditable === 'true' || element.tagName === 'INPUT' || element.tagName === 'TEXTAREA'
  );
}
 
export function isComposableEvent(event: KeyboardEvent): boolean {
  const target = (event.composedPath?.()?.[0] || event.target) as HTMLElement;

  const hasAttribute = typeof target?.hasAttribute === 'function' ? target.hasAttribute('contenteditable') : false;

  // when an input field is focused we don't want to trigger deletion or movement of nodes
  return ['INPUT', 'TEXTAREA'].includes(target?.tagName) || hasAttribute;
}

function onKeydown(e: KeyboardEvent) {
  const shouldHandle = !isTextualElement(document.activeElement);
  // ...
}