Draft-js: DraftOffsetKey Returns Different Values for Server-Side Rendering

[hs737]

Currently when using "draft-js": "^0.10.1", I am getting a warning in my console that my server-side rendering of an Editor creates a different data-offset-key than my client-side rendering.

 (client) y" data-offset-key="dp7s0-0-0" data-reac
 (server) y" data-offset-key="asr72-0-0" data-reac

I am using react 15.3. Any way we can avoid this?

This issue is similar to that of the editor-key in Issue 385, which was resolved by adding a new prop, editorKey in PR 796

Looking at DraftEditorContents.react.js, the issue makes sense. A DraftOffsetKey is populated with the key that is retrieved from the block.

I believe these block's keys are populated by generateRandomKey(), but I am still digging. Before starting a PR, I want to get a better understanding of why these keys have to be random. Can we make their generation for server-side rendering yield the same values?

[sophiebits]

Those are the block keys which are part of the editor state (more precisely, the content state). If you serialize the state when sending it down (https://draftjs.org/docs/api-reference-data-conversion.html) and render the client-side editor with the same keys then that should work.

If that doesn't work for you, I believe you should be able to create your own block keys manually in the state when creating the editor state.

[mxstbr]

I'm serializing the state to/from the database, but I'm still getting a data-offset-key mismatch between client and server. (exact same error as @hs737, using [email protected])

Any ideas why that could still be happening? Did you ever resolve your issue @hs737?

[mxstbr]

Short update here, it was my bad. See this reply by @flarnie for how to solve this issue: https://github.com/facebook/draft-js/issues/1199#issuecomment-331677160