I want to design a component composed of contenteditables that let’s me maneuver between different contenteditables, and also lets me fire key events. There are several ways I tried doing this:

1.

<div>
    <span contenteditable="true"></span>
    <span contenteditable="true"></span>
</div>

And then I had keyevent handlers the spans that lets me change focus to another span by ie the up/down/left/right arrow keys.

The only problem is that I will not be able to make cross span selections like this as such:

pretendng that the two lines are different spans.

I tried manipulating the selection but that makes my other div lose focus.

2.

<div contenteditable="true">
    <span contenteditable="true"></span>
    <span contenteditable="true"></span>
</div>

This achieves my goals of cross span selection, but no keyevents are fired (this is apparently expected). I need my key events as I do other stuff with my spans.

According to this post:
Detect keyup event of contenteditable child whose parent is a contenteditable div

3.

<div contenteditable="true">
  <div contenteditable="false">
    <span contenteditable="true"></span>
    <span contenteditable="true"></span>
  </div>
</div>

This fires the keyevents. Great! But I can no longer move between my contenteditables. This is expected as the middle div is obviously not a contenteditable.

I’m wondering if there are ways that I can achieve a middle ground with this.

The main reason for me needing to migrate away from my custom key event handlers is due to my attempt at achieving multiple span selections. I’m looking to achieve this while maintaining the functionality of the code I currently have.

Thanks