packages/antd/src/components/fields/markdown/index.tsx
import React from "react";
import ReactMarkdown from "react-markdown";
import gfm from "remark-gfm";
import { RefineFieldMarkdownProps } from "../types";
/**
* This field lets you display markdown content. It supports {@link https://github.github.com/gfm/ GitHub Flavored Markdown}.
*
* @see {@link https://refine.dev/docs/api-reference/antd/components/fields/markdown} for more details.
*/
export const MarkdownField: React.FC<RefineFieldMarkdownProps> = ({
value = "",
}) => {
// There's an issue related with the type inconsistency of the `remark-gfm` and `remark-rehype` packages, we need to cast the `gfm` as any. (https://github.com/orgs/rehypejs/discussions/63)
return (
<ReactMarkdown
remarkPlugins={[gfm] as unknown as ReactMarkdown.PluggableList}
>
{value}
</ReactMarkdown>
);
};