I'm working on a browser extension that highlights the difficulty of certain words as you type in gmail. I'm using InboxSDK for the basic formatting changes.

On a basic level the logic I wrote does the following:

1. Extract the raw text from the composer (leveraging inboxSDK)
2. Pass the raw text to the format() function, and get back a newly generated HTML body
3. Replace the generated HTML output with the current HTML in the GMail composer (again leveraging InboxDSK)

There's a custom button from InboxSDSK in the GMail composer now. If you click it, what's described above will happen.

Now, I want to make the HTML body of the Gmail composer react as-you-type. (ie. As the user is typing an hard-to-read sentence, the editor should mark the sentence in red. As the user edits it, the red highlight should disappear.).

I thought this could be done in a couple of ways. None of them ended up working.

1. There's a bodyChange event from InboxDSK, but this immediately generates an infinite loop because as (1) the user start typing (2) the format() function replaces the old HTML with new formatting styles and that (3) triggers a bodyChange which will then trigger the format() function again and so on.

Code:

let OriginalText = document.querySelector('div[contenteditable][aria-label="Message Body"]').innerText;

function format() {
...

composeView.setBodyHTML(OutputText);
}

composeView.on('bodyChanged', function() {      
  format(OriginalText);
});

2. The second would be by using a keydown approach, so I wrote:

window.addEventListener('keydown', function (e) {
   if (e.keyCode == 90) {
     format(OriginalText);
   }
});

But apparently, this doesn't get executed in Gmail. Is it stopping event propagation?

How would you approach this?