description: Can you reproduce the bug in [the monaco editor playground](https://microsoft.github.io/monaco-editor/playground.html)? A minimal reproducible example will make it significantly easier for us to get this bug fixed.
description: Can you reproduce the bug in [the monaco editor playground](https://microsoft.github.io/monaco-editor/playground.html)? A minimal reproducible example will make it significantly easier for us to get this bug fixed.
options:
options:
- label: Not reproducible in [the monaco editor playground](https://microsoft.github.io/monaco-editor/playground.html)
- label: Not reproducible in [the monaco editor playground](https://microsoft.github.io/monaco-editor/playground.html)
+ - type: textarea
+ id: playgroundLink
+ attributes:
+ label: Monaco Editor Playground Link
+ description: Please share the link to the [monaco editor playground](https://microsoft.github.io/monaco-editor/playground.html) after you entered your example. In case of regressions, please also provide the first broken version.
+
- type: textarea
- type: textarea
id: playgroundSourceCode
id: playgroundSourceCode
attributes:
attributes:
label: Monaco Editor Playground Code
label: Monaco Editor Playground Code
- description: Please provide the code to reproduce in the [monaco editor playground](https://microsoft.github.io/monaco-editor/playground.html)
+ description: Please provide the code from the monaco editor playground example.
description: Please describe your feature request.
description: Please describe your feature request.
+
+ - type: textarea
+ id: relevantCodePlaygroundLink
+ attributes:
+ label: Monaco Editor Playground Link
+ description: If applicable, please share the link to a relevant [monaco editor playground sample](https://microsoft.github.io/monaco-editor/playground.html)
+
+ - type: textarea
+ id: releveantCode
+ attributes:
+ label: Monaco Editor Playground Code
+ description: If applicable, please share the code from the monaco editor playground sample.
closeComment: "This issue has been closed automatically because it needs more information and has not had recent activity. See also our [issue reporting](https://aka.ms/vscodeissuereporting) guidelines.\n\nHappy Coding!"
closeComment: "This issue has been closed automatically because it needs more information and has not had recent activity. See also our [issue reporting](https://aka.ms/vscodeissuereporting) guidelines.\n\nHappy Coding!"
+- [@Jozebel11 (Joseph Hardwicke)](https://github.com/Jozebel11): Add position styling to playground container to equal 'relative' [PR #3446](https://github.com/microsoft/monaco-editor/pull/3446)
+- [@kirjs (Kirill Cherkashin)](https://github.com/kirjs): Fix broken link in the changelog [PR #3382](https://github.com/microsoft/monaco-editor/pull/3382)
+- [@tr3ysmith (Trey Smith)](https://github.com/tr3ysmith): Fix possible duplicate of editors in vite sample [PR #3390](https://github.com/microsoft/monaco-editor/pull/3390)
+
+## [0.34.1]
+
+- Adds API to register global actions, commands, or keybinding rules
+
## [0.34.0]
## [0.34.0]
- Introduction of `IEditor.createDecorationsCollection` API
- Introduction of `IEditor.createDecorationsCollection` API
@@ -492,7 +537,7 @@ Contributions to `monaco-typescript`:
- Many improvements in `monaco-typescript`: support for "deprecated" tags, API to participate in the web worker, improved lib.d.ts resolving.
- Many improvements in `monaco-typescript`: support for "deprecated" tags, API to participate in the web worker, improved lib.d.ts resolving.
- New tokenization support for: Julia, Scala, Lexon, Terraform HCL, Dart, Systemverilog.
- New tokenization support for: Julia, Scala, Lexon, Terraform HCL, Dart, Systemverilog.
- New semantic tokens provider [sample on the playground](https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-semantic-tokens-provider-example).
- New semantic tokens provider [sample on the playground](https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-semantic-tokens-provider-example).
-- New [shadow dom sample](https://github.com/microsoft/monaco-editor-samples/tree/master/browser-amd-shadow-dom)
+- New [shadow dom sample](https://github.com/microsoft/monaco-editor/tree/main/samples/browser-amd-shadow-dom)
- New `overflowWidgetsDomNode` constructor option to pass in a parent for overflowing widgets.
- New `overflowWidgetsDomNode` constructor option to pass in a parent for overflowing widgets.
- New `minimap.size` option: `proportional`, `fill`, `fit`.
- New `minimap.size` option: `proportional`, `fill`, `fit`.
- New `OnTypeRename` provider and option `renameOnType`.
- New `OnTypeRename` provider and option `renameOnType`.
-Checkout [MAINTAINING.md](./MAINTAINING.md) for common maintaining tasks.
+## Source Code Structure
-## A brief explanation on the source code structure
+It is important to understand that the Monaco Editor _Core_ is built directly from the [VS Code source code](https://github.com/microsoft/vscode).
+The Monaco Editor then enhances the Monaco Editor Core with some basic language features.
-This repository contains source code only for Monaco Editor Languages, the core editor source lives in the [vscode repository](https://github.com/microsoft/vscode).
+This diagram describes the relationships between the repositories and the npm packages:
-| [vscode](https://github.com/microsoft/vscode) | [monaco-editor-core](https://www.npmjs.com/package/monaco-editor-core) | editor core functionality (language agnostic) is shipped out of vscode. |
-| [monaco-editor](https://github.com/microsoft/monaco-editor) | [monaco-editor](https://www.npmjs.com/package/monaco-editor) | the Monaco Editor. |
+
+
+By default, `monaco-editor-core` is installed from npm (through the initial `npm install`), so you can work on Monaco Editor language features without having to build the core editor / VS Code.
+The nightly builds build a fresh version of `monaco-editor-core` from the `main` branch of VS Code.
+For a stable release, the commit specified in `vscodeRef` in [package.json](./package.json) specifies the commit of VS Code that is used to build `monaco-editor-core`.
## Contributing a new tokenizer / a new language
## Contributing a new tokenizer / a new language
@@ -25,80 +27,99 @@ Please understand that we only bundle languages with the monaco editor that have
import './{myLang}/{myLang}.contribution';
import './{myLang}/{myLang}.contribution';
```
```
-## Running the editor from source
+## Debugging / Developing The Core Editor
-You need to have all the build setup of VS Code to be able to build the Monaco Editor.
+To debug core editor issues.
-- Install all the [prerequisites](https://github.com/microsoft/vscode/wiki/How-to-Contribute#prerequisites)
+This can be done directly from the VS Code repository and does not involve the monaco editor repository.
-```bash
-# clone vscode-loc repository for localized string resources
+- Now you can set breakpoints and change the source code
-# install npm deps for monaco-editor
-/src/monaco-editor> npm install .
+ 
-# compile and bundle all plugins
-/src/monaco-editor> npm run release
+- Optionally, you can build `monaco-editor-core` and link it to the monaco editor repository:
-# start a local http server in the background
-/src/monaco-editor> npm run simpleserver
-```
+ ```bash
+ # builds out-monaco-editor-core
+ > yarn gulp editor-distro
-Open [http://localhost:8080/monaco-editor/test/manual/?editor=src](http://localhost:8080/monaco-editor/test/manual/?editor=src) to run.
+ > cd out-monaco-editor-core
+ > npm link
+ > cd ../path/to/monaco-editor
-## Running the editor tests
+ # symlinks the monaco-editor-core package to the out-monaco-editor-core folder we just built
+ > npm link monaco-editor-core
+ ```
-```bash
-# create a local release
-/src/monaco-editor> npm run release
+## Debugging / Developing Language Support
-# run unit tests
-/src/monaco-editor> npm run test
+To debug bundled languages, such as JSON, HTML or TypeScript/JavaScript.
-# compile the webpack plugin
-/src/monaco-editor> npm run compile --prefix webpack-plugin
+- Clone the [monaco editor repository](https://github.com/microsoft/monaco-editor): `git clone https://github.com/microsoft/monaco-editor`
+- Open the repository in VS Code: `code monaco-editor`
+- Run `npm install`
+- Select and run the launch configuration "Monaco Editor Playground" (this might take a while, as it compiles the sources):
-# package using the webpack plugin
-/src/monaco-editor> npm run package-for-smoketest --prefix webpack-plugin
+ 
-# run the smoketest
-/src/monaco-editor> npm run smoketest-debug
-```
+- Now you can set breakpoints and change the source code
-> Tip: All folders must be cloned as siblings.
+ 
-> Tip: When running the test pages, use the control panel in the top right corner to switch between running from source, running from npm or running from the local release:
-The Monaco Editor is the code editor which powers [VS Code](https://github.com/microsoft/vscode), with the features better described [here](https://code.visualstudio.com/docs/editor/editingevolved).
-
-Please note that this repository contains no source code for the code editor, it only contains the scripts to package everything together and ship the `monaco-editor` npm module.
+The Monaco Editor is the fully featured code editor from [VS Code](https://github.com/microsoft/vscode). Check out the [VS Code docs](https://code.visualstudio.com/docs/editor/editingevolved) to see some of the supported features.
-Try the editor out [on our website](https://microsoft.github.io/monaco-editor/index.html).
+Try out the editor and see various examples [in our interactive playground](https://microsoft.github.io/monaco-editor/playground.html).
+
+The playground is the best way to learn about how to use the editor, which features is supports, to try out different versions and to create minimal reproducible examples for bug reports.
## Installing
## Installing
```
```
-$ npm install monaco-editor
+> npm install monaco-editor
```
```
You will get:
You will get:
-- inside `esm`: ESM version of the editor (compatible with e.g. webpack)
-- inside `dev`: AMD bundled, not minified
-- inside `min`: AMD bundled, and minified
-- inside `min-maps`: source maps for `min`
+- inside `/esm`: ESM version of the editor (compatible with e.g. webpack)
+- inside `/dev`: AMD bundled, not minified
+- inside `/min`: AMD bundled, and minified
+- inside `/min-maps`: source maps for `min`
- `monaco.d.ts`: this specifies the API of the editor (this is what is actually versioned, everything else is considered private and might break with any release).
- `monaco.d.ts`: this specifies the API of the editor (this is what is actually versioned, everything else is considered private and might break with any release).
It is recommended to develop against the `dev` version, and in production to use the `min` version.
It is recommended to develop against the `dev` version, and in production to use the `min` version.
@@ -34,14 +37,14 @@ It is recommended to develop against the `dev` version, and in production to use
- [Integrate the AMD version](./docs/integrate-amd.md).
- [Integrate the AMD version](./docs/integrate-amd.md).
- [Integrate the ESM version](./docs/integrate-esm.md)
- [Integrate the ESM version](./docs/integrate-esm.md)
- Learn how to use the editor API and try out your own customizations in the [playground](https://microsoft.github.io/monaco-editor/playground.html).
- Learn how to use the editor API and try out your own customizations in the [playground](https://microsoft.github.io/monaco-editor/playground.html).
-- Explore the [API docs](https://microsoft.github.io/monaco-editor/api/index.html) or read them straight from [`monaco.d.ts`](https://github.com/microsoft/monaco-editor/blob/main/website/typedoc/monaco.d.ts).
+- Explore the [API docs](https://microsoft.github.io/monaco-editor/docs.html) or read them straight from [`monaco.d.ts`](https://github.com/microsoft/monaco-editor/blob/main/website/typedoc/monaco.d.ts).
- Read [this guide](https://github.com/microsoft/monaco-editor/wiki/Accessibility-Guide-for-Integrators) to ensure the editor is accessible to all your users!
- Read [this guide](https://github.com/microsoft/monaco-editor/wiki/Accessibility-Guide-for-Integrators) to ensure the editor is accessible to all your users!
- Create a Monarch tokenizer for a new programming language [in the Monarch playground](https://microsoft.github.io/monaco-editor/monarch.html).
- Create a Monarch tokenizer for a new programming language [in the Monarch playground](https://microsoft.github.io/monaco-editor/monarch.html).
- Ask questions on [StackOverflow](https://stackoverflow.com/questions/tagged/monaco-editor)! Search open and closed issues, there are a lot of tips in there!
- Ask questions on [StackOverflow](https://stackoverflow.com/questions/tagged/monaco-editor)! Search open and closed issues, there are a lot of tips in there!
## Issues
## Issues
-Create [issues](https://github.com/microsoft/monaco-editor/issues) in this repository for anything related to the Monaco Editor. Always mention **the version** of the editor when creating issues and **the browser** you're having trouble in. Please search for existing issues to avoid duplicates.
+Create [issues](https://github.com/microsoft/monaco-editor/issues) in this repository for anything related to the Monaco Editor. Please search for existing issues to avoid duplicates.
## FAQ
## FAQ
@@ -79,13 +82,10 @@ No.
- Please see https://github.com/bolinfest/monaco-tm which puts together `monaco-editor`, `vscode-oniguruma` and `vscode-textmate` to get TM grammar support in the editor.
- Please see https://github.com/bolinfest/monaco-tm which puts together `monaco-editor`, `vscode-oniguruma` and `vscode-textmate` to get TM grammar support in the editor.
-❓ **What about IE 11 support?**
-
-- The Monaco Editor no longer supports IE 11. The last version that was tested on IE 11 is `0.18.1`.
-
-## Development setup
+## Contributing / Local Development
-Please see [CONTRIBUTING](./CONTRIBUTING.md)
+We are welcoming contributions from the community!
+Please see [CONTRIBUTING](./CONTRIBUTING.md) for details how you can contribute effectively, how you can run the editor from sources and how you can debug and fix issues.
- // Remove pattern that creates warnings with esbuild
- // e.g.
- // > /src/typescript/lib/typescriptServices.js:20:21: warning: Top-level "this" will be replaced with undefined since this file is an ECMAScript module
- // 20 │ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+ close: function () { return _fs.unwatchFile(fileName, fileChanged); }
+ };
+ function fileChanged(curr, prev) {
+ // previous event kind check is to ensure we recongnize the file as previously also missing when it is restored or renamed twice (that is it disappears and reappears)
+ // In such case, prevTime returned is same as prev time of event when file was deleted as per node documentation
+ var presentWatcher = _fs.watch(fileOrDirectory, options, isLinuxOrMacOs ?
+ callbackChangingToMissingFileSystemEntry :
+ callback);
+ // Watch the missing file or directory or error
+ presentWatcher.on("error", function () { return invokeCallbackAndUpdateWatcher(watchMissingFileSystemEntry); });
+ return presentWatcher;
+ }
+ catch (e) {
+ // Catch the exception and use polling instead
+ // Eg. on linux the number of watches are limited and one could easily exhaust watches and the exception ENOSPC is thrown when creating watcher at that point
+ // so instead of throwing error, use fs.watchFile
+ * Watch the file or directory using fs.watchFile since fs.watch threw exception
+ * Eg. on linux the number of watches are limited and one could easily exhaust watches and the exception ENOSPC is thrown when creating watcher at that point
+ */
+ function watchPresentFileSystemEntryWithFsWatchFile() {
- /*background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTIxIDBsLTExIDEyLTcuMzMzLTUuNjY2LTIuNjY3IDEuNjgydjEzLjk4NGwyLjY2NyAxLjY2NiA3LjMzMy01LjY2NiAxMSAxMSA3LTN2LTIyLjMzM2wtNy0zLjY2N3ptLTE4IDE5di05bDQgNS00IDR6bTExLTRsNy02djEybC03LTZ6Ii8+PC9zdmc+") left center no-repeat;*/
- /*padding: 16px 12px 0 34px;*/
- padding: 16px 12px 0 0px;
- height: 35px;
- display: block;
- float: left;
-}
-
-.navbar .logo a {
- color: #fff;
- font-size: 24px;
- letter-spacing: -1px;
-}
-
-.navbar-fixed-top {
- z-index: 500;
-}
-
-.flgroup:after {
- content: '';
- display: block;
- visibility: hidden;
- height: 0;
- clear: both;
-}
-
-/* Controls */
-
-/* Media Queries */
-@media (min-width: 1200px) {
- h1,
- h2 {
- letter-spacing: -0.04em;
- }
-
- .hero-unit h1 {
- font-size: 72px;
- }
-
- h2 {
- font-size: 36px;
- }
-}
-
-#gh-link {
- display: none;
- position: fixed;
- top: 0;
- right: 0;
- border: 0;
- margin: 0;
- z-index: 1000;
-}
-@media (min-width: 980px) {
- #gh-link {
- display: block;
- }
-}
-
-@media (min-width: 980px) {
- .navbar .nav {
- float: right;
- }
-
- .navbar-inverse .nav-collapse .nav > li > a {
- padding-left: 15px;
- }
-}
-
-@media (min-width: 768px) and (max-width: 979px) {