How to use draft-convert - 10 common examples

//     data: {}
    //   };
    // }
    if (nodeName === 'hr') { // This currently appears to be broken, sadly. TODO: Fix this
      return {
        type: 'divider',
        data: {},
        text: 'as',
        depth: 0,
        inlineStyleRanges: [ { offset: 0, length: 2, style: 'ITALIC' } ],
      }
    }
  }
})

export const draftToHTML = convertToHTML({
  //eslint-disable-next-line react/display-name
  styleToHTML: (style) => {
    if (style === 'STRIKETHROUGH') {
      return <span style="{{textDecoration:">;
    }
  },
  entityToHTML: (entity, originalText) =&gt; {
    if (entity.type === 'image' || entity.type === 'IMAGE') {
      let classNames = 'draft-image '
      if (entity.data.alignment) {
        classNames = classNames + entity.data.alignment;
      }
      let style = "width:" + (entity.data.width || 40) + "%"
      return `<figure><img style="${style}" class="${classNames}" src="${entity.data.src}"></figure>`;
    }
    if (entity.type === 'LINK') {</span>

return undefined;
}

const customConvertFromHTML = convertFromHTML({
  htmlToBlock: htmlToBlock,
  htmlToEntity: function (nodeName: string, node: HTMLElement, createEntity: Function): EntityInstance | null {
    if (nodeName === 'a') {
      // $FlowFixMe: if nodeName is 'a', node should be an HTMLAnchorElement
      return linkConverters.htmlToEntity(nodeName, node, createEntity, addProtocol);
    }

    return attachmentsConverters.htmlToEntity(nodeName, node, createEntity);
  }
});

const customConvertToHTML = convertToHTML({
  blockToHTML: blockToHTML,
  entityToHTML: (entity: EntityInstance, originalText: string): string => {
    if (entity.type === ENTITY_TYPES.document || entity.type === ENTITY_TYPES.image) {
      return attachmentsConverters.entityToHTML(entity);
    } else if (entity.type === ENTITY_TYPES.link) {
      return linkConverters.entityToHTML(entity, originalText);
    }

    return originalText;
  }
});

export function convertEntries(converter: Function): Function {
  return function (entries: Array): Array {
    return entries.map(entry => ({
      ...entry,

import { Link, linkDecorator } from './link';
import { imageDecorator, videoDecorator } from './media';

export const decorators = new CompositeDecorator([
    linkDecorator,
    imageDecorator,
    videoDecorator,
]);

export const inlineStyles: { [name: string]: React.CSSProperties } = {
    ...BACKGROUND_COLORS,
    ...FOREGROUND_COLORS,
    ...FONT_FAMILY,
    ...FONT_SIZE,
};
export const HTMLToState = convertFromHTML({
    htmlToStyle: (nodeName, node, currentStyle) => {
        let style = currentStyle;
        Object.keys(inlineStyles).forEach(k => {
            if (isMatch(node.style, inlineStyles[k])) {
                style = style.add(k);
            }
        });
        return style;
    },
    htmlToEntity: (nodeName, node) => {
        if (nodeName === 'a') {
            // this will deprecate. fix https://github.com/HubSpot/draft-convert/pull/82
            return Entity.create('LINK', 'MUTABLE', {
                url: node.getAttribute('href'),
            });
        }

constructor(props: Props) {
    super(props);

    let initialEditorState;
    let { initialContent, contentFormat } = this.props;

    contentFormat = contentFormat || 'raw';
    initialContent = initialContent || '';

    if (!initialContent) {
      initialEditorState = EditorState.createEmpty(editorDecorators);
    } else {
      let convertedContent;

      if (contentFormat === 'html') {
        convertedContent = convertFromHTML(getFromHTMLConfig())(initialContent);
      } else if (contentFormat === 'raw') {
        convertedContent = convertFromRaw(initialContent);
      }

      initialEditorState = EditorState.createWithContent(convertedContent, editorDecorators);
    }
    // $FlowIssue
    this.readyForSync = true;

    this.state = {
      editorState: initialEditorState,
      editorProps: {},
    };
  }
  state: State;

return { start: '<div data-blocktype="atomic" class="atomic-block">', end: '</div>' };
  }

  return undefined;
}

export function htmlToBlock(nodeName: string, node: HTMLElement, lastList: *, inBlock: string): void | string {
  const isAtomicBlock = nodeName === 'div' &amp;&amp; node.dataset.blocktype === 'atomic';
  if (isAtomicBlock || (nodeName === 'img' &amp;&amp; inBlock !== 'atomic')) {
    return 'atomic';
  }

  return undefined;
}

const customConvertFromHTML = convertFromHTML({
  htmlToBlock: htmlToBlock,
  htmlToEntity: function (nodeName: string, node: HTMLElement, createEntity: Function): EntityInstance | null {
    if (nodeName === 'a') {
      // $FlowFixMe: if nodeName is 'a', node should be an HTMLAnchorElement
      return linkConverters.htmlToEntity(nodeName, node, createEntity, addProtocol);
    }

    return attachmentsConverters.htmlToEntity(nodeName, node, createEntity);
  }
});

const customConvertToHTML = convertToHTML({
  blockToHTML: blockToHTML,
  entityToHTML: (entity: EntityInstance, originalText: string): string =&gt; {
    if (entity.type === ENTITY_TYPES.document || entity.type === ENTITY_TYPES.image) {
      return attachmentsConverters.entityToHTML(entity);

.add("HTML conversion", () => {
    const content = `
    <p>This editor demonstrates <strong>HTML import and export</strong>.</p>
    <hr>
    <blockquote>Built with <a href="https://github.com/HubSpot/draft-convert">draft-convert</a></blockquote>
    <img src="/static/example-lowres-image2.jpg">
    <p></p>
    `;

    const fromHTML = convertFromHTML({
      htmlToEntity: (nodeName, node, createEntity) =&gt; {
        // a tags will become LINK entities, marked as mutable, with only the URL as data.
        if (nodeName === "a") {
          return createEntity(ENTITY_TYPE.LINK, "MUTABLE", { url: node.href });
        }

        if (nodeName === "img") {
          return createEntity(ENTITY_TYPE.IMAGE, "IMMUTABLE", {
            src: node.src,
          });
        }

        if (nodeName === "hr") {
          return createEntity(ENTITY_TYPE.HORIZONTAL_RULE, "IMMUTABLE", {});
        }

export function convertToHTML(contentState) {
  return DraftConvert.convertToHTML({
    styleToHTML: style => {
      switch (style) {
        case 'BOLD':
          return <strong>;
        case 'ITALIC':
          return <em>;
        case 'UNDERLINE':
          return <u>;
        case 'CODE':
          return <code>;
        default:
          for (const p of plugins) {
            const result = p.styleToHTML &amp;&amp; p.styleToHTML(style);
            if (result) return result;
          }
          return <span>;</span></code></u></em></strong>

createArticle: values =>
      mutate({
        variables: {
          input: {
            title: values.title,
            slug: values.title,
            content: convertToHTML(values.content),
            rawContent: values.rawContent,
            featured: values.featured,
            published: values.published,
            excerpt: values.excerpt,
            featureImage: values.featureImage,
            tags: values.tags,
          },
        },
      }),
  }),

getContent(format: string) {
    format = format || this.props.contentFormat || 'raw';
    const contentState = this.getContentState();

    const colors = defaultOptions.colors;
    const fontSizes = defaultOptions.fontSizes;
    const fontFamilies = defaultOptions.fontFamilies;

    return format === 'html'
      ? convertToHTML(
          getToHTMLConfig({
            contentState,
            colors,
            fontSizes,
            fontFamilies,
          }),
        )(contentState)
      : convertToRaw(this.getContentState());
  }

export const setRenderOptions = (htmlOptions = options) => convertToHTML(htmlOptions);