Popular posts

convertFromRaw is a Draft utility function which can be used to convert the content state into a simple JS object, which represents the entire editor state, except for the SelectionState data.

const rawContentState = convertToRaw(
    this.state.editorState.getCurrentContent()
);

You can — and it is the recommended way — directly store the raw content state from the above step, in your database; the reason being all the (meta)data you care about is there in the rawContentState object.

DraftJS has a helper convertFromRaw to convert the raw content state to the corresponding DraftJS ContentState (immutable) data structure, and from there, into the desired editor state.

const editorState = EditorState.createWithContent(
    convertFromRaw(rawContentState)
);

If you store HTML string as Davide suggests, you would have to take care of a few things, for example, making sure that the editor state is properly populated; you can use Draft's default convertFromHTML utility, but if you have custom blocks, then you have to augment the HTML parser to support them.

A real-world example 📘

At Hashnode, we convert the entire editor state into Markdown, which is saved into the DB. To support this, we have two parsers, one which parses the DraftJS's editor state, and churns out the corresponding markdown; and second, which parses the markdown (on an edit), and churns out the corresponding editor state.

The reasons for going the markdown way were two fold:

• we didn't want to subject ourselves to a big data migration by moving all the previous markdown content to corresponding editor state objects
• we wanted to be sure that the underlying content is stored in a format which we deeply understand; say, if we were ever to implement the editor using a different library

For a post like this — React Tutorial using MERN Stack — we observed a ~25X improvement in data size; by opting for plain markdown instead of the editor object.