Support IMEs

Currently using the xterm.js PR branch

Fixes #7045

npm-shrinkwrap.json

@@ -429,8 +429,8 @@
     },
     "xterm": {
       "version": "0.33.0",
-      "from": "git+https://github.com/sourcelair/xterm.js.git#8790a94",
-      "resolved": "git+https://github.com/sourcelair/xterm.js.git#8790a94a56cd68a7188eef9ec47c05d2fd69cc41"
+      "from": "git://github.com/Tyriar/xterm.js#124_add_textarea_back",
+      "resolved": "git://github.com/Tyriar/xterm.js#124_add_textarea_back"
     },
     "yauzl": {
       "version": "2.3.1",

package.json

@@ -30,7 +30,7 @@
     "vscode-debugprotocol": "1.10.0",
     "vscode-textmate": "2.0.1",
     "winreg": "1.2.0",
-    "xterm": "git+https://github.com/sourcelair/xterm.js.git#8790a94",
+    "xterm": "git://github.com/Tyriar/xterm.js#124_add_textarea_back",
     "yauzl": "2.3.1"
   },
   "devDependencies": {

src/vs/workbench/parts/terminal/electron-browser/media/xterm.css

@@ -16,41 +16,59 @@
 	position: relative;
 }
 
-.monaco-workbench .panel.integrated-terminal .xterm:focus {
+.monaco-workbench .panel.integrated-terminal .xterm.focus {
 	outline: none;
 }
 
-.hc-black .monaco-workbench .panel.integrated-terminal .xterm:focus {
+.hc-black .monaco-workbench .panel.integrated-terminal .xterm.focus {
 	outline: 2px solid #f38518;
 }
 
+.monaco-workbench .panel.integrated-terminal .xterm .xterm-helpers {
+	position: absolute;
+	top: 0;
+}
+
+.monaco-workbench .panel.integrated-terminal .xterm .xterm-helper-textarea {
+	position: absolute;
+	/*
+	 * HACK: to fix IE's blinking cursor
+	 * Move textarea out of the screen to the far left, so that the cursor is not visible.
+	 */
+	left: -9999em;
+	opacity: 0;
+	width: 0;
+	height: 0;
+	z-index: -10;
+}
+
 .monaco-workbench .panel.integrated-terminal .reverse-video { color: #1e1e1e; }
 .vs-dark .monaco-workbench .panel.integrated-terminal .reverse-video { color: #CCC; }
 .hc-black .monaco-workbench .panel.integrated-terminal .reverse-video { color: #FFF; }
 
-.monaco-workbench .panel.integrated-terminal .xterm:focus .terminal-cursor { background-color: #333; }
-.vs-dark .monaco-workbench .panel.integrated-terminal .xterm:focus .terminal-cursor { background-color: #CCC; }
-.hc-black .monaco-workbench .panel.integrated-terminal .xterm:focus .terminal-cursor { background-color: #FFF; }
+.monaco-workbench .panel.integrated-terminal .xterm.focus .terminal-cursor { background-color: #333; }
+.vs-dark .monaco-workbench .panel.integrated-terminal .xterm.focus .terminal-cursor { background-color: #CCC; }
+.hc-black .monaco-workbench .panel.integrated-terminal .xterm.focus .terminal-cursor { background-color: #FFF; }
 
-.monaco-workbench .panel.integrated-terminal .xterm:not(:focus) .terminal-cursor {
+.monaco-workbench .panel.integrated-terminal .xterm:not(.focus) .terminal-cursor {
 	background-color: transparent;
 	outline: 1px solid #333;
 	outline-offset: -1px;
 }
-.vs-dark .monaco-workbench .panel.integrated-terminal .xterm:not(:focus) .terminal-cursor {
+.vs-dark .monaco-workbench .panel.integrated-terminal .xterm:not(.focus) .terminal-cursor {
 	background-color: transparent;
 	outline: 1px solid #CCC;
 	outline-offset: -1px;
 }
-.hc-black .monaco-workbench .panel.integrated-terminal .xterm:not(:focus) .terminal-cursor {
+.hc-black .monaco-workbench .panel.integrated-terminal .xterm:not(.focus) .terminal-cursor {
 	background-color: transparent;
 	outline: 1px solid #FFF;
 	outline-offset: -1px;
 }
 
-.monaco-workbench .panel.integrated-terminal .xterm:focus .terminal-cursor.blinking { animation: blink-cursor 1.2s infinite step-end; }
-.vs-dark .monaco-workbench .panel.integrated-terminal .xterm:focus .terminal-cursor.blinking { animation: blink-cursor-dark 1.2s infinite step-end; }
-.hc-black .monaco-workbench .panel.integrated-terminal .xterm:focus .terminal-cursor.blinking { animation: blink-cursor-hc-black 1.2s infinite step-end; }
+.monaco-workbench .panel.integrated-terminal .xterm.focus .terminal-cursor.blinking { animation: blink-cursor 1.2s infinite step-end; }
+.vs-dark .monaco-workbench .panel.integrated-terminal .xterm.focus .terminal-cursor.blinking { animation: blink-cursor-dark 1.2s infinite step-end; }
+.hc-black .monaco-workbench .panel.integrated-terminal .xterm.focus .terminal-cursor.blinking { animation: blink-cursor-hc-black 1.2s infinite step-end; }
 
 @keyframes blink-cursor {
 	0% {
@@ -101,6 +119,20 @@
 	visibility: hidden;
 }
 
+/* Composition view */
+
+.terminal .composition-view {
+	background: #000;
+	color: #FFF;
+	display: none;
+	position: absolute;
+	white-space: nowrap;
+}
+
+.terminal .composition-view.active {
+	display: block;
+}
+
 /* Base selection colors */
 
 .monaco-workbench .panel.integrated-terminal .xterm *::selection {