MarkdownField support
Is the MarkdownField component customizable at all? So far I tested all the components with MDEditor, and it seems only
Bold
, Italic
, Strikethrough
, Link
, Checklist
and Image
components work, everything else is just shown as simple text.
my MD string:
vs how it looks in the page:![No description](https://cdn.answeroverflow.com/1176905320837173319/image.png)
3 Replies
Hi @biohazard1521. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The
MarkdownField
component in refine is designed to display markdown content. It supports GitHub Flavored Markdown (https://github.github.com/gfm/), which includes syntax for things like bold, italic, strikethrough, links, and images. However, the component's customization options are not explicitly mentioned in the provided extracts.
The extracts do mention that you can "swizzle" the component with the refine CLI (https://refine.dev/docs/packages/documentation/cli/) to customize it. Swizzling is a process that allows you to override the default behavior of a component. However, the specifics of how to swizzle the MarkdownField
component and what customizations are possible are not detailed in the extracts.
If you're finding that certain markdown features are not rendering as expected, it could be due to limitations in the markdown parser used by the MarkdownField
component. For example, some markdown parsers do not support features like tables, checklists, or blockquotes.
If you need more control over the markdown rendering, you might consider using a custom input component with a more feature-rich markdown editor. The Ant Design's <Form>
documentation (https://ant.design/components/form/) provides some guidance on how to use custom form items, which could potentially be used to integrate a different markdown editor.
For more detailed information, you may want to refer to the official documentation or reach out to the refine community.
Sources:
- Antd MarkdownField (https://refine.dev/docs/api-reference/antd/components/fields/markdown/)
- Mui MarkdownField (https://refine.dev/docs/api-reference/mui/components/fields/markdown/)
- Mantine MarkdownField (https://refine.dev/docs/api-reference/mantine/components/fields/markdown/)
- Chakra-ui MarkdownField (https://refine.dev/docs/api-reference/chakra-ui/components/fields/markdown/)
- Custom Inputs (https://refine.dev/docs/api-reference/antd/components/inputs/custom-inputs/)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@680514070167683118> kapa.ai is still learning and improving, please let us know how it did by reacting below
quickest-silver•10mo ago
tried swizzling the field component, changed around the plugins, nothing changed. Seems like even tables do work to some extent, but feels like it's missing styles or something
in the end I settled to use
@uiw/react-markdown-preview
to render Markdown