The text content that I want to display has typical markdown features:
- Bold and italic text
- Headers
Codewithin normal lines
And code snippets in boxes.
How can I add this formatting capabilities to the Text Output?
Please be aware of the security implications and the incomplete features.
Using marked ( GitHub - markedjs/marked: A markdown parser and compiler. Built for speed. )
$ npm i marked; npm i -D @types/marked
import { parse } from "marked";
function MyTextOutput({ children, ...props }: Parameters<typeof TextOutput>[0]) {
const parsed = parseReactNode(children);
return <TextOutput {...props}>{parsed}</TextOutput>;
// ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined
function parseReactNode(node: React.ReactNode): React.ReactNode {
if (typeof node === "string") {
return <span dangerouslySetInnerHTML={{ __html: parse(node) }} />;
}
if (Array.isArray(node)) {
return node.map(parseReactNode);
}
// TODO: extend support according to requirements
return node;
}
}
Use MyTextOutput as a drop-in replacement where you would normally use TextOutput.
One addition regarding the security implications: We use the dompurify library to sanitize the HTML output that is generated by marked.
