Tuomo Kankaanpää
EditorState
ContentState
Undo/Redo stack
SelectionState before
SelectionState after
Editor contents
import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';
class MyEditor extends React.Component {
constructor(props) {
super(props);
this.state = {editorState: EditorState.createEmpty()};
this.onChange = (editorState) => this.setState({editorState});
}
render() {
return (
<Editor editorState={this.state.editorState} onChange={this.onChange} />
);
}
}
ReactDOM.render(
<MyEditor />,
document.getElementById('container')
);
{
"blocks": [
{
"key": "e0745",
"text": "Trick",
"type": "unstyled",
"depth": 0,
"inlineStyleRanges": [],
"entityRanges": [],
"data": {}
},
{
"key": "212ar",
"text": "or",
"type": "unstyled",
"depth": 0,
"inlineStyleRanges": [],
"entityRanges": [],
"data": {}
},
{
"key": "8m87r",
"text": "treat",
"type": "unstyled",
"depth": 0,
"inlineStyleRanges": [],
"entityRanges": [],
"data": {}
}
],
"entityMap": {}
}
import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState, RichUtils} from 'draft-js';
class MyEditor extends React.Component {
constructor(props) {
super(props);
this.state = {editorState: EditorState.createEmpty()};
this.onChange = (editorState) => this.setState({editorState});
}
handleKeyCommand(command) {
const { editorState } = this.state;
const newState = RichUtils.handleKeyCommand(editorState, command);
if (newState) {
this.onChange(newState);
return true;
}
return false;
}
render() {
return (
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
handleKeyCommand={this.handleKeyCommand.bind(this)}
/>
);
}
}
ReactDOM.render(
<MyEditor />,
document.getElementById('container')
);
{
"blocks": [
{
"key": "616lk",
"text": "Trick or treat",
"type": "unstyled",
"depth": 0,
"inlineStyleRanges": [
{
"offset": 6,
"length": 2,
"style": "BOLD"
},
{
"offset": 9,
"length": 5,
"style": "UNDERLINE"
}
],
"entityRanges": [],
"data": {}
}
],
"entityMap": {}
}
import React from 'react';
import ReactDOM from 'react-dom';
import {EditorState} from 'draft-js';
import Editor from "draft-js-plugins-editor";
import createToolbarPlugin from "draft-js-static-toolbar-plugin";
import editorStyles from "./editorStyles.css";
const staticToolbarPlugin = createToolbarPlugin();
const { Toolbar } = staticToolbarPlugin;
class MyEditor extends React.Component {
constructor(props) {
super(props);
this.state = {editorState: EditorState.createEmpty()};
this.onChange = (editorState) => this.setState({editorState});
}
render() {
return (
<div className={editorStyles.editor}>
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
plugins={[staticToolbarPlugin]}
/>
<Toolbar />
</div>
);
}
}
ReactDOM.render(
<MyEditor />,
document.getElementById('container')
);
{
"blocks": [
{
"key": "9nm1k",
"text": "Trick or treat",
"type": "unstyled",
"depth": 0,
"inlineStyleRanges": [
{
"offset": 0,
"length": 5,
"style": "ITALIC"
},
{
"offset": 9,
"length": 5,
"style": "UNDERLINE"
}
],
"entityRanges": [],
"data": {}
}
],
"entityMap": {}
}
import React from 'react';
import ReactDOM from 'react-dom';
import {EditorState} from 'draft-js';
import Editor from "draft-js-plugins-editor";
import createEmojiPlugin from "draft-js-emoji-plugin";
import editorStyles from "./editorStyles.css";
const emojiPlugin = createEmojiPlugin();
const { EmojiSuggestions, EmojiSelect } = emojiPlugin;
class MyEditor extends React.Component {
constructor(props) {
super(props);
this.state = {editorState: EditorState.createEmpty()};
this.onChange = (editorState) => this.setState({editorState});
}
render() {
return (
<div className={editorStyles.editor}>
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
plugins={[emojiPlugin]}
/>
<EmojiSuggestions />
<EmojiSelect />
</div>
);
}
}
ReactDOM.render(
<MyEditor />,
document.getElementById('container')
);
import React from 'react';
import ReactDOM from 'react-dom';
import {EditorState} from 'draft-js';
import Editor from "draft-js-plugins-editor";
import createMentionPlugin, {
defaultSuggestionsFilter
} from "draft-js-mention-plugin";
import mentions from "./mentions";
import editorStyles from "./editorStyles.css";
class MyEditor extends React.Component {
constructor(props) {
super(props);
this.state = {editorState: EditorState.createEmpty()};
this.onChange = (editorState) => this.setState({editorState});
this.mentionPlugin = createMentionPlugin();
this.onSearchChange = ({ value }) => {
this.setState({ suggestions: defaultSuggestionsFilter(value, mentions) });
};
}
render() {
const { MentionSuggestions } = this.mentionPlugin;
return (
<div className={editorStyles.editor}>
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
plugins={[this.mentionPlugin]}
/>
<MentionSuggestions
onSearchChange={this.onSearchChange}
suggestions={this.state.suggestions}
/>
</div>
);
}
}
twitter.com/tumee
github.com/tumetus