contenteditable="true" "false"を入れ子にするといい感じに移動できる
- 文字列のindexをとって移動する？
- left座標を頑張ってとって移動する？
- でも途中で
<i>とか、キャレットを当てたくない箇所もあったりする… -
<b>, <u>, <h2>なども考えねば…
など普通に実装しようとすると、contenteditableでキャレットを上下移動するのは結構悩ましい問題です。
実はcontenteditableはtrueとfalseを入れ子にした状態で、contenteditable="true"の行から上下移動すると、自動的にfalseのDOMを飛ばし、次のtrueのDOMのいい感じの位置（left位置。そこに文章がなければ、飛びたいleft位置に最も近い文字の文末）にキャレットを送ってくれます。
もうややこしいカーソル制御のコードは一切必要ありません！やった！
例
こんな感じでtrueとfalseを入れ子にしたHTMLを用意します。
<div contenteditable="false">
<i>checkbox</i>
<p contenteditable="true">吾輩は猫である。</p>
</div>
<div contenteditable="false">
<i>・</i>
<p contenteditable="true">名前はまだ無い。</p>
</div>
<div contenteditable="false">
<i>・</i>
<p contenteditable="true">どこで生れたかとんと見当がつかぬ。</p>
</div>
（以下略）
GIF1
最下段の文章の「ある事は│」の位置から、キャレットを上に移動した図（見やすくするため、pタグにboderをつけています）
GIF2
最下段の文章の末尾「知った│」の位置から、キャレットを上に移動した図
意外と知られていなさそうだったので、contenteditableの闇にやむなく溺れているときの助けになればと思います。