Редактор 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 ответа
Есть способ сделать то, что вы хотите, и это делать именно то, что вы уже описали:
Сделайте выбор текста для термина, который вы хотите найти
editor.setSelection(new monaco.Range(18, 8, 18, 15));
Запустить действие поиска
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();
Во-первых, получите диапазон строки, которую вы хотите найти в вашей модели. Во-вторых, установите выбор. В-третьих, вызвать действие выбора.