Feature: Arrow navigation and multiple blocks text selection

[SuperOleg39]

For now, every block is separate tag with contenteditable attribute.

Unfortunately, you can select text only in one focused contenteditable element, and native keyboard navigation not working between blocks.

One possible solution - add contenteditable attribute to editor root element. All of mentioned features will work natively.

There is a big disadvantage - some event handlers to nested contenteditable blocks will not works, example of this problem - https://stackoverflow.com/a/24930829

So, there is a few ways to solve this problem:

1. Handle text selection and arrow navigation manually - possible rabbit hole of problems and workarounds
2. Handle root contenteditable elements tree outside of React - need to rewrite existings blocks

Need to investigate and select optimal solution.

[SuperOleg39]

Another solution - is custom events propagation, e.g. https://codepen.io/surf4sites/pen/rNogYzN

But event will be not "trusted", can be problems for example with save content to buffer.

Too many problems with this solution

[SuperOleg39]

Good source of information how this can work (also with Notion source code research)

• https://github.com/WordPress/gutenberg/pull/38892
• https://twitter.com/notionhq/status/1483884489235255297
• https://twitter.com/jitl/status/1483918085384028163

And another useful info about contenteditable

• https://github.com/bangle-io/bangle-editor
• https://answerly.io/blog/my-pain-developing-a-WYSIWYG-editor-with-contenteditable/

[SuperOleg39]

More about root contenteditable issues and possible solutions - https://github.com/Dashibase/lotion/issues/13#issuecomment-1201343949