Registry / serialization / html-to-draftjs

html-to-draftjs

library1.0.1jsnpmunverified

The `html-to-draftjs` library provides a utility function for converting raw HTML strings into a DraftJS `ContentState` object, which is suitable for direct use within a DraftJS editor. Currently stable at version `1.5.0`, this package is primarily designed to facilitate initial content loading or pasting functionalities in applications utilizing DraftJS, especially those built with `react-draft-wysiwyg`. While there's no explicit release cadence, the presence of recent version updates and a warning about a specific faulty version (1.2.0) indicates ongoing maintenance. Its key differentiator is its focused purpose for DraftJS, offering specific handling for HTML structures and an optional `customChunkRenderer` for extending its capabilities to handle custom HTML nodes or provide specific block types beyond standard conversions, particularly useful for atomic blocks.

serialization

npm install html-to-draftjs

github ↗package ↗

INSTALL

IMPORT

SIG · HTML-TO-DRAFTJS

html-to-draftjs

serializationjavascriptv1.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

htmlToDraft

✓ import htmlToDraft from 'html-to-draftjs';

✗ import { htmlToDraft } from 'html-to-draftjs'; const htmlToDraft = require('html-to-draftjs');

The primary conversion function is exported as a default export. For CommonJS, access it via `require('html-to-draftjs').default`.

Demonstrates how to convert an HTML string to DraftJS ContentState, including using the optional customChunkRenderer for specific HTML tags like `<hr/>`.

import { EditorState, ContentState } from 'draft-js'; import htmlToDraft from 'html-to-draftjs'; // Example HTML content that might include custom elements const htmlContent = 'This is rich HTML content.<hr/>Another paragraph.'; // Optional: Define a custom chunk renderer for specific HTML nodes like <hr> const blocksFromHtml = htmlToDraft(htmlContent, (nodeName, node) => { if (nodeName === 'hr') { return { type: 'HORIZONTAL_RULE', // A custom block type defined in your DraftJS editor mutability: 'IMMUTABLE', data: {} // Optional data for the block }; } // Return nothing (or any falsy value) to let the default converter handle other nodes return undefined; }); if (blocksFromHtml) { const { contentBlocks, entityMap } = blocksFromHtml; const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap); const editorState = EditorState.createWithContent(contentState); console.log('Successfully converted HTML to DraftJS ContentState.'); console.log('Number of content blocks:', contentState.getBlocksAsArray().length); console.log('First block text:', contentState.getFirstBlock().getText()); // In a React component, you would typically use `editorState` to initialize or update your DraftJS editor. // Example: `this.setState({ editorState });` } else { console.error('Failed to convert HTML content. The input might be empty or invalid.'); }

Debug

Known issues

breakingVersion `1.2.0` of `html-to-draftjs` is known to have build issues and should be avoided. Ensure you are using a different stable version.

fix

Upgrade to `html-to-draftjs@^1.3.0` or later using `npm install html-to-draftjs@latest`.

affects: =1.2.0

gotchaWhen using the `customChunkRenderer`, ensure that the `type` property returned matches a valid block type configured in your DraftJS editor. Incorrect types will result in rendering issues or errors.

fix

Verify that `type` values like 'HORIZONTAL_RULE' are recognized by your DraftJS configuration or component that renders the editor content.

affects: >=1.0.0

gotchaComplex or malformed HTML may not always convert perfectly to DraftJS ContentState, especially regarding inline styles, custom block data, and nested structures. The converter has limitations.

fix

Pre-process HTML for cleanliness or use the `customChunkRenderer` for specific, non-standard HTML patterns you need to support accurately.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: htmlToDraft is not a function

Attempting to import `htmlToDraft` as a named export from a CommonJS context or incorrectly as a named import in an ESM context when it is a default export.

fix

For ESM, use `import htmlToDraft from 'html-to-draftjs';`. For CJS, use `const htmlToDraft = require('html-to-draftjs').default;`.

Error: Cannot find module 'html-to-draftjs'

The package has not been installed or is not correctly linked in your project's `node_modules`.

fix

Run `npm install html-to-draftjs` or `yarn add html-to-draftjs` in your project directory.

Draft.js block 0: Missing data for block with type CUSTOM_BLOCK_TYPE

The `customChunkRenderer` returned a block type that is not recognized by your DraftJS editor, or the returned object is missing required properties.

fix

Ensure the `type` string returned by your `customChunkRenderer` matches a block type known to your DraftJS setup. Also, check that `mutability` and `data` (even if empty) are included in the returned object.

Upgrade

Version history

1.0.1latest on npm

Audit

Dependencies

draft-jsrequiredCore dependency for creating and manipulating DraftJS editor state and content.

immutablerequiredDraftJS relies heavily on Immutable.js data structures for its content state management.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/jpuri/html-to-draftjs ↗

packagehttps://www.npmjs.com/package/html-to-draftjs ↗