search

bonafideduck / react-highlight-within-textarea

React component for highlighting bits of text within a textarea
100 stars 13 forks source link

Compatibility with Next.JS #91

Closed mrzmyr closed 2 years ago

mrzmyr commented 2 years ago
CleanShot 2022-02-06 at 14 33 17@2x

Draft.JS runs into errors when working with Next.JS. This is a known issue and can be fixed by creating a reusable emptyContentState like in this example.

Further reading

bonafideduck commented 2 years ago

@mrzmyr , thank you for making me aware of this issue. I'd like to better understand the root cause of this.

The properties of DraftJs require a string for value to be sent in:

115 value: PropTypes.string.isRequired,

And on the first call, we should be creating an EditorStat with that string as content.

51 editorState = EditorState.createWithContent(contentState);

Is the next.js code sending in 'undefined' for value? If so, even though it violates the props contract, I can add a special handler for that.

mrzmyr commented 2 years ago

This is making problems because Next.JS is creating different instances on server and client. For more details see the explanation by @flarnie (Former Co-maintainer of Draft.js): https://github.com/facebook/draft-js/issues/1199#issuecomment-331677160

She is suggesting to create a reusable emptyContentState.

I created a PR you can check out here: https://github.com/bonafideduck/react-highlight-within-textarea/pull/95