@codingame/monaco-editor-wrapper

@codingame/monaco-editor-wrapper ·

Synopsis

Monaco editor wrapper that add some features and improvements to it:

• It uses vscode extensions for all languages, including:
  • Textmate grammars
  • Language configurations
  • Language snippets
  • Language default editor configuration
• Language resources loading are lazy using dynamic imports (compatible with webpack)
• It requires to use vscode themes instead of monaco themes and include a default light theme
• Keybindings and user configuration like in vscode
• Vim and emacs modes
• It configures the workers
• It adds some features:
  • Smart tabs in cobol
  • editor.foldAllAutofoldRegions action
  • A way to register a text model content provider
  • It allow the opening of an overlay editor when navigating to an external file
  • It adds some language aliases

Requirements

Webpack is required and it should be able to import a .wasm file as a file, using either the file-loader or Asset modules

Installation

npm install @codingame/monaco-editor-wrapper

Usage

:warning: You should NEVER import monaco-editor directly in your code. monaco-editor/esm/vs/editor/edcore.main should be used instead or monaco will load all languages/worker and break the loading. There is 2 solutions:

• if webpack is used, a resolve alias can be used:

{
  resolve: {
    alias: {
      'monaco-editor$': require.resolve('monaco-editor/esm/vs/editor/edcore.main')
    }
  }
}

• you can directly use the monaco object exported from this library

Simple usage

The monaco-editor api should be used except for the editor creation. Instead of using monaco.editor.create, you should use the createEditor exposed by this library.

Embed language IntelliSense

By default, monaco-editor contains worker to achieve IntelliSense in css, scss, javascript, typescript, json and html.

To enable them, import the following files:

• json: import '@codingame/monaco-editor-wrapper/dist/jsonContribution'
• javascript/typescript: import '@codingame/monaco-editor-wrapper/dist/typescriptContribution'
• css/scss: import '@codingame/monaco-editor-wrapper/dist/cssContribution'
• html: import '@codingame/monaco-editor-wrapper/dist/htmlContribution'

Additional apis

Highlighting/theme

This library uses vscode themes instead of monaco theme. To add your custom theme, use the addVSCodeTheme method.

:warning: this method returns a promise, you need to wait for it before calling monaco.editor.setTheme.

Default monaco theme shouldn't be used.

User configuration

This library exposed some functions to manage the user global configuration:

• registerDefaultConfigurations allows to register default values for some configuration keys which can be overriden
• updateUserConfiguration Update the user configuration, overrides the default configuration, uses the same syntax as vscode configuration
• getConfiguration allows to get a given configuration key in a given language
• onConfigurationChanged listen to configuration change
• updateEditorKeybindings allows to update the editor keybindings with the same syntax as in vscode, or enabled Emacs/Vim keybindings