{"id":16056,"library":"html-to-draftjs","title":"HTML to DraftJS Converter","description":"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.","status":"active","version":"1.5.0","language":"javascript","source_language":"en","source_url":"https://github.com/jpuri/html-to-draftjs","tags":["javascript"],"install":[{"cmd":"npm install html-to-draftjs","lang":"bash","label":"npm"},{"cmd":"yarn add html-to-draftjs","lang":"bash","label":"yarn"},{"cmd":"pnpm add html-to-draftjs","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for creating and manipulating DraftJS editor state and content.","package":"draft-js","optional":false},{"reason":"DraftJS relies heavily on Immutable.js data structures for its content state management.","package":"immutable","optional":false}],"imports":[{"note":"The primary conversion function is exported as a default export. For CommonJS, access it via `require('html-to-draftjs').default`.","wrong":"import { htmlToDraft } from 'html-to-draftjs';\nconst htmlToDraft = require('html-to-draftjs');","symbol":"htmlToDraft","correct":"import htmlToDraft from 'html-to-draftjs';"}],"quickstart":{"code":"import { EditorState, ContentState } from 'draft-js';\nimport htmlToDraft from 'html-to-draftjs';\n\n// Example HTML content that might include custom elements\nconst htmlContent = '<p>This is <strong>rich</strong> HTML content.</p><hr/><p>Another paragraph.</p>';\n\n// Optional: Define a custom chunk renderer for specific HTML nodes like <hr>\nconst blocksFromHtml = htmlToDraft(htmlContent, (nodeName, node) => {\n  if (nodeName === 'hr') {\n    return {\n      type: 'HORIZONTAL_RULE', // A custom block type defined in your DraftJS editor\n      mutability: 'IMMUTABLE',\n      data: {} // Optional data for the block\n    };\n  }\n  // Return nothing (or any falsy value) to let the default converter handle other nodes\n  return undefined;\n});\n\nif (blocksFromHtml) {\n  const { contentBlocks, entityMap } = blocksFromHtml;\n  const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);\n  const editorState = EditorState.createWithContent(contentState);\n\n  console.log('Successfully converted HTML to DraftJS ContentState.');\n  console.log('Number of content blocks:', contentState.getBlocksAsArray().length);\n  console.log('First block text:', contentState.getFirstBlock().getText());\n  // In a React component, you would typically use `editorState` to initialize or update your DraftJS editor.\n  // Example: `this.setState({ editorState });`\n} else {\n  console.error('Failed to convert HTML content. The input might be empty or invalid.');\n}","lang":"typescript","description":"Demonstrates how to convert an HTML string to DraftJS ContentState, including using the optional customChunkRenderer for specific HTML tags like `<hr/>`."},"warnings":[{"fix":"Upgrade to `html-to-draftjs@^1.3.0` or later using `npm install html-to-draftjs@latest`.","message":"Version `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.","severity":"breaking","affected_versions":"=1.2.0"},{"fix":"Verify that `type` values like 'HORIZONTAL_RULE' are recognized by your DraftJS configuration or component that renders the editor content.","message":"When 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Pre-process HTML for cleanliness or use the `customChunkRenderer` for specific, non-standard HTML patterns you need to support accurately.","message":"Complex 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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"For ESM, use `import htmlToDraft from 'html-to-draftjs';`. For CJS, use `const htmlToDraft = require('html-to-draftjs').default;`.","cause":"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.","error":"TypeError: htmlToDraft is not a function"},{"fix":"Run `npm install html-to-draftjs` or `yarn add html-to-draftjs` in your project directory.","cause":"The package has not been installed or is not correctly linked in your project's `node_modules`.","error":"Error: Cannot find module 'html-to-draftjs'"},{"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.","cause":"The `customChunkRenderer` returned a block type that is not recognized by your DraftJS editor, or the returned object is missing required properties.","error":"Draft.js block 0: Missing data for block with type CUSTOM_BLOCK_TYPE"}],"ecosystem":"npm"}