Add support for displaying images (#6987)

Author: marvinruder

app/config/config-default.json

@@ -61,7 +61,8 @@
     "disableAutoUpdates": false,
     "autoUpdatePlugins": true,
     "preserveCWD": true,
-    "screenReaderMode": false
+    "screenReaderMode": false,
+    "imageSupport": true
   },
   "plugins": [],
   "localPlugins": [],

app/config/schema.json

@@ -202,6 +202,10 @@
                     "description": "color of the text",
                     "type": "string"
                 },
+                "imageSupport": {
+                    "description": "Whether to enable Sixel and iTerm2 inline image protocol support or not.",
+                    "type": "boolean"
+                },
                 "letterSpacing": {
                     "description": "letter spacing as a relative unit",
                     "type": "number"
@@ -355,6 +359,7 @@
                 "fontWeight",
                 "fontWeightBold",
                 "foregroundColor",
+                "imageSupport",
                 "letterSpacing",
                 "lineHeight",
                 "macOptionSelectionMode",

bin/snapshot-libs.js

@@ -23,6 +23,7 @@ if (false) {
   require('mousetrap');
   require('open');
   require('xterm-addon-fit');
+  require('xterm-addon-image');
   require('xterm-addon-search');
   require('xterm-addon-web-links');
   require('xterm-addon-webgl');

lib/components/term-group.tsx

@@ -107,6 +107,7 @@ class TermGroup_ extends React.PureComponent<TermGroupProps> {
       disableLigatures: this.props.disableLigatures,
       screenReaderMode: this.props.screenReaderMode,
       windowsPty: this.props.windowsPty,
+      imageSupport: this.props.imageSupport,
       uid
     });
 

lib/components/term.tsx

@@ -16,6 +16,7 @@ import {TermProps} from '../hyper';
 import {pickBy, isEqual} from 'lodash';
 import {decorate} from '../utils/plugins';
 import 'xterm/css/xterm.css';
+import {ImageAddon} from 'xterm-addon-image';
 
 const SearchBox = decorate(_SearchBox, 'SearchBox');
 
@@ -212,16 +213,23 @@ export default class Term extends React.PureComponent<
         })
       );
       this.term.open(this.termRef);
+
       if (useWebGL) {
         this.term.loadAddon(new WebglAddon());
       } else {
         this.term.loadAddon(new CanvasAddon());
       }
+
       if (props.disableLigatures !== true) {
         this.term.loadAddon(new LigaturesAddon());
       }
+
       this.term.loadAddon(new Unicode11Addon());
       this.term.unicode.activeVersion = '11';
+
+      if (props.imageSupport) {
+        this.term.loadAddon(new ImageAddon());
+      }
     } else {
       // get the cached plugins
       this.fitAddon = props.fitAddon!;

lib/components/terms.tsx

@@ -120,6 +120,7 @@ export default class Terms extends React.Component<TermsProps> {
             disableLigatures: this.props.disableLigatures,
             screenReaderMode: this.props.screenReaderMode,
             windowsPty: this.props.windowsPty,
+            imageSupport: this.props.imageSupport,
             parentProps: this.props
           });
 

lib/config.d.ts

@@ -86,6 +86,10 @@ export type configOptions = {
   fontWeightBold: FontWeight;
   /** color of the text */
   foregroundColor: string;
+  /**
+   * Whether to enable Sixel and iTerm2 inline image protocol support or not.
+   */
+  imageSupport: boolean;
   /** letter spacing as a relative unit */
   letterSpacing: number;
   /** line height as a relative unit */

lib/containers/terms.ts

@@ -54,7 +54,8 @@ const mapStateToProps = (state: HyperState) => {
     macOptionSelectionMode: state.ui.macOptionSelectionMode,
     disableLigatures: state.ui.disableLigatures,
     screenReaderMode: state.ui.screenReaderMode,
-    windowsPty: state.ui.windowsPty
+    windowsPty: state.ui.windowsPty,
+    imageSupport: state.ui.imageSupport
   };
 };
 

lib/hyper.d.ts

@@ -68,6 +68,7 @@ export type uiState = Immutable<{
   fontWeightBold: FontWeight;
   foregroundColor: string;
   fullScreen: boolean;
+  imageSupport: boolean;
   letterSpacing: number;
   lineHeight: number;
   macOptionSelectionMode: string;
@@ -310,6 +311,7 @@ export type TermGroupOwnProps = {
   | 'webGLRenderer'
   | 'webLinksActivationKey'
   | 'windowsPty'
+  | 'imageSupport'
 >;
 
 import {TermGroupConnectedProps} from './components/term-group';
@@ -357,6 +359,7 @@ export type TermProps = {
   fontWeight: FontWeight;
   fontWeightBold: FontWeight;
   foregroundColor: string;
+  imageSupport: boolean;
   isTermActive: boolean;
   letterSpacing: number;
   lineHeight: number;

lib/reducers/ui.ts

@@ -53,6 +53,7 @@ const initial: uiState = Immutable<Mutable<uiState>>({
   fontSmoothingOverride: 'antialiased',
   fontWeight: 'normal',
   fontWeightBold: 'bold',
+  imageSupport: true,
   lineHeight: 1,
   letterSpacing: 0,
   css: '',
@@ -281,6 +282,10 @@ const reducer: IUiReducer = (state = initial, action) => {
               };
             }
 
+            if (config.imageSupport !== undefined) {
+              ret.imageSupport = config.imageSupport;
+            }
+
             ret._lastUpdate = now;
 
             return ret;

package.json

@@ -62,6 +62,7 @@
     "xterm": "5.2.1",
     "xterm-addon-canvas": "0.4.0",
     "xterm-addon-fit": "0.7.0",
+    "xterm-addon-image": "0.4.1",
     "xterm-addon-ligatures": "0.6.0",
     "xterm-addon-search": "0.12.0",
     "xterm-addon-unicode11": "0.5.0",

webpack.config.ts

@@ -118,6 +118,7 @@ const config: webpack.Configuration[] = [
       mousetrap: 'require("./node_modules/mousetrap/mousetrap.js")',
       open: 'require("./node_modules/open/index.js")',
       'xterm-addon-fit': 'require("./node_modules/xterm-addon-fit/lib/xterm-addon-fit.js")',
+      'xterm-addon-image': 'require("./node_modules/xterm-addon-image/lib/xterm-addon-image.js")',
       'xterm-addon-search': 'require("./node_modules/xterm-addon-search/lib/xterm-addon-search.js")',
       'xterm-addon-web-links': 'require("./node_modules/xterm-addon-web-links/lib/xterm-addon-web-links.js")',
       'xterm-addon-webgl': 'require("./node_modules/xterm-addon-webgl/lib/xterm-addon-webgl.js")',

yarn.lock

@@ -7542,6 +7542,11 @@ [email protected]:
   resolved "https://registry.npmjs.org/xterm-addon-fit/-/xterm-addon-fit-0.7.0.tgz#b8ade6d96e63b47443862088f6670b49fb752c6a"
   integrity sha512-tQgHGoHqRTgeROPnvmtEJywLKoC/V9eNs4bLLz7iyJr1aW/QFzRwfd3MGiJ6odJd9xEfxcW36/xRU47JkD5NKQ==
 
+[email protected]:
+  version "0.4.1"
+  resolved "https://registry.npmjs.org/xterm-addon-image/-/xterm-addon-image-0.4.1.tgz#ec8f750af48005ad641c1128fa1f551ac198472a"
+  integrity sha512-iJpYyvtbHg4oXSv+D6J73ZfCjnboZpbZ567MLplXDBlYSUknv3kvPTfVMPJATV7Zsx7+bDgyXboCh9vsDf/m/w==
+
 [email protected]:
   version "0.6.0"
   resolved "https://registry.npmjs.org/xterm-addon-ligatures/-/xterm-addon-ligatures-0.6.0.tgz#c51801b0150c62ac1165654757b55c796457d195"