Closed psn417 closed 1 year ago
I render the image command to my custom element. It seems to be a good solution.
export default function Markdown() {
const [value, setValue] = React.useState(
"Hello Markdown! `Tab` key uses default behavior"
);
return (
<div className="container">
<MDEditor
value={value}
onChange={setValue}
preview="edit"
components={{
toolbar: (command, disabled, executeCommand) => {
if (command.keyCommand === "image") {
return (
<UploadModal
onClick={() => {
console.log(command);
}}
onSubmit={(url) => {
command.execute = (state, api) => {
api.replaceSelection(`![description](${url})`);
};
executeCommand(command, command.groupName);
}}
/>
);
}
},
}}
/>
</div>
);
}
Hello everyone I am a beginner to React. I am trying to modifiy the
add image
command. I want aModal
to appear on screen when I click the command, so that I can use the modal to upload the image to a server, then insert the url to the editor, as is shown below:But I don't know what's the proper way to achieve this goal. Currently I use a parent component to manage an
Editor
and aModal
:Here is the modal component:
These code can achieve exactly what I want. But I think they are very bad. It seems that the parent component needs to get the
api
of the editor, and I don't know how to do it.Does anyone know how to do it properly?