microsoft / microsoft/roosterjs

EditPlugin breaks <pre> tags

Open
#3,146 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1.3k
Forks
190
Avg merge
1d 8h
Merged PRs (30d)
16

Description

Describe the bug
When EditPlugin is enabled, <pre> tags get broken after pressing Enter key within them

To Reproduce
Steps to reproduce the behavior:

  1. Go to this sandbox
  2. Set carret in the text starting with But pressing Enter anywhere....
  3. Press enter
  4. All line breaks are removed

Problem is that rooster encapsulates <pre> content in a <div style="white-space: normal;"> which, AFAIK, is not valid HTML, and overrides the white-space CSS prop of the <pre> tag.
If it was generating a white-space: pre-line; instead, HTML would still not be valid but rendering would work.

If you disable the EditPlugin() the issue stops because it does not reformats anything.
Also, if you replace \r with <br> in the original content there's no issue but that's not valid HTML if I'm not mistaken.

Expected behavior
Rendering of <pre> content should not be broken when editing its content.

Additional context
Tested with rooster 9.29.3, 9.30.0, 9.34.0 and 9.35.0, the issue exists on all of these version so it might have existed for a long time.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked CodeSandbox reproduction and inspect how EditPlugin handles Enter inside the

 content. Trace the logic that creates the  wrapper. Done means pressing Enter preserves the 
 content's line breaks while EditPlugin remains enabled.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.