Add support for multiple cursor shapes (#352)

* Add config support for cursor shapes

* Add cursorShape to default config

app/lib/components/term.js

@@ -47,6 +47,9 @@ export default class Term extends Component {
           props.onResize(cols, rows);
         }
       };
+
+      // this.term.CursorNode_ is available at this point.
+      this.term.setCursorShape(props.cursorShape);
     };
     this.term.decorate(this.refs.term);
     this.term.installKeyboard();
@@ -186,6 +189,10 @@ export default class Term extends Component {
       this.term.prefs_.set('cursor-color', Color(nextProps.cursorColor).rgbString());
     }
 
+    if (this.props.cursorShape !== nextProps.cursorShape) {
+      this.term.setCursorShape(nextProps.cursorShape);
+    }
+
     if (this.props.colors !== nextProps.colors) {
       this.term.prefs_.set('color-palette-overrides', getColorList(nextProps.colors));
     }

app/lib/components/terms.js

@@ -128,6 +128,7 @@ export default class Terms extends Component {
             customCSS: this.props.customCSS,
             fontSize: this.props.fontSize,
             cursorColor: this.props.cursorColor,
+            cursorShape: this.props.cursorShape,
             fontFamily: this.props.fontFamily,
             fontSmoothing: this.props.fontSmoothing,
             foregroundColor: this.props.foregroundColor,

app/lib/containers/terms.js

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

app/lib/reducers/ui.js

@@ -18,12 +18,15 @@ import {
 import { UPDATE_AVAILABLE } from '../constants/updater';
 import { values } from '../utils/object';
 
+const allowedCursorShapes = ['BEAM', 'BLOCK', 'UNDERLINE'];
+
 // TODO: populate `config-default.js` from this :)
 const initial = Immutable({
   cols: null,
   rows: null,
   activeUid: null,
   cursorColor: '#F81CE5',
+  cursorShape: 'BLOCK',
   borderColor: '#333',
   fontSize: 12,
   padding: '12px 14px',
@@ -93,6 +96,10 @@ const reducer = (state = initial, action) => {
           ret.cursorColor = config.cursorColor;
         }
 
+        if (allowedCursorShapes.includes(config.cursorShape)) {
+          ret.cursorShape = config.cursorShape;
+        }
+
         if (null != config.borderColor) {
           ret.borderColor = config.borderColor;
         }

config-default.js

@@ -9,6 +9,9 @@ module.exports = {
     // terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk)
     cursorColor: 'rgba(248,28,229,0.75)',
 
+    // `BEAM` for |, `UNDERLINE` for _, `BLOCK` for █
+    cursorShape: 'BLOCK',
+
     // color of the text
     foregroundColor: '#fff',