How to limit clipboard events to fire only when it would have no other effect?

I've got a react app I'm trying to add clipboard functionality to. A lot of the app is made of divs that the user selects and rearranges. Occasionally they will have text areas and inputs to enter things into, or text they could select and copy. I've got my two event listeners:

  // Copy
  document.addEventListener('copy', (event) => {
    if (!selectedItem) {
      return; // No item has been selected
    }

    event.clipboardData?.setData('text/plain', selectedItem.id);
    event.clipboardData?.setData(
      'application/x-my-app-item-json',
      JSON.stringify(selectedItem),
    );

    event.preventDefault();
  });
  // Paste
  document.addEventListener('paste', (event) => {
    const itemJson = event.clipboardData?.getData(
      'application/x-my-app-item-json'
    );
    if (!itemJson) {
      return; // Nothing on the clipboard
    }

    let item;
    try {
      item = JSON.parse(itemJson);
    } catch {
      return; // malformed or incorrect json, ignore
    }

    insertItem(item);
    event.preventDefault();
  });

My expectation for inputs and text is that clipboard would behave as you'd expect. You can copy and paste from/into inputs. You can copy selected text. However if none of that occurs, it should fallback to the copy paste events set as part of document.addEventListener('copy/paste'), which copies and pastes data relating to the state and layout of the current page.

The problem I'm having right now is that regardless of what's selected, I'll override the clipboard events with my listener. So if I select text and try and copy, it's the page data that is copied instead. Similarly, if I am trying to paste into a text box, it will paste the text version of the copied data, but it will also trigger the page event.

The best workaround I've managed to come up with so far is to guard whether the target is the body:

if (event.target !== document.getElementsByTagName('body').item(0)) {
  // Early break as we've selected something else
  return;
}

However that doesn't always work, as sometimes the target will be something unrelated, (e.g. a recently focused button, or selected text during a paste action), that shouldn't interrupt the event handler.

To summarise the question. Is there a way to limit the clipboard event listener, so that it doesn't run when something else that should trigger a copy/paste event is selected, but will always run when the event would result in no existing behaviour?

The best solution I've found, (though probably not perfect) is to rely on both window.getSelection() and document.activeElement.

We can test to see if any text has been selected with:

const isPageTextSelected = () => {
  const selection = window.getSelection();
  return selection && !selection.isCollapsed;
};

We can also test to check if the activeElement right now is an <Input /> or <TextArea /> which we'd want the default behaviour for as well:

const isInputActive = () => {
  const { activeElement } = document;
  return activeElement instanceof HTMLInputElement
    || activeElement instanceof HTMLTextAreaElement
    || activeElement?.isContentEditable;
};

(Note, I include isContentEditable because we have some custom text fields which rely on div tags with contenteditable, which would be missed if just looking for inputs and text area elements)

Then it's just a matter of checking these during copy and paste, and exiting early without preventing the default behaviour:

  // Copy
  document.addEventListener('copy', (event) => {
    if (!selectedItem) {
      return; // No item has been selected
    }
    // === CHANGE HERE ===
    if (isPageTextSelected() || isInputActive()) {
      return; // We want to copy something other than the selected item
    }

    event.clipboardData?.setData('text/plain', selectedItem.id);
    event.clipboardData?.setData(
      'application/x-my-app-item-json',
      JSON.stringify(selectedItem),
    );

    event.preventDefault();
  });
  // Paste
  document.addEventListener('paste', (event) => {
    // === CHANGE HERE ===
    if (isInputActive()) {
      return; // We want to paste into a specific input
    }

    const itemJson = event.clipboardData?.getData(
      'application/x-my-app-item-json'
    );
    if (!itemJson) {
      return; // Nothing on the clipboard
    }

    let item;
    try {
      item = JSON.parse(itemJson);
    } catch {
      return; // malformed or incorrect json, ignore
    }

    insertItem(item);
    event.preventDefault();
  });

This of course assumes that we have no other types of items we want to be copying or pasting beyond text inputs. It doesn't actually check whether or not there is some default copy/paste event, only for specific elements which may have default copy/paste behaviour. For now though, it seems to be working for my use case.