Inconsistent breaks when pasting content with format due to CSS margin setting

[danielbwa]

I'm encountering an issue with the Trix editor and would like to discuss and understand it better.

Issue Details:

When pasting content with markup from a PDF document into the Trix editor at https://trix-editor.org/, there is no leading <br> or  . However, when pasting the same content into a minimal demo (same version) or in any of my applications using Trix, I observe a leading break.

Findings:

I have discovered that the difference in behavior is related to the CSS applied to the root selector. Below is the relevant CSS for the Trix editor at https://trix-editor.org/:

  * {
      border: 0;
      box-sizing: border-box;
      font-size: 100%;
      margin: 0;
      min-width: 0;
      outline: 0;
      padding: 0;
  }

By removing the margin: 0 rule and pasting the content, an extra break is added. Conversely, pasting with the margin: 0 rule does not add the extra break.

Screenshots:

Here are two screenshots to illustrate the difference:

(No leading break, with default CSS)

(Leading break present and breaks added)

Could somebody please help explain why this difference occurs and suggest any possible solutions to ensure consistent behavior across different environments?

My clipboard content used for this issue:

Thanks in advance!

Steps to Reproduce

1. Copy content from a pdf
2. visit https://trix-editor.org/ and paste, see no extra leading space in the html for the trix instance.
3. reload page, disable the margin:0 style for the root * element.
4. paste and see a leading <br> in the editor and for the html in the trix editor.

Details

• Trix version: v2.1.3
• Browser name and version: tested latest Chrome, Safari and FireFox.
• Operating system: macOS