how can i use mdeditor

how can i use mdeditor in mui

8 Replies

Hi @Deepanshu Bajaj. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To use the MDEditor component in your project, you need to follow these steps: 1. Install the @uiw/react-md-editor package: First, you need to install the @uiw/react-md-editor package as a dependency in your project. You can do this by running the following command:

   npm i @uiw/react-md-editor

   npm i @uiw/react-md-editor

2. Import and use the MDEditor component: You can then import the MDEditor component and use it in your forms. Below is an example of how to use the MDEditor component in a form:

   import React, { useState } from "react";
   import MDEditor from "@uiw/react-md-editor";

   export default function App() {
     const [value, setValue] = useState("");
     return (
       <div className="container">
         <MDEditor value={value} onChange={setValue} data-color-mode="light" />
       </div>
     );
   }

   import React, { useState } from "react";
   import MDEditor from "@uiw/react-md-editor";

   export default function App() {
     const [value, setValue] = useState("");
     return (
       <div className="container">
         <MDEditor value={value} onChange={setValue} data-color-mode="light" />
       </div>
     );
   }

3. Using MDEditor with Ant Design in Refine: If you are using Refine with Ant Design, you can integrate MDEditor into your create and edit forms as shown in the following example:

   import React from "react";
   import { Create, useForm, useSelect } from "@refinedev/antd";
   import { Form, Input, Select, Upload } from "antd";
   import MDEditor from "@uiw/react-md-editor";
   import { IPost, ICategory } from "interfaces";
   import { normalizeFile } from "utility";

   export const PostCreate: React.FC = () => {
     const { formProps, saveButtonProps } = useForm<IPost>();
     const { selectProps: categorySelectProps } = useSelect<ICategory>({ resource: "categories" });
return (
       <Create saveButtonProps={saveButtonProps}>
         <Form {...formProps} layout="vertical">
           <Form.Item
             label="Title"
             name="title"
             rules={[{ required: true }]}
           >
             <Input />
           </Form.Item>
           <Form.Item
             label="Category"
             name="categoryId"
             rules={[{ required: true }]}
           >
             <Select {...categorySelectProps} />
           </Form.Item>
           <Form.Item
             label="Content"
             name="content"
             rules={[{ required: true }]}
           >
             <MDEditor data-color-mode="light" />
           </Form.Item>
           <Form.Item label="Images">
             <Form.Item
               name="images"
               valuePropName="fileList"
               normalize={normalizeFile}
               noStyle
             >
               <Upload.Dragger name="file" listType="picture" />
             </Form.Item>
           </Form.Item>
         </Form>
       </Create>
     );
   };

   import React from "react";
   import { Create, useForm, useSelect } from "@refinedev/antd";
   import { Form, Input, Select, Upload } from "antd";
   import MDEditor from "@uiw/react-md-editor";
   import { IPost, ICategory } from "interfaces";
   import { normalizeFile } from "utility";

   export const PostCreate: React.FC = () => {
     const { formProps, saveButtonProps } = useForm<IPost>();
     const { selectProps: categorySelectProps } = useSelect<ICategory>({ resource: "categories" });
return (
       <Create saveButtonProps={saveButtonProps}>
         <Form {...formProps} layout="vertical">
           <Form.Item
             label="Title"
             name="title"
             rules={[{ required: true }]}
           >
             <Input />
           </Form.Item>
           <Form.Item
             label="Category"
             name="categoryId"
             rules={[{ required: true }]}
           >
             <Select {...categorySelectProps} />
           </Form.Item>
           <Form.Item
             label="Content"
             name="content"
             rules={[{ required: true }]}
           >
             <MDEditor data-color-mode="light" />
           </Form.Item>
           <Form.Item label="Images">
             <Form.Item
               name="images"
               valuePropName="fileList"
               normalize={normalizeFile}
               noStyle
             >
               <Upload.Dragger name="file" listType="picture" />
             </Form.Item>
           </Form.Item>
         </Form>
       </Create>
     );
   };

kapa.ai•6mo ago

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

rare-sapphireOP•6mo ago

@kapa.ai in mui

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To use the MDEditor component in a Material-UI (MUI) project, you can follow these steps: 1. Install the @uiw/react-md-editor package: First, you need to install the @uiw/react-md-editor package as a dependency in your project. You can do this by running the following command:

   npm i @uiw/react-md-editor

   npm i @uiw/react-md-editor

2. Import and use the MDEditor component: You can then import the MDEditor component and use it in your forms. Below is an example of how to use the MDEditor component in a form:

   import React, { useState } from "react";
   import MDEditor from "@uiw/react-md-editor";

   export default function App() {
     const [value, setValue] = useState("");
     return (
       <div className="container">
         <MDEditor value={value} onChange={setValue} data-color-mode="light" />
       </div>
     );
   }

   import React, { useState } from "react";
   import MDEditor from "@uiw/react-md-editor";

   export default function App() {
     const [value, setValue] = useState("");
     return (
       <div className="container">
         <MDEditor value={value} onChange={setValue} data-color-mode="light" />
       </div>
     );
   }

3. Using MDEditor with MUI in Refine: If you are using Refine with MUI, you can integrate MDEditor into your create and edit forms as shown in the following example:

   import React from "react";
   import { Edit, useForm } from "@refinedev/antd";
   import { Form, Input } from "antd";
   import MDEditor from "@uiw/react-md-editor";
   import { IPost } from "interfaces";

   export const PostEdit: React.FC = (props) => {
     const { formProps, saveButtonProps } = useForm<IPost>();
return (
       <Edit {...props} saveButtonProps={saveButtonProps}>
         <Form {...formProps} layout="vertical">
           <Form.Item
             label="Title"
             name="title"
             rules={[
               {
                 required: true,
               },
             ]}
           >
             <Input />
           </Form.Item>
           <Form.Item
             label="Content"
             name="content"
             rules={[
               {
                 required: true,
               },
             ]}
           >
             <MDEditor data-color-mode="light" />
           </Form.Item>
         </Form>
       </Edit>
     );
   };

   import React from "react";
   import { Edit, useForm } from "@refinedev/antd";
   import { Form, Input } from "antd";
   import MDEditor from "@uiw/react-md-editor";
   import { IPost } from "interfaces";

   export const PostEdit: React.FC = (props) => {
     const { formProps, saveButtonProps } = useForm<IPost>();
return (
       <Edit {...props} saveButtonProps={saveButtonProps}>
         <Form {...formProps} layout="vertical">
           <Form.Item
             label="Title"
             name="title"
             rules={[
               {
                 required: true,
               },
             ]}
           >
             <Input />
           </Form.Item>
           <Form.Item
             label="Content"
             name="content"
             rules={[
               {
                 required: true,
               },
             ]}
           >
             <MDEditor data-color-mode="light" />
           </Form.Item>
         </Form>
       </Edit>
     );
   };

4. Customizing the Toolbar: You can customize the toolbar of the MDEditor by using the commands and extraCommands props. Here is an example of how to add custom commands: ```tsx import React, { useContext } from "react"; import MDEditor, { commands, EditorContext } from "@uiw/react-md-editor"; const Button = () => { const { preview, dispatch } = useContext(EditorContext); const click = () => { dispatch({ preview: preview === "edit" ? "preview" : "edit" }); }; if (preview === "edit") { return ( <svg width="12" height="12" viewBox="0 0 520 520" onClick={click} /> ); } return ( <svg width="12" height="12" viewBox="0 0 520 520" onClick={click} /> ); }; const codePreview = { name: "preview", keyCommand: "preview", value: "preview", icon: <Button />, }; return ( ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

rare-sapphireOP•6mo ago

"use client"; import { Box, TextField } from "@mui/material"; import { Create } from "@refinedev/mui"; import { useForm } from "@refinedev/react-hook-form"; import dynamic from "next/dynamic"; const MDEditor = dynamic(() => import("@uiw/react-md-editor"), { ssr: false }); export default function NewsCreate() { const { saveButtonProps, refineCore: { formLoading }, register, formState: { errors }, } = useForm({}); return ( <Create isLoading={formLoading} saveButtonProps={saveButtonProps}> <Box component="form" sx={{ display: "flex", flexDirection: "column" }} autoComplete="off" > <TextField {...register("title", { required: "This field is required", })} error={!!(errors as any)?.title} helperText={(errors as any)?.title?.message} margin="normal" fullWidth InputLabelProps={{ shrink: true }} type="text" label={"Title"} name="title" /> <TextField {...register("description", { required: "This field is required", })} error={!!(errors as any)?.title} helperText={(errors as any)?.title?.message} margin="normal" fullWidth InputLabelProps={{ shrink: true }} type="textarea" label={"Description"} name="description" /> <MDEditor // onChange={setDescription} data-color-mode="light" /> </Box> </Create> ); } @kapa.ai here i wanna use mdeditor for description

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To use MDEditor for the description field in your MUI form, you can follow the steps below. This example demonstrates how to integrate MDEditor with a form using @refinedev/mui and @refinedev/react-hook-form. 1. Install the @uiw/react-md-editor package: First, ensure you have the @uiw/react-md-editor package installed:

   npm i @uiw/react-md-editor

   npm i @uiw/react-md-editor

2. Import and use the MDEditor component: You can dynamically import the MDEditor component to ensure it works correctly with server-side rendering (SSR) in Next.js. 3. Integrate MDEditor in your form: Below is the complete code to use MDEditor for the description field in your form:

   "use client";

   import { Box, TextField } from "@mui/material";
   import { Create } from "@refinedev/mui";
   import { useForm } from "@refinedev/react-hook-form";
   import dynamic from "next/dynamic";
   import { useState } from "react";

   const MDEditor = dynamic(() => import("@uiw/react-md-editor"), { ssr: false });

   export default function NewsCreate() {
     const {
       saveButtonProps,
       refineCore: { formLoading },
       register,
       setValue,
       formState: { errors },
     } = useForm({});

     const [description, setDescription] = useState("");
return (
       <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
         <Box
           component="form"
           sx={{ display: "flex", flexDirection: "column" }}
           autoComplete="off"
         >
           <TextField
             {...register("title", {
               required: "This field is required",
             })}
             error={!!(errors as any)?.title}
             helperText={(errors as any)?.title?.message}
             margin="normal"
             fullWidth
             InputLabelProps={{ shrink: true }}
             type="text"
             label={"Title"}
             name="title"
           />
           <MDEditor
             value={description}
             onChange={(value) => {
               setDescription(value || "");
               setValue("description", value || "");
             }}
             data-color-mode="light"
           />
           {errors.description && (
             <span style={{ color: "red" }}>{errors.description.message}</span>
           )}
         </Box>
       </Create>
     );
   }

   "use client";

   import { Box, TextField } from "@mui/material";
   import { Create } from "@refinedev/mui";
   import { useForm } from "@refinedev/react-hook-form";
   import dynamic from "next/dynamic";
   import { useState } from "react";

   const MDEditor = dynamic(() => import("@uiw/react-md-editor"), { ssr: false });

   export default function NewsCreate() {
     const {
       saveButtonProps,
       refineCore: { formLoading },
       register,
       setValue,
       formState: { errors },
     } = useForm({});

     const [description, setDescription] = useState("");
return (
       <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
         <Box
           component="form"
           sx={{ display: "flex", flexDirection: "column" }}
           autoComplete="off"
         >
           <TextField
             {...register("title", {
               required: "This field is required",
             })}
             error={!!(errors as any)?.title}
             helperText={(errors as any)?.title?.message}
             margin="normal"
             fullWidth
             InputLabelProps={{ shrink: true }}
             type="text"
             label={"Title"}
             name="title"
           />
           <MDEditor
             value={description}
             onChange={(value) => {
               setDescription(value || "");
               setValue("description", value || "");
             }}
             data-color-mode="light"
           />
           {errors.description && (
             <span style={{ color: "red" }}>{errors.description.message}</span>
           )}
         </Box>
       </Create>
     );
   }

In this example: - We use useState to manage the local state of the description field. - The onChange event of MDEditor updates both the local state and the form state using setValue. - We dynamically import MDEditor to ensure compatibility with SSR in Next.js. This setup ensures that the MDEditor component is properly integrated into your MUI form, allowing you to edit and submit markdown content. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

how can i use mdeditor

Did you find this page helpful?