Im building a vscode extension where I would like to add some additional context to the code. To do this, I’m using Code Actions, which when clicked should bring up a form with two inputs and a submit button.
Below is an example on how this is done in github copilot extension.
I was able to add the Code Actions and the input text field. But this is different from the inline text that Github copilot has. This shows as a quick input.
How can i bring up a UI similar to what Github copilot extension has done?
<code>import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
context.subscriptions.push(
vscode.languages.registerCodeActionsProvider('typescript', new AddContextCodeActionProvider(), {
providedCodeActionKinds: AddContextCodeActionProvider.providedCodeActionKinds
})
);
context.subscriptions.push(
vscode.commands.registerCommand('extension.addContext', (line: number) => {
showInlineForm(line);
})
);
}
class AddContextCodeActionProvider implements vscode.CodeActionProvider {
static readonly providedCodeActionKinds = [
vscode.CodeActionKind.QuickFix
];
provideCodeActions(document: vscode.TextDocument, range: vscode.Range): vscode.CodeAction[] {
const addContextAction = this.createAddContextAction(document, range);
return [addContextAction];
}
private createAddContextAction(document: vscode.TextDocument, range: vscode.Range): vscode.CodeAction {
const action = new vscode.CodeAction('Add Context', vscode.CodeActionKind.QuickFix);
action.command = { command: 'extension.addContext', title: 'Add Context', arguments: [range.start.line] };
return action;
}
}
function showInlineForm(line: number) {
const editor = vscode.window.activeTextEditor;
if (!editor) {
return;
}
const decorationType = vscode.window.createTextEditorDecorationType({
after: {
margin: '0 0 0 1rem',
contentText: 'Add Context: ',
backgroundColor: 'rgba(0,0,0,0.1)',
color: 'blue',
border: '1px solid blue',
borderRadius: '3px',
padding: '0 5px'
}
});
const range = new vscode.Range(line, 0, line, 0);
editor.setDecorations(decorationType, [range]);
vscode.window.showInputBox({ prompt: 'Enter context' }).then(value => {
if (value !== undefined) {
editor.edit(editBuilder => {
editBuilder.insert(new vscode.Position(line, 0), `// ${value}n`);
});
}
editor.setDecorations(decorationType, []);
});
}
</code>
<code>import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
context.subscriptions.push(
vscode.languages.registerCodeActionsProvider('typescript', new AddContextCodeActionProvider(), {
providedCodeActionKinds: AddContextCodeActionProvider.providedCodeActionKinds
})
);
context.subscriptions.push(
vscode.commands.registerCommand('extension.addContext', (line: number) => {
showInlineForm(line);
})
);
}
class AddContextCodeActionProvider implements vscode.CodeActionProvider {
static readonly providedCodeActionKinds = [
vscode.CodeActionKind.QuickFix
];
provideCodeActions(document: vscode.TextDocument, range: vscode.Range): vscode.CodeAction[] {
const addContextAction = this.createAddContextAction(document, range);
return [addContextAction];
}
private createAddContextAction(document: vscode.TextDocument, range: vscode.Range): vscode.CodeAction {
const action = new vscode.CodeAction('Add Context', vscode.CodeActionKind.QuickFix);
action.command = { command: 'extension.addContext', title: 'Add Context', arguments: [range.start.line] };
return action;
}
}
function showInlineForm(line: number) {
const editor = vscode.window.activeTextEditor;
if (!editor) {
return;
}
const decorationType = vscode.window.createTextEditorDecorationType({
after: {
margin: '0 0 0 1rem',
contentText: 'Add Context: ',
backgroundColor: 'rgba(0,0,0,0.1)',
color: 'blue',
border: '1px solid blue',
borderRadius: '3px',
padding: '0 5px'
}
});
const range = new vscode.Range(line, 0, line, 0);
editor.setDecorations(decorationType, [range]);
vscode.window.showInputBox({ prompt: 'Enter context' }).then(value => {
if (value !== undefined) {
editor.edit(editBuilder => {
editBuilder.insert(new vscode.Position(line, 0), `// ${value}n`);
});
}
editor.setDecorations(decorationType, []);
});
}
</code>
import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
context.subscriptions.push(
vscode.languages.registerCodeActionsProvider('typescript', new AddContextCodeActionProvider(), {
providedCodeActionKinds: AddContextCodeActionProvider.providedCodeActionKinds
})
);
context.subscriptions.push(
vscode.commands.registerCommand('extension.addContext', (line: number) => {
showInlineForm(line);
})
);
}
class AddContextCodeActionProvider implements vscode.CodeActionProvider {
static readonly providedCodeActionKinds = [
vscode.CodeActionKind.QuickFix
];
provideCodeActions(document: vscode.TextDocument, range: vscode.Range): vscode.CodeAction[] {
const addContextAction = this.createAddContextAction(document, range);
return [addContextAction];
}
private createAddContextAction(document: vscode.TextDocument, range: vscode.Range): vscode.CodeAction {
const action = new vscode.CodeAction('Add Context', vscode.CodeActionKind.QuickFix);
action.command = { command: 'extension.addContext', title: 'Add Context', arguments: [range.start.line] };
return action;
}
}
function showInlineForm(line: number) {
const editor = vscode.window.activeTextEditor;
if (!editor) {
return;
}
const decorationType = vscode.window.createTextEditorDecorationType({
after: {
margin: '0 0 0 1rem',
contentText: 'Add Context: ',
backgroundColor: 'rgba(0,0,0,0.1)',
color: 'blue',
border: '1px solid blue',
borderRadius: '3px',
padding: '0 5px'
}
});
const range = new vscode.Range(line, 0, line, 0);
editor.setDecorations(decorationType, [range]);
vscode.window.showInputBox({ prompt: 'Enter context' }).then(value => {
if (value !== undefined) {
editor.edit(editBuilder => {
editBuilder.insert(new vscode.Position(line, 0), `// ${value}n`);
});
}
editor.setDecorations(decorationType, []);
});
}