MDEditorMDEditorMDEditorMDEditorMDEditorMDEditorMDEditorMDEditor4. **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: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:@refinedev/mui@refinedev/react-hook-form``
In this example:
- We use to manage the local state of the field.
- The event of updates both the local state and the form state using .
- We dynamically import to ensure compatibility with SSR in Next.js.
This setup ensures that the 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>
);
}