R
Refine

ask-any-question

Custom inputs (Markdown)

Rratty-blush11/22/2023
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?
Kkapa.ai11/22/2023
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: ----------------------
Kkapa.ai11/22/2023
<@680514070167683118> kapa.ai is still learning and improving, please let us know how it did by reacting below
Rratty-blush11/22/2023
@kapa.ai what is the equivalent form control for Material UI?
Kkapa.ai11/22/2023
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: ----------------------
Kkapa.ai11/22/2023
<@680514070167683118> kapa.ai is still learning and improving, please let us know how it did by reacting below
Rratty-blush11/22/2023
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}
/>
);
}}
/>

Looking for more? Join the community!

R
Refine

ask-any-question

Join Server
Recommended Posts
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?useSelect```const { selectProps } = useSelect({ resource: `master-data/${props.urlApi}`, optionLabel:Refine OAuth doesn't work to send user to "admin" page after loginI tried OAuth (with Discord) and when the user signs in, they aren't sent to the "admin" page.Access Control Casbin for nulled menu item (Parents)I have this: import { newModel, StringAdapter } from "casbin"; export const model = newModel(` [rUse FontAwesome simutaneously with AntDesignI want to use FontAwesome icon for sider menu, I'm using import type { RefineThemedLayoutV2SiderPropadd custom Sider menuItem in a separate fileI've a customSider where I have successfully insert my own menu item in. useEffect(() => { consMaximum call stack size exceeded Circular Reference Error, nested custom menu@kapa.ai Uncaught RangeError: Maximum call stack size exceeded. const { SubMenu } = Menu; const { us