Как сохранить пробелы и новые линии

Question

У меня есть таблица, внутри которой я использую <pre contenteditable="true">, где пользователь может просматривать и редактировать данные. Я хочу сохранить данные, которые пользователь вводит в переменную, в Javascript. Поскольку у меня здесь две проблемы

1. Я не могу удалить какой-либо ввод, т.е. кнопка Backspace не работает
2. Данные, которые я получаю в переменной JS не сохраняет новые строки. Прилагаю свой образец кода. Заранее спасибо!

XSL

<code><table cellpadding="0" cellspacing="0" width="100%" >
    <tr>
        <xsl:for-each select="//faml/response/mtcresponsedto/terms_conditons/tandcdto">
            <div class="carousel">
                <div class="frames">
                    <td style="padding-right: 10px">
                        <xsl:variable name="txn_desc">
                            <xsl:value-of select="termsandconditions"/>
                        </xsl:variable>
                        <div>
                            <pre contenteditable="true">
                                <xsl:value-of select="$txn_desc"/>
                            

JS

const pre = document.querySelector("pre");
const flag = pre.textContent;