# monaco-editor-textmate

> Wire monaco-textmate with monaco-editor

Latest version **4.0.0** (published 2022-09-27) · MIT license · 8.0K weekly downloads

## Install

```sh
npm install monaco-editor-textmate
pnpm add monaco-editor-textmate
yarn add monaco-editor-textmate
bun add monaco-editor-textmate
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.0 |
| Published | 2022-09-27 |
| First published | 2018-05-07 |
| Weekly downloads | 8.0K |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 16.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 131 |
| Author | Neek Sandhu |
| Maintainers | sweetslush |
| Keywords | monaco, editor, textmate, tm, grammar, vscode |

## Links

- npm: https://www.npmjs.com/package/monaco-editor-textmate
- Repository: https://github.com/NeekSandhu/monaco-editor-textmate
- Homepage: https://github.com/NeekSandhu/monaco-editor-textmate#readme
- Issues: https://github.com/NeekSandhu/monaco-editor-textmate/issues
- npm.io page: https://npm.io/package/monaco-editor-textmate

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 4.0.0 (latest) — 2022-09-27
- 3.0.0 — 2021-06-19
- 2.2.2 — 2020-05-11
- 2.2.1 — 2019-10-18
- 2.2.0 — 2019-08-05
- 2.1.1 — 2019-01-17
- 2.0.1 — 2018-10-03
- 2.0.0 — 2018-05-21
- 1.0.3 — 2018-05-20
- 1.0.2 — 2018-05-17
- 1.0.1 — 2018-05-07
- 1.0.0 — 2018-05-07

## README

# Wire `monaco-textmate` with `monaco-editor`

**Note:** *The latest version of this library requires `monaco-editor` version `0.21.2` and up. If you wish to use an older version of `monaco-editor` `0.19.x` or below, you should use an older version `2.2.2` of this library.*

## Install

```sh
npm i monaco-editor-textmate
```

Please install peer dependencies if you haven't already
```sh
npm i monaco-textmate monaco-editor onigasm
```
## Usage

```javascript
import { loadWASM } from 'onigasm' // peer dependency of 'monaco-textmate'
import { Registry } from 'monaco-textmate' // peer dependency
import { wireTmGrammars } from 'monaco-editor-textmate'

export async function liftOff() {
    await loadWASM(`path/to/onigasm.wasm`) // See https://www.npmjs.com/package/onigasm#light-it-up

    const registry = new Registry({
        getGrammarDefinition: async (scopeName) => {
            return {
                format: 'json',
                content: await (await fetch(`static/grammars/css.tmGrammar.json`)).text()
            }
        }
    })

    // map of monaco "language id's" to TextMate scopeNames
    const grammars = new Map()
    grammars.set('css', 'source.css')
    grammars.set('html', 'text.html.basic')
    grammars.set('typescript', 'source.ts')

    // monaco's built-in themes aren't powereful enough to handle TM tokens
    // https://github.com/Nishkalkashyap/monaco-vscode-textmate-theme-converter#monaco-vscode-textmate-theme-converter
    monaco.editor.defineTheme('vs-code-theme-converted', {
        // ... use `monaco-vscode-textmate-theme-converter` to convert vs code theme and pass the parsed object here
    });
    
    var editor = monaco.editor.create(document.getElementById('container'), {
        value: [
            'html, body {',
            '    margin: 0;',
            '}'
        ].join('\n'),
        language: 'css', // this won't work out of the box, see below for more info,
        theme: 'vs-code-theme-converted' // very important, see comment above
    })
    
    await wireTmGrammars(monaco, registry, grammars, editor)
}
```

## Limitation

**Version Issue!**

The latest version of this package requires `monaco-editor` version `0.21.1` and up. Version `2.2.2`
was the last version to support `monaco-editor` version `0.19.x` or below.

`monaco-editor` distribution comes with built-in tokenization support for few languages. Because of this `monaco-editor-textmate` [cannot
be used with `monaco-editor`](https://github.com/Microsoft/monaco-editor/issues/884) without some modification, see explanation of this problem [here](https://github.com/Microsoft/monaco-editor/issues/884#issuecomment-389778611).

### Solution

To get `monaco-editor-textmate` working with `monaco-editor`, you're advised to use Webpack with [`monaco-editor-webpack-plugin`](https://www.npmjs.com/package/monaco-editor-webpack-plugin) which allows you to control which of "built-in" languages should `monaco-editor` use/bundle, leaving the rest.
With that control you must *exclude* any/all languages for which you'd like to use TextMate grammars based tokenization instead.

## License
MIT

---
_Source: https://npm.io/package/monaco-editor-textmate · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._