From 8ce02bcf8e673c1a4eaa95e40637c06478b02552 Mon Sep 17 00:00:00 2001 From: Guy Sartorelli <36352093+GuySartorelli@users.noreply.github.com> Date: Fri, 2 Feb 2024 13:12:41 +1300 Subject: [PATCH] FIX Resolve final callout block issues (#285) * FIX Remove unnecessary space at the end of callout blocks * FIX correctly parse links inside callout blocks --- src/theme/assets/scss/theme/_docs.scss | 3 ++- src/utils/parseCalloutTags.ts | 8 ++++++-- src/utils/parseHTML.ts | 2 +- 3 files changed, 9 insertions(+), 4 deletions(-) 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); } } }