Changing Font or Font Size Removes Text Styling

[mshryock64]

Something we noticed on our implementation and were able to recreate on the demo page is that when changing font or font size, any text styling (bold, italics, strike-through, color, etc.) previously set is reset.

To clarify, the previously typed text keeps those styles, but you must re-enable them for any text typed after changing font or font size.

Is this a design decision, or a bug? We would like to be able to maintain any text options after changing font or font size. Is there a workaround for this?

[rinkisingh8181]

@jpuri

Yeah I faced this issue too. Can we have a solution for this?

[rinkisingh8181]

@mshryock64 Did you find a solution to above issue that you mentioned above?

[mshryock64]

@rinkisingh8181 I did not. It's currently low-priority for our project, but if this can't/won't be resolved we'll look at some other editor options.

[Sigurdlex]

@mshryock64 @rinkisingh8181 did you find any solution or workaround to this issue?

[inanmadak]

are there any updates for this?

Currently if I change the font size or font family - and type something to editor it is not displayed correctly (it displays everything the same without font changes), however, content state is correctly updated, and I can display it as a rendered HTML string inside another element.

I hope you guys found some solution to this :)

[hussainMansoor876]

I saved the editor content in the database when I edit the Editor with the previous content, the font size and font family reset automatically, I tried lots of draft-js functions to fix it but unable to fix it, and finally I found a solution to just add entityMap: {} in the initialContentState, use initialContentState instead of defaultEditorState, it should work, Here is the Screen shots of my code. Thanks

[hussainMansoor876]

@inanmadak @Sigurdlex @rinkisingh8181 @mshryock64 please check the solution

[AbdullahTaseer]

Hey Everyone I am facing issue when i convert the output of React Draft Wysiwyg Editor to HTML, the issue is that everything is applying to text in the output but font size, font style is not working Can anyone please guide @hussainMansoor876 @inanmadak @Sigurdlex @rinkisingh8181 @mshryock64

[hussainMansoor876]

@AbdullahTaseer Could you please share the screenshots of your code here

[AbdullahTaseer]

@hussainMansoor876

[hussainMansoor876]

@AbdullahTaseer Are you importing css file of it? import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css"

[hussainMansoor876]

and you need to add toolbar options const toolbarOptions = { options: ['blockType', 'inline', 'list', 'link', 'history', 'colorPicker',], inline: { options: ['bold', 'italic', 'underline', 'strikethrough'], }, list: { options: ['unordered', 'ordered'], }, blockType: { options: ['Normal', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'P'], }, history: { inDropdown: false, options: ['undo', 'redo'], } }