Redux Forms Markdown Editor

Instalation

Note: Designed for use with Redux Form

yarn add redux-forms-markdown-editor

or

npm install redux-forms-markdown-editor

Features

Zero dependencies on other css frameworks or icon libraries.
Supports React 16.
Bold, italics, header, ordered/unordered lists, code block, link, image, and YouTube buttons.
Quote block HTML button.
Clicking an editor button with no text selected will position the cursor where you can start typing with formatted Markdown.
Preview mode rendered with react-markdown.
Configurable icon displays.

Usage

import { reduxForm, Field } from 'redux-form';
import ReactMDE from 'redux-forms-markdown-editor';

const SampleForm = ({ handleSubmit, pristine, submitting }) => (
  <form onSubmit={handleSubmit}>
    <div>
      <label>First Name</label>
      <Field
        name="firstName"
        component="input"
        type="text"
        placeholder="First Name"
      />
    </div>

    <div>
      <label>Bio</label>
      <Field
        name="bio"
        component={ReactMDE}
        placeholder="More info about yourself"
      />
    </div>
    <button type="submit" disabled={pristine || submitting}>
      Submit
    </button>
  </form>
);

export default reduxForm({
  form: 'mde-sample'
})(SampleForm);

Available Props

value the initial value to pass to the Editor. Required
onChange fired when input has changed Required
textAreaStyle Text area styling Optional
buttonStyle Styles for the buttons Optional
buttonContainerStyle Styled for the buttons container Optional
iconSize Define the size for all the Icons Optional
buttonConfig An object to control which buttons to display Optional

Button config keys

buttonConfig: {
  bold: true,
  italic: true,
  heading: true,
  orderedList: true,
  unorderedList: true,
  blockQuote: true,
  html: true,
  url: true,
  image: true,
  youtube: true,
  canPreview: true,
}