Draft-js: convertFromDraftStateToRaw slow with large documents

[kenticomartinh]

Do you want to request a feature or report a bug?

Probably feature request, but it depends on how much content you support with what UX ...

What is the current behavior?

convertFromDraftStateToRaw is slow with larger documents (around 100k characters) and synchronous, therefore it continuously consumes the browser thread and blocks the UI when executed with large content.

I can imagine two ways to help this (not mutually exclusive):

• Memoize the converted results per block (with weak map) so that subsequent conversions only need to process actually changed content
• Provide and async variant of it which would do the heavy-lifting in a background worker

[mzedeler]

Are you doing real time updates of the raw draft state?

[kenticomartinh]

Hi, we are now using 300ms debounce for auto-saving changes from the editor. When there is no change to the editor in that timeframe, the save is dispatched automatically.

I actually wrote custom code for that conversion using the memoizee library with weak map (memoized per block) instead of the default one and it is blazing fast as it only recalculates the changing block when the user types text. Anyway, when there is a new entity, it may still need to execute for the whole editor content. Here is what it looks like in the profiler in comparison:

It is not yet polished towards DraftJS code standards to make a nice and clean PR out of it (it uses the 3rd party library). I hope to eventually do that, but if anyone needs, it can serve as an inspiration. I can provide the code if anyone wants it / would be willing to make an official PR.

We currently test it live against production data to detect any irregularities against the default algorithm. The goal is to produce 100% exact raw state that the default one produces.

[thibaudcolas]

Hey @kenticomartinh, if you can share the code I’d love to have a look at it! Even if it doesn’t make its way into a PR right away, I think lots of people might benefit from it as-is, or that it could be made reusable as a standalone package.