Version: 4.xx.xx
Swizzle Ready
Markdown
const { default: routerProvider } = LegacyRefineReactRouterV6;
const { default: simpleRest } = RefineSimpleRest;
setRefineProps({
legacyRouterProvider: routerProvider,
dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
notificationProvider: RefineMantine.useNotificationProvider,
Layout: RefineMantine.Layout,
Sider: () => null,
});
const Wrapper = ({ children }) => {
return (
<MantineCore.MantineProvider
theme={RefineMantine.LightTheme}
withNormalizeCSS
withGlobalStyles
>
<MantineCore.Global styles={{ body: { WebkitFontSmoothing: "auto" } }} />
<MantineNotifications.NotificationsProvider position="top-right">
{children}
</MantineNotifications.NotificationsProvider>
</MantineCore.MantineProvider>
);
};
This field lets you display markdown content. It supports GitHub Flavored Markdown.
Good to know:
You can swizzle this component to customize it with the Refine CLI
Usage
Let's see how we can use <MarkdownField> in a show page.
setInitialRoutes(["/samples", "/samples/show/123"]);
import { Refine } from "@refinedev/core";
import { ShowButton } from "@refinedev/mantine";
// visible-block-start
import { useShow } from "@refinedev/core";
import { Show, MarkdownField } from "@refinedev/mantine";
import { Title, Text } from "@mantine/core";
const SampleShow: React.FC = () => {
const { queryResult } = useShow<IPost>();
const { data, isLoading } = queryResult;
const record = data?.data;
return (
<Show isLoading={isLoading}>
<Title order={5}>Id</Title>
<Text mt="sm">{record?.id}</Text>
<Title mt="sm" order={5}>
Content
</Title>
<MarkdownField value={record?.content} />
</Show>
);
};
interface IPost {
id: number;
content: string;
}
// visible-block-end
const App = () => {
return (
<Refine
resources={[
{
name: "samples",
show: SampleShow,
list: () => (
<div>
<p>This page is empty.</p>
<ShowButton recordItemId="123">Show Item 123</ShowButton>
</div>
),
},
]}
/>
);
};
render(
<Wrapper>
<App />
</Wrapper>,
);