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.