add active state to rich text raw toggle

src/components/UI/theme.css

@@ -21,6 +21,7 @@
   --textFieldBorderColor: #e7e7e7;
   --highlightFGColor: #fff;
   --highlightBGColor: #3ab7a5;
+  --highlightFGAltColor: #eee;
   --controlLabelColor: var(--textColor);
   --controlBGColor: #fff;
   --backgroundTertiaryColor: #f2f5f4;

src/components/Widgets/MarkdownControl.js

@@ -3,18 +3,15 @@ import registry from '../../lib/registry';
 import RawEditor from './MarkdownControlElements/RawEditor';
 import VisualEditor from './MarkdownControlElements/VisualEditor';
 import { processEditorPlugins } from './richText';
-import { connect } from 'react-redux';
-import { switchVisualMode } from '../../actions/editor';
 
 const MODE_STORAGE_KEY = 'cms.md-mode';
 
-class MarkdownControl extends React.Component {
+export default class MarkdownControl extends React.Component {
   static propTypes = {
-    editor: PropTypes.object.isRequired,
     onChange: PropTypes.func.isRequired,
     onAddAsset: PropTypes.func.isRequired,
+    onRemoveAsset: PropTypes.func.isRequired,
     getAsset: PropTypes.func.isRequired,
-    switchVisualMode: PropTypes.func.isRequired,
     value: PropTypes.node,
   };
 
@@ -57,6 +54,7 @@ class MarkdownControl extends React.Component {
           onAddAsset={onAddAsset}
           onRemoveAsset={onRemoveAsset}
           onMode={this.handleMode}
+          rawMode
           getAsset={getAsset}
           value={value}
         />
@@ -64,8 +62,3 @@ class MarkdownControl extends React.Component {
     );
   }
 }
-
-export default connect(
-  state => ({ editor: state.editor }),
-  { switchVisualMode }
-)(MarkdownControl);

src/components/Widgets/MarkdownControlElements/RawEditor/index.js

@@ -305,7 +305,7 @@ export default class RawEditor extends React.Component {
   };
 
   render() {
-    const { onAddAsset, onRemoveAsset, getAsset } = this.props;
+    const { onAddAsset, onRemoveAsset, getAsset, rawMode } = this.props;
     const { plugins, selectionPosition, dragging } = this.state;
     const classNames = [styles.root];
     if (dragging) {
@@ -328,6 +328,7 @@ export default class RawEditor extends React.Component {
           onItalic={this.handleItalic}
           onLink={this.handleLink}
           onToggleMode={this.handleToggle}
+          rawMode={rawMode}
         />
         <ToolbarPlugins
           selectionPosition={selectionPosition}
@@ -357,5 +358,6 @@ RawEditor.propTypes = {
   getAsset: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,
   onMode: PropTypes.func.isRequired,
+  rawMode: PropTypes.bool,
   value: PropTypes.node,
 };

src/components/Widgets/MarkdownControlElements/Toolbar.css

@@ -1,3 +1,5 @@
+@import "../../UI/theme";
+
 .Toolbar {
   z-index: 1000;
   list-style: none;
@@ -13,8 +15,9 @@
     background-color: transparent;
     cursor: pointer;
 
-    &:hover {
+    @nest .ButtonActive& {
-      background-color: #eee;
+      background-color: var(--highlightFGAltColor);
     }
   }
 }
+

src/components/Widgets/MarkdownControlElements/Toolbar.js

@@ -1,9 +1,11 @@
 import React, { PropTypes } from 'react';
+import { List } from 'immutable';
 import { Icon } from '../../UI';
 import styles from './Toolbar.css';
 
-function button(label, icon, action) {
+function button(label, icon, action, active) {
-  return (<li className={styles.Button}>
+  const classNames = List([styles.Button]);
+  return (<li className={(active ? classNames.push(styles.ButtonActive) : classNames).join(' ')}>
     <button className={styles[label]} onClick={action} title={label}>
       <Icon type={icon} />
     </button>
@@ -11,7 +13,7 @@ function button(label, icon, action) {
 }
 
 function Toolbar(props) {
-  const { onH1, onH2, onBold, onItalic, onLink, onToggleMode } = props;
+  const { onH1, onH2, onBold, onItalic, onLink, onToggleMode, rawMode } = props;
   return (
     <ul className={styles.Toolbar}>
       {button('Header 1', 'h1', onH1)}
@@ -19,7 +21,7 @@ function Toolbar(props) {
       {button('Bold', 'bold', onBold)}
       {button('Italic', 'italic', onItalic)}
       {button('Link', 'link', onLink)}
-      {button('View Code', 'code', onToggleMode)}
+      {button('View Code', 'code', onToggleMode, rawMode)}
     </ul>
   );
 }
@@ -31,6 +33,7 @@ Toolbar.propTypes = {
   onItalic: PropTypes.func.isRequired,
   onLink: PropTypes.func.isRequired,
   onToggleMode: PropTypes.func.isRequired,
+  rawMode: PropTypes.bool,
 };
 
 export default Toolbar;