draftjs-to-html

What is draftjs-to-html?

The draftjs-to-html npm package is a utility that converts Draft.js editor content to HTML. It is particularly useful for applications that use Draft.js for rich text editing and need to render the content as HTML for display or storage.

What are draftjs-to-html's main functionalities?

Convert Draft.js ContentState to HTML

This feature allows you to convert the Draft.js ContentState to HTML. The code sample demonstrates how to get the current content from the editor state, convert it to a raw content state, and then convert it to HTML using the draftjs-to-html package.

const draftToHtml = require('draftjs-to-html');
const { convertToRaw } = require('draft-js');

const contentState = editorState.getCurrentContent();
const rawContentState = convertToRaw(contentState);
const html = draftToHtml(rawContentState);
console.log(html);

Custom Block Rendering

This feature allows you to define custom rendering for specific block types. The code sample shows how to render 'atomic' blocks with a custom HTML structure.

const draftToHtml = require('draftjs-to-html');
const { convertToRaw } = require('draft-js');

const contentState = editorState.getCurrentContent();
const rawContentState = convertToRaw(contentState);
const html = draftToHtml(rawContentState, {
  blockRenderers: {
    'atomic': (block) => `<div class='custom-atomic'>${block.text}</div>`
  }
});
console.log(html);

Custom Inline Style Rendering

This feature allows you to define custom rendering for inline styles. The code sample demonstrates how to render 'BOLD' styles as <strong> tags.

const draftToHtml = require('draftjs-to-html');
const { convertToRaw } = require('draft-js');

const contentState = editorState.getCurrentContent();
const rawContentState = convertToRaw(contentState);
const html = draftToHtml(rawContentState, {
  styleToHTML: (style) => {
    if (style === 'BOLD') {
      return <strong />;
    }
    return null;
  }
});
console.log(html);

Other packages similar to draftjs-to-html

draft-js-export-html

The draft-js-export-html package provides similar functionality to draftjs-to-html by converting Draft.js ContentState to HTML. It offers more customization options for block and inline style rendering, making it a robust alternative.

draft-convert

The draft-convert package is another alternative that provides utilities for converting Draft.js ContentState to and from HTML. It offers a flexible API for defining custom block and inline style conversions, making it a versatile choice for developers.

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.

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:

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

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

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

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

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

5. 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" />.

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

7. Converts embedded links to iFrames.

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

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

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

License

MIT.