Custom inputs (Markdown)
Hi there! I was trying to implement a Markdown input in the Material UI configuration, but couldn't find any documentation on custom fields for that. I could only find the Ant Design doc on custom inputs, but the structure of forms is different. Is there a way to do it for MUI at this point?
6 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:
----------------------
Yes, you can implement a Markdown input in the Material UI configuration using the
MDEditor
component. The MDEditor
component is a markdown editor that you can add to your forms for markdown data.
Here is an example of how to use it in a form:
In this example, the MDEditor
component is used as a custom input field for a form item. The data-color-mode
prop is set to "light", but you can adjust this according to your needs.
Please note that this example is from the Ant Design documentation, but the MDEditor
component can be used in the same way in Material UI. You just need to replace the Form.Item
with the equivalent Material UI form control.
For more information, you can refer to the refine documentation on custom inputs (https://refine.dev/docs/api-reference/antd/components/inputs/custom-inputs/) and the refine blog post on using the MDEditor component (https://refine.dev/blog/react-markdown/).
----------------------
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
fair-rose•10mo ago
@kapa.ai what is the equivalent form control for Material UI?
Let me check the knowledge base for you. One moment! :books:
----------------------
In Material UI, the equivalent to Ant Design's
Form.Item
is the TextField
component. The TextField
component is a convenient wrapper for the most common text input.
Here is an example of how you might use it:
In this example, the MDEditor
component is used as a child of the TextField
component. The value
and onChange
props of the MDEditor
are managed by the useState
hook.
For more information, you can refer to the refine blog post on using the MDEditor component (https://refine.dev/blog/react-markdown/).
----------------------
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
fair-rose•10mo ago
For anyone checking this in the future, I solved this by wrapping my field with
Controller
from react-hook-form
and MDEditor
from @uiw/react-md-editor
: