react-pell

React component wrapping a HTML and Markdown editor based on the wysiwyg pell editor

Contents

• Getting started
• HTML Editor
• Markdown Editor

Getting started

Install react-pell as dependency :

  yarn add react-pell

Basic example :

import React, { Component } from 'react';
import Editor from 'react-pell'

class App extends Component {

  handleChange(html) {
    console.log(html)
  }

  render() {
    return (
      <Editor onChange={this.handleChange.bind(this)} />
    );
  }
}

export default App;

HTML editor

A basic wrapping of the pell editor.

Import the Editor :

import Editor from 'react-pell'

Example :

  <Editor
    defaultContent="<b>hello world</b>"
    actions={['bold', 'italic']}
    actionBarClass="my-custom-class"
    onChange={this.handleChange}
  />

Prop types :

property	type	required	description
onChange	func	true	function handling changes from the editor, the output html is the first parameter
defaultContent	string	false	default content of the editor (HTML serialized in a string)
actions	array	false	table of available actions or custom actions in the editor (watch pell documentation for more details) Note: pell instance is given at first parameter of result callback of custom actions. (default: ['bold', 'italic', 'underline', 'strikethrough', 'heading1', 'heading2', 'olist', 'ulist', 'quote', 'code', 'line']).
styleWithCSS	bool	false	outputs styles with css instead of HTML elements (default: false)
containerClass	string	false	class name of the container (default: pell-container)
actionBarClass	string	false	class name of the action bar (default: pell-actionbar)
buttonClass	string	false	class name of buttons (default: pell-button)
contentClass	string	false	class name of the content (default: pell-content)

Markdown editor

This editor plugin extends the behaviour of pell to edit markdown. We are using following libraries to manage markdown :

• html to markdown : to-markdown
• markdown to html : showdown

Import the Editor :

import Editor from 'react-pell/plugins/markdown'

Example :

  <Editor
    defaultContent="**hello world**"
    actions={['bold', 'italic']}
    actionBarClass="my-custom-class"
    onChange={this.handleChange}
    gmf={false}
  />

Prop types :

Same props as the Basic HTML pell editor with following props added :

property	type	required	description
converters	array	false	converters used to handle custom convertions from HTML to markdown. see to-markdown documentation for more details
gmf	bool	true	beta support for GitHub flavored markdown (GFM)

LICENSE

MIT