draftjs-to-html

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.

Installing

npm install draftjs-to-html

Using

import draftToHtml from 'draftjs-to-html';

const rawContentState = convertToRaw(editorState.getCurrentContent());
const markup = draftToHtml(contentState, directional, customEntityTransform);

Supported conversions

Following is the list of conversions it supports:

• 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	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>\n - replace < with < - replace > with >

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

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

• 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 should start with strings color or font-size like color-red, color-green or fontsize-12, fontsize-20.

• Converts entity range of type link to anchor tag using entity data url for href: <a href="url" />.

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

• Converts atomic entity image to image tag using entity data src for image source: <img src="src" />.

• Converts embedded links to iFrames.

• customEntityTransform can be used for transformation of a custom entity block to html.

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

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

License

MIT.