https://github.com/typefox/monaco-components

Monaco Editor and Language Client Wrapper, plus Monaco Editor React Component
https://github.com/typefox/monaco-components

monaco monaco-editor monaco-languageclient monaco-vscode-api react

Last synced: 4 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/typefox/monaco-components
• Owner: TypeFox
• License: mit
• Archived: true
• Created: 2022-01-17T21:33:48.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-03-22T11:07:11.000Z (10 months ago)
• Last Synced: 2024-09-26T07:22:09.995Z (4 months ago)
• Topics: monaco, monaco-editor, monaco-languageclient, monaco-vscode-api, react
• Language: TypeScript
• Homepage:
• Size: 1.41 MB
• Stars: 43
• Watchers: 7
• Forks: 13
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Monaco Editor Wrapper and Monaco Editor React Component

**These projects have been migrated to [monaco-languageclient repo](https://github.com/TypeFox/monaco-languageclient)**

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](./packages/monaco-editor-wrapper/README.md) + Language Client: Wrapped [monaco-editor](https://github.com/microsoft/monaco-editor) with the capability to plug-in [monaco-languageclient](https://github.com/TypeFox/monaco-languageclient) to connect to languages servers locally running (web worker) or remotely running (web socket).

- [Monaco Editor React Component](./packages/monaco-editor-react/README.md): Monaco Editor React Component enclosing the **Monaco Editor Wrapper**

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

**Important**: Monaco Editor Workers has been moved to its own [repo](https://github.com/TypeFox/monaco-editor-workers).

## Getting Started

We recommend using [Volta](https://volta.sh/) 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:

```bash

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:

```bash

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:

```bash

npm run watch

```

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