search

sstur / draft-js-utils

DraftJS: import/export ContentState to and from HTML/Markdown
ISC License
883 stars 234 forks source link

Unable to render superscript and subscript from html to the editor #169

Closed judemanutd closed 5 years ago

judemanutd commented 5 years ago

Library version : 1.3.0 React : 16.8.1 React Dom : 16.8.1

const contentState = stateFromHTML(data);

this.setState({
   editorState: EditorState.createWithContent(contentState),
});

     / *** ..... ***/
<Editor editorState={this.state.editorState} />

Input given

<p>What is NAD<sup>+</sup> ?</p>

Expected output

The plus symbol should be at the top right of the letter D

What is NAD+ ?

Actual Output

Displays as a normal string

What is NAD+

The other tags are being picked up such as H1, H2 etc so they render fine, it's just <sup> and <sub> that don't seem to be rendering in the editor.

SirMojo commented 5 years ago

The stateFromHTML function takes an option object as second parameter where you can define elementStyles to support <sup> tags like the following:

const contentState = stateFromHTML(data, {

  elementStyles: {
      // Support `<sup>` (superscript) inline element:
      'sup': 'SUPERSCRIPT',
  },

});

Had the same problem and found the solution here: https://www.npmjs.com/package/draft-js-import-element (Also it's another plugin, the stateFromHTML function from draft-js-import-html also takes the option object as second param.)