将 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);

}