md-draft-js

Markdown draft.js

Markdown editor framework that works with an immutable state and utility functions to modify it.

Live demo here!

Install

Use it as an npm package:

npm install md-draft-js --save

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import { Editor, EditorState } from 'md-draft-js';
 
class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = { editorState: EditorState.createWithContent('Your initial content') };
    this.onChange = (editorState) => this.setState({ editorState });
  }
 
  render() {
    return (
      <Editor editorState={this.state.editorState} onChange={this.onChange} />
    );
  }
}
 
ReactDOM.render(
  <MyEditor />,
  document.getElementById('container')
);

dejavú?

Handling keys

// ...
import { Editor, EditorState, RichUtils } from 'md-draft-js';
 
class MyEditor extends React.Component {
  /// ...
 
  handleKeyCommand(command) {
    const newState = RichUtils.applyCommand(this.state.editorState, command);
 
    if (newState) {
      this.onChange(newState);
    }
  }
 
  render() {
    return (
      <Editor
        editorState={this.state.editorState}
        onChange={this.onChange}
        onKeyCommand={this.handleKeyCommand}
      />
    );
  }
}

Applying a style

// ...
import { Editor, EditorState, RichUtils } from 'md-draft-js';
 
class MyEditor extends React.Component {
  /// ...
 
  handleBoldClick() {
    const newState = RichUtils.applyCommand(this.state.editorState, 'bold');
 
    this.onChange(newState);
  }
 
  render() {
    return (
      <button onClick={this.handleBoldClick}>Bold</button>
      <Editor editorState={this.state.editorState} onChange={this.onChange} />
    );
  }
}

Fully working example

See this file to check a fully working example.

License

MIT