From 52467ffc4e0fd6547128541f79ab2d278377c11b Mon Sep 17 00:00:00 2001 From: Guy Sartorelli <36352093+GuySartorelli@users.noreply.github.com> Date: Thu, 19 Oct 2023 10:09:13 +1300 Subject: [PATCH] FIX Render callout blocks correctly (#277) --- src/utils/cleanCalloutTags.ts | 11 +++++++++-- src/utils/parseCalloutTags.ts | 15 ++------------- src/utils/parseHTML.ts | 8 +++++--- 3 files changed, 16 insertions(+), 18 deletions(-) diff --git a/src/utils/cleanCalloutTags.ts b/src/utils/cleanCalloutTags.ts index f3f02d9..cf96503 100644 --- a/src/utils/cleanCalloutTags.ts +++ b/src/utils/cleanCalloutTags.ts @@ -5,9 +5,16 @@ * @returns */ const cleanCalloutTags = (html: string): string => { + // Replace callout
tags with a \s*\[(hint|warning|info|alert|notice|note)\](.*?)\[\/\1\]\s*<\/p>/gs,
+ (_, type, content) => ` and tags.
return html.replace(
- /(?: \s*)((?:\[(hint|warning|info|alert|notice|note)\]).*?(?:\[\/(hint|warning|info|alert|notice|note)\]))(?:\s*<\/p>)/gs,
- (_, callout) => callout
+ / |<\/p>)/g, '
, since the above operation may have
+ // inadvertantly broken some
')
);
};
diff --git a/src/utils/parseCalloutTags.ts b/src/utils/parseCalloutTags.ts
index f223217..f4949c9 100644
--- a/src/utils/parseCalloutTags.ts
+++ b/src/utils/parseCalloutTags.ts
@@ -5,19 +5,8 @@ import CalloutBlock from '../components/CalloutBlock';
* Turn [hint] and other callouts into a proper React component.
* @param data
*/
-const parseCalloutTags = (data: any): ReactElement|false => {
- let matches;
-
- matches = data.match(/\[(hint|warning|info|alert|notice|note)\](.*?)\[\/(?:hint|warning|info|alert|notice|note)\]/s);
-
- if (matches) {
- const type = matches[1];
- const content = matches[2];
-
- return createElement(CalloutBlock, { type, content });
- }
-
- return false;
+const parseCalloutTags = (type: string, content: any): ReactElement|false => {
+ return createElement(CalloutBlock, { type, content });
};
export default parseCalloutTags;
\ No newline at end of file
diff --git a/src/utils/parseHTML.ts b/src/utils/parseHTML.ts
index 5d91084..2ffddba 100644
--- a/src/utils/parseHTML.ts
+++ b/src/utils/parseHTML.ts
@@ -1,4 +1,4 @@
-import parse, { DomElement } from 'html-react-parser';
+import parse, { DomElement, domToReact } from 'html-react-parser';
import cleanChildrenTags from './cleanChildrenTags';
import cleanWhitespace from './cleanWhitespace';
import cleanApiTags from './cleanApiTags';
@@ -12,7 +12,7 @@ import cleanHeaders from './cleanHeaders';
import parseCalloutTags from './parseCalloutTags';
/**
- * Replace all the [CHILDREN] with proper React components.
+ * Replace all the [CHILDREN] and callout tags with proper React components.
* @param html
* @return ReactElement | ReactElement[] | string
*/
@@ -38,13 +38,15 @@ const parseHTML = (html: string): ReactElement | ReactElement[] | string => {
if (name.match(/^h[0-9]$/)) {
return rewriteHeader(domNode);
}
+ if (name === 'callout') {
+ return parseCalloutTags(domNode.attribs.type, domToReact(domNode.children));
+ }
}
if (domNode.data && domNode.parent?.name !== 'code') {
const { data } = domNode;
if (data.match(/\[CHILDREN.*?\]/)) {
return parseChildrenOf(data);
}
- return parseCalloutTags(data);
}
return false;