run `prettier`

pull/2751/head
Alex Dima 3 years ago
parent b4178b1190
commit 84bdc31efe
No known key found for this signature in database
GPG Key ID: 39563C1504FDD0C9

@ -0,0 +1,23 @@
/monaco-css/out/
/monaco-css/release/
/monaco-editor-samples/browser-esm-parcel/.cache/
/monaco-editor-samples/browser-esm-parcel/dist/
/monaco-editor-samples/browser-esm-webpack/dist/*.js
/monaco-editor-samples/browser-esm-webpack-monaco-plugin/dist/*.js
/monaco-editor-samples/browser-esm-webpack-small/dist/*.js
/monaco-editor-samples/browser-esm-webpack-typescript/dist/*.js
/monaco-editor-samples/browser-esm-webpack-typescript-react/dist/*.js
/monaco-editor/test/samples-all.generated.js
/monaco-editor/test/playground.generated/
/monaco-editor/typedoc/theme/
/monaco-editor/typedoc/monaco.d.ts
/monaco-editor/website/lib/
/monaco-html/out/
/monaco-html/release/
/monaco-json/out/
/monaco-json/release/
/monaco-languages/out/
/monaco-languages/release/
/monaco-typescript/out/
/monaco-typescript/release/
/monaco-typescript/src/lib/

File diff suppressed because it is too large Load Diff

@ -7,7 +7,7 @@ This repository contains no source code, it only contains the scripts to package
These packages are described in the root file called `metadata.js` and it is possible to create an editor distribution that contains only certain plugins by editing that file. These packages are described in the root file called `metadata.js` and it is possible to create an editor distribution that contains only certain plugins by editing that file.
| repository | npm module | explanation | | repository | npm module | explanation |
|------------|------------|-------------| | ------------------------------------------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------- |
| [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. | | [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-languages](https://github.com/Microsoft/monaco-languages) | [monaco-languages](https://www.npmjs.com/package/monaco-languages) | plugin that adds colorization and basic supports for dozens of languages. | | [monaco-languages](https://github.com/Microsoft/monaco-languages) | [monaco-languages](https://www.npmjs.com/package/monaco-languages) | plugin that adds colorization and basic supports for dozens of languages. |
| [monaco-typescript](https://github.com/Microsoft/monaco-typescript) | [monaco-typescript](https://www.npmjs.com/package/monaco-typescript) | plugin that adds rich language support for JavaScript and TypeScript. | | [monaco-typescript](https://github.com/Microsoft/monaco-typescript) | [monaco-typescript](https://www.npmjs.com/package/monaco-typescript) | plugin that adds rich language support for JavaScript and TypeScript. |
@ -15,12 +15,11 @@ These packages are described in the root file called `metadata.js` and it is pos
| [monaco-json](https://github.com/Microsoft/monaco-json) | [monaco-json](https://www.npmjs.com/package/monaco-json) | plugin that adds rich language support for JSON. | | [monaco-json](https://github.com/Microsoft/monaco-json) | [monaco-json](https://www.npmjs.com/package/monaco-json) | plugin that adds rich language support for JSON. |
| [monaco-html](https://github.com/Microsoft/monaco-html) | [monaco-html](https://www.npmjs.com/package/monaco-html) | plugin that adds rich language support for HTML. | | [monaco-html](https://github.com/Microsoft/monaco-html) | [monaco-html](https://www.npmjs.com/package/monaco-html) | plugin that adds rich language support for HTML. |
## Running the editor from source ## Running the editor from source
You need to have all the build setup of VS Code to be able to build the Monaco Editor. You need to have all the build setup of VS Code to be able to build the Monaco Editor.
* Install all the [prerequisites](https://github.com/Microsoft/vscode/wiki/How-to-Contribute#prerequisites) - Install all the [prerequisites](https://github.com/Microsoft/vscode/wiki/How-to-Contribute#prerequisites)
### OS X and Linux ### OS X and Linux
@ -50,7 +49,7 @@ You need to have all the build setup of VS Code to be able to build the Monaco E
/src/vscode> yarn run watch /src/vscode> yarn run watch
``` ```
* For the monaco editor test pages: - For the monaco editor test pages:
```bash ```bash
# clone monaco-editor (note the folders must be siblings!) # clone monaco-editor (note the folders must be siblings!)
@ -90,7 +89,7 @@ Open [http://localhost:8080/monaco-editor/test/?editor=src&monaco-typescript=src
> Tip: All folders must be cloned as siblings. > 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: > 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:
![image](https://cloud.githubusercontent.com/assets/5047891/19599080/eb0d7622-979e-11e6-96ce-dde98cd95dc1.png) > ![image](https://cloud.githubusercontent.com/assets/5047891/19599080/eb0d7622-979e-11e6-96ce-dde98cd95dc1.png)
## Running the website locally ## Running the website locally
@ -113,72 +112,76 @@ Open [http://localhost:8080/monaco-editor/test/?editor=src&monaco-typescript=src
## Shipping a new monaco-editor npm module ## Shipping a new monaco-editor npm module
#### 0. #### 0.
* make sure you have `https://github.com/microsoft/vscode-loc` checked out next to the `vscode` folder.
- make sure you have `https://github.com/microsoft/vscode-loc` checked out next to the `vscode` folder.
#### 1. Ship a new `monaco-editor-core` npm module #### 1. Ship a new `monaco-editor-core` npm module
* bump version in `/src/vscode/build/monaco/package.json`
* **[important]** push all local changes to the remote to get a good public commit id. - bump version in `/src/vscode/build/monaco/package.json`
* generate npm package `/src/vscode> node_modules/.bin/gulp editor-distro` - **[important]** push all local changes to the remote to get a good public commit id.
* publish npm package `/src/vscode/out-monaco-editor-core> npm publish` - generate npm package `/src/vscode> node_modules/.bin/gulp editor-distro`
- publish npm package `/src/vscode/out-monaco-editor-core> npm publish`
#### 2. Adopt new `monaco-editor-core` in plugins #### 2. Adopt new `monaco-editor-core` in plugins
* if there are breaking API changes that affect the language plugins, adopt the new API in:
* [repo - monaco-typescript](https://github.com/Microsoft/monaco-typescript) - if there are breaking API changes that affect the language plugins, adopt the new API in:
* [repo - monaco-languages](https://github.com/Microsoft/monaco-languages) - [repo - monaco-typescript](https://github.com/Microsoft/monaco-typescript)
* [repo - monaco-css](https://github.com/Microsoft/monaco-css) - [repo - monaco-languages](https://github.com/Microsoft/monaco-languages)
* [repo - monaco-json](https://github.com/Microsoft/monaco-json) - [repo - monaco-css](https://github.com/Microsoft/monaco-css)
* [repo - monaco-html](https://github.com/Microsoft/monaco-html) - [repo - monaco-json](https://github.com/Microsoft/monaco-json)
* publish new versions of those plugins to npm as necessary. - [repo - monaco-html](https://github.com/Microsoft/monaco-html)
- publish new versions of those plugins to npm as necessary.
#### 3. Update package.json #### 3. Update package.json
* edit `/src/monaco-editor/package.json` and update the version (as necessary):
* [npm - monaco-editor-core](https://www.npmjs.com/package/monaco-editor-core) - edit `/src/monaco-editor/package.json` and update the version (as necessary):
* [npm - monaco-typescript](https://www.npmjs.com/package/monaco-typescript) - [npm - monaco-editor-core](https://www.npmjs.com/package/monaco-editor-core)
* [npm - monaco-languages](https://www.npmjs.com/package/monaco-languages) - [npm - monaco-typescript](https://www.npmjs.com/package/monaco-typescript)
* [npm - monaco-css](https://www.npmjs.com/package/monaco-css) - [npm - monaco-languages](https://www.npmjs.com/package/monaco-languages)
* [npm - monaco-json](https://www.npmjs.com/package/monaco-json) - [npm - monaco-css](https://www.npmjs.com/package/monaco-css)
* [npm - monaco-html](https://www.npmjs.com/package/monaco-html) - [npm - monaco-json](https://www.npmjs.com/package/monaco-json)
* **[important]** fetch latest deps by running `/src/monaco-editor> npm install .` - [npm - monaco-html](https://www.npmjs.com/package/monaco-html)
- **[important]** fetch latest deps by running `/src/monaco-editor> npm install .`
#### 4. Generate and try out the local release #### 4. Generate and try out the local release
* `/src/monaco-editor> npm run release` - `/src/monaco-editor> npm run release`
* try as many test pages as you think are relevant. e.g.: - try as many test pages as you think are relevant. e.g.:
* open `http://localhost:8080/monaco-editor/test/?editor=releaseDev` - open `http://localhost:8080/monaco-editor/test/?editor=releaseDev`
* open `http://localhost:8080/monaco-editor/test/?editor=releaseMin` - open `http://localhost:8080/monaco-editor/test/?editor=releaseMin`
* open `http://localhost:8080/monaco-editor/test/smoketest.html?editor=releaseDev` - open `http://localhost:8080/monaco-editor/test/smoketest.html?editor=releaseDev`
* open `http://localhost:8080/monaco-editor/test/smoketest.html?editor=releaseMin` - open `http://localhost:8080/monaco-editor/test/smoketest.html?editor=releaseMin`
#### 5. Update release note. #### 5. Update release note.
* API Change/Breaking Change/New and noteworthy
* Thank you ([use this tool](https://vscode-tools.azurewebsites.net/)) - API Change/Breaking Change/New and noteworthy
- Thank you ([use this tool](https://vscode-tools.azurewebsites.net/))
#### 6. Publish #### 6. Publish
* `/src/monaco-editor> npm version minor` - `/src/monaco-editor> npm version minor`
* `/src/monaco-editor> npm run release` - `/src/monaco-editor> npm run release`
* `/src/monaco-editor/release> npm publish` - `/src/monaco-editor/release> npm publish`
* `/src/monaco-editor> git push --tags` - `/src/monaco-editor> git push --tags`
#### 7. Update Website #### 7. Update Website
* `/src/monaco-editor> npm run website` - `/src/monaco-editor> npm run website`
#### 8. Publish new webpack plugin #### 8. Publish new webpack plugin
* https://github.com/microsoft/monaco-editor-webpack-plugin - https://github.com/microsoft/monaco-editor-webpack-plugin
* update to latest `monaco-editor` - update to latest `monaco-editor`
* `npm install .` - `npm install .`
* `npm run import-editor` - `npm run import-editor`
* if there are no changes generated after the script: - if there are no changes generated after the script:
* update the peer dependency in `package.json` and use the `||` format e.g. `"monaco-editor": "0.27.x || 0.28.x"` - update the peer dependency in `package.json` and use the `||` format e.g. `"monaco-editor": "0.27.x || 0.28.x"`
* update the version matrix in the README.md and add the new editor version to the plugin's current major version - update the version matrix in the README.md and add the new editor version to the plugin's current major version
* use `npm version minor` - use `npm version minor`
* publish using `npm publish` - publish using `npm publish`
* if there are any changes generated after the script: - if there are any changes generated after the script:
* update the peer dependency in `package.json` e.g. `"monaco-editor": "0.29.x"` - update the peer dependency in `package.json` e.g. `"monaco-editor": "0.29.x"`
* update the version matrix in the README.md and add a new row with the new major version - update the version matrix in the README.md and add a new row with the new major version
* use `npm version major` - use `npm version major`
* publish using `npm publish` - publish using `npm publish`
* remember to push tags upstream - remember to push tags upstream

@ -19,25 +19,26 @@ $ 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 `esm`: ESM version of the editor (compatible with e.g. webpack)
* inside `min`: AMD bundled, and minified - inside `dev`: AMD bundled, not minified
* inside `min-maps`: source maps for `min` - inside `min`: AMD bundled, and minified
* `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). - 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).
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.
## Documentation ## Documentation
* Learn how to integrate the editor with these [complete samples](https://github.com/Microsoft/monaco-editor-samples/). - Learn how to integrate the editor with these [complete samples](https://github.com/Microsoft/monaco-editor-samples/).
* [Integrate the AMD version](./monaco-editor/docs/integrate-amd.md). - [Integrate the AMD version](./monaco-editor/docs/integrate-amd.md).
* [Integrate the AMD version cross-domain](./monaco-editor/docs/integrate-amd-cross.md) - [Integrate the AMD version cross-domain](./monaco-editor/docs/integrate-amd-cross.md)
* [Integrate the ESM version](./monaco-editor/docs/integrate-esm.md) - [Integrate the ESM version](./monaco-editor/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/master/website/playground/monaco.d.ts.txt). - 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/master/website/playground/monaco.d.ts.txt).
* 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
@ -77,11 +78,11 @@ No.
❓ **Why doesn't the editor support TextMate grammars?** ❓ **Why doesn't the editor support TextMate grammars?**
* 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?** ❓ **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`. - The Monaco Editor no longer supports IE 11. The last version that was tested on IE 11 is `0.18.1`.
## Development setup ## Development setup
@ -91,6 +92,6 @@ Please see [CONTRIBUTING](./CONTRIBUTING.md)
This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments. This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
## License ## License
Licensed under the [MIT](https://github.com/Microsoft/monaco-editor/blob/master/LICENSE.md) License. Licensed under the [MIT](https://github.com/Microsoft/monaco-editor/blob/master/LICENSE.md) License.

@ -4,7 +4,7 @@
Microsoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [our GitHub organizations](https://opensource.microsoft.com/). Microsoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [our GitHub organizations](https://opensource.microsoft.com/).
If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](https://docs.microsoft.com/en-us/previous-versions/tn-archive/cc751383(v=technet.10)), please report it to us as described below. If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](<https://docs.microsoft.com/en-us/previous-versions/tn-archive/cc751383(v=technet.10)>), please report it to us as described below.
## Reporting Security Issues ## Reporting Security Issues
@ -18,13 +18,13 @@ You should receive a response within 24 hours. If for some reason you do not, pl
Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue: Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue:
* Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.) - Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)
* Full paths of source file(s) related to the manifestation of the issue - Full paths of source file(s) related to the manifestation of the issue
* The location of the affected source code (tag/branch/commit or direct URL) - The location of the affected source code (tag/branch/commit or direct URL)
* Any special configuration required to reproduce the issue - Any special configuration required to reproduce the issue
* Step-by-step instructions to reproduce the issue - Step-by-step instructions to reproduce the issue
* Proof-of-concept or exploit code (if possible) - Proof-of-concept or exploit code (if possible)
* Impact of the issue, including how an attacker might exploit the issue - Impact of the issue, including how an attacker might exploit the issue
This information will help us triage your report more quickly. This information will help us triage your report more quickly.

@ -1,2 +0,0 @@
/out/
/release/

@ -3,7 +3,7 @@
* Licensed under the MIT License. See License.txt in the project root for license information. * Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/ *--------------------------------------------------------------------------------------------*/
/// <reference path="node_modules/monaco-editor-core/monaco.d.ts" /> /// <reference path="../node_modules/monaco-editor-core/monaco.d.ts" />
declare namespace monaco.languages.css { declare namespace monaco.languages.css {
export interface Options { export interface Options {

@ -2,7 +2,6 @@
"scripts": { "scripts": {
"compile": "../node_modules/.bin/mrmdir ./out && ../node_modules/.bin/tsc -p ./src/tsconfig.json && ../node_modules/.bin/tsc -p ./src/tsconfig.esm.json && node ./scripts/dts && ../node_modules/.bin/prettier --write ./monaco.d.ts", "compile": "../node_modules/.bin/mrmdir ./out && ../node_modules/.bin/tsc -p ./src/tsconfig.json && ../node_modules/.bin/tsc -p ./src/tsconfig.esm.json && node ./scripts/dts && ../node_modules/.bin/prettier --write ./monaco.d.ts",
"watch": "../node_modules/.bin/tsc -p ./src --watch", "watch": "../node_modules/.bin/tsc -p ./src --watch",
"prepublishOnly": "../node_modules/.bin/mrmdir ./release && npm run compile && node ./scripts/release.js && node ./scripts/bundle && ../node_modules/.bin/mcopy ./monaco.d.ts ./release/monaco.d.ts && ../node_modules/.bin/mcopy ./out/esm/monaco.contribution.d.ts ./release/esm/monaco.contribution.d.ts && ../node_modules/.bin/mcopy ./out/esm/fillers/monaco-editor-core.d.ts ./release/esm/fillers/monaco-editor-core.d.ts", "prepublishOnly": "../node_modules/.bin/mrmdir ./release && npm run compile && node ./scripts/release.js && node ./scripts/bundle && ../node_modules/.bin/mcopy ./monaco.d.ts ./release/monaco.d.ts && ../node_modules/.bin/mcopy ./out/esm/monaco.contribution.d.ts ./release/esm/monaco.contribution.d.ts && ../node_modules/.bin/mcopy ./out/esm/fillers/monaco-editor-core.d.ts ./release/esm/fillers/monaco-editor-core.d.ts"
"prettier": "../node_modules/.bin/prettier --write ."
} }
} }

@ -20,7 +20,7 @@ let result = [
` * Licensed under the MIT License. See License.txt in the project root for license information.`, ` * Licensed under the MIT License. See License.txt in the project root for license information.`,
` *--------------------------------------------------------------------------------------------*/`, ` *--------------------------------------------------------------------------------------------*/`,
``, ``,
`/// <reference path="node_modules/monaco-editor-core/monaco.d.ts" />`, `/// <reference path="../node_modules/monaco-editor-core/monaco.d.ts" />`,
``, ``,
`declare namespace monaco.languages.css {` `declare namespace monaco.languages.css {`
]; ];

@ -29,7 +29,10 @@ export class CSSWorker {
customDataProviders.push(cssService.newCSSDataProvider(data.dataProviders[id])); customDataProviders.push(cssService.newCSSDataProvider(data.dataProviders[id]));
} }
} }
const lsOptions: cssService.LanguageServiceOptions = { customDataProviders, useDefaultDataProvider }; const lsOptions: cssService.LanguageServiceOptions = {
customDataProviders,
useDefaultDataProvider
};
switch (this._languageId) { switch (this._languageId) {
case 'css': case 'css':
@ -173,7 +176,7 @@ export class CSSWorker {
export interface ICreateData { export interface ICreateData {
languageId: string; languageId: string;
options: Options options: Options;
} }
export function create(ctx: worker.IWorkerContext, createData: ICreateData): CSSWorker { export function create(ctx: worker.IWorkerContext, createData: ICreateData): CSSWorker {

@ -240,7 +240,9 @@ function toTextEdit(textEdit: cssService.TextEdit): editor.ISingleEditOperation
} }
function toCommand(c: cssService.Command | undefined): languages.Command { function toCommand(c: cssService.Command | undefined): languages.Command {
return c && c.command === 'editor.action.triggerSuggest' ? { id: c.command, title: c.title, arguments: c.arguments } : undefined return c && c.command === 'editor.action.triggerSuggest'
? { id: c.command, title: c.title, arguments: c.arguments }
: undefined;
} }
export class CompletionAdapter implements languages.CompletionItemProvider { export class CompletionAdapter implements languages.CompletionItemProvider {

@ -117,11 +117,7 @@ class LanguageServiceDefaultsImpl implements LanguageServiceDefaults {
private _modeConfiguration: ModeConfiguration; private _modeConfiguration: ModeConfiguration;
private _languageId: string; private _languageId: string;
constructor( constructor(languageId: string, options: Options, modeConfiguration: ModeConfiguration) {
languageId: string,
options: Options,
modeConfiguration: ModeConfiguration
) {
this._languageId = languageId; this._languageId = languageId;
this.setOptions(options); this.setOptions(options);
this.setModeConfiguration(modeConfiguration); this.setModeConfiguration(modeConfiguration);
@ -238,7 +234,6 @@ languages.onLanguage('css', () => {
getMode().then((mode) => mode.setupMode(cssDefaults)); getMode().then((mode) => mode.setupMode(cssDefaults));
}); });
// CSS Data // CSS Data
export interface CSSDataConfiguration { export interface CSSDataConfiguration {

@ -1,2 +0,0 @@
/.gitignore
/.vscode/

@ -1,7 +0,0 @@
/browser-esm-parcel/.cache/
/browser-esm-parcel/dist/
/browser-esm-webpack/dist/*.js
/browser-esm-webpack-monaco-plugin/dist/*.js
/browser-esm-webpack-small/dist/*.js
/browser-esm-webpack-typescript/dist/*.js
/browser-esm-webpack-typescript-react/dist/*.js

@ -1,8 +0,0 @@
{
"arrowParens": "always",
"singleQuote": true,
"trailingComma": "none",
"semi": true,
"useTabs": true,
"printWidth": 100
}

@ -1,21 +0,0 @@
The MIT License (MIT)
Copyright (c) 2016 Microsoft Corporation
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

@ -1,41 +0,0 @@
<!-- BEGIN MICROSOFT SECURITY.MD V0.0.5 BLOCK -->
## Security
Microsoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [our GitHub organizations](https://opensource.microsoft.com/).
If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](<https://docs.microsoft.com/en-us/previous-versions/tn-archive/cc751383(v=technet.10)>), please report it to us as described below.
## Reporting Security Issues
**Please do not report security vulnerabilities through public GitHub issues.**
Instead, please report them to the Microsoft Security Response Center (MSRC) at [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report).
If you prefer to submit without logging in, send email to [secure@microsoft.com](mailto:secure@microsoft.com). If possible, encrypt your message with our PGP key; please download it from the [Microsoft Security Response Center PGP Key page](https://www.microsoft.com/en-us/msrc/pgp-key-msrc).
You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Additional information can be found at [microsoft.com/msrc](https://www.microsoft.com/msrc).
Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue:
- Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)
- Full paths of source file(s) related to the manifestation of the issue
- The location of the affected source code (tag/branch/commit or direct URL)
- Any special configuration required to reproduce the issue
- Step-by-step instructions to reproduce the issue
- Proof-of-concept or exploit code (if possible)
- Impact of the issue, including how an attacker might exploit the issue
This information will help us triage your report more quickly.
If you are reporting for a bug bounty, more complete reports can contribute to a higher bounty award. Please visit our [Microsoft Bug Bounty Program](https://microsoft.com/msrc/bounty) page for more details about our active programs.
## Preferred Languages
We prefer all communications to be in English.
## Policy
Microsoft follows the principle of [Coordinated Vulnerability Disclosure](https://www.microsoft.com/en-us/msrc/cvd).
<!-- END MICROSOFT SECURITY.MD BLOCK -->

@ -1,6 +1,7 @@
{ {
perform: true, perform: true,
commands: [ commands:
[
{ {
type: 'comment', type: 'comment',
name: 'question', name: 'question',
@ -34,7 +35,7 @@
name: '*english-please', name: '*english-please',
allowTriggerByBot: true, allowTriggerByBot: true,
action: 'close', action: 'close',
comment: "This issue is being closed because its description is not in English, that makes it hard for us to work on it. Please open a new issue with an English description. You might find [Bing Translator](https://www.bing.com/translator) useful." comment: 'This issue is being closed because its description is not in English, that makes it hard for us to work on it. Please open a new issue with an English description. You might find [Bing Translator](https://www.bing.com/translator) useful.'
}, },
{ {
type: 'comment', type: 'comment',
@ -57,6 +58,6 @@
action: 'updateLabels', action: 'updateLabels',
addLabel: 'needs more info', addLabel: 'needs more info',
comment: "Thanks for creating this issue! We figured it's missing some basic information or in some other way doesn't follow our [issue reporting](https://aka.ms/vscodeissuereporting) guidelines. Please take the time to review these and update the issue.\n\nHappy Coding!" comment: "Thanks for creating this issue! We figured it's missing some basic information or in some other way doesn't follow our [issue reporting](https://aka.ms/vscodeissuereporting) guidelines. Please take the time to review these and update the issue.\n\nHappy Coding!"
}, }
] ]
} }

@ -1,6 +1 @@
{ { daysAfterClose: 45, daysSinceLastUpdate: 3, ignoredLabels: ['*out-of-scope'], perform: true }
daysAfterClose: 45,
daysSinceLastUpdate: 3,
ignoredLabels: ['*out-of-scope'],
perform: true
}

@ -10,10 +10,7 @@
"cwd": "${workspaceFolder}/test/", "cwd": "${workspaceFolder}/test/",
"name": "Launch Program", "name": "Launch Program",
"program": "${workspaceFolder}/node_modules/.bin/webpack", "program": "${workspaceFolder}/node_modules/.bin/webpack",
"args": [ "args": ["--config", "webpack.config.js"]
"--config",
"webpack.config.js"
],
} }
] ]
} }

@ -3,12 +3,15 @@
A plugin to simplify loading the [Monaco Editor](https://github.com/Microsoft/monaco-editor) with [webpack](https://webpack.js.org/). A plugin to simplify loading the [Monaco Editor](https://github.com/Microsoft/monaco-editor) with [webpack](https://webpack.js.org/).
## Installing ## Installing
```sh ```sh
npm install monaco-editor-webpack-plugin npm install monaco-editor-webpack-plugin
``` ```
## Using ## Using
* `webpack.config.js`:
- `webpack.config.js`:
```js ```js
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const path = require('path'); const path = require('path');
@ -20,23 +23,25 @@ module.exports = {
filename: 'app.js' filename: 'app.js'
}, },
module: { module: {
rules: [{ rules: [
{
test: /\.css$/, test: /\.css$/,
use: ['style-loader', 'css-loader'] use: ['style-loader', 'css-loader']
}, { },
{
test: /\.ttf$/, test: /\.ttf$/,
use: ['file-loader'] use: ['file-loader']
}] }
},
plugins: [
new MonacoWebpackPlugin()
] ]
},
plugins: [new MonacoWebpackPlugin()]
}; };
``` ```
* `index.js`: - `index.js`:
```js ```js
import * as monaco from 'monaco-editor' import * as monaco from 'monaco-editor';
// or import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'; // or import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
// if shipping only a subset of the features & languages is desired // if shipping only a subset of the features & languages is desired
@ -50,34 +55,34 @@ monaco.editor.create(document.getElementById('container'), {
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: 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:
* `filename` (`string`) - custom filename template for worker scripts, respects the same options as [loader-utils' interpolateName](https://github.com/webpack/loader-utils#interpolatename). Useful for adding content-based hashes so that files can be served with long-lived caching headers. - `filename` (`string`) - custom filename template for worker scripts, respects the same options as [loader-utils' interpolateName](https://github.com/webpack/loader-utils#interpolatename). Useful for adding content-based hashes so that files can be served with long-lived caching headers.
* default value: `'[name].worker.js'`. - default value: `'[name].worker.js'`.
* `publicPath` (`string`) - custom public path for worker scripts, overrides the public path from which files generated by this plugin will be served. This wins out over Webpack's dynamic runtime path and can be useful to avoid attempting to load workers cross-origin when using a CDN for other static resources. Use e.g. '/' if you want to load your resources from the current origin.. - `publicPath` (`string`) - custom public path for worker scripts, overrides the public path from which files generated by this plugin will be served. This wins out over Webpack's dynamic runtime path and can be useful to avoid attempting to load workers cross-origin when using a CDN for other static resources. Use e.g. '/' if you want to load your resources from the current origin..
* default value: `''`. - default value: `''`.
* `languages` (`string[]`) - include only a subset of the languages supported. - `languages` (`string[]`) - include only a subset of the languages supported.
* default value: <!-- LANGUAGES_BEGIN -->`['abap', 'apex', 'azcli', 'bat', 'bicep', 'cameligo', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dart', 'dockerfile', 'ecl', 'elixir', 'flow9', 'fsharp', 'go', 'graphql', 'handlebars', 'hcl', 'html', 'ini', 'java', 'javascript', 'json', 'julia', 'kotlin', 'less', 'lexon', 'liquid', 'lua', 'm3', 'markdown', 'mips', 'msdax', 'mysql', 'objective-c', 'pascal', 'pascaligo', 'perl', 'pgsql', 'php', 'pla', 'postiats', 'powerquery', 'powershell', 'protobuf', 'pug', 'python', 'qsharp', 'r', 'razor', 'redis', 'redshift', 'restructuredtext', 'ruby', 'rust', 'sb', 'scala', 'scheme', 'scss', 'shell', 'solidity', 'sophia', 'sparql', 'sql', 'st', 'swift', 'systemverilog', 'tcl', 'twig', 'typescript', 'vb', 'xml', 'yaml']`<!-- LANGUAGES_END -->.
- default value: <!-- LANGUAGES_BEGIN -->`['abap', 'apex', 'azcli', 'bat', 'bicep', 'cameligo', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dart', 'dockerfile', 'ecl', 'elixir', 'flow9', 'fsharp', 'go', 'graphql', 'handlebars', 'hcl', 'html', 'ini', 'java', 'javascript', 'json', 'julia', 'kotlin', 'less', 'lexon', 'liquid', 'lua', 'm3', 'markdown', 'mips', 'msdax', 'mysql', 'objective-c', 'pascal', 'pascaligo', 'perl', 'pgsql', 'php', 'pla', 'postiats', 'powerquery', 'powershell', 'protobuf', 'pug', 'python', 'qsharp', 'r', 'razor', 'redis', 'redshift', 'restructuredtext', 'ruby', 'rust', 'sb', 'scala', 'scheme', 'scss', 'shell', 'solidity', 'sophia', 'sparql', 'sql', 'st', 'swift', 'systemverilog', 'tcl', 'twig', 'typescript', 'vb', 'xml', 'yaml']`<!-- LANGUAGES_END -->.
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: 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 | | Language | Instantiator |
| ------------- | ------------- | | ---------- | ------------ |
| javascript | typescript | | javascript | typescript |
| handlebars | html | | handlebars | html |
| scss, less | css | | scss, less | css |
- `features` (`string[]`) - include only a subset of the editor features.
- default value: <!-- FEATURES_BEGIN -->`['accessibilityHelp', 'anchorSelect', 'bracketMatching', 'caretOperations', 'clipboard', 'codeAction', 'codelens', 'colorPicker', 'comment', 'contextmenu', 'coreCommands', 'cursorUndo', 'dnd', 'documentSymbols', 'find', 'folding', 'fontZoom', 'format', 'gotoError', 'gotoLine', 'gotoSymbol', 'hover', 'iPadShowKeyboard', 'inPlaceReplace', 'indentation', 'inlayHints', 'inlineCompletions', 'inspectTokens', 'linesOperations', 'linkedEditing', 'links', 'multicursor', 'parameterHints', 'quickCommand', 'quickHelp', 'quickOutline', 'referenceSearch', 'rename', 'smartSelect', 'snippets', 'suggest', 'toggleHighContrast', 'toggleTabFocusMode', 'transpose', 'unusualLineTerminators', 'viewportSemanticTokens', 'wordHighlighter', 'wordOperations', 'wordPartOperations']`<!-- FEATURES_END -->.
- excluded features: It is also possible to exclude certain default features prefixing them with an exclamation mark '!'.
* `features` (`string[]`) - include only a subset of the editor features. - `globalAPI` (`boolean`) - specify whether the editor API should be exposed through a global `monaco` object or not. This option is applicable to `0.22.0` and newer version of `monaco-editor`. Since `0.22.0`, the ESM version of the monaco editor does no longer define a global `monaco` object unless `global.MonacoEnvironment = { globalAPI: true }` is set ([change log](https://github.com/microsoft/monaco-editor/blob/main/CHANGELOG.md#0220-29012021)).
* default value: <!-- FEATURES_BEGIN -->`['accessibilityHelp', 'anchorSelect', 'bracketMatching', 'caretOperations', 'clipboard', 'codeAction', 'codelens', 'colorPicker', 'comment', 'contextmenu', 'coreCommands', 'cursorUndo', 'dnd', 'documentSymbols', 'find', 'folding', 'fontZoom', 'format', 'gotoError', 'gotoLine', 'gotoSymbol', 'hover', 'iPadShowKeyboard', 'inPlaceReplace', 'indentation', 'inlayHints', 'inlineCompletions', 'inspectTokens', 'linesOperations', 'linkedEditing', 'links', 'multicursor', 'parameterHints', 'quickCommand', 'quickHelp', 'quickOutline', 'referenceSearch', 'rename', 'smartSelect', 'snippets', 'suggest', 'toggleHighContrast', 'toggleTabFocusMode', 'transpose', 'unusualLineTerminators', 'viewportSemanticTokens', 'wordHighlighter', 'wordOperations', 'wordPartOperations']`<!-- FEATURES_END -->. - default value: `false`.
* excluded features: It is also possible to exclude certain default features prefixing them with an exclamation mark '!'.
* `globalAPI` (`boolean`) - specify whether the editor API should be exposed through a global `monaco` object or not. This option is applicable to `0.22.0` and newer version of `monaco-editor`. Since `0.22.0`, the ESM version of the monaco editor does no longer define a global `monaco` object unless `global.MonacoEnvironment = { globalAPI: true }` is set ([change log](https://github.com/microsoft/monaco-editor/blob/main/CHANGELOG.md#0220-29012021)).
* default value: `false`.
## Version Matrix ## Version Matrix
| `monaco-editor-webpack-plugin` | `monaco-editor` | | `monaco-editor-webpack-plugin` | `monaco-editor` |
|---|---| | ------------------------------ | -------------------------------------- |
| `6.*.*` | `0.30.*` | | `6.*.*` | `0.30.*` |
| `5.*.*` | `0.29.*` | | `5.*.*` | `0.29.*` |
| `4.*.*` | `0.25.*`, `0.26.*`, `0.27.*`, `0.28.*` | | `4.*.*` | `0.25.*`, `0.26.*`, `0.27.*`, `0.28.*` |

@ -4,7 +4,7 @@
Microsoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [our GitHub organizations](https://opensource.microsoft.com/). Microsoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [our GitHub organizations](https://opensource.microsoft.com/).
If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](https://docs.microsoft.com/en-us/previous-versions/tn-archive/cc751383(v=technet.10)), please report it to us as described below. If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](<https://docs.microsoft.com/en-us/previous-versions/tn-archive/cc751383(v=technet.10)>), please report it to us as described below.
## Reporting Security Issues ## Reporting Security Issues
@ -18,13 +18,13 @@ You should receive a response within 24 hours. If for some reason you do not, pl
Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue: Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue:
* Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.) - Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)
* Full paths of source file(s) related to the manifestation of the issue - Full paths of source file(s) related to the manifestation of the issue
* The location of the affected source code (tag/branch/commit or direct URL) - The location of the affected source code (tag/branch/commit or direct URL)
* Any special configuration required to reproduce the issue - Any special configuration required to reproduce the issue
* Step-by-step instructions to reproduce the issue - Step-by-step instructions to reproduce the issue
* Proof-of-concept or exploit code (if possible) - Proof-of-concept or exploit code (if possible)
* Impact of the issue, including how an attacker might exploit the issue - Impact of the issue, including how an attacker might exploit the issue
This information will help us triage your report more quickly. This information will help us triage your report more quickly.

@ -18,7 +18,7 @@ const customFeatureLabels = {
'vs/editor/standalone/browser/quickAccess/standaloneGotoLineQuickAccess': 'gotoLine', 'vs/editor/standalone/browser/quickAccess/standaloneGotoLineQuickAccess': 'gotoLine',
'vs/editor/standalone/browser/quickAccess/standaloneCommandsQuickAccess': 'quickCommand', 'vs/editor/standalone/browser/quickAccess/standaloneCommandsQuickAccess': 'quickCommand',
'vs/editor/standalone/browser/quickAccess/standaloneGotoSymbolQuickAccess': 'quickOutline', 'vs/editor/standalone/browser/quickAccess/standaloneGotoSymbolQuickAccess': 'quickOutline',
'vs/editor/standalone/browser/quickAccess/standaloneHelpQuickAccess': 'quickHelp', 'vs/editor/standalone/browser/quickAccess/standaloneHelpQuickAccess': 'quickHelp'
}; };
generateLanguages(); generateLanguages();
@ -29,21 +29,29 @@ generateFeatures();
*/ */
function getBasicLanguages() { function getBasicLanguages() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
glob('./node_modules/monaco-editor/esm/vs/basic-languages/*/*.contribution.js', { cwd: path.dirname(__dirname) }, (err, files) => { glob(
'./node_modules/monaco-editor/esm/vs/basic-languages/*/*.contribution.js',
{ cwd: path.dirname(__dirname) },
(err, files) => {
if (err) { if (err) {
reject(err); reject(err);
return; return;
} }
resolve(files.map((file) => { resolve(
const entry = file.substring('./node_modules/monaco-editor/esm/'.length).replace(/\.js$/, ''); files.map((file) => {
const entry = file
.substring('./node_modules/monaco-editor/esm/'.length)
.replace(/\.js$/, '');
const label = path.basename(file).replace(/\.contribution\.js$/, ''); const label = path.basename(file).replace(/\.contribution\.js$/, '');
return { return {
label: label, label: label,
entry: entry entry: entry
}; };
})); })
}); );
}
);
}); });
} }
@ -52,7 +60,10 @@ function getBasicLanguages() {
*/ */
function readAdvancedLanguages() { function readAdvancedLanguages() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
glob('./node_modules/monaco-editor/esm/vs/language/*/monaco.contribution.js', { cwd: path.dirname(__dirname) }, (err, files) => { glob(
'./node_modules/monaco-editor/esm/vs/language/*/monaco.contribution.js',
{ cwd: path.dirname(__dirname) },
(err, files) => {
if (err) { if (err) {
reject(err); reject(err);
return; return;
@ -60,10 +71,11 @@ function readAdvancedLanguages() {
resolve( resolve(
files files
.map(file => file.substring('./node_modules/monaco-editor/esm/vs/language/'.length)) .map((file) => file.substring('./node_modules/monaco-editor/esm/vs/language/'.length))
.map(file => file.substring(0, file.length - '/monaco.contribution.js'.length)) .map((file) => file.substring(0, file.length - '/monaco.contribution.js'.length))
);
}
); );
});
}); });
} }
@ -74,7 +86,7 @@ function getAdvancedLanguages() {
return readAdvancedLanguages().then((languages) => { return readAdvancedLanguages().then((languages) => {
let result = []; let result = [];
for (const lang of languages) { for (const lang of languages) {
let shortLang = (lang === 'typescript' ? 'ts' : lang); let shortLang = lang === 'typescript' ? 'ts' : lang;
const entry = `vs/language/${lang}/monaco.contribution`; const entry = `vs/language/${lang}/monaco.contribution`;
checkFileExists(entry); checkFileExists(entry);
const workerId = `vs/language/${lang}/${shortLang}Worker`; const workerId = `vs/language/${lang}/${shortLang}Worker`;
@ -94,7 +106,12 @@ function getAdvancedLanguages() {
}); });
function checkFileExists(moduleName) { function checkFileExists(moduleName) {
const filePath = path.join(__dirname, '..', 'node_modules/monaco-editor/esm', `${moduleName}.js`); const filePath = path.join(
__dirname,
'..',
'node_modules/monaco-editor/esm',
`${moduleName}.js`
);
if (!fs.existsSync(filePath)) { if (!fs.existsSync(filePath)) {
console.error(`Could not find ${filePath}.`); console.error(`Could not find ${filePath}.`);
process.exit(1); process.exit(1);
@ -103,12 +120,15 @@ function getAdvancedLanguages() {
} }
function generateLanguages() { function generateLanguages() {
return Promise.all([getBasicLanguages(), getAdvancedLanguages()]).then(([basicLanguages, advancedLanguages]) => { return Promise.all([getBasicLanguages(), getAdvancedLanguages()]).then(
([basicLanguages, advancedLanguages]) => {
basicLanguages.sort(strcmp); basicLanguages.sort(strcmp);
advancedLanguages.sort(strcmp); advancedLanguages.sort(strcmp);
let i = 0, len = basicLanguages.length; let i = 0,
let j = 0, lenJ = advancedLanguages.length; len = basicLanguages.length;
let j = 0,
lenJ = advancedLanguages.length;
let result = []; let result = [];
while (i < len || j < lenJ) { while (i < len || j < lenJ) {
if (i < len && j < lenJ) { if (i < len && j < lenJ) {
@ -145,31 +165,29 @@ function generateLanguages() {
// //
import { IFeatureDefinition } from "./types"; import { IFeatureDefinition } from "./types";
export const languagesArr: IFeatureDefinition[] = ${ export const languagesArr: IFeatureDefinition[] = ${JSON.stringify(result, null, ' ')
JSON.stringify(result, null, ' ')
.replace(/"label":/g, 'label:') .replace(/"label":/g, 'label:')
.replace(/"entry":/g, 'entry:') .replace(/"entry":/g, 'entry:')
.replace(/"worker":/g, 'worker:') .replace(/"worker":/g, 'worker:')
.replace(/"id":/g, 'id:') .replace(/"id":/g, 'id:')
.replace(/"/g, '\'') .replace(/"/g, "'")};
};
export type EditorLanguage = ${ export type EditorLanguage = ${result.map((el) => `'${el.label}'`).join(' | ')};
result.map(el => `'${el.label}'`).join(' | ')
};
` `;
fs.writeFileSync(path.join(__dirname, '../src/languages.ts'), code.replace(/\r\n/g, '\n')); fs.writeFileSync(path.join(__dirname, '../src/languages.ts'), code.replace(/\r\n/g, '\n'));
const readmeLanguages = ( const readmeLanguages = JSON.stringify(result.map((r) => r.label))
JSON.stringify(result.map(r => r.label)) .replace(/"/g, "'")
.replace(/"/g, '\'') .replace(/','/g, "', '");
.replace(/','/g, '\', \'')
);
let readme = fs.readFileSync(path.join(__dirname, '../README.md')).toString(); let readme = fs.readFileSync(path.join(__dirname, '../README.md')).toString();
readme = readme.replace(/<!-- LANGUAGES_BEGIN -->([^<]+)<!-- LANGUAGES_END -->/, `<!-- LANGUAGES_BEGIN -->\`${readmeLanguages}\`<!-- LANGUAGES_END -->`); readme = readme.replace(
/<!-- LANGUAGES_BEGIN -->([^<]+)<!-- LANGUAGES_END -->/,
`<!-- LANGUAGES_BEGIN -->\`${readmeLanguages}\`<!-- LANGUAGES_END -->`
);
fs.writeFileSync(path.join(__dirname, '../README.md'), readme); fs.writeFileSync(path.join(__dirname, '../README.md'), readme);
}); }
);
} }
function strcmp(a, b) { function strcmp(a, b) {
@ -194,15 +212,22 @@ function generateFeatures() {
'vs/editor/contrib/tokenization/tokenization', 'vs/editor/contrib/tokenization/tokenization',
'vs/editor/editor.all', 'vs/editor/editor.all',
'vs/base/browser/ui/codicons/codiconStyles', 'vs/base/browser/ui/codicons/codiconStyles',
'vs/editor/contrib/gotoSymbol/documentSymbols', 'vs/editor/contrib/gotoSymbol/documentSymbols'
]; ];
let features = []; let features = [];
const files = ( const files =
fs.readFileSync(path.join(__dirname, '../node_modules/monaco-editor/esm/vs/editor/edcore.main.js')).toString() fs
+ fs.readFileSync(path.join(__dirname, '../node_modules/monaco-editor/esm/vs/editor/editor.all.js')).toString() .readFileSync(
); path.join(__dirname, '../node_modules/monaco-editor/esm/vs/editor/edcore.main.js')
files.split(/\r\n|\n/).forEach(line => { )
.toString() +
fs
.readFileSync(
path.join(__dirname, '../node_modules/monaco-editor/esm/vs/editor/editor.all.js')
)
.toString();
files.split(/\r\n|\n/).forEach((line) => {
const m = line.match(/import '([^']+)'/); const m = line.match(/import '([^']+)'/);
if (m) { if (m) {
const tmp = path.posix.join('vs/editor', m[1]).replace(/\.js$/, ''); const tmp = path.posix.join('vs/editor', m[1]).replace(/\.js$/, '');
@ -243,29 +268,24 @@ function generateFeatures() {
// //
import { IFeatureDefinition } from "./types"; import { IFeatureDefinition } from "./types";
export const featuresArr: IFeatureDefinition[] = ${ export const featuresArr: IFeatureDefinition[] = ${JSON.stringify(result, null, ' ')
JSON.stringify(result, null, ' ')
.replace(/"label":/g, 'label:') .replace(/"label":/g, 'label:')
.replace(/"entry":/g, 'entry:') .replace(/"entry":/g, 'entry:')
.replace(/"/g, '\'') .replace(/"/g, "'")};
};
export type EditorFeature = ${ export type EditorFeature = ${result.map((el) => `'${el.label}'`).join(' | ')};
result.map(el => `'${el.label}'`).join(' | ')
};
export type NegatedEditorFeature = ${ export type NegatedEditorFeature = ${result.map((el) => `'!${el.label}'`).join(' | ')};
result.map(el => `'!${el.label}'`).join(' | ') `;
};
`
fs.writeFileSync(path.join(__dirname, '../src/features.ts'), code.replace(/\r\n/g, '\n')); fs.writeFileSync(path.join(__dirname, '../src/features.ts'), code.replace(/\r\n/g, '\n'));
const readmeFeatures = ( const readmeFeatures = JSON.stringify(result.map((r) => r.label))
JSON.stringify(result.map(r => r.label)) .replace(/"/g, "'")
.replace(/"/g, '\'') .replace(/','/g, "', '");
.replace(/','/g, '\', \'')
);
let readme = fs.readFileSync(path.join(__dirname, '../README.md')).toString(); let readme = fs.readFileSync(path.join(__dirname, '../README.md')).toString();
readme = readme.replace(/<!-- FEATURES_BEGIN -->([^<]+)<!-- FEATURES_END -->/, `<!-- FEATURES_BEGIN -->\`${readmeFeatures}\`<!-- FEATURES_END -->`); readme = readme.replace(
/<!-- FEATURES_BEGIN -->([^<]+)<!-- FEATURES_END -->/,
`<!-- FEATURES_BEGIN -->\`${readmeFeatures}\`<!-- FEATURES_END -->`
);
fs.writeFileSync(path.join(__dirname, '../README.md'), readme); fs.writeFileSync(path.join(__dirname, '../README.md'), readme);
} }

@ -2,7 +2,7 @@
// THIS IS A GENERATED FILE. PLEASE DO NOT EDIT DIRECTLY. // THIS IS A GENERATED FILE. PLEASE DO NOT EDIT DIRECTLY.
// GENERATED USING node scripts/import-editor.js // GENERATED USING node scripts/import-editor.js
// //
import { IFeatureDefinition } from "./types"; import { IFeatureDefinition } from './types';
export const featuresArr: IFeatureDefinition[] = [ export const featuresArr: IFeatureDefinition[] = [
{ {
@ -206,6 +206,104 @@ export const featuresArr: IFeatureDefinition[] = [
} }
]; ];
export type EditorFeature = 'accessibilityHelp' | 'anchorSelect' | 'bracketMatching' | 'caretOperations' | 'clipboard' | 'codeAction' | 'codelens' | 'colorPicker' | 'comment' | 'contextmenu' | 'coreCommands' | 'cursorUndo' | 'dnd' | 'documentSymbols' | 'find' | 'folding' | 'fontZoom' | 'format' | 'gotoError' | 'gotoLine' | 'gotoSymbol' | 'hover' | 'iPadShowKeyboard' | 'inPlaceReplace' | 'indentation' | 'inlayHints' | 'inlineCompletions' | 'inspectTokens' | 'linesOperations' | 'linkedEditing' | 'links' | 'multicursor' | 'parameterHints' | 'quickCommand' | 'quickHelp' | 'quickOutline' | 'referenceSearch' | 'rename' | 'smartSelect' | 'snippets' | 'suggest' | 'toggleHighContrast' | 'toggleTabFocusMode' | 'transpose' | 'unusualLineTerminators' | 'viewportSemanticTokens' | 'wordHighlighter' | 'wordOperations' | 'wordPartOperations'; export type EditorFeature =
| 'accessibilityHelp'
| 'anchorSelect'
| 'bracketMatching'
| 'caretOperations'
| 'clipboard'
| 'codeAction'
| 'codelens'
| 'colorPicker'
| 'comment'
| 'contextmenu'
| 'coreCommands'
| 'cursorUndo'
| 'dnd'
| 'documentSymbols'
| 'find'
| 'folding'
| 'fontZoom'
| 'format'
| 'gotoError'
| 'gotoLine'
| 'gotoSymbol'
| 'hover'
| 'iPadShowKeyboard'
| 'inPlaceReplace'
| 'indentation'
| 'inlayHints'
| 'inlineCompletions'
| 'inspectTokens'
| 'linesOperations'
| 'linkedEditing'
| 'links'
| 'multicursor'
| 'parameterHints'
| 'quickCommand'
| 'quickHelp'
| 'quickOutline'
| 'referenceSearch'
| 'rename'
| 'smartSelect'
| 'snippets'
| 'suggest'
| 'toggleHighContrast'
| 'toggleTabFocusMode'
| 'transpose'
| 'unusualLineTerminators'
| 'viewportSemanticTokens'
| 'wordHighlighter'
| 'wordOperations'
| 'wordPartOperations';
export type NegatedEditorFeature = '!accessibilityHelp' | '!anchorSelect' | '!bracketMatching' | '!caretOperations' | '!clipboard' | '!codeAction' | '!codelens' | '!colorPicker' | '!comment' | '!contextmenu' | '!coreCommands' | '!cursorUndo' | '!dnd' | '!documentSymbols' | '!find' | '!folding' | '!fontZoom' | '!format' | '!gotoError' | '!gotoLine' | '!gotoSymbol' | '!hover' | '!iPadShowKeyboard' | '!inPlaceReplace' | '!indentation' | '!inlayHints' | '!inlineCompletions' | '!inspectTokens' | '!linesOperations' | '!linkedEditing' | '!links' | '!multicursor' | '!parameterHints' | '!quickCommand' | '!quickHelp' | '!quickOutline' | '!referenceSearch' | '!rename' | '!smartSelect' | '!snippets' | '!suggest' | '!toggleHighContrast' | '!toggleTabFocusMode' | '!transpose' | '!unusualLineTerminators' | '!viewportSemanticTokens' | '!wordHighlighter' | '!wordOperations' | '!wordPartOperations'; export type NegatedEditorFeature =
| '!accessibilityHelp'
| '!anchorSelect'
| '!bracketMatching'
| '!caretOperations'
| '!clipboard'
| '!codeAction'
| '!codelens'
| '!colorPicker'
| '!comment'
| '!contextmenu'
| '!coreCommands'
| '!cursorUndo'
| '!dnd'
| '!documentSymbols'
| '!find'
| '!folding'
| '!fontZoom'
| '!format'
| '!gotoError'
| '!gotoLine'
| '!gotoSymbol'
| '!hover'
| '!iPadShowKeyboard'
| '!inPlaceReplace'
| '!indentation'
| '!inlayHints'
| '!inlineCompletions'
| '!inspectTokens'
| '!linesOperations'
| '!linkedEditing'
| '!links'
| '!multicursor'
| '!parameterHints'
| '!quickCommand'
| '!quickHelp'
| '!quickOutline'
| '!referenceSearch'
| '!rename'
| '!smartSelect'
| '!snippets'
| '!suggest'
| '!toggleHighContrast'
| '!toggleTabFocusMode'
| '!transpose'
| '!unusualLineTerminators'
| '!viewportSemanticTokens'
| '!wordHighlighter'
| '!wordOperations'
| '!wordPartOperations';

@ -15,14 +15,14 @@ const EDITOR_MODULE: IFeatureDefinition = {
worker: { worker: {
id: 'vs/editor/editor', id: 'vs/editor/editor',
entry: 'vs/editor/editor.worker' entry: 'vs/editor/editor.worker'
}, }
}; };
const languagesById: { [language: string]: IFeatureDefinition; } = {}; const languagesById: { [language: string]: IFeatureDefinition } = {};
languagesArr.forEach(language => languagesById[language.label] = language); languagesArr.forEach((language) => (languagesById[language.label] = language));
const featuresById: { [feature: string]: IFeatureDefinition; } = {}; const featuresById: { [feature: string]: IFeatureDefinition } = {};
featuresArr.forEach(feature => featuresById[feature.label] = feature); featuresArr.forEach((feature) => (featuresById[feature.label] = feature));
/** /**
* Return a resolved path for a given Monaco file. * Return a resolved path for a given Monaco file.
@ -30,10 +30,10 @@ featuresArr.forEach(feature => featuresById[feature.label] = feature);
function resolveMonacoPath(filePath: string): string { function resolveMonacoPath(filePath: string): string {
try { try {
return require.resolve(path.join('monaco-editor/esm', filePath)); return require.resolve(path.join('monaco-editor/esm', filePath));
} catch(err) { } catch (err) {
try { try {
return require.resolve(path.join(process.cwd(), 'node_modules/monaco-editor/esm', filePath)); return require.resolve(path.join(process.cwd(), 'node_modules/monaco-editor/esm', filePath));
} catch(err){ } catch (err) {
return require.resolve(filePath); return require.resolve(filePath);
} }
} }
@ -56,9 +56,9 @@ function getFeaturesIds(userFeatures: string[]): string[] {
let featuresIds: string[]; let featuresIds: string[];
if (userFeatures.length) { if (userFeatures.length) {
const excludedFeatures = userFeatures.filter(f => f[0] === '!').map(f => f.slice(1)); const excludedFeatures = userFeatures.filter((f) => f[0] === '!').map((f) => f.slice(1));
if (excludedFeatures.length) { if (excludedFeatures.length) {
featuresIds = Object.keys(featuresById).filter(notContainedIn(excludedFeatures)) featuresIds = Object.keys(featuresById).filter(notContainedIn(excludedFeatures));
} else { } else {
featuresIds = userFeatures; featuresIds = userFeatures;
} }
@ -119,7 +119,6 @@ interface IInternalMonacoEditorWebpackPluginOpts {
} }
class MonacoEditorWebpackPlugin implements webpack.WebpackPluginInstance { class MonacoEditorWebpackPlugin implements webpack.WebpackPluginInstance {
private readonly options: IInternalMonacoEditorWebpackPluginOpts; private readonly options: IInternalMonacoEditorWebpackPluginOpts;
constructor(options: IMonacoEditorWebpackPluginOpts = {}) { constructor(options: IMonacoEditorWebpackPluginOpts = {}) {
@ -127,11 +126,11 @@ class MonacoEditorWebpackPlugin implements webpack.WebpackPluginInstance {
const customLanguages = options.customLanguages || []; const customLanguages = options.customLanguages || [];
const features = getFeaturesIds(options.features || []); const features = getFeaturesIds(options.features || []);
this.options = { this.options = {
languages: coalesce(languages.map(id => languagesById[id])).concat(customLanguages), languages: coalesce(languages.map((id) => languagesById[id])).concat(customLanguages),
features: coalesce(features.map(id => featuresById[id])), features: coalesce(features.map((id) => featuresById[id])),
filename: options.filename || "[name].worker.js", filename: options.filename || '[name].worker.js',
publicPath: options.publicPath || '', publicPath: options.publicPath || '',
globalAPI: options.globalAPI || false, globalAPI: options.globalAPI || false
}; };
} }
@ -149,7 +148,15 @@ class MonacoEditorWebpackPlugin implements webpack.WebpackPluginInstance {
}); });
} }
}); });
const rules = createLoaderRules(languages, features, workers, filename, publicPath, compilationPublicPath, globalAPI); const rules = createLoaderRules(
languages,
features,
workers,
filename,
publicPath,
compilationPublicPath,
globalAPI
);
const plugins = createPlugins(compiler, workers, filename); const plugins = createPlugins(compiler, workers, filename);
addCompilerRules(compiler, rules); addCompilerRules(compiler, rules);
addCompilerPlugins(compiler, plugins); addCompilerPlugins(compiler, plugins);
@ -187,13 +194,23 @@ function getCompilationPublicPath(compiler: webpack.Compiler): string {
return ''; return '';
} }
function createLoaderRules(languages: IFeatureDefinition[], features: IFeatureDefinition[], workers: ILabeledWorkerDefinition[], filename: string, pluginPublicPath: string, compilationPublicPath: string, globalAPI: boolean): webpack.RuleSetRule[] { function createLoaderRules(
languages: IFeatureDefinition[],
features: IFeatureDefinition[],
workers: ILabeledWorkerDefinition[],
filename: string,
pluginPublicPath: string,
compilationPublicPath: string,
globalAPI: boolean
): webpack.RuleSetRule[] {
if (!languages.length && !features.length) { if (!languages.length && !features.length) {
return []; return [];
} }
const languagePaths = flatArr(coalesce(languages.map(language => language.entry))); const languagePaths = flatArr(coalesce(languages.map((language) => language.entry)));
const featurePaths = flatArr(coalesce(features.map(feature => feature.entry))); const featurePaths = flatArr(coalesce(features.map((feature) => feature.entry)));
const workerPaths = fromPairs(workers.map(({ label, entry }) => [label, getWorkerFilename(filename, entry)])); const workerPaths = fromPairs(
workers.map(({ label, entry }) => [label, getWorkerFilename(filename, entry)])
);
if (workerPaths['typescript']) { if (workerPaths['typescript']) {
// javascript shares the same worker // javascript shares the same worker
workerPaths['javascript'] = workerPaths['typescript']; workerPaths['javascript'] = workerPaths['typescript'];
@ -218,10 +235,10 @@ function createLoaderRules(languages: IFeatureDefinition[], features: IFeatureDe
? JSON.stringify(pluginPublicPath) ? JSON.stringify(pluginPublicPath)
: `typeof __webpack_public_path__ === 'string' ` + : `typeof __webpack_public_path__ === 'string' ` +
`? __webpack_public_path__ ` + `? __webpack_public_path__ ` +
`: ${JSON.stringify(compilationPublicPath)}` `: ${JSON.stringify(compilationPublicPath)}`;
const globals = { const globals = {
'MonacoEnvironment': `(function (paths) { MonacoEnvironment: `(function (paths) {
function stripTrailingSlash(str) { function stripTrailingSlash(str) {
return str.replace(/\\/$/, ''); return str.replace(/\\/$/, '');
} }
@ -245,38 +262,42 @@ function createLoaderRules(languages: IFeatureDefinition[], features: IFeatureDe
return result; return result;
} }
}; };
})(${JSON.stringify(workerPaths, null, 2)})`, })(${JSON.stringify(workerPaths, null, 2)})`
}; };
return [ return [
{ {
test: /monaco-editor[/\\]esm[/\\]vs[/\\]editor[/\\]editor.(api|main).js/, test: /monaco-editor[/\\]esm[/\\]vs[/\\]editor[/\\]editor.(api|main).js/,
use: [{ use: [
{
loader: INCLUDE_LOADER_PATH, loader: INCLUDE_LOADER_PATH,
options: { options: {
globals, globals,
pre: featurePaths.map((importPath) => resolveMonacoPath(importPath)), pre: featurePaths.map((importPath) => resolveMonacoPath(importPath)),
post: languagePaths.map((importPath) => resolveMonacoPath(importPath)), post: languagePaths.map((importPath) => resolveMonacoPath(importPath))
}, }
}], }
}, ]
}
]; ];
} }
function createPlugins(compiler: webpack.Compiler, workers: ILabeledWorkerDefinition[], filename: string): AddWorkerEntryPointPlugin[] { function createPlugins(
compiler: webpack.Compiler,
workers: ILabeledWorkerDefinition[],
filename: string
): AddWorkerEntryPointPlugin[] {
const webpack = compiler.webpack ?? require('webpack'); const webpack = compiler.webpack ?? require('webpack');
return ( return (<AddWorkerEntryPointPlugin[]>[]).concat(
(<AddWorkerEntryPointPlugin[]>[]) workers.map(
.concat(workers.map(({ id, entry }) => ({ id, entry }) =>
new AddWorkerEntryPointPlugin({ new AddWorkerEntryPointPlugin({
id, id,
entry: resolveMonacoPath(entry), entry: resolveMonacoPath(entry),
filename: getWorkerFilename(filename, entry), filename: getWorkerFilename(filename, entry),
plugins: [ plugins: [new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 })]
new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
],
}) })
)) )
); );
} }
@ -289,8 +310,11 @@ function flatArr<T>(items: (T | T[])[]): T[] {
}, <T[]>[]); }, <T[]>[]);
} }
function fromPairs<T>(values: [string, T][]): { [key: string]: T; } { function fromPairs<T>(values: [string, T][]): { [key: string]: T } {
return values.reduce((acc, [key, value]) => Object.assign(acc, { [key]: value }), <{ [key: string]: T; }>{}); return values.reduce(
(acc, [key, value]) => Object.assign(acc, { [key]: value }),
<{ [key: string]: T }>{}
);
} }
function coalesce<T>(array: ReadonlyArray<T | undefined | null>): T[] { function coalesce<T>(array: ReadonlyArray<T | undefined | null>): T[] {

@ -2,7 +2,7 @@
// THIS IS A GENERATED FILE. PLEASE DO NOT EDIT DIRECTLY. // THIS IS A GENERATED FILE. PLEASE DO NOT EDIT DIRECTLY.
// GENERATED USING node scripts/import-editor.js // GENERATED USING node scripts/import-editor.js
// //
import { IFeatureDefinition } from "./types"; import { IFeatureDefinition } from './types';
export const languagesArr: IFeatureDefinition[] = [ export const languagesArr: IFeatureDefinition[] = [
{ {
@ -51,10 +51,7 @@ export const languagesArr: IFeatureDefinition[] = [
}, },
{ {
label: 'css', label: 'css',
entry: [ entry: ['vs/basic-languages/css/css.contribution', 'vs/language/css/monaco.contribution'],
'vs/basic-languages/css/css.contribution',
'vs/language/css/monaco.contribution'
],
worker: { worker: {
id: 'vs/language/css/cssWorker', id: 'vs/language/css/cssWorker',
entry: 'vs/language/css/css.worker' entry: 'vs/language/css/css.worker'
@ -102,10 +99,7 @@ export const languagesArr: IFeatureDefinition[] = [
}, },
{ {
label: 'html', label: 'html',
entry: [ entry: ['vs/basic-languages/html/html.contribution', 'vs/language/html/monaco.contribution'],
'vs/basic-languages/html/html.contribution',
'vs/language/html/monaco.contribution'
],
worker: { worker: {
id: 'vs/language/html/htmlWorker', id: 'vs/language/html/htmlWorker',
entry: 'vs/language/html/html.worker' entry: 'vs/language/html/html.worker'
@ -340,5 +334,81 @@ export const languagesArr: IFeatureDefinition[] = [
} }
]; ];
export type EditorLanguage = 'abap' | 'apex' | 'azcli' | 'bat' | 'bicep' | 'cameligo' | 'clojure' | 'coffee' | 'cpp' | 'csharp' | 'csp' | 'css' | 'dart' | 'dockerfile' | 'ecl' | 'elixir' | 'flow9' | 'fsharp' | 'go' | 'graphql' | 'handlebars' | 'hcl' | 'html' | 'ini' | 'java' | 'javascript' | 'json' | 'julia' | 'kotlin' | 'less' | 'lexon' | 'liquid' | 'lua' | 'm3' | 'markdown' | 'mips' | 'msdax' | 'mysql' | 'objective-c' | 'pascal' | 'pascaligo' | 'perl' | 'pgsql' | 'php' | 'pla' | 'postiats' | 'powerquery' | 'powershell' | 'protobuf' | 'pug' | 'python' | 'qsharp' | 'r' | 'razor' | 'redis' | 'redshift' | 'restructuredtext' | 'ruby' | 'rust' | 'sb' | 'scala' | 'scheme' | 'scss' | 'shell' | 'solidity' | 'sophia' | 'sparql' | 'sql' | 'st' | 'swift' | 'systemverilog' | 'tcl' | 'twig' | 'typescript' | 'vb' | 'xml' | 'yaml'; export type EditorLanguage =
| 'abap'
| 'apex'
| 'azcli'
| 'bat'
| 'bicep'
| 'cameligo'
| 'clojure'
| 'coffee'
| 'cpp'
| 'csharp'
| 'csp'
| 'css'
| 'dart'
| 'dockerfile'
| 'ecl'
| 'elixir'
| 'flow9'
| 'fsharp'
| 'go'
| 'graphql'
| 'handlebars'
| 'hcl'
| 'html'
| 'ini'
| 'java'
| 'javascript'
| 'json'
| 'julia'
| 'kotlin'
| 'less'
| 'lexon'
| 'liquid'
| 'lua'
| 'm3'
| 'markdown'
| 'mips'
| 'msdax'
| 'mysql'
| 'objective-c'
| 'pascal'
| 'pascaligo'
| 'perl'
| 'pgsql'
| 'php'
| 'pla'
| 'postiats'
| 'powerquery'
| 'powershell'
| 'protobuf'
| 'pug'
| 'python'
| 'qsharp'
| 'r'
| 'razor'
| 'redis'
| 'redshift'
| 'restructuredtext'
| 'ruby'
| 'rust'
| 'sb'
| 'scala'
| 'scheme'
| 'scss'
| 'shell'
| 'solidity'
| 'sophia'
| 'sparql'
| 'sql'
| 'st'
| 'swift'
| 'systemverilog'
| 'tcl'
| 'twig'
| 'typescript'
| 'vb'
| 'xml'
| 'yaml';

@ -1,4 +1,3 @@
declare module 'loader-utils' { declare module 'loader-utils' {
export function interpolateName(loaderContext: any, name: string, options?: any): string; export function interpolateName(loaderContext: any, name: string, options?: any): string;
} }

@ -13,10 +13,9 @@ export function pitch(this: any, remainingRequest: any) {
return [ return [
...(globals ...(globals
? Object.keys(globals).map((key) => `self[${JSON.stringify(key)}] = ${globals[key]};`) ? Object.keys(globals).map((key) => `self[${JSON.stringify(key)}] = ${globals[key]};`)
: [] : []),
),
...pre.map((include: any) => `require(${loaderUtils.stringifyRequest(this, include)});`), ...pre.map((include: any) => `require(${loaderUtils.stringifyRequest(this, include)});`),
`module.exports = require(${loaderUtils.stringifyRequest(this, `!!${remainingRequest}`)});`, `module.exports = require(${loaderUtils.stringifyRequest(this, `!!${remainingRequest}`)});`,
...post.map((include: any) => `require(${loaderUtils.stringifyRequest(this, include)});`), ...post.map((include: any) => `require(${loaderUtils.stringifyRequest(this, include)});`)
].join('\n'); ].join('\n');
}; }

@ -8,41 +8,52 @@ export interface IAddWorkerEntryPointPluginOptions {
plugins: webpack.WebpackPluginInstance[]; plugins: webpack.WebpackPluginInstance[];
} }
function getCompilerHook(compiler: webpack.Compiler, { id, entry, filename, chunkFilename, plugins }: IAddWorkerEntryPointPluginOptions) { function getCompilerHook(
compiler: webpack.Compiler,
{ id, entry, filename, chunkFilename, plugins }: IAddWorkerEntryPointPluginOptions
) {
const webpack = compiler.webpack ?? require('webpack'); const webpack = compiler.webpack ?? require('webpack');
return function (compilation: webpack.Compilation, callback: (error?: Error | null | false) => void) { return function (
compilation: webpack.Compilation,
callback: (error?: Error | null | false) => void
) {
const outputOptions = { const outputOptions = {
filename, filename,
chunkFilename, chunkFilename,
publicPath: compilation.outputOptions.publicPath, publicPath: compilation.outputOptions.publicPath,
// HACK: globalObject is necessary to fix https://github.com/webpack/webpack/issues/6642 // HACK: globalObject is necessary to fix https://github.com/webpack/webpack/issues/6642
globalObject: 'this', globalObject: 'this'
}; };
const childCompiler = compilation.createChildCompiler(id, outputOptions, [ const childCompiler = compilation.createChildCompiler(id, outputOptions, [
new webpack.webworker.WebWorkerTemplatePlugin(), new webpack.webworker.WebWorkerTemplatePlugin(),
new webpack.LoaderTargetPlugin('webworker'), new webpack.LoaderTargetPlugin('webworker')
]); ]);
const SingleEntryPlugin = webpack.EntryPlugin ?? webpack.SingleEntryPlugin; const SingleEntryPlugin = webpack.EntryPlugin ?? webpack.SingleEntryPlugin;
new SingleEntryPlugin(compiler.context, entry, 'main').apply(childCompiler); new SingleEntryPlugin(compiler.context, entry, 'main').apply(childCompiler);
plugins.forEach((plugin) => plugin.apply(childCompiler)); plugins.forEach((plugin) => plugin.apply(childCompiler));
childCompiler.runAsChild((err?: Error) => callback(err)); childCompiler.runAsChild((err?: Error) => callback(err));
} };
} }
export class AddWorkerEntryPointPlugin implements webpack.WebpackPluginInstance { export class AddWorkerEntryPointPlugin implements webpack.WebpackPluginInstance {
private readonly options: IAddWorkerEntryPointPluginOptions; private readonly options: IAddWorkerEntryPointPluginOptions;
constructor({ id, entry, filename, chunkFilename = undefined, plugins }: IAddWorkerEntryPointPluginOptions) { constructor({
id,
entry,
filename,
chunkFilename = undefined,
plugins
}: IAddWorkerEntryPointPluginOptions) {
this.options = { id, entry, filename, chunkFilename, plugins }; this.options = { id, entry, filename, chunkFilename, plugins };
} }
apply(compiler: webpack.Compiler) { apply(compiler: webpack.Compiler) {
const webpack = compiler.webpack ?? require('webpack'); const webpack = compiler.webpack ?? require('webpack');
const compilerHook = getCompilerHook(compiler, this.options); const compilerHook = getCompilerHook(compiler, this.options);
const majorVersion = webpack.version.split('.')[0] const majorVersion = webpack.version.split('.')[0];
if (parseInt(majorVersion) < 4) { if (parseInt(majorVersion) < 4) {
(<any>compiler).plugin('make', compilerHook); (<any>compiler).plugin('make', compilerHook);
} else { } else {

@ -1,4 +1,3 @@
export interface IWorkerDefinition { export interface IWorkerDefinition {
id: string; id: string;
entry: string; entry: string;

@ -1,13 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title> <title>Document</title>
</head> </head>
<body> <body>
<div id="container" style="width:800px;height:600px;border:1px solid #ccc"></div> <div id="container" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
<script type="text/javascript" src="app.js"></script> <script type="text/javascript" src="app.js"></script>
</body> </body>
</html> </html>

@ -1,4 +1,3 @@
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'; import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
monaco.editor.create(document.getElementById('container'), { monaco.editor.create(document.getElementById('container'), {

@ -13,15 +13,16 @@ module.exports = {
publicPath: ASSET_PATH publicPath: ASSET_PATH
}, },
module: { module: {
rules: [{ rules: [
{
test: /\.css$/, test: /\.css$/,
use: ['style-loader', 'css-loader'] use: ['style-loader', 'css-loader']
}, { },
{
test: /\.ttf$/, test: /\.ttf$/,
use: ['file-loader'] use: ['file-loader']
}] }
},
plugins: [
new MonacoWebpackPlugin()
] ]
},
plugins: [new MonacoWebpackPlugin()]
}; };

@ -10,15 +10,16 @@ module.exports = {
filename: 'app.js' filename: 'app.js'
}, },
module: { module: {
rules: [{ rules: [
{
test: /\.css$/, test: /\.css$/,
use: ['style-loader', 'css-loader'] use: ['style-loader', 'css-loader']
}, { },
{
test: /\.ttf$/, test: /\.ttf$/,
use: ['file-loader'] use: ['file-loader']
}] }
},
plugins: [
new MonacoWebpackPlugin()
] ]
},
plugins: [new MonacoWebpackPlugin()]
}; };

@ -6,10 +6,6 @@
"declaration": true, "declaration": true,
"strict": true "strict": true
}, },
"include": [ "include": ["src"],
"src" "exclude": ["node_modules"]
],
"exclude": [
"node_modules"
]
} }

@ -29,4 +29,5 @@ about: Create a report to help us improve
**Playground code that reproduces the issue:** **Playground code that reproduces the issue:**
```js ```js
``` ```

@ -1,7 +1,6 @@
--- ---
name: Feature request name: Feature request
about: Suggest an idea for this project about: Suggest an idea for this project
--- ---
<!-- Please search existing issues to avoid creating duplicates. --> <!-- Please search existing issues to avoid creating duplicates. -->

@ -1,6 +1,7 @@
{ {
perform: true, perform: true,
commands: [ commands:
[
{ {
type: 'comment', type: 'comment',
name: 'question', name: 'question',
@ -34,7 +35,7 @@
name: '*english-please', name: '*english-please',
allowTriggerByBot: true, allowTriggerByBot: true,
action: 'close', action: 'close',
comment: "This issue is being closed because its description is not in English, that makes it hard for us to work on it. Please open a new issue with an English description. You might find [Bing Translator](https://www.bing.com/translator) useful." comment: 'This issue is being closed because its description is not in English, that makes it hard for us to work on it. Please open a new issue with an English description. You might find [Bing Translator](https://www.bing.com/translator) useful.'
}, },
{ {
type: 'comment', type: 'comment',
@ -57,6 +58,6 @@
action: 'updateLabels', action: 'updateLabels',
addLabel: 'needs more info', addLabel: 'needs more info',
comment: "Thanks for creating this issue! We figured it's missing some basic information or in some other way doesn't follow our [issue reporting](https://aka.ms/vscodeissuereporting) guidelines. Please take the time to review these and update the issue.\n\nHappy Coding!" comment: "Thanks for creating this issue! We figured it's missing some basic information or in some other way doesn't follow our [issue reporting](https://aka.ms/vscodeissuereporting) guidelines. Please take the time to review these and update the issue.\n\nHappy Coding!"
}, }
] ]
} }

@ -1,6 +1 @@
{ { daysAfterClose: 45, daysSinceLastUpdate: 3, ignoredLabels: ['*out-of-scope'], perform: true }
daysAfterClose: 45,
daysSinceLastUpdate: 3,
ignoredLabels: ['*out-of-scope'],
perform: true
}

@ -10,9 +10,7 @@
"name": "gulp release", "name": "gulp release",
"program": "${workspaceFolder}/node_modules/gulp/bin/gulp.js", "program": "${workspaceFolder}/node_modules/gulp/bin/gulp.js",
"stopOnEntry": true, "stopOnEntry": true,
"args": [ "args": ["release"],
"release"
],
"cwd": "${workspaceFolder}" "cwd": "${workspaceFolder}"
}, },
{ {
@ -21,10 +19,8 @@
"name": "gulp website", "name": "gulp website",
"program": "${workspaceFolder}/node_modules/gulp/bin/gulp.js", "program": "${workspaceFolder}/node_modules/gulp/bin/gulp.js",
"stopOnEntry": true, "stopOnEntry": true,
"args": [ "args": ["website"],
"website"
],
"cwd": "${workspaceFolder}" "cwd": "${workspaceFolder}"
}, }
] ]
} }

@ -4,17 +4,17 @@ pool:
vmImage: 'ubuntu-latest' vmImage: 'ubuntu-latest'
steps: steps:
- task: NodeTool@0 - task: NodeTool@0
inputs: inputs:
versionSpec: '12.x' versionSpec: '12.x'
displayName: 'Install Node.js' displayName: 'Install Node.js'
- script: | - script: |
npm install npm install
npm run build-website npm run build-website
displayName: 'Build website' displayName: 'Build website'
- script: | - script: |
./build/publish-website.sh ./build/publish-website.sh
env: env:
GITHUB_TOKEN: $(GITHUB_TOKEN) GITHUB_TOKEN: $(GITHUB_TOKEN)

@ -3,12 +3,12 @@ const path = require('path');
module.exports = { module.exports = {
mode: 'production', mode: 'production',
entry: { entry: {
"core": './ci/core.js', core: './ci/core.js',
"editor.worker": './vscode/out-monaco-editor-core/esm/vs/editor/editor.worker.js', 'editor.worker': './vscode/out-monaco-editor-core/esm/vs/editor/editor.worker.js',
"json.worker": 'monaco-json/release/esm/json.worker', 'json.worker': 'monaco-json/release/esm/json.worker',
"css.worker": 'monaco-css/release/esm/css.worker', 'css.worker': 'monaco-css/release/esm/css.worker',
"html.worker": 'monaco-html/release/esm/html.worker', 'html.worker': 'monaco-html/release/esm/html.worker',
"ts.worker": 'monaco-typescript/release/esm/ts.worker', 'ts.worker': 'monaco-typescript/release/esm/ts.worker'
}, },
output: { output: {
globalObject: 'self', globalObject: 'self',
@ -19,7 +19,7 @@ module.exports = {
rules: [ rules: [
{ {
test: /\.css$/, test: /\.css$/,
use: ['style-loader', 'css-loader'], use: ['style-loader', 'css-loader']
}, },
{ {
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/, test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
@ -37,8 +37,14 @@ module.exports = {
}, },
resolve: { resolve: {
alias: { alias: {
'monaco-editor-core/esm/vs/editor/editor.worker': path.resolve(__dirname, '../vscode/out-monaco-editor-core/esm/vs/editor/editor.worker.js'), 'monaco-editor-core/esm/vs/editor/editor.worker': path.resolve(
'monaco-editor-core': path.resolve(__dirname, '../vscode/out-monaco-editor-core/esm/vs/editor/editor.main.js'), __dirname,
'../vscode/out-monaco-editor-core/esm/vs/editor/editor.worker.js'
),
'monaco-editor-core': path.resolve(
__dirname,
'../vscode/out-monaco-editor-core/esm/vs/editor/editor.main.js'
)
} }
}, },
stats: { stats: {

@ -8,64 +8,70 @@ If you are hosting your `.js` on a different domain (e.g. on a CDN) than the HTM
Assuming the HTML lives on `www.mydomain.com` and the editor is hosted on `www.mycdn.com`. Assuming the HTML lives on `www.mydomain.com` and the editor is hosted on `www.mycdn.com`.
---- ---
# Option 1: Use a data: worker URI # Option 1: Use a data: worker URI
* `https://www.mydomain.com/index.html`: - `https://www.mydomain.com/index.html`:
```html ```html
<script type="text/javascript" src="http://www.mycdn.com/monaco-editor/min/vs/loader.js"></script> <script type="text/javascript" src="http://www.mycdn.com/monaco-editor/min/vs/loader.js"></script>
<script> <script>
require.config({ paths: { 'vs': 'http://www.mycdn.com/monaco-editor/min/vs' }}); require.config({
paths: { vs: 'http://www.mycdn.com/monaco-editor/min/vs' }
});
// Before loading vs/editor/editor.main, define a global MonacoEnvironment that overwrites // Before loading vs/editor/editor.main, define a global MonacoEnvironment that overwrites
// the default worker url location (used when creating WebWorkers). The problem here is that // the default worker url location (used when creating WebWorkers). The problem here is that
// HTML5 does not allow cross-domain web workers, so we need to proxy the instantiation of // HTML5 does not allow cross-domain web workers, so we need to proxy the instantiation of
// a web worker through a same-domain script // a web worker through a same-domain script
window.MonacoEnvironment = { window.MonacoEnvironment = {
getWorkerUrl: function(workerId, label) { getWorkerUrl: function (workerId, label) {
return `data:text/javascript;charset=utf-8,${encodeURIComponent(` return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
self.MonacoEnvironment = { self.MonacoEnvironment = {
baseUrl: 'http://www.mycdn.com/monaco-editor/min/' baseUrl: 'http://www.mycdn.com/monaco-editor/min/'
}; };
importScripts('http://www.mycdn.com/monaco-editor/min/vs/base/worker/workerMain.js');` importScripts('http://www.mycdn.com/monaco-editor/min/vs/base/worker/workerMain.js');`)}`;
)}`;
} }
}; };
require(["vs/editor/editor.main"], function () { require(['vs/editor/editor.main'], function () {
// ... // ...
}); });
</script> </script>
``` ```
---- ---
# Option 2: Host on your domain a worker proxy # Option 2: Host on your domain a worker proxy
* `https://www.mydomain.com/index.html`: - `https://www.mydomain.com/index.html`:
```html ```html
<script type="text/javascript" src="http://www.mycdn.com/monaco-editor/min/vs/loader.js"></script> <script type="text/javascript" src="http://www.mycdn.com/monaco-editor/min/vs/loader.js"></script>
<script> <script>
require.config({ paths: { 'vs': 'http://www.mycdn.com/monaco-editor/min/vs' }}); require.config({
paths: { vs: 'http://www.mycdn.com/monaco-editor/min/vs' }
});
// Before loading vs/editor/editor.main, define a global MonacoEnvironment that overwrites // Before loading vs/editor/editor.main, define a global MonacoEnvironment that overwrites
// the default worker url location (used when creating WebWorkers). The problem here is that // the default worker url location (used when creating WebWorkers). The problem here is that
// HTML5 does not allow cross-domain web workers, so we need to proxy the instantiation of // HTML5 does not allow cross-domain web workers, so we need to proxy the instantiation of
// a web worker through a same-domain script // a web worker through a same-domain script
window.MonacoEnvironment = { window.MonacoEnvironment = {
getWorkerUrl: function(workerId, label) { getWorkerUrl: function (workerId, label) {
return 'monaco-editor-worker-loader-proxy.js'; return 'monaco-editor-worker-loader-proxy.js';
} }
}; };
require(["vs/editor/editor.main"], function () { require(['vs/editor/editor.main'], function () {
// ... // ...
}); });
</script> </script>
``` ```
* `https://www.mydomain.com/monaco-editor-worker-loader-proxy.js`: - `https://www.mydomain.com/monaco-editor-worker-loader-proxy.js`:
```js ```js
self.MonacoEnvironment = { self.MonacoEnvironment = {
baseUrl: 'http://www.mycdn.com/monaco-editor/min/' baseUrl: 'http://www.mycdn.com/monaco-editor/min/'
@ -73,6 +79,6 @@ self.MonacoEnvironment = {
importScripts('www.mycdn.com/monaco-editor/min/vs/base/worker/workerMain.js'); importScripts('www.mycdn.com/monaco-editor/min/vs/base/worker/workerMain.js');
``` ```
---- ---
That's it. You're good to go! :) That's it. You're good to go! :)

@ -7,27 +7,22 @@ More self-contained samples are available at [monaco-editor-samples](https://git
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head> </head>
<body> <body>
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div> <script src="monaco-editor/min/vs/loader.js"></script>
<script>
<script src="monaco-editor/min/vs/loader.js"></script> require.config({ paths: { vs: 'monaco-editor/min/vs' } });
<script> require(['vs/editor/editor.main'], function () {
require.config({ paths: { 'vs': 'monaco-editor/min/vs' }});
require(['vs/editor/editor.main'], function() {
var editor = monaco.editor.create(document.getElementById('container'), { var editor = monaco.editor.create(document.getElementById('container'), {
value: [ value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript' language: 'javascript'
}); });
}); });
</script> </script>
</body> </body>
</html> </html>
``` ```

@ -18,21 +18,19 @@ More self-contained samples are available at [monaco-editor-samples](https://git
This is the easiest method, and it allows for options to be passed into the plugin in order to select only a subset of editor features or editor languages. Read more about the [Monaco Editor Loader Plugin](https://github.com/Microsoft/monaco-editor-webpack-plugin), which is a community authored plugin. This is the easiest method, and it allows for options to be passed into the plugin in order to select only a subset of editor features or editor languages. Read more about the [Monaco Editor Loader Plugin](https://github.com/Microsoft/monaco-editor-webpack-plugin), which is a community authored plugin.
* `index.js` - `index.js`
```js ```js
import * as monaco from 'monaco-editor'; import * as monaco from 'monaco-editor';
monaco.editor.create(document.getElementById('container'), { monaco.editor.create(document.getElementById('container'), {
value: [ value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript' language: 'javascript'
}); });
``` ```
* `webpack.config.js` - `webpack.config.js`
```js ```js
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const path = require('path'); const path = require('path');
@ -44,17 +42,18 @@ module.exports = {
filename: 'app.js' filename: 'app.js'
}, },
module: { module: {
rules: [{ rules: [
{
test: /\.css$/, test: /\.css$/,
use: ['style-loader', 'css-loader'] use: ['style-loader', 'css-loader']
}, { },
{
test: /\.ttf$/, test: /\.ttf$/,
use: ['file-loader'] use: ['file-loader']
}] }
},
plugins: [
new MonacoWebpackPlugin()
] ]
},
plugins: [new MonacoWebpackPlugin()]
}; };
``` ```
@ -64,7 +63,8 @@ module.exports = {
Full working samples are available at https://github.com/Microsoft/monaco-editor-samples/tree/master/browser-esm-webpack or https://github.com/Microsoft/monaco-editor-samples/tree/master/browser-esm-webpack-small Full working samples are available at https://github.com/Microsoft/monaco-editor-samples/tree/master/browser-esm-webpack or https://github.com/Microsoft/monaco-editor-samples/tree/master/browser-esm-webpack-small
* `index.js` - `index.js`
```js ```js
import * as monaco from 'monaco-editor'; import * as monaco from 'monaco-editor';
@ -87,31 +87,28 @@ self.MonacoEnvironment = {
} }
return './editor.worker.bundle.js'; return './editor.worker.bundle.js';
} }
} };
monaco.editor.create(document.getElementById('container'), { monaco.editor.create(document.getElementById('container'), {
value: [ value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript' language: 'javascript'
}); });
``` ```
* `webpack.config.js`: - `webpack.config.js`:
```js ```js
const path = require('path'); const path = require('path');
module.exports = { module.exports = {
entry: { entry: {
"app": './index.js', app: './index.js',
// Package each language's worker and give these filenames in `getWorkerUrl` // Package each language's worker and give these filenames in `getWorkerUrl`
"editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js', 'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
"json.worker": 'monaco-editor/esm/vs/language/json/json.worker', 'json.worker': 'monaco-editor/esm/vs/language/json/json.worker',
"css.worker": 'monaco-editor/esm/vs/language/css/css.worker', 'css.worker': 'monaco-editor/esm/vs/language/css/css.worker',
"html.worker": 'monaco-editor/esm/vs/language/html/html.worker', 'html.worker': 'monaco-editor/esm/vs/language/html/html.worker',
"ts.worker": 'monaco-editor/esm/vs/language/typescript/ts.worker', 'ts.worker': 'monaco-editor/esm/vs/language/typescript/ts.worker'
}, },
output: { output: {
globalObject: 'self', globalObject: 'self',
@ -119,13 +116,16 @@ module.exports = {
path: path.resolve(__dirname, 'dist') path: path.resolve(__dirname, 'dist')
}, },
module: { module: {
rules: [{ rules: [
{
test: /\.css$/, test: /\.css$/,
use: ['style-loader', 'css-loader'] use: ['style-loader', 'css-loader']
}, { },
{
test: /\.ttf$/, test: /\.ttf$/,
use: ['file-loader'] use: ['file-loader']
}] }
]
} }
}; };
``` ```
@ -138,12 +138,13 @@ A full working sample is available at https://github.com/Microsoft/monaco-editor
When using parcel, we need to use the `getWorkerUrl` function and build the workers seperately from our main source. To simplify things, we can write a tiny bash script to build the workers for us. When using parcel, we need to use the `getWorkerUrl` function and build the workers seperately from our main source. To simplify things, we can write a tiny bash script to build the workers for us.
* `index.js` - `index.js`
```js ```js
import * as monaco from 'monaco-editor'; import * as monaco from 'monaco-editor';
self.MonacoEnvironment = { self.MonacoEnvironment = {
getWorkerUrl: function(moduleId, label) { getWorkerUrl: function (moduleId, label) {
if (label === 'json') { if (label === 'json') {
return './json.worker.js'; return './json.worker.js';
} }
@ -157,20 +158,17 @@ self.MonacoEnvironment = {
return './ts.worker.js'; return './ts.worker.js';
} }
return './editor.worker.js'; return './editor.worker.js';
}, }
}; };
monaco.editor.create(document.getElementById('container'), { monaco.editor.create(document.getElementById('container'), {
value: [ value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript' language: 'javascript'
}); });
``` ```
* `build_workers.sh` - `build_workers.sh`
```sh ```sh
ROOT=$PWD/node_modules/monaco-editor/esm/vs ROOT=$PWD/node_modules/monaco-editor/esm/vs
OPTS="--no-source-maps --log-level 1" # Parcel options - See: https://parceljs.org/cli.html OPTS="--no-source-maps --log-level 1" # Parcel options - See: https://parceljs.org/cli.html
@ -184,7 +182,7 @@ parcel build $ROOT/editor/editor.worker.js $OPTS
Then, simply run `sh ./build_workers.sh && parcel index.html`. This builds the workers into the same directory as your main bundle (usually `./dist`). If you want to change the `--out-dir` of the workers, you must change the paths in `index.js` to reflect their new location. Then, simply run `sh ./build_workers.sh && parcel index.html`. This builds the workers into the same directory as your main bundle (usually `./dist`). If you want to change the `--out-dir` of the workers, you must change the paths in `index.js` to reflect their new location.
*note - the `getWorkerUrl` paths are relative to the build directory of your src bundle* _note - the `getWorkerUrl` paths are relative to the build directory of your src bundle_
--- ---
@ -193,33 +191,33 @@ Then, simply run `sh ./build_workers.sh && parcel index.html`. This builds the w
Adding monaco editor to [Vite](https://vitejs.dev/) is simple since it has built-in support for web workers. You only need to implement the `getWorker` function (NOT the `getWorkerUrl`) to use Vite's output ([Source](https://github.com/vitejs/vite/discussions/1791#discussioncomment-321046)): Adding monaco editor to [Vite](https://vitejs.dev/) is simple since it has built-in support for web workers. You only need to implement the `getWorker` function (NOT the `getWorkerUrl`) to use Vite's output ([Source](https://github.com/vitejs/vite/discussions/1791#discussioncomment-321046)):
```js ```js
import * as monaco from 'monaco-editor' import * as monaco from 'monaco-editor';
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker' import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker' import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker' import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker' import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker' import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
self.MonacoEnvironment = { self.MonacoEnvironment = {
getWorker(_, label) { getWorker(_, label) {
if (label === 'json') { if (label === 'json') {
return new jsonWorker() return new jsonWorker();
} }
if (label === 'css' || label === 'scss' || label === 'less') { if (label === 'css' || label === 'scss' || label === 'less') {
return new cssWorker() return new cssWorker();
} }
if (label === 'html' || label === 'handlebars' || label === 'razor') { if (label === 'html' || label === 'handlebars' || label === 'razor') {
return new htmlWorker() return new htmlWorker();
} }
if (label === 'typescript' || label === 'javascript') { if (label === 'typescript' || label === 'javascript') {
return new tsWorker() return new tsWorker();
} }
return new editorWorker() return new editorWorker();
} }
} };
monaco.editor.create(document.getElementById('container'), { monaco.editor.create(document.getElementById('container'), {
value: "function hello() {\n\talert('Hello world!');\n}", value: "function hello() {\n\talert('Hello world!');\n}",
language: 'javascript' language: 'javascript'
}) });
``` ```

@ -1,4 +1,3 @@
const gulp = require('gulp'); const gulp = require('gulp');
const metadata = require('./metadata'); const metadata = require('./metadata');
const es = require('event-stream'); const es = require('event-stream');
@ -14,7 +13,7 @@ const File = require('vinyl');
const ts = require('typescript'); const ts = require('typescript');
const WEBSITE_GENERATED_PATH = path.join(__dirname, 'website/playground/new-samples'); const WEBSITE_GENERATED_PATH = path.join(__dirname, 'website/playground/new-samples');
const MONACO_EDITOR_VERSION = (function() { const MONACO_EDITOR_VERSION = (function () {
const packageJsonPath = path.join(__dirname, '..', 'package.json'); const packageJsonPath = path.join(__dirname, '..', 'package.json');
const packageJson = JSON.parse(fs.readFileSync(packageJsonPath).toString()); const packageJson = JSON.parse(fs.readFileSync(packageJsonPath).toString());
const version = packageJson.version; const version = packageJson.version;
@ -50,8 +49,8 @@ async function _execute(task) {
return; return;
} }
// this is a stream returning task // this is a stream returning task
taskResult.on('end', _ => resolve()); taskResult.on('end', (_) => resolve());
taskResult.on('error', err => reject(err)); taskResult.on('error', (err) => reject(err));
}); });
} }
@ -63,10 +62,13 @@ function taskSeries(...tasks) {
}; };
} }
const cleanReleaseTask = function(cb) { rimraf('release', { maxBusyTries: 1 }, cb); }; const cleanReleaseTask = function (cb) {
gulp.task('release', taskSeries(cleanReleaseTask, function() { rimraf('release', { maxBusyTries: 1 }, cb);
};
gulp.task(
'release',
taskSeries(cleanReleaseTask, function () {
return es.merge( return es.merge(
// dev folder // dev folder
releaseOne('dev'), releaseOne('dev'),
@ -77,24 +79,26 @@ gulp.task('release', taskSeries(cleanReleaseTask, function() {
ESM_release(), ESM_release(),
// package.json // package.json
gulp.src('package.json') gulp
.pipe(es.through(function(data) { .src('package.json')
.pipe(
es.through(function (data) {
var json = JSON.parse(data.contents.toString()); var json = JSON.parse(data.contents.toString());
json.private = false; json.private = false;
data.contents = Buffer.from(JSON.stringify(json, null, ' ')); data.contents = Buffer.from(JSON.stringify(json, null, ' '));
this.emit('data', data); this.emit('data', data);
})) })
)
.pipe(gulp.dest('release')), .pipe(gulp.dest('release')),
gulp.src('CHANGELOG.md') gulp.src('CHANGELOG.md').pipe(gulp.dest('release')),
.pipe(gulp.dest('release')),
// min-maps folder // min-maps folder
gulp.src('node_modules/monaco-editor-core/min-maps/**/*') gulp.src('node_modules/monaco-editor-core/min-maps/**/*').pipe(gulp.dest('release/min-maps')),
.pipe(gulp.dest('release/min-maps')),
// other files // other files
gulp.src([ gulp
.src([
'node_modules/monaco-editor-core/LICENSE', 'node_modules/monaco-editor-core/LICENSE',
'node_modules/monaco-editor-core/monaco.d.ts', 'node_modules/monaco-editor-core/monaco.d.ts',
'node_modules/monaco-editor-core/ThirdPartyNotices.txt', 'node_modules/monaco-editor-core/ThirdPartyNotices.txt',
@ -103,20 +107,22 @@ gulp.task('release', taskSeries(cleanReleaseTask, function() {
.pipe(addPluginDTS()) .pipe(addPluginDTS())
.pipe(addPluginThirdPartyNotices()) .pipe(addPluginThirdPartyNotices())
.pipe(gulp.dest('release')) .pipe(gulp.dest('release'))
) );
})); })
);
/** /**
* Release to `dev` or `min`. * Release to `dev` or `min`.
*/ */
function releaseOne(type) { function releaseOne(type) {
return es.merge( return es.merge(
gulp.src('node_modules/monaco-editor-core/' + type + '/**/*') gulp
.src('node_modules/monaco-editor-core/' + type + '/**/*')
.pipe(addPluginContribs(type)) .pipe(addPluginContribs(type))
.pipe(gulp.dest('release/' + type)), .pipe(gulp.dest('release/' + type)),
pluginStreams(type, 'release/' + type + '/') pluginStreams(type, 'release/' + type + '/')
) );
} }
/** /**
@ -124,7 +130,7 @@ function releaseOne(type) {
*/ */
function pluginStreams(type, destinationPath) { function pluginStreams(type, destinationPath) {
return es.merge( return es.merge(
metadata.METADATA.PLUGINS.map(function(plugin) { metadata.METADATA.PLUGINS.map(function (plugin) {
return pluginStream(plugin, type, destinationPath); return pluginStream(plugin, type, destinationPath);
}) })
); );
@ -135,25 +141,27 @@ function pluginStreams(type, destinationPath) {
*/ */
function pluginStream(plugin, type, destinationPath) { function pluginStream(plugin, type, destinationPath) {
var pluginPath = plugin.paths[`npm/${type}`]; // npm/dev or npm/min var pluginPath = plugin.paths[`npm/${type}`]; // npm/dev or npm/min
var contribPath = path.join(pluginPath, plugin.contrib.substr(plugin.modulePrefix.length)) + '.js'; var contribPath =
return ( path.join(pluginPath, plugin.contrib.substr(plugin.modulePrefix.length)) + '.js';
gulp.src([ return gulp
pluginPath + '/**/*', .src([pluginPath + '/**/*', '!' + contribPath])
'!' + contribPath .pipe(
]) es.through(function (data) {
.pipe(es.through(function(data) {
if (!/_\.contribution/.test(data.path)) { if (!/_\.contribution/.test(data.path)) {
this.emit('data', data); this.emit('data', data);
return; return;
} }
let contents = data.contents.toString(); let contents = data.contents.toString();
contents = contents.replace('define(["require", "exports"],', 'define(["require", "exports", "vs/editor/editor.api"],'); contents = contents.replace(
'define(["require", "exports"],',
'define(["require", "exports", "vs/editor/editor.api"],'
);
data.contents = Buffer.from(contents); data.contents = Buffer.from(contents);
this.emit('data', data); this.emit('data', data);
})) })
.pipe(gulp.dest(destinationPath + plugin.modulePrefix)) )
); .pipe(gulp.dest(destinationPath + plugin.modulePrefix));
} }
/** /**
@ -163,7 +171,7 @@ function pluginStream(plugin, type, destinationPath) {
* - append new AMD module 'vs/editor/editor.main' that stiches things together * - append new AMD module 'vs/editor/editor.main' that stiches things together
*/ */
function addPluginContribs(type) { function addPluginContribs(type) {
return es.through(function(data) { return es.through(function (data) {
if (!/editor\.main\.js$/.test(data.path)) { if (!/editor\.main\.js$/.test(data.path)) {
this.emit('data', data); this.emit('data', data);
return; return;
@ -176,26 +184,36 @@ function addPluginContribs(type) {
var extraContent = []; var extraContent = [];
var allPluginsModuleIds = []; var allPluginsModuleIds = [];
metadata.METADATA.PLUGINS.forEach(function(plugin) { metadata.METADATA.PLUGINS.forEach(function (plugin) {
allPluginsModuleIds.push(plugin.contrib); allPluginsModuleIds.push(plugin.contrib);
var pluginPath = plugin.paths[`npm/${type}`]; // npm/dev or npm/min var pluginPath = plugin.paths[`npm/${type}`]; // npm/dev or npm/min
var contribPath = path.join(__dirname, pluginPath, plugin.contrib.substr(plugin.modulePrefix.length)) + '.js'; var contribPath =
path.join(__dirname, pluginPath, plugin.contrib.substr(plugin.modulePrefix.length)) + '.js';
var contribContents = fs.readFileSync(contribPath).toString(); var contribContents = fs.readFileSync(contribPath).toString();
contribContents = contribContents.replace( contribContents = contribContents.replace(
/define\((['"][a-z\/\-]+\/fillers\/monaco-editor-core['"]),\[\],/, /define\((['"][a-z\/\-]+\/fillers\/monaco-editor-core['"]),\[\],/,
'define($1,[\'vs/editor/editor.api\'],' "define($1,['vs/editor/editor.api'],"
); );
extraContent.push(contribContents); extraContent.push(contribContents);
}); });
extraContent.push(`define("vs/editor/editor.main", ["vs/editor/edcore.main","${allPluginsModuleIds.join('","')}"], function(api) { return api; });`); extraContent.push(
`define("vs/editor/editor.main", ["vs/editor/edcore.main","${allPluginsModuleIds.join(
'","'
)}"], function(api) { return api; });`
);
var insertIndex = contents.lastIndexOf('//# sourceMappingURL='); var insertIndex = contents.lastIndexOf('//# sourceMappingURL=');
if (insertIndex === -1) { if (insertIndex === -1) {
insertIndex = contents.length; insertIndex = contents.length;
} }
contents = contents.substring(0, insertIndex) + '\n' + extraContent.join('\n') + '\n' + contents.substring(insertIndex); contents =
contents.substring(0, insertIndex) +
'\n' +
extraContent.join('\n') +
'\n' +
contents.substring(insertIndex);
data.contents = Buffer.from(contents); data.contents = Buffer.from(contents);
this.emit('data', data); this.emit('data', data);
@ -204,7 +222,8 @@ function addPluginContribs(type) {
function ESM_release() { function ESM_release() {
return es.merge( return es.merge(
gulp.src([ gulp
.src([
'node_modules/monaco-editor-core/esm/**/*', 'node_modules/monaco-editor-core/esm/**/*',
// we will create our own editor.api.d.ts which also contains the plugins API // we will create our own editor.api.d.ts which also contains the plugins API
'!node_modules/monaco-editor-core/esm/vs/editor/editor.api.d.ts' '!node_modules/monaco-editor-core/esm/vs/editor/editor.api.d.ts'
@ -214,7 +233,7 @@ function ESM_release() {
.pipe(gulp.dest('release/esm')), .pipe(gulp.dest('release/esm')),
ESM_pluginStreams('release/esm/') ESM_pluginStreams('release/esm/')
) );
} }
/** /**
@ -222,7 +241,7 @@ function ESM_release() {
*/ */
function ESM_pluginStreams(destinationPath) { function ESM_pluginStreams(destinationPath) {
return es.merge( return es.merge(
metadata.METADATA.PLUGINS.map(function(plugin) { metadata.METADATA.PLUGINS.map(function (plugin) {
return ESM_pluginStream(plugin, destinationPath); return ESM_pluginStream(plugin, destinationPath);
}) })
); );
@ -236,11 +255,10 @@ function ESM_pluginStreams(destinationPath) {
function ESM_pluginStream(plugin, destinationPath) { function ESM_pluginStream(plugin, destinationPath) {
const DESTINATION = path.join(__dirname, destinationPath); const DESTINATION = path.join(__dirname, destinationPath);
let pluginPath = plugin.paths[`esm`]; let pluginPath = plugin.paths[`esm`];
return ( return gulp
gulp.src([ .src([pluginPath + '/**/*'])
pluginPath + '/**/*' .pipe(
]) es.through(function (data) {
.pipe(es.through(function(data) {
if (!/(\.js$)|(\.ts$)/.test(data.path)) { if (!/(\.js$)|(\.ts$)/.test(data.path)) {
this.emit('data', data); this.emit('data', data);
return; return;
@ -257,7 +275,9 @@ function ESM_pluginStream(plugin, destinationPath) {
if (!/(^\.\/)|(^\.\.\/)/.test(importText)) { if (!/(^\.\/)|(^\.\.\/)/.test(importText)) {
// non-relative import // non-relative import
if (!/^monaco-editor-core/.test(importText)) { if (!/^monaco-editor-core/.test(importText)) {
console.error(`Non-relative import for unknown module: ${importText} in ${data.path}`); console.error(
`Non-relative import for unknown module: ${importText} in ${data.path}`
);
process.exit(0); process.exit(0);
} }
@ -266,17 +286,18 @@ function ESM_pluginStream(plugin, destinationPath) {
} }
const myFileDestPath = path.join(DESTINATION, plugin.modulePrefix, data.relative); const myFileDestPath = path.join(DESTINATION, plugin.modulePrefix, data.relative);
const importFilePath = path.join(DESTINATION, importText.substr('monaco-editor-core/esm/'.length)); const importFilePath = path.join(
let relativePath = path.relative(path.dirname(myFileDestPath), importFilePath).replace(/\\/g, '/'); DESTINATION,
importText.substr('monaco-editor-core/esm/'.length)
);
let relativePath = path
.relative(path.dirname(myFileDestPath), importFilePath)
.replace(/\\/g, '/');
if (!/(^\.\/)|(^\.\.\/)/.test(relativePath)) { if (!/(^\.\/)|(^\.\.\/)/.test(relativePath)) {
relativePath = './' + relativePath; relativePath = './' + relativePath;
} }
contents = ( contents = contents.substring(0, pos + 1) + relativePath + contents.substring(end + 1);
contents.substring(0, pos + 1)
+ relativePath
+ contents.substring(end + 1)
);
} }
} }
@ -284,8 +305,10 @@ function ESM_pluginStream(plugin, destinationPath) {
data.contents = Buffer.from(contents); data.contents = Buffer.from(contents);
this.emit('data', data); this.emit('data', data);
})) })
.pipe(es.through(function(data) { )
.pipe(
es.through(function (data) {
if (!/monaco\.contribution\.js$/.test(data.path)) { if (!/monaco\.contribution\.js$/.test(data.path)) {
this.emit('data', data); this.emit('data', data);
return; return;
@ -293,28 +316,27 @@ function ESM_pluginStream(plugin, destinationPath) {
const myFileDestPath = path.join(DESTINATION, plugin.modulePrefix, data.relative); const myFileDestPath = path.join(DESTINATION, plugin.modulePrefix, data.relative);
const apiFilePath = path.join(DESTINATION, 'vs/editor/editor.api'); const apiFilePath = path.join(DESTINATION, 'vs/editor/editor.api');
let relativePath = path.relative(path.dirname(myFileDestPath), apiFilePath).replace(/\\/g, '/'); let relativePath = path
.relative(path.dirname(myFileDestPath), apiFilePath)
.replace(/\\/g, '/');
if (!/(^\.\/)|(^\.\.\/)/.test(relativePath)) { if (!/(^\.\/)|(^\.\.\/)/.test(relativePath)) {
relativePath = './' + relativePath; relativePath = './' + relativePath;
} }
let contents = data.contents.toString(); let contents = data.contents.toString();
contents = ( contents = `import '${relativePath}';\n` + contents;
`import '${relativePath}';\n` +
contents
);
data.contents = Buffer.from(contents); data.contents = Buffer.from(contents);
this.emit('data', data); this.emit('data', data);
})) })
)
.pipe(ESM_addImportSuffix()) .pipe(ESM_addImportSuffix())
.pipe(gulp.dest(destinationPath + plugin.modulePrefix)) .pipe(gulp.dest(destinationPath + plugin.modulePrefix));
);
} }
function ESM_addImportSuffix() { function ESM_addImportSuffix() {
return es.through(function(data) { return es.through(function (data) {
if (!/\.js$/.test(data.path)) { if (!/\.js$/.test(data.path)) {
this.emit('data', data); this.emit('data', data);
return; return;
@ -332,11 +354,7 @@ function ESM_addImportSuffix() {
continue; continue;
} }
contents = ( contents = contents.substring(0, pos + 1) + importText + '.js' + contents.substring(end + 1);
contents.substring(0, pos + 1)
+ importText + '.js'
+ contents.substring(end + 1)
);
} }
data.contents = Buffer.from(contents); data.contents = Buffer.from(contents);
@ -350,24 +368,29 @@ function ESM_addImportSuffix() {
*/ */
function ESM_addPluginContribs(dest) { function ESM_addPluginContribs(dest) {
const DESTINATION = path.join(__dirname, dest); const DESTINATION = path.join(__dirname, dest);
return es.through(function(data) { return es.through(function (data) {
if (!/editor\.main\.js$/.test(data.path)) { if (!/editor\.main\.js$/.test(data.path)) {
this.emit('data', data); this.emit('data', data);
return; return;
} }
this.emit('data', new File({ this.emit(
'data',
new File({
path: data.path.replace(/editor\.main/, 'edcore.main'), path: data.path.replace(/editor\.main/, 'edcore.main'),
base: data.base, base: data.base,
contents: data.contents contents: data.contents
})); })
);
const mainFileDestPath = path.join(DESTINATION, 'vs/editor/editor.main.js'); const mainFileDestPath = path.join(DESTINATION, 'vs/editor/editor.main.js');
let mainFileImports = []; let mainFileImports = [];
metadata.METADATA.PLUGINS.forEach(function(plugin) { metadata.METADATA.PLUGINS.forEach(function (plugin) {
const contribDestPath = path.join(DESTINATION, plugin.contrib); const contribDestPath = path.join(DESTINATION, plugin.contrib);
let relativePath = path.relative(path.dirname(mainFileDestPath), contribDestPath).replace(/\\/g, '/'); let relativePath = path
.relative(path.dirname(mainFileDestPath), contribDestPath)
.replace(/\\/g, '/');
if (!/(^\.\/)|(^\.\.\/)/.test(relativePath)) { if (!/(^\.\/)|(^\.\.\/)/.test(relativePath)) {
relativePath = './' + relativePath; relativePath = './' + relativePath;
} }
@ -375,16 +398,18 @@ function ESM_addPluginContribs(dest) {
mainFileImports.push(relativePath); mainFileImports.push(relativePath);
}); });
let mainFileContents = ( let mainFileContents =
mainFileImports.map((name) => `import '${name}';`).join('\n') mainFileImports.map((name) => `import '${name}';`).join('\n') +
+ `\n\nexport * from './edcore.main';` `\n\nexport * from './edcore.main';`;
);
this.emit('data', new File({ this.emit(
'data',
new File({
path: data.path, path: data.path,
base: data.base, base: data.base,
contents: Buffer.from(mainFileContents) contents: Buffer.from(mainFileContents)
})); })
);
}); });
} }
@ -393,7 +418,7 @@ function ESM_addPluginContribs(dest) {
* - append monaco.d.ts from plugins * - append monaco.d.ts from plugins
*/ */
function addPluginDTS() { function addPluginDTS() {
return es.through(function(data) { return es.through(function (data) {
if (!/monaco\.d\.ts$/.test(data.path)) { if (!/monaco\.d\.ts$/.test(data.path)) {
this.emit('data', data); this.emit('data', data);
return; return;
@ -401,7 +426,7 @@ function addPluginDTS() {
var contents = data.contents.toString(); var contents = data.contents.toString();
var extraContent = []; var extraContent = [];
metadata.METADATA.PLUGINS.forEach(function(plugin) { metadata.METADATA.PLUGINS.forEach(function (plugin) {
var pluginPath = plugin.paths[`npm/min`]; // npm/dev or npm/min var pluginPath = plugin.paths[`npm/min`]; // npm/dev or npm/min
var dtsPath = path.join(pluginPath, '../monaco.d.ts'); var dtsPath = path.join(pluginPath, '../monaco.d.ts');
try { try {
@ -413,24 +438,32 @@ function addPluginDTS() {
} }
}); });
contents = [ contents =
[
'/*!-----------------------------------------------------------', '/*!-----------------------------------------------------------',
' * Copyright (c) Microsoft Corporation. All rights reserved.', ' * Copyright (c) Microsoft Corporation. All rights reserved.',
' * Type definitions for monaco-editor', ' * Type definitions for monaco-editor',
' * Released under the MIT license', ' * Released under the MIT license',
'*-----------------------------------------------------------*/', '*-----------------------------------------------------------*/'
].join('\n') + '\n' + contents + '\n' + extraContent.join('\n'); ].join('\n') +
'\n' +
contents +
'\n' +
extraContent.join('\n');
// Ensure consistent indentation and line endings // Ensure consistent indentation and line endings
contents = cleanFile(contents); contents = cleanFile(contents);
data.contents = Buffer.from(contents); data.contents = Buffer.from(contents);
this.emit('data', new File({ this.emit(
'data',
new File({
path: path.join(path.dirname(data.path), 'esm/vs/editor/editor.api.d.ts'), path: path.join(path.dirname(data.path), 'esm/vs/editor/editor.api.d.ts'),
base: data.base, base: data.base,
contents: Buffer.from(toExternalDTS(contents)) contents: Buffer.from(toExternalDTS(contents))
})); })
);
fs.writeFileSync('website/playground/monaco.d.ts.txt', contents); fs.writeFileSync('website/playground/monaco.d.ts.txt', contents);
fs.writeFileSync('typedoc/monaco.d.ts', contents); fs.writeFileSync('typedoc/monaco.d.ts', contents);
@ -484,7 +517,9 @@ function toExternalDTS(contents) {
* Normalize line endings and ensure consistent 4 spaces indentation * Normalize line endings and ensure consistent 4 spaces indentation
*/ */
function cleanFile(contents) { function cleanFile(contents) {
return contents.split(/\r\n|\r|\n/).map(function(line) { return contents
.split(/\r\n|\r|\n/)
.map(function (line) {
var m = line.match(/^(\t+)/); var m = line.match(/^(\t+)/);
if (!m) { if (!m) {
return line; return line;
@ -495,7 +530,8 @@ function cleanFile(contents) {
newIndent += ' '; newIndent += ' ';
} }
return newIndent + line.substring(tabsCount); return newIndent + line.substring(tabsCount);
}).join('\n'); })
.join('\n');
} }
/** /**
@ -503,7 +539,7 @@ function cleanFile(contents) {
* - append ThirdPartyNotices.txt from plugins * - append ThirdPartyNotices.txt from plugins
*/ */
function addPluginThirdPartyNotices() { function addPluginThirdPartyNotices() {
return es.through(function(data) { return es.through(function (data) {
if (!/ThirdPartyNotices\.txt$/.test(data.path)) { if (!/ThirdPartyNotices\.txt$/.test(data.path)) {
this.emit('data', data); this.emit('data', data);
return; return;
@ -511,7 +547,7 @@ function addPluginThirdPartyNotices() {
var contents = data.contents.toString(); var contents = data.contents.toString();
var extraContent = []; var extraContent = [];
metadata.METADATA.PLUGINS.forEach(function(plugin) { metadata.METADATA.PLUGINS.forEach(function (plugin) {
if (!plugin.thirdPartyNotices) { if (!plugin.thirdPartyNotices) {
return; return;
} }
@ -529,13 +565,13 @@ function addPluginThirdPartyNotices() {
}); });
} }
// --- website // --- website
const cleanWebsiteTask = function(cb) { rimraf('../monaco-editor-website', { maxBusyTries: 1 }, cb); }; const cleanWebsiteTask = function (cb) {
const buildWebsiteTask = taskSeries(cleanWebsiteTask, function() { rimraf('../monaco-editor-website', { maxBusyTries: 1 }, cb);
};
const buildWebsiteTask = taskSeries(cleanWebsiteTask, function () {
function replaceWithRelativeResource(dataPath, contents, regex, callback) { function replaceWithRelativeResource(dataPath, contents, regex, callback) {
return contents.replace(regex, function(_, m0) { return contents.replace(regex, function (_, m0) {
var filePath = path.join(path.dirname(dataPath), m0); var filePath = path.join(path.dirname(dataPath), m0);
return callback(m0, fs.readFileSync(filePath)); return callback(m0, fs.readFileSync(filePath));
}); });
@ -544,12 +580,13 @@ const buildWebsiteTask = taskSeries(cleanWebsiteTask, function() {
var waiting = 0; var waiting = 0;
var done = false; var done = false;
return ( return es
es.merge( .merge(
gulp.src([ gulp
'website/**/*' .src(['website/**/*'], { dot: true })
], { dot: true }) .pipe(
.pipe(es.through(function(data) { es.through(
function (data) {
if (!data.contents || !/\.(html)$/.test(data.path) || /new-samples/.test(data.path)) { if (!data.contents || !/\.(html)$/.test(data.path) || /new-samples/.test(data.path)) {
return this.emit('data', data); return this.emit('data', data);
} }
@ -560,55 +597,82 @@ const buildWebsiteTask = taskSeries(cleanWebsiteTask, function() {
contents = contents.replace(/{{year}}/g, new Date().getFullYear()); contents = contents.replace(/{{year}}/g, new Date().getFullYear());
// Preload xhr contents // Preload xhr contents
contents = replaceWithRelativeResource(data.path, contents, /<pre data-preload="([^"]+)".*/g, function(m0, fileContents) { contents = replaceWithRelativeResource(
data.path,
contents,
/<pre data-preload="([^"]+)".*/g,
function (m0, fileContents) {
return ( return (
'<pre data-preload="' + m0 + '" style="display:none">' '<pre data-preload="' +
+ fileContents.toString('utf8') m0 +
'" style="display:none">' +
fileContents
.toString('utf8')
.replace(/&/g, '&amp;') .replace(/&/g, '&amp;')
.replace(/</g, '&lt;') .replace(/</g, '&lt;')
.replace(/>/g, '&gt;') .replace(/>/g, '&gt;') +
+ '</pre>' '</pre>'
);
}
); );
});
// Inline fork.png // Inline fork.png
contents = replaceWithRelativeResource(data.path, contents, /src="(\.\/fork.png)"/g, function(m0, fileContents) { contents = replaceWithRelativeResource(
return ( data.path,
'src="data:image/png;base64,' + fileContents.toString('base64') + '"' contents,
/src="(\.\/fork.png)"/g,
function (m0, fileContents) {
return 'src="data:image/png;base64,' + fileContents.toString('base64') + '"';
}
); );
});
var allCSS = ''; var allCSS = '';
var tmpcontents = replaceWithRelativeResource(data.path, contents, /<link data-inline="yes-please" href="([^"]+)".*/g, function(m0, fileContents) { var tmpcontents = replaceWithRelativeResource(
data.path,
contents,
/<link data-inline="yes-please" href="([^"]+)".*/g,
function (m0, fileContents) {
allCSS += fileContents.toString('utf8'); allCSS += fileContents.toString('utf8');
return ''; return '';
}); }
);
tmpcontents = tmpcontents.replace(/<script.*/g, ''); tmpcontents = tmpcontents.replace(/<script.*/g, '');
tmpcontents = tmpcontents.replace(/<link.*/g, ''); tmpcontents = tmpcontents.replace(/<link.*/g, '');
waiting++; waiting++;
uncss(tmpcontents, { uncss(
tmpcontents,
{
raw: allCSS, raw: allCSS,
ignore: [/\.alert\b/, /\.alert-error\b/, /\.playground-page\b/] ignore: [/\.alert\b/, /\.alert-error\b/, /\.playground-page\b/]
}, function(err, output) { },
function (err, output) {
waiting--; waiting--;
if (!err) { if (!err) {
output = new CleanCSS().minify(output).styles; output = new CleanCSS().minify(output).styles;
var isFirst = true; var isFirst = true;
contents = contents.replace(/<link data-inline="yes-please" href="([^"]+)".*/g, function(_, m0) { contents = contents.replace(
/<link data-inline="yes-please" href="([^"]+)".*/g,
function (_, m0) {
if (isFirst) { if (isFirst) {
isFirst = false; isFirst = false;
return '<style>' + output + '</style>'; return '<style>' + output + '</style>';
} }
return ''; return '';
}); }
);
} }
// Inline javascript // Inline javascript
contents = replaceWithRelativeResource(data.path, contents, /<script data-inline="yes-please" src="([^"]+)".*/g, function(m0, fileContents) { contents = replaceWithRelativeResource(
data.path,
contents,
/<script data-inline="yes-please" src="([^"]+)".*/g,
function (m0, fileContents) {
return '<script>' + fileContents.toString('utf8') + '</script>'; return '<script>' + fileContents.toString('utf8') + '</script>';
}); }
);
data.contents = Buffer.from(contents.split(/\r\n|\r|\n/).join('\n')); data.contents = Buffer.from(contents.split(/\r\n|\r|\n/).join('\n'));
this.emit('data', data); this.emit('data', data);
@ -616,21 +680,26 @@ const buildWebsiteTask = taskSeries(cleanWebsiteTask, function() {
if (done && waiting === 0) { if (done && waiting === 0) {
this.emit('end'); this.emit('end');
} }
}.bind(this)); }.bind(this)
);
}, function() { },
function () {
done = true; done = true;
if (waiting === 0) { if (waiting === 0) {
this.emit('end'); this.emit('end');
} }
})) }
)
)
.pipe(gulp.dest('../monaco-editor-website')) .pipe(gulp.dest('../monaco-editor-website'))
) )
.pipe(es.through(function(data) { .pipe(
es.through(
function (data) {
this.emit('data', data); this.emit('data', data);
}, function() { },
function () {
// temporarily create package.json so that npm install doesn't bark // temporarily create package.json so that npm install doesn't bark
fs.writeFileSync('../monaco-editor-website/package.json', '{}'); fs.writeFileSync('../monaco-editor-website/package.json', '{}');
fs.writeFileSync('../monaco-editor-website/.nojekyll', ''); fs.writeFileSync('../monaco-editor-website/.nojekyll', '');
@ -640,20 +709,20 @@ const buildWebsiteTask = taskSeries(cleanWebsiteTask, function() {
fs.unlinkSync('../monaco-editor-website/package.json'); fs.unlinkSync('../monaco-editor-website/package.json');
this.emit('end'); this.emit('end');
})) }
)
); );
}); });
gulp.task('build-website', buildWebsiteTask); gulp.task('build-website', buildWebsiteTask);
gulp.task('prepare-website-branch', async function() { gulp.task('prepare-website-branch', async function () {
cp.execSync('git init', { cp.execSync('git init', {
cwd: path.join(__dirname, '../monaco-editor-website') cwd: path.join(__dirname, '../monaco-editor-website')
}); });
let remoteUrl = cp.execSync('git remote get-url origin') let remoteUrl = cp.execSync('git remote get-url origin');
let committerUserName = cp.execSync('git log --format=\'%an\' -1'); let committerUserName = cp.execSync("git log --format='%an' -1");
let committerEmail = cp.execSync('git log --format=\'%ae\' -1'); let committerEmail = cp.execSync("git log --format='%ae' -1");
cp.execSync(`git config user.name ${committerUserName}`, { cp.execSync(`git config user.name ${committerUserName}`, {
cwd: path.join(__dirname, '../monaco-editor-website') cwd: path.join(__dirname, '../monaco-editor-website')
@ -677,9 +746,9 @@ gulp.task('prepare-website-branch', async function() {
console.log('RUN monaco-editor-website>git push origin gh-pages --force'); console.log('RUN monaco-editor-website>git push origin gh-pages --force');
}); });
const generateTestSamplesTask = function() { const generateTestSamplesTask = function () {
var sampleNames = fs.readdirSync(path.join(__dirname, 'test/samples')); var sampleNames = fs.readdirSync(path.join(__dirname, 'test/samples'));
var samples = sampleNames.map(function(sampleName) { var samples = sampleNames.map(function (sampleName) {
var samplePath = path.join(__dirname, 'test/samples', sampleName); var samplePath = path.join(__dirname, 'test/samples', sampleName);
var sampleContent = fs.readFileSync(samplePath).toString(); var sampleContent = fs.readFileSync(samplePath).toString();
return { return {
@ -687,9 +756,13 @@ const generateTestSamplesTask = function() {
content: sampleContent content: sampleContent
}; };
}); });
var prefix = '//This is a generated file via gulp generate-test-samples\ndefine([], function() { return'; var prefix =
var suffix = '; });' '//This is a generated file via gulp generate-test-samples\ndefine([], function() { return';
fs.writeFileSync(path.join(__dirname, 'test/samples-all.generated.js'), prefix + JSON.stringify(samples, null, '\t') + suffix ); var suffix = '; });';
fs.writeFileSync(
path.join(__dirname, 'test/samples-all.generated.js'),
prefix + JSON.stringify(samples, null, '\t') + suffix
);
var PLAY_SAMPLES = require(path.join(WEBSITE_GENERATED_PATH, 'all.js')).PLAY_SAMPLES; var PLAY_SAMPLES = require(path.join(WEBSITE_GENERATED_PATH, 'all.js')).PLAY_SAMPLES;
var locations = []; var locations = [];
@ -745,13 +818,16 @@ const generateTestSamplesTask = function() {
'});', '});',
'</script>', '</script>',
'</body>', '</body>',
'</html>', '</html>'
]; ];
fs.writeFileSync(path.join(__dirname, 'test/playground.generated/' + sampleId + '.html'), result.join('\n')); fs.writeFileSync(
path.join(__dirname, 'test/playground.generated/' + sampleId + '.html'),
result.join('\n')
);
locations.push({ locations.push({
path: sampleId + '.html', path: sampleId + '.html',
name: sample.chapter + ' &gt; ' + sample.name name: sample.chapter + ' &gt; ' + sample.name
}) });
} }
var index = [ var index = [
@ -764,21 +840,31 @@ const generateTestSamplesTask = function() {
'<body>', '<body>',
'<a class="loading-opts" href="index.html">[&lt;&lt; BACK]</a><br/>', '<a class="loading-opts" href="index.html">[&lt;&lt; BACK]</a><br/>',
'THIS IS A GENERATED FILE VIA gulp generate-test-samples<br/><br/>', 'THIS IS A GENERATED FILE VIA gulp generate-test-samples<br/><br/>',
locations.map(function(location) { locations
return '<a class="loading-opts" href="playground.generated/' + location.path + '">' + location.name + '</a>'; .map(function (location) {
}).join('<br/>\n'), return (
'<a class="loading-opts" href="playground.generated/' +
location.path +
'">' +
location.name +
'</a>'
);
})
.join('<br/>\n'),
'<script src="../metadata.js"></script>', '<script src="../metadata.js"></script>',
'<script src="dev-setup.js"></script>', '<script src="dev-setup.js"></script>',
'</body>', '</body>',
'</html>', '</html>'
] ];
fs.writeFileSync(path.join(__dirname, 'test/playground.generated/index.html'), index.join('\n')); fs.writeFileSync(path.join(__dirname, 'test/playground.generated/index.html'), index.join('\n'));
}; };
function createSimpleServer(rootDir, port) { function createSimpleServer(rootDir, port) {
yaserver.createServer({ yaserver
.createServer({
rootDir: rootDir rootDir: rootDir
}).then((staticServer) => { })
.then((staticServer) => {
const server = http.createServer((request, response) => { const server = http.createServer((request, response) => {
return staticServer.handle(request, response); return staticServer.handle(request, response);
}); });
@ -790,8 +876,11 @@ function createSimpleServer(rootDir, port) {
gulp.task('generate-test-samples', taskSeries(generateTestSamplesTask)); gulp.task('generate-test-samples', taskSeries(generateTestSamplesTask));
gulp.task('simpleserver', taskSeries(generateTestSamplesTask, function() { gulp.task(
'simpleserver',
taskSeries(generateTestSamplesTask, function () {
const SERVER_ROOT = path.normalize(path.join(__dirname, '../../')); const SERVER_ROOT = path.normalize(path.join(__dirname, '../../'));
createSimpleServer(SERVER_ROOT, 8080); createSimpleServer(SERVER_ROOT, 8080);
createSimpleServer(SERVER_ROOT, 8088); createSimpleServer(SERVER_ROOT, 8088);
})); })
);

@ -1,5 +1,4 @@
(function () { (function () {
var METADATA = { var METADATA = {
CORE: { CORE: {
paths: { paths: {
@ -8,7 +7,7 @@
'npm/min': 'node_modules/monaco-editor-core/min/vs', 'npm/min': 'node_modules/monaco-editor-core/min/vs',
built: '/vscode/out-monaco-editor-core/min/vs', built: '/vscode/out-monaco-editor-core/min/vs',
releaseDev: 'release/dev/vs', releaseDev: 'release/dev/vs',
releaseMin: 'release/min/vs', releaseMin: 'release/min/vs'
} }
}, },
PLUGINS: [ PLUGINS: [
@ -22,7 +21,7 @@
src: './monaco-typescript/release/dev', src: './monaco-typescript/release/dev',
'npm/dev': 'node_modules/monaco-typescript/release/dev', 'npm/dev': 'node_modules/monaco-typescript/release/dev',
'npm/min': 'node_modules/monaco-typescript/release/min', 'npm/min': 'node_modules/monaco-typescript/release/min',
esm: 'node_modules/monaco-typescript/release/esm', esm: 'node_modules/monaco-typescript/release/esm'
} }
}, },
{ {
@ -34,7 +33,7 @@
src: './monaco-css/release/dev', src: './monaco-css/release/dev',
'npm/dev': 'node_modules/monaco-css/release/dev', 'npm/dev': 'node_modules/monaco-css/release/dev',
'npm/min': 'node_modules/monaco-css/release/min', 'npm/min': 'node_modules/monaco-css/release/min',
esm: 'node_modules/monaco-css/release/esm', esm: 'node_modules/monaco-css/release/esm'
} }
}, },
{ {
@ -46,7 +45,7 @@
src: './monaco-json/release/dev', src: './monaco-json/release/dev',
'npm/dev': 'node_modules/monaco-json/release/dev', 'npm/dev': 'node_modules/monaco-json/release/dev',
'npm/min': 'node_modules/monaco-json/release/min', 'npm/min': 'node_modules/monaco-json/release/min',
esm: 'node_modules/monaco-json/release/esm', esm: 'node_modules/monaco-json/release/esm'
} }
}, },
{ {
@ -59,7 +58,7 @@
src: './monaco-html/release/dev', src: './monaco-html/release/dev',
'npm/dev': 'node_modules/monaco-html/release/dev', 'npm/dev': 'node_modules/monaco-html/release/dev',
'npm/min': 'node_modules/monaco-html/release/min', 'npm/min': 'node_modules/monaco-html/release/min',
esm: 'node_modules/monaco-html/release/esm', esm: 'node_modules/monaco-html/release/esm'
} }
}, },
{ {
@ -72,16 +71,15 @@
src: './monaco-languages/release/dev', src: './monaco-languages/release/dev',
'npm/dev': 'node_modules/monaco-languages/release/dev', 'npm/dev': 'node_modules/monaco-languages/release/dev',
'npm/min': 'node_modules/monaco-languages/release/min', 'npm/min': 'node_modules/monaco-languages/release/min',
esm: 'node_modules/monaco-languages/release/esm', esm: 'node_modules/monaco-languages/release/esm'
} }
} }
] ]
} };
if (typeof exports !== 'undefined') { if (typeof exports !== 'undefined') {
exports.METADATA = METADATA exports.METADATA = METADATA;
} else { } else {
self.METADATA = METADATA; self.METADATA = METADATA;
} }
})(); })();

@ -1,29 +1,29 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style> <style>
html, html,
body { body {
height: 100%; height: 100%;
} }
body { body {
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
} }
#container { #container {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
} }
.dev-setup-control { .dev-setup-control {
display: none; display: none;
} }
</style> </style>
</head> </head>
<body> <body>

@ -1,5 +1,5 @@
const init = () => { const init = () => {
loadEditor(function() { loadEditor(function () {
// create the editor // create the editor
const target = document.getElementById('container'); const target = document.getElementById('container');
const editor = monaco.editor.create(target, { language: 'html' }); const editor = monaco.editor.create(target, { language: 'html' });

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<script type="module"> <script type="module">
class MonacoEditorElement extends HTMLElement { class MonacoEditorElement extends HTMLElement {
constructor() { constructor() {
super(); super();
this.style = 'display: block;'; this.style = 'display: block;';
@ -12,20 +12,20 @@ class MonacoEditorElement extends HTMLElement {
iframe.style = `width: 100%; height: 100%;`; iframe.style = `width: 100%; height: 100%;`;
shadow.appendChild(iframe); shadow.appendChild(iframe);
} }
} }
customElements.define('monaco-editor', MonacoEditorElement); customElements.define('monaco-editor', MonacoEditorElement);
</script> </script>
<style> <style>
section { section {
margin: 80px; margin: 80px;
} }
iframe, iframe,
monaco-editor { monaco-editor {
width: 640px; width: 640px;
height: 400px; height: 400px;
} }
</style> </style>
</head> </head>
<body> <body>
@ -33,7 +33,7 @@ monaco-editor {
<h1>Monaco in a shadowRoot + iframe context</h1> <h1>Monaco in a shadowRoot + iframe context</h1>
<monaco-editor></monaco-editor> <monaco-editor></monaco-editor>
</section> </section>
<hr> <hr />
<section> <section>
<h1>Monaco in an iframe context</h1> <h1>Monaco in an iframe context</h1>
<iframe src="iframe.html?editor=src"></iframe> <iframe src="iframe.html?editor=src"></iframe>

@ -18,11 +18,11 @@
<iframe id="myIframe"></iframe> <iframe id="myIframe"></iframe>
<br /> <br />
<script> <script>
var myIframe = document.getElementById("myIframe"); var myIframe = document.getElementById('myIframe');
myIframe.style.width = "400px"; myIframe.style.width = '400px';
myIframe.style.height = "100px"; myIframe.style.height = '100px';
myIframe.style.display = "block"; myIframe.style.display = 'block';
myIframe.style.visibility = "visible"; myIframe.style.visibility = 'visible';
const longText = `function x() {\n\tconsole.log("Hello world!");\n}function x() const longText = `function x() {\n\tconsole.log("Hello world!");\n}function x()
{\n\tconsole.log("Hello world!");\n}function x() {\n\tconsole.log("Hello world!");\n}function x() {\n\tconsole.log("Hello world!");\n}function x() {\n\tconsole.log("Hello world!");\n}function x()
{\n\tconsole.log("Hello world!");\n}function x() {\n\tconsole.log("Hello world!");\n}function x() {\n\tconsole.log("Hello world!");\n}function x() {\n\tconsole.log("Hello world!");\n}function x()
@ -39,30 +39,27 @@
const injectSourceFiles = function () { const injectSourceFiles = function () {
iframeWin.require.config({ iframeWin.require.config({
paths: { paths: {
vs: "/vscode/out/vs", vs: '/vscode/out/vs'
}, }
}); });
iframeWin.require(["vs/editor/editor.main"], function () { iframeWin.require(['vs/editor/editor.main'], function () {
const container = iframeDoc.createElement("div"); const container = iframeDoc.createElement('div');
container.setAttribute("id", "container"); container.setAttribute('id', 'container');
container.style.height = "100vh"; container.style.height = '100vh';
iframeDoc.body.appendChild(container); iframeDoc.body.appendChild(container);
var editor = iframeWin.monaco.editor.create( var editor = iframeWin.monaco.editor.create(iframeDoc.getElementById('container'), {
iframeDoc.getElementById("container"),
{
value: longText, value: longText,
language: "javascript", language: 'javascript'
} });
);
iframeWin.onresize = function () { iframeWin.onresize = function () {
editor.layout(); editor.layout();
}; };
}); });
}; };
const script = iframeDoc.createElement("script"); const script = iframeDoc.createElement('script');
script.src = "/vscode/out/vs/loader.js"; script.src = '/vscode/out/vs/loader.js';
script.onload = injectSourceFiles; script.onload = injectSourceFiles;
iframeDoc.head.appendChild(script); iframeDoc.head.appendChild(script);
</script> </script>

@ -1,29 +1,29 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style> <style>
html, html,
body { body {
height: 100%; height: 100%;
} }
body { body {
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
} }
#container { #container {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
} }
.dev-setup-control { .dev-setup-control {
display: none; display: none;
} }
</style> </style>
</head> </head>
<body> <body>

@ -1,5 +1,5 @@
const init = () => { const init = () => {
loadEditor(function() { loadEditor(function () {
// create the editor // create the editor
const target = document.getElementById('container'); const target = document.getElementById('container');
const editor = monaco.editor.create(target, { language: 'html' }); const editor = monaco.editor.create(target, { language: 'html' });

@ -1,8 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head> </head>
</head>
<body> <body>
<iframe src="http://localhost:8088/monaco-editor/test/2264/iframe.html?editor=src" style="width:800px;height:600px;" sandbox="allow-same-origin allow-scripts allow-popups allow-modals allow-forms allow-downloads"></iframe> <iframe
src="http://localhost:8088/monaco-editor/test/2264/iframe.html?editor=src"
style="width: 800px; height: 600px"
sandbox="allow-same-origin allow-scripts allow-popups allow-modals allow-forms allow-downloads"
></iframe>
</body> </body>
</html> </html>

@ -1,13 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head> </head>
<body> <body>
<h2>Colorize example</h2>
<h2>Colorize example</h2> <pre id="code" data-lang="text/css" style="width: 500px">
<pre id="code" data-lang="text/css" style="width:500px;">
/* Some example CSS */ /* Some example CSS */
@import url("something.css"); @import url("something.css");
@ -41,14 +40,15 @@ code {
font-size: 80%; font-size: 80%;
color: #418A8A; color: #418A8A;
} }
</pre> </pre
>
<script src="../metadata.js"></script> <script src="../metadata.js"></script>
<script src="dev-setup.js"></script> <script src="dev-setup.js"></script>
<script> <script>
loadEditor(function() { loadEditor(function () {
monaco.editor.colorizeElement(document.getElementById('code')); monaco.editor.colorizeElement(document.getElementById('code'));
}); });
</script> </script>
</body> </body>
</html> </html>

@ -1,26 +1,27 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head> </head>
<body> <body>
<h2>Monaco Editor wrong cross origin</h2>
<h2>Monaco Editor wrong cross origin</h2> <div style="clear: both"></div>
<div
id="container"
style="float: left; width: 800px; height: 450px; border: 1px solid grey"
></div>
<div style="clear: both"></div>
<div style="clear:both"></div> <script src="../metadata.js"></script>
<div id="container" style="float:left;width:800px;height:450px;border: 1px solid grey"></div> <script src="dev-setup.js"></script>
<div style="clear:both"></div> <script>
loadEditor(function () {
<script src="../metadata.js"></script>
<script src="dev-setup.js"></script>
<script>
loadEditor(function() {
monaco.editor.create(document.getElementById('container'), { monaco.editor.create(document.getElementById('container'), {
value: document.documentElement.innerHTML, value: document.documentElement.innerHTML,
language: 'css' language: 'css'
}); });
}, 'http://localhost:8088'); }, 'http://localhost:8088');
</script> </script>
</body>
</body>
</html> </html>

@ -1,33 +1,34 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head> </head>
<body> <body>
<h2>Monaco Editor cross origin correct</h2>
<h2>Monaco Editor cross origin correct</h2> <div style="clear: both"></div>
<div
id="container"
style="float: left; width: 800px; height: 450px; border: 1px solid grey"
></div>
<div style="clear: both"></div>
<div style="clear:both"></div> <script src="../metadata.js"></script>
<div id="container" style="float:left;width:800px;height:450px;border: 1px solid grey"></div> <script src="dev-setup.js"></script>
<div style="clear:both"></div> <script>
<script src="../metadata.js"></script>
<script src="dev-setup.js"></script>
<script>
window.MonacoEnvironment = { window.MonacoEnvironment = {
getWorkerUrl: function() { getWorkerUrl: function () {
return 'cross-origin-worker-proxy.js#http://localhost:8088' + RESOLVED_CORE_PATH; return 'cross-origin-worker-proxy.js#http://localhost:8088' + RESOLVED_CORE_PATH;
} }
}; };
</script> </script>
<script> <script>
loadEditor(function() { loadEditor(function () {
monaco.editor.create(document.getElementById('container'), { monaco.editor.create(document.getElementById('container'), {
value: document.documentElement.innerHTML, value: document.documentElement.innerHTML,
language: 'css' language: 'css'
}); });
}, 'http://localhost:8088'); }, 'http://localhost:8088');
</script> </script>
</body>
</body>
</html> </html>

@ -1,13 +1,17 @@
(function() { (function () {
let IS_FILE_PROTOCOL = window.location.protocol === 'file:';
let IS_FILE_PROTOCOL = (window.location.protocol === 'file:');
let DIRNAME = null; let DIRNAME = null;
if (IS_FILE_PROTOCOL) { if (IS_FILE_PROTOCOL) {
let port = window.location.port; let port = window.location.port;
if (port.length > 0) { if (port.length > 0) {
port = ':' + port; port = ':' + port;
} }
DIRNAME = window.location.protocol + '//' + window.location.hostname + port + window.location.pathname.substr(0, window.location.pathname.lastIndexOf('/')); DIRNAME =
window.location.protocol +
'//' +
window.location.hostname +
port +
window.location.pathname.substr(0, window.location.pathname.lastIndexOf('/'));
let bases = document.getElementsByTagName('base'); let bases = document.getElementsByTagName('base');
if (bases.length > 0) { if (bases.length > 0) {
@ -15,14 +19,13 @@
} }
} }
let LOADER_OPTS = (function () {
let LOADER_OPTS = (function() {
function parseQueryString() { function parseQueryString() {
let str = window.location.search; let str = window.location.search;
str = str.replace(/^\?/, ''); str = str.replace(/^\?/, '');
let pieces = str.split(/&/); let pieces = str.split(/&/);
let result = {}; let result = {};
pieces.forEach(function(piece) { pieces.forEach(function (piece) {
let config = piece.split(/=/); let config = piece.split(/=/);
result[config[0]] = config[1]; result[config[0]] = config[1];
}); });
@ -31,7 +34,7 @@
let overwrites = parseQueryString(); let overwrites = parseQueryString();
let result = {}; let result = {};
result['editor'] = overwrites['editor'] || 'npm/dev'; result['editor'] = overwrites['editor'] || 'npm/dev';
METADATA.PLUGINS.map(function(plugin) { METADATA.PLUGINS.map(function (plugin) {
result[plugin.name] = overwrites[plugin.name] || 'npm/dev'; result[plugin.name] = overwrites[plugin.name] || 'npm/dev';
}); });
return result; return result;
@ -41,10 +44,17 @@
if (port.length > 0) { if (port.length > 0) {
port = ':' + port; port = ':' + port;
} }
return window.location.protocol + '//' + window.location.hostname + port + window.location.pathname + search + window.location.hash; return (
window.location.protocol +
'//' +
window.location.hostname +
port +
window.location.pathname +
search +
window.location.hash
);
} }
function Component(name, modulePrefix, paths, contrib) { function Component(name, modulePrefix, paths, contrib) {
this.name = name; this.name = name;
this.modulePrefix = modulePrefix; this.modulePrefix = modulePrefix;
@ -52,10 +62,10 @@
this.contrib = contrib; this.contrib = contrib;
this.selectedPath = LOADER_OPTS[name]; this.selectedPath = LOADER_OPTS[name];
} }
Component.prototype.isRelease = function() { Component.prototype.isRelease = function () {
return /release/.test(this.selectedPath); return /release/.test(this.selectedPath);
}; };
Component.prototype.getResolvedPath = function(PATH_PREFIX) { Component.prototype.getResolvedPath = function (PATH_PREFIX) {
let resolvedPath = this.paths[this.selectedPath]; let resolvedPath = this.paths[this.selectedPath];
if (/\.\//.test(resolvedPath)) { if (/\.\//.test(resolvedPath)) {
// starts with ./ => treat as relative to repo root // starts with ./ => treat as relative to repo root
@ -64,7 +74,11 @@
} else { } else {
resolvedPath = PATH_PREFIX + '/monaco-editor/' + resolvedPath; resolvedPath = PATH_PREFIX + '/monaco-editor/' + resolvedPath;
} }
} else if (this.selectedPath === 'npm/dev' || this.selectedPath === 'npm/min' || this.isRelease()) { } else if (
this.selectedPath === 'npm/dev' ||
this.selectedPath === 'npm/min' ||
this.isRelease()
) {
if (IS_FILE_PROTOCOL) { if (IS_FILE_PROTOCOL) {
resolvedPath = DIRNAME + '/../' + resolvedPath; resolvedPath = DIRNAME + '/../' + resolvedPath;
} else { } else {
@ -79,46 +93,58 @@
} }
return resolvedPath; return resolvedPath;
}; };
Component.prototype.generateLoaderConfig = function(dest, PATH_PREFIX) { Component.prototype.generateLoaderConfig = function (dest, PATH_PREFIX) {
dest[this.modulePrefix] = this.getResolvedPath(PATH_PREFIX); dest[this.modulePrefix] = this.getResolvedPath(PATH_PREFIX);
}; };
Component.prototype.generateUrlForPath = function(pathName) { Component.prototype.generateUrlForPath = function (pathName) {
let NEW_LOADER_OPTS = {}; let NEW_LOADER_OPTS = {};
Object.keys(LOADER_OPTS).forEach(function(key) { Object.keys(LOADER_OPTS).forEach(function (key) {
NEW_LOADER_OPTS[key] = (LOADER_OPTS[key] === 'npm/dev' ? undefined : LOADER_OPTS[key]); NEW_LOADER_OPTS[key] = LOADER_OPTS[key] === 'npm/dev' ? undefined : LOADER_OPTS[key];
}); });
NEW_LOADER_OPTS[this.name] = (pathName === 'npm/dev' ? undefined : pathName); NEW_LOADER_OPTS[this.name] = pathName === 'npm/dev' ? undefined : pathName;
let search = Object.keys(NEW_LOADER_OPTS).map(function(key) { let search = Object.keys(NEW_LOADER_OPTS)
.map(function (key) {
let value = NEW_LOADER_OPTS[key]; let value = NEW_LOADER_OPTS[key];
if (value) { if (value) {
return key + '=' + value; return key + '=' + value;
} }
return ''; return '';
}).filter(function(assignment) { return !!assignment; }).join('&amp;'); })
.filter(function (assignment) {
return !!assignment;
})
.join('&amp;');
if (search.length > 0) { if (search.length > 0) {
search = '?' + search; search = '?' + search;
} }
return toHREF(search); return toHREF(search);
}; };
Component.prototype.renderLoadingOptions = function() { Component.prototype.renderLoadingOptions = function () {
return '<strong style="width:130px;display:inline-block;">' + this.name + '</strong>:&#160;&#160;&#160;' + Object.keys(this.paths).map(function(pathName) { return (
'<strong style="width:130px;display:inline-block;">' +
this.name +
'</strong>:&#160;&#160;&#160;' +
Object.keys(this.paths)
.map(
function (pathName) {
if (pathName === this.selectedPath) { if (pathName === this.selectedPath) {
return '<strong>' + pathName + '</strong>'; return '<strong>' + pathName + '</strong>';
} }
return '<a href="' + this.generateUrlForPath(pathName) + '">' + pathName + '</a>'; return '<a href="' + this.generateUrlForPath(pathName) + '">' + pathName + '</a>';
}.bind(this)).join('&#160;&#160;&#160;'); }.bind(this)
)
.join('&#160;&#160;&#160;')
);
}; };
let RESOLVED_CORE = new Component('editor', 'vs', METADATA.CORE.paths); let RESOLVED_CORE = new Component('editor', 'vs', METADATA.CORE.paths);
self.RESOLVED_CORE_PATH = RESOLVED_CORE.getResolvedPath(''); self.RESOLVED_CORE_PATH = RESOLVED_CORE.getResolvedPath('');
let RESOLVED_PLUGINS = METADATA.PLUGINS.map(function(plugin) { let RESOLVED_PLUGINS = METADATA.PLUGINS.map(function (plugin) {
return new Component(plugin.name, plugin.modulePrefix, plugin.paths, plugin.contrib); return new Component(plugin.name, plugin.modulePrefix, plugin.paths, plugin.contrib);
}); });
METADATA = null; METADATA = null;
function loadScript(path, callback) { function loadScript(path, callback) {
let script = document.createElement('script'); let script = document.createElement('script');
script.onload = callback; script.onload = callback;
@ -128,15 +154,14 @@
document.head.appendChild(script); document.head.appendChild(script);
} }
(function () {
(function() {
let allComponents = [RESOLVED_CORE]; let allComponents = [RESOLVED_CORE];
if (!RESOLVED_CORE.isRelease()) { if (!RESOLVED_CORE.isRelease()) {
allComponents = allComponents.concat(RESOLVED_PLUGINS); allComponents = allComponents.concat(RESOLVED_PLUGINS);
} }
let div = document.createElement('div'); let div = document.createElement('div');
div.className = 'dev-setup-control' div.className = 'dev-setup-control';
div.style.position = 'fixed'; div.style.position = 'fixed';
div.style.top = 0; div.style.top = 0;
div.style.right = 0; div.style.right = 0;
@ -144,7 +169,14 @@
div.style.padding = '5px 20px 5px 5px'; div.style.padding = '5px 20px 5px 5px';
div.style.zIndex = '1000'; div.style.zIndex = '1000';
div.innerHTML = '<ul><li>' + allComponents.map(function(component) { return component.renderLoadingOptions(); }).join('</li><li>') + '</li></ul>'; div.innerHTML =
'<ul><li>' +
allComponents
.map(function (component) {
return component.renderLoadingOptions();
})
.join('</li><li>') +
'</li></ul>';
document.body.appendChild(div); document.body.appendChild(div);
@ -152,25 +184,24 @@
for (let i = 0; i < aElements.length; i++) { for (let i = 0; i < aElements.length; i++) {
let aElement = aElements[i]; let aElement = aElements[i];
if (aElement.className === 'loading-opts') { if (aElement.className === 'loading-opts') {
aElement.href += window.location.search aElement.href += window.location.search;
} }
} }
})(); })();
self.getCodiconPath = function(PATH_PREFIX) { self.getCodiconPath = function (PATH_PREFIX) {
PATH_PREFIX = PATH_PREFIX || ''; PATH_PREFIX = PATH_PREFIX || '';
const result = RESOLVED_CORE.getResolvedPath(PATH_PREFIX); const result = RESOLVED_CORE.getResolvedPath(PATH_PREFIX);
return result + '/base/browser/ui/codicons/codicon/codicon.ttf'; return result + '/base/browser/ui/codicons/codicon/codicon.ttf';
}; };
self.loadEditor = function (callback, PATH_PREFIX) {
self.loadEditor = function(callback, PATH_PREFIX) {
PATH_PREFIX = PATH_PREFIX || ''; PATH_PREFIX = PATH_PREFIX || '';
loadScript(RESOLVED_CORE.getResolvedPath(PATH_PREFIX) + '/loader.js', function() { loadScript(RESOLVED_CORE.getResolvedPath(PATH_PREFIX) + '/loader.js', function () {
let loaderPathsConfig = {}; let loaderPathsConfig = {};
if (!RESOLVED_CORE.isRelease()) { if (!RESOLVED_CORE.isRelease()) {
RESOLVED_PLUGINS.forEach(function(plugin) { RESOLVED_PLUGINS.forEach(function (plugin) {
plugin.generateLoaderConfig(loaderPathsConfig, PATH_PREFIX); plugin.generateLoaderConfig(loaderPathsConfig, PATH_PREFIX);
}); });
} }
@ -180,7 +211,7 @@
console.log(JSON.stringify(loaderPathsConfig, null, '\t')); console.log(JSON.stringify(loaderPathsConfig, null, '\t'));
require.config({ require.config({
paths: loaderPathsConfig, paths: loaderPathsConfig
// 'vs/nls' : { // 'vs/nls' : {
// availableLanguages: { // availableLanguages: {
// '*': 'de' // '*': 'de'
@ -188,10 +219,12 @@
// } // }
}); });
require(['vs/editor/editor.main'], function() { require(['vs/editor/editor.main'], function () {
if (!RESOLVED_CORE.isRelease()) { if (!RESOLVED_CORE.isRelease()) {
// At this point we've loaded the monaco-editor-core // At this point we've loaded the monaco-editor-core
require(RESOLVED_PLUGINS.map(function(plugin) { return plugin.contrib; }), function() { require(RESOLVED_PLUGINS.map(function (plugin) {
return plugin.contrib;
}), function () {
// At this point we've loaded all the plugins // At this point we've loaded all the plugins
callback(); callback();
}); });
@ -200,5 +233,5 @@
} }
}); });
}); });
} };
})(); })();

@ -1,19 +1,21 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head> </head>
<body> <body>
<div
id="container"
style="float: left; width: 800px; height: 450px; border: 1px solid grey"
></div>
<div style="clear: both"></div>
<div id="container" style="float:left;width:800px;height:450px;border: 1px solid grey"></div> <script src="../metadata.js"></script>
<div style="clear:both"></div> <script src="dev-setup.js"></script>
<script>
<script src="../metadata.js"></script> loadEditor(function () {
<script src="dev-setup.js"></script> require(['./diff'], function () {});
<script>
loadEditor(function() {
require(['./diff'], function() {});
}); });
</script> </script>
</body> </body>
</html> </html>

@ -1,19 +1,16 @@
/// <reference path="../node_modules/monaco-editor-core/monaco.d.ts" /> /// <reference path="../../node_modules/monaco-editor-core/monaco.d.ts" />
define(['require'], function (require) { define(['require'], function (require) {
var container = document.getElementById('container'); var container = document.getElementById('container');
var original = monaco.editor.createModel(getOriginalStr(), 'javascript'); var original = monaco.editor.createModel(getOriginalStr(), 'javascript');
var modified = monaco.editor.createModel(getModifiedStr(), 'javascript'); var modified = monaco.editor.createModel(getModifiedStr(), 'javascript');
var diffEditor = monaco.editor.createDiffEditor(container, { var diffEditor = monaco.editor.createDiffEditor(container, {});
});
diffEditor.setModel({ diffEditor.setModel({
original: original, original: original,
modified: modified modified: modified
}); });
}); });
function getOriginalStr() { function getOriginalStr() {
@ -40,8 +37,8 @@ function getOriginalStr() {
' var key = keys[i];', ' var key = keys[i];',
' var enumerable = key.charCodeAt(0) !== /*_*/95;', ' var enumerable = key.charCodeAt(0) !== /*_*/95;',
' var member = members[key];', ' var member = members[key];',
' if (member && typeof member === \'object\') {', " if (member && typeof member === 'object') {",
' if (member.value !== undefined || typeof member.get === \'function\' || typeof member.set === \'function\') {', " if (member.value !== undefined || typeof member.get === 'function' || typeof member.set === 'function') {",
' if (member.enumerable === undefined) {', ' if (member.enumerable === undefined) {',
' member.enumerable = enumerable;', ' member.enumerable = enumerable;',
' }', ' }',
@ -263,8 +260,8 @@ function getModifiedStr() {
' var key = keys[i];', ' var key = keys[i];',
' var enumerable = key.charCodeAt(0) !== /*_*/95;', ' var enumerable = key.charCodeAt(0) !== /*_*/95;',
' var member = members[key];', ' var member = members[key];',
' if (member && typeof member === \'object\') {', " if (member && typeof member === 'object') {",
' if (member.value !== undefined || typeof member.get === \'function\' || typeof member.set === \'function\') {', " if (member.value !== undefined || typeof member.get === 'function' || typeof member.set === 'function') {",
' if (member.enumerable === undefined) {', ' if (member.enumerable === undefined) {',
' member.enumerable = enumerable;', ' member.enumerable = enumerable;',
' }', ' }',
@ -449,6 +446,6 @@ function getModifiedStr() {
'', '',
' })(WinJS);', ' })(WinJS);',
'', '',
'})(this);', '})(this);'
].join('\n'); ].join('\n');
} }

@ -1,45 +1,50 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="./index.css" /> <link rel="stylesheet" href="./index.css" />
</head> </head>
<body> <body>
Jump to:
<a class="loading-opts" href="./smoketest.html">[SMOKETEST]</a>
&#160;|&#160;
<a class="loading-opts" href="./playground.generated/index.html">[PLAYGROUND]</a>
&#160;|&#160;
<a class="loading-opts" href="./mouse-fixed.html">[fixed element]</a>
&#160;|&#160;
<a class="loading-opts" href="./mouse-scrollable-body.html">[scrollable body]</a>
&#160;|&#160;
<a class="loading-opts" href="./mouse-scrollable-element.html">[scrollable element]</a><br />
&#160;|&#160;
<a class="loading-opts" href="./shadow-dom.html">[Shadow DOM]</a>
&#160;|&#160;
<a class="loading-opts" href="./colorize.html">[colorize element]</a>
&#160;|&#160;
<a class="loading-opts" href="./cross-origin-broken.html">[cross origin broken]</a>
&#160;|&#160;
<a class="loading-opts" href="./cross-origin-good.html">[cross origin good]</a>
&#160;|&#160;
<a class="loading-opts" href="./diff.html">[diff]</a>
<br /><br />
Jump to: <div id="bar" style="margin-bottom: 6px"></div>
<a class="loading-opts" href="./smoketest.html">[SMOKETEST]</a> <div style="clear: both"></div>
&#160;|&#160; <div
<a class="loading-opts" href="./playground.generated/index.html">[PLAYGROUND]</a> id="container"
&#160;|&#160; style="float: left; width: 800px; height: 450px; border: 1px solid grey"
<a class="loading-opts" href="./mouse-fixed.html">[fixed element]</a> ></div>
&#160;|&#160; <div
<a class="loading-opts" href="./mouse-scrollable-body.html">[scrollable body]</a> id="options"
&#160;|&#160; style="float: left; width: 220px; height: 450px; border: 1px solid grey"
<a class="loading-opts" href="./mouse-scrollable-element.html">[scrollable element]</a><br/> ></div>
&#160;|&#160; <div style="clear: both"></div>
<a class="loading-opts" href="./shadow-dom.html">[Shadow DOM]</a>
&#160;|&#160;
<a class="loading-opts" href="./colorize.html">[colorize element]</a>
&#160;|&#160;
<a class="loading-opts" href="./cross-origin-broken.html">[cross origin broken]</a>
&#160;|&#160;
<a class="loading-opts" href="./cross-origin-good.html">[cross origin good]</a>
&#160;|&#160;
<a class="loading-opts" href="./diff.html">[diff]</a>
<br/><br/>
<div id="bar" style="margin-bottom: 6px;"></div> <script src="../metadata.js"></script>
<div style="clear:both"></div> <script src="dev-setup.js"></script>
<div id="container" style="float:left;width:800px;height:450px;border: 1px solid grey"></div> <script>
<div id="options" style="float:left;width:220px;height:450px;border: 1px solid grey"></div> loadEditor(function () {
<div style="clear:both"></div> require(['./index'], function () {});
<script src="../metadata.js"></script>
<script src="dev-setup.js"></script>
<script>
loadEditor(function() {
require(['./index'], function() {});
}); });
</script> </script>
</body> </body>
</html> </html>

@ -1,12 +1,11 @@
/// <reference path="../node_modules/monaco-editor-core/monaco.d.ts" /> /// <reference path="../../node_modules/monaco-editor-core/monaco.d.ts" />
/// <reference path="../node_modules/monaco-typescript/monaco.d.ts" /> /// <reference path="../../monaco-typescript/monaco.d.ts" />
define(['require', './samples'], function(require, SAMPLES) { define(['require', './samples'], function (require, SAMPLES) {
var domutils = require('vs/base/browser/dom');
var domutils = require('vs/base/browser/dom'); var model = monaco.editor.createModel('', 'plaintext');
var model = monaco.editor.createModel('', 'plaintext'); monaco.languages.typescript.typescriptDefaults.setInlayHintsOptions({
monaco.languages.typescript.typescriptDefaults.setInlayHintsOptions({
includeInlayParameterNameHints: 'all', includeInlayParameterNameHints: 'all',
includeInlayParameterNameHintsWhenArgumentMatchesName: true, includeInlayParameterNameHintsWhenArgumentMatchesName: true,
includeInlayFunctionParameterTypeHints: true, includeInlayFunctionParameterTypeHints: true,
@ -14,68 +13,74 @@ monaco.languages.typescript.typescriptDefaults.setInlayHintsOptions({
includeInlayPropertyDeclarationTypeHints: true, includeInlayPropertyDeclarationTypeHints: true,
includeInlayFunctionLikeReturnTypeHints: true, includeInlayFunctionLikeReturnTypeHints: true,
includeInlayEnumMemberValueHints: true includeInlayEnumMemberValueHints: true
}); });
var editor = monaco.editor.create(document.getElementById('container'), { var editor = monaco.editor.create(document.getElementById('container'), {
model: model, model: model,
glyphMargin: true, glyphMargin: true,
renderWhitespace: true renderWhitespace: true
}); });
editor.addCommand({ editor.addCommand(
{
ctrlCmd: true, ctrlCmd: true,
key: 'F9' key: 'F9'
}, function(ctx, args) { },
function (ctx, args) {
alert('Command Running!!'); alert('Command Running!!');
console.log(ctx); console.log(ctx);
}); }
);
editor.addAction({ editor.addAction({
id: 'my-unique-id', id: 'my-unique-id',
label: 'My Label!!!', label: 'My Label!!!',
keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.F10], keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.F10],
contextMenuGroupId: 'navigation', contextMenuGroupId: 'navigation',
contextMenuOrder: 2.5, contextMenuOrder: 2.5,
run: function(ed) { run: function (ed) {
console.log("i'm running => " + ed.getPosition()); console.log("i'm running => " + ed.getPosition());
} }
}); });
var currentSamplePromise = null; var currentSamplePromise = null;
var samplesData = {}; var samplesData = {};
SAMPLES.sort(function(a,b) { SAMPLES.sort(function (a, b) {
return a.name.localeCompare(b.name); return a.name.localeCompare(b.name);
}).forEach(function(sample) { }).forEach(function (sample) {
samplesData[sample.name] = function() { samplesData[sample.name] = function () {
if (currentSamplePromise !== null) { if (currentSamplePromise !== null) {
currentSamplePromise.cancel(); currentSamplePromise.cancel();
currentSamplePromise = null; currentSamplePromise = null;
} }
currentSamplePromise = sample.loadText().then(function(modelText) { currentSamplePromise = sample.loadText().then(function (modelText) {
currentSamplePromise = null; currentSamplePromise = null;
updateEditor(sample.mimeType, modelText, sample.name); updateEditor(sample.mimeType, modelText, sample.name);
}); });
} };
}); });
var examplesComboBox = new ComboBox('Template', samplesData); var examplesComboBox = new ComboBox('Template', samplesData);
var modesData = {}; var modesData = {};
monaco.languages.getLanguages().forEach(function(language) { monaco.languages.getLanguages().forEach(function (language) {
modesData[language.id] = updateEditor.bind(this, language.id); modesData[language.id] = updateEditor.bind(this, language.id);
}); });
var modesComboBox = new ComboBox('Mode', modesData); var modesComboBox = new ComboBox('Mode', modesData);
var themesData = {};
themesData['vs'] = function() { monaco.editor.setTheme('vs') };
themesData['vs-dark'] = function() { monaco.editor.setTheme('vs-dark') };
themesData['hc-black'] = function() { monaco.editor.setTheme('hc-black') };
var themesComboBox = new ComboBox('Theme', themesData);
var themesData = {};
themesData['vs'] = function () {
monaco.editor.setTheme('vs');
};
themesData['vs-dark'] = function () {
monaco.editor.setTheme('vs-dark');
};
themesData['hc-black'] = function () {
monaco.editor.setTheme('hc-black');
};
var themesComboBox = new ComboBox('Theme', themesData);
// Do it in a timeout to simplify profiles // Do it in a timeout to simplify profiles
window.setTimeout(function () { window.setTimeout(function () {
var START_SAMPLE = 'Y___DefaultJS'; var START_SAMPLE = 'Y___DefaultJS';
var url_matches = location.search.match(/sample=([^?&]+)/i); var url_matches = location.search.match(/sample=([^?&]+)/i);
@ -93,10 +98,9 @@ window.setTimeout(function () {
createOptions(editor); createOptions(editor);
createToolbar(editor); createToolbar(editor);
}, 0); }, 0);
function updateEditor(mode, value, sampleName) {
function updateEditor(mode, value, sampleName) {
if (sampleName) { if (sampleName) {
window.location.hash = sampleName; window.location.hash = sampleName;
} }
@ -113,10 +117,9 @@ function updateEditor(mode, value, sampleName) {
} }
modesComboBox.set(mode); modesComboBox.set(mode);
} }
function createToolbar(editor) { function createToolbar(editor) {
var bar = document.getElementById('bar'); var bar = document.getElementById('bar');
bar.appendChild(examplesComboBox.domNode); bar.appendChild(examplesComboBox.domNode);
@ -125,34 +128,43 @@ function createToolbar(editor) {
bar.appendChild(themesComboBox.domNode); bar.appendChild(themesComboBox.domNode);
bar.appendChild(createButton("Dispose all", function (e) { bar.appendChild(
createButton('Dispose all', function (e) {
editor.dispose(); editor.dispose();
editor = null; editor = null;
if (model) { if (model) {
model.dispose(); model.dispose();
model = null; model = null;
} }
})); })
);
bar.appendChild(createButton("Remove Model", function(e) { bar.appendChild(
createButton('Remove Model', function (e) {
editor.setModel(null); editor.setModel(null);
})); })
);
bar.appendChild(createButton("Dispose Model", function(e) { bar.appendChild(
createButton('Dispose Model', function (e) {
if (model) { if (model) {
model.dispose(); model.dispose();
model = null; model = null;
} }
})); })
);
bar.appendChild(createButton('Ballistic scroll', (function() { bar.appendChild(
createButton(
'Ballistic scroll',
(function () {
var friction = 1000; // px per second var friction = 1000; // px per second
var speed = 0; // px per second var speed = 0; // px per second
var isRunning = false; var isRunning = false;
var lastTime; var lastTime;
var r = 0; var r = 0;
var scroll = function() { var scroll = function () {
var currentTime = new Date().getTime(); var currentTime = new Date().getTime();
var ellapsedTimeS = (currentTime - lastTime) / 1000; var ellapsedTimeS = (currentTime - lastTime) / 1000;
lastTime = currentTime; lastTime = currentTime;
@ -166,7 +178,7 @@ function createToolbar(editor) {
} else { } else {
isRunning = false; isRunning = false;
} }
} };
return function (e) { return function (e) {
speed += 2000; speed += 2000;
@ -177,153 +189,175 @@ function createToolbar(editor) {
domutils.runAtThisOrScheduleAtNextAnimationFrame(scroll); domutils.runAtThisOrScheduleAtNextAnimationFrame(scroll);
} }
}; };
})())); })()
} )
);
}
function createButton(label, onClick) { function createButton(label, onClick) {
var result = document.createElement("button"); var result = document.createElement('button');
result.innerHTML = label; result.innerHTML = label;
result.onclick = onClick; result.onclick = onClick;
return result; return result;
} }
function createOptions(editor) { function createOptions(editor) {
var options = document.getElementById('options'); var options = document.getElementById('options');
var lineNumbers; var lineNumbers;
options.appendChild(createOptionToggle( options.appendChild(
createOptionToggle(
editor, editor,
'lineNumbers', 'lineNumbers',
function() { function () {
return (lineNumbers === false ? false : true); return lineNumbers === false ? false : true;
}, },
function(editor, newValue) { function (editor, newValue) {
lineNumbers = newValue; lineNumbers = newValue;
editor.updateOptions({ lineNumbers: lineNumbers ? 'on' : 'off' }); editor.updateOptions({ lineNumbers: lineNumbers ? 'on' : 'off' });
} }
)); )
);
var glyphMargin; var glyphMargin;
options.appendChild(createOptionToggle( options.appendChild(
createOptionToggle(
editor, editor,
'glyphMargin', 'glyphMargin',
function() { function () {
return (glyphMargin === false ? false : true); return glyphMargin === false ? false : true;
}, },
function(editor, newValue) { function (editor, newValue) {
glyphMargin = newValue; glyphMargin = newValue;
editor.updateOptions({ glyphMargin: glyphMargin }); editor.updateOptions({ glyphMargin: glyphMargin });
} }
)); )
);
var minimap; var minimap;
options.appendChild(createOptionToggle( options.appendChild(
createOptionToggle(
editor, editor,
'minimap', 'minimap',
function() { function () {
return (minimap === false ? false : true); return minimap === false ? false : true;
}, },
function(editor, newValue) { function (editor, newValue) {
minimap = newValue; minimap = newValue;
editor.updateOptions({ minimap: { enabled: minimap } }); editor.updateOptions({ minimap: { enabled: minimap } });
} }
)); )
);
var roundedSelection; var roundedSelection;
options.appendChild(createOptionToggle( options.appendChild(
createOptionToggle(
editor, editor,
'roundedSelection', 'roundedSelection',
function() { function () {
return (roundedSelection === false ? false : true); return roundedSelection === false ? false : true;
}, },
function(editor, newValue) { function (editor, newValue) {
roundedSelection = newValue; roundedSelection = newValue;
editor.updateOptions({ roundedSelection: roundedSelection }); editor.updateOptions({ roundedSelection: roundedSelection });
} }
)); )
);
var scrollBeyondLastLine; var scrollBeyondLastLine;
options.appendChild(createOptionToggle( options.appendChild(
createOptionToggle(
editor, editor,
'scrollBeyondLastLine', 'scrollBeyondLastLine',
function() { function () {
return (scrollBeyondLastLine === false ? false : true); return scrollBeyondLastLine === false ? false : true;
}, },
function(editor, newValue) { function (editor, newValue) {
scrollBeyondLastLine = newValue; scrollBeyondLastLine = newValue;
editor.updateOptions({ scrollBeyondLastLine: scrollBeyondLastLine }); editor.updateOptions({ scrollBeyondLastLine: scrollBeyondLastLine });
} }
)); )
);
var renderWhitespace; var renderWhitespace;
options.appendChild(createOptionToggle( options.appendChild(
createOptionToggle(
editor, editor,
'renderWhitespace', 'renderWhitespace',
function() { function () {
return (renderWhitespace === true ? true : false); return renderWhitespace === true ? true : false;
}, },
function(editor, newValue) { function (editor, newValue) {
renderWhitespace = newValue; renderWhitespace = newValue;
editor.updateOptions({ renderWhitespace: renderWhitespace }); editor.updateOptions({ renderWhitespace: renderWhitespace });
} }
)); )
);
var readOnly; var readOnly;
options.appendChild(createOptionToggle( options.appendChild(
createOptionToggle(
editor, editor,
'readOnly', 'readOnly',
function() { function () {
return (readOnly === true ? true : false); return readOnly === true ? true : false;
}, },
function(editor, newValue) { function (editor, newValue) {
readOnly = newValue; readOnly = newValue;
editor.updateOptions({ readOnly: readOnly }); editor.updateOptions({ readOnly: readOnly });
} }
)); )
);
var wordWrap; var wordWrap;
options.appendChild(createOptionToggle( options.appendChild(
createOptionToggle(
editor, editor,
'wordWrap', 'wordWrap',
function() { function () {
return (wordWrap === true ? true : false); return wordWrap === true ? true : false;
}, },
function(editor, newValue) { function (editor, newValue) {
wordWrap = newValue; wordWrap = newValue;
editor.updateOptions({ wordWrap: wordWrap ? 'on' : 'off' }); editor.updateOptions({ wordWrap: wordWrap ? 'on' : 'off' });
} }
)); )
);
var folding; var folding;
options.appendChild(createOptionToggle( options.appendChild(
createOptionToggle(
editor, editor,
'folding', 'folding',
function() { function () {
return (folding === false ? false : true); return folding === false ? false : true;
}, },
function(editor, newValue) { function (editor, newValue) {
folding = newValue; folding = newValue;
editor.updateOptions({ folding: folding }); editor.updateOptions({ folding: folding });
} }
)); )
);
var bracketPairColorizationEnabled = false; var bracketPairColorizationEnabled = false;
options.appendChild(createOptionToggle( options.appendChild(
createOptionToggle(
editor, editor,
'bracketPairColorizationEnabled', 'bracketPairColorizationEnabled',
function() { function () {
return (bracketPairColorizationEnabled === false ? false : true); return bracketPairColorizationEnabled === false ? false : true;
}, },
function(editor, newValue) { function (editor, newValue) {
bracketPairColorizationEnabled = newValue; bracketPairColorizationEnabled = newValue;
editor.updateOptions({ "bracketPairColorization.enabled": bracketPairColorizationEnabled, }); editor.updateOptions({
'bracketPairColorization.enabled': bracketPairColorizationEnabled
});
}
)
);
} }
));
}
function createOptionToggle(editor, labelText, stateReader, setState) { function createOptionToggle(editor, labelText, stateReader, setState) {
var domNode = document.createElement('div'); var domNode = document.createElement('div');
domNode.className = 'option toggle'; domNode.className = 'option toggle';
@ -336,23 +370,22 @@ function createOptionToggle(editor, labelText, stateReader, setState) {
domNode.appendChild(label); domNode.appendChild(label);
var renderState = function() { var renderState = function () {
input.checked = stateReader(); input.checked = stateReader();
}; };
renderState(); renderState();
editor.onDidChangeConfiguration(function() { editor.onDidChangeConfiguration(function () {
renderState(); renderState();
}); });
input.onchange = function() { input.onchange = function () {
setState(editor, !stateReader()); setState(editor, !stateReader());
}; };
return domNode; return domNode;
} }
function ComboBox(label, externalOptions) { function ComboBox(label, externalOptions) {
this.id = 'combobox-' + label.toLowerCase().replace(/\s/g, '-'); this.id = 'combobox-' + label.toLowerCase().replace(/\s/g, '-');
this.domNode = document.createElement('div'); this.domNode = document.createElement('div');
@ -366,10 +399,10 @@ function ComboBox(label, externalOptions) {
this.comboBox = document.createElement('select'); this.comboBox = document.createElement('select');
this.comboBox.setAttribute('id', this.id); this.comboBox.setAttribute('id', this.id);
this.comboBox.setAttribute('name', this.id); this.comboBox.setAttribute('name', this.id);
this.comboBox.onchange =(function (e) { this.comboBox.onchange = function (e) {
var target = e.target || e.srcElement; var target = e.target || e.srcElement;
this.options[target.options[target.selectedIndex].value].callback(); this.options[target.options[target.selectedIndex].value].callback();
}).bind(this); }.bind(this);
this.domNode.appendChild(this.comboBox); this.domNode.appendChild(this.comboBox);
@ -386,11 +419,10 @@ function ComboBox(label, externalOptions) {
this.comboBox.appendChild(optionElement); this.comboBox.appendChild(optionElement);
} }
} }
} }
ComboBox.prototype.set = function (name) { ComboBox.prototype.set = function (name) {
if (this.options[name]) { if (this.options[name]) {
this.options[name].element.selected = true; this.options[name].element.selected = true;
} }
}; };
}); });

@ -1,23 +1,32 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head> </head>
<body style="height:2000px"> <body style="height: 2000px">
<h2>Monaco Editor in fixed element</h2>
<h2>Monaco Editor in fixed element</h2> <div
style="
position: fixed;
left: 20%;
top: 20%;
right: 20%;
height: 400px;
border: 1px solid silver;
"
id="Editor"
></div>
<div style="position: fixed; left: 20%; top: 20%; right: 20%; height: 400px; border:1px solid silver" id="Editor"> <script src="../metadata.js"></script>
<script src="dev-setup.js"></script>
<script src="../metadata.js"></script> <script>
<script src="dev-setup.js"></script> loadEditor(function () {
<script>
loadEditor(function() {
monaco.editor.create(document.getElementById('Editor'), { monaco.editor.create(document.getElementById('Editor'), {
value: document.documentElement.innerHTML, value: document.documentElement.innerHTML,
language: 'xml' language: 'xml'
}); });
}); });
</script> </script>
</body> </body>
</html> </html>

@ -1,6 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css"> <style type="text/css">
#editor { #editor {
@ -12,171 +12,276 @@
border: 1px solid #ccc; border: 1px solid #ccc;
} }
</style> </style>
</head> </head>
<body> <body>
<h2>Monaco Editor in scrollable body</h2>
<h2>Monaco Editor in scrollable body</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div id="editor"></div> <div id="editor"></div>
<div style="clear:both"></div> <div style="clear: both"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat </p>
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure </p>
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat <p>
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure <p>
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat </p>
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure </p>
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat <p>
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure <p>
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat </p>
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure </p>
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat <p>
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<script src="../metadata.js"></script> <script src="../metadata.js"></script>
<script src="dev-setup.js"></script> <script src="dev-setup.js"></script>
<script> <script>
loadEditor(function() { loadEditor(function () {
monaco.editor.create(document.getElementById('editor'), { monaco.editor.create(document.getElementById('editor'), {
value: document.documentElement.innerHTML, value: document.documentElement.innerHTML,
language: 'xml' language: 'xml'
}); });
}); });
</script> </script>
</body> </body>
</html> </html>

@ -1,7 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css"> <style type="text/css">
#editor { #editor {
@ -13,122 +12,194 @@
border: 1px solid #ccc; border: 1px solid #ccc;
} }
</style> </style>
</head> </head>
<body> <body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat </p>
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure </p>
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat <p>
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure <p>
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat </p>
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure </p>
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat <p>
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure <p>
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat </p>
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure </p>
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat <p>
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div style="height:500px; overflow:scroll"> <div style="height: 500px; overflow: scroll">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat </p>
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute </p>
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat <p>
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute <p>
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div id="editor"></div> <div id="editor"></div>
</div> </div>
<div style="clear:both"></div> <div style="clear: both"></div>
<script src="../metadata.js"></script> <script src="../metadata.js"></script>
<script src="dev-setup.js"></script> <script src="dev-setup.js"></script>
<script> <script>
loadEditor(function() { loadEditor(function () {
monaco.editor.create(document.getElementById('editor'), { monaco.editor.create(document.getElementById('editor'), {
value: document.documentElement.innerHTML, value: document.documentElement.innerHTML,
language: 'xml' language: 'xml'
}); });
}); });
</script> </script>
</body> </body>
</html> </html>

@ -1,18 +1,19 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<base href="../../vscode-prs/out-editor-esm-bundle/" /> <base href="../../vscode-prs/out-editor-esm-bundle/" />
</head> </head>
<body> <body>
<h2>Monaco Editor ESM Bundle</h2>
<h2>Monaco Editor ESM Bundle</h2> <div style="clear: both"></div>
<div
id="container"
style="float: left; width: 800px; height: 450px; border: 1px solid grey"
></div>
<div style="clear: both"></div>
<div style="clear:both"></div> <script src="core.bundle.js"></script>
<div id="container" style="float:left;width:800px;height:450px;border: 1px solid grey"></div> </body>
<div style="clear:both"></div>
<script src="core.bundle.js"></script>
</body>
</html> </html>

@ -1,7 +1,6 @@
/// <reference path="../node_modules/monaco-editor-core/monaco.d.ts" /> /// <reference path="../../node_modules/monaco-editor-core/monaco.d.ts" />
define(['./samples-all.generated'], function (ALL_SAMPLES) { define(['./samples-all.generated'], function (ALL_SAMPLES) {
var XHR_SAMPLES = {}; var XHR_SAMPLES = {};
ALL_SAMPLES.forEach(function (sample) { ALL_SAMPLES.forEach(function (sample) {
XHR_SAMPLES[sample.name] = sample.content; XHR_SAMPLES[sample.name] = sample.content;
@ -9,7 +8,9 @@ define(['./samples-all.generated'], function (ALL_SAMPLES) {
var samples = []; var samples = [];
var modesIds = monaco.languages.getLanguages().map(function (language) { return language.id; }); var modesIds = monaco.languages.getLanguages().map(function (language) {
return language.id;
});
modesIds.sort(); modesIds.sort();
modesIds.forEach(function (modeId) { modesIds.forEach(function (modeId) {
@ -23,7 +24,11 @@ define(['./samples-all.generated'], function (ALL_SAMPLES) {
}); });
function addXHRSample(name, modelUrl, mimeType, textModifier) { function addXHRSample(name, modelUrl, mimeType, textModifier) {
textModifier = textModifier || function (text) { return text; }; textModifier =
textModifier ||
function (text) {
return text;
};
samples.push({ samples.push({
name: name, name: name,
mimeType: mimeType, mimeType: mimeType,
@ -37,7 +42,7 @@ define(['./samples-all.generated'], function (ALL_SAMPLES) {
addXHRSample(name, modelUrl, mimeType, function (text) { addXHRSample(name, modelUrl, mimeType, function (text) {
var result = text; var result = text;
for (var i = 0; i < power; ++i) { for (var i = 0; i < power; ++i) {
result += "\n" + result; result += '\n' + result;
} }
return result; return result;
}); });
@ -65,7 +70,11 @@ define(['./samples-all.generated'], function (ALL_SAMPLES) {
addXHRSample('Z___jquery-min.js', 'run-editor-jquery-min-js.txt', 'text/javascript'); addXHRSample('Z___jquery-min.js', 'run-editor-jquery-min-js.txt', 'text/javascript');
addXHRSample('Z___scrolling-strategy.js', 'run-editor-sample-js.txt', 'text/plain', function (text) { addXHRSample(
'Z___scrolling-strategy.js',
'run-editor-sample-js.txt',
'text/plain',
function (text) {
console.log('here I am'); console.log('here I am');
var lines = text.split('\n'); var lines = text.split('\n');
var newLines = lines.slice(0); var newLines = lines.slice(0);
@ -77,16 +86,24 @@ define(['./samples-all.generated'], function (ALL_SAMPLES) {
newLines = newLines.slice(0, problemIsAt); newLines = newLines.slice(0, problemIsAt);
return newLines.join('\n'); return newLines.join('\n');
}); }
);
addSample('Z___special-chars', 'text/plain', [ addSample(
"// single line \u000D comment", // Carriage return 'Z___special-chars',
"// single line \u2028 comment", // Line separator 'text/plain',
"// single line \u2029 comment" // Paragraph separator [
].join('\n')); '// single line \u000D comment', // Carriage return
'// single line \u2028 comment', // Line separator
'// single line \u2029 comment' // Paragraph separator
].join('\n')
);
// http://www.cl.cam.ac.uk/~mgk25/ucs/examples/UTF-8-test.txt // http://www.cl.cam.ac.uk/~mgk25/ucs/examples/UTF-8-test.txt
addSample('Z___invalid-unicode', 'text/plain', [ addSample(
'Z___invalid-unicode',
'text/plain',
[
'\uFFFE\uFFFF', '\uFFFE\uFFFF',
'\uD800\uDC00', '\uD800\uDC00',
'\uD800\uDFFF', '\uD800\uDFFF',
@ -96,18 +113,27 @@ define(['./samples-all.generated'], function (ALL_SAMPLES) {
'\uDB80\uDFFF', '\uDB80\uDFFF',
'\uDBFF\uDC00', '\uDBFF\uDC00',
'\uDBFF\uDFFF' '\uDBFF\uDFFF'
].join('\n')); ].join('\n')
);
addSample('Z___easy-debug.js', 'text/plain', (function () { addSample(
var myValue = "Line1"; 'Z___easy-debug.js',
'text/plain',
(function () {
var myValue = 'Line1';
for (var i = 2; i < 50; i++) { for (var i = 2; i < 50; i++) {
myValue += "\nLine" + i; myValue += '\nLine' + i;
} }
return myValue; return myValue;
})()); })()
);
addSample('Z___copy-paste.txt', 'text/plain', (function () { addSample(
var i = 0, sampleCopyPasteLine = ''; 'Z___copy-paste.txt',
'text/plain',
(function () {
var i = 0,
sampleCopyPasteLine = '';
while (sampleCopyPasteLine.length < 1000) { while (sampleCopyPasteLine.length < 1000) {
i++; i++;
sampleCopyPasteLine += i; sampleCopyPasteLine += i;
@ -117,9 +143,13 @@ define(['./samples-all.generated'], function (ALL_SAMPLES) {
sampleCopyPaste += '\n' + sampleCopyPasteLine; sampleCopyPaste += '\n' + sampleCopyPasteLine;
} }
return sampleCopyPaste; return sampleCopyPaste;
})()); })()
);
addSample('Z___xss', 'text/html', (function () { addSample(
'Z___xss',
'text/html',
(function () {
var xssRepresentations = [ var xssRepresentations = [
'<', '<',
'BAD\u2028CHARACTER', 'BAD\u2028CHARACTER',
@ -194,35 +224,48 @@ define(['./samples-all.generated'], function (ALL_SAMPLES) {
'\u003C' '\u003C'
]; ];
return xssRepresentations.length + ':\n' + xssRepresentations.join('\n'); return xssRepresentations.length + ':\n' + xssRepresentations.join('\n');
})()); })()
);
addSample('Z___many-links.js', 'text/javascript', (function () { addSample(
var result = "bla bla a url: https://microsoft.com some more bla bla"; 'Z___many-links.js',
'text/javascript',
(function () {
var result = 'bla bla a url: https://microsoft.com some more bla bla';
for (var i = 0; i < 13; ++i) { for (var i = 0; i < 13; ++i) {
result += "\n" + result; result += '\n' + result;
} }
return "/*" + result + "\n*/"; return '/*' + result + '\n*/';
})()); })()
);
addSample('Z___line-separators.js', 'text/javascript', (function () { addSample(
'Z___line-separators.js',
'text/javascript',
(function () {
return [ return [
"var x = '1'; // And\u2028 here I have a nice comment.", "var x = '1'; // And\u2028 here I have a nice comment.",
"", '',
"var y = x + ' +\u2028 2 = res';", "var y = x + ' +\u2028 2 = res';",
"", '',
"y.replace(/re\u2028s/gi, '3');" "y.replace(/re\u2028s/gi, '3');"
].join('\n'); ].join('\n');
})()); })()
);
addXHRSample('Z___intellisense.js', 'run-editor-intellisense-js.txt', 'text/javascript'); addXHRSample('Z___intellisense.js', 'run-editor-intellisense-js.txt', 'text/javascript');
addSample('Z___recursion attack', 'text/html', (function () { addSample(
'Z___recursion attack',
'text/html',
(function () {
var arr = []; var arr = [];
for (var i = 0; i < 10000; i++) { for (var i = 0; i < 10000; i++) {
arr.push('\n<script type="text/html">'); arr.push('\n<script type="text/html">');
} }
return arr.length + ':\n' + arr.join(''); return arr.length + ':\n' + arr.join('');
})()); })()
);
addSample('empty', 'text/plain', ''); addSample('empty', 'text/plain', '');
@ -230,11 +273,11 @@ define(['./samples-all.generated'], function (ALL_SAMPLES) {
name: 'custom.1.', name: 'custom.1.',
tokenizer: { tokenizer: {
root: [ root: [
[/\[error.*/, "custom-error"], [/\[error.*/, 'custom-error'],
[/\[notice.*/, "custom-notice"], [/\[notice.*/, 'custom-notice'],
[/\[info.*/, "custom-info"], [/\[info.*/, 'custom-info'],
[/\[[a-zA-Z 0-9:]+\]/, "custom-date"], [/\[[a-zA-Z 0-9:]+\]/, 'custom-date']
], ]
} }
}); });

@ -1,14 +1,9 @@
define([ define(['vs/base/common/severity'], function (severity) {
'vs/base/common/severity'
], function(severity) {
'use strict'; 'use strict';
function ValidateParticipant() { function ValidateParticipant() {}
}
ValidateParticipant.ID = 'doc.validateParticipant'; ValidateParticipant.ID = 'doc.validateParticipant';
ValidateParticipant.prototype.validate = function(mirrorModel, markerService) { ValidateParticipant.prototype.validate = function (mirrorModel, markerService) {
var marker = { var marker = {
severity: severity.Error, severity: severity.Error,
message: [ message: [

@ -1,38 +1,42 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head> </head>
<body> <body>
<h2>Monaco Editor Shadow DOM</h2>
<h2>Monaco Editor Shadow DOM</h2> <div style="clear: both"></div>
<div
id="container"
style="float: left; width: 800px; height: 450px; border: 1px solid grey"
></div>
<div style="clear: both"></div>
<div style="clear:both"></div> <script src="../metadata.js"></script>
<div id="container" style="float:left;width:800px;height:450px;border: 1px solid grey"></div> <script src="dev-setup.js"></script>
<div style="clear:both"></div> <script>
<script src="../metadata.js"></script>
<script src="dev-setup.js"></script>
<script>
const container = document.getElementById('container'); const container = document.getElementById('container');
const shadowRoot = container.attachShadow({ const shadowRoot = container.attachShadow({
mode: "closed" mode: 'closed'
}); });
loadEditor(function() { loadEditor(function () {
const innerContainer = document.createElement('div'); const innerContainer = document.createElement('div');
shadowRoot.appendChild(innerContainer); shadowRoot.appendChild(innerContainer);
innerContainer.style.width = '800px'; innerContainer.style.width = '800px';
innerContainer.style.height = '450px'; innerContainer.style.height = '450px';
// We must move all CSS inside the shadow root, pick only link tags relevant to the editor // We must move all CSS inside the shadow root, pick only link tags relevant to the editor
const documentLinks = Array.prototype.slice.call(document.getElementsByTagName('link'), 0).filter((documentLink) => { const documentLinks = Array.prototype.slice
.call(document.getElementsByTagName('link'), 0)
.filter((documentLink) => {
if (/vs\/(base|editor|platform)/.test(documentLink.getAttribute('href'))) { if (/vs\/(base|editor|platform)/.test(documentLink.getAttribute('href'))) {
return true; return true;
} }
console.log(`Not moving: `, documentLink); console.log(`Not moving: `, documentLink);
return true; return true;
}); });
documentLinks.forEach(documentLink => shadowRoot.appendChild(documentLink)); documentLinks.forEach((documentLink) => shadowRoot.appendChild(documentLink));
// We must define the font face outside the shadowroot // We must define the font face outside the shadowroot
const codiconCSS = `@font-face { font-family: "codicon"; src: url("${getCodiconPath()}") format("truetype"); }`; const codiconCSS = `@font-face { font-family: "codicon"; src: url("${getCodiconPath()}") format("truetype"); }`;
@ -43,17 +47,11 @@
style.innerHTML = codiconCSS; style.innerHTML = codiconCSS;
monaco.editor.create(innerContainer, { monaco.editor.create(innerContainer, {
value: [ value: ['function hello() {', '\tconsole.log("hello world");', '}', ''].join('\n'),
'function hello() {',
'\tconsole.log("hello world");',
'}',
''
].join('\n'),
language: 'javascript', language: 'javascript',
ariaContainerElement: innerContainer ariaContainerElement: innerContainer
}); });
}); });
</script> </script>
</body>
</body>
</html> </html>

@ -1,12 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style> <style>
#errors { #errors {
position:fixed; position: fixed;
top:0; top: 0;
right:0; right: 0;
font-size: 20px; font-size: 20px;
width: 100px; width: 100px;
height: 100px; height: 100px;
@ -15,27 +15,25 @@
height: 100%; height: 100%;
} }
#editor { #editor {
float:left; float: left;
width: 1250px; width: 1250px;
} }
</style> </style>
</head> </head>
<body> <body>
<h2>Smoke Test</h2>
<h2>Smoke Test</h2> <div id="control"></div>
<div id="editor"></div>
<div id="errors"></div>
<div style="clear: both"></div>
<div id="control"></div> <script src="../metadata.js"></script>
<div id="editor"></div> <script src="dev-setup.js"></script>
<div id="errors"></div> <script>
<div style="clear:both"></div> loadEditor(function () {
require(['./smoketest'], function () {});
<script src="../metadata.js"></script>
<script src="dev-setup.js"></script>
<script>
loadEditor(function() {
require(['./smoketest'], function() {});
}); });
</script> </script>
</body>
</body>
</html> </html>

@ -1,13 +1,12 @@
/// <reference path="../node_modules/monaco-editor-core/monaco.d.ts" /> /// <reference path="../../node_modules/monaco-editor-core/monaco.d.ts" />
define(['./samples-all.generated'], function(ALL_SAMPLES) { define(['./samples-all.generated'], function (ALL_SAMPLES) {
var XHR_SAMPLES = {};
var XHR_SAMPLES = {}; ALL_SAMPLES.forEach(function (sample) {
ALL_SAMPLES.forEach(function(sample) {
XHR_SAMPLES[sample.name] = sample.content; XHR_SAMPLES[sample.name] = sample.content;
}); });
var actions = (function() { var actions = (function () {
"use strict"; 'use strict';
return [ return [
{ {
@ -46,7 +45,12 @@ var actions = (function() {
if (commentsConfig && commentsConfig.lineCommentTokens) { if (commentsConfig && commentsConfig.lineCommentTokens) {
text = commentsConfig.lineCommentTokens[0] + ' ' + text; text = commentsConfig.lineCommentTokens[0] + ' ' + text;
} else if (commentsConfig && commentsConfig.blockCommentStartToken) { } else if (commentsConfig && commentsConfig.blockCommentStartToken) {
text = commentsConfig.blockCommentStartToken + ' ' + text + ' ' + commentsConfig.blockCommentEndToken; text =
commentsConfig.blockCommentStartToken +
' ' +
text +
' ' +
commentsConfig.blockCommentEndToken;
} }
} }
editor.trigger('keyboard', monaco.editor.Handler.Type, { editor.trigger('keyboard', monaco.editor.Handler.Type, {
@ -72,33 +76,36 @@ var actions = (function() {
} }
} }
]; ];
})(); })();
var panelContainer = document.getElementById('control'); var panelContainer = document.getElementById('control');
var editorContainer = document.getElementById('editor'); var editorContainer = document.getElementById('editor');
var editors = {}, models = {}; var editors = {},
models = {};
function onError(err) { function onError(err) {
console.error(err); console.error(err);
alert('error!!'); alert('error!!');
} }
function getAllModes() { function getAllModes() {
var result = monaco.languages.getLanguages().map(function(language) { return language.id; }); var result = monaco.languages.getLanguages().map(function (language) {
return language.id;
});
result.sort(); result.sort();
return result; return result;
} }
function createEditor(container, mode) { function createEditor(container, mode) {
editors[mode] = monaco.editor.create(container, { editors[mode] = monaco.editor.create(container, {
value: mode value: mode
}); });
var value = mode + '\n' + XHR_SAMPLES['sample.' + mode + '.txt']; var value = mode + '\n' + XHR_SAMPLES['sample.' + mode + '.txt'];
var model = monaco.editor.createModel(value, mode); var model = monaco.editor.createModel(value, mode);
editors[mode].setModel(model); editors[mode].setModel(model);
} }
function createEditors(modes) { function createEditors(modes) {
for (var i = 0; i < modes.length; i++) { for (var i = 0; i < modes.length; i++) {
var container = document.createElement('div'); var container = document.createElement('div');
container.style.width = '300px'; container.style.width = '300px';
@ -114,26 +121,25 @@ function createEditors(modes) {
var clearer = document.createElement('div'); var clearer = document.createElement('div');
clearer.style.clear = 'both'; clearer.style.clear = 'both';
editorContainer.appendChild(clearer); editorContainer.appendChild(clearer);
} }
function executeAction(action) { function executeAction(action) {
for (var mime in editors) { for (var mime in editors) {
if (editors.hasOwnProperty(mime)) { if (editors.hasOwnProperty(mime)) {
action(editors[mime]); action(editors[mime]);
} }
} }
} }
function createActions(actions) { function createActions(actions) {
for (var i = 0; i < actions.length; i++) { for (var i = 0; i < actions.length; i++) {
var btn = document.createElement('button'); var btn = document.createElement('button');
btn.appendChild(document.createTextNode('<<' + actions[i].name + '>>')); btn.appendChild(document.createTextNode('<<' + actions[i].name + '>>'));
btn.onclick = executeAction.bind(this, actions[i].run); btn.onclick = executeAction.bind(this, actions[i].run);
panelContainer.appendChild(btn); panelContainer.appendChild(btn);
} }
} }
createEditors(getAllModes());
createActions(actions);
createEditors(getAllModes());
createActions(actions);
}); });

@ -1,325 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.0.1.css">
</head>
<body>
<script src="../metadata.js"></script>
<script src="dev-setup.js"></script>
<script src="tokenization.js"></script>
<script src="https://code.jquery.com/qunit/qunit-2.0.1.js"></script>
<script>
var GENERATE_TOKENS = false;
var LIMIT_TO_TEST = null;//'sample - xml';
loadEditor(function() {
let lazyModules = [
'vs/basic-languages/src/bat',
'vs/basic-languages/src/coffee',
'vs/basic-languages/src/cpp',
'vs/basic-languages/src/csharp',
'vs/basic-languages/src/dockerfile',
'vs/basic-languages/src/fsharp',
'vs/basic-languages/src/go',
'vs/basic-languages/src/handlebars',
'vs/basic-languages/src/html',
'vs/basic-languages/src/ini',
'vs/basic-languages/src/pug',
'vs/basic-languages/src/java',
'vs/basic-languages/src/lua',
'vs/basic-languages/src/markdown',
'vs/basic-languages/src/objective-c',
'vs/basic-languages/src/postiats',
'vs/basic-languages/src/php',
'vs/basic-languages/src/powershell',
'vs/basic-languages/src/python',
'vs/basic-languages/src/r',
'vs/basic-languages/src/razor',
'vs/basic-languages/src/ruby',
'vs/basic-languages/src/swift',
'vs/basic-languages/src/sql',
'vs/basic-languages/src/vb',
'vs/basic-languages/src/xml',
'vs/basic-languages/src/less',
'vs/basic-languages/src/scss',
'vs/basic-languages/src/css',
'vs/basic-languages/src/yaml',
'vs/language/typescript/src/mode',
'vs/language/css/cssMode',
'vs/language/json/jsonMode',
'vs/language/html/htmlMode'
];
console.log('editor loaded');
require(lazyModules, function() {
console.log('all lazy code loaded');
function resolveSample(sample) {
return sample.loadText().then(function(txt) {
return {
name: sample.name,
language: sample.mimeType,
text: txt
};
});
}
require(['./samples'], function(SAMPLES) {
Promise.all(
SAMPLES.map(resolveSample)
).then(function(samples) {
renderSamples(samples);
});
});
});
});
function renderSamples(samples) {
samples = samples.filter(function(sample) {
if (typeof sample.language !== 'string') {
return false;
}
if (sample.language === 'plaintext' || sample.language === 'text/plain') {
return false;
}
// return sample.name === 'sample - css';
return /sample/.test(sample.name);
});
samples.sort(function(a,b) {
if (a.language === b.language) {
if (a.text < b.text) {
return -1;
}
if (a.text > b.text) {
return 1;
}
return 0;
}
if (a.language < b.language) {
return -1;
}
return 1;
});
samples.forEach(renderSample);
generateTests();
}
var TEST_CASES = [];
function renderSample(sample, index) {
console.log('TEST #' + index + ': ' + sample.name);
if (LIMIT_TO_TEST && sample.name !== LIMIT_TO_TEST) {
TEST_CASES.push({ name: sample.name });
return;
}
var testCase = {
name: sample.name,
// text: sample.text,
language: sample.language,
result: {
vs: extractColors(sample, 'vs'),
vs_dark: extractColors(sample, 'vs-dark'),
hc_black: extractColors(sample, 'hc-black'),
}
};
TEST_CASES.push(testCase);
}
function extractColors(sample, theme) {
var out = document.createElement('pre');
var txt = document.createTextNode(sample.text);
out.appendChild(txt);
document.body.appendChild(out);
monaco.editor.colorizeElement(out, {
theme: theme,
mimeType: sample.language
});
if (GENERATE_TOKENS) {
var tokens = monaco.editor.tokenize(sample.text || '', sample.language);
}
// console.log(out);
var lineElement = out.firstElementChild;
var allResult = [];
while (lineElement) {
// console.log(lineElement);
var pieces = lineElement.children;
var result = [];
if (GENERATE_TOKENS) {
var lineTokens = tokens.shift();
if (lineTokens.length > 0) {
for (var i = 0; i < lineTokens.length - 1; i++) {
lineTokens[i].length = lineTokens[i + 1].offset - lineTokens[i].offset;
}
lineTokens[lineTokens.length - 1].length = 1000000;
}
}
for (var i = 0; i < pieces.length; i++) {
var piece = pieces[i];
// console.log(piece);
var text = piece.innerText;
var r = window.getComputedStyle(piece);
var color = rgbToHex(r.color);
// var isWhitespace = /^\s+$/.test(text);
// var partTokens = undefined;
if (GENERATE_TOKENS) {
let partTokens = [];
let partText = text;
while (lineTokens.length > 0 && partText.length > 0) {
let t = lineTokens.shift();
partTokens.push(t);
partText = partText.substr(t.length);
}
result.push({
text: text,
color: color,
tokens: partTokens
});
} else {
result.push({
text: text,
color: color,
});
}
}
allResult.push(result);
lineElement = lineElement.nextElementSibling.nextElementSibling;
}
// console.log(JSON.stringify(allResult));
out.parentNode.removeChild(out);
return allResult;
}
var rgbCache = {};
function rgbToHex(rgb) {
if (!rgbCache[rgb]) {
var m = rgb.match(/rgb\((\d+), (\d+), (\d+)\)/);
var r = parseInt(m[1], 10);
var g = parseInt(m[2], 10);
var b = parseInt(m[3], 10);
var r = '#' + to2Hex(r) + to2Hex(g) + to2Hex(b);
rgbCache[rgb] = r;
}
return rgbCache[rgb];
}
function to2Hex(n) {
var r = n.toString(16);
if (r.length === 1) {
return '0' + r;
}
return r;
}
function generateTests() {
// var ta = document.createElement('textarea');
// ta.value = JSON.stringify(TEST_CASES, null, '\t');
// ta.style.display = 'fixed';
// ta.style.top = '0';
// ta.style.left = '0';
// document.body.appendChild(ta);
// ta.select();
// return;
for (var i = 0, len = TEST_CASES.length; i < len; i++) {
if (LIMIT_TO_TEST && TEST_CASES[i].name !== LIMIT_TO_TEST) {
// if (TEST_CASES[i].name !== 'sample - html') {
continue;
}
generateTest(TEST_CASES[i], EXPECTED[i]);
}
QUnit.start();
}
function mergeEqualColors(source) {
// return source;
let result = [];
for (let i = 0; i < source.length; i++) {
let color = source[i].color;
let text = source[i].text;
if (result.length > 0 && result[result.length - 1].color === color) {
result[result.length - 1].text += text;
} else {
result.push({
color: color,
text: text
});
}
}
return result;
}
function generateTest(actual, expected) {
['vs', 'vs_dark', 'hc_black'].forEach(function(theme) {
// if (actual.name !== 'sample - bat') {
// return;
// }
QUnit.test(actual.name + ' ' + theme, function(assert) {
var _actual = actual.result[theme];
var _expected = expected.result[theme];
for (var i = 0; i < _actual.length; i++) {
var lineActual = mergeEqualColors(_actual[i]);
// .slice(0);
// for (var j = 1; j < lineActual.length; j++) {
// if (lineActual[j-1].color === lineActual[j].color) {
// lineActual[j-1] = {
// color: lineActual[j-1].color,
// text: lineActual[j-1].text + lineActual[j].text
// };
// lineActual.splice(j, 1);
// j--;
// }
// }
var lineExpected = mergeEqualColors(_expected[i]);
// .slice(0);
// for (var j = 1; j < lineExpected.length; j++) {
// if (lineExpected[j-1].color === lineExpected[j].color) {
// lineExpected[j-1] = {
// color: lineExpected[j-1].color,
// text: lineExpected[j-1].text + lineExpected[j].text
// };
// // lineExpected[j-1].text += lineExpected[j].text;
// lineExpected.splice(j, 1);
// j--;
// }
// }
assert.deepEqual(lineActual, lineExpected, 'Line #' + (i+1));
}
});
});
}
QUnit.config.autostart = false;
</script>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>

File diff suppressed because it is too large Load Diff

@ -13,7 +13,7 @@ button,
select, select,
textarea, textarea,
.navbar-search .search-query { .navbar-search .search-query {
font: 400 14px/1.4em "Segoe UI", "Open Sans", Calibri, Candara, Arial, sans-serif; font: 400 14px/1.4em 'Segoe UI', 'Open Sans', Calibri, Candara, Arial, sans-serif;
} }
.navbar .nav { .navbar .nav {
@ -26,15 +26,21 @@ a {
cursor: pointer; cursor: pointer;
} }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
letter-spacing: -0.01em; letter-spacing: -0.01em;
margin: 0; margin: 0;
line-height: normal; line-height: normal;
} }
/***** Bootstrap Cosmo Overrides *****/ /***** Bootstrap Cosmo Overrides *****/
h1, h2 { h1,
font-family: "Segoe UI Light", "Segoe UI", "Open Sans", Calibri, Candara, Arial, sans-serif; h2 {
font-family: 'Segoe UI Light', 'Segoe UI', 'Open Sans', Calibri, Candara, Arial, sans-serif;
font-weight: 300; font-weight: 300;
} }
h1 { h1 {
@ -83,7 +89,7 @@ h6 small {
} }
.navbar-inverse .navbar-inner { .navbar-inverse .navbar-inner {
background-color: #68217A; background-color: #68217a;
-webkit-filter: none; -webkit-filter: none;
filter: none; filter: none;
} }
@ -107,7 +113,7 @@ h6 small {
} }
.btn-primary { .btn-primary {
background-color: #0072C6; background-color: #0072c6;
} }
.home .hero-unit { .home .hero-unit {
@ -135,7 +141,7 @@ h6 small {
.nav-tabs > .active > a, .nav-tabs > .active > a,
.nav-tabs > .active > a:hover, .nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus { .nav-tabs > .active > a:focus {
color: #0072C6; color: #0072c6;
} }
/***** General *****/ /***** General *****/
@ -145,7 +151,7 @@ body > section > .container {
} }
.masthead { .masthead {
background-color: #0072C6; background-color: #0072c6;
color: white; color: white;
} }
@ -159,25 +165,28 @@ body > section > .container {
z-index: 500; z-index: 500;
} }
.navbar .nav>li>a { .navbar .nav > li > a {
text-shadow: none; text-shadow: none;
padding-top: 18px; padding-top: 18px;
font-size: 14px; font-size: 14px;
text-transform: uppercase; text-transform: uppercase;
} }
.navbar-inverse .nav-collapse .nav>li>a { .navbar-inverse .nav-collapse .nav > li > a {
color: white; color: white;
padding-left: 0; padding-left: 0;
} }
.navbar-inverse .nav>li>a.nav-item:focus, .navbar-inverse .nav>li>a.nav-item:hover { .navbar-inverse .nav > li > a.nav-item:focus,
background-color: rgba(0,0,0,.12); .navbar-inverse .nav > li > a.nav-item:hover {
background-color: rgba(0, 0, 0, 0.12);
} }
.navbar-inverse .nav .active>a.nav-item, .navbar-inverse .nav .active>a.nav-item:hover, .navbar-inverse .nav .active>a.nav-item:focus { .navbar-inverse .nav .active > a.nav-item,
color:#fff; .navbar-inverse .nav .active > a.nav-item:hover,
background-color: rgba(0,0,0,.24); .navbar-inverse .nav .active > a.nav-item:focus {
color: #fff;
background-color: rgba(0, 0, 0, 0.24);
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
@ -202,7 +211,7 @@ body > section > .container {
} }
.flgroup:after { .flgroup:after {
content: ""; content: '';
display: block; display: block;
visibility: hidden; visibility: hidden;
height: 0; height: 0;
@ -213,7 +222,8 @@ body > section > .container {
/* Media Queries */ /* Media Queries */
@media (min-width: 1200px) { @media (min-width: 1200px) {
h1, h2 { h1,
h2 {
letter-spacing: -0.04em; letter-spacing: -0.04em;
} }
@ -224,7 +234,6 @@ body > section > .container {
h2 { h2 {
font-size: 36px; font-size: 36px;
} }
} }
#gh-link { #gh-link {
@ -233,7 +242,7 @@ body > section > .container {
top: 0; top: 0;
right: 0; right: 0;
border: 0; border: 0;
margin:0; margin: 0;
z-index: 1000; z-index: 1000;
} }
@media (min-width: 980px) { @media (min-width: 980px) {
@ -247,7 +256,7 @@ body > section > .container {
float: right; float: right;
} }
.navbar-inverse .nav-collapse .nav>li>a { .navbar-inverse .nav-collapse .nav > li > a {
padding-left: 15px; padding-left: 15px;
} }
} }
@ -263,7 +272,9 @@ body > section > .container {
padding: inherit; padding: inherit;
} }
.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top { .navbar-fixed-top,
.navbar-fixed-bottom,
.navbar-static-top {
margin-right: inherit; margin-right: inherit;
margin-left: inherit; margin-left: inherit;
margin-bottom: 0; margin-bottom: 0;

@ -1,26 +1,30 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=device-width">
<title>Monaco Editor</title> <title>Monaco Editor</title>
<link data-inline="yes-please" href="./lib/bootstrap-cosmo.css" rel="stylesheet"> <link data-inline="yes-please" href="./lib/bootstrap-cosmo.css" rel="stylesheet" />
<link data-inline="yes-please" href="./lib/bootstrap-responsive.min.css" rel="stylesheet"> <link data-inline="yes-please" href="./lib/bootstrap-responsive.min.css" rel="stylesheet" />
<link data-inline="yes-please" href="./all.css" rel="stylesheet"> <link data-inline="yes-please" href="./all.css" rel="stylesheet" />
<link data-inline="yes-please" href="./index/index.css" rel="stylesheet"> <link data-inline="yes-please" href="./index/index.css" rel="stylesheet" />
<link data-name="vs/editor/editor.main" rel="stylesheet" href="../release/dev/vs/editor/editor.main.css"> <link
</head> data-name="vs/editor/editor.main"
rel="stylesheet"
href="../release/dev/vs/editor/editor.main.css"
/>
</head>
<body> <body>
<pre data-preload="index/samples/sample.typescript.txt"></pre> <pre data-preload="index/samples/sample.typescript.txt"></pre>
<pre data-preload="index/samples/diff.lhs.txt"></pre> <pre data-preload="index/samples/diff.lhs.txt"></pre>
<pre data-preload="index/samples/diff.rhs.txt"></pre> <pre data-preload="index/samples/diff.rhs.txt"></pre>
<a id="gh-link" href="https://github.com/Microsoft/monaco-editor"><img <a id="gh-link" href="https://github.com/Microsoft/monaco-editor"
width="149" height="149" alt="Fork me on GitHub" src="./fork.png"/></a> ><img width="149" height="149" alt="Fork me on GitHub" src="./fork.png"
/></a>
<nav class="navbar navbar-inverse navbar-fixed-top"> <nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container"> <div class="container">
@ -28,7 +32,12 @@
<a href="index.html">Monaco Editor</a> <a href="index.html">Monaco Editor</a>
</div> </div>
<!-- collapse button for smaller screens --> <!-- collapse button for smaller screens -->
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <button
type="button"
class="btn btn-navbar"
data-toggle="collapse"
data-target=".nav-collapse"
>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
@ -41,7 +50,14 @@
<li><a class="nav-item" href="api/index.html">API Doc</a></li> <li><a class="nav-item" href="api/index.html">API Doc</a></li>
<li><a class="nav-item" href="playground.html">Playground</a></li> <li><a class="nav-item" href="playground.html">Playground</a></li>
<li><a class="nav-item" href="monarch.html">Monarch</a></li> <li><a class="nav-item" href="monarch.html">Monarch</a></li>
<li><a class="nav-item" target="_blank" href="https://registry.npmjs.org/monaco-editor/-/monaco-editor-{{version}}.tgz">Download {{version}}</a></li> <li>
<a
class="nav-item"
target="_blank"
href="https://registry.npmjs.org/monaco-editor/-/monaco-editor-{{version}}.tgz"
>Download {{version}}</a
>
</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -52,41 +68,71 @@
<h3>About</h3> <h3>About</h3>
<div class="row"> <div class="row">
<div class="span12"> <div class="span12">
<br/> <br />
<p>The Monaco Editor is the code editor that powers <a href="https://github.com/Microsoft/vscode">VS Code</a>. <p>
A good page describing the code editor's features is <a href="https://code.visualstudio.com/docs/editor/editingevolved">here</a>.</p> The Monaco Editor is the code editor that powers
<a href="https://github.com/Microsoft/vscode">VS Code</a>. A good page describing the
code editor's features is
<a href="https://code.visualstudio.com/docs/editor/editingevolved">here</a>.
</p>
<p>It is licensed under the MIT License and supports Edge, Chrome, Firefox, Safari and Opera.</p> <p>
It is licensed under the MIT License and supports Edge, Chrome, Firefox, Safari and
Opera.
</p>
<p>The Monaco editor is <span style="font-weight:bold;color:#ff5722;">not</span> supported in mobile browsers or mobile web frameworks. </p> <p>
The Monaco editor is
<span style="font-weight: bold; color: #ff5722">not</span>
supported in mobile browsers or mobile web frameworks.
</p>
<p>Find more information at the <a href="https://github.com/Microsoft/monaco-editor">Monaco Editor repo</a>.</p> <p>
Find more information at the
<a href="https://github.com/Microsoft/monaco-editor">Monaco Editor repo</a>.
</p>
</div> </div>
</div> </div>
<hr/> <hr />
<h3>Download v{{version}}</h3> <h3>Download v{{version}}</h3>
<div class="row"> <div class="row">
<div class="span12"> <div class="span12">
<br/> <br />
<p>The latest released version is <strong>{{version}}</strong>.</p> <p>The latest released version is <strong>{{version}}</strong>.</p>
<p>Download with this direct <a target="_blank" href="https://registry.npmjs.org/monaco-editor/-/monaco-editor-{{version}}.tgz">download link</a> <p>
or <a href="https://www.npmjs.com/package/monaco-editor">from npm</a>:</p> Download with this direct
<pre style="color:black">npm install monaco-editor@{{version}}</pre> <a
target="_blank"
href="https://registry.npmjs.org/monaco-editor/-/monaco-editor-{{version}}.tgz"
>download link</a
>
or
<a href="https://www.npmjs.com/package/monaco-editor">from npm</a>:
</p>
<pre style="color: black">npm install monaco-editor@{{version}}</pre>
</div> </div>
</div> </div>
<hr/> <hr />
<h3>Editor</h3> <h3>Editor</h3>
<div class="editor row"> <div class="editor row">
<div class="span3"> <div class="span3">
<h4 title="Syntax colorization plus support for errors, warnings, IntelliSense, formatting and outlining">Rich IntelliSense, Validation</h4> <h4
title="Syntax colorization plus support for errors, warnings, IntelliSense, formatting and outlining"
>
Rich IntelliSense, Validation
</h4>
<p>TypeScript, JavaScript, CSS, LESS, SCSS, JSON, HTML</p> <p>TypeScript, JavaScript, CSS, LESS, SCSS, JSON, HTML</p>
<br> <br />
<h4 title="Syntax colorization">Basic Syntax Colorization</h4> <h4 title="Syntax colorization">Basic Syntax Colorization</h4>
<p>XML, PHP, C#, C++, Razor, Markdown, Diff, Java, VB, CoffeeScript, Handlebars, Batch, Pug, F#, Lua, Powershell, <p>
Python, Ruby, SASS, R, Objective-C</p> XML, PHP, C#, C++, Razor, Markdown, Diff, Java, VB, CoffeeScript, Handlebars, Batch,
<br> Pug, F#, Lua, Powershell, Python, Ruby, SASS, R, Objective-C
<p>Colorizers are implemented using <a href="monarch.html" </p>
target="_blank">Monarch</a>.</p> <br />
<p>
Colorizers are implemented using
<a href="monarch.html" target="_blank">Monarch</a>.
</p>
</div> </div>
<div class="span9"> <div class="span9">
<div class="row"> <div class="row">
@ -104,7 +150,7 @@
</div> </div>
</div> </div>
<div class="editor-frame"> <div class="editor-frame">
<div class="loading editor" style="display: none;"> <div class="loading editor" style="display: none">
<div class="progress progress-striped active"> <div class="progress progress-striped active">
<div class="bar"></div> <div class="bar"></div>
</div> </div>
@ -113,11 +159,13 @@
</div> </div>
</div> </div>
</div> </div>
<hr> <hr />
<h3>Diff Editor</h3> <h3>Diff Editor</h3>
<div class="editor row"> <div class="editor row">
<div class="span3"> <div class="span3">
<h4 title="As you type diffing for all supported languages">Side by side live comparison</h4> <h4 title="As you type diffing for all supported languages">
Side by side live comparison
</h4>
<p>Supports all languages out of the box</p> <p>Supports all languages out of the box</p>
</div> </div>
<div class="span9"> <div class="span9">
@ -125,13 +173,14 @@
<div class="span8"> <div class="span8">
<div class="checkbox"> <div class="checkbox">
<label class="control-label"> <label class="control-label">
<input id="inline-diff-checkbox" type="checkbox" value=""> Inline diff <input id="inline-diff-checkbox" type="checkbox" value="" />
Inline diff
</label> </label>
</div> </div>
</div> </div>
</div> </div>
<div class="editor-frame"> <div class="editor-frame">
<div class="loading diff-editor" style="display: none;"> <div class="loading diff-editor" style="display: none">
<div class="progress progress-striped active"> <div class="progress progress-striped active">
<div class="bar"></div> <div class="bar"></div>
</div> </div>
@ -141,28 +190,40 @@
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<footer class="container"> <footer class="container">
<hr> <hr />
<p class="text-center"> <p class="text-center">
<a href="https://microsoft.com" title="Microsoft"> <a href="https://microsoft.com" title="Microsoft">
<img src="https://opensource.microsoft.com/assets/images/Microsoft_logo.svg" alt="Microsoft" style="max-height:23px;margin-bottom:12px;"> <img
src="https://opensource.microsoft.com/assets/images/Microsoft_logo.svg"
alt="Microsoft"
style="max-height: 23px; margin-bottom: 12px"
/>
</a> </a>
<br/> <br />
<small>&copy; {{year}} Microsoft</small> <small>&copy; {{year}} Microsoft</small>
</p> </p>
</footer> </footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js" integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ=" crossorigin="anonymous"></script> <script
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/bootstrap.min.js" integrity="sha256-u+l2mGjpmGK/mFgUncmMcFKdMijvV+J3odlDJZSNUu8=" crossorigin="anonymous"></script> src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"
integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ="
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/bootstrap.min.js"
integrity="sha256-u+l2mGjpmGK/mFgUncmMcFKdMijvV+J3odlDJZSNUu8="
crossorigin="anonymous"
></script>
<script>var require = { paths: { 'vs': '../release/dev/vs' } };</script> <script>
var require = { paths: { vs: '../release/dev/vs' } };
</script>
<script src="../release/dev/vs/loader.js"></script> <script src="../release/dev/vs/loader.js"></script>
<script src="../release/dev/vs/editor/editor.main.nls.js"></script> <script src="../release/dev/vs/editor/editor.main.nls.js"></script>
<script src="../release/dev/vs/editor/editor.main.js"></script> <script src="../release/dev/vs/editor/editor.main.js"></script>
<script data-inline="yes-please" src="./index/index.js"></script> <script data-inline="yes-please" src="./index/index.js"></script>
</body>
</body>
</html> </html>

@ -26,15 +26,15 @@
.try .drops li.active h4, .try .drops li.active h4,
.try .drops li.active:hover h4 { .try .drops li.active:hover h4 {
color: #0072C6; color: #0072c6;
} }
.try .drops li:hover h4 { .try .drops li:hover h4 {
color: rgba(0, 114, 198, .5); color: rgba(0, 114, 198, 0.5);
} }
.try .editor.row { .try .editor.row {
padding: 18px 0 padding: 18px 0;
} }
.try .row h4 { .try .row h4 {
@ -83,9 +83,9 @@
height: 43px; height: 43px;
width: 80px; width: 80px;
opacity: .5; opacity: 0.5;
transition: opacity .5s ease, bottom .5s ease; transition: opacity 0.5s ease, bottom 0.5s ease;
-webkit-transition: opacity .5s ease, bottom .5s ease; -webkit-transition: opacity 0.5s ease, bottom 0.5s ease;
} }
.try .tile:hover .glyph { .try .tile:hover .glyph {
@ -104,7 +104,7 @@
margin-right: 4px; margin-right: 4px;
} }
.try .editor.row .monaco-editor .find-widget input[type="text"] { .try .editor.row .monaco-editor .find-widget input[type='text'] {
margin-bottom: 0; margin-bottom: 0;
-webkit-box-shadow: none; -webkit-box-shadow: none;
-moz-box-shadow: none; -moz-box-shadow: none;
@ -140,7 +140,7 @@
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: rgba(255, 255, 255, .5); background-color: rgba(255, 255, 255, 0.5);
margin: 0 auto; margin: 0 auto;
display: none; display: none;
z-index: 100; z-index: 100;
@ -176,7 +176,7 @@
} }
.try .editor .vs-dark.monaco-editor .context-view.monaco-menu-container a { .try .editor .vs-dark.monaco-editor .context-view.monaco-menu-container a {
color: #BBB; color: #bbb;
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
@ -219,12 +219,14 @@
/* ------- BEGIN bootstrap fixes for the editor ------- */ /* ------- BEGIN bootstrap fixes for the editor ------- */
.monaco-editor .container:before, .monaco-editor .row:before { .monaco-editor .container:before,
content: ""; .monaco-editor .row:before {
content: '';
display: inherit; display: inherit;
} }
.monaco-editor .container:after, .monaco-editor .row:after { .monaco-editor .container:after,
.monaco-editor .row:after {
clear: inherit; clear: inherit;
} }

@ -1,16 +1,19 @@
/// <reference path="../../release/monaco.d.ts" /> /// <reference path="../../release/monaco.d.ts" />
"use strict"; 'use strict';
var editor = null, diffEditor = null; var editor = null,
diffEditor = null;
$(document).ready(function() { $(document).ready(function () {
require(['vs/editor/editor.main'], function () { require(['vs/editor/editor.main'], function () {
var MODES = (function() { var MODES = (function () {
var modesIds = monaco.languages.getLanguages().map(function(lang) { return lang.id; }); var modesIds = monaco.languages.getLanguages().map(function (lang) {
return lang.id;
});
modesIds.sort(); modesIds.sort();
return modesIds.map(function(modeId) { return modesIds.map(function (modeId) {
return { return {
modeId: modeId, modeId: modeId,
sampleURL: 'index/samples/sample.' + modeId + '.txt' sampleURL: 'index/samples/sample.' + modeId + '.txt'
@ -25,15 +28,15 @@ $(document).ready(function() {
if (MODES[i].modeId === 'typescript') { if (MODES[i].modeId === 'typescript') {
startModeIndex = i; startModeIndex = i;
} }
$(".language-picker").append(o); $('.language-picker').append(o);
} }
$(".language-picker")[0].selectedIndex = startModeIndex; $('.language-picker')[0].selectedIndex = startModeIndex;
loadSample(MODES[startModeIndex]); loadSample(MODES[startModeIndex]);
$(".language-picker").change(function() { $('.language-picker').change(function () {
loadSample(MODES[this.selectedIndex]); loadSample(MODES[this.selectedIndex]);
}); });
$(".theme-picker").change(function() { $('.theme-picker').change(function () {
changeTheme(this.selectedIndex); changeTheme(this.selectedIndex);
}); });
@ -57,10 +60,10 @@ $(document).ready(function() {
}); });
var preloaded = {}; var preloaded = {};
(function() { (function () {
var elements = Array.prototype.slice.call(document.querySelectorAll('pre[data-preload]'), 0); var elements = Array.prototype.slice.call(document.querySelectorAll('pre[data-preload]'), 0);
elements.forEach(function(el) { elements.forEach(function (el) {
var path = el.getAttribute('data-preload'); var path = el.getAttribute('data-preload');
preloaded[path] = el.innerText || el.textContent; preloaded[path] = el.innerText || el.textContent;
el.parentNode.removeChild(el); el.parentNode.removeChild(el);
@ -78,14 +81,14 @@ function xhr(url, cb) {
error: function () { error: function () {
cb(this, null); cb(this, null);
} }
}).done(function(data) { }).done(function (data) {
cb(null, data); cb(null, data);
}); });
} }
function loadSample(mode) { function loadSample(mode) {
$('.loading.editor').show(); $('.loading.editor').show();
xhr(mode.sampleURL, function(err, data) { xhr(mode.sampleURL, function (err, data) {
if (err) { if (err) {
if (editor) { if (editor) {
if (editor.getModel()) { if (editor.getModel()) {
@ -96,14 +99,16 @@ function loadSample(mode) {
} }
$('.loading.editor').fadeOut({ duration: 200 }); $('.loading.editor').fadeOut({ duration: 200 });
$('#editor').empty(); $('#editor').empty();
$('#editor').append('<p class="alert alert-error">Failed to load ' + mode.modeId + ' sample</p>'); $('#editor').append(
'<p class="alert alert-error">Failed to load ' + mode.modeId + ' sample</p>'
);
return; return;
} }
if (!editor) { if (!editor) {
$('#editor').empty(); $('#editor').empty();
editor = monaco.editor.create(document.getElementById('editor'), { editor = monaco.editor.create(document.getElementById('editor'), {
model: null, model: null
}); });
} }
@ -114,34 +119,35 @@ function loadSample(mode) {
oldModel.dispose(); oldModel.dispose();
} }
$('.loading.editor').fadeOut({ duration: 300 }); $('.loading.editor').fadeOut({ duration: 300 });
}) });
} }
function loadDiffSample() { function loadDiffSample() {
var onError = function () {
var onError = function() {
$('.loading.diff-editor').fadeOut({ duration: 200 }); $('.loading.diff-editor').fadeOut({ duration: 200 });
$('#diff-editor').append('<p class="alert alert-error">Failed to load diff editor sample</p>'); $('#diff-editor').append('<p class="alert alert-error">Failed to load diff editor sample</p>');
}; };
$('.loading.diff-editor').show(); $('.loading.diff-editor').show();
var lhsData = null, rhsData = null, jsMode = null; var lhsData = null,
rhsData = null,
jsMode = null;
xhr('index/samples/diff.lhs.txt', function(err, data) { xhr('index/samples/diff.lhs.txt', function (err, data) {
if (err) { if (err) {
return onError(); return onError();
} }
lhsData = data; lhsData = data;
onProgress(); onProgress();
}) });
xhr('index/samples/diff.rhs.txt', function(err, data) { xhr('index/samples/diff.rhs.txt', function (err, data) {
if (err) { if (err) {
return onError(); return onError();
} }
rhsData = data; rhsData = data;
onProgress(); onProgress();
}) });
function onProgress() { function onProgress() {
if (lhsData && rhsData) { if (lhsData && rhsData) {
@ -163,6 +169,6 @@ function loadDiffSample() {
} }
function changeTheme(theme) { function changeTheme(theme) {
var newTheme = (theme === 1 ? 'vs-dark' : ( theme === 0 ? 'vs' : 'hc-black' )); var newTheme = theme === 1 ? 'vs-dark' : theme === 0 ? 'vs' : 'hc-black';
monaco.editor.setTheme(newTheme); monaco.editor.setTheme(newTheme);
} }

File diff suppressed because it is too large Load Diff

@ -1,59 +1,100 @@
/* common extra token classes */ /* common extra token classes */
.monaco-editor .token.invalid { border-bottom: red dotted 1px } .monaco-editor .token.invalid {
.monaco-editor .token.identifier { } border-bottom: red dotted 1px;
.monaco-editor .token.comment.doc { font-style: normal; } }
.monaco-editor .token.comment.doc {
font-style: normal;
}
.monaco-editor .token.type { color: teal; } .monaco-editor .token.type {
.monaco-editor .token.type.delimiter { color: teal; } color: teal;
.monaco-editor .token.predefined { color: navy; } }
.monaco-editor .token.namespace { color: navy; } .monaco-editor .token.type.delimiter {
.monaco-editor .token.constructor { color: purple; } color: teal;
}
.monaco-editor .token.predefined {
color: navy;
}
.monaco-editor .token.namespace {
color: navy;
}
.monaco-editor .token.constructor {
color: purple;
}
/* theme all the new token classes */ /* theme all the new token classes */
.monaco-editor.vs-dark .token.type { color: darkcyan;} .monaco-editor.vs-dark .token.type {
.monaco-editor.vs-dark .token.predefined { color: darkorchid;} color: darkcyan;
.monaco-editor.vs-dark .token.namespace { color: lightsteelblue; } }
.monaco-editor.vs-dark .token.constructor { color: palegoldenrod; } .monaco-editor.vs-dark .token.predefined {
color: darkorchid;
}
.monaco-editor.vs-dark .token.namespace {
color: lightsteelblue;
}
.monaco-editor.vs-dark .token.constructor {
color: palegoldenrod;
}
.monaco-editor.high-contrast-black .token.type { color: darkcyan;} .monaco-editor.high-contrast-black .token.type {
.monaco-editor.high-contrast-black .token.predefined { color: aquamarine;} color: darkcyan;
.monaco-editor.high-contrast-black .token.namespace { color: lightsteelblue; } }
.monaco-editor.high-contrast-black .token.constructor { color: palegoldenrod; } .monaco-editor.high-contrast-black .token.predefined {
color: aquamarine;
}
.monaco-editor.high-contrast-black .token.namespace {
color: lightsteelblue;
}
.monaco-editor.high-contrast-black .token.constructor {
color: palegoldenrod;
}
/* specials for functional languages */ /* specials for functional languages */
.token.keyword.dot { color: black; } .token.keyword.dot {
.token.typeparam { color: #555; } color: black;
.token.typevar { font-style: italic; } }
.token.typeparam {
color: #555;
}
.token.typevar {
font-style: italic;
}
.monaco-editor .current-line, .monaco-editor .current-line,
.monaco-editor.vs .current-line, .monaco-editor.vs .current-line,
.monaco-editor.monaco .current-line { border: none; } .monaco-editor.monaco .current-line {
.monaco-editor.vs .key.js { color: navy;} border: none;
}
.monaco-editor.vs .key.js {
color: navy;
}
.monaco-editor.vs .token.string.escape, .monaco-editor.vs .token.string.escape,
.token.regexp.escape { color: dimgray; } .token.regexp.escape {
.token.regexp.escape.control { color: black; } color: dimgray;
}
.token.regexp.escape.control {
color: black;
}
.token.emphasis { font-style: italic;} .token.emphasis {
.token.strong { font-weight: bold; } font-style: italic;
.token.header { color: navy ;} }
.token.strong {
font-weight: bold;
}
.token.header {
color: navy;
}
/* ------------------------------------------- /* -------------------------------------------
Workbench UI style Workbench UI style
--------------------------------------------*/ --------------------------------------------*/
#editor, #langPane { #editor,
#langPane {
height: 60ex; height: 60ex;
border: 1px solid #ccc border: 1px solid #ccc;
} }
#langPane { #langPane {
@ -61,7 +102,7 @@
} }
#main { #main {
font-family: "Segoe UI Light", "Segoe UI", Arial, "HelveticaNeue-Light", sans-serif; font-family: 'Segoe UI Light', 'Segoe UI', Arial, 'HelveticaNeue-Light', sans-serif;
font-size: 12pt; font-size: 12pt;
width: 94%; width: 94%;
padding: 0pt; padding: 0pt;
@ -81,7 +122,8 @@
margin: 0pt; margin: 0pt;
} }
#header, #footer { #header,
#footer {
clear: both; clear: both;
font-size: 18pt; font-size: 18pt;
margin-bottom: 1ex; margin-bottom: 1ex;
@ -98,7 +140,6 @@
height: 90%; height: 90%;
} }
#monarchConsole { #monarchConsole {
color: black; color: black;
overflow: auto; overflow: auto;
@ -112,7 +153,8 @@
#sampleselect { #sampleselect {
width: 15ex; width: 15ex;
} }
#themeselect, #sampleselect { #themeselect,
#sampleselect {
padding: 0; padding: 0;
margin: 0; margin: 0;
height: auto; height: auto;
@ -140,7 +182,7 @@
} }
.touchbutton:hover { .touchbutton:hover {
background-color: #F8F8F8; background-color: #f8f8f8;
} }
.touchbutton { .touchbutton {
@ -152,7 +194,7 @@
} }
.touchbutton:hover { .touchbutton:hover {
background-color: #F8F8F8; background-color: #f8f8f8;
} }
.arrowdown { .arrowdown {
@ -162,11 +204,11 @@
/*------------------------------------------------------------------- /*-------------------------------------------------------------------
documentation style documentation style
-------------------------------------------------------------------*/ -------------------------------------------------------------------*/
#documentation { #documentation {
clear: both; clear: both;
border: lightgray 1px solid; border: lightgray 1px solid;
padding: 1ex 4ex 1ex 3ex; padding: 1ex 4ex 1ex 3ex;
font-family: "Segoe UI", Arial, "HelveticaNeue-Light", sans-serif; font-family: 'Segoe UI', Arial, 'HelveticaNeue-Light', sans-serif;
} }
#documentation a { #documentation a {
@ -176,44 +218,79 @@
} }
#documentation .monaco-editor.monaco .current-line, #documentation .monaco-editor.monaco .current-line,
#documentation .monaco-editor { background-color: #fafafa } #documentation .monaco-editor {
#documentation .string.escape { color: dimgray;} background-color: #fafafa;
}
#documentation .string.escape {
color: dimgray;
}
h1,h2,h3,h4 h1,
{ font-weight: normal; h2,
h3,
h4 {
font-weight: normal;
margin-top: 0pt; margin-top: 0pt;
margin-left: -1.5ex; margin-left: -1.5ex;
margin-bottom: 0pt; margin-bottom: 0pt;
} }
h2 { font-size: 16pt;} h2 {
h3 { font-size: 120%;} font-size: 16pt;
}
h3 {
font-size: 120%;
}
ul { padding-left: 1.5em ul {
; margin-left: 0pt padding-left: 1.5em;
} margin-left: 0pt;
}
.options, .options,
pre { border: 1px solid #888 pre {
; padding: 1ex border: 1px solid #888;
; background: #F8F8F8 padding: 1ex;
; font-size: 10pt; background: #f8f8f8;
} font-size: 10pt;
}
code, pre,dt { font-family: Consolas, monospace }
strong { color: black } code,
pre,
dt {
font-family: Consolas, monospace;
}
td { vertical-align: top } strong {
img { margin: 2ex } color: black;
}
td {
vertical-align: top;
}
img {
margin: 2ex;
}
dt { color: navy; margin-top: 2ex; padding: 2px;} dt {
.dt { color: navy } color: navy;
.adv { color: maroon; } margin-top: 2ex;
padding: 2px;
}
.dt {
color: navy;
}
.adv {
color: maroon;
}
dl dl dt { margin-top: 1ex;} dl dl dt {
margin-top: 1ex;
}
#documentation .keyword { color: blue; } #documentation .keyword {
#documentation .tag { color: navy; } color: blue;
}
#documentation .tag {
color: navy;
}

@ -1,12 +1,12 @@
/// <reference path="../../release/monaco.d.ts" /> /// <reference path="../../release/monaco.d.ts" />
"use strict"; 'use strict';
/*----------------------------------------- /*-----------------------------------------
General helpers General helpers
------------------------------------------*/ ------------------------------------------*/
function clearInnerText(elem) { function clearInnerText(elem) {
elem.innerHTML = ""; elem.innerHTML = '';
} }
function getInnerText(elem) { function getInnerText(elem) {
@ -35,17 +35,16 @@ function getTextFromId(id) {
return getInnerText(elem); return getInnerText(elem);
} }
/* ----------------------------------------- /* -----------------------------------------
The main loader for the workbench UI The main loader for the workbench UI
------------------------------------------*/ ------------------------------------------*/
var outputPane = document.getElementById("monarchConsole"); var outputPane = document.getElementById('monarchConsole');
var isDirty = false; var isDirty = false;
window.onbeforeunload = function (ev) { window.onbeforeunload = function (ev) {
if (isDirty) { if (isDirty) {
return "If you leave this page any unsaved work will be lost."; return 'If you leave this page any unsaved work will be lost.';
} }
}; };
@ -53,10 +52,10 @@ function createLangModel(languageId, text) {
monaco.languages.register({ id: languageId }); monaco.languages.register({ id: languageId });
var langModel = monaco.editor.createModel(text, 'javascript'); var langModel = monaco.editor.createModel(text, 'javascript');
var update = function() { var update = function () {
var def = null; var def = null;
try { try {
def = eval("(function(){ " + langModel.getValue() + "; })()"); def = eval('(function(){ ' + langModel.getValue() + '; })()');
} catch (err) { } catch (err) {
setInnerText(outputPane, err + '\n'); setInnerText(outputPane, err + '\n');
return; return;
@ -64,7 +63,7 @@ function createLangModel(languageId, text) {
monaco.languages.setMonarchTokensProvider(languageId, def); monaco.languages.setMonarchTokensProvider(languageId, def);
setInnerText(outputPane, 'up-to-date\n'); setInnerText(outputPane, 'up-to-date\n');
}; };
langModel.onDidChangeContent(function() { langModel.onDidChangeContent(function () {
isDirty = true; isDirty = true;
update(); update();
}); });
@ -84,31 +83,31 @@ function readSamples(sampleSelect) {
var languageId = 'monarch-language-' + id; var languageId = 'monarch-language-' + id;
var sampleText = getTextFromId(id + "-sample"); var sampleText = getTextFromId(id + '-sample');
samples[id] = { samples[id] = {
languageId: languageId, languageId: languageId,
langModel: createLangModel(languageId, getTextFromId(id)), langModel: createLangModel(languageId, getTextFromId(id)),
langViewState: null, langViewState: null,
sampleModel: monaco.editor.createModel(sampleText, languageId), sampleModel: monaco.editor.createModel(sampleText, languageId),
sampleViewState: null, sampleViewState: null
}; };
} }
return samples; return samples;
} }
require(["vs/editor/editor.main"], function () { require(['vs/editor/editor.main'], function () {
var sampleSelect = document.getElementById("sampleselect"); var sampleSelect = document.getElementById('sampleselect');
var langPane = document.getElementById("langPane"); var langPane = document.getElementById('langPane');
var editorPane = document.getElementById("editor"); var editorPane = document.getElementById('editor');
// Adjust height of editors // Adjust height of editors
var screenHeight = window.innerHeight; var screenHeight = window.innerHeight;
if (screenHeight) { if (screenHeight) {
var paneHeight = 0.76 * screenHeight; var paneHeight = 0.76 * screenHeight;
langPane.style.height = paneHeight + "px"; langPane.style.height = paneHeight + 'px';
editorPane.style.height = (paneHeight - 112) + "px"; // 100px + margin 10px + borders 2px editorPane.style.height = paneHeight - 112 + 'px'; // 100px + margin 10px + borders 2px
} }
var SAMPLES = readSamples(sampleSelect); var SAMPLES = readSamples(sampleSelect);
@ -124,8 +123,8 @@ require(["vs/editor/editor.main"], function () {
scrollBeyondLastLine: false scrollBeyondLastLine: false
}); });
var select = document.getElementById("themeselect"); var select = document.getElementById('themeselect');
var currentTheme = "vs"; var currentTheme = 'vs';
select.onchange = function () { select.onchange = function () {
currentTheme = select.options[select.selectedIndex].value; currentTheme = select.options[select.selectedIndex].value;
monaco.editor.setTheme(currentTheme); monaco.editor.setTheme(currentTheme);
@ -135,7 +134,7 @@ require(["vs/editor/editor.main"], function () {
function refreshLayout() { function refreshLayout() {
langEditor.layout(); langEditor.layout();
sampleEditor.layout(); sampleEditor.layout();
}; }
window.onresize = refreshLayout; window.onresize = refreshLayout;
// Switch to another sample // Switch to another sample
@ -170,5 +169,4 @@ require(["vs/editor/editor.main"], function () {
} }
sampleSelect.onchange = refreshSample; sampleSelect.onchange = refreshSample;
refreshSample(); // initialize initial text refreshSample(); // initialize initial text
}); // require }); // require

@ -1,9 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=device-width">
<title>Monaco Editor Playground</title> <title>Monaco Editor Playground</title>
@ -13,15 +12,20 @@
<link data-inline="yes-please" href="./playground/spinner.css" rel="stylesheet" /> <link data-inline="yes-please" href="./playground/spinner.css" rel="stylesheet" />
<link data-inline="yes-please" href="./playground/playground.css" rel="stylesheet" /> <link data-inline="yes-please" href="./playground/playground.css" rel="stylesheet" />
<link data-name="vs/editor/editor.main" rel="stylesheet" href="../release/dev/vs/editor/editor.main.css"> <link
</head> data-name="vs/editor/editor.main"
<body class="playground-page"> rel="stylesheet"
href="../release/dev/vs/editor/editor.main.css"
/>
</head>
<body class="playground-page">
<pre data-preload="playground/new-samples/creating-the-editor/hello-world/sample.js"></pre> <pre data-preload="playground/new-samples/creating-the-editor/hello-world/sample.js"></pre>
<pre data-preload="playground/new-samples/creating-the-editor/hello-world/sample.css"></pre> <pre data-preload="playground/new-samples/creating-the-editor/hello-world/sample.css"></pre>
<pre data-preload="playground/new-samples/creating-the-editor/hello-world/sample.html"></pre> <pre data-preload="playground/new-samples/creating-the-editor/hello-world/sample.html"></pre>
<a id="gh-link" href="https://github.com/Microsoft/monaco-editor"><img <a id="gh-link" href="https://github.com/Microsoft/monaco-editor"
width="149" height="149" alt="Fork me on GitHub" src="./fork.png"/></a> ><img width="149" height="149" alt="Fork me on GitHub" src="./fork.png"
/></a>
<nav class="navbar navbar-inverse navbar-fixed-top"> <nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
@ -30,7 +34,12 @@
<a href="index.html">Monaco Editor</a> <a href="index.html">Monaco Editor</a>
</div> </div>
<!-- collapse button for smaller screens --> <!-- collapse button for smaller screens -->
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <button
type="button"
class="btn btn-navbar"
data-toggle="collapse"
data-target=".nav-collapse"
>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
@ -43,7 +52,14 @@
<li><a class="nav-item" href="api/index.html">API Doc</a></li> <li><a class="nav-item" href="api/index.html">API Doc</a></li>
<li><a class="nav-item" href="playground.html">Playground</a></li> <li><a class="nav-item" href="playground.html">Playground</a></li>
<li><a class="nav-item" href="monarch.html">Monarch</a></li> <li><a class="nav-item" href="monarch.html">Monarch</a></li>
<li><a class="nav-item" target="_blank" href="https://registry.npmjs.org/monaco-editor/-/monaco-editor-{{version}}.tgz">Download {{version}}</a></li> <li>
<a
class="nav-item"
target="_blank"
href="https://registry.npmjs.org/monaco-editor/-/monaco-editor-{{version}}.tgz"
>Download {{version}}</a
>
</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -59,25 +75,34 @@
</div> </div>
</div> </div>
<section id="playground"> <section id="playground"></section>
</section>
<footer class="container"> <footer class="container">
<hr> <hr />
<p class="text-center"> <p class="text-center">
<small>&copy; {{year}} Microsoft</small> <small>&copy; {{year}} Microsoft</small>
</p> </p>
</footer> </footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js" integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ=" crossorigin="anonymous"></script> <script
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/bootstrap.min.js" integrity="sha256-u+l2mGjpmGK/mFgUncmMcFKdMijvV+J3odlDJZSNUu8=" crossorigin="anonymous"></script> src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"
integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ="
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/bootstrap.min.js"
integrity="sha256-u+l2mGjpmGK/mFgUncmMcFKdMijvV+J3odlDJZSNUu8="
crossorigin="anonymous"
></script>
<script>var require = { paths: { 'vs': '../release/dev/vs' } };</script> <script>
var require = { paths: { vs: '../release/dev/vs' } };
</script>
<script src="../release/dev/vs/loader.js"></script> <script src="../release/dev/vs/loader.js"></script>
<script src="../release/dev/vs/editor/editor.main.nls.js"></script> <script src="../release/dev/vs/editor/editor.main.nls.js"></script>
<script src="../release/dev/vs/editor/editor.main.js"></script> <script src="../release/dev/vs/editor/editor.main.js"></script>
<script data-inline="yes-please" src="./playground/new-samples/all.js"></script> <script data-inline="yes-please" src="./playground/new-samples/all.js"></script>
<script data-inline="yes-please" src="./playground/playground.js"></script> <script data-inline="yes-please" src="./playground/playground.js"></script>
</body> </body>
</html> </html>

@ -1,186 +1,184 @@
(function() { (function () {
var PLAY_SAMPLES = [
var PLAY_SAMPLES = [
{ {
chapter: "Creating the editor", chapter: 'Creating the editor',
name: "Hello world!", name: 'Hello world!',
id: "creating-the-editor-hello-world", id: 'creating-the-editor-hello-world',
path: "creating-the-editor/hello-world" path: 'creating-the-editor/hello-world'
}, },
{ {
chapter: "Creating the editor", chapter: 'Creating the editor',
name: "Editor basic options", name: 'Editor basic options',
id: "creating-the-editor-editor-basic-options", id: 'creating-the-editor-editor-basic-options',
path: "creating-the-editor/editor-basic-options" path: 'creating-the-editor/editor-basic-options'
}, },
{ {
chapter: "Creating the editor", chapter: 'Creating the editor',
name: "Hard wrapping", name: 'Hard wrapping',
id: "creating-the-editor-hard-wrapping", id: 'creating-the-editor-hard-wrapping',
path: "creating-the-editor/hard-wrapping" path: 'creating-the-editor/hard-wrapping'
}, },
{ {
chapter: "Creating the editor", chapter: 'Creating the editor',
name: "Syntax highlighting for HTML elements", name: 'Syntax highlighting for HTML elements',
id: "creating-the-editor-syntax-highlighting-for-html-elements", id: 'creating-the-editor-syntax-highlighting-for-html-elements',
path: "creating-the-editor/syntax-highlighting-for-html-elements" path: 'creating-the-editor/syntax-highlighting-for-html-elements'
}, },
{ {
chapter: "Interacting with the editor", chapter: 'Interacting with the editor',
name: "Adding a command to an editor instance", name: 'Adding a command to an editor instance',
id: "interacting-with-the-editor-adding-a-command-to-an-editor-instance", id: 'interacting-with-the-editor-adding-a-command-to-an-editor-instance',
path: "interacting-with-the-editor/adding-a-command-to-an-editor-instance" path: 'interacting-with-the-editor/adding-a-command-to-an-editor-instance'
}, },
{ {
chapter: "Interacting with the editor", chapter: 'Interacting with the editor',
name: "Adding an action to an editor instance", name: 'Adding an action to an editor instance',
id: "interacting-with-the-editor-adding-an-action-to-an-editor-instance", id: 'interacting-with-the-editor-adding-an-action-to-an-editor-instance',
path: "interacting-with-the-editor/adding-an-action-to-an-editor-instance" path: 'interacting-with-the-editor/adding-an-action-to-an-editor-instance'
}, },
{ {
chapter: "Interacting with the editor", chapter: 'Interacting with the editor',
name: "Revealing a position", name: 'Revealing a position',
id: "interacting-with-the-editor-revealing-a-position", id: 'interacting-with-the-editor-revealing-a-position',
path: "interacting-with-the-editor/revealing-a-position" path: 'interacting-with-the-editor/revealing-a-position'
}, },
{ {
chapter: "Interacting with the editor", chapter: 'Interacting with the editor',
name: "Rendering glyphs in the margin", name: 'Rendering glyphs in the margin',
id: "interacting-with-the-editor-rendering-glyphs-in-the-margin", id: 'interacting-with-the-editor-rendering-glyphs-in-the-margin',
path: "interacting-with-the-editor/rendering-glyphs-in-the-margin" path: 'interacting-with-the-editor/rendering-glyphs-in-the-margin'
}, },
{ {
chapter: "Interacting with the editor", chapter: 'Interacting with the editor',
name: "Line and Inline decorations", name: 'Line and Inline decorations',
id: "interacting-with-the-editor-line-and-inline-decorations", id: 'interacting-with-the-editor-line-and-inline-decorations',
path: "interacting-with-the-editor/line-and-inline-decorations" path: 'interacting-with-the-editor/line-and-inline-decorations'
}, },
{ {
chapter: "Interacting with the editor", chapter: 'Interacting with the editor',
name: "Customizing the line numbers", name: 'Customizing the line numbers',
id: "interacting-with-the-editor-customizing-the-line-numbers", id: 'interacting-with-the-editor-customizing-the-line-numbers',
path: "interacting-with-the-editor/customizing-the-line-numbers" path: 'interacting-with-the-editor/customizing-the-line-numbers'
}, },
{ {
chapter: "Interacting with the editor", chapter: 'Interacting with the editor',
name: "Listening to mouse events", name: 'Listening to mouse events',
id: "interacting-with-the-editor-listening-to-mouse-events", id: 'interacting-with-the-editor-listening-to-mouse-events',
path: "interacting-with-the-editor/listening-to-mouse-events" path: 'interacting-with-the-editor/listening-to-mouse-events'
}, },
{ {
chapter: "Interacting with the editor", chapter: 'Interacting with the editor',
name: "Listening to key events", name: 'Listening to key events',
id: "interacting-with-the-editor-listening-to-key-events", id: 'interacting-with-the-editor-listening-to-key-events',
path: "interacting-with-the-editor/listening-to-key-events" path: 'interacting-with-the-editor/listening-to-key-events'
}, },
{ {
chapter: "Customizing the appearence", chapter: 'Customizing the appearence',
name: "Exposed colors", name: 'Exposed colors',
id: "customizing-the-appearence-exposed-colors", id: 'customizing-the-appearence-exposed-colors',
path: "customizing-the-appearence/exposed-colors" path: 'customizing-the-appearence/exposed-colors'
}, },
{ {
chapter: "Customizing the appearence", chapter: 'Customizing the appearence',
name: "Scrollbars", name: 'Scrollbars',
id: "customizing-the-appearence-scrollbars", id: 'customizing-the-appearence-scrollbars',
path: "customizing-the-appearence/scrollbars" path: 'customizing-the-appearence/scrollbars'
}, },
{ {
chapter: "Customizing the appearence", chapter: 'Customizing the appearence',
name: "Tokens and colors", name: 'Tokens and colors',
id: "customizing-the-appearence-tokens-and-colors", id: 'customizing-the-appearence-tokens-and-colors',
path: "customizing-the-appearence/tokens-and-colors" path: 'customizing-the-appearence/tokens-and-colors'
}, },
{ {
chapter: "Creating the DiffEditor", chapter: 'Creating the DiffEditor',
name: "Hello diff world!", name: 'Hello diff world!',
id: "creating-the-diffeditor-hello-diff-world", id: 'creating-the-diffeditor-hello-diff-world',
path: "creating-the-diffeditor/hello-diff-world" path: 'creating-the-diffeditor/hello-diff-world'
}, },
{ {
chapter: "Creating the DiffEditor", chapter: 'Creating the DiffEditor',
name: "Multi-line example", name: 'Multi-line example',
id: "creating-the-diffeditor-multi-line-example", id: 'creating-the-diffeditor-multi-line-example',
path: "creating-the-diffeditor/multi-line-example" path: 'creating-the-diffeditor/multi-line-example'
}, },
{ {
chapter: "Creating the DiffEditor", chapter: 'Creating the DiffEditor',
name: "Inline Diff Example", name: 'Inline Diff Example',
id: "creating-the-diffeditor-inline-diff-example", id: 'creating-the-diffeditor-inline-diff-example',
path: "creating-the-diffeditor/inline-diff-example" path: 'creating-the-diffeditor/inline-diff-example'
}, },
{ {
chapter: "Creating the DiffEditor", chapter: 'Creating the DiffEditor',
name: "Navigating a Diff", name: 'Navigating a Diff',
id: "creating-the-diffeditor-navigating-a-diff", id: 'creating-the-diffeditor-navigating-a-diff',
path: "creating-the-diffeditor/navigating-a-diff" path: 'creating-the-diffeditor/navigating-a-diff'
}, },
{ {
chapter: "Extending Language Services", chapter: 'Extending Language Services',
name: "Custom languages", name: 'Custom languages',
id: "extending-language-services-custom-languages", id: 'extending-language-services-custom-languages',
path: "extending-language-services/custom-languages" path: 'extending-language-services/custom-languages'
}, },
{ {
chapter: "Extending Language Services", chapter: 'Extending Language Services',
name: "Completion provider example", name: 'Completion provider example',
id: "extending-language-services-completion-provider-example", id: 'extending-language-services-completion-provider-example',
path: "extending-language-services/completion-provider-example" path: 'extending-language-services/completion-provider-example'
}, },
{ {
chapter: "Extending Language Services", chapter: 'Extending Language Services',
name: "Codelens provider example", name: 'Codelens provider example',
id: "extending-language-services-codelens-provider-example", id: 'extending-language-services-codelens-provider-example',
path: "extending-language-services/codelens-provider-example" path: 'extending-language-services/codelens-provider-example'
}, },
{ {
chapter: "Extending Language Services", chapter: 'Extending Language Services',
name: "Color provider example", name: 'Color provider example',
id: "extending-language-services-color-provider-example", id: 'extending-language-services-color-provider-example',
path: "extending-language-services/color-provider-example" path: 'extending-language-services/color-provider-example'
}, },
{ {
chapter: "Extending Language Services", chapter: 'Extending Language Services',
name: "Symbols provider example", name: 'Symbols provider example',
id: "extending-language-services-symbols-provider-example", id: 'extending-language-services-symbols-provider-example',
path: "extending-language-services/symbols-provider-example" path: 'extending-language-services/symbols-provider-example'
}, },
{ {
chapter: "Extending Language Services", chapter: 'Extending Language Services',
name: "Folding provider example", name: 'Folding provider example',
id: "extending-language-services-folding-provider-example", id: 'extending-language-services-folding-provider-example',
path: "extending-language-services/folding-provider-example" path: 'extending-language-services/folding-provider-example'
}, },
{ {
chapter: "Extending Language Services", chapter: 'Extending Language Services',
name: "Hover provider example", name: 'Hover provider example',
id: "extending-language-services-hover-provider-example", id: 'extending-language-services-hover-provider-example',
path: "extending-language-services/hover-provider-example" path: 'extending-language-services/hover-provider-example'
}, },
{ {
chapter: "Extending Language Services", chapter: 'Extending Language Services',
name: "Semantic tokens provider example", name: 'Semantic tokens provider example',
id: "extending-language-services-semantic-tokens-provider-example", id: 'extending-language-services-semantic-tokens-provider-example',
path: "extending-language-services/semantic-tokens-provider-example" path: 'extending-language-services/semantic-tokens-provider-example'
}, },
{ {
chapter: "Extending Language Services", chapter: 'Extending Language Services',
name: "Configure JavaScript defaults", name: 'Configure JavaScript defaults',
id: "extending-language-services-configure-javascript-defaults", id: 'extending-language-services-configure-javascript-defaults',
path: "extending-language-services/configure-javascript-defaults" path: 'extending-language-services/configure-javascript-defaults'
}, },
{ {
chapter: "Extending Language Services", chapter: 'Extending Language Services',
name: "Configure JSON defaults", name: 'Configure JSON defaults',
id: "extending-language-services-configure-json-defaults", id: 'extending-language-services-configure-json-defaults',
path: "extending-language-services/configure-json-defaults" path: 'extending-language-services/configure-json-defaults'
} }
]; ];
if (typeof exports !== 'undefined') { if (typeof exports !== 'undefined') {
exports.PLAY_SAMPLES = PLAY_SAMPLES exports.PLAY_SAMPLES = PLAY_SAMPLES;
} else { } else {
self.PLAY_SAMPLES = PLAY_SAMPLES; self.PLAY_SAMPLES = PLAY_SAMPLES;
} }
})(); })();

@ -1 +1 @@
<div id="container" style="height:100%;"></div> <div id="container" style="height: 100%"></div>

@ -1,7 +1,7 @@
var originalModel = monaco.editor.createModel("heLLo world!", "text/plain"); var originalModel = monaco.editor.createModel('heLLo world!', 'text/plain');
var modifiedModel = monaco.editor.createModel("hello orlando!", "text/plain"); var modifiedModel = monaco.editor.createModel('hello orlando!', 'text/plain');
var diffEditor = monaco.editor.createDiffEditor(document.getElementById("container")); var diffEditor = monaco.editor.createDiffEditor(document.getElementById('container'));
diffEditor.setModel({ diffEditor.setModel({
original: originalModel, original: originalModel,
modified: modifiedModel modified: modifiedModel

@ -1 +1 @@
<div id="container" style="height:100%;"></div> <div id="container" style="height: 100%"></div>

@ -1,7 +1,13 @@
var originalModel = monaco.editor.createModel("This line is removed on the right.\njust some text\nabcd\nefgh\nSome more text", "text/plain"); var originalModel = monaco.editor.createModel(
var modifiedModel = monaco.editor.createModel("just some text\nabcz\nzzzzefgh\nSome more text\nThis line is removed on the left.", "text/plain"); 'This line is removed on the right.\njust some text\nabcd\nefgh\nSome more text',
'text/plain'
);
var modifiedModel = monaco.editor.createModel(
'just some text\nabcz\nzzzzefgh\nSome more text\nThis line is removed on the left.',
'text/plain'
);
var diffEditor = monaco.editor.createDiffEditor(document.getElementById("container"), { var diffEditor = monaco.editor.createDiffEditor(document.getElementById('container'), {
// You can optionally disable the resizing // You can optionally disable the resizing
enableSplitViewResizing: false, enableSplitViewResizing: false,

@ -1 +1 @@
<div id="container" style="height:100%;"></div> <div id="container" style="height: 100%"></div>

@ -1,7 +1,13 @@
var originalModel = monaco.editor.createModel("This line is removed on the right.\njust some text\nabcd\nefgh\nSome more text", "text/plain"); var originalModel = monaco.editor.createModel(
var modifiedModel = monaco.editor.createModel("just some text\nabcz\nzzzzefgh\nSome more text.\nThis line is removed on the left.", "text/plain"); 'This line is removed on the right.\njust some text\nabcd\nefgh\nSome more text',
'text/plain'
);
var modifiedModel = monaco.editor.createModel(
'just some text\nabcz\nzzzzefgh\nSome more text.\nThis line is removed on the left.',
'text/plain'
);
var diffEditor = monaco.editor.createDiffEditor(document.getElementById("container"), { var diffEditor = monaco.editor.createDiffEditor(document.getElementById('container'), {
// You can optionally disable the resizing // You can optionally disable the resizing
enableSplitViewResizing: false enableSplitViewResizing: false
}); });

@ -1 +1 @@
<div id="container" style="height:100%;"></div> <div id="container" style="height: 100%"></div>

@ -1,9 +1,14 @@
// The diff editor offers a navigator to jump between changes. Once the diff is computed the <em>next()</em> and <em>previous()</em> method allow navigation. By default setting the selection in the editor manually resets the navigation state. // The diff editor offers a navigator to jump between changes. Once the diff is computed the <em>next()</em> and <em>previous()</em> method allow navigation. By default setting the selection in the editor manually resets the navigation state.
var originalModel = monaco.editor.createModel("just some text\n\nHello World\n\nSome more text", "text/plain"); var originalModel = monaco.editor.createModel(
var modifiedModel = monaco.editor.createModel("just some Text\n\nHello World\n\nSome more changes", "text/plain"); 'just some text\n\nHello World\n\nSome more text',
'text/plain'
);
var modifiedModel = monaco.editor.createModel(
'just some Text\n\nHello World\n\nSome more changes',
'text/plain'
);
var diffEditor = monaco.editor.createDiffEditor(document.getElementById('container'));
var diffEditor = monaco.editor.createDiffEditor(document.getElementById("container"));
diffEditor.setModel({ diffEditor.setModel({
original: originalModel, original: originalModel,
modified: modifiedModel modified: modifiedModel
@ -14,6 +19,6 @@ var navi = monaco.editor.createDiffNavigator(diffEditor, {
ignoreCharChanges: true // jump from line to line ignoreCharChanges: true // jump from line to line
}); });
window.setInterval(function() { window.setInterval(function () {
navi.next(); navi.next();
}, 2000); }, 2000);

@ -1 +1 @@
<div id="container" style="height:100%;"></div> <div id="container" style="height: 100%"></div>

@ -2,18 +2,18 @@
// Here are a few examples of config options that can be passed to the editor. // Here are a few examples of config options that can be passed to the editor.
// You can also call editor.updateOptions at any time to change the options. // You can also call editor.updateOptions at any time to change the options.
var editor = monaco.editor.create(document.getElementById("container"), { var editor = monaco.editor.create(document.getElementById('container'), {
value: "// First line\nfunction hello() {\n\talert('Hello world!');\n}\n// Last line", value: "// First line\nfunction hello() {\n\talert('Hello world!');\n}\n// Last line",
language: "javascript", language: 'javascript',
lineNumbers: "off", lineNumbers: 'off',
roundedSelection: false, roundedSelection: false,
scrollBeyondLastLine: false, scrollBeyondLastLine: false,
readOnly: false, readOnly: false,
theme: "vs-dark", theme: 'vs-dark'
}); });
setTimeout(function() { setTimeout(function () {
editor.updateOptions({ editor.updateOptions({
lineNumbers: "on" lineNumbers: 'on'
}); });
}, 2000); }, 2000);

@ -1 +1 @@
<div id="container" style="height:100%;"></div> <div id="container" style="height: 100%"></div>

@ -1 +1 @@
<div id="container" style="height:100%;"></div> <div id="container" style="height: 100%"></div>

@ -3,7 +3,7 @@
// Two members of the literal are "value" and "language". // Two members of the literal are "value" and "language".
// The editor takes the full size of its container. // The editor takes the full size of its container.
monaco.editor.create(document.getElementById("container"), { monaco.editor.create(document.getElementById('container'), {
value: "function hello() {\n\talert('Hello world!');\n}", value: "function hello() {\n\talert('Hello world!');\n}",
language: "javascript" language: 'javascript'
}); });

@ -1,4 +1,4 @@
<pre id="code" data-lang="text/css" style="width:500px;"> <pre id="code" data-lang="text/css" style="width: 500px">
/* Some example CSS */ /* Some example CSS */
@import url("something.css"); @import url("something.css");

Some files were not shown because too many files have changed in this diff Show More

Loading…
Cancel
Save