basecamp / basecamp/trix

Extra space inserted before paragraphs on paste

Open
#914 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
20k
Forks
1.1k
Avg merge
3d 12h
Merged PRs (30d)
13

Description

An extra line is inserted before every paragraph when copying and pasting from a webpage.

##### Steps to Reproduce

1. Copy the sample HTML from example 1 on [this demo page](https://terreng.github.io/samples/trix_test_paragraphs.html).
2. Paste into Trix and observe the extra space before both paragraphs

Copying this HTML results in extra space before both paragraphs, but it shouldn't:
```

Line 1


Line 2


```

Here's a video demonstrating the issue:

https://user-images.githubusercontent.com/11605395/121762262-a6d37a00-cae9-11eb-8b15-dcf2912e5d47.mov

Expected result:

Screen Shot 2021-06-11 at 7 18 43 PM

Interestingly, adding `margin-top: 0px;` to the \ tags prevents the extra space from being inserted when pasting.

It looks like Trix inserts a new line before / after paragraphs depending on if there was margin, but it fails to understand how margins combine, which results in extra space.

Copying this HTML does not result in extra space before paragraphs:
```

Line 1


Line 2


```

##### Details

* Trix version: 1.3.1
* Browser name and version: Chrome 91, Safari
* Operating system: macOS, Android, iOS

(This issue doesn't appear to be platform-specific)

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by opening the linked demo page and reproducing the paste behavior in Trix with the two sample HTML snippets. Trace how Trix handles pasted paragraph margins, then verify that pasting ordinary paragraphs no longer inserts an extra line before them in the listed browsers.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.