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

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.)