Linebreaks with multiple successive BRs are wrapped in P tags

[kylebragger]

Lines with multiple successive <br> tags (created with e.g. Shift+Enter) get wrapped with <p> tags. It seems like this should not be the case, since it turns the hard line break into a bona fide new paragraph, and a user may have e.g. pasted text which contains these types of breaks, or might just want to add multiple hard line breaks for stylistic purposes.

Steps for Reproduction

1. Type some text in a Quill editor
2. Pick a point to create a newline and press Shift+Enter (or your OS' equivalent) 2 or more times to add a blank line between the two text blocks
3. When Quill is re-initialized with that content, the BRs have been wrapped in P tags

Expected behavior:
BRs outside of P tags should be left alone

Actual behavior:
BRs outside of P tags are wrapped in P tags

Platforms:

Chrome 56, Mac OS Sierra

Version:

1.1

[jhchen]

Quill wrapping <br> with paragraph tags is by design and has been discussed in numerous other issues.

[kylebragger]

It would seem that I was slightly mistaken before as to what the behavior is that's confusing me.

At least in our editor instance, Quill seems to be inserting an additional <p><br></p> between a <p> and <blockquote>. Do you have any direction on what Quill might be doing there? Maybe related or similar to #797?

(I can provide a demo login for this as well if you'd like to see the issue in our editor.)

[kylebragger]

I just confirmed this seems to be the case on our end. Even with a few simple paragraphs, if I target one para with CSS and give it a big top margin e.g. p:nth-child(2) { margin-top: 40px; } the same behavior as in #797 occurs; a blank line is inserted above the real 2nd para.

Shall I open a different ticket for this?

[jhchen]

Can you produce the issue in a minimal Codepen?

[kylebragger]

@jhchen here you go: https://jsfiddle.net/y500jh11/11/

Interestingly the bug only happens when the paragraph above the blockquote wraps to multiple lines.

[jhchen]

If I understand correctly the issue is you have is if you initialize the contents of Quill as

<div id="editor">
  <p>test</p>
  <blockquote>testing</blockquote>
</div>

You get

<div id="editor">
  <p>test</p>
  <p><br></p>
  <blockquote>testing</blockquote>
</div>

Quill expects its own paragraphs to have so when it sees content with spacing it inserts empty lines to compensate. You can change this behavior by modifying its matchers. Quill uses the same code to handle pasting and initialization.

As a side note if you are saving content to resume an edit session it is highly recommended to be saving Deltas.

If I have misunderstood, please be very explicit in your reproduction steps and what you expect to see and actually see.

[kylebragger]

Sorry for the confusion. If you want to close this ticket I can open a new one with a better outline of the issue as it currently stands.

…

On Tue, Mar 28, 2017 at 1:03 AM Jason Chen ***@***.***> wrote: If I understand correctly the issue is you have is if you initialize the contents of Quill as <div id="editor"> <p>test</p> <blockquote>testing</blockquote> </div> You get <div id="editor"> <p>test</p> <p><br></p> <blockquote>testing</blockquote> </div> Quill expects its own paragraphs to have so when it sees content with spacing it inserts empty lines to compensate. You can change this behavior by modifying its matchers <https://quilljs.com/docs/modules/clipboard/>. Quill uses the same code to handle pasting and initialization. As a side note if you are saving content to resume an edit session it is highly recommended to be saving Deltas. If I have misunderstood, please be very explicit in your reproduction steps and what you expect to see and actually see. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1341 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AACPDvQMSJ6WVdSRdBsfm9Zag8NJUUFvks5rqJS2gaJpZM4MQE9A> .

[youradds]

If I understand correctly the issue is you have is if you initialize the contents of Quill as

<div id="editor">
  <p>test</p>
  <blockquote>testing</blockquote>
</div>

You get

<div id="editor">
  <p>test</p>
  <p><br></p>
  <blockquote>testing</blockquote>
</div>

Quill expects its own paragraphs to have so when it sees content with spacing it inserts empty lines to compensate. You can change this behavior by modifying its matchers. Quill uses the same code to handle pasting and initialization.

As a side note if you are saving content to resume an edit session it is highly recommended to be saving Deltas.

If I have misunderstood, please be very explicit in your reproduction steps and what you expect to see and actually see.

I'm having this issue now. How are you supposed to deal with it? I'm trying to get what the person sees in the editor to look exactly the same as what they see when its on the static page. This extra line is making that tricky :(

TIA

Andy