diff --git a/app/config/config-default.json b/app/config/config-default.json index 39c4e9fc5dda..ca87a774c966 100644 --- a/app/config/config-default.json +++ b/app/config/config-default.json @@ -61,7 +61,8 @@ "disableAutoUpdates": false, "autoUpdatePlugins": true, "preserveCWD": true, - "screenReaderMode": false + "screenReaderMode": false, + "imageSupport": true }, "plugins": [], "localPlugins": [], diff --git a/app/config/schema.json b/app/config/schema.json index 9235d9459862..e87cd3b83735 100644 --- a/app/config/schema.json +++ b/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", diff --git a/bin/snapshot-libs.js b/bin/snapshot-libs.js index d1aacbfa91d2..df6463159c61 100644 --- a/bin/snapshot-libs.js +++ b/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'); diff --git a/lib/components/term-group.tsx b/lib/components/term-group.tsx index ae1ec7e324d6..9820bfe92d54 100644 --- a/lib/components/term-group.tsx +++ b/lib/components/term-group.tsx @@ -107,6 +107,7 @@ class TermGroup_ extends React.PureComponent { disableLigatures: this.props.disableLigatures, screenReaderMode: this.props.screenReaderMode, windowsPty: this.props.windowsPty, + imageSupport: this.props.imageSupport, uid }); diff --git a/lib/components/term.tsx b/lib/components/term.tsx index 02fcad9f2b1b..4df1bfb51698 100644 --- a/lib/components/term.tsx +++ b/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!; diff --git a/lib/components/terms.tsx b/lib/components/terms.tsx index 5695a571024c..5c7adb107c89 100644 --- a/lib/components/terms.tsx +++ b/lib/components/terms.tsx @@ -120,6 +120,7 @@ export default class Terms extends React.Component { disableLigatures: this.props.disableLigatures, screenReaderMode: this.props.screenReaderMode, windowsPty: this.props.windowsPty, + imageSupport: this.props.imageSupport, parentProps: this.props }); diff --git a/lib/config.d.ts b/lib/config.d.ts index 85dbe5194714..2aa780285cce 100644 --- a/lib/config.d.ts +++ b/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 */ diff --git a/lib/containers/terms.ts b/lib/containers/terms.ts index 5e934060eefd..612116fd60e4 100644 --- a/lib/containers/terms.ts +++ b/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 }; }; diff --git a/lib/hyper.d.ts b/lib/hyper.d.ts index 26937548a8c2..b687a7b2d0b6 100644 --- a/lib/hyper.d.ts +++ b/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; diff --git a/lib/reducers/ui.ts b/lib/reducers/ui.ts index 313dec00047c..a5edc7bd1621 100644 --- a/lib/reducers/ui.ts +++ b/lib/reducers/ui.ts @@ -53,6 +53,7 @@ const initial: uiState = Immutable>({ 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; diff --git a/package.json b/package.json index f92d8d328ea5..67eae82a3215 100644 --- a/package.json +++ b/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", diff --git a/webpack.config.ts b/webpack.config.ts index 17ff026624fc..4bc069a29444 100644 --- a/webpack.config.ts +++ b/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")', diff --git a/yarn.lock b/yarn.lock index 699f56f4bcf6..ab038d107f8d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7542,6 +7542,11 @@ xterm-addon-fit@0.7.0: resolved "https://registry.npmjs.org/xterm-addon-fit/-/xterm-addon-fit-0.7.0.tgz#b8ade6d96e63b47443862088f6670b49fb752c6a" integrity sha512-tQgHGoHqRTgeROPnvmtEJywLKoC/V9eNs4bLLz7iyJr1aW/QFzRwfd3MGiJ6odJd9xEfxcW36/xRU47JkD5NKQ== +xterm-addon-image@0.4.1: + 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== + xterm-addon-ligatures@0.6.0: version "0.6.0" resolved "https://registry.npmjs.org/xterm-addon-ligatures/-/xterm-addon-ligatures-0.6.0.tgz#c51801b0150c62ac1165654757b55c796457d195"