add hterm cursor blink support (#1547)

* add hterm cursor blink support

* update website with cursorblink doc

app/config-default.js

@@ -12,6 +12,9 @@ module.exports = {
     // `BEAM` for |, `UNDERLINE` for _, `BLOCK` for █
     cursorShape: 'BLOCK',
 
+    // set to true for blinking cursor
+    cursorBlink: false,
+
     // color of the text
     foregroundColor: '#fff',
 

lib/components/term-group.js

@@ -54,6 +54,7 @@ class TermGroup_ extends Component {
       fontSize: this.props.fontSize,
       cursorColor: this.props.cursorColor,
       cursorShape: this.props.cursorShape,
+      cursorBlink: this.props.cursorBlink,
       fontFamily: this.props.fontFamily,
       fontSmoothing: this.props.fontSmoothing,
       foregroundColor: this.props.foregroundColor,

lib/components/term.js

@@ -39,6 +39,7 @@ export default class Term extends Component {
     prefs.set('font-size', props.fontSize);
     prefs.set('font-smoothing', props.fontSmoothing);
     prefs.set('cursor-color', this.validateColor(props.cursorColor, 'rgba(255,255,255,0.5)'));
+    prefs.set('cursor-blink', props.cursorBlink);
     prefs.set('enable-clipboard-notice', false);
     prefs.set('foreground-color', props.foregroundColor);
 
@@ -77,6 +78,8 @@ export default class Term extends Component {
       this.term.modifierKeys = props.modifierKeys;
       // this.term.CursorNode_ is available at this point.
       this.term.setCursorShape(props.cursorShape);
+      // required to be set for CursorBlink to work
+      this.term.setCursorVisible(true);
 
       // emit onTitle event when hterm instance
       // wants to set the title of its tab
@@ -333,6 +336,10 @@ export default class Term extends Component {
       this.term.setCursorShape(nextProps.cursorShape);
     }
 
+    if (this.props.cursorBlink !== nextProps.cursorBlink) {
+      prefs.set('cursor-blink', nextProps.cursorBlink);
+    }
+
     if (this.props.colors !== nextProps.colors) {
       prefs.set('color-palette-overrides', getColorList(nextProps.colors));
     }
@@ -355,6 +362,9 @@ export default class Term extends Component {
   }
 
   componentWillUnmount() {
+    // turn blinking off to prevent leaking a timeout when disposing terminal
+    const prefs = this.term.getPrefs();
+    prefs.set('cursor-blink', false);
     clearTimeout(this.scrollbarsHideTimer);
     this.props.ref_(null);
   }

lib/components/terms.js

@@ -91,6 +91,7 @@ export default class Terms extends Component {
             borderColor: this.props.borderColor,
             cursorColor: this.props.cursorColor,
             cursorShape: this.props.cursorShape,
+            cursorBlink: this.props.cursorBlink,
             fontFamily: this.props.fontFamily,
             fontSmoothing: this.props.fontSmoothing,
             foregroundColor: this.props.foregroundColor,

lib/containers/terms.js

@@ -29,6 +29,7 @@ const TermsContainer = connect(
       padding: state.ui.padding,
       cursorColor: state.ui.cursorColor,
       cursorShape: state.ui.cursorShape,
+      cursorBlink: state.ui.cursorBlink,
       borderColor: state.ui.borderColor,
       colors: state.ui.colors,
       foregroundColor: state.ui.foregroundColor,

lib/reducers/ui.js

@@ -23,6 +23,7 @@ import {UPDATE_AVAILABLE} from '../constants/updater';
 import {values} from '../utils/object';
 
 const allowedCursorShapes = new Set(['BEAM', 'BLOCK', 'UNDERLINE']);
+const allowedCursorBlinkValues = new Set([true, false]);
 const allowedBells = new Set(['SOUND', false]);
 const allowedHamburgerMenuValues = new Set([true, false]);
 const allowedWindowControlsValues = new Set([true, false, 'left']);
@@ -34,6 +35,7 @@ const initial = Immutable({
   activeUid: null,
   cursorColor: '#F81CE5',
   cursorShape: 'BLOCK',
+  cursorBlink: false,
   borderColor: '#333',
   fontSize: 12,
   padding: '12px 14px',
@@ -125,6 +127,10 @@ const reducer = (state = initial, action) => {
             ret.cursorShape = config.cursorShape;
           }
 
+          if (allowedCursorBlinkValues.has(config.cursorBlink)) {
+            ret.cursorBlink = config.cursorBlink;
+          }
+
           if (config.borderColor) {
             ret.borderColor = config.borderColor;
           }

website/index.html

@@ -710,6 +710,11 @@
               <td>"BLOCK"</td>
               <td>The shape of the caret in the terminal. Available options are: 'BEAM', 'UNDERLINE', 'BLOCK'</td>
             </tr>
+            <tr>
+              <td>"cursorBlink"</td>
+              <td>"false"</td>
+              <td>If true, cursor will blink</td>
+            </tr>
             <tr>
               <td>"foregroundColor"</td>
               <td>"#fff"</td>