springload / draftail

📝🍸 A configurable rich text editor built with Draft.js
https://www.draftail.org/
MIT License
612 stars 64 forks source link

Some Inline Styles doesn't work with convertFromHTML #391

Closed jkevingutierrez closed 3 years ago

jkevingutierrez commented 4 years ago

Describe the bug

Using Draftjs convertFromHTML function doesn't transform inline styles defined by Draftail. Like "MARK" "SMALL" "SUBSCRIPT" "SUPERSCRIPT"

It seems that convertFromHTML function only transform the Inline Styles defined in draftjs HTMLTagToRawInlineStyleMap

Is there something that can be done on the Draftail side to add support to these inline styles?

Which terms did you search for in the documentation and issue tracker?

Environment

"draft-js": "0.11.6", "draftail": "1.3.0",

Steps to reproduce

  1. Create a Draftail editor adding some inlineStyles that doesn't come by default with drafjs:
    inlineStyles: [
    { type: "MARK" },
    { type: "SMALL" },
    { type: "SUBSCRIPT" },
    { type: "SUPERSCRIPT" }
    ],
  2. Add some text using those styles
  3. Copy generated HTML
  4. Use that HTML to initialize a new Editor using the convertFromHTML function
  5. The text won't have the styles applied

Expected behavior

draftjs convertFromHTML should also transform inlineStyles defined by Draftail

(Write what you thought would happen.)

Actual behavior

draftjs convertFromHTML doesn't transform inlinStyles defined by Draftail

(Write what happened. Please add screenshots!)

Reproducible demo

Here is a quick demo that contains two editors:

https://codesandbox.io/s/sad-edison-lnmft?file=/src/index.js

The second editor appears when the Transform button is clicked and it is supposed to be a copy of the first editor using the convertFromHTML function.

Adding some text with the styles mentioned before to the first editor, and then click the transform button generates a second editor without the styles being applied.

thibaudcolas commented 3 years ago

This is an issue with convertFromHTML, not Draftail. Please see https://www.draftail.org/docs/importing-and-exporting-html for guidance on how to configure HTML exporters.