Froala code snippet losing breaklines on edit

I am making a simple blog in RoR. When I edit a post I am losing all linebreakes in the code snippet. How can I make sure that when I am reloading the content of the post, the editor correctly formats the code snippets?

This is the input into the text editor:

A B

This is the source code in the froala editor generated using a custom button:

<pre><code>A B</code></pre>

This is the data inserted into the database:

"<pre><code>A\r\nB</code></pre>"

This is how it looks like on the web page:

This is how it looks like in the Froala editor when I try to update the post:

This is how the source code looks like this time:

<pre><code>AB</code></pre>

This is the code for the custom button:

customButtons: {
insertCode: {
title: 'Insert code',
  icon: {
    type: 'font',
      value: 'fa fa-code'
  },
    callback: function() {
      if (!this.selectionInEditor()) {
        this.$element.focus(); // Focus on editor if it's not.
      }

      var html = '<pre><code>' + (this.text() || '&#8203;') + '<span class="f-marker" data-type="false" data-id="0" data-fr-verified="true"></span><span class="f-marker" data-type="true" data-id="0" data-fr-verified="true"></span></code></pre>';

      this.insertHTML(html);
      this.restoreSelectionByMarkers();
      this.saveUndoStep();
    }
  }
}