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 changes
    editor.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 decorations
    const 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'}}>
    <MonacoEditor
        width="800"
        height="600"
        language="javascript"
        theme="vs-dark"
        value={""}
        options={""}
        editorDidMount={handleEditorDidMount}
      />
    </div>
      
  );
}

export default App;

在这里插入图片描述