3.4.2 • Published 5 years ago
md-draft-js v3.4.2
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')
);
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
3.4.2
5 years ago
3.4.1
5 years ago
3.4.0
5 years ago
3.3.0
5 years ago
3.2.3
5 years ago
3.2.2
5 years ago
3.2.1
5 years ago
3.2.0
5 years ago
3.1.3
6 years ago
3.1.2
6 years ago
3.1.1
6 years ago
3.1.0
6 years ago
3.0.1
6 years ago
3.0.0
6 years ago
2.3.1
6 years ago
2.3.0
6 years ago
2.2.1
7 years ago
2.2.0
7 years ago
2.1.2
7 years ago
2.1.1
7 years ago
2.1.0
7 years ago
2.0.5
7 years ago
2.0.4
7 years ago
2.0.3
7 years ago
2.0.2
7 years ago
2.0.1
7 years ago
2.0.0
7 years ago
1.1.5
7 years ago
1.1.4
7 years ago
1.1.3
7 years ago
1.1.2
7 years ago
1.1.1
7 years ago
1.1.0
7 years ago
1.0.2
7 years ago
1.0.1
7 years ago
1.0.0
7 years ago
0.1.4
7 years ago
0.1.3
7 years ago
0.1.2
7 years ago
0.1.1
7 years ago
0.1.0
7 years ago