React Templates & Themes Logo React Templates & Themes
Draft Convert screenshot

Draft Convert

Author Avatar Theme by Hubspot
Updated: 12 Sep 2022
480 Stars

Extensibly serialize & deserialize Draft.js ContentState with HTML.

Github

Overview

Draft.js has become a go-to library for building rich text editors in React applications. One of the challenges developers face is converting Draft.js content to HTML and vice versa. The draft-convert library offers robust tools for serializing and deserializing Draft.js content with ease. With its extensive set of features, developers can seamlessly integrate HTML conversion while maintaining the integrity of their content.

Whether you’re looking to convert your Draft.js content state to HTML or need to handle HTML input and convert it back into Draft.js content state, draft-convert offers a straightforward solution. Its flexibility and integration capabilities with plugins make it a valuable addition to any developer’s toolkit when working with Draft.js.

Features

  • Basic and Advanced Usage: Easily serialize Draft.js ContentState to HTML with a simple call to convertToHTML, while advanced options allow for tailored outputs.

  • Customizable Conversion: Use styleToHTML, blockToHTML, and entityToHTML for precise control over how different elements are serialized, including the ability to define custom React elements.

  • Legacy Support: The library supports legacy options for conversion, allowing users to work with plain objects, ensuring continued functionality as the library evolves.

  • Flexible Deserialization: The convertFromHTML function allows you to effortlessly deserialize HTML back into Draft.js ContentState, with options to flatten nested blocks.

  • Middleware Functions: Enhance conversion capabilities by utilizing middleware functions that allow for transformations during the conversion process, making the integration of third-party plugins smoother.

  • Flat Mode Option: The flat mode option ensures that nested HTML elements are converted into separate blocks, providing added structure to the output.

  • Plugin Integration: Easily pass conversion functions as arguments to plugins, allowing for a modular approach to augmenting Draft.js functionality without extensive code changes.