How to use the html-to-react.ProcessNodeDefinitions function in html-to-react

import React from "react";
import ReactMarkdown from "react-markdown";
// @ts-ignore
import HtmlToReact from "html-to-react";
// @ts-ignore
import htmlParser from "react-markdown/plugins/html-parser";

import { tabs } from "./Tabs";

const isValidNode = (node: any) => node.type !== "script";
const processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React);

export default (headingPrefix: string) =>
  htmlParser({
    isValidNode,
    processingInstructions: [
      // Tabs processing
      tabs(headingPrefix),
      {
        // Anything else
        shouldProcessNode: (node: any) => true,
        processNode: processNodeDefinitions.processDefaultNode,
      },
    ],
  });

export function messageHtmlToComponent(html, isRHS, options = {}) {
    if (!html) {
        return null;
    }

    const parser = new Parser();
    const processNodeDefinitions = new ProcessNodeDefinitions(React);

    function isValidNode() {
        return true;
    }

    const processingInstructions = [

        // Workaround to fix MM-14931
        {
            replaceChildren: false,
            shouldProcessNode: (node) => node.type === 'tag' && node.name === 'input' && node.attribs.type === 'checkbox',
            processNode: (node) => {
                const attribs = node.attribs || {};
                node.attribs.checked = Boolean(attribs.checked);

                return React.createElement('input', {...node.attribs});

import React from 'react';
import HtmlToReact from 'html-to-react';
import htmlParser from 'react-markdown/plugins/html-parser';

import { tabs } from './Tabs';
import { link } from './Link';
import { img } from './Image';

const isValidNode = node => node.type !== 'script';
const processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React);

export default htmlParser({
  isValidNode,
  processingInstructions: [
    tabs,
    link,
    img,
    {
      // Anything else
      shouldProcessNode: node => true,
      processNode: processNodeDefinitions.processDefaultNode,
    },
  ],
});

import React from 'react'

import HtmlToReact from 'html-to-react' // https://github.com/aknuds1/html-to-react
import ReactMarkdown from 'react-markdown' // https://github.com/rexxars/react-markdown
import htmlParser from 'react-markdown/plugins/html-parser'

import 'github-markdown-css' // https://github.com/sindresorhus/github-markdown-css

// See https://github.com/aknuds1/html-to-react#with-custom-processing-instructions
// for more info on the processing instructions
const processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React)
const parseHtml = htmlParser({
  isValidNode: node => node.type !== 'script',
  processingInstructions: [
    {
      shouldProcessNode: node => {
        return true
      },
      processNode: processNodeDefinitions.processDefaultNode
    }
  ]
})

export const Markdown = ({ children, className }) => (
  <div>
    </div>

import React, {Component} from 'react'
import {connect} from 'react-redux'
import {Link} from 'react-router-dom'
import {Parser, ProcessNodeDefinitions} from 'html-to-react'
import PropTypes from 'prop-types'

import selectors from '../store/selectors'
import {loadPage} from '../modules/page/reducer'

import 'react-quill/dist/quill.snow.css'
import 'react-quill/dist/quill.core.css'

const htmlToReactParser = new Parser()
const processNodeDefinitions = new ProcessNodeDefinitions(React)

const getProcessingInstructions = bindings => [{
  // convert internal links to Link components
  shouldProcessNode: node => node.name && node.name === 'a' &&
    node.attribs.href.startsWith('/'),
  processNode: function generateLink(node, children) {
    return {children}
  }
}, {
  // bind placeholders
  shouldProcessNode: node => node.name && node.name === 'span' &&
    node.attribs.class === 'ql-placeholder-content',
  processNode: function insertPlaceholder(node) {
    const content = bindings[node.attribs['data-id']] || '{{missing}}'
    return <span>{content}</span>
  }

"use strict";

const React = require("react");
const HtmlToReact = require("html-to-react");
const combine = require("terriajs-cesium/Source/Core/combine").default;
const defined = require("terriajs-cesium/Source/Core/defined").default;
const utils = require("html-to-react/lib/utils");

const CustomComponents = require("./CustomComponents");

const htmlToReactParser = new HtmlToReact.Parser({
  decodeEntities: true
});
const processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React);

const isValidNode = function() {
  return true;
};

const shouldProcessEveryNodeExceptWhiteSpace = function(node) {
  // Use this to avoid white space between table elements, eg.
  //     \n<table> <tbody> <tr><td>x</td> <td>3</td> </tr> </tbody> </table>
  // being rendered as empty <span> elements, and causing React errors.
  return node.type !== "text" || node.data.trim();
};

let keyIndex = 0;

/**
 * @private</span>

* Pulls in a heavy set of dependencies and thus WILL bloat your bundle size.
 * You have been warned.
 **/
const React = require('react')
const xtend = require('xtend')
const visit = require('unist-util-visit')
const HtmlToReact = require('html-to-react')
const symbols = require('../symbols')

const type = 'parsedHtml'
const selfClosingRe = /^<(area|base|br|col|embed|hr|img|input|keygen|link|meta|param|source|track|wbr)\s*\/?>$/i
const startTagRe = /^<([a-z]+)\b/i
const closingTagRe = /^<\/([a-z]+)\s*>$/

const parser = new HtmlToReact.Parser()
const processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React)

const defaultConfig = {
  isValidNode: node => node.type !== 'script',
  processingInstructions: [
    {
      shouldProcessNode: () => true,
      processNode: processNodeDefinitions.processDefaultNode
    }
  ]
}

function parseHtml(config, tree, props) {
  let open
  let currentParent
  visit(
    tree,

import { Link } from 'react-router'
import React from 'react'
import entities from 'entities'
import HtmlToReact from 'html-to-react'
import voidElements from 'void-elements'

import config from '../config'

const parser = new HtmlToReact.Parser(React)
const processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React)

/**
 * Convert common Elements to their React equivalent.
 * @param {String} html HTML string
 * @returns {Object} HtmlToReact parser
 */
export default function parse (html) {
  const counts = {}
  const imageContainers = ['div', 'p']

  const processingInstructions = [{
    shouldProcessNode: (node) => true,
    processNode: (node, children) => {
      if (!counts[node.name]) {
        counts[node.name] = 0
      }

import React from 'react'
import has from 'lodash/has'
import { ProcessNodeDefinitions } from 'html-to-react'
import { Link, Footnote, Spread, Marker, Audio, Video, SpreadFigure } from '../components'
import { Asset, Url } from '../helpers'

export const isValidNode = () => true
export const processNodeDefinitions = new ProcessNodeDefinitions(React)
export const processingInstructions = ({ requestedSpineItem /*, opsURL*/ }) => [
    {
        shouldProcessNode(node) {
            return node.attribs && node.attribs['epub:type'] && node.attribs['epub:type'] === 'noteref'
        },
        processNode(node, children, index) {
            const href = Url.resolveOverlappingURL(requestedSpineItem.absoluteURL, node.attribs.href)
            const attrs = Asset.convertToReactAttrs(node.attribs)

            return React.createElement(
                Footnote,
                {
                    ...attrs,
                    key: index,
                    href,
                },

axios.get(url).then((result) => {
			const { data } = result;
			const { cache = {} } = this.component.state;

			const htmlToReactParser      = new HtmlToReact.Parser();
			const processNodeDefinitions = new HtmlToReact.ProcessNodeDefinitions(React);
			const processingInstructions = [{
				shouldProcessNode: () => { return true; },
				processNode:       processNodeDefinitions.processDefaultNode
			}];

			cache[url] = htmlToReactParser.parseWithInstructions(data, () => { return true; }, processingInstructions);

			this.component.setState({ cache });
		});
	}