FIX Allow callout and children in code blocks (#275)

src/components/CalloutBlock.tsx

@@ -0,0 +1,29 @@
+import React, { StatelessComponent } from 'react';
+import { CalloutBlockProps } from '../types';
+
+
+const getCalloutClass = (type: string): string => {
+    switch (type) {
+        case 'hint':
+            return 'success';
+        case 'notice':
+            return 'warning';
+        case 'alert':
+            return 'danger';
+        case 'note':
+            return 'info'
+        default:
+            return type;
+    }
+};
+
+const CalloutBlock: StatelessComponent<CalloutBlockProps> = ({ type, content }) => {
+    return (
+        <div className={`callout-block callout-block-${getCalloutClass(type)}`}>
+            <div className="content">{content}</div>
+        </div>
+    );
+
+};
+
+export default CalloutBlock;

src/types/index.ts

@@ -52,6 +52,11 @@ export interface HierarchyQuery {
     }
 };
 
+export interface CalloutBlockProps {
+    type: string;
+    content: any;
+}
+
 export interface ChildrenOfProps {
     folderName?: string;
     exclude?: string;

src/utils/cleanCalloutTags.ts

@@ -1,27 +1,13 @@
-const getCalloutClass = (type: string): string => {
-    switch (type) {
-        case 'hint':
-            return 'success';
-        case 'notice':
-            return 'warning';
-        case 'alert':
-            return 'danger';
-        case 'note':
-            return 'info'
-        default:
-            return type;
-    }
-};
+/**
+ * Removes the paragraph tags from around callout blocks so they end up being valid HTML
+ *
+ * @param html
+ * @returns
+ */
 const cleanCalloutTags = (html: string): string => {
     return html.replace(
-        /(?:<p>\s*)(\[(hint|warning|info|alert|notice|note)\])(.*?)(\[\/(hint|warning|info|alert|notice|note)\])(?:\s*<\/p>)/gs,
-        (_, tag, type, content) => `
-            <div class="callout-block callout-block-${getCalloutClass(type)}">
-                <div class="content">
-                    ${content}
-                </div>
-            </div>
-        `
+        /(?:<p>\s*)((?:\[(hint|warning|info|alert|notice|note)\]).*?(?:\[\/(hint|warning|info|alert|notice|note)\]))(?:\s*<\/p>)/gs,
+        (_, callout) => callout
     );
 };
 

src/utils/parseCalloutTags.ts

@@ -0,0 +1,23 @@
+import { ReactElement, createElement } from 'react';
+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;
+};
+
+export default parseCalloutTags;

src/utils/parseHTML.ts

@@ -9,6 +9,7 @@ import { ReactElement } from 'react';
 import rewriteTable from './rewriteTable';
 import rewriteHeader from './rewriteHeader';
 import cleanHeaders from './cleanHeaders';
+import parseCalloutTags from './parseCalloutTags';
 
 /**
  * Replace all the [CHILDREN] with proper React components.
@@ -38,9 +39,12 @@ const parseHTML = (html: string): ReactElement | ReactElement[] | string => {
                     return rewriteHeader(domNode);
                 }
             }
-            if (domNode.data) {
+            if (domNode.data && domNode.parent?.name !== 'code') {
                 const { data } = domNode;
-                return parseChildrenOf(data);
+                if (data.match(/\[CHILDREN.*?\]/)) {
+                    return parseChildrenOf(data);
+                }
+                return parseCalloutTags(data);
             }
 
             return false;