add a highlight toggle

src/web/pastebin.coffee

@@ -7,12 +7,17 @@ class Pastebin extends React.Component
     @state =
       text: ""
       pasting: false
+      highlight: true
 
   onEditTextUpdate: (ev) =>
     console.log ev.target.value
     @setState
       text: ev.target.value
 
+  toggleHighlight: (ev) =>
+    @setState (state, props) =>
+      { highlight: not state.highlight }
+
   paste: =>
     return if @state.text.trim() == ""
     # Set the state first to disable the button
@@ -52,10 +57,16 @@ class Pastebin extends React.Component
         className="content-pastebin-edit"
         onUpdate={@onEditTextUpdate}
         value={@state.text}
-        highlightCode
+        highlightCode={@state.highlight}
         plainText
       />
       <div className="content-buttons">
+        <button
+          className="button-blue"
+          onClick={@toggleHighlight}
+        >
+          Highlight: {if @state.highlight then 'ON' else 'OFF'}
+        </button>
         <button
           className="button-blue"
           disabled={@state.pasting}

src/web/styles/buttons.scss

@@ -1,12 +1,10 @@
-.content-buttons {
-    margin-top: $content-inset;
-}
-
 @mixin base-button {
     border: none;
     outline: none;
     color: white;
     padding: 10px 24px;
+    margin-left: $button-margin-left;
+    margin-right: $button-margin-right;
     text-align: center;
     text-decoration: none;
     display: inline-block;

src/web/styles/home.scss

@@ -17,6 +17,11 @@
     padding: $content-inset;
 }
 
+.content-buttons {
+    margin-top: $content-inset;
+    text-align: right;
+}
+
 /*
  * when screen is higher than content + padding
  */

src/web/styles/vars.scss

@@ -10,6 +10,8 @@ $editable-color-active: rgba(57, 73, 171, 0.4);
 $editable-radius: 2px;
 // Button dimensions
 $button-radius: 3px;
+$button-margin-right: 0px;
+$button-margin-left: 5px;
 // Dialogs
 $dialog-width: 500px;
 $dialog-height: 200px;

src/web/util/contentEditable.coffee

@@ -39,12 +39,12 @@ class ContentEditable extends React.Component
       nextProps.highlightCode != @props.highlightCode
 
   componentDidUpdate: ->
-    if @props.value != @getText()
-      @setText @props.value
-      # Note that we will only update when the value passed by parent
-      # is different than what we know, i.e. the parent requested
-      # a change in value
-      @codeHighlight()
+    #if @props.value != @getText()
+    @setText @props.value
+    # Note that we will only update when the value passed by parent
+    # is different than what we know, i.e. the parent requested
+    # a change in value
+    @codeHighlight()
 
   emitUpdate: =>
     if @props.onUpdate