Permalink
Browse files

created highlight plugin

  • Loading branch information...
juliankrispel committed Jun 18, 2017
1 parent 934e413 commit e25f78be560ff2719bda4123f24dfd886582eaa6
Showing with 27 additions and 2 deletions.
  1. +3 −2 src/App.js
  2. +24 −0 src/highlightPlugin/index.js
View
@@ -2,10 +2,11 @@ import React, { Component } from 'react';
import { EditorState } from 'draft-js';
import Editor from 'draft-js-plugins-editor';
import createEmojiPlugin from 'draft-js-emoji-plugin';
import createHighlightPlugin from './highlightPlugin';
import 'draft-js-emoji-plugin/lib/plugin.css'
const highlightPlugin = createHighlightPlugin();
const emojiPlugin = createEmojiPlugin();
const { EmojiSuggestions } = emojiPlugin;
class App extends Component {
@@ -28,7 +29,7 @@ class App extends Component {
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
plugins={[emojiPlugin]}
plugins={[highlightPlugin, emojiPlugin]}
/>
<EmojiSuggestions />
</div>
@@ -0,0 +1,24 @@
import { RichUtils } from 'draft-js';
export default () => {
return {
customStyleMap: {
'HIGHLIGHT': {
background: 'blue',
padding: '0 .3em',
color: '#fff',
}
},
keyBindingFn: (e) => {
if (e.metaKey && e.key === 'h') {
return 'highlight';
}
},
handleKeyCommand: (command, editorState, { setEditorState }) => {
if (command === 'highlight') {
setEditorState(RichUtils.toggleInlineStyle(editorState, 'HIGHLIGHT'));
return true;
}
},
};
};

0 comments on commit e25f78b

Please sign in to comment.