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

Discover the release history by heading on over to the releases page.

Unless stated otherwise all works are:

and licensed under:

Credits

jaszhix

react-markdown