Quill with quill-render

I'm using a Quill wysiwyg editor and I am using quill-render npm package to convert the quill array into html.

Quill outputs the contents in an array like so:

[ { attributes: { bold: true }, insert: 'a' },
  { insert: '\n\n' },
  { attributes: { bold: true }, insert: 'b' },
  { insert: '\n' } ]

Meaning:

• Insert a bold 'a'
• insert two line breaks
• insert a bold 'b'
• insert a line break.

quill-render then takes the quill output and returns html. Like so:

<p><b>a</b></p>
<p></p>
<p><b>a</b></p>
<p></p>

As you can see, every 'insert' gets surrounded by a 'p' tag.

The problem is, that '\n' does not translate to 'br' but rather to 'nothing'.

So:

• \n will give me a new line (because it will generate a new p tag)
• but \n\n will not give me two lines.

quill-render allows you to extend it. You can convert anything in the attribute key into any html tag.

For instance:

render.format.inline.bold = function($/*, formatValue */) {
    return $('<b>').addClass('super-important');
};

Allows me to render every line that has the attribute 'bold' as a 'b' tag, and even add a custom class to it.

My difficulty is that '\n; are not exposed in the attribute key but rather in the 'insert' part and I cannot reformat them.

Any idea how I can replace '\n' with a 'br' tag?

via Michael Seltenreich