question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Flat rendering of inline style ranges with complex inline styles

See original GitHub issue

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!

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
lokiuzcommented, Mar 11, 2017

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

0reactions
acusticommented, Jun 19, 2017

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!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Complex Inline Styles - Draft.js
When determining how to render inline-styled text, Draft will identify contiguous ranges of identically styled characters and render those ...
Read more >
Inline styles vs. style sheets - Unity - Manual
As you build more complex UI, it's easier to manage styles using style sheets. You can use the Extract Inline Styles to New...
Read more >
Inline Styles in HTML - Codecademy
CSS is built to style that structured information. When inline styles are used, this clear separation between structured information and styling is blurred....
Read more >
React: How to use inline styles in conditional rendering?
You can do like this (remember to use quotes around inline styling values): const SpeedTest = ({ speed }) => ( <div style={{...
Read more >
Why you shouldn't use inline styling in production React apps
Learn about the inline styling concept in React, and why you shouldn't ... A module is just a simple .css file, and it...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found