How to add a button to the preferences

I want to add a select folder button next to Input box in my extension preference setting, I read the preference source code, but I have no idea, could you help me
image

@connor sorry for the delayed response, do you still need help? I believe by now you might have realized that you’ll need to extend the default implementation of the preferences-view in a custom extension to support your new use-case.

It doesn’t matter,I still working on it,could you give me some example for me,if it will take your much time,you can just tell me how to rebind my custom string-input-render, it will shorten my development time

@connor it should be as simple as:

export default new ContainerModule((bind, _unbind, _isBound, rebind) => {
    bind(CustomStringInputRenderer).toSelf();
    rebind(PreferenceStringInputRenderer).to(CustomStringInputRenderer);
});

I confirmed that in my case CustomStringInputRenderer is used:

import { injectable } from '@theia/core/shared/inversify';
import { PreferenceStringInputRenderer } from '@theia/preferences/lib/browser/views/components/preference-string-input';

@injectable()
export class CustomStringInputRenderer extends PreferenceStringInputRenderer {

    protected createInteractable(parent: HTMLElement): void {

        console.warn('creating custom input...');

        const interactable = document.createElement('input');
        this.interactable = interactable;
        interactable.type = 'text';
        interactable.title = 'custom input'; // custom property.
        interactable.spellcheck = false;
        interactable.classList.add('theia-input');
        interactable.defaultValue = this.getValue();
        interactable.oninput = this.handleUserInteraction.bind(this);
        interactable.onblur = this.handleBlur.bind(this);
        parent.appendChild(interactable);
    }

}

it works!!!you help me again,you are good manimage

1 Like