react-mde

Fix new customized paste options #315

Provide file metadata for image/file upload. #316

https://github.com/andrerpena/react-mde/pull/310

• Remove grip bar and add support for uploading images by clicking the bar https://github.com/andrerpena/react-mde/pull/268
• Fix errors/warning from typescript, as triggeredBy parameter is missing in loadSuggestions function signature, but in fact is passed https://github.com/andrerpena/react-mde/pull/274

• Fix misplaced suggestions https://github.com/andrerpena/react-mde/pull/264
• Text area events don't override suggestions anymore https://github.com/andrerpena/react-mde/pull/263
• Min height can no longer be greater than Max height https://github.com/andrerpena/react-mde/pull/261
• Chinese l18n object https://github.com/andrerpena/react-mde/pull/257

• Fix code command erroneously linked to quote command https://github.com/andrerpena/react-mde/pull/248
• Opportunity to provide custom initial editor height (optional) https://github.com/andrerpena/react-mde/pull/246

New features:

You can now pass a 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;
};

You can now specify toolbar commands in an easier way

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"]]}

Breaking changes:

The way commands are selected changes

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"]]}

The Command execute API changed

This 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.

Commands no longer have a name

The commands are now identified by their keys on the CommandMap

PRs:

• https://github.com/andrerpena/react-mde/pull/235

New features:

• It is now possible to specify a custom textarea through the prop textAreaComponent

Thanks to @vitorqb

PRs:

• https://github.com/andrerpena/react-mde/pull/236
• https://github.com/andrerpena/react-mde/pull/237

Breaking changes:

• 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
            }
          }}

• For custom commands, the keyCommand field is gone. This was useless and was left there from the Draft.js times.

New features:

• Commands can now have async 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.
• Commands now can implement a handleKeyCommand handler. This function will be called for every keydown inside the textarea. If this function returns true, the command will be executed.
• It is now possible use Cmd+B for bold, Cmd+I for italic and Cmd+k for link as shortcuts.

Fixes

• getState() added to the TextApi typings

• Fixed bug that prevented the editor markdown to update while preview mode was on. Thanks to @rozman-michael https://github.com/andrerpena/react-mde/pull/225
• Allow the command API to get the current editor state. This is useful for async commands. Thanks to @n1ru4l https://github.com/andrerpena/react-mde/pull/227

Fixed a bug where the undo/redo would not work after you clicked Preview and then back to Write

Added support for auto-completion