Add support for displaying images (#6987)

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;