Quill: Adding unwanted newlines when pasting

[Vonsild]

Version 1 beta 4 (https://cdn.quilljs.com/1.0.0-beta.4/quill.js)

When pasting HTML containing a header tag (e.g. <h1>) and a paragraph (<p>) an extra, unwanted, newline character is prepended in the delta object for the paragraph, resulting in an empty paragraph being inserted.

Steps for Reproduction
Using jQuery.
Assuming this DOM

<div id="editor"></div>
<script type="text/javascript">
var quill = null;
$(function() {
    quill = new Quill('#editor', {theme: 'snow' });
    quill.pasteHTML('<h1>headline</h1><p>Content</p>');

    console.log(JSON.stringify(quill.getContents().ops));
    // [{"insert":"headline"},{"attributes":{"header":1},"insert":"\n"},{"insert":"\nContent\n"}]

    console.log($('#editor .ql-editor').html());
    // <h1>headline</h1><p><br></p><p>Content</p>

    quill.pasteHTML($('#editor .ql-editor').html());

    console.log(JSON.stringify(quill.getContents().ops));
    // [{"insert":"headline"},{"attributes":{"header":1},"insert":"\n"},{"insert":"\n\nContent\n"}]

    console.log($('#editor .ql-editor').html());
    // <h1>headline</h1><p><br></p><p><br></p><p>Content</p>
});

Expected behavior:
I'd expect the output of console.log($('#editor .ql-editor').html()); to match the input from quill.pasteHTML('<h1>headline</h1><p>Content</p>');

Actual behavior:
An extra <p>&nbps;</p> tag is inserted. (Speculation:) Possibly because the header attribute is put on the newline character following the actual headline, instead of the headline itself.

Platforms:
Latest Chrome

Version: [version]

[jhchen]

The pasteHTML call is for pasting, where the desirable behavior is to match the copied content. By default <h1> tags have bottom margin but Quill's do not so a newline is added to match this visually. If the source website removed this margin, the style would have been inlined. This very important step is missed when simply using html().

[Vonsild]

You answer fails to address the problem :)

quill.pasteHTML('<h1>headline</h1><p>content</p>'); results in a DOM structure like <h1>headline</h1><p>&nbsp;</p><p>content</p>

quill.pasteHTML('<h1>headline</h1><p>&nbsp;</p><p>content</p>'); results in a DOM structure like <h1>headline</h1><p>&nbsp;</p><p>&nbsp;</p><p>content</p>

Why does it introduce an extra empty paragraph?

[lordenzo]

I understand that Quill tries to emulate the spacing after an Heading tag using a p tag, but could this be something configurable?

[jhchen]

@lordenzo It is

[lordenzo]

@jhchen Excellent! Thanks! I was able to make it working by deleting the lasts \n from the delta in each Heading tag :)

[JMacLulich]

@lordenzo I've run into the same problem, I'm getting <p> tags inserted around every <br/> tag which means the spaces between sections of text is 3 or 4x larger than it was in the original content.

I'm having a bit of trouble understanding how to stop this behaviour from happening, do you mind copying and pasting the code you added to stop <p> tags here so I can take a look?

Kind regards, Jason.

[jnarowski]

Having the same problem as @JMacLulich. Has this been fixed? I'm using version 1.1.9

[rtm]

I am using the primeng wrapper around Quill. If I have an ordered list (<ol>), then each time I enter the editor, which pastes the current HTML into the editor, I get an extra <p><br/></p> inserted into the HTML at the beginning of the list. I wonder if there is some real simple option to disable this behavior, such as DONT_PUT_IN_EXTRA_P_TAGS, or something similar. I understand that I might be able to deal with this problem by using a "matcher", but I really would prefer not to have to go to all that trouble.

[dcominottim]

Can anyone post the code/configuration used to solve the issue? In my project, we are facing the same issue from @JMacLulich

[ctrlaltdylan]

My solution to the extra <br/> problem is to change the styling:

/**
 * Custom Quill Editor Overrides
 */
.ql-editor p {
  margin-bottom: 25px; 
}

That way when writers make a space they get that extra padding that actually shows when rendering. By default the .ql-editior p margin is 0. When you render your content outside of the editor your styling will probably add padding.

[justinpincar]

@rtm Were you able to resolve this? I have the same issue: pasting HTML adds extra <p><br /></p>.

Adding CSS is not an option for me as we use the markup in emails without any additional styling.

[pxljoy]

I'm having a similar problem, any two code blocks with a newline between them save as

<pre>...></pre>
<p><br></p>
<pre>...></pre>

but then, when the page is refreshed and the content is supplied from a database, it inserts another <p><br></p>, so it becomes

<pre>...></pre>
<p><br></p>
<p><br></p>
<pre>...></pre>

[justinpincar]

@pxljoy see https://github.com/quilljs/quill/issues/807#issuecomment-315158226, might solve your issue.

[franciscolourenco]

Is the default behaviour changes in 2.0?