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 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;
 	}
 	
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);
                     }
                 }
             }