created highlight plugin

Author: Julian Krispel-Samsel

src/App.js

@@ -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>

src/highlightPlugin/index.js

@@ -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;
+      }
+    },
+  };
+};