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

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.

Supported conversions

It performs these additional changes to text of blocks:
- replace blank space in beginning and end of block with  
- replace \n with

- replace < with <
- replace > with >


2. Converts ordered and unordered list blocks with depths to nested structure of

,
and
1. .

   3. Converts inline styles BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, CODE, SUPERSCRIPT, SUBSCRIPT to corresponding HTML tags: , , , , , .

   4. Converts inline styles color, background-color, font-size, font-family to a span tag with inline style details:
. (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: text. 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: text.

   7. Converts atomic entity image to image tag using entity data src for image source, and if present alt, alignment, height, width also: .

   8. Converts embedded links to iFrames, using width, height and src from entity data.

   9. Converts hashtags to anchor tag: #tag.

   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:

   text

   .

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

   License

   
   MIT.