Negatory. Postpone Mission.

    monaco-editor-textmate-test
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.1 • Public • Published

    Wire monaco-textmate with monaco-editor

    Install

    npm i monaco-editor-textmate

    Please install peer dependencies if you haven't already

    npm i monaco-textmate monaco-editor onigasm

    Usage

    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')
     
        await wireTmGrammars(monaco, registry, grammars)
     
        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
        })
    }

    Limitation

    monaco-editor distribution comes with built-in tokenization support for few languages. Because of this monaco-editor-textmate cannot be used with monaco-editor without some modification, see explanation of this problem here.

    Solution

    To get monaco-editor-textmate working with monaco-editor, you're advised to use Webpack with 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

    Install

    npm i monaco-editor-textmate-test

    DownloadsWeekly Downloads

    2

    Version

    2.1.1

    License

    MIT

    Unpacked Size

    16 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar