Как пройтись по компонентам, требующим удовлетворения, с помощью клавиш со стрелками в javascript (или jquery реализации)?

Question

Я работал над своим подпроектом для реализации в текстовом редакторе Notion. Этот текстовый редактор состоит из нескольких contenteditable вместо использования одного contenteditable для всего текста.

Проблема, с которой я столкнулся, заключается в том, что я не могу go вверх или вниз клавишами со стрелками, если я не определяю функции, слушая клавиши со стрелками (37 ~ 40) и определяя различные случаи для перемещения вверх или вниз или переместиться от кончика левой стороны кверху или что-то в этом роде.

Является ли это природой такого характера, поэтому разработчики должны решать все случаи? или я не знаю простой способ реализовать это, не пытаясь определить все возможные сценарии?

Будем рады любым замечательным отзывам!

<div class="classA">
    <div class="selectable" data-indent='0'>
        <div 
        class="contenteditable" contenteditable="true" 
        data-indent='0'
        placeholder="Enter text here..."
        style="min-height:1em; 
        width:100%;
        padding-top:3px; padding-bottom:3px;
        border:0px solid gold;"></div>
    </div>

    <div class="selectable" data-indent='0'>
        <div 
        class="contenteditable" contenteditable="true" 
        data-indent='0'
        placeholder="Enter text here..."
        style="min-height:1em; 
        width:100%;
        padding-top:3px; padding-bottom:3px;
        border:0px solid gold;"></div>
    </div>

    <div class="selectable" data-indent='0'>
        <div 
        class="contenteditable" contenteditable="true" 
        data-indent='0'
        placeholder="Enter text here..."
        style="min-height:1em; 
        width:100%;
        padding-top:3px; padding-bottom:3px;
        border:0px solid gold;"></div>
    </div>

</div>