Add history keybindings.

src/monaco/ShellHistoryLanguage.ts

@@ -0,0 +1,31 @@
+import {services} from "../services/index";
+import * as _ from "lodash";
+
+monaco.languages.setMonarchTokensProvider("shell", {
+    tokenizer: {
+        root: [
+            {
+                regex: /.+/,
+                action: {token: "history-item"},
+            },
+        ],
+    },
+    tokenPostfix: ".shell-history",
+});
+
+monaco.languages.register({
+    id: "shell-history",
+});
+
+monaco.languages.registerCompletionItemProvider("shell-history", {
+    triggerCharacters: [" ", "/"],
+    provideCompletionItems: () => {
+        return {
+            isIncomplete: false,
+            items: _.uniq(services.history.all.map(record => record.command)).reverse().map(command => ({
+                label: command,
+                kind: monaco.languages.CompletionItemKind.Value,
+            })),
+        };
+    },
+});

src/views/PromptComponent.tsx

@@ -74,9 +74,27 @@ export class PromptComponent extends React.Component<Props, State> {
 
     startHistorySearch() {
         this.editor.setModel(this.historyModel);
+        this.setValue(this.model.getValue());
         this.triggerSuggest();
     }
 
+    applyHistorySearch() {
+        // Give it some time to apply a suggestion.
+        setTimeout(
+            () => this.cancelHistorySearch(),
+            200,
+        );
+    }
+
+    cancelHistorySearch() {
+        this.editor.setModel(this.model);
+        this.setValue(this.historyModel.getValue());
+    }
+
+    isInHistorySearch(): boolean {
+        return this.editor.getModel() === this.historyModel;
+    }
+
     focus(): void {
         this.editor.focus();
     }
@@ -99,7 +117,6 @@ export class PromptComponent extends React.Component<Props, State> {
 
         if (!this.isEmpty()) {
             this.props.session.createJob(this.prompt);
-            this.editor.setModel(this.model);
             this.editor.setValue("");
             this.setState({
                 displayedHistoryRecordID: undefined,
@@ -155,6 +172,7 @@ export class PromptComponent extends React.Component<Props, State> {
         this.editor.setValue(value);
         this.editor.setPosition({lineNumber: 1, column: value.length + 1});
         this.prompt.setValue(value);
+        this.focus();
     }
 
     private get promptContentNode(): HTMLDivElement {
@@ -167,6 +185,6 @@ export class PromptComponent extends React.Component<Props, State> {
     }
 
     private triggerSuggest() {
-        this.editor.trigger("", "editor.action.triggerSuggest", {});
+        this.editor.trigger(this.editor.getValue(), "editor.action.triggerSuggest", {});
     }
 }

src/views/keyevents/Keybindings.ts

@@ -356,6 +356,16 @@ export function handleUserEvent(application: ApplicationComponent, search: Searc
         return;
     }
 
+    if (event.keyCode === KeyCode.Tab && promptComponent.isInHistorySearch()) {
+        promptComponent.applyHistorySearch();
+        return;
+    }
+
+    if (event.keyCode === KeyCode.Escape && promptComponent.isInHistorySearch()) {
+        promptComponent.cancelHistorySearch();
+        return;
+    }
+
     if (event.ctrlKey && event.keyCode === KeyCode.R) {
         promptComponent.startHistorySearch();