{"id":31230850,"url":"https://github.com/amr258144/draft-js-html-converter","last_synced_at":"2026-01-20T16:50:09.192Z","repository":{"id":310015543,"uuid":"1038404566","full_name":"amr258144/draft-js-html-converter","owner":"amr258144","description":"A lightweight, zero-dependency library for converting between Draft.js rich text format and HTML","archived":false,"fork":false,"pushed_at":"2025-08-15T16:47:11.000Z","size":55,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-18T02:38:31.119Z","etag":null,"topics":["bidirectional","draft-js","draftjs-to-html","editor","html","javascript","npm-package","rich-text","typescript","zero-dependencies"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/draft-js-html-converter","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/amr258144.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-15T06:17:06.000Z","updated_at":"2025-08-17T05:01:12.000Z","dependencies_parsed_at":"2025-08-15T07:17:08.339Z","dependency_job_id":"56efc742-1c1c-432c-856f-e3fa40d2b27f","html_url":"https://github.com/amr258144/draft-js-html-converter","commit_stats":null,"previous_names":["amr258144/draft-js-html-converter"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/amr258144/draft-js-html-converter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amr258144%2Fdraft-js-html-converter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amr258144%2Fdraft-js-html-converter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amr258144%2Fdraft-js-html-converter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amr258144%2Fdraft-js-html-converter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/amr258144","download_url":"https://codeload.github.com/amr258144/draft-js-html-converter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amr258144%2Fdraft-js-html-converter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":276052651,"owners_count":25576895,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-20T02:00:10.207Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bidirectional","draft-js","draftjs-to-html","editor","html","javascript","npm-package","rich-text","typescript","zero-dependencies"],"created_at":"2025-09-22T10:13:56.156Z","updated_at":"2025-09-22T10:14:01.236Z","avatar_url":"https://github.com/amr258144.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Draft.js HTML Converter\n\n[![npm version](https://badge.fury.io/js/draft-js-html-converter.svg)](https://www.npmjs.com/package/draft-js-html-converter)\n[![GitHub license](https://img.shields.io/github/license/amr258144/draft-js-html-converter.svg)](https://github.com/amr258144/draft-js-html-converter/blob/main/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/amr258144/draft-js-html-converter.svg)](https://github.com/amr258144/draft-js-html-converter/issues)\n[![GitHub stars](https://img.shields.io/github/stars/amr258144/draft-js-html-converter.svg)](https://github.com/amr258144/draft-js-html-converter/stargazers)\n\nA lightweight, zero-dependency library for converting between Draft.js rich text format and HTML.\n\n## Table of Contents\n\n- [Why Choose This Library?](#why-choose-this-library)\n- [Installation](#installation)\n- [Quick Start](#quick-start)\n- [Features](#features)\n- [Usage](#usage)\n- [API Reference](#api-reference)\n- [Supported Features](#supported-features)\n- [Examples](#examples)\n- [Error Handling](#error-handling)\n- [Browser Support](#browser-support)\n- [Testing](#testing)\n- [Troubleshooting](#troubleshooting)\n- [Contributing](#contributing)\n- [Related Projects](#related-projects)\n- [Changelog](#changelog)\n- [License](#license)\n\n## Why Choose This Library?\n\n- 🚀 **Zero dependencies** - No bloat, just pure JavaScript\n- 📦 **Lightweight** - Less than 15KB minified\n- ⚡ **Fast** - Optimized for performance\n- 🔄 **Bidirectional** - Perfect round-trip conversion\n- 🧪 **Well tested** - 95%+ test coverage\n- 📘 **TypeScript ready** - Full type definitions included\n\n## Installation\n\n```bash\n# npm\nnpm install draft-js-html-converter\n\n# yarn\nyarn add draft-js-html-converter\n\n# pnpm\npnpm add draft-js-html-converter\n```\n\n## Quick Start\n\n```javascript\nconst { convertRichTextToHtml, convertHtmlToDraftJs } = require('draft-js-html-converter');\n\n// Draft.js to HTML\nconst html = convertRichTextToHtml(draftContent);\n\n// HTML to Draft.js  \nconst draftContent = convertHtmlToDraftJs('\u003cp\u003e\u003cstrong\u003eHello\u003c/strong\u003e World\u003c/p\u003e');\n```\n\n## Features\n\n- ✅ Convert Draft.js content to clean HTML\n- ✅ Convert HTML back to Draft.js format\n- ✅ Support for all common formatting (bold, italic, underline, headers, lists, links, colors, font sizes)\n- ✅ Proper handling of nested styles and entities\n- ✅ Text alignment support\n- ✅ Zero dependencies\n- ✅ TypeScript support\n- ✅ Comprehensive test coverage\n- ✅ Round-trip conversion support\n\n## Usage\n\n### Converting Draft.js to HTML\n\n```javascript\nconst { convertRichTextToHtml } = require('draft-js-html-converter');\n\nconst draftContent = {\n  blocks: [\n    {\n      key: 'abc123',\n      data: {},\n      text: 'Hello World',\n      type: 'unstyled',\n      depth: 0,\n      entityRanges: [],\n      inlineStyleRanges: [\n        { style: 'BOLD', offset: 0, length: 5 }\n      ]\n    }\n  ],\n  entityMap: {}\n};\n\nconst html = convertRichTextToHtml(draftContent);\nconsole.log(html); // '\u003cp\u003e\u003cstrong\u003eHello\u003c/strong\u003e World\u003c/p\u003e'\n```\n\n### Converting HTML to Draft.js\n\n```javascript\nconst { convertHtmlToDraftJs } = require('draft-js-html-converter');\n\nconst html = '\u003cp\u003e\u003cstrong\u003eHello\u003c/strong\u003e World\u003c/p\u003e';\nconst draftContent = convertHtmlToDraftJs(html);\n\nconsole.log(draftContent);\n// {\n//   blocks: [\n//     {\n//       key: 'generated-key',\n//       data: {},\n//       text: 'Hello World',\n//       type: 'unstyled',\n//       depth: 0,\n//       entityRanges: [],\n//       inlineStyleRanges: [\n//         { style: 'BOLD', offset: 0, length: 5 }\n//       ]\n//     }\n//   ],\n//   entityMap: {}\n// }\n```\n\n### ES6 Imports\n\n```javascript\nimport { convertRichTextToHtml, convertHtmlToDraftJs } from 'draft-js-html-converter';\n\n// or\n\nimport converter from 'draft-js-html-converter';\nconst html = converter.convertRichTextToHtml(draftContent);\n```\n\n## API Reference\n\n### convertRichTextToHtml(richTextContent)\n\nConverts Draft.js content to HTML string.\n\n**Parameters:**\n- `richTextContent` (Object): Draft.js content state object\n\n**Returns:**\n- `string`: HTML representation of the content\n\n### convertHtmlToDraftJs(htmlContent)\n\nConverts HTML string to Draft.js content format.\n\n**Parameters:**\n- `htmlContent` (string): HTML content to convert\n\n**Returns:**\n- `Object`: Draft.js content state object with `blocks` and `entityMap`\n\n## Supported Features\n\n### Block Types\n- `unstyled` → `\u003cp\u003e`\n- `header-one` → `\u003ch1\u003e`\n- `header-two` → `\u003ch2\u003e`\n- `header-three` → `\u003ch3\u003e`\n- `unordered-list-item` → `\u003cul\u003e\u003cli\u003e`\n- `ordered-list-item` → `\u003col\u003e\u003cli\u003e`\n- `blockquote` → `\u003cblockquote\u003e`\n- `code-block` → `\u003cpre\u003e`\n\n### Inline Styles\n- `BOLD` → `\u003cstrong\u003e`\n- `ITALIC` → `\u003cem\u003e`\n- `UNDERLINE` → `\u003cu\u003e`\n- `FONT_SIZE_SMALL` → `\u003cspan style=\"font-size: small\"\u003e`\n- `FONT_SIZE_NORMAL` → `\u003cspan style=\"font-size: medium\"\u003e`\n- `FONT_SIZE_LARGE` → `\u003cspan style=\"font-size: large\"\u003e`\n- `FONT_SIZE_HUGE` → `\u003cspan style=\"font-size: x-large\"\u003e`\n\n### Entities\n- Links: `{ type: 'CUSTOM', data: { url: '...' } }` → `\u003ca href=\"...\"\u003e`\n- Colors: `{ type: 'CUSTOM', data: { color: '...' } }` → `\u003cspan style=\"color: ...\"\u003e`\n\n### Block Data\n- Text alignment: `{ textAlignment: 'center' }` → `style=\"text-align: center\"`\n\n## Examples\n\n🔗 **[Try it online](https://codesandbox.io/s/draft-js-html-converter-demo)** (CodeSandbox)\n\n### Complex Content with Multiple Styles\n\n```javascript\nconst complexDraft = {\n  blocks: [\n    {\n      key: 'header',\n      data: { textAlignment: 'center' },\n      text: 'Welcome to My Blog',\n      type: 'header-one',\n      depth: 0,\n      entityRanges: [],\n      inlineStyleRanges: []\n    },\n    {\n      key: 'intro',\n      data: {},\n      text: 'This is an introduction with bold text and a link to Google.',\n      type: 'unstyled',\n      depth: 0,\n      entityRanges: [{ key: 0, offset: 53, length: 6 }],\n      inlineStyleRanges: [{ style: 'BOLD', offset: 29, length: 4 }]\n    },\n    {\n      key: 'list1',\n      data: {},\n      text: 'First item',\n      type: 'unordered-list-item',\n      depth: 0,\n      entityRanges: [],\n      inlineStyleRanges: []\n    },\n    {\n      key: 'list2',\n      data: {},\n      text: 'Second item with italic text',\n      type: 'unordered-list-item',\n      depth: 0,\n      entityRanges: [],\n      inlineStyleRanges: [{ style: 'ITALIC', offset: 17, length: 6 }]\n    }\n  ],\n  entityMap: {\n    0: {\n      type: 'CUSTOM',\n      mutability: 'MUTABLE',\n      data: { url: 'https://google.com' }\n    }\n  }\n};\n\nconst html = convertRichTextToHtml(complexDraft);\nconsole.log(html);\n// Output:\n// \u003ch1 style=\"text-align: center\"\u003eWelcome to My Blog\u003c/h1\u003e\n// \u003cp\u003eThis is an introduction with \u003cstrong\u003ebold\u003c/strong\u003e text and a link to \u003ca href=\"https://google.com\"\u003eGoogle\u003c/a\u003e.\u003c/p\u003e\n// \u003cul\u003e\n//   \u003cli\u003eFirst item\u003c/li\u003e\n//   \u003cli\u003eSecond item with \u003cem\u003eitalic\u003c/em\u003e text\u003c/li\u003e\n// \u003c/ul\u003e\n```\n\n### Round-trip Conversion\n\n```javascript\n// Start with HTML\nconst originalHtml = `\n  \u003ch1\u003eMy Article\u003c/h1\u003e\n  \u003cp\u003eThis is a paragraph with \u003cstrong\u003ebold\u003c/strong\u003e and \u003cem\u003eitalic\u003c/em\u003e text.\u003c/p\u003e\n  \u003cul\u003e\n    \u003cli\u003eList item 1\u003c/li\u003e\n    \u003cli\u003eList item 2\u003c/li\u003e\n  \u003c/ul\u003e\n`;\n\n// Convert to Draft.js\nconst draftContent = convertHtmlToDraftJs(originalHtml);\n\n// Convert back to HTML\nconst finalHtml = convertRichTextToHtml(draftContent);\n\n// The content is preserved through the round-trip\nconsole.log(finalHtml);\n```\n\n## Error Handling\n\nThe library includes robust error handling:\n\n- Invalid or malformed input returns safe fallback values\n- HTML parsing errors are caught and logged\n- Malformed Draft.js content falls back to JSON string representation\n\n```javascript\n// These all handle gracefully\nconvertRichTextToHtml(null); // returns ''\nconvertRichTextToHtml({}); // returns ''\nconvertHtmlToDraftJs(''); // returns { blocks: [], entityMap: {} }\nconvertHtmlToDraftJs('\u003cinvalid\u003ehtml'); // returns safe fallback structure\n```\n\n## Browser Support\n\n- Chrome 60+\n- Firefox 55+\n- Safari 12+\n- Edge 79+\n- Node.js 12+\n\n## Testing\n\nRun the test suite:\n\n```bash\nnpm test\n```\n\nThe library includes comprehensive tests covering:\n- All supported block types and inline styles\n- Entity handling (links, colors)\n- Edge cases and error conditions\n- Round-trip conversion accuracy\n- Malformed input handling\n\n## Troubleshooting\n\n### Common Issues\n\n**Q: My inline styles aren't converting correctly**\nA: Check that your `offset` and `length` values in `inlineStyleRanges` match the actual text positions.\n\n**Q: Links aren't working**\nA: Ensure your entity has `type: 'CUSTOM'` and `data: { url: '...' }`.\n\n**Q: Getting empty output**\nA: Verify your Draft.js content has the correct structure with `blocks` and `entityMap`.\n\n### Need Help?\n\n- 📖 [Check the examples](./examples/)\n- 🐛 [Report a bug](https://github.com/amr258144/draft-js-html-converter/issues)\n- 💬 [Ask a question](https://github.com/amr258144/draft-js-html-converter/discussions)\n\n## Contributing\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Add tests for your changes\n4. Ensure all tests pass (`npm test`)\n5. Commit your changes (`git commit -m 'Add amazing feature'`)\n6. Push to the branch (`git push origin feature/amazing-feature`)\n7. Open a Pull Request\n\n## Related Projects\n\n- [Draft.js](https://draftjs.org/) - Rich text editor framework\n- [draft-js-export-html](https://github.com/sstur/draft-js-export-html) - Alternative HTML export (Draft.js → HTML only)\n- [draft-js-import-html](https://github.com/sstur/draft-js-import-html) - Alternative HTML import (HTML → Draft.js only)\n\n**Why choose draft-js-html-converter?** Bidirectional conversion, zero dependencies, and comprehensive feature support in one package.\n\n## Changelog\n\nSee [CHANGELOG.md](./CHANGELOG.md) for a detailed list of changes.\n\n## License\n\nMIT License - see the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famr258144%2Fdraft-js-html-converter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famr258144%2Fdraft-js-html-converter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famr258144%2Fdraft-js-html-converter/lists"}