Make ContentEditable cursor behave normally (move up/down 1 line)

I have a ContentEditable div that I’m using to try to make a WYSIWYG editor (using Chromium 83/latest electron)

The problem is that when hitting enter to make a new line it’s really inconsistent with what it inserts into the div, which causes the cursor to act really weird when pressing Up or Down.

For example when you press Up it sometimes jumps halfway up the page for no apparent reason, and other times it just jumps up to the nearest div tag that it can find, instead of just moving 1 line up.

My question is what can I do, either by handling enter presses or changing something about the editor div, to make the cursor just move up and down line by line like a regular text editor? (even if the line is blank)

Also while positing this on Chomium-dev I realized that Google Group’s (old style, not new Groups) post editor (which is a contentEditable div) shows this behavior that I’m looking for, so if anyone knows how that works that could help.

It seems like wrapping every line in a div would work, and that’s what Chrome is supposed to do by default, but when spamming enter Chrome only inserts a div tag sometimes.

I’ve tried:

  • Inserting a unicode “newline” character on enter (which breaks the native WYSIWYG html editing, for example pressing enter won’t carry on a list or clear formatting)
  • Changing the default paragraph separator to ‘p’, still only places them randomly, not every line
  • Inserting a br on enter press, only places it once
  • Manually inserting div tags, doesn’t work
  • Executing document.execCommand(“insertLineBreak”)

And all of these either don’t work at all or still cause the cursor to jump up to random places in the editor when pressing Up or Down. I just want it to move up and down 1 line like regular text editors.

I even see this happen in modern WYSIWYG editors that I found online (but surprisingly the Google Groups post editor shows the correct behavior), and can’t find a fix anywhere.

Any help appreciated