Add input box inside an editor between the code lines.

[nikhilsinghal005]

I'm working on a functionality where using my extension, I want to add a input box kind of a UI inside the editor between editor lines. The way code lens do it. I tried multiple ways to do it, but failed with every approach.

1. Tried inserting notebook cell in editor
2. Tried using code lens
3. Decorations
4. Vs code widget api.

for 4th option something like this. But failed to achieve this.

import * as vscode from 'vscode';

export class InlineInputWidget implements vscode.Disposable {
private editor: vscode.TextEditor;
private contentWidget: InputBoxContentWidget;

constructor(editor: vscode.TextEditor, position: vscode.Position) {
    this.editor = editor;
    this.contentWidget = new InputBoxContentWidget(editor, position);
    this.editor.addContentWidget(this.contentWidget);
}

public dispose() {
    this.editor.removeContentWidget(this.contentWidget);
}

}

class InputBoxContentWidget implements vscode.ContentWidget {
private editor: vscode.TextEditor;
private position: vscode.Position;
private domNode: HTMLElement;
private id: string;

constructor(editor: vscode.TextEditor, position: vscode.Position) {
    this.editor = editor;
    this.position = position;
    this.id = `inlineInput.contentWidget.${new Date().getTime()}`;

    // Create the input element
    this.domNode = document.createElement('input');
    this.domNode.type = 'text';
    this.domNode.className = 'inline-input-box';
    this.domNode.style.width = '200px';

    // Handle input events
    this.domNode.addEventListener('keydown', (e) => {
        if (e.key === 'Enter') {
            const value = (e.target as HTMLInputElement).value;
            vscode.window.showInformationMessage(`You entered: ${value}`);
            this.editor.removeContentWidget(this);
        } else if (e.key === 'Escape') {
            this.editor.removeContentWidget(this);
        }
    });

    // Focus the input box
    setTimeout(() => this.domNode.focus(), 100);
}

getId(): string {
    return this.id;
}

getDomNode(): HTMLElement {
    return this.domNode;
}

getPosition(): vscode.ContentWidgetPosition {
    return {
        position: this.position,
        preference: [vscode.ContentWidgetPositionPreference.EXACT]
    };
}

}
Can anyone guide me how can we do this.

[isidorn]

Not possible. You can use code lense and decorations as you discovered. But you can not really render a full input box between the lines.

[isidorn]

Can you share an image of other extensions using this API? So I know exactly what you would like. Thanks

[nikhilsinghal005]

Microsoft code tour. Github copilot etc.

i did some research and found that functionality is available. But we can use it only in insider version. but extensions Microsoft builds can use them. which is little weird. but i think that how it is.

[nikhilsinghal005]

[isidorn]

This is the inline chat UI which is currently proposed API. Once we finalise this API all extensions will be able to use it.

[nikhilsinghal005]

Thanks for clarification. Just one last thing. is there any bifurcation in proposed api's as there are so many. some which are in testing for long and some which are recently developed.

Because when got deep into this discussion forum . i got to know that this inline chat is developed like 4 years ago. although on web i dd not find anything related to bifurcation in api's