キャレットから最も近いHTMLタグのid属性を取得したい

Question

contenteditableのdivでエディタを作っていて、キャレットから一番近いHTMLタグのid属性を常に把握していきたいのですが、これがうまくいきません。

idを常に把握しておきたい理由
下の画像のように、contenteditableなdivで作ったテキスト入力エリアの横に、画像やYouTubeを挿入するためのボタンを用意していて、それを挿入する場所を指定するため。

現状
divの中ではEnterを押すと新しい<p></p>を作成し、そこにランダムにidを割り振るようにしています。
そこで、あとはkeypressなどで現状のタグの中のidを把握できれば完了なのですが、そこがうまくいきません。

以下のようにやればできるかと思ったのですができず、他の方法を調べてもできる方法が見つかりません。
わかる方、教えてください。

<div id='body-text' class='body-text' contenteditable=true data-placeholder='Body Contents'></div>

var div = document.getElementById('body-text')
div.addEventListener('keypress', onKeyPress)

function onKeyPress(e) {
    var check = document.activeElement
    console.log(check.getAttribute('id'))//body-textが帰ってきてしまう、アクティブなのは親のdivだと判定されてしまうようです
    }

追記
状況をわかりやすくするためにサンプルを作成しました。
以下のサンプルで現状とやりたいことを確認いただければと思います。
現状では<div>の最後の子要素としてYoutubeの埋め込みが入ってしまっているのですが、これを最後にキャレットが当たっていた場所に挿入するようにしたいです。

サンプル

Comments

[MaShiRo_H]

もし解決済みでしたら申し訳ありませんが、いまいち画像やご説明から状況が掴みにくいので、今一度「contenteditableなdivで作ったテキスト入力エリア」の提示をお願いしてもよろしいですか？

[退会済みユーザー]

コメントいただきありがとうございます。まだ解決できていなかったので助かります。jsfiddleで実際に動かせるサンプルを作り、質問欄に追加しておいたので、ご確認お願いします。ちなみに、この方法に固執しているわけではなく、他に挿入したい場所に挿入できるのであればどのような方法でもいいので教えていただきたいです。