JSFiddle - React, Tailwind, and code Playground

HTML

<div contenteditable="true" class="input_text">
  This is a placeholder.
  <div>
    <br>
  </div>
  <div>
  The issue I'm having is that the linebreaks and the carriage returns are completely gone from the deep clone's .innerText property.
  </div>
  <div>
    <br>
  </div>
  <div>
    Try and convert it to see the text layout removed.
  </div>
</div>


<button>
convert
</button>

CSS

body{
  font-family: sans-serif;
  max-width: 500px
}

.input_text{
  border: 1px solid grey;
  padding: 10px;
}

button{
  margin-top: 20px;
}

JavaScript

const btn = document.querySelector('button')
const inputText = document.querySelector('.input_text')

btn.addEventListener('click', (e) =>{
const tempText = inputText.cloneNode(true)
console.log(tempText.innerText)

inputText.innerHTML = tempText.innerText
})