monaco-editor实现全局内容和文件搜索

写在前面 欢迎关注公众号：java开发高级进阶, 有不会的可以直接公众号留言提问

monaco-editor不提供全局搜索，只提供单个文件内的搜索，那么如何实现全局搜索呢？

环境：Nodejs + React + Dva + monaco-editor + react-monaco-editor + antd

一、绑定快捷键

调用editor.addCommand方法绑定快捷键，通过monaco.KeyMod和monaco.KeyCode选择快捷键

快捷键要在编辑器创建完成时创建，故这段代码要写在editorDidMount里面

全局搜索要有一个搜索框供输入关键字，故在触发快捷键的时候让搜索框显示，默认是不显示。代码如下：

editorDidMount = (editor, monaco) => {
	editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KEY_F, () => {
		// 显现全局搜索框
		this.setState({
			showModel: true
		})
	});

	editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KEY_N, () => {
		// 显现文件搜索框
		this.setState({
			showFileModel: true
		})
	});
	editor.focus();
}
复制代码

二、搜索框实现

搜索框样式主要看自己的需求，我这里只写个简单的搜索框

如何实现搜索框根据内容多少滚动显示列表是我们要考虑的一个问题，经过一番搜索，我锁定了react-infinite-scroller，通过InfiniteScroll API实现滚动下拉效果。代码如下：

<div style={
   {height:'400px', overflow:'auto'}}>
	<InfiniteScroll
			pageStart={0}
			loadMore={true}
			hasMore={true || false}
			loader={null}
			useWindow={false}
	>
		{rowsList}
	</InfiniteScroll>
</div>
复制代码

三、关键字搜索功能

monaco-editor不提供全局搜索功能，如果要在monaco-editor基础上实现全局搜索，我们可以借助单个文件的搜索功能，然后遍历业务系统的所有文件，对每个文件的搜索结果进行汇总实现全局搜索。

这里需要考虑几个问题：

(1)