TypeFox / monaco-components

Monaco Editor and Language Client Wrapper, plus Monaco Editor React Component

Monaco Editor Wrapper and Monaco Editor React Component

These projects have been migrated to monaco-languageclient repo

This repository started as a Lit component for Monaco Editor, but it has transformed into a wrapper for monaco-editor, monaco-languageclient and @codingame/monaco-vscode-api and now features a react component (@typefox/monaco-editor-react) that encapsulates the monaco-editor-wrapper.

Packages

There are two npm packages generated from this repository:

• Monaco Editor Wrapper + Language Client: Wrapped monaco-editor with the capability to plug-in monaco-languageclient to connect to languages servers locally running (web worker) or remotely running (web socket).
• Monaco Editor React Component: Monaco Editor React Component enclosing the Monaco Editor Wrapper

Additionally you can find a private examples packages containing all examples that are served by Vite (see next chapter).

Important: Monaco Editor Workers has been moved to its own repo.

Getting Started

We recommend using Volta to ensure your node & npm are on known good versions.

If you have node.js LTS available, then from the root of the project run:

npm i
npm run build

If you get an error with npm i regarding tree-mending, you can run npm ci to clean things up from previous installations and continue.

Afterwards, launch the Vite development server:

npm run dev

If you want to change dependent code in the examples (monaco-editor-wrapper and @typefox/monaco-editor-react), you have to watch code changes in parallel:

npm run watch

You can find examples (manual human testing) here index.html. They can be used once Vite is running. You can reach it once started on http://localhost:20001.