Repository files navigation

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.

npm install draftjs-to-html

import{convertToRaw}from'draft-js';importdraftToHtmlfrom'draftjs-to-html';constrawContentState=convertToRaw(editorState.getCurrentContent());constmarkup=draftToHtml(rawContentState,hashtagConfig,directional,customEntityTransform);

The function parameters are:

1. contentState: Its instance ofRawDraftContentState

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.

   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 DraftJSEditorState.

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

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>. (The inline styles in JSON object should start with stringscolor orfont-size likecolor-red,color-green orfontsize-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">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" 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"/>.

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">#tag</a>.

10. 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.

11. Adding style property to block tag for block level styles like text-align:<p>text</p>.

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

MIT.