How to keep Quill from inserting blank paragraphs (`<p><br></p>`) before headings with a 10px top margin?

Question

Background

CSS

.ql-editor h3 {
  margin-top: 10px !important;
}

HTML source (to be edited with Quill)

<div id="editor">
<h1>A Title</h1>
<p>hello</p>
<h3>A Heading</h3>
</div>

The JavaScript for starting Quill is:

var quill = new Quill('#editor', {
  theme: 'snow'
});

Quill.js turns it into this (I'm adding line feeds for clarity):

<div class="ql-editor" contenteditable="true">
<h1>A Title</h1>
<p>hello</p>
<p><br></p>
<h3>A Heading</h3>
</div>

Question

Where did the <p><br></p> come from and how can I get rid of it? I want the edits to look like the real thing and we use a top margin on all our headings. A solution that stops Quill from overwriting our styles would be really nice.

Notes

• The .ql-editor h3 style with a margin-top of 10px or greater seems critical for causing this issue. Even with 9px the issue goes away.
• Here is the Quill Playground showing the issue

Versions

• Quill version 1.2.4
• Chrome Version 58.0.3029.81 (64-bit)
• Ubuntu 16.04 (64-bit)

Answer 1

Short version

You need to disable the matchVisual feature: http://quilljs.com/docs/modules/clipboard/#matchvisual

Long version

Quill uses the clipboard module to process it's initial content.

One of the default behaviors enabled in clipboard is a feature called matchVisual, which converts margins around pasted content into newlines. The purpose is to make stuff you paste into quill look the same as its source with respect to margins. So if I copied an h1 with a ton of margin around it from a website and pasted it in quill it would automatically put some newlines above and below to keep the same overall look.

You can see the implementation itself in the matchSpacing function inside clipboard.js:

https://github.com/quilljs/quill/blob/be41c2b0639386d52b65decc557e2cf15911ccb9/modules/clipboard.js#L297

Since initialization uses the clipboard module, this was getting applied to your text.

Here's a codepen fork illustrating the solution: https://codepen.io/anon/pen/LzzYoa (the matchVisual config option was added in quill 1.3.0, and your original pen was on an older version.)

Answer 2

Just disable matchVisual option in clipboard module.

var quill = new Quill('.quill', {
    theme: 'snow',
    modules: {
        toolbar : [...]
        clipboard: {
            matchVisual: false
        }
    }
});