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:
const MD_STRING = `
test

**bold**

---

*test italic*

~~strikethrough~~

> blockquote

[Link](https://google.com)

\`Code\`

\`\`\`
Code block
\`\`\`

<!-- Comment -->

![Image](https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Eopsaltria_australis_-_Mogo_Campground.jpg/640px-Eopsaltria_australis_-_Mogo_Campground.jpg)


| H1 | Header2 |
|--------|--------|
| 1 | Item 1 |
| 2 | Another item 2 |
| 3 | Third item |

- list
- test
- here

1. Ordered
2. List
3. Here

- [ ] Checklist
- [x] Here
- [ ] Test
`;
const MD_STRING = `
test

**bold**

---

*test italic*

~~strikethrough~~

> blockquote

[Link](https://google.com)

\`Code\`

\`\`\`
Code block
\`\`\`

<!-- Comment -->

![Image](https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Eopsaltria_australis_-_Mogo_Campground.jpg/640px-Eopsaltria_australis_-_Mogo_Campground.jpg)


| H1 | Header2 |
|--------|--------|
| 1 | Item 1 |
| 2 | Another item 2 |
| 3 | Third item |

- list
- test
- here

1. Ordered
2. List
3. Here

- [ ] Checklist
- [x] Here
- [ ] Test
`;
vs how it looks in the page:
No description
K
kapa.ai153d ago
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: ----------------------
K
kapa.ai153d ago
<@680514070167683118> kapa.ai is still learning and improving, please let us know how it did by reacting below
W
wise-white153d 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
More Posts
How to define custom path and api endpoint pairs?In my scenario, I have a resource that looks like this: ``` { name: "letters", list: "/letters"Custom inputs (Markdown)Hi there! I was trying to implement a Markdown input in the Material UI configuration, but couldn't Tagfield color changeCan I change the color forTagfield component for MUI. Right now, I use the Tagfield component in thiGraphql table columnsHow do I display all these fields in a table using the MuiInferencer? It doesn't seem to render the Singular FormatI tried to change the List page for dailyTracker to singular format using textTransformers. It is cuTagfield component color changeCan I change the color forTagfield component for MUI. Right now, I use the Tagfield component in thiDatefield componentIn Datefield API, how to set the output format to be like January 8, 2022 6:49 AM. For now, my outpushow data from another table on show/id pageHi, I'm using supabase as DB Now I have a table named component_arrivals. on this table, I have a fiuseSelect filter not workingHello, I'm trying to filter the return of useSelect by using its filters prop. However, the output iuseNavigation```http://localhost:5173/inquiry/create/inquiry-type-create``` ```const { replace} = useNavigation()community healthFor anyone else struggling with getting an input component to save a number using Antd, you have to Select defaultValue does not work on create pageHow do you set a defaultvalue for select component on create page?Can I do nested lists in Refine.For example, I have a list of users and each user has a list of chats. There should be a user pages nextjs v14does refine supports nextjs v 14?