diff --git a/src/utils/parseCalloutTags.ts b/src/utils/parseCalloutTags.ts index f4949c9..0a8ae97 100644 --- a/src/utils/parseCalloutTags.ts +++ b/src/utils/parseCalloutTags.ts @@ -1,12 +1,16 @@ import { ReactElement, createElement } from 'react'; +import { DomElement, HTMLReactParserOptions, domToReact } from "html-react-parser"; import CalloutBlock from '../components/CalloutBlock'; /** * Turn [hint] and other callouts into a proper React component. * @param data */ -const parseCalloutTags = (type: string, content: any): ReactElement|false => { - return createElement(CalloutBlock, { type, content }); +const parseCalloutTags = (type: string, domChildren: DomElement[], parseOptions: HTMLReactParserOptions): ReactElement|false => { + return createElement(CalloutBlock, { + type, + content: domToReact(domChildren, parseOptions), + }); }; export default parseCalloutTags; \ No newline at end of file diff --git a/src/utils/parseHTML.ts b/src/utils/parseHTML.ts index 7b7d463..24afc26 100644 --- a/src/utils/parseHTML.ts +++ b/src/utils/parseHTML.ts @@ -55,7 +55,7 @@ const parseHTML = (html: string): ReactElement | ReactElement[] | string => { } // Remove the type marker and render the component firstTextNode.data = firstTextNode.data.replace(calloutTypeRegex, ''); - return parseCalloutTags(matches[1], domToReact(children)); + return parseCalloutTags(matches[1], children, parseOptions); } } }