How to handle custom entities like mentions with draft-convert?

Use the textToEntity hook in convertFromHTML to match patterns like @mentions with regex, creating immutable entities as shown in the example. For serialization, entityToHTML maps entities back to HTML tags.

draft-convert vs draft-js-export-html: which is better?

draft-convert offers more extensibility with custom mappings and plugin support, while draft-js-export-html is simpler for basic conversions. Choose draft-convert if you need fine-grained control; otherwise, the latter is quicker for defaults.

Can draft-convert handle nested lists or complex HTML structures?

It supports nested blocks via the flat option in convertFromHTML, but this may split elements into separate blocks, potentially losing some structure. Custom htmlToBlock logic might be needed for precise handling.

Is draft-convert compatible with the latest React versions?

Yes, it's built on Draft.js which works with React, but check npm for updates as breaking changes in React or Draft.js could affect compatibility. The library itself is maintained by HubSpot.

What are the performance implications of using middleware functions?

Middleware adds overhead by wrapping conversion logic, but it's minimal for typical use. For large documents, optimize by caching or simplifying callbacks to avoid slowdowns.

Does draft-convert support server-side rendering (SSR)?

Indirectly, as it converts ContentState to HTML strings, but Draft.js requires a DOM, so SSR might need polyfills or alternative approaches. The library focuses on client-side conversion.

Open-Awesome

Draft Convert

Apache-2.0JavaScriptv2.1.13

Extensibly serialize and deserialize Draft.js ContentState with HTML using customizable conversion functions.

GitHub

477 stars92 forks0 contributors

What is Draft Convert?

draft-convert is a JavaScript library that provides extensible conversion between Draft.js ContentState and HTML. It solves the problem of serializing and deserializing rich text content by allowing developers to define custom mappings for styles, blocks, and entities, enabling flexible integration with HTML-based systems.

Target Audience

Frontend developers working with Draft.js who need to convert editor content to and from HTML, especially those building custom rich-text editors or integrating Draft.js with HTML-based backends.

Value Proposition

Developers choose draft-convert for its extensibility and fine-grained control over conversion logic, avoiding the limitations of Draft.js's default HTML conversion and enabling custom handling of complex content structures.

Overview

Extensibly serialize & deserialize Draft.js ContentState with HTML.

Use Cases

Best For

Converting Draft.js editor content to HTML for storage or display
Parsing HTML into Draft.js ContentState for editing
Building custom rich-text editors with specialized HTML output
Integrating Draft.js with CMS or backend systems that use HTML
Extending Draft.js conversion logic with plugins via draft-extend
Handling custom entities or styles during HTML serialization

Not Ideal For

Applications not built on React and Draft.js, as it's tightly coupled to that specific ecosystem
Teams needing out-of-the-box HTML conversion with zero configuration or custom logic
Projects that require server-side rendering without JavaScript, since Draft.js is client-side focused
Systems handling highly complex HTML with nested structures that the flat mode might not fully support

Pros & Cons

Pros

Extensible Serialization

Allows custom mappings for styles, blocks, and entities via functions like styleToHTML, enabling fine-grained control over HTML output, as shown in the advanced usage examples.

Flexible Deserialization

Supports hooks like htmlToEntity and textToEntity to parse HTML into Draft.js ContentState, handling custom elements and regex-based patterns seamlessly.

Middleware and Plugin Integration

Designed to work with draft-extend for composing plugins, making conversion logic modular and reusable, as demonstrated in the compose function examples.

TypeScript Support

Includes built-in type definitions, reducing errors and improving developer experience in TypeScript projects.

Cons

Configuration Complexity

Requires defining multiple callback functions for conversion, which can be verbose and overwhelming for simple use cases compared to drop-in solutions.

Draft.js Lock-in

Tightly dependent on Draft.js, making it irrelevant for projects using other rich-text editors or if Draft.js becomes obsolete.

Potential Breaking Changes

The README warns that legacy object-based options will be removed, forcing updates to function-based approaches and risking compatibility issues.

Frequently Asked Questions

Related Projects

Draft.js: Export ContentState to HTML

DraftJS: import/export ContentState to and from HTML/Markdown

Stars881

Forks228

Last commit3 years ago

React Native Draft.js Render

React Native render for draft.js model

Stars390

Forks60

Last commit2 years ago

DraftJs to HTML

Library for converting Draftjs editor content state to HTML

Stars325

Forks139