I have a ContentEditable div that I'm using to try to make a WYSIWYG editor (using Chromium 83)

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)

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 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></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, and can't find a fix anywhere.

Any help appreciated

Edit:

I went and posted this question on the Chromium-Dev google group, and the post editor for Google Groups (the old version, not sure about the "new look" editor) shows the behavior that I'm looking for, so if anyone knows how that works that might help

Edit 2:

Someone on Reddit referred me to ProseMirror and it's a very well-behaved WYSIWYG editor and I ended up using that for my project.