pnp / pnp/sp-dev-fx-controls-react

RichText inline styles instead of classes

Open
#501 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Needs: Discussion 🙋 type:enhancement
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

  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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.