Hello,

Is there any way to change AMD headers to be compatible with webpack/browserify?

Are there any plans to support CommonJS, UMD or ECMAscript 6 for the package and external modules in monaco.d.ts?

Hi there. I was delighted to see that you all are now shipping an ESM build of monaco-editor (https://github.com/Microsoft/monaco-editor/issues/18#issuecomment-373086721)! I took it for a spin but encountered what seems to be a bug.

I’ve been using the example monaco + webpack project as reference. The primary editor code loads without issue, but if for some reason web workers fail to load, the web worker fallback throws the following error due to an untranspiled require:

languageFeatures.js:145 TypeError: self.require is not a function
    at eval (editorSimpleWorker.js:395)
    at new Promise_ctor (winjs.base.js:1660)
    at EditorSimpleWorkerImpl.BaseEditorSimpleWorker.loadForeignModule (editorSimpleWorker.js:393)
    at eval (webWorker.js:42)
  ...

monaco-editor version: 0.11.0 Browser: Chrome 64 OS: OSX Steps or JS usage snippet reproducing the issue:

• install monaco-editor 0.11.0
• do something silly that prevents web worker bundles from loading (in my case, missing CORS header)
• check your console

Let me know if there are any other details you’d like me to provide. Thanks!

monaco-editor npm version: 0.7.0 Browser: Mobile Safari, Chrome for iOS OS: iOS

Unfortunately, Monaco doesn't work on iOS due to their strange support to external keyboards: they don't fire events for Arrow Keys and similar function keys, making very hard to work on an iPad.

CodeMirror seems to have solved the problem by not using an hidden <textarea> tag to get the input. Both Monaco and Ace use an hidden textarea and this causes the editor to fail on iOS.

I can provide additional information if needed :)

monaco-editor version: 0.16.0 Browser: Firefox 65.0.1 OS: Windows 10

Steps or JS usage snippet reproducing the issue: Reproducible on the Monaco Website and in the playground.

Edit: It works with the keyboard (Ctrl+Up/Down), but not with the scroll wheel.

The recent ESM build works brilliantly, and it's really exciting to finally have the monaco editor as a first-class citizen of the webpack ecosystem.

Unfortunately, the user needs to make several non-intuitive additions to their webpack config and source code before they can use it:

1. Add additional entry points for each of the required worker scrips
2. Manually create a MonacoEnvironment that references the output paths provided for these entry points
3. Add a webpack.IgnorePlugin() that references an internal file within monaco-editor package
4. (optional) Manually import specific feature modules from deep within the monaco-editor package if the user wants to customise the editor build

None of these steps is obvious without deep knowledge of how monaco-editor code is structured internally, increasing the potential for various unexpected gotchas along the way.

This PR demonstrates a potential technique to simplify importing the Monaco Editor into a webpack project by exporting a webpack plugin from the monaco-editor package. It allows the user to import the editor with just a single addition to their webpack config, and automatically sets up the global environment, compiles additional worker files etc:

webpack.config.js:

const webpack = require('webpack');
const MonacoWebpackPlugin = require('monaco-editor/webpack');

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  },
  plugins: [
    new MonacoWebpackPlugin(webpack)
  ]
};

index.js:

import * as monaco from 'monaco-editor';

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

For a more custom configuration, the user can specify which languages/features they want, as well as the worker scripts output directory:

webpack.config.js:

const webpack = require('webpack');
const MonacoWebpackPlugin = require('monaco-editor/webpack');

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  },
  plugins: [
    new MonacoWebpackPlugin(webpack, {
      languages: ['python'],
      features: ['coreCommands', 'findController'],
      output: './workers/monaco'
    })
  ]
};

index.js:

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';

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

Points for improvement/discussion:

• The monaco-editor vs monaco-editor/esm/vs/editor/editor.apidistinction is a bit confusing: if the primary target is webpack users then you could just set the main monaco-editor export to the editor.api.js version (rather than the current editor.main.js version) and let the plugin handle adding all the features. If you prefer to keep monaco-editor exporting the whole batteries-included editor, you could at least simplify the paths into say monaco-editor vs monaco-editor/custom or something.
• The plugin options are currently not validated (webpack and its libraries typically use ajv for options schema validation)
• The features could better named in webpack/features.js – for the time being I just took the basename of each file but a lot of them include Controller or whatever, and aren't great names for API options
• I haven't updated the readme to include plugin usage instructions
• Worker fallbacks are included as normal webpack imports – under default webpack settings this will generate separate files that are loaded in on-demand via JSONP, which is probably fine, however maybe import() expressions would be better from a code-splitting perspective
• The plugin uses various of the inbuilt webpack plugins, so it needs a reference to the webpack library. I didn't want to introduce an additional "webpack" dependency to monaco-editor, so I've gone with passing a webpack instance into the plugin constructor instead. While this is arguably more flexible, it is susceptible to breaking changes in the webpack library. This could be worked around by adding webpack as a peerDependency of the monaco-editor package, or by extracting the plugin out into its own separate package entirely, which would have its own peerDependency on "webpack"
• There's currently a babel transform that replaces the self.require() call in editorSimpleWorker.js with a global require() call. The babel transform could be removed if the vscode source were changed.

This doesn't impact how the package currently functions of course: the plugin is an optional add-on whose main task is to autogenerate webpack configuration rather than the user doing it manually. This means that if e.g. the user doesn't use webpack, they can just not use the plugin and they can continue as normal.

I realise this is quite a big addition, so if you guys want to re-implement this yourselves or just trash it or whatever that's fine, I just wanted to propose it as a potential avenue to explore. I'm eager to help make this library as easy as possible for users to consume in their projects, and I feel like something like this would be the missing piece of the puzzle. Let me know if there's anything I can do to help!

It looks like this isn't the case, as with Node.js and webpack I'm unable to require('.../editor.main'). Is that correct that there is no support for modulejs or common.js?

Hi,

I want to get the monaco editor up and running in Electron. I found the electron examples for monaco but they won't work in my app.

All I get are errors like:

"loader.js:1817 Uncaught Error: Unrecognized require call"

"angular.js:13920 Error: Check dependency list! Synchronous require cannot resolve module 'fs'. This is the first mention of this module! at e.synchronousRequire (loader.js:1063)"

All is working fine if the loader.js of monaco isn't included as a script file.

The error appears in one of my AngularJS services at the beginning of the file when I try to include the "fs" module:

var fs = require("fs");

But as said: without the monaco loader.js file included this is working fine.

Any suggestions how I can fix that? I want to include the monaco editor in my Electron app and in best cases access it in my AngularJS directives and/or services. Would simplify my app compared to the ACE editor.

Thanks for help.

monaco-editor version: 0.13.1 Browser: Chrome OS: Mac Steps or JS usage snippet reproducing the issue:

Hello there! If there is a way to make editor request completion items after the "enter" or "cmd+v" was typed?

For dot using triggerCharacters: ["."], but how to trigger completion after "enter" or "cmd+v"?

Hi, I am using "setModelMarkers()" to highlight the syntax errors in Monaco editor for my custom language. The message added to the marker is not getting displayed on hovering over the highlighted text.

{
                code: null, 
                source: null,
                severity: 3,
                startLineNumber: 1,
                startColumn: 1,
                endLineNumber: 1,
                endColumn: 4 + 1,
                message: 'Syntax error\n'
 }

The message always shows as "undefined". Please let me know if any thing is missed or done wrong.

monaco-editor version: 0.11.1 Browser: Chrome OS: win 7

monaco-editor-core version: 0.11.3 Browser: chrome OS: windows

I want to write a custom (non-indent based) folding provider. I can see that the method is commented out from standaloneLanguages.ts

/**
 * Register a folding provider
 */
/*export function registerFoldingProvider(languageId: string, provider: modes.FoldingProvider): IDisposable {
	return modes.FoldingProviderRegistry.register(languageId, provider);
}*/

Is this a regression?

How would I go about defining a language in which a blank line is considered a separator between folding regions?

monaco-editor version: 2.0.4 Browser: Chrome OS: Windows 10

Steps or JS usage snippet reproducing the issue: I register a custom language. I am able to select and complete suggestions by typing CTRL-SPACE. This only seems to work at start of line.

Sequence of events. Type CTRL-SPACE -> list of suggestions is provided.
Type followed by a space character and then enter CTRL-SPACE --> "No suggestions is displayed

Hopefully the provided GIF will help to illustrate what I'm seeing

Reproducible in vscode.dev or in VS Code Desktop?

• [X] Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• [x] Not reproducible in the monaco editor playground

Monaco Editor Playground Code

html 

<button id="dispose">b.dispose</button>
<div id="container" style="height: 300px"></div>
<div id="container2" style="height: 300px"></div>

js

const a = monaco.editor.create(document.getElementById('container'), {
	value: "function hello() {\n\talert('Hello world!');\n}",
	language: 'javascript'
});
  a.addCommand(
          /** command */
          monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS,
          () => {
            const model = a.getModel();
              console.log('model', model.id);
 
}
        );
const b = monaco.editor.create(document.getElementById('container2'), {
	value: "function hello() {\n\talert('Hello world!');\n}",
	language: 'javascript'
});

b.addCommand(
          /** command */
          monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS,
          () => {
            const model = b.getModel();
              console.log('model', model.id);
            
}
        );

        document.getElementById('dispose').onclick=()=>{
            b.dispose();
        }

### Reproduction Steps

1. click button b.dispose
2. a instance press CtrlCmd +  KeyS get model is null;



### Actual (Problematic) Behavior

i'm dispose instance b , why  instance a content not get ?

### Expected Behavior

i'm dispose instance b , normal get instance a content;

### Additional Context

_No response_

This commit implements the functionality requested in #3155. The work is done based on the implementation for the the css, html and json namespaces.

In this case the ModeConfiguration interface implementation has the following options:

export interface ModeConfiguration {
	/**
	 * Defines whether the built-in completionItemProvider is enabled.
	 */
	readonly completionItems?: boolean;

	/**
	 * Defines whether the built-in hoverProvider is enabled.
	 */
	readonly hovers?: boolean;

	/**
	 * Defines whether the built-in documentSymbolProvider is enabled.
	 */
	readonly documentSymbols?: boolean;

	/**
	 * Defines whether the built-in definitions provider is enabled.
	 */
	readonly definitions?: boolean;

	/**
	 * Defines whether the built-in references provider is enabled.
	 */
	readonly references?: boolean;

	/**
	 * Defines whether the built-in references provider is enabled.
	 */
	readonly documentHighlights?: boolean;

	/**
	 * Defines whether the built-in rename provider is enabled.
	 */
	readonly rename?: boolean;

	/**
	 * Defines whether the built-in diagnostic provider is enabled.
	 */
	readonly diagnostics?: boolean;

	/**
	 * Defines whether the built-in document formatting range edit provider is enabled.
	 */
	readonly documentRangeFormattingEdits?: boolean;

	/**
	 * Defines whether the built-in signature help provider is enabled.
	 */
	readonly signatureHelp?: boolean;

	/**
	 * Defines whether the built-in onType formatting edit provider is enabled.
	 */
	readonly onTypeFormattingEdits?: boolean;

	/**
	 * Defines whether the built-in code actions provider is enabled.
	 */
	readonly codeActions?: boolean;

	/**
	 * Defines whether the built-in inlay hints provider is enabled.
	 */
	readonly inlayHints?: boolean;
}

There are some notes though:

The setupMode implementations for css, html and json return an IDisposable containing all disposable elements created during the function execution. But the setupMode implementation for typescript returns (...uris: Uri[]) => Promise<TypeScriptWorker> containing the worker function. So I implemented the code to collect all disposable elements, but it's useless so far, waiting to be reviewed in future commit.

A custom TypeScript worker factory function gets passed TypeScriptWorker, ts, and libFileMap. It also exports create using ESM. However, this can’t be used, because the custom worker factory is only called if a custom worker path is defined.

Exposing these members, means a worker can be defined using ESM.

A practical use case:

/**
 * @typedef {import('monaco-editor').languages.typescript.CompilerOptions} CompilerOptions
 * @typedef {import('monaco-editor').languages.typescript.IExtraLibs} IExtraLibs
 * @typedef {import('monaco-editor').languages.typescript.InlayHintsOptions} InlayHintsOptions
 * @typedef {import('monaco-editor').languages.typescript.TypeScriptWorker} TypeScriptWorker
 * @typedef {import('monaco-editor').worker.IWorkerContext} IWorkerContext
 * @typedef {import('typescript').LanguageServiceHost} LanguageServiceHost
 *
 * @typedef {object} CreateData
 * @property {CompilerOptions} compilerOptions The TypeScript compiler options configured by the user.
 * @property {string} customWorkerPath The path to a custom worker.
 * @property {IExtraLibs} extraLibs Additional libraries to load.
 * @property {InlayHintsOptions} inlayHintsOptions The TypeScript inlay hints options.
 *
 * @typedef {TypeScriptWorker & LanguageServiceHost} MDXWorker
 * @typedef {new (ctx: IWorkerContext, createData: CreateData) => MDXWorker} TypeScriptWorkerClass
 */

import {createMdxLanguageService} from '@mdx-js/language-service'
// @ts-expect-error This module is untyped.
import {initialize} from 'monaco-editor/esm/vs/editor/editor.worker.js'
// @ts-expect-error This module is untyped.
import {create} from 'monaco-editor/esm/vs/language/typescript/ts.worker.js'

/**
 * @param {TypeScriptWorkerClass} TypeScriptWorker
 * @returns {TypeScriptWorkerClass} A custom TypeScript worker which knows how to handle MDX.
 */
function worker(TypeScriptWorker) {
  return class MDXWorker extends TypeScriptWorker {
    _languageService = createMdxLanguageService(
      // @ts-expect-error This is globally defined in the worker.
      ts,
      this
    )
  }
}

// @ts-expect-error This is missing in the Monaco type definitions.
self.customTSWorkerFactory = worker

// Trick the TypeScript worker into using the `customTSWorkerFactory`
self.importScripts = () => {}

self.onmessage = () => {
  initialize(
    /**
     * @param {IWorkerContext} ctx
     * @param {CreateData} createData
     * @returns {MDXWorker} The MDX TypeScript worker.
     */
    (ctx, createData) => create(ctx, {...createData, customWorkerPath: true})
  )
}

becomes:

/**
 * @typedef {import('monaco-editor').languages.typescript.CompilerOptions} CompilerOptions
 * @typedef {import('monaco-editor').languages.typescript.IExtraLibs} IExtraLibs
 * @typedef {import('monaco-editor').languages.typescript.InlayHintsOptions} InlayHintsOptions
 * @typedef {import('monaco-editor').languages.typescript.TypeScriptWorker} TypeScriptWorker
 * @typedef {import('monaco-editor').worker.IWorkerContext} IWorkerContext
 *
 * @typedef {object} CreateData
 * @property {CompilerOptions} compilerOptions The TypeScript compiler options configured by the user.
 * @property {string} customWorkerPath The path to a custom worker.
 * @property {IExtraLibs} extraLibs Additional libraries to load.
 * @property {InlayHintsOptions} inlayHintsOptions The TypeScript inlay hints options.
 */

import {createMdxLanguageService} from '@mdx-js/language-service'
import {
  initialize,
  ts,
  TypeScriptWorker
  // @ts-expect-error This module is untyped.
} from 'monaco-editor/esm/vs/language/typescript/ts.worker.js'

class MDXWorker extends TypeScriptWorker {
  _languageService = createMdxLanguageService(
    ts,
    // @ts-expect-error This is missing in the Monaco type definitions.
    this
  )
}

self.onmessage = () => {
  initialize(
    /**
     * @param {IWorkerContext} ctx
     * @param {CreateData} createData
     * @returns {MDXWorker} The MDX TypeScript worker.
     */
    (ctx, createData) =>
      // @ts-expect-error This is missing in the Monaco type definitions.
      new MDXWorker(ctx, createData)
  )
}

Reproducible in vscode.dev or in VS Code Desktop?

• [X] Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• [ ] Not reproducible in the monaco editor playground

Monaco Editor Playground Code

monaco.editor.create(document.getElementById('container'), {
	value: [
        '<!DOCTYPE html>',
        '<head>',
        '</head>',
        '<body>',
        '<script type="importmap">',
        '{',
        '  "imports": {',
        '    "something": "somewhere"',
        '  }',
        '}',
        '</script>',
        '</body>',
        '</html>',
        ].join('\n'),
	language: 'html'
});

Reproduction Steps

• run the playground code
• in the rendered editor, navigate the cursor to the end of the "something": "somewhere"', line
• try inserting a new-line

Actual (Problematic) Behavior

Once inside that script block which has type=importmap, the following error is being printed into the console:

Error: Language id "vs.editor.nullLanguage" is not configured nor known

Editing partially works, but, for example, I can't insert a new-line.

Expected Behavior

I should be able to edit the code inside a script block with type=importmap, and no exceptions should be thrown and printed into the console.

Additional Context

No response

Reproducible in vscode.dev or in VS Code Desktop?

• [X] Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• [X] Not reproducible in the monaco editor playground

Monaco Editor Playground Code

No response

Reproduction Steps

Here is the code pen for a min repro - https://codepen.io/cheriequek/pen/XWBjKOX I was unable to use the monaco editor playground as it did not seem to allow me to load the fluent libraries.

Load the codepen and wait for a little bit (need to wait for monaco to load) Then click Load editor When the editor loads, attempt to type something that would bring up the intellisense suggestions (eg. console)

Actual (Problematic) Behavior

The intellisense suggestions show up in the wrong location and most of it is not visible.

Expected Behavior

I expect to see the intellisense suggestions (and other widgets) to respect the size of the panel and be fully visible within the panel width.

Additional Context

I've seen this other issue which is similar - https://github.com/microsoft/monaco-editor/issues/2503. and have attempted other user's workarounds and none of them seem to work. I've opened a different issue mainly because the positioning issue seems to be different from the screenshots provided.

Context

• [X] This issue is not a bug report. (please use a different template for reporting a bug)
• [X] This issue is not a duplicate of an existing issue. (please use the search to find existing issues)

Description

I am passing my sdk code as extra library.i need to get AST of code on editor so that i will use it to vaidate with my code. i didn't get any method to get AST.if any method is available please let me know