FIX Allow callout and children in code blocks (#275)
This commit is contained in:
parent
420e4b0d4f
commit
23b063cd6b
|
@ -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;
|
|
@ -52,6 +52,11 @@ export interface HierarchyQuery {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export interface CalloutBlockProps {
|
||||||
|
type: string;
|
||||||
|
content: any;
|
||||||
|
}
|
||||||
|
|
||||||
export interface ChildrenOfProps {
|
export interface ChildrenOfProps {
|
||||||
folderName?: string;
|
folderName?: string;
|
||||||
exclude?: string;
|
exclude?: string;
|
||||||
|
|
|
@ -1,27 +1,13 @@
|
||||||
const getCalloutClass = (type: string): string => {
|
/**
|
||||||
switch (type) {
|
* Removes the paragraph tags from around callout blocks so they end up being valid HTML
|
||||||
case 'hint':
|
*
|
||||||
return 'success';
|
* @param html
|
||||||
case 'notice':
|
* @returns
|
||||||
return 'warning';
|
*/
|
||||||
case 'alert':
|
|
||||||
return 'danger';
|
|
||||||
case 'note':
|
|
||||||
return 'info'
|
|
||||||
default:
|
|
||||||
return type;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const cleanCalloutTags = (html: string): string => {
|
const cleanCalloutTags = (html: string): string => {
|
||||||
return html.replace(
|
return html.replace(
|
||||||
/(?:<p>\s*)(\[(hint|warning|info|alert|notice|note)\])(.*?)(\[\/(hint|warning|info|alert|notice|note)\])(?:\s*<\/p>)/gs,
|
/(?:<p>\s*)((?:\[(hint|warning|info|alert|notice|note)\]).*?(?:\[\/(hint|warning|info|alert|notice|note)\]))(?:\s*<\/p>)/gs,
|
||||||
(_, tag, type, content) => `
|
(_, callout) => callout
|
||||||
<div class="callout-block callout-block-${getCalloutClass(type)}">
|
|
||||||
<div class="content">
|
|
||||||
${content}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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;
|
|
@ -9,6 +9,7 @@ import { ReactElement } from 'react';
|
||||||
import rewriteTable from './rewriteTable';
|
import rewriteTable from './rewriteTable';
|
||||||
import rewriteHeader from './rewriteHeader';
|
import rewriteHeader from './rewriteHeader';
|
||||||
import cleanHeaders from './cleanHeaders';
|
import cleanHeaders from './cleanHeaders';
|
||||||
|
import parseCalloutTags from './parseCalloutTags';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Replace all the [CHILDREN] with proper React components.
|
* Replace all the [CHILDREN] with proper React components.
|
||||||
|
@ -38,9 +39,12 @@ const parseHTML = (html: string): ReactElement | ReactElement[] | string => {
|
||||||
return rewriteHeader(domNode);
|
return rewriteHeader(domNode);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (domNode.data) {
|
if (domNode.data && domNode.parent?.name !== 'code') {
|
||||||
const { data } = domNode;
|
const { data } = domNode;
|
||||||
return parseChildrenOf(data);
|
if (data.match(/\[CHILDREN.*?\]/)) {
|
||||||
|
return parseChildrenOf(data);
|
||||||
|
}
|
||||||
|
return parseCalloutTags(data);
|
||||||
}
|
}
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
|
|
Loading…
Reference in New Issue