React学习二：在React项目使用codemirror

在React项目使用codemirror

本来在网上搜到的是使用 react-codemirror2 + codemirror，但是怎么弄都报错，然后也没有搜到解决方案。
于是就想看看有没有其他的方案
结果发现还真是有，但是原理咱也不懂，直接用吧
就是这个：https://github.com/uiwjs/react-codemirror

一、安装依赖

// 核心包
npm install @uiw/react-codemirror 
// 支持的语言类型
npm install @codemirror/lang-java 
// 文本编辑器的主题
npm install @codemirror/theme-one-dark

二、创建一个普通组件

import React, { useState } from 'react'
import CodeMirror from '@uiw/react-codemirror'
import { java } from '@codemirror/lang-java'
import { oneDark } from '@codemirror/theme-one-dark'

const MyCodeEditor = () => {
	const [code, setCode] = useState(`// 输入你的Groovy代码...
import java.util.*;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.alibaba.fastjson.TypeReference;

def execute(paramMap){
  try{


  }cache(Exception e){
    e.getMessage();
  }

}

`)

	return (
		<CodeMirror
			value={code}
			height='200px'
			extensions={[java()]} // 这里可以尝试替换为 Groovy 支持
			theme={oneDark}
			onChange={(value, viewUpdate) => {
				console.log(value, viewUpdate)
				setCode(value)
			}}
		/>
	)
}

export default MyCodeEditor

效果图

@uiw/react-codemirror 的一些信息

一、地址

Github地址 https://github.com/uiwjs/react-codemirror

二、支持的语言类型

@codemirror/legacy-modes/mode/cpp =>      		@codemirror/lang-cpp
@codemirror/legacy-modes/mode/html =>    	 	@codemirror/lang-html
@codemirror/legacy-modes/mode/java =>	 		@codemirror/lang-java
@codemirror/legacy-modes/mode/javascript => 	@codemirror/lang-javascript
@codemirror/legacy-modes/mode/json => 			@codemirror/lang-json
@codemirror/legacy-modes/mode/lezer => 			@codemirror/lang-lezer
@codemirror/legacy-modes/mode/markdown => 		@codemirror/lang-markdown
@codemirror/legacy-modes/mode/php => 			@codemirror/lang-php
@codemirror/legacy-modes/mode/python =>	 		@codemirror/lang-python
@codemirror/legacy-modes/mode/rust => 			@codemirror/lang-rust
@codemirror/legacy-modes/mode/sql => 			@codemirror/lang-sql
@codemirror/legacy-modes/mode/xml => 			@codemirror/lang-xml
@codemirror/legacy-modes/mode/css => 			@codemirror/lang-less
@codemirror/legacy-modes/mode/sass => 			@codemirror/lang-sass
@codemirror/legacy-modes/mode/clojure =>		@nextjournal/lang-clojure
@codemirror/legacy-modes/mode/clike => 			@replit/codemirror-lang-csharp

前边应该是是之前的包，后边是现在的包。使用就是这样使用的

import { java } from '@codemirror/lang-java'

extensions={[java()]} 

三、主题

支持的主题也挺多的
列表：

@uiw/codemirror-themes-all	
@uiw/codemirror-theme-abcdef	
@uiw/codemirror-theme-abyss	
@uiw/codemirror-theme-androidstudio	
@uiw/codemirror-theme-andromeda	
@uiw/codemirror-theme-atomone	
@uiw/codemirror-theme-aura	
@uiw/codemirror-theme-basic	
@uiw/codemirror-theme-bbedit	
@uiw/codemirror-theme-bespin	
@uiw/codemirror-theme-console	
@uiw/codemirror-theme-copilot	
@uiw/codemirror-theme-duotone	
@uiw/codemirror-theme-dracula	
@uiw/codemirror-theme-darcula	
@uiw/codemirror-theme-eclipse
@uiw/codemirror-theme-github
@uiw/codemirror-theme-gruvbox-dark	
@uiw/codemirror-theme-kimbie	
@uiw/codemirror-theme-kimbie	
@uiw/codemirror-theme-material	
@uiw/codemirror-theme-monokai	
@uiw/codemirror-theme-noctis-lilac	
@uiw/codemirror-theme-nord	
@uiw/codemirror-theme-okaidia
@uiw/codemirror-theme-quietlight	
@uiw/codemirror-theme-red	
@uiw/codemirror-theme-solarized	
@uiw/codemirror-theme-sublime	
@uiw/codemirror-theme-tokyo-night	
@uiw/codemirror-theme-tokyo-night-storm	
@uiw/codemirror-theme-tokyo-night-day	
@uiw/codemirror-theme-vscode	
@uiw/codemirror-theme-white	
@uiw/codemirror-theme-tomorrow-night-blue	
@uiw/codemirror-theme-xcode

例如：

npm install @uiw/codemirror-theme-github --save 

import { githubLight } from '@uiw/codemirror-theme-github'

效果：