Add support for font ligatures via xterm-addon-ligatures - Clos… (#3853)

* Add support for font ligatures via xterm-addon-ligatures

* Add disableLigatures config option, defaults to false

* Fix lint issue

Author: GitSquared

app/config/config-default.js

@@ -154,6 +154,9 @@ module.exports = {
     // rendering (slower, but supports transparent backgrounds)
     webGLRenderer: true,
 
+    // if `true` (without backticks and without quotes), Hyper will ignore ligatures provided by some fonts
+    disableLigatures: false,
+
     // for advanced config flags please refer to https://hyper.is/#cfg
   },
 

lib/components/term-group.js

@@ -97,6 +97,7 @@ class TermGroup_ extends React.PureComponent {
       quickEdit: this.props.quickEdit,
       webGLRenderer: this.props.webGLRenderer,
       macOptionSelectionMode: this.props.macOptionSelectionMode,
+      disableLigatures: this.props.disableLigatures,
       uid
     });
 

lib/components/term.js

@@ -4,6 +4,7 @@ import {FitAddon} from 'xterm-addon-fit';
 import {WebLinksAddon} from 'xterm-addon-web-links';
 import {SearchAddon} from 'xterm-addon-search';
 import {WebglAddon} from 'xterm-addon-webgl';
+import {LigaturesAddon} from 'xterm-addon-ligatures';
 import {clipboard} from 'electron';
 import * as Color from 'color';
 import terms from '../terms';
@@ -137,6 +138,7 @@ export default class Term extends React.PureComponent {
           console.warn('WebGL2 is not supported on your machine. Falling back to canvas-based rendering.');
         } else {
           // Experimental WebGL renderer needs some more glue-code to make it work on Hyper.
+          // If you're working on enabling back WebGL, you will also need to look into `xterm-addon-ligatures` support for that renderer.
           // useWebGL = true;
         }
       }
@@ -150,6 +152,9 @@ export default class Term extends React.PureComponent {
       if (useWebGL) {
         this.term.loadAddon(new WebglAddon());
       }
+      if (props.disableLigatures !== true) {
+        this.term.loadAddon(new LigaturesAddon());
+      }
     } else {
       // get the cached plugins
       this.fitAddon = props.fitAddon;

lib/components/terms.js

@@ -129,6 +129,7 @@ export default class Terms extends React.Component {
             quickEdit: this.props.quickEdit,
             webGLRenderer: this.props.webGLRenderer,
             macOptionSelectionMode: this.props.macOptionSelectionMode,
+            disableLigatures: this.props.disableLigatures,
             parentProps: this.props
           });
 

lib/containers/terms.js

@@ -43,7 +43,8 @@ const TermsContainer = connect(
       modifierKeys: state.ui.modifierKeys,
       quickEdit: state.ui.quickEdit,
       webGLRenderer: state.ui.webGLRenderer,
-      macOptionSelectionMode: state.ui.macOptionSelectionMode
+      macOptionSelectionMode: state.ui.macOptionSelectionMode,
+      disableLigatures: state.ui.disableLigatures
     };
   },
   dispatch => {

lib/reducers/ui.js

@@ -102,7 +102,8 @@ const initial = Immutable({
   showWindowControls: '',
   quickEdit: false,
   webGLRenderer: true,
-  macOptionSelectionMode: 'vertical'
+  macOptionSelectionMode: 'vertical',
+  disableLigatures: false
 });
 
 const currentWindow = remote.getCurrentWindow();
@@ -255,6 +256,10 @@ const reducer = (state = initial, action) => {
               ret.macOptionSelectionMode = config.macOptionSelectionMode;
             }
 
+            if (config.disableLigatures) {
+              ret.disableLigatures = config.disableLigatures;
+            }
+
             ret._lastUpdate = now;
 
             return ret;

package.json

@@ -263,6 +263,7 @@
     "webpack-cli": "3.3.7",
     "xterm": "~4.1.0",
     "xterm-addon-fit": "^0.2.1",
+    "xterm-addon-ligatures": "^0.2.0",
     "xterm-addon-search": "^0.2.1",
     "xterm-addon-web-links": "^0.2.1",
     "xterm-addon-webgl": "^0.2.1"

yarn.lock

@@ -3921,6 +3921,23 @@ fn-name@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/fn-name/-/fn-name-2.0.1.tgz#5214d7537a4d06a4a301c0cc262feb84188002e7"
 
+font-finder@^1.0.3, font-finder@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/font-finder/-/font-finder-1.0.4.tgz#2ca944954dd8d0e1b5bdc4c596cc08607761d89b"
+  integrity sha512-naF16RpjWUTFLqzhmdivYpBCrqySN6PI+a4GPtoEsCdvOpbKYTGeTjO7mxh3Wwjz4xKU+Oqx9kwOcteLDeMFQA==
+  dependencies:
+    get-system-fonts "^2.0.0"
+    promise-stream-reader "^1.0.1"
+
+font-ligatures@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/font-ligatures/-/font-ligatures-1.3.2.tgz#227eb5fc38fef34b5373aa19b555320b82842a71"
+  integrity sha512-h9t+gvKVr/c2GnQs4GhXHY39/qyLlXNaIxupU1cxj7YOXEFT8+sJfcchIrZ9UETZUUT7dNcI7RDOXN7gFtuw2g==
+  dependencies:
+    font-finder "^1.0.3"
+    lru-cache "^4.1.3"
+    opentype.js "^0.8.0"
+
 for-in@^1.0.1, for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -4149,6 +4166,11 @@ get-stream@^4.0.0:
   dependencies:
     pump "^3.0.0"
 
+get-system-fonts@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/get-system-fonts/-/get-system-fonts-2.0.1.tgz#0ec926d2d5fbc16a9f950a5737cd3b30819b0960"
+  integrity sha512-gcKzSGT5q5/eZGd6hNGEe2LZmMmdjAYcKHATw1KpUDFLNNeyyZVUZlv9TnbifxU4i0CgCFYrPYCaUcipym2Myw==
+
 get-value@^2.0.3, get-value@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
@@ -5592,6 +5614,14 @@ lru-cache@^4.0.1:
     pseudomap "^1.0.2"
     yallist "^2.1.2"
 
+lru-cache@^4.1.3:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
+  integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
+  dependencies:
+    pseudomap "^1.0.2"
+    yallist "^2.1.2"
+
 lru-cache@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
@@ -6351,6 +6381,13 @@ onetime@^2.0.0:
   dependencies:
     mimic-fn "^1.0.0"
 
+opentype.js@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/opentype.js/-/opentype.js-0.8.0.tgz#acabcfa1642fbe894a3e4d759e43ba694e02bd35"
+  integrity sha1-rKvPoWQvvolKPk11nkO6aU4CvTU=
+  dependencies:
+    tiny-inflate "^1.0.2"
+
 opn@5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/opn/-/opn-5.3.0.tgz#64871565c863875f052cfdf53d3e3cb5adb53b1c"
@@ -7110,6 +7147,11 @@ promise-inflight@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
 
+promise-stream-reader@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/promise-stream-reader/-/promise-stream-reader-1.0.1.tgz#4e793a79c9d49a73ccd947c6da9c127f12923649"
+  integrity sha512-Tnxit5trUjBAqqZCGWwjyxhmgMN4hGrtpW3Oc/tRI4bpm/O2+ej72BB08l6JBnGQgVDGCLvHFGjGgQS6vzhwXg==
+
 promise@^7.1.1:
   version "7.3.1"
   resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
@@ -8601,6 +8643,11 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
+tiny-inflate@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/tiny-inflate/-/tiny-inflate-1.0.2.tgz#93d9decffc8805bd57eae4310f0b745e9b6fb3a7"
+  integrity sha1-k9nez/yIBb1X6uQxDwt0Xptvs6c=
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -9222,6 +9269,14 @@ xterm-addon-fit@^0.2.1:
   resolved "https://registry.yarnpkg.com/xterm-addon-fit/-/xterm-addon-fit-0.2.1.tgz#353f43921eb78e3f9ad3f3afbb14e7ac183ca738"
   integrity sha512-BlR57O3t1/bmVcnS81bn9ZnNf+GiGNbeXdNUKSBa9tKEwNUMcU3S+KFLIRv7rm1Ty0D5pMOu0vbz/RDorKRwKQ==
 
+xterm-addon-ligatures@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/xterm-addon-ligatures/-/xterm-addon-ligatures-0.2.0.tgz#8d65fea968ba5b4306b2ada6f53eed3e1984f69c"
+  integrity sha512-IcRgjq3QCcL6P8W5M86BCnXIGD1LcCVKk7w3S29Yn2+YksMM3c85JjW2OUgsL3VTW/Tb6uyxpSV2rJOsRElVrQ==
+  dependencies:
+    font-finder "^1.0.4"
+    font-ligatures "^1.3.2"
+
 xterm-addon-search@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/xterm-addon-search/-/xterm-addon-search-0.2.1.tgz#f2c02fa92198d5115bde5cc518bff9d7998f2b9c"