Support proper theme prop for DividerButton

Author: simsim0709

draft-js-divider-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-js-divider-plugin",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Divider Plugin for DraftJS",
   "author": {
     "name": "Ilkwon Sim",
@@ -35,7 +35,8 @@
   "license": "MIT",
   "dependencies": {
     "decorate-component-with-props": "^1.0.2",
-    "prop-types": "^15.5.8"
+    "prop-types": "^15.5.8",
+    "union-class-names": "^1.0.0"
   },
   "peerDependencies": {
     "draft-js": "^0.10.1",

draft-js-divider-plugin/src/buttonStyles.css

@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
+import unionClassNames from 'union-class-names';
+
 import { insertCustomBlock } from '../utils';
 
 class DividerButton extends Component {
@@ -17,9 +19,20 @@ class DividerButton extends Component {
     event.preventDefault();
   };
 
+  blockTypeIsActive = () => {
+    const editorState = this.props.getEditorState();
+    const type = editorState
+      .getCurrentContent()
+      .getBlockForKey(editorState.getSelection().getStartKey())
+      .getType();
+    return type === this.props.blockType;
+  };
+
   render() {
     const { theme } = this.props;
-    const className = theme.button;
+    const className = this.blockTypeIsActive()
+      ? unionClassNames(theme.button, theme.active)
+      : theme.button;
 
     return (
       <div className={theme.buttonWrapper} onMouseDown={this.preventBubblingUp}>

draft-js-divider-plugin/src/components/DividerButton.js

@@ -3,8 +3,6 @@ import React from 'react';
 import DefaultDivider from './components/DefaultDivider';
 import DividerButton from './components/DividerButton';
 
-import buttonStyles from './buttonStyles.css';
-
 import addDivider from './modifiers/addDivider';
 
 const createDividerPlugin = (
@@ -21,8 +19,8 @@ const createDividerPlugin = (
   DividerButton: props => (
     <DividerButton
       {...props}
+      blockType={blockType}
       addDivider={addDivider(blockType)}
-      theme={buttonStyles}
     />
   ),
   addDivider: addDivider(blockType),

draft-js-divider-plugin/src/index.js

@@ -103,6 +103,10 @@ ua-parser-js@^0.7.9:
   version "0.7.14"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.14.tgz#110d53fa4c3f326c121292bbeac904d2e03387ca"
 
+union-class-names@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/union-class-names/-/union-class-names-1.0.0.tgz#9259608adacc39094a2b0cfe16c78e6200617847"
+
 watch@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/watch/-/watch-1.0.2.tgz#340a717bde765726fa0aa07d721e0147a551df0c"