remark
[react-markdown] Correct way to type custom component renderers #744
-
|
We are trying to migrate our portfolio from JavaScript and TypeScript, we are using this package to render But we are getting a big problem with typing: <html>TS2322: Type 'FC<IImageBlock>' is not assignable to type 'keyof IntrinsicElements | NormalComponent | undefined'.<br/>Type 'FunctionComponent<IImageBlock>' is not assignable to type 'NormalComponent'.<br/>Types of parameters 'props' and 'props' are incompatible.<br/>Type 'ReactBaseProps & ReactMarkdownProps' is not assignable to type 'PropsWithChildren<IImageBlock>'.<br/>Type 'ReactBaseProps & ReactMarkdownProps' is missing the following properties from type 'IImageBlock': src, alt, title<html>TS2322: Type 'FC<{ url: string; }>' is not assignable to type 'keyof IntrinsicElements | NormalComponent | undefined'.<br/>Type 'FunctionComponent<{ url: string; }>' is not assignable to type 'NormalComponent'.<br/>Types of parameters 'props' and 'props' are incompatible.<br/>Type 'ReactBaseProps & ReactMarkdownProps' is not assignable to type 'PropsWithChildren<{ url: string; }>'.<br/>Property 'url' is missing in type 'ReactBaseProps & ReactMarkdownProps' but required in type '{ url: string; }'.Those for: interface IImageBlock {
src: string;
alt: string;
title: string | null;
}
const ImageBlock: React.FC<IImageBlock> = ({ alt, src, title }) => {
const classes = useStyles();
const globalClasses = useGlobalStyles();
return (
<Box className={clsx(classes.image, globalClasses.centeredImage)}>
<Image
alt={alt}
src={src}
quality={80}
layout="fill"
objectFit="contain"
title={title}
/>
</Box>
);
};
const VideoBlock: React.FC<{ url: string }> = ({ url }) => {
const classes = useStyles();
return (
<div className={classes.playerWrapper}>
<ReactPlayer
className={classes.reactPlayer}
url={url}
controls
playing
width="100%"
height="100%"
/>
</div>
);
};
const _mapProps = (props: ReactMarkdownOptions): ReactMarkdownOptions => ({
...props,
remarkPlugins: [
// RemarkMathPlugin,
// RemarkHighlightPlugin,
unwrapImages,
VideoPlugin,
],
rehypePlugins: [
rehypeRaw,
[rehypeSanitize, merge(gh, { attributes: { code: ["className"] } })],
],
components: {
...props.components,
// math: ({ value }) => <BlockMath>{value}</BlockMath>,
// inlineMath: ({ value }) => <InlineMath>{value}</InlineMath>,
code: CodeBlock,
img: ImageBlock,
video: VideoBlock,
},
});
const Content: React.FC<ReactMarkdownOptions> = (props) => (
<ReactMarkdown {..._mapProps(props)} />
);
export default Content;No problem with the What's the correct way to handle this? Thanks. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 6 replies
-
Beta Was this translation helpful? Give feedback.
-
|
Got it, yes |
Beta Was this translation helpful? Give feedback.
-
|
It is also required for |
Beta Was this translation helpful? Give feedback.
-
|
Sure, a new pull request could work 👍 |
Beta Was this translation helpful? Give feedback.
-
|
@ChristianMurphy remarkjs/react-markdown#603 |
Beta Was this translation helpful? Give feedback.
-
|
Right, TypeScript offers two modes. |
Beta Was this translation helpful? Give feedback.
#714 (comment)