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;