Trigger event on new line in contentediable div

I am trying to listen for an event that indicates a new line has been created in a contenteditable div. The purpose is to eventually show a user some options each time a new empty line is created and the caret is on that line, or if the user clicks the caret position to a currently empty line.

In my book there seem to be three events that would lead to the user being on a new line within a contentediable div:

• pressing enter
• pasting content that has a empty new line at the end
• clicking the caret position to an empty line

of course in a contentediable div a new line means different things to different browsers, in chrome it seems to create <p></p> tags, but having browsed around SO enough it seems that other browsers might create <div></div> or perhaps another tag - <br/>

I've now tried to figure this out a couple of times and just have to get it done. Is it really the best way to listen for new elements being added under that div, and/or check if the caret position is currently within empty 'new line' tags. checking each time the caret moves seems highly inefficient - is there a better way to do this?

To summarise for tldr; people

• is there a better way to check for new lines in contenteditable divs
• how would i trigger an event based upon that efficiently

Just fyi this is within an Angular context and I have jQuery also.

via Chebli Mohamed