tonyair/doc.silverstripe.org
1
0
Fork 0
mirror of https://github.com/silverstripe/doc.silverstripe.org synced 2024-10-22 15:05:50 +00:00
Code Issues Projects Releases Wiki Activity

FIX Render callout blocks correctly (#277)

Browse Source
This commit is contained in:
Guy Sartorelli 2023-10-19 10:09:13 +13:00 committed by GitHub
parent 23b063cd6b
commit 52467ffc4e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/utils/cleanCalloutTags.ts
View File

@ -5,9 +5,16 @@
* @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(
/(?:<p>\s*)((?:\[(hint|warning|info|alert|notice|note)\]).*?(?:\[\/(hint|warning|info|alert|notice|note)\]))(?:\s*<\/p>)/gs,
(_, callout) => callout
/<callout type="[a-z]*">.*?<\/callout>/gs,
(callout) => callout.replace(/(<p>|<\/p>)/g, '<br>')
);
};

15
src/utils/parseCalloutTags.ts
View File

@ -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;

8
src/utils/parseHTML.ts
View File

@ -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;