React-draft-wysiwyg: unmet peer dependency draft-js

Created on 5 Feb 2017 · 8Comments · Source: jpuri/react-draft-wysiwyg

First of all, thanks for the awesome work.

If I do npm install --save draft-js I get unmet dependency due to0.9.x in package.json. So I have to install 0.9.x but then I get iterable.length has been deprecated warning because of draft issue.

Source

hiei189

Most helpful comment

@hiei189 You shouldn't pass the EditorState object as payload to redux-form directly, you can convert it into JSON before pass to redux-form (also save in DB as JSON).

Like this

import { convertToRaw, EditorState } from 'draft-js';

class EditorWrapper extends React.Component {

    constructor() {
        super();
        this.handleEditorStateChange = this.handleEditorStateChange.bind(this);
        this.state = {
            editorState: EditorState.createEmpty()
        }
    }

    convertToString(editorState) {
        return JSON.stringify(convertToRaw(editorState.getCurrentContent()));
    }

    handleEditorStateChange(editorState) {
        const { onChange } = this.props.input;
        const stringValue = this.convertToString(editorState);

        this.setState({ editorState });
        onChange(stringValue);
    }

    render() {
        return (
            <Editor
                editorState={this.state.editorState}
                onEditorStateChange={this.handleEditorStateChange} />
            );
        }
    }
}

plus886 on 10 Feb 2017

👍5 🎉2

All 8 comments

Hey Looks like its time for me to upgrade draft, I will do it soon.

jpuri on 5 Feb 2017

Plz check [email protected] released today.

jpuri on 5 Feb 2017

❤1

oh nice.

I still getting the same warning, though. any idea? I thought It was beacuse of draft version.

hiei189 on 5 Feb 2017

Warning appears only when <Editor /> is controlled. Otherwise it works nice.

hiei189 on 5 Feb 2017

Hey @hiei189 , can you paste the warning and also your code ?

jpuri on 6 Feb 2017

Sure. I'm using redux-form to make it controlled.

class EditorWrapper extends React.Component {
constructor(props){
    super(props);
    this.blankState = EditorState.createEmpty();
}
render () {
    const { input: { value, onChange } } = this.props;
    return(
        <Editor
            editorState={value || this.blankState} 
            onEditorStateChange={(newState) => { onChange(newState) }}
        />
    );
}
}

and the warning is

iterable.length has been deprecated, use iterable.size or iterable.count(). This warning will become a silent error in a future version. Error
    at Record.get (http://localhost:3000/static/js/bundle.js:88179:22)
    at isArrayLike (http://localhost:3000/static/js/bundle.js:63108:42)
    at keys (http://localhost:3000/static/js/bundle.js:64218:11)
    at baseGetAllKeys (http://localhost:3000/static/js/bundle.js:65102:17)
    at getAllKeys (http://localhost:3000/static/js/bundle.js:65074:11)
    at equalObjects (http://localhost:3000/static/js/bundle.js:64990:19)
    at baseIsEqualDeep (http://localhost:3000/static/js/bundle.js:64543:11)
    at baseIsEqual (http://localhost:3000/static/js/bundle.js:64451:11)
    at equalObjects (http://localhost:3000/static/js/bundle.js:65027:40)
    at baseIsEqualDeep (http://localhost:3000/static/js/bundle.js:64543:11)

it occurs everytime I focus/blur/write/etc the Editor component.

hiei189 on 6 Feb 2017

@hiei189 You shouldn't pass the EditorState object as payload to redux-form directly, you can convert it into JSON before pass to redux-form (also save in DB as JSON).

Like this

import { convertToRaw, EditorState } from 'draft-js';

class EditorWrapper extends React.Component {

    constructor() {
        super();
        this.handleEditorStateChange = this.handleEditorStateChange.bind(this);
        this.state = {
            editorState: EditorState.createEmpty()
        }
    }

    convertToString(editorState) {
        return JSON.stringify(convertToRaw(editorState.getCurrentContent()));
    }

    handleEditorStateChange(editorState) {
        const { onChange } = this.props.input;
        const stringValue = this.convertToString(editorState);

        this.setState({ editorState });
        onChange(stringValue);
    }

    render() {
        return (
            <Editor
                editorState={this.state.editorState}
                onEditorStateChange={this.handleEditorStateChange} />
            );
        }
    }
}

plus886 on 10 Feb 2017

👍5 🎉2

I see my error now, thanks. Sorry about it.

hiei189 on 10 Feb 2017

Was this page helpful?

0 / 5 - 0 ratings