# Change log / Migrating

## From 4.\* to 5.\*

Major differences:

- `React-mde` is now built on top of `Draft.js`. This facilitates features that would otherwise be quite
difficult, the best examples being history management, mentions and pasting files.
- Showdown is no longer a dependency and server side markdown generation is now possible.
- The Command API is now much more capable and stable. For example, it now allows commands to be 
executed asynchronously.
- The default styling is now self-contained and easier to integrate into existing applications.

## From 3.\* to 4.\*

Major differences:

- Passing `commands` to `React-Mde` is now optional. If none is passed, it will automatically
use the default ones.
- Now the `React-mde` sub-components cannot be imported directly from the main package.
This change will not affect you if you don't using sub-components. This will not affect the majority
of the users.

    // 3.\* and below:
    import { ReactMarkdownTextArea } from "react-mde"
    // 4.\* and after:
    import { ReactMdeComponents } from "react-mde"
    const { ReactMarkdownTextArea } = ReactMdeComponents

Architectural differences:

- Now the layout is decoupled from `React-Mde` in such a way that now, introducing new layouts, like
horizontal and tabs, will not require breaking changes. The only layout available now is `Vertical`.

## From 2.* to 3.\*

Font Awesome 5 is now used, and it's not a NPM peer dependency anymore. 
It's up to you how to install it, it [can be installed in different ways](https://fontawesome.com/how-to-use/svg-with-js), but the easiest is just adding this to the `<head/>`:

    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

## From 1.\* to 2.\*

2.* is a major refactoring of the code to improve composability

Major differences:

- Now the main `react-mde` component is composed of 3 sub-components, the `ReactMdeToolbar`, the `ReactMdeTextArea` and the `ReactMdePreview`.
You can import `react-mde` directly or import each of the sub-components and have more flexibility building your own layout.
- Each sub-component now has its own CSS/SCSS file and we're now including a `react-mde-all.css`, or the SCSS alternative, for simplicity.
- We realized that on version 1.*, it was difficult to select which components you wanted to use. So now...


    import * as ReactMde from 'react-mde';
    ReactMde.ReactMdeComponents // contains all components and you can select your own components
    ReactMde.getDefaultComponents() // will return an array with all components
    
    
How to upgrade an existing 1.* JavaScript project: https://github.com/andrerpena/react-mde-js-demo/commit/e62af170fa258f7f17f29d41f395f24e9eaf3b72

How to upgrade an existing 1.* TypeScript project: https://github.com/andrerpena/react-mde-ts-demo/commit/d6718305c0132649cabca432e1e9415ea06cd643

## From 0.* to 1.*

Major differences:

- Instead of using the `getDefaultCommands` function, now the default commands are exported directly.
- The `textAreaId` and `textareaName` props were replaced by `textAreaProps` that allows you to pass whatever you want to the `textarea` component.
- The paths of the CSS and SCSS have changed.