I’m working with the web version of the Monaco Editor and I’m trying to implement a find and replace functionality. I can successfully set the field of find text by creating a range selection, but I’m having trouble setting the replace text field.

Here’s what I have so far:

const value = `function hello() {
    alert('Hello world!');
}`;
const textToSearch = 'hello';
const textReplaceWith = 'world';

// Hover on each property to see its docs!
const myEditor = monaco.editor.create(document.getElementById("container"), {
    value,
    language: "javascript",
    automaticLayout: true,
});

const model = myEditor.getModel();
const range = model.findMatches(textToSearch)[0].range;
myEditor.setPosition({column: range.startColumn || 1, lineNumber: range.startLineNumber || 1});
myEditor.revealLine(range.startLineNumber || 1);
myEditor.setSelection(range);

// open find & replace panel
myEditor.getAction('editor.action.startFindReplaceAction').run()

I’ve looked through the Monaco Editor documentation and various forums but haven’t found a clear solution. Has anyone managed to set the replace text field in the find and replace action?

Any help or code examples would be greatly appreciated.