diff --git a/src/theme/assets/scss/theme/_docs.scss b/src/theme/assets/scss/theme/_docs.scss index 527ae30..6971f28 100644 --- a/src/theme/assets/scss/theme/_docs.scss +++ b/src/theme/assets/scss/theme/_docs.scss @@ -284,7 +284,8 @@ font-size: 1rem; } - .content p:last-of-type { + // Don't add unnecessary space at the end of a callout block + .content > :last-child { margin-bottom: 0; } 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); } } }