Inconsistent breaks when pasting content with format due to CSS margin setting
- Dominant language
- JavaScript
- Stars
- 20k
- Forks
- 1.1k
- Avg merge
- 3d 12h
- Merged PRs (30d)
- 13
Description
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 `
` 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 `
` 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
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reproducing the issue in Trix v2.1.3 at https://trix-editor.org/ using the PDF clipboard content described in the report. Compare pasting with and without the root `*` rule's `margin: 0` in Chrome, Safari, and Firefox. Done means the cause is explained and a way to ensure consistent leading-break behavior is identified.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100