# html-to-draftjs

> A library for converting plain HTML to DraftJS Editor content. Build for use with **[react-draft-wysiwyg](https://github.com/jpuri/react-draft-wysiwyg)**.

Latest version **1.5.0** (published 2019-12-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install html-to-draftjs
pnpm add html-to-draftjs
yarn add html-to-draftjs
bun add html-to-draftjs
```

## Health

**Score 23/100 (F)** — status: abandoned.

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.0 |
| Published | 2019-12-08 |
| First published | 2016-12-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/html-to-draftjs) |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 211.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 163 |
| Author | Jyoti Puri |
| Maintainers | jyotipuri |

## Links

- npm: https://www.npmjs.com/package/html-to-draftjs
- Repository: https://github.com/jpuri/html-to-draftjs
- Homepage: https://github.com/jpuri/html-to-draftjs#readme
- Issues: https://github.com/jpuri/html-to-draftjs/issues
- npm.io page: https://npm.io/package/html-to-draftjs

## Recent versions

- 1.5.0 (latest) — 2019-12-08
- 0.0.1-beta (beta) — 2016-12-25
- 1.4.0 — 2018-04-25
- 1.3.1 — 2018-04-21
- 1.3.0 — 2018-02-16
- 1.2.0 — 2018-02-15
- 1.1.2 — 2018-01-01
- 1.1.1 — 2017-12-07
- 1.1.0 — 2017-12-04
- 1.0.1 — 2017-10-07
- 1.0.0 — 2017-10-03
- 0.1.0-beta.16 — 2017-09-30
- 0.1.0-beta15 — 2017-08-18
- 0.1.0-beta14 — 2017-07-30
- 0.1.0-beta13 — 2017-07-30
- … 11 more at https://npm.io/package/html-to-draftjs/versions

## README

# HTML To DraftJS

A library for converting plain HTML to DraftJS Editor content.
Build for use with **[react-draft-wysiwyg](https://github.com/jpuri/react-draft-wysiwyg)**.

## Installation

```
npm install html-to-draftjs --save
```

## Usage

```
import { EditorState, ContentState } from 'draft-js';
import htmlToDraft from 'html-to-draftjs';

const blocksFromHtml = htmlToDraft(this.props.content);
const { contentBlocks, entityMap } = blocksFromHtml;
const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);
const editorState = EditorState.createWithContent(contentState);
```

### (optional) customChunkRenderer
Use to define additional html nodes. Only supports atomic blocks.

* _nodeName: string_ - the name of the node, in lowercase
* _node: HTMLElement_ - the parsed node itself

This renderer function is executed before any other html to draft conversion.
Return nothing (or something falsy) to continue with the normal translation.

Example:

```
htmlToDraft('<hr/>', (nodeName, node) => {
  if (nodeName === 'hr') {
    return {
      type: 'HORIZONTAL_RULE',
      mutability: 'MUTABLE',
      data: {}
    };
  }
})
```


**Take Care:** Plz not use version `1.2.0` it has build issues.

---
_Source: https://npm.io/package/html-to-draftjs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._