draft-js-export-html

What is draft-js-export-html?

The draft-js-export-html package is a utility for converting Draft.js editor content to HTML. It provides a straightforward way to transform the content state of a Draft.js editor into an HTML string, making it useful for rendering rich text content in web applications.

What are draft-js-export-html's main functionalities?

Basic Conversion

This feature allows you to convert the content state of a Draft.js editor to an HTML string. The code sample demonstrates how to convert a simple raw content state to HTML.

const { stateToHTML } = require('draft-js-export-html');
const { EditorState, ContentState, convertFromRaw } = require('draft-js');

const rawContent = {
  blocks: [
    {
      text: 'Hello, world!',
      type: 'unstyled'
    }
  ],
  entityMap: {}
};

const contentState = convertFromRaw(rawContent);
const editorState = EditorState.createWithContent(contentState);
const html = stateToHTML(editorState.getCurrentContent());
console.log(html); // Outputs: <p>Hello, world!</p>

Custom Style Map

This feature allows you to define a custom style map for inline styles. The code sample shows how to convert content with bold and italic styles to HTML using custom HTML elements.

const { stateToHTML } = require('draft-js-export-html');
const { EditorState, ContentState, convertFromRaw } = require('draft-js');

const rawContent = {
  blocks: [
    {
      text: 'Bold and Italic text',
      type: 'unstyled',
      inlineStyleRanges: [
        { offset: 0, length: 4, style: 'BOLD' },
        { offset: 9, length: 6, style: 'ITALIC' }
      ]
    }
  ],
  entityMap: {}
};

const contentState = convertFromRaw(rawContent);
const editorState = EditorState.createWithContent(contentState);
const customStyleMap = {
  BOLD: { element: 'strong' },
  ITALIC: { element: 'em' }
};
const html = stateToHTML(editorState.getCurrentContent(), { inlineStyles: customStyleMap });
console.log(html); // Outputs: <p><strong>Bold</strong> and <em>Italic</em> text</p>

Custom Block Rendering

This feature allows you to define custom rendering for different block types. The code sample demonstrates how to render a header block as an <h1> element.

const { stateToHTML } = require('draft-js-export-html');
const { EditorState, ContentState, convertFromRaw } = require('draft-js');

const rawContent = {
  blocks: [
    {
      text: 'Header text',
      type: 'header-one'
    }
  ],
  entityMap: {}
};

const contentState = convertFromRaw(rawContent);
const editorState = EditorState.createWithContent(contentState);
const blockRenderers = {
  'header-one': (block) => `<h1>${block.getText()}</h1>`
};
const html = stateToHTML(editorState.getCurrentContent(), { blockRenderers });
console.log(html); // Outputs: <h1>Header text</h1>

Other packages similar to draft-js-export-html

draft-js-export-markdown

The draft-js-export-markdown package is used to convert Draft.js content state to Markdown. It is similar to draft-js-export-html but focuses on generating Markdown instead of HTML. This can be useful for applications that need to support Markdown editing and rendering.

draft-js-import-html

The draft-js-import-html package provides functionality to convert HTML content into Draft.js content state. It complements draft-js-export-html by allowing the reverse operation, making it useful for applications that need to import HTML content into a Draft.js editor.

README

DraftJS: Export ContentState to HTML

This is a module for DraftJS that will export your editor content to semantic HTML.

It was extracted from React-RTE and placed into a separate module for more general use. Hopefully it can be helpful in your projects.

Installation

npm install --save draft-js-export-html

How to Use

import {stateToHTML} from 'draft-js-export-html';
let html = stateToHTML(contentState);

Options

You can optionally pass a second "options" argument to stateToHTML which should be an object with one or more of the following properties:

inlineStyles

You can define rendering options for inline styles. This applies to built-in inline styles (e.g. BOLD) or your own custom inline styles (e.g. RED). You can specify which element/tag name will be used (e.g. use <b> instead of <strong> for BOLD). You can add custom attributes (e.g. class="foo") or add some styling (e.g. color: red).

Example:

let options = {
  inlineStyles: {
    // Override default element (`strong`).
    BOLD: {element: 'b'},
    ITALIC: {
      // Add custom attributes. You can also use React-style `className`.
      attributes: {class: 'foo'},
      // Use camel-case. Units (`px`) will be added where necessary.
      style: {fontSize: 12}
    },
    // Use a custom inline style. Default element is `span`.
    RED: {style: {color: '#900'}},
  },
};
let html = stateToHTML(contentState, options);

blockRenderers

You can define a custom renderer for any block type. Pass a function that accepts block as an argument. You can return a string to render this block yourself, or return nothing (null or undefined) to defer to the default renderer.

Example:

let options = {
  blockRenderers: {
    atomic: (block) => {
      let data = block.getData();
      if (data.get('foo') === 'bar') {
        return '<div>' + escape(block.getText()) + '</div>';
      }
    },
  },
};
let html = stateToHTML(contentState, options);

defaultBlockTag

If you don't want to define the full custom render for a block, you can define the type of the parent block tag that will be created if the block type doesn't match any known type.

Example:

let options = {
  defaultBlockTag: 'div',
};
let html = stateToHTML(contentState, options);

blockStyleFn

You can define custom styles and attributes for your block, utilizing the underlying built-in rendering logic of the tags, but adding your own attributes or styles on top. The blockStyleFn option takes a block and returns an Object similar to inlineStyles of the following signature or null:

{
  attributes: {}
  style: {}
}

Example:

let options = {
  blockStyleFn(block) => {
    if (block.getData().get('color')) {
      return {
        style: {
          color: block.getData().get('color')
        }
      }
    }
  }
}
let html = stateToHTML(contentState, options);

entityStyleFn

It is passed an entity object and should return an entityStyle object in the shape of:

{
  element: 'element', // name of DOM element as a string
  attributes: {},
  style: {}
}

Example:

let options = {
  entityStyleFn: (entity) => {
    const entityType = entity.get('type').toLowerCase();
    if (entityType === 'image') {
      const data = entity.getData();
      return {
        element: 'img',
        attributes: {
          src: data.src,
        },
        style: {
          // Put styles here...
        },
      };
    }
  },
};
let html = stateToHTML(contentState, options);

Contributing

If you want to help out, please open an issue to discuss or join us on Slack.

License

This software is BSD Licensed.