nemani / monaco-editor-wrapper

@codingame/monaco-editor-wrapper ·

Synopsis

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

• It uses VS Code 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 using VS Code themes instead of Monaco themes and include a default light theme
• Keybindings and user configuration like in VS Code
• 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 and a editor open handler
  • It allows 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

⚠️ You should NEVER import monaco-editor directly in your code. monaco-editor/esm/vs/editor/editor.api should be used instead or Monaco will load all languages/worker and break the loading. There are 2 solutions:

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

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

• 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 VS Code themes instead of Monaco theme. To add your custom theme, use the addVSCodeTheme method.

⚠️ 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 registering default values for some configuration keys which can be overridden
• updateUserConfiguration Update the user configuration, overrides the default configuration, uses the same syntax as VS Code 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 VS Code, or enabled Emacs/Vim keybindings