I'm hosting a Monaco editor in my React app.

So far, I've got the editor to open the find control when the editor has mounted, but I need to pre-populate it with some text.

The bit of code at the moment looks like this:

... 

class CodeEditorMonaco extends Component {
  constructor (props) {
    super(props)
    this.editorDidMount = this.editorDidMount.bind(this)
    this.editor = null
  }

  editorDidMount (editor, monaco) {
    editor.focus()
    editor.getAction('actions.find').run()
  } 

  render () {
    return (
      <div className='code-editor'>
        <MonacoEditor
          width='100%'
          height='75vh'
          language='json'
          editorDidMount={this.editorDidMount}
          ref={editor => { this.editor = editor }}
        />
      </div>
    )
  }
}
...

I don't think the API documentation is clear as to whether this is possible or not.

My first instinct was to do editor.getAction('actions.find').run('text here') but that doesn't seem to work

When you highlight a word in the editor itself, and then press CMD+F you get the find control pre-populated with the text, so I believe it's possible to achieve.

Any help would be appreciated.

Find control:

I'm hosting a Monaco editor in my React app.

So far, I've got the editor to open the find control when the editor has mounted, but I need to pre-populate it with some text.

The bit of code at the moment looks like this:

... 

class CodeEditorMonaco extends Component {
  constructor (props) {
    super(props)
    this.editorDidMount = this.editorDidMount.bind(this)
    this.editor = null
  }

  editorDidMount (editor, monaco) {
    editor.focus()
    editor.getAction('actions.find').run()
  } 

  render () {
    return (
      <div className='code-editor'>
        <MonacoEditor
          width='100%'
          height='75vh'
          language='json'
          editorDidMount={this.editorDidMount}
          ref={editor => { this.editor = editor }}
        />
      </div>
    )
  }
}
...

I don't think the API documentation is clear as to whether this is possible or not.

My first instinct was to do editor.getAction('actions.find').run('text here') but that doesn't seem to work

When you highlight a word in the editor itself, and then press CMD+F you get the find control pre-populated with the text, so I believe it's possible to achieve.

Any help would be appreciated.

Find control:

• javascript
• reactjs
• monaco-editor
• visual-studio-monaco

• Could really do with some help with this please – owennicol Commented Aug 13, 2017 at 15:34

2 Answers 2

You can try it with Monaco playground.

const editor = monaco.editor.create(document.getElementById("container"), {
    value: "{\n\t\"dependencies\": {\n\t\t\n\t}\n}\n",
    language: "json"
});

const model = editor.getModel();
const range = model.findMatches('d')[0].range;

editor.setSelection(range);
editor.getAction('actions.find').run();

First, get the range of the string you want to find from your model. Second, set selection. Third, trigger select action.

There's a way to do what you want and it's by doing exactly what you already described:

1. Make a text selection for the term you want to search for

   editor.setSelection(new monaco.Range(18, 8, 18, 15));

2. Trigger the find action

   editor.trigger('', 'actions.find');

   or

   editor.getAction('actions.find').run('');