Skip to content

masad-frost/monaco-editor-webpack-plugin

This branch is 5 commits ahead of, 110 commits behind microsoft/monaco-editor-webpack-plugin:main.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

fad99d1 · Sep 9, 2020

History

92 Commits
Jun 12, 2018
Oct 12, 2018
Sep 10, 2018
Nov 23, 2018
May 18, 2018
May 18, 2018
Mar 26, 2018
Sep 20, 2018
Aug 10, 2018
Nov 23, 2018
Jan 25, 2019
Sep 9, 2020
Sep 9, 2020
Sep 9, 2020

Repository files navigation

Monaco Editor Webpack Loader Plugin

A plugin to simplify loading the Monaco Editor with webpack.

Installing

npm install monaco-editor-webpack-plugin

Using

  • webpack.config.js:
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  },
  module: {
    rules: [{
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }]
  },
  plugins: [
    new MonacoWebpackPlugin()
  ]
};
  • index.js:
import * as monaco from 'monaco-editor'
// or import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
// if shipping only a subset of the features & languages is desired

monaco.editor.create(document.getElementById('container'), {
  value: 'console.log("Hello, world")',
  language: 'javascript'
});

Options

Options can be passed in to MonacoWebpackPlugin. They can be used to generate a smaller editor bundle by selecting only certain languages or only certain editor features:

  • output (string) - custom output path for worker scripts, relative to the main webpack output.path.
    • default value: ''.
  • languages (string[]) - include only a subset of the languages supported.
    • default value: ['apex', 'azcli', 'bat', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dockerfile', 'fsharp', 'go', 'handlebars', 'html', 'ini', 'java', 'javascript', 'json', 'less', 'lua', 'markdown', 'msdax', 'mysql', 'objective', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'r', 'razor', 'redis', 'redshift', 'ruby', 'rust', 'sb', 'scheme', 'scss', 'shell', 'solidity', 'sql', 'st', 'swift', 'typescript', 'vb', 'xml', 'yaml'].

Some languages share the same web worker. If one of the following languages is included, you must also include the language responsible for instantiating their shared worker:

Language Instantiator
javascript typescript
handlebars html
scss, less css
  • features (string[]) - include only a subset of the editor features.
    • default value: ['accessibilityHelp', 'bracketMatching', 'caretOperations', 'clipboard', 'codeAction', 'codelens', 'colorDetector', 'comment', 'contextmenu', 'coreCommands', 'cursorUndo', 'dnd', 'find', 'folding', 'fontZoom', 'format', 'goToDefinitionCommands', 'goToDefinitionMouse', 'gotoError', 'gotoLine', 'hover', 'inPlaceReplace', 'inspectTokens', 'iPadShowKeyboard', 'linesOperations', 'links', 'multicursor', 'parameterHints', 'quickCommand', 'quickOutline', 'referenceSearch', 'rename', 'smartSelect', 'snippets', 'suggest', 'toggleHighContrast', 'toggleTabFocusMode', 'transpose', 'wordHighlighter', 'wordOperations', 'wordPartOperations'].
    • excluded features: It is also possible to exclude certain default features prefixing them with an exclamation mark '!'.

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.microsoft.com.

When you submit a pull request, a CLA-bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

About

Webpack plugin for the Monaco Editor

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%