Add letter spacing configuration option (#3002)

app/config/config-default.js

@@ -23,6 +23,9 @@ module.exports = {
     // line height as a relative unit
     lineHeight: 1,
 
+    // letter spacing as a relative unit
+    letterSpacing: 0,
+
     // terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk)
     cursorColor: 'rgba(248,28,229,0.8)',
 

lib/components/term-group.js

@@ -72,6 +72,7 @@ class TermGroup_ extends React.PureComponent {
       fontWeight: this.props.fontWeight,
       fontWeightBold: this.props.fontWeightBold,
       lineHeight: this.props.lineHeight,
+      letterSpacing: this.props.letterSpacing,
       modifierKeys: this.props.modifierKeys,
       padding: this.props.padding,
       url: session.url,

lib/components/term.js

@@ -33,6 +33,7 @@ const getTermOptions = props => {
     fontWeight: props.fontWeight,
     fontWeightBold: props.fontWeightBold,
     lineHeight: props.lineHeight,
+    letterSpacing: props.letterSpacing,
     allowTransparency: needTransparency,
     experimentalCharAtlas: 'dynamic',
     theme: {
@@ -267,7 +268,8 @@ export default class Term extends React.PureComponent {
     if (
       this.props.fontSize !== nextProps.fontSize ||
       this.props.fontFamily !== nextProps.fontFamily ||
-      this.props.lineHeight !== nextProps.lineHeight
+      this.props.lineHeight !== nextProps.lineHeight ||
+      this.props.letterSpacing !== nextProps.letterSpacing
     ) {
       // invalidate xterm cache about how wide each
       // character is

lib/components/terms.js

@@ -102,6 +102,7 @@ export default class Terms extends React.Component {
             fontWeight: this.props.fontWeight,
             fontWeightBold: this.props.fontWeightBold,
             lineHeight: this.props.lineHeight,
+            letterSpacing: this.props.letterSpacing,
             padding: this.props.padding,
             bell: this.props.bell,
             bellSoundURL: this.props.bellSoundURL,

lib/containers/terms.js

@@ -27,6 +27,7 @@ const TermsContainer = connect(
       fontWeight: state.ui.fontWeight,
       fontWeightBold: state.ui.fontWeightBold,
       lineHeight: state.ui.lineHeight,
+      letterSpacing: state.ui.letterSpacing,
       uiFontFamily: state.ui.uiFontFamily,
       fontSmoothing: state.ui.fontSmoothingOverride,
       padding: state.ui.padding,

lib/reducers/ui.js

@@ -48,6 +48,7 @@ const initial = Immutable({
   fontWeight: 'normal',
   fontWeightBold: 'bold',
   lineHeight: 1,
+  letterSpacing: 0,
   css: '',
   termCSS: '',
   openAt: {},
@@ -143,6 +144,10 @@ const reducer = (state = initial, action) => {
               ret.lineHeight = config.lineHeight;
             }
 
+            if (Number.isFinite(config.letterSpacing)) {
+              ret.letterSpacing = config.letterSpacing;
+            }
+
             if (config.uiFontFamily) {
               ret.uiFontFamily = config.uiFontFamily;
             }