basecamp / basecamp/trix

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

Open
#1,175 0 comments 0 reactions 0 assignees View on GitHub
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)
paste-margin-0-default

(Leading break present and breaks added)
paste-margin-0-removed

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:
clipboard-content

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.