Редактор Monaco - предварительно заполняйте поиск с помощью текста

В моем приложении React я размещаю редактор Monaco.

До сих пор у меня есть редактор, который открывает элемент управления поиском после его монтирования, но мне нужно предварительно заполнить его некоторым текстом.

Часть кода на данный момент выглядит следующим образом:

... 

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>
    )
  }
}
...

Я не думаю, что в документации API ясно, возможно ли это или нет.

Мой первый инстинкт должен был сделать editor.getAction('actions.find').run('text here')но это не похоже на работу

Когда вы выделите слово в самом редакторе, а затем нажмите CMD+F Вы получаете контроль поиска, предварительно заполненный текстом, поэтому я считаю, что это возможно.

Любая помощь будет оценена.

Найти управление: Найти контроль

2 ответа

Решение

Есть способ сделать то, что вы хотите, и это делать именно то, что вы уже описали:

  1. Сделайте выбор текста для термина, который вы хотите найти

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

  2. Запустить действие поиска

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

    или же

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

Вы можете попробовать это с детской площадкой Монако.

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();

Во-первых, получите диапазон строки, которую вы хотите найти в вашей модели. Во-вторых, установите выбор. В-третьих, вызвать действие выбора.

Другие вопросы по тегам