? React Markdown Editor
Fix new customized paste options #315
Provide file metadata for image/file upload. #316
paste prop with a saveImage function and an optional command to execute on paste.Example:
paste={{
command: "save-image", // optional
saveImage: save
}}
saveImage should be an async generator function that yields the URL for the uploaded image and returns true, indicating the upload was successful.
const save: SaveImageHandler = async function*(data: ArrayBuffer) {
// Promise that waits for "time" milliseconds
const wait = function(time: number) {
return new Promise((a, r) => {
setTimeout(() => a(), time);
});
};
// Upload "data" to your server
// Use XMLHttpRequest.send to send a FormData object containing
// "data"
// Check this question: https://stackoverflow.com/questions/18055422/how-to-receive-php-image-data-over-copy-n-paste-javascript-with-xmlhttprequest
await wait(2000);
// yields the URL that should be inserted in the markdown
yield "https://picsum.photos/300";
await wait(2000);
// returns true meaning that the save was successful
return true;
};
Before, if you wanted to control which commands would display in the toolbar, you would have to import each command, compose them in the desired way and pass them into React-mde.
Now, the commands and the way they are displayed have been separated.
The optional commands prop expects a CommandMap, which is an object that has string keys and, for each key, a Command object. If no commands are passed, the default ones are used. Before, you had to pass all commands in, including the default ones. Now, you only need to pass a map of custom Commands. The default commands are always available.
The most interesting new prop is toolbarCommands, that receives a string[][] representing which commands should be displayed on the toolbar.
Example:
toolbarCommands={[["code", "bold"], ["italic"]]}
This change does not impact you if you did not customize which commands were displayed.
Before, the commands prop was a Command[][]. Now it is a Record<string, Command>. This is because the way commands are displayed on the toolbar have been disassociated with the list of commands itself.
As stated on the "New features", to specify the commands on the toolbar, use the the toolbarCommands prop:
toolbarCommands={[["code", "bold"], ["italic"]]}
execute API changedThis change does not affect you if you don't implement custom commands.
Before, the execute signature was:
execute(state0: TextState, api: TextApi) { }
Now it is
execute({ initialState, textApi, context, l18n }: ExecuteOptions) {}
Now execute takes an ExecuteOptions object. This is, of course, because new APIs had to be introduced. context, now, varies with the command. For the paste commands, context contains event and saveImage, the function that really saves the image.
The commands are now identified by their keys on the CommandMap
className prop is gone. You must now pass classes using the classes object. This prop has been obsolete for a while.
Example of how to do it now: classes={{
reactMde: "react-mde",
suggestionsDropdown: "sug-dropdown",
}}
textAreaProps prop is gone. You must now use the childProps. This prop has been obsolete for a while.
Example of how to do it now: childProps={{
textArea: {
a: 1
}
}}
keyCommand field is gone. This was useless and was left there from the Draft.js times.execute functions. This is to facilitate adding the upload image functionality, since I am planning that to be a long running command, under the hoods.handleKeyCommand handler. This function will be called for every keydown inside the textarea. If this function returns true, the command will be executed.Cmd+B for bold, Cmd+I for italic and Cmd+k for link as shortcuts.getState() added to the TextApi typings