ContentEditable="true" Как всегда оборачивать текст в под-div-ы?

Question

[Игорь]

Здраствуйте, как извесно, при использовании contenteditable="true" пользователь может вводить текс в div
Сначала текст пишется в основной div, а после первого ентера создаются под-div-и формирующие перенос строки.
Документацыя —
https://developer.mozilla.org/en-US/docs/Web/Guide...
В документации описано как изменить теги или убрать их. Однако как можно сделать так чтоб текст введенный пользоателем до первого ентера тоже оборачивался в div.
Тоесть по дефолту:
qwerty<div>ytrewq</div>
мне же нужно
<div>qwerty</div><div>ytrewq</div>
Пример дефолтного кода который не оборачивает текст до первого ентера в под-div, а только после

<div id="console" contenteditable="true"></div>
<style>
#edit{
width:50%;
height:50%;
background:green;
}
</style>

Answer 1

[iBird Rose]

не знаю как в div обернуть красиво, НО если ты задашь этому диву (#edit) стиль display: inline-block;, то все переносы будут через br

Answer 2

[profesor08]

Следи за изменением содержимого своего блока, с помощью MutationObserver, и решай когда и где добавлять дополнительную обертку. Например обернуть все текстовые ноды в div.

Answer 3

[Надим]

Если нужен редактор, лучше использовать TinyMCE, принцип работы в него такой же, но доведены до ума все важные моменты.

Answer 4

[Игорь]

Мне нужно вставлять какой-нибудь div, например <div class="superDiv">text</div> перед тем что написал пользователь.
Как я понимаю мне нужно воспользоватся

console.insertBefore(dynamicDiv, /*То что напечатал пользователь*/);

Или

console.insertAdjacentHTML('beforeend, '<div class="superDiv">text</div>');
//Здесь проблема что текст печатаемый пользователем никак не влияет на beforeend

Полный пример кода

<div id="console" contenteditable="true"></div>
<style>
#edit{S
width:50%;
height:50%;
background:green;
}
</style>
<script>
	document.getElementById("console").addEventListener("keydown", () => {
		let dynamicDiv = document.createElement("div");
		dynamicDiv.innerHTML = "123";
		document.getElementById("console").insertBefore(dynamicDiv, /*То что напечатал пользователь*/)
	}, true);
</script>

Comments

[Игорь]

Я понимаю что логичние былоб создать контейнер див в котором text-area, однако мне нужно чтоб ето работало как cmd.exe на виндовс. Тоесть вокус всегда должен быть на ипуте. Нужно предусмотреть возможность выделять текст с верхних super-div-ов, копировать — и не терять фокус с инпута... чтоб пользователь сразу после ctrl+c смог нажать ctrl+v нечего не кликая и оно добавилось в конец... Я просто не знаю как подойти к такой проблеме...

Буду рад вашим идеям и наставлениям на путь истинный