Flat rendering of inline style ranges with complex inline styles

Thanks so much for building this! We’ve implemented it in our app for rendering draft.js text content when that content is not in text editing mode, and when there are many separate pieces of text content on a page at once, it has been a considerable perf improvement (we serialize and store text content as the result of convertToRaw, so that’s how it lives in our Redux store). We are also using it for generating HTML for that content server-side, which proved necessary for us because we wanted to use <p> instead of <div> as our default block element, but draft.js renders <div>s inside the <p> block element, which is invalid HTML and which React’s renderToString function actually doesn’t allow (it creates an empty <p> element and takes the <div> with its children that was inside it and puts it after the empty <p>). Using redraft, we’ve been able to simplify and cleanup the output when not in text editing mode and render valid, semantic HTML on the server, so thank you very much for making it!

As described in the draft.js docs on complex inline styles, in editorState, draft.js stores inline styling on a character-by-character level, meaning that nested styles (bold text inside an italicized range, for example) are actually represented as a flat set of ['BOLD', 'ITALIC']; this means that when you use the customStyleMap to render those inline styles, draft converts the nested range into

<span style={ { fontWeight: 'bold', fontStyle: 'italic' } }>{ text }</span>

, as opposed to

<span style={ { fontStyle: 'italic' } }>`<span style={ { fontWeight: 'bold'  } }>{ text }</span></span>

The depth of inline element rendering never grows past 1. This doesn’t seem to be the case when using redraft, I’m assuming because convertToRaw takes the character-by-character OrderedSet and converts it to an array of inline style ranges. Can you think of a way I could use the current redraft API to ensure that styled inline elements never nest? If not, would you be willing to explore expanding or modifying the API to support a mode in which inline style ranges get rendered the way they are rendered in draft.js?

Thanks again!

[lokiuz]

Just pushed a new beta version to npm with a new api for a flatter render. If you don’t mind some testing and feedback would be awesome! A simple how-to is included in the updated readme. You can install using the next tag ie. npm install redraft@next

[acusti]

Sorry I didn’t follow up back in March and April. Thought I’d mention now that we’ve been using the new flatter rendering in 0.8.0 for a couple months now without issue, and it has helped us greatly with the issues I described in the top of this issue. Thanks again!