created highlight plugin

juliankrispel · Jun 18, 2017 · e25f78be560ff2719bda4123f24dfd886582eaa6 · e25f78b
1 parent 934e413
commit e25f78be560ff2719bda4123f24dfd886582eaa6
Unified Split

Showing with 27 additions and 2 deletions.

+3 −2 src/App.js

+24 −0 src/highlightPlugin/index.js
diff --git a/src/App.js b/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>
diff --git a/src/highlightPlugin/index.js b/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;
+      }
+    },
+  };
+};