How to embed markdown files with TS / PF4?

Development PatternFly-React
#1

Hello,

I’m building a small project with PatternFly4 react seed [1] and I’ve been trying to find the proper way to load/embed markdown (.md files) the proper way in typescript.

Since the project uses webpack I’ve added the following loaders to the webpack.dev.js file module rules.

{test: /.md$/,
use: [
{
loader: ‘html-loader’,
},
{
loader: ‘markdown-loader’,
},
],
}

// Also added the following to typings.d.ts
declare module ‘*.md’;

I’ve tried the following without any luck

BlogPost1.tsx

import * as React from ‘react’;
import { PageSection, Title, TextContent } from ‘@patternfly/react-core’;
import readme from “./README.md”

// builds properly but does not display markdown, just html/text content, as expected.
const BP1: React.FunctionComponent = () => (
PageSection>
TextContent>
{readme}
TextContent>
PageSection>
);

// no luck either
// function BP1() {
// return(
//
// );
// }

export { BP1 }

Any ideas on how to solve this?

[1] https://github.com/patternfly/patternfly-react-seed

Cheers,
Ricardo

#2

Hi Ricardo!

I think you’re on the right track, looks like you may just need to use React’s dangerouslySetInnerHTML api part. Below is a working branch to see it in action. Worth mentioning that markdown-loader only handles the importing of this file type and doesn’t style the markdown nicely like you’d expect to get (like how markdown is presented on github for example) so you’d have to handle this separately by either styling it yourself or using some third party lib. I took a quick pass at integrating github-markdown-css and it seems to work great.

I hope it helps, let me know if you have any questions!

#3

Thanks for sharing that, it works now!

#4

I ended up wrapping InnerHTML with dompurify.sanitize

import dompurify from ‘dompurify’;

function createMarkup() {
const sanitize = dompurify.sanitize
return {__html: sanitize(markdown)}
}

Will see how that goes,
Thanks again for the example!

#5

Ah very cool, I didn’t know about the dompurify pkg - awesome! Definitely looks like a better way of doing that :smiley:.

Glad you got it sorted though, good luck on your project!