import parse, { DomElement } from 'html-react-parser'; import cleanChildrenTags from './cleanChildrenTags'; import cleanWhitespace from './cleanWhitespace'; import cleanApiTags from './cleanApiTags'; import rewriteLink from './rewriteLink'; import parseChildrenOf from './parseChildrenOf'; import cleanCalloutTags from './cleanCalloutTags'; import { ReactElement } from 'react'; import rewriteTable from './rewriteTable'; import rewriteHeader from './rewriteHeader'; import cleanHeaders from './cleanHeaders'; /** * Replace all the [CHILDREN] with proper React components. * @param html * @return ReactElement | ReactElement[] | string */ const parseHTML = (html: string): ReactElement | ReactElement[] | string => { let cleanHTML = html; cleanHTML = cleanChildrenTags(cleanHTML); cleanHTML = cleanCalloutTags(cleanHTML); cleanHTML = cleanWhitespace(cleanHTML); cleanHTML = cleanApiTags(cleanHTML); cleanHTML = cleanHeaders(cleanHTML); const parseOptions = { replace(domNode: DomElement): ReactElement | object | undefined | false { const { name, attribs, children } = domNode; const domChildren = children || []; if (name && attribs) { if (name === 'a') { return rewriteLink(attribs, domChildren, parseOptions); } if (name === 'table') { return rewriteTable(domChildren, parseOptions); } if (name.match(/^h[0-9]$/)) { return rewriteHeader(domNode); } } if (domNode.data) { const { data } = domNode; return parseChildrenOf(data); } return false; } }; const component = parse(cleanHTML, parseOptions); return component; }; export default parseHTML;