From f619b4ba19625c0485abc1689fbd78b45d1a7edf Mon Sep 17 00:00:00 2001 From: Guy Sartorelli Date: Fri, 2 Feb 2024 12:03:38 +1300 Subject: [PATCH 1/2] FIX Remove unnecessary space at the end of callout blocks --- src/theme/assets/scss/theme/_docs.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/theme/assets/scss/theme/_docs.scss b/src/theme/assets/scss/theme/_docs.scss index 527ae30b..6971f287 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; } From 7dd05e61c5da71770c967af184eba575f7c2b9a4 Mon Sep 17 00:00:00 2001 From: Guy Sartorelli Date: Fri, 2 Feb 2024 12:23:33 +1300 Subject: [PATCH 2/2] FIX correctly parse links inside callout blocks --- src/utils/parseCalloutTags.ts | 8 ++++++-- src/utils/parseHTML.ts | 2 +- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/utils/parseCalloutTags.ts b/src/utils/parseCalloutTags.ts index f4949c9f..0a8ae97f 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 7b7d463b..24afc261 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); } } }