pnp / pnp/sp-dev-fx-controls-react
RichText inline styles instead of classes
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 433
- Forks
- 418
- Avg merge
- 5d 6m
- Merged PRs (30d)
- 19
Description
Category
[x] Enhancement
[x] Bug
[x] Question
Version
1.16
Expected / Desired Behavior / Question
Be able to set any html with font size, font color styles to the control value and be able to edit it.
Be able to get the value from this control as HTML that I can later use/show on other pages without this control.
We need a flag that will ask the control to not use classes at all, but only inline styles.
Observed Behavior
Setting the html value will sometimes remove some styles like font-size from the HTML that was set to it.
This breaks editing existing html.
Selecting font size or some other options will set them via a class name and not inline style.
This makes the output html un-usable if I want to display it on other pages, not inside this (huge) control, which makes this control a bit useless as an editor.
Steps to Reproduce
Use the control and set the value to
<div><label style="color:red;font-size:40px">hello!</label></div>
the font size will be ignored.
Also, edit it and set the font size using the editor, and get HTML from it.
font size was set via a class name. put that HTML in a different page and the font size would be gone.
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 HTML value containing inline color and font-size styles, then compare the HTML returned after editing with the output shown in the control. Define completion as preserving those inline styles and providing an option for generated formatting to use inline styles rather than classes, with the result usable outside the control.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100