将 monaco-editor 和 monaco-languageclient 包装为 React

Question

我需要创建一个 React 组件，它集成了 Microsoft 的 Monaco 编辑器和 TypeFox 的 monaco-languageclient。目标是让该组件能够通过语言服务器协议与语言服务器进行通信。import React, { useEffect, useRef, useState } from 'react'import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';import _ from 'lodash'import { listen } from 'vscode-ws-jsonrpc';import {  CloseAction,  createConnection,  ErrorAction,  MonacoLanguageClient,  MonacoServices} from 'monaco-languageclient';import normalizeUrl from 'normalize-url';import ReconnectingWebSocket from 'reconnecting-websocket';function createLanguageClient(connection) {  return new MonacoLanguageClient({    name: "Sample Language Client",    clientOptions: {      // use a language id as a document selector      documentSelector: [ 'json' ],      // disable the default error handler      errorHandler: {        error: () => ErrorAction.Continue,        closed: () => CloseAction.DoNotRestart      }    },    // create a language client connection from the JSON RPC connection on demand    connectionProvider: {      get: (errorHandler, closeHandler) => {        return Promise.resolve(createConnection(connection, errorHandler, closeHandler))      }    }  });}function createUrl(path) {  // const protocol = 'ws';  return normalizeUrl("ws://localhost:3000/sampleServer")  // return normalizeUrl(`${protocol}://${location.host}${location.pathname}${path}`);}function createWebSocket(url) {  const socketOptions = {    maxReconnectionDelay: 10000,    minReconnectionDelay: 1000,    reconnectionDelayGrowFactor: 1.3,    connectionTimeout: 10000,    maxRetries: Infinity,    debug: false  };  return new ReconnectingWebSocket(url, undefined, socketOptions);}