how can i use mdeditor

K

kapa.ai•7/30/24, 11:43 AM

Hi @Deepanshu Bajaj. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•7/30/24, 11:43 AM

----------------------
To use the component in your project, you need to follow these steps:

**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:```bashnpm i @uiw/react-md-editor```
**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:

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

```tsx
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" });

K

kapa.ai•7/30/24, 11:43 AM

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>
);
};

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"
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•7/30/24, 11:43 AM

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

P

popular-magentaOP•7/30/24, 11:43 AM

@kapa.ai in mui

K

kapa.ai•7/30/24, 11:43 AM

Let me check the knowledge base for you. One moment!

K

kapa.ai•7/30/24, 11:44 AM

----------------------
To use the component in a Material-UI (MUI) project, you can follow these steps:

**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:```bashnpm i @uiw/react-md-editor```
**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:

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

```tsx
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>();

K

kapa.ai•7/30/24, 11:44 AM

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>
);
};

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

----------------------

K

kapa.ai•7/30/24, 11:44 AM

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

P

popular-magentaOP•7/30/24, 11:45 AM

"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

K

kapa.ai•7/30/24, 11:45 AM

Let me check the knowledge base for you. One moment!

K

kapa.ai•7/30/24, 11:45 AM

----------------------
To use for the description field in your MUI form, you can follow the steps below. This example demonstrates how to integrate with a form using and .

**Install the `@uiw/react-md-editor` package**:First, ensure you have the `@uiw/react-md-editor` package installed:```bashnpm i @uiw/react-md-editor```
**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.
**Integrate `MDEditor` in your form**:Below is the complete code to use `MDEditor` for the description field in your form:

```tsx
"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("");

K

kapa.ai•7/30/24, 11:45 AM

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 "");
}}
data-color-mode="light"
/>
{errors.description && (
<span style={{ color: "red" }}>{errors.description.message}</span>
)}
</Box>
</Create>
);
}
useStatedescriptiononChangeMDEditorsetValueMDEditorMDEditor` 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

----------------------

K

kapa.ai•7/30/24, 11:45 AM

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