How to use the react-markdown/plugins/html-parser function in react-markdown

"hr",
  "br",
  "div",
  "table",
  "thead",
  "caption",
  "tbody",
  "tr",
  "th",
  "td",
  "pre"
];

// We want to allow HTML in markdown, but not anything unsafe like script tags.
// https://github.com/aknuds1/html-to-react#with-custom-processing-instructions
const parseHtml = htmlParser({
  isValidNode: (node: any) => {
    return allowedTags.indexOf(node.type.toLowerCase()) >= 0;
  }
});

function flatten(text: any, child: any) {
  return typeof child === "string"
    ? text + child
    : React.Children.toArray(child.props.children).reduce(flatten, text);
}

function slugify(text: string): string {
  text = text.toLowerCase();
  text = text.split(" ").join("-");
  text = text.split(/\t/).join("--");
  text = text.split(/[|$&`~=\\/@+*!?({[\]})<>=.,;:'"^]/).join("");

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 * as React from 'react';
import Link from 'next/link'
import Prism from 'prismjs'
import htmlParser from 'react-markdown/plugins/html-parser'
import GlobalStyles from '~/components/GlobalStyles';
import Markdown from 'react-markdown';

interface Props {
  children: React.ReactNode;
  escapeHtml?: boolean;
};

const parseHtml = htmlParser({
  isValidNode: node => node.type !== 'script',
})

function LinkRenderer(props: any) {
  const { href, children } = props;
  const baseUrl = 'https://brianlovin.com'
  const isSelf = href.indexOf(baseUrl) === 0
  if (isSelf) {
    return 
      <a>{children}</a>
    
  }

  return (
    <a rel="noopener noreferrer" href="{href}">
      {children}</a>

public render(): ReactNode {
    const renderers = {
      code: CodeBlock,
      link: linkWithTargetBlank,
      linkReference: linkReferenceHasParens,
      inlineMath: (props: { value: string }) => (
        {props.value}
      ),
      math: (props: { value: string }) => {props.value},
    }

    const plugins = [RemarkMathPlugin, RemarkEmoji]

    const astPlugins = this.props.allowHTML ? [htmlParser()] : []

    return (
      
    )
  }
}

import React, { Component } from 'react';
import ReactMarkdown from 'react-markdown';
import apiMutation from 'utils/api/mutation';
import htmlParser from 'react-markdown/plugins/html-parser';
import UpdateWrapper from 'components/UpdateWrapper';
import CodeEditor from 'components/ide/CodeEditor';
import emojiProcessing from './processing/emojiProcessing';
import './MarkdownEdit.scss';

const parseHtml = htmlParser({
  isValidNode: node => node.type !== 'script',
  processingInstructions: [emojiProcessing],
});

class MarkdownEdit extends Component {
  render() {
    const { mutation, id, markdownProp, markdown } = this.props;
    return 
  }
}