React 中如何使用 Monaco

Monaco 是微软开源的一个编辑器，VSCode 也是基于 Monaco 进行开发的。如果在 React 中如何使用 Monaco，本文将介绍如何在 React 中引入 Monaco。

安装 React 依赖

yarn add react-app-rewired --dev
yarn add monaco-editor-webpack-plugin --dev
yarn add monaco-editor
yarn add react-monaco-editor

创建Webpack 配置文件并添加插件

在项目的根目录下创建 config-overrides.js

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');module.exports = function override(config, env) {config.plugins.push(new MonacoWebpackPlugin({languages: ['json']}));return config;
}

引入 Monaco 组件

核心函数 handleEditorDidMount，行选中时，在行尾添加一句话，通过事件监听函数 onDidChangeCursorSelection 和 Decoration 进行实现

import logo from './logo.svg';
import './App.css';
import MonacoEditor from 'react-monaco-editor';
import { useRef, useState,useEffect }  from 'react';function App() {const editorRef = useRef(null);const monacoRef = useRef(null);const decorationsRef = useRef([]);const handleEditorDidMount = (editor, monaco) => {editorRef.current = editor;monacoRef.current = monaco;// Add an event listener for cursor position changeseditor.onDidChangeCursorSelection(() => {const selection = editor.getSelection();// if (selection.isEmpty()) {//   // Remove decorations if selection is empty//   editor.deltaDecorations(decorationsRef.current, []);//   return;// }const lineNumber = selection.positionLineNumber;const lineContent = editor.getModel().getLineContent(lineNumber);if (lineContent !== "") {// Add decoration if the line starts with 'var'const newDecorations = editor.deltaDecorations(decorationsRef.current, [{range: new monaco.Range(lineNumber, 1, lineNumber, 1),options: {isWholeLine: true,afterContentClassName: 'myAfterContentDecoration'}}]);decorationsRef.current = newDecorations;} else {// Remove decorations if the line does not start with 'var'editor.deltaDecorations(decorationsRef.current, []);}});};useEffect(() => {// Define custom styles for the decorationsconst style = document.createElement('style');style.innerHTML = `.myAfterContentDecoration::after {content: ' // 备注';color: green;font-weight: bold;}`;document.head.appendChild(style);}, []);return (<div style={{'margin':'100px auto', 'width': '800px'}}><MonacoEditorwidth="800"height="600"language="javascript"theme="vs-dark"value={""}options={""}editorDidMount={handleEditorDidMount}/></div>);
}export default App;

总结

Monaco 功能非常强大，API 也比较复杂，后面后陆续看看它的 API 如何使用。