如何通过可内容编辑的div输入将元素的换行符（格式）保留在列表中？

Question

我有点问题。我目前正在编写一个列表，用户可以在其中输入一些提示/消息。这工作得很好，但是我发现了一个问题，我不喜欢它。

为了防止任何html输入，我在paste函数中实现了一些东西，如果有HTML，它会给我任何纯文本。现在，当我复制一些包含多行代码的代码时：

$( "button" ).click( function () {
    let template = $( "#template" ).clone();

  template.removeAttr("id");
    template.html( input.html() );

  input.empty();
    $( "#wrapper" ).append( template );
} );

并将其粘贴到我的contenteditable div中，行格式仍然存在。如果现在按我的按钮将其添加到列表中，格式将完全消失，所有内容都将显示在一行中。

我正在寻找一种解决此问题的方法。有谁知道我如何防止丢失任何换行符和格式？

jQuery(document).ready(function($) {
  let input = $("#input");

  $("button").click(function() {
    let template = $("#template").clone();

    template.removeAttr("id");
    template.html(input.html());

    input.empty();
    $("#wrapper").append(template);
  });

  input.on("paste", function(e) {
    e.preventDefault();

    let clipboardText = e.originalEvent.clipboardData.getData('text');

    document.execCommand("insertHTML", false, clipboardText.replace(/	/g, "    "));
  });
});

[contenteditable=true] {
  border: 1px solid #aaaaaa;
  padding: 8px;
  border-radius: 12px;
  margin-bottom: 20px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  display: block;
  color: #aaaaaa;
}

#wrapper {
  border: 1px solid;
  height: 350px;
  overflow-y: scroll;
  overflow-x: hidden;
  margin-bottom: 10px;
  padding: 15px;
}

.entry {
  display: flex;
  background-color: gray;
  margin-bottom: 8px;
  padding: 4px;
}

#template {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <span id="template" class="entry"></span>
</div>
<div id="input" placeholder="Write a message..." contenteditable="true" spellcheck="true"></div>
<button>Add to list</button>

编辑

我已经用空格替换制表符，以解决此处可能出现的问题。