Draft-js: convertToRaw will produce data that convertFromRaw is not able to parse

Created on 21 Nov 2018  路  5Comments  路  Source: facebook/draft-js

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

What is the current behavior?
Calling convertFromRaw() on data produced by the convertToRaw() function will throw in an error if one of the blocks is an empty paragraph (text value is null).
The problem is that the decodeInlineStyleRanges() function does not check if the text argument has a value and it tries to access the length property directly.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. You can use this jsfiddle to get started: https://jsfiddle.net/stopachka/m6z0xn4r/.

  1. I get the current editor state using .getCurrentContent() and convert it to raw data using convertToRaw(). The output of this is then persisted in a database as a JSON object.
  2. I retrieve the previously saved JSON object and convert it to a ContentState object using convertFromRaw(value)
  3. If there is a block that contains no text (text is null), decodeInlineStyleRanges will throw a Cannot read property length of null error.

What is the expected behavior?
Content produced by convertToRaw() should work with convertFromRaw() in all cases.

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?
Latest, at the moment of writing this, 0.10.5.

I can make a pull request for a fix, but I'm not sure whether this should be handled by the convertFromRaw function, or just make sure that convertToRaw will provide an empty string for blocks that contain no characters.

Thanks :)

Most helpful comment

I tried replicating this and it is indeed converting it properly.
I'm closing this since this is clearly an issue on our side.
Thank you :)

All 5 comments

@virgilbugnariu could you provide an example of editor content for which convertToRaw outputs null for the block's text? In my editor, convertToRaw saves empty blocks with the text as an empty string ("text": "").

I tried replicating this and it is indeed converting it properly.
I'm closing this since this is clearly an issue on our side.
Thank you :)

Thanks for chiming in @thibaudcolas !

I had this issue as well. If you are using Laravel as an API, you should remove the middleware that converts empty strings to null.

\Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
in Kernel.php

Yes, this is the thing that caused issues on our side as well

Was this page helpful?
0 / 5 - 0 ratings