microsoft / microsoft/roosterjs
Pasted image with block display type ignores alignment instructions
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
A pasted image that has display: block set on it ignores text alignment until it is selected.
To Reproduce
Steps to reproduce the behavior:
- Set the editor HTML to the following:
<div style="text-align: center;"><img src="#" width="100" height="100" style="width: 100px; height: 100px; display: block;"></div>
Expected behavior
The image is centered and stays centered when selected
Actual behavior
The image is left aligned when unselected and centered when selected
Screenshots
https://github.com/user-attachments/assets/e932d611-7d5f-495d-b46b-182e05d31bdb
Device Information
- OS: Windows
- Browser: Edge
- Version: 137.0.3296.68
Additional context
This also affects right alignment. Clicking the image and clicking on align center or right has no effect until the image is selected.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the issue with the provided editor HTML in Edge, checking the image before and after selection and alignment commands. Trace the pasted-image alignment handling in the TypeScript editor code; done means block images remain centered or right-aligned while unselected, including after alignment commands.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100