Skip to content

Commit

Permalink
Update rehype react types
Browse files Browse the repository at this point in the history
  • Loading branch information
robertying committed Feb 26, 2024
1 parent f3c335a commit 689bc20
Showing 1 changed file with 13 additions and 12 deletions.
25 changes: 13 additions & 12 deletions lib/markdown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,23 @@ import imgSize from "rehype-img-size";
import highlight from "rehype-highlight";
import { common } from "lowlight";
import groovy from "highlight.js/lib/languages/groovy";
import react from "rehype-react";
import react, { Components } from "rehype-react";
import Image from "next/image";
import Link from "next/link";
import isAbsoluteUrl from "is-absolute-url";

// @ts-expect-error: the react types are missing.
const production = { Fragment: prod.Fragment, jsx: prod.jsx, jsxs: prod.jsxs };

const components = {
img: (props) => <Image {...(props as any)} alt={props.alt!} />,
a: (props) =>
props.href && isAbsoluteUrl(props.href) ? (
<Link {...(props as any)} target="_blank" rel="noopener noreferrer" />
) : (
<Link {...(props as any)} />
),
} as Components;

export const getReactElementFromMarkdown = async (md: string) => {
const file = await unified()
.use(markdown)
Expand All @@ -26,16 +35,8 @@ export const getReactElementFromMarkdown = async (md: string) => {
.use(highlight, { detect: true, languages: { ...common, groovy } })
.use(react, {
...production,
components: {
img: (props: any) => <Image {...props} alt={props.alt!} />,
a: (props: any) =>
isAbsoluteUrl(props.href) ? (
<Link {...props} target="_blank" rel="noopener noreferrer" />
) : (
<Link {...props} />
),
},
})
components,
} as any)
.process(md);

return file.result;
Expand Down

0 comments on commit 689bc20

Please sign in to comment.