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

inlineStylesFn

You can define custom function to return rendering options based on inline styles. Similar to draft.js customStyleFn.

Example:

let options = {
  inlineStyleFn: (styles) => {
    let key = 'color-';
    let color = styles.filter((value) => value.startsWith(key)).first();

    if (color) {
      return {
        element: 'span',
        style: {
          color: color.replace(key, ''),
        },
      };
    }
  },
};
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.

If you don't want any parent block tag, you can set defaultBlockTag to null.

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.