springload / draftail

📝🍸 A configurable rich text editor built with Draft.js

Home Page:https://www.draftail.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Some Inline Styles doesn't work with convertFromHTML

jkevingutierrez opened this issue · comments

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?

  • convertFromHTML

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" }
  ],
  1. Add some text using those styles
  2. Copy generated HTML
  3. Use that HTML to initialize a new Editor using the convertFromHTML function
  4. 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.

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.