# draftjs-to-html

> A library for draftjs to html conversion.

Latest version **0.9.1** (published 2019-12-10) · MIT license · 0 weekly downloads

## Install

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

## Health

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

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

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.9.1 |
| Published | 2019-12-10 |
| First published | 2016-07-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/draftjs-to-html) |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 303 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 325 |
| Author | Jyoti Puri |
| Maintainers | jyotipuri |

## Links

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

## Recent versions

- 0.9.1 (latest) — 2019-12-10
- 0.9.0 — 2019-12-08
- 0.8.4 — 2018-05-13
- 0.8.3 — 2018-02-16
- 0.8.2 — 2018-01-01
- 0.8.1 — 2017-12-07
- 0.8.0 — 2017-12-04
- 0.7.6 — 2017-10-07
- 0.7.5 — 2017-08-18
- 0.7.4 — 2017-07-22
- 0.7.3 — 2017-07-20
- 0.7.2 — 2017-04-25
- 0.7.1 — 2017-04-09
- 0.7.0 — 2017-03-11
- 0.6.3 — 2017-02-14
- … 40 more at https://npm.io/package/draftjs-to-html/versions

## README

# DraftJS TO HTML

A library for converting DraftJS Editor content to plain HTML.

This is draft to HTML library I wrote for one of my projects. I am open-sourcing it so that others can also be benefitted from my work.

## Installation

`npm install draftjs-to-html`

## Usage

```js
import { convertToRaw } from 'draft-js';
import draftToHtml from 'draftjs-to-html';

const rawContentState = convertToRaw(editorState.getCurrentContent());

const markup = draftToHtml(
  rawContentState, 
  hashtagConfig, 
  directional, 
  customEntityTransform
);
```
The function parameters are:

1. **contentState**: Its instance of  [RawDraftContentState](https://facebook.github.io/draft-js/docs/api-reference-data-conversion.html#content)

2. **hashConfig**: Its configuration object for hashtag, its required only if hashtags are used. If the object is not defined hashtags will be output as simple text in the markdown.
    ```js
    hashConfig = {
      trigger: '#',
      separator: ' ',
    }
    ```
    Here trigger is character that marks starting of hashtag (default '#') and separator is character that separates characters (default ' '). These fields in hastag object are optional.

3. **directional**: Boolean, if directional is true text is aligned according to bidi algorithm. This is also optional.

4. **customEntityTransform**: Its function to render custom defined entities by user, its also optional.

   **editorState** is instance of DraftJS               [EditorState](https://draftjs.org/docs/api-reference-editor-state.html#content).

## Supported conversions
Following is the list of conversions it supports:

1. Convert block types to corresponding HTML tags:

    || Block Type | HTML Tag |
    | -------- | -------- | -------- |
    | 1 | header-one | h1 |
    | 2 | header-two | h2 |
    | 3 | header-three | h3 |
    | 4 | header-four | h4 |
    | 5 | header-five | h5 |
    | 6 | header-six | h6 |
    | 7 | unordered-list-item | ul |
    | 8 | ordered-list-item | ol |
    | 9 | blockquote | blockquote |
    | 10 | code | pre |
    | 11 | unstyled | p |

    It performs these additional changes to text of blocks:
    - replace blank space in beginning and end of block with ` `
    - replace `\n` with `<br>`
    - replace `<` with `&lt;`
    - replace `>` with `&gt;`


2. Converts ordered and unordered list blocks with depths to nested structure of `<ul>, <ol>` and `<li>`.

3. Converts inline styles BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, CODE, SUPERSCRIPT, SUBSCRIPT to corresponding HTML tags: `<strong>, <em>, <ins>, <code>, <sup>, <sub>`.

4. Converts inline styles color, background-color, font-size, font-family to a span tag with inline style details:
`<span style="color:xyz;font-size:xx">`. (The inline styles in JSON object should start with strings `color` or `font-size` like `color-red`, `color-green` or `fontsize-12`, `fontsize-20`).

5. Converts entity range of type link to anchor tag using entity data url for href, targetOption for target: `<a href="url" target="_self">text</a>`. Default target is `_self`.

6. Converts entity range of type mention to anchor tag using entity data url for href and value for data-value, it also adds class to it: `<a href="url" class="wysiwyg-mention" data-mention data-value="value">text</a>`.

7. Converts atomic entity image to image tag using entity data src for image source, and if present alt, alignment, height, width also: `<img src="src" alt="alt_text" style="float: left, height: 50px; width: 50px"/>`.

8. Converts embedded links to iFrames, using width, height and src from entity data. `<iframe width="width" height="height" src="src" frameBorder="0"></iframe>`

9. Converts hashtags to anchor tag: `<a href="#tag" class="wysiwyg-hashtag">#tag</a>`.

9. `customEntityTransform` can be used for transformation of a custom entity block to html. If present its call to generate html for entity. It can take 2 parameter:
   1. `entity` ( object with { type, mutalibity, data})
   2. `text` text present in the block.

10. Adding style property to block tag for block level styles like text-align: `<p style="text-align: right">text</p>`.

11. RTL, if directional function parameter is true, generated blocks have property `dir = "auto"` thus they get aligned according to bidi algorithm.

## License
MIT.

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