genetic-orange•15mo ago

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

kapa.ai•15mo 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: ---------------------- 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:

import MDEditor from "@uiw/react-md-editor";  
...  
  
<Form.Item  
 label="Content"  
 name="content"  
 rules={[  
 {  
 required: true,  
 },  
 ]}  
>  
 <MDEditor data-color-mode="light" />  
</Form.Item>;

import MDEditor from "@uiw/react-md-editor";  
...  
  
<Form.Item  
 label="Content"  
 name="content"  
 rules={[  
 {  
 required: true,  
 },  
 ]}  
>  
 <MDEditor data-color-mode="light" />  
</Form.Item>;

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: ----------------------

kapa.ai•15mo ago

<@680514070167683118> kapa.ai is still learning and improving, please let us know how it did by reacting below

genetic-orangeOP•15mo ago

@kapa.ai what is the equivalent form control for Material UI?

kapa.ai•15mo ago

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:

import React from "react";  
import MDEditor from "@uiw/react-md-editor";  
import TextField from "@mui/material/TextField";  

export default function App() {  
 const [value, setValue] = React.useState("");  
 return (  
 <div className="container">  
 <TextField>
   <MDEditor value={value} onChange={setValue} />  
 </TextField>
 </div>  
 );  
}

import React from "react";  
import MDEditor from "@uiw/react-md-editor";  
import TextField from "@mui/material/TextField";  

export default function App() {  
 const [value, setValue] = React.useState("");  
 return (  
 <div className="container">  
 <TextField>
   <MDEditor value={value} onChange={setValue} />  
 </TextField>
 </div>  
 );  
}

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: ----------------------

kapa.ai•15mo ago

<@680514070167683118> kapa.ai is still learning and improving, please let us know how it did by reacting below

genetic-orangeOP•15mo 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:

<Controller
  control={control}
  name="value"
  rules={{ required: "This field is required" }}
  defaultValue={null as any}
  render={({ field }) => {
    return (
      <MDEditor
        value={field.value}
        onChange={field.onChange}
      />
    );
  }}
/>

<Controller
  control={control}
  name="value"
  rules={{ required: "This field is required" }}
  defaultValue={null as any}
  render={({ field }) => {
    return (
      <MDEditor
        value={field.value}
        onChange={field.onChange}
      />
    );
  }}
/>

Custom inputs (Markdown)

Did you find this page helpful?