ENH Render the new callout block style (#284)

src/components/CalloutBlock.tsx

@@ -4,16 +4,17 @@ import { CalloutBlockProps } from '../types';
 
 const getCalloutClass = (type: string): string => {
     switch (type) {
-        case 'hint':
+        case 'TIP':
             return 'success';
-        case 'notice':
+        case 'IMPORTANT':
+        case 'WARNING':
             return 'warning';
-        case 'alert':
+        case 'CAUTION':
             return 'danger';
-        case 'note':
+        case 'NOTE':
             return 'info'
         default:
-            return type;
+            return 'info';
     }
 };
 
@@ -23,7 +24,6 @@ const CalloutBlock: StatelessComponent<CalloutBlockProps> = ({ type, content })
             <div className="content">{content}</div>
         </div>
     );
-
 };
 
 export default CalloutBlock;

src/theme/assets/scss/theme/_docs.scss

@@ -283,6 +283,10 @@
 	.callout-title {
 		font-size: 1rem;
 	}
+
+	.content p:last-of-type {
+		margin-bottom: 0;
+	}
 	
 	&.callout-block-info {
 		border-color: $theme-info-color;

src/utils/cleanCalloutTags.ts

@@ -1,21 +0,0 @@
-/**
- * Removes the paragraph tags from around callout blocks so they end up being valid HTML
- *
- * @param html
- * @returns
- */
-const cleanCalloutTags = (html: string): string => {
-    // Replace callout <p> tags with a <callout> tag so we can swap it out with the right react component
-    html = html.replace(
-        /<p>\s*\[(hint|warning|info|alert|notice|note)\](.*?)\[\/\1\]\s*<\/p>/gs,
-        (_, type, content) => `<callout type="${type}">${content}</callout>`
-    );
-    // Replace any <p> and </p> tags inside callout tags with <br>, since the above operation may have
-    // inadvertantly broken some <p> tags.
-    return html.replace(
-        /<callout type="[a-z]*">.*?<\/callout>/gs,
-        (callout) => callout.replace(/(<p>|<\/p>)/g, '<br>')
-    );
-};
-
-export default cleanCalloutTags;

src/utils/parseHTML.ts

@@ -4,7 +4,6 @@ import cleanWhitespace from './cleanWhitespace';
 import cleanApiTags from './cleanApiTags';
 import rewriteLink from './rewriteLink';
 import parseChildrenOf from './parseChildrenOf';
-import cleanCalloutTags from './cleanCalloutTags';
 import { ReactElement } from 'react';
 import rewriteTable from './rewriteTable';
 import rewriteHeader from './rewriteHeader';
@@ -19,7 +18,6 @@ import parseCalloutTags from './parseCalloutTags';
 const parseHTML = (html: string): ReactElement | ReactElement[] | string => {
     let cleanHTML = html;
     cleanHTML = cleanChildrenTags(cleanHTML);
-    cleanHTML = cleanCalloutTags(cleanHTML);
     cleanHTML = cleanWhitespace(cleanHTML);
     cleanHTML = cleanApiTags(cleanHTML);
     cleanHTML = cleanHeaders(cleanHTML);
@@ -38,8 +36,27 @@ const parseHTML = (html: string): ReactElement | ReactElement[] | string => {
                 if (name.match(/^h[0-9]$/)) {
                     return rewriteHeader(domNode);
                 }
-                if (name === 'callout') {
+                if (name === 'blockquote') {
-                    return parseCalloutTags(domNode.attribs.type, domToReact(domNode.children));
+                    for (const child of children) {
+                        // For some reason blockquotes start with an empty new line with this parser.
+                        if (child.type === 'text' && child.data === "\n") {
+                            continue;
+                        }
+                        // If the first relevant child isn't a paragraph or is empty, it's not a callout block.
+                        if (child.type !== 'tag' || child.name !== 'p' || !child.children?.length || child.children[0].type !== 'text') {
+                            break;
+                        }
+                        // Check if the first text node marks this as a callout block
+                        const firstTextNode = child.children[0];
+                        const calloutTypeRegex = /^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\n/;
+                        const matches = firstTextNode.data.match(calloutTypeRegex);
+                        if (!matches) {
+                            break;
+                        }
+                        // Remove the type marker and render the component
+                        firstTextNode.data = firstTextNode.data.replace(calloutTypeRegex, '');
+                        return parseCalloutTags(matches[1], domToReact(children));
+                    }
                 }
             }
             if (domNode.data && domNode.parent?.name !== 'code') {