run `prettier`
Alex Dima
3 years ago
parent
b4178b1190
commit
84bdc31efe
@ -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
@ -1,184 +1,187 @@
|
||||
# Contributing & Maintaining
|
||||
|
||||
## A brief explanation on the source code structure
|
||||
|
||||
This repository contains no source code, it only contains the scripts to package everything together and ship the `monaco-editor` npm module:
|
||||
|
||||
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 |
|
||||
|------------|------------|-------------|
|
||||
| [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-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-css](https://github.com/Microsoft/monaco-css) | [monaco-css](https://www.npmjs.com/package/monaco-css) | plugin that adds rich language support for CSS, LESS and SCSS. |
|
||||
| [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. |
|
||||
|
||||
|
||||
## Running the editor from source
|
||||
|
||||
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)
|
||||
|
||||
### OS X and Linux
|
||||
|
||||
```bash
|
||||
# clone vscode-loc repository for localized string resources
|
||||
/src> git clone https://github.com/microsoft/vscode-loc
|
||||
# clone VS Code repository
|
||||
/src> git clone https://github.com/microsoft/vscode
|
||||
/src> cd vscode
|
||||
# install npm deps for vscode
|
||||
/src/vscode> yarn
|
||||
# start the compiler in the background
|
||||
/src/vscode> yarn run watch
|
||||
```
|
||||
|
||||
### Windows
|
||||
|
||||
```cmd
|
||||
# clone vscode-loc repository for localized string resources
|
||||
/src> git clone https://github.com/microsoft/vscode-loc
|
||||
# clone VS Code repository
|
||||
/src> git clone https://github.com/microsoft/vscode
|
||||
/src> cd vscode
|
||||
# install npm deps for vscode
|
||||
/src/vscode> yarn
|
||||
# start the compiler in the background
|
||||
/src/vscode> yarn run watch
|
||||
```
|
||||
|
||||
* For the monaco editor test pages:
|
||||
|
||||
```bash
|
||||
# clone monaco-editor (note the folders must be siblings!)
|
||||
/src> git clone https://github.com/Microsoft/monaco-editor
|
||||
|
||||
# install npm deps for monaco-editor
|
||||
/src/monaco-editor> npm install .
|
||||
|
||||
# start a local http server in the background
|
||||
/src/monaco-editor> npm run simpleserver
|
||||
```
|
||||
|
||||
Open [http://localhost:8080/monaco-editor/test/?editor=src](http://localhost:8080/monaco-editor/test/?editor=src) to run.
|
||||
|
||||
## Running a plugin from source (e.g. monaco-typescript)
|
||||
|
||||
```bash
|
||||
# clone monaco-typescript
|
||||
/src> git clone https://github.com/Microsoft/monaco-typescript
|
||||
|
||||
# install npm deps for monaco-typescript
|
||||
/src/monaco-typescript> npm install .
|
||||
|
||||
# start the compiler in the background
|
||||
/src/monaco-typescript> npm run watch
|
||||
```
|
||||
|
||||
Open [http://localhost:8080/monaco-editor/test/?editor=src&monaco-typescript=src](http://localhost:8080/monaco-editor/test/?editor=src&monaco-typescript=src) to run.
|
||||
|
||||
## Running the editor tests
|
||||
|
||||
```bash
|
||||
/src/vscode> npm run monaco-editor-test
|
||||
# or run a test page http://localhost:8080/monaco-editor/test/?editor=src
|
||||
```
|
||||
|
||||
> 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:
|
||||
|
||||
|
||||
## Running the website locally
|
||||
|
||||
> Note: The website is published automatically when pushing to the `master` branch.
|
||||
|
||||
```bash
|
||||
# create a local release
|
||||
/src/monaco-editor> npm run release
|
||||
|
||||
# build the website
|
||||
/src/monaco-editor> npm run build-website
|
||||
|
||||
# start local webserver
|
||||
/src/monaco-editor> npm run simpleserver
|
||||
|
||||
# open http://localhost:8080/monaco-editor-website/
|
||||
|
||||
```
|
||||
|
||||
## Shipping a new monaco-editor npm module
|
||||
|
||||
#### 0.
|
||||
* 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
|
||||
* bump version in `/src/vscode/build/monaco/package.json`
|
||||
* **[important]** push all local changes to the remote to get a good public commit id.
|
||||
* 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
|
||||
* 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)
|
||||
* [repo - monaco-languages](https://github.com/Microsoft/monaco-languages)
|
||||
* [repo - monaco-css](https://github.com/Microsoft/monaco-css)
|
||||
* [repo - monaco-json](https://github.com/Microsoft/monaco-json)
|
||||
* [repo - monaco-html](https://github.com/Microsoft/monaco-html)
|
||||
* publish new versions of those plugins to npm as necessary.
|
||||
|
||||
#### 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)
|
||||
* [npm - monaco-typescript](https://www.npmjs.com/package/monaco-typescript)
|
||||
* [npm - monaco-languages](https://www.npmjs.com/package/monaco-languages)
|
||||
* [npm - monaco-css](https://www.npmjs.com/package/monaco-css)
|
||||
* [npm - monaco-json](https://www.npmjs.com/package/monaco-json)
|
||||
* [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
|
||||
|
||||
* `/src/monaco-editor> npm run release`
|
||||
* 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=releaseMin`
|
||||
* open `http://localhost:8080/monaco-editor/test/smoketest.html?editor=releaseDev`
|
||||
* open `http://localhost:8080/monaco-editor/test/smoketest.html?editor=releaseMin`
|
||||
|
||||
#### 5. Update release note.
|
||||
* API Change/Breaking Change/New and noteworthy
|
||||
* Thank you ([use this tool](https://vscode-tools.azurewebsites.net/))
|
||||
|
||||
#### 6. Publish
|
||||
|
||||
* `/src/monaco-editor> npm version minor`
|
||||
* `/src/monaco-editor> npm run release`
|
||||
* `/src/monaco-editor/release> npm publish`
|
||||
* `/src/monaco-editor> git push --tags`
|
||||
|
||||
#### 7. Update Website
|
||||
|
||||
* `/src/monaco-editor> npm run website`
|
||||
|
||||
|
||||
#### 8. Publish new webpack plugin
|
||||
|
||||
* https://github.com/microsoft/monaco-editor-webpack-plugin
|
||||
* update to latest `monaco-editor`
|
||||
* `npm install .`
|
||||
* `npm run import-editor`
|
||||
* 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 version matrix in the README.md and add the new editor version to the plugin's current major version
|
||||
* use `npm version minor`
|
||||
* publish using `npm publish`
|
||||
* 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 version matrix in the README.md and add a new row with the new major version
|
||||
* use `npm version major`
|
||||
* publish using `npm publish`
|
||||
* remember to push tags upstream
|
||||
# Contributing & Maintaining
|
||||
|
||||
## A brief explanation on the source code structure
|
||||
|
||||
This repository contains no source code, it only contains the scripts to package everything together and ship the `monaco-editor` npm module:
|
||||
|
||||
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 |
|
||||
| ------------------------------------------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------- |
|
||||
| [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-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-css](https://github.com/Microsoft/monaco-css) | [monaco-css](https://www.npmjs.com/package/monaco-css) | plugin that adds rich language support for CSS, LESS and SCSS. |
|
||||
| [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. |
|
||||
|
||||
## Running the editor from source
|
||||
|
||||
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)
|
||||
|
||||
### OS X and Linux
|
||||
|
||||
```bash
|
||||
# clone vscode-loc repository for localized string resources
|
||||
/src> git clone https://github.com/microsoft/vscode-loc
|
||||
# clone VS Code repository
|
||||
/src> git clone https://github.com/microsoft/vscode
|
||||
/src> cd vscode
|
||||
# install npm deps for vscode
|
||||
/src/vscode> yarn
|
||||
# start the compiler in the background
|
||||
/src/vscode> yarn run watch
|
||||
```
|
||||
|
||||
### Windows
|
||||
|
||||
```cmd
|
||||
# clone vscode-loc repository for localized string resources
|
||||
/src> git clone https://github.com/microsoft/vscode-loc
|
||||
# clone VS Code repository
|
||||
/src> git clone https://github.com/microsoft/vscode
|
||||
/src> cd vscode
|
||||
# install npm deps for vscode
|
||||
/src/vscode> yarn
|
||||
# start the compiler in the background
|
||||
/src/vscode> yarn run watch
|
||||
```
|
||||
|
||||
- For the monaco editor test pages:
|
||||
|
||||
```bash
|
||||
# clone monaco-editor (note the folders must be siblings!)
|
||||
/src> git clone https://github.com/Microsoft/monaco-editor
|
||||
|
||||
# install npm deps for monaco-editor
|
||||
/src/monaco-editor> npm install .
|
||||
|
||||
# start a local http server in the background
|
||||
/src/monaco-editor> npm run simpleserver
|
||||
```
|
||||
|
||||
Open [http://localhost:8080/monaco-editor/test/?editor=src](http://localhost:8080/monaco-editor/test/?editor=src) to run.
|
||||
|
||||
## Running a plugin from source (e.g. monaco-typescript)
|
||||
|
||||
```bash
|
||||
# clone monaco-typescript
|
||||
/src> git clone https://github.com/Microsoft/monaco-typescript
|
||||
|
||||
# install npm deps for monaco-typescript
|
||||
/src/monaco-typescript> npm install .
|
||||
|
||||
# start the compiler in the background
|
||||
/src/monaco-typescript> npm run watch
|
||||
```
|
||||
|
||||
Open [http://localhost:8080/monaco-editor/test/?editor=src&monaco-typescript=src](http://localhost:8080/monaco-editor/test/?editor=src&monaco-typescript=src) to run.
|
||||
|
||||
## Running the editor tests
|
||||
|
||||
```bash
|
||||
/src/vscode> npm run monaco-editor-test
|
||||
# or run a test page http://localhost:8080/monaco-editor/test/?editor=src
|
||||
```
|
||||
|
||||
> 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:
|
||||
> 
|
||||
|
||||
## Running the website locally
|
||||
|
||||
> Note: The website is published automatically when pushing to the `master` branch.
|
||||
|
||||
```bash
|
||||
# create a local release
|
||||
/src/monaco-editor> npm run release
|
||||
|
||||
# build the website
|
||||
/src/monaco-editor> npm run build-website
|
||||
|
||||
# start local webserver
|
||||
/src/monaco-editor> npm run simpleserver
|
||||
|
||||
# open http://localhost:8080/monaco-editor-website/
|
||||
|
||||
```
|
||||
|
||||
## Shipping a new monaco-editor npm module
|
||||
|
||||
#### 0.
|
||||
|
||||
- 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
|
||||
|
||||
- bump version in `/src/vscode/build/monaco/package.json`
|
||||
- **[important]** push all local changes to the remote to get a good public commit id.
|
||||
- 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
|
||||
|
||||
- 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)
|
||||
- [repo - monaco-languages](https://github.com/Microsoft/monaco-languages)
|
||||
- [repo - monaco-css](https://github.com/Microsoft/monaco-css)
|
||||
- [repo - monaco-json](https://github.com/Microsoft/monaco-json)
|
||||
- [repo - monaco-html](https://github.com/Microsoft/monaco-html)
|
||||
- publish new versions of those plugins to npm as necessary.
|
||||
|
||||
#### 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)
|
||||
- [npm - monaco-typescript](https://www.npmjs.com/package/monaco-typescript)
|
||||
- [npm - monaco-languages](https://www.npmjs.com/package/monaco-languages)
|
||||
- [npm - monaco-css](https://www.npmjs.com/package/monaco-css)
|
||||
- [npm - monaco-json](https://www.npmjs.com/package/monaco-json)
|
||||
- [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
|
||||
|
||||
- `/src/monaco-editor> npm run release`
|
||||
- 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=releaseMin`
|
||||
- open `http://localhost:8080/monaco-editor/test/smoketest.html?editor=releaseDev`
|
||||
- open `http://localhost:8080/monaco-editor/test/smoketest.html?editor=releaseMin`
|
||||
|
||||
#### 5. Update release note.
|
||||
|
||||
- API Change/Breaking Change/New and noteworthy
|
||||
- Thank you ([use this tool](https://vscode-tools.azurewebsites.net/))
|
||||
|
||||
#### 6. Publish
|
||||
|
||||
- `/src/monaco-editor> npm version minor`
|
||||
- `/src/monaco-editor> npm run release`
|
||||
- `/src/monaco-editor/release> npm publish`
|
||||
- `/src/monaco-editor> git push --tags`
|
||||
|
||||
#### 7. Update Website
|
||||
|
||||
- `/src/monaco-editor> npm run website`
|
||||
|
||||
#### 8. Publish new webpack plugin
|
||||
|
||||
- https://github.com/microsoft/monaco-editor-webpack-plugin
|
||||
- update to latest `monaco-editor`
|
||||
- `npm install .`
|
||||
- `npm run import-editor`
|
||||
- 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 version matrix in the README.md and add the new editor version to the plugin's current major version
|
||||
- use `npm version minor`
|
||||
- publish using `npm publish`
|
||||
- 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 version matrix in the README.md and add a new row with the new major version
|
||||
- use `npm version major`
|
||||
- publish using `npm publish`
|
||||
- remember to push tags upstream
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2016 - present 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.
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2016 - present 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,96 +1,97 @@
|
||||
# Monaco Editor
|
||||
|
||||
[](https://dev.azure.com/ms/monaco-editor/_build/latest?definitionId=3)
|
||||
|
||||
The Monaco Editor is the code editor which powers [VS Code](https://github.com/Microsoft/vscode), with the features better described [here](https://code.visualstudio.com/docs/editor/editingevolved).
|
||||
|
||||
Please note that this repository contains no source code for the code editor, it only contains the scripts to package everything together and ship the `monaco-editor` npm module.
|
||||
|
||||
|
||||
|
||||
## Try it out
|
||||
|
||||
Try the editor out [on our website](https://microsoft.github.io/monaco-editor/index.html).
|
||||
|
||||
## Installing
|
||||
|
||||
```
|
||||
$ npm install monaco-editor
|
||||
```
|
||||
|
||||
You will get:
|
||||
* inside `esm`: ESM version of the editor (compatible with e.g. webpack)
|
||||
* inside `dev`: AMD bundled, not minified
|
||||
* inside `min`: AMD bundled, and minified
|
||||
* inside `min-maps`: source maps for `min`
|
||||
* `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.
|
||||
|
||||
## Documentation
|
||||
|
||||
* 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 cross-domain](./monaco-editor/docs/integrate-amd-cross.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).
|
||||
* 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!
|
||||
* 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!
|
||||
|
||||
## Issues
|
||||
|
||||
Create [issues](https://github.com/Microsoft/monaco-editor/issues) in this repository for anything related to the Monaco Editor. Always mention **the version** of the editor when creating issues and **the browser** you're having trouble in. Please search for existing issues to avoid duplicates.
|
||||
|
||||
## FAQ
|
||||
|
||||
❓ **What is the relationship between VS Code and the Monaco Editor?**
|
||||
|
||||
The Monaco Editor is generated straight from VS Code's sources with some shims around services the code needs to make it run in a web browser outside of its home.
|
||||
|
||||
❓ **What is the relationship between VS Code's version and the Monaco Editor's version?**
|
||||
|
||||
None. The Monaco Editor is a library and it reflects directly the source code.
|
||||
|
||||
❓ **I've written an extension for VS Code, will it work on the Monaco Editor in a browser?**
|
||||
|
||||
No.
|
||||
|
||||
> Note: If the extension is fully based on the [LSP](https://microsoft.github.io/language-server-protocol/) and if the language server is authored in JavaScript, then it would be possible.
|
||||
|
||||
❓ **Why all these web workers and why should I care?**
|
||||
|
||||
Language services create web workers to compute heavy stuff outside of the UI thread. They cost hardly anything in terms of resource overhead and you shouldn't worry too much about them, as long as you get them to work (see above the cross-domain case).
|
||||
|
||||
❓ **What is this `loader.js`? Can I use `require.js`?**
|
||||
|
||||
It is an AMD loader that we use in VS Code. Yes.
|
||||
|
||||
❓ **I see the warning "Could not create web worker". What should I do?**
|
||||
|
||||
HTML5 does not allow pages loaded on `file://` to create web workers. Please load the editor with a web server on `http://` or `https://` schemes. Please also see the cross-domain case above.
|
||||
|
||||
❓ **Is the editor supported in mobile browsers or mobile web app frameworks?**
|
||||
|
||||
No.
|
||||
|
||||
❓ **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.
|
||||
|
||||
❓ **What about IE 11 support?**
|
||||
|
||||
* The Monaco Editor no longer supports IE 11. The last version that was tested on IE 11 is `0.18.1`.
|
||||
|
||||
## Development setup
|
||||
|
||||
Please see [CONTRIBUTING](./CONTRIBUTING.md)
|
||||
|
||||
## Code of Conduct
|
||||
|
||||
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
|
||||
Licensed under the [MIT](https://github.com/Microsoft/monaco-editor/blob/master/LICENSE.md) License.
|
||||
# Monaco Editor
|
||||
|
||||
[](https://dev.azure.com/ms/monaco-editor/_build/latest?definitionId=3)
|
||||
|
||||
The Monaco Editor is the code editor which powers [VS Code](https://github.com/Microsoft/vscode), with the features better described [here](https://code.visualstudio.com/docs/editor/editingevolved).
|
||||
|
||||
Please note that this repository contains no source code for the code editor, it only contains the scripts to package everything together and ship the `monaco-editor` npm module.
|
||||
|
||||
|
||||
|
||||
## Try it out
|
||||
|
||||
Try the editor out [on our website](https://microsoft.github.io/monaco-editor/index.html).
|
||||
|
||||
## Installing
|
||||
|
||||
```
|
||||
$ npm install monaco-editor
|
||||
```
|
||||
|
||||
You will get:
|
||||
|
||||
- inside `esm`: ESM version of the editor (compatible with e.g. webpack)
|
||||
- inside `dev`: AMD bundled, not minified
|
||||
- inside `min`: AMD bundled, and minified
|
||||
- inside `min-maps`: source maps for `min`
|
||||
- `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.
|
||||
|
||||
## Documentation
|
||||
|
||||
- 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 cross-domain](./monaco-editor/docs/integrate-amd-cross.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).
|
||||
- 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!
|
||||
- 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!
|
||||
|
||||
## Issues
|
||||
|
||||
Create [issues](https://github.com/Microsoft/monaco-editor/issues) in this repository for anything related to the Monaco Editor. Always mention **the version** of the editor when creating issues and **the browser** you're having trouble in. Please search for existing issues to avoid duplicates.
|
||||
|
||||
## FAQ
|
||||
|
||||
❓ **What is the relationship between VS Code and the Monaco Editor?**
|
||||
|
||||
The Monaco Editor is generated straight from VS Code's sources with some shims around services the code needs to make it run in a web browser outside of its home.
|
||||
|
||||
❓ **What is the relationship between VS Code's version and the Monaco Editor's version?**
|
||||
|
||||
None. The Monaco Editor is a library and it reflects directly the source code.
|
||||
|
||||
❓ **I've written an extension for VS Code, will it work on the Monaco Editor in a browser?**
|
||||
|
||||
No.
|
||||
|
||||
> Note: If the extension is fully based on the [LSP](https://microsoft.github.io/language-server-protocol/) and if the language server is authored in JavaScript, then it would be possible.
|
||||
|
||||
❓ **Why all these web workers and why should I care?**
|
||||
|
||||
Language services create web workers to compute heavy stuff outside of the UI thread. They cost hardly anything in terms of resource overhead and you shouldn't worry too much about them, as long as you get them to work (see above the cross-domain case).
|
||||
|
||||
❓ **What is this `loader.js`? Can I use `require.js`?**
|
||||
|
||||
It is an AMD loader that we use in VS Code. Yes.
|
||||
|
||||
❓ **I see the warning "Could not create web worker". What should I do?**
|
||||
|
||||
HTML5 does not allow pages loaded on `file://` to create web workers. Please load the editor with a web server on `http://` or `https://` schemes. Please also see the cross-domain case above.
|
||||
|
||||
❓ **Is the editor supported in mobile browsers or mobile web app frameworks?**
|
||||
|
||||
No.
|
||||
|
||||
❓ **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.
|
||||
|
||||
❓ **What about IE 11 support?**
|
||||
|
||||
- The Monaco Editor no longer supports IE 11. The last version that was tested on IE 11 is `0.18.1`.
|
||||
|
||||
## Development setup
|
||||
|
||||
Please see [CONTRIBUTING](./CONTRIBUTING.md)
|
||||
|
||||
## Code of Conduct
|
||||
|
||||
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
|
||||
|
||||
Licensed under the [MIT](https://github.com/Microsoft/monaco-editor/blob/master/LICENSE.md) License.
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
/out/
|
||||
/release/
|
||||
@ -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,62 +1,63 @@
|
||||
{
|
||||
perform: true,
|
||||
commands: [
|
||||
{
|
||||
type: 'comment',
|
||||
name: 'question',
|
||||
allowUsers: [],
|
||||
action: 'updateLabels',
|
||||
addLabel: '*question'
|
||||
},
|
||||
{
|
||||
type: 'label',
|
||||
name: '*question',
|
||||
allowTriggerByBot: true,
|
||||
action: 'close',
|
||||
comment: "Please ask your question on [StackOverflow](https://stackoverflow.com/questions/tagged/monaco-editor). We have a great community over [there](https://stackoverflow.com/questions/tagged/monaco-editor). They have already answered hundreds of questions and are happy to answer yours as well. You can also try [searching through existing issues](https://github.com/microsoft/monaco-editor/issues?utf8=%E2%9C%93&q=is%3Aissue+), looking at [API usage samples](https://microsoft.github.io/monaco-editor/playground.html) or at [integration samples](https://github.com/Microsoft/monaco-editor-samples). See also our [issue reporting](https://aka.ms/vscodeissuereporting) guidelines.\n\nHappy Coding!"
|
||||
},
|
||||
{
|
||||
type: 'label',
|
||||
name: '*out-of-scope',
|
||||
allowTriggerByBot: true,
|
||||
action: 'close',
|
||||
comment: "We closed this issue because we don't plan to address it in the foreseeable future. You can find more detailed information about our decision-making process [here](https://aka.ms/vscode-out-of-scope). If you disagree and feel that this issue is crucial: We are happy to listen and to reconsider.\n\nIf you wonder what we are up to, please see our [roadmap](https://aka.ms/vscoderoadmap) and [issue reporting](https://aka.ms/vscodeissuereporting) guidelines.\n\nThanks for your understanding and happy coding!"
|
||||
},
|
||||
{
|
||||
type: 'label',
|
||||
name: '*as-designed',
|
||||
allowTriggerByBot: true,
|
||||
action: 'close',
|
||||
comment: "The described behavior is how it is expected to work. If you disagree, please explain what is expected and what is not in more detail. See also our [issue reporting](https://aka.ms/vscodeissuereporting) guidelines.\n\nHappy Coding!"
|
||||
},
|
||||
{
|
||||
type: 'label',
|
||||
name: '*english-please',
|
||||
allowTriggerByBot: true,
|
||||
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."
|
||||
},
|
||||
{
|
||||
type: 'comment',
|
||||
name: 'duplicate',
|
||||
allowUsers: [],
|
||||
action: 'updateLabels',
|
||||
addLabel: '*duplicate'
|
||||
},
|
||||
{
|
||||
type: 'label',
|
||||
name: '*duplicate',
|
||||
allowTriggerByBot: true,
|
||||
action: 'close',
|
||||
comment: "Thanks for creating this issue! We figured it's covering the same as another one we already have. Thus, we closed this one as a duplicate. You can search for existing issues [here](https://github.com/Microsoft/monaco-editor/issues). See also our [issue reporting](https://aka.ms/vscodeissuereporting) guidelines.\n\nHappy Coding!"
|
||||
},
|
||||
{
|
||||
type: 'comment',
|
||||
name: 'needsMoreInfo',
|
||||
allowUsers: [],
|
||||
action: 'updateLabels',
|
||||
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!"
|
||||
},
|
||||
]
|
||||
}
|
||||
{
|
||||
perform: true,
|
||||
commands:
|
||||
[
|
||||
{
|
||||
type: 'comment',
|
||||
name: 'question',
|
||||
allowUsers: [],
|
||||
action: 'updateLabels',
|
||||
addLabel: '*question'
|
||||
},
|
||||
{
|
||||
type: 'label',
|
||||
name: '*question',
|
||||
allowTriggerByBot: true,
|
||||
action: 'close',
|
||||
comment: "Please ask your question on [StackOverflow](https://stackoverflow.com/questions/tagged/monaco-editor). We have a great community over [there](https://stackoverflow.com/questions/tagged/monaco-editor). They have already answered hundreds of questions and are happy to answer yours as well. You can also try [searching through existing issues](https://github.com/microsoft/monaco-editor/issues?utf8=%E2%9C%93&q=is%3Aissue+), looking at [API usage samples](https://microsoft.github.io/monaco-editor/playground.html) or at [integration samples](https://github.com/Microsoft/monaco-editor-samples). See also our [issue reporting](https://aka.ms/vscodeissuereporting) guidelines.\n\nHappy Coding!"
|
||||
},
|
||||
{
|
||||
type: 'label',
|
||||
name: '*out-of-scope',
|
||||
allowTriggerByBot: true,
|
||||
action: 'close',
|
||||
comment: "We closed this issue because we don't plan to address it in the foreseeable future. You can find more detailed information about our decision-making process [here](https://aka.ms/vscode-out-of-scope). If you disagree and feel that this issue is crucial: We are happy to listen and to reconsider.\n\nIf you wonder what we are up to, please see our [roadmap](https://aka.ms/vscoderoadmap) and [issue reporting](https://aka.ms/vscodeissuereporting) guidelines.\n\nThanks for your understanding and happy coding!"
|
||||
},
|
||||
{
|
||||
type: 'label',
|
||||
name: '*as-designed',
|
||||
allowTriggerByBot: true,
|
||||
action: 'close',
|
||||
comment: "The described behavior is how it is expected to work. If you disagree, please explain what is expected and what is not in more detail. See also our [issue reporting](https://aka.ms/vscodeissuereporting) guidelines.\n\nHappy Coding!"
|
||||
},
|
||||
{
|
||||
type: 'label',
|
||||
name: '*english-please',
|
||||
allowTriggerByBot: true,
|
||||
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.'
|
||||
},
|
||||
{
|
||||
type: 'comment',
|
||||
name: 'duplicate',
|
||||
allowUsers: [],
|
||||
action: 'updateLabels',
|
||||
addLabel: '*duplicate'
|
||||
},
|
||||
{
|
||||
type: 'label',
|
||||
name: '*duplicate',
|
||||
allowTriggerByBot: true,
|
||||
action: 'close',
|
||||
comment: "Thanks for creating this issue! We figured it's covering the same as another one we already have. Thus, we closed this one as a duplicate. You can search for existing issues [here](https://github.com/Microsoft/monaco-editor/issues). See also our [issue reporting](https://aka.ms/vscodeissuereporting) guidelines.\n\nHappy Coding!"
|
||||
},
|
||||
{
|
||||
type: 'comment',
|
||||
name: 'needsMoreInfo',
|
||||
allowUsers: [],
|
||||
action: 'updateLabels',
|
||||
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!"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,6 +1 @@
|
||||
{
|
||||
daysAfterClose: 45,
|
||||
daysSinceLastUpdate: 3,
|
||||
ignoredLabels: ['*out-of-scope'],
|
||||
perform: true
|
||||
}
|
||||
{ daysAfterClose: 45, daysSinceLastUpdate: 3, ignoredLabels: ['*out-of-scope'], perform: true }
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
daysUntilClose: 7,
|
||||
needsMoreInfoLabel: 'needs more info',
|
||||
perform: true,
|
||||
closeComment: "This issue has been closed automatically because it needs more information and has not had recent activity. See also our [issue reporting](https://aka.ms/vscodeissuereporting) guidelines.\n\nHappy Coding!"
|
||||
}
|
||||
{
|
||||
daysUntilClose: 7,
|
||||
needsMoreInfoLabel: 'needs more info',
|
||||
perform: true,
|
||||
closeComment: "This issue has been closed automatically because it needs more information and has not had recent activity. See also our [issue reporting](https://aka.ms/vscodeissuereporting) guidelines.\n\nHappy Coding!"
|
||||
}
|
||||
|
||||
@ -1,19 +1,16 @@
|
||||
{
|
||||
// Use IntelliSense to learn about possible attributes.
|
||||
// Hover to view descriptions of existing attributes.
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"cwd": "${workspaceFolder}/test/",
|
||||
"name": "Launch Program",
|
||||
"program": "${workspaceFolder}/node_modules/.bin/webpack",
|
||||
"args": [
|
||||
"--config",
|
||||
"webpack.config.js"
|
||||
],
|
||||
}
|
||||
]
|
||||
}
|
||||
// Use IntelliSense to learn about possible attributes.
|
||||
// Hover to view descriptions of existing attributes.
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"cwd": "${workspaceFolder}/test/",
|
||||
"name": "Launch Program",
|
||||
"program": "${workspaceFolder}/node_modules/.bin/webpack",
|
||||
"args": ["--config", "webpack.config.js"]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"files.trimTrailingWhitespace": true,
|
||||
"files.insertFinalNewline": true,
|
||||
"editor.tabSize": 2,
|
||||
"editor.insertSpaces": true
|
||||
}
|
||||
{
|
||||
"files.trimTrailingWhitespace": true,
|
||||
"files.insertFinalNewline": true,
|
||||
"editor.tabSize": 2,
|
||||
"editor.insertSpaces": true
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,47 +1,47 @@
|
||||
{
|
||||
"name": "monaco-editor-webpack-plugin",
|
||||
"version": "6.0.0",
|
||||
"description": "A webpack plugin for the Monaco Editor",
|
||||
"main": "out/index.js",
|
||||
"typings": "./out/index.d.ts",
|
||||
"scripts": {
|
||||
"test": "node ./node_modules/webpack/bin/webpack.js --config test/webpack.config.js --progress",
|
||||
"test-cross-origin": "node ./node_modules/webpack/bin/webpack.js --config test/webpack-cross-origin.config.js --progress",
|
||||
"watch": "tsc -w -p tsconfig.json",
|
||||
"import-editor": "node ./scripts/import-editor.js",
|
||||
"prepublishOnly": "tsc -p tsconfig.json"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/microsoft/monaco-editor-webpack-plugin.git"
|
||||
},
|
||||
"keywords": [
|
||||
"webpack",
|
||||
"monaco",
|
||||
"editor",
|
||||
"loader"
|
||||
],
|
||||
"author": "Microsoft Corporation",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/microsoft/monaco-editor-webpack-plugin/issues"
|
||||
},
|
||||
"homepage": "https://github.com/microsoft/monaco-editor-webpack-plugin#readme",
|
||||
"peerDependencies": {
|
||||
"webpack": "^4.5.0 || 5.x",
|
||||
"monaco-editor": "0.30.x"
|
||||
},
|
||||
"devDependencies": {
|
||||
"css-loader": "^5.1.1",
|
||||
"file-loader": "^6.2.0",
|
||||
"glob": "^7.1.6",
|
||||
"monaco-editor": "^0.30.0",
|
||||
"style-loader": "^2.0.0",
|
||||
"typescript": "^4.2.3",
|
||||
"webpack": "^5.24.3",
|
||||
"webpack-cli": "^4.5.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"loader-utils": "^2.0.0"
|
||||
}
|
||||
}
|
||||
{
|
||||
"name": "monaco-editor-webpack-plugin",
|
||||
"version": "6.0.0",
|
||||
"description": "A webpack plugin for the Monaco Editor",
|
||||
"main": "out/index.js",
|
||||
"typings": "./out/index.d.ts",
|
||||
"scripts": {
|
||||
"test": "node ./node_modules/webpack/bin/webpack.js --config test/webpack.config.js --progress",
|
||||
"test-cross-origin": "node ./node_modules/webpack/bin/webpack.js --config test/webpack-cross-origin.config.js --progress",
|
||||
"watch": "tsc -w -p tsconfig.json",
|
||||
"import-editor": "node ./scripts/import-editor.js",
|
||||
"prepublishOnly": "tsc -p tsconfig.json"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/microsoft/monaco-editor-webpack-plugin.git"
|
||||
},
|
||||
"keywords": [
|
||||
"webpack",
|
||||
"monaco",
|
||||
"editor",
|
||||
"loader"
|
||||
],
|
||||
"author": "Microsoft Corporation",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/microsoft/monaco-editor-webpack-plugin/issues"
|
||||
},
|
||||
"homepage": "https://github.com/microsoft/monaco-editor-webpack-plugin#readme",
|
||||
"peerDependencies": {
|
||||
"webpack": "^4.5.0 || 5.x",
|
||||
"monaco-editor": "0.30.x"
|
||||
},
|
||||
"devDependencies": {
|
||||
"css-loader": "^5.1.1",
|
||||
"file-loader": "^6.2.0",
|
||||
"glob": "^7.1.6",
|
||||
"monaco-editor": "^0.30.0",
|
||||
"style-loader": "^2.0.0",
|
||||
"typescript": "^4.2.3",
|
||||
"webpack": "^5.24.3",
|
||||
"webpack-cli": "^4.5.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"loader-utils": "^2.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,271 +1,291 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See LICENSE in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
const glob = require('glob');
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
|
||||
const customFeatureLabels = {
|
||||
'vs/editor/browser/controller/coreCommands': 'coreCommands',
|
||||
'vs/editor/contrib/caretOperations/caretOperations': 'caretOperations',
|
||||
'vs/editor/contrib/caretOperations/transpose': 'transpose',
|
||||
'vs/editor/contrib/colorPicker/colorDetector': 'colorDetector',
|
||||
'vs/editor/contrib/rename/onTypeRename': 'onTypeRename',
|
||||
'vs/editor/contrib/gotoSymbol/link/goToDefinitionAtPosition': 'gotoSymbol',
|
||||
'vs/editor/contrib/snippet/snippetController2': 'snippets',
|
||||
'vs/editor/standalone/browser/quickAccess/standaloneGotoLineQuickAccess': 'gotoLine',
|
||||
'vs/editor/standalone/browser/quickAccess/standaloneCommandsQuickAccess': 'quickCommand',
|
||||
'vs/editor/standalone/browser/quickAccess/standaloneGotoSymbolQuickAccess': 'quickOutline',
|
||||
'vs/editor/standalone/browser/quickAccess/standaloneHelpQuickAccess': 'quickHelp',
|
||||
};
|
||||
|
||||
generateLanguages();
|
||||
generateFeatures();
|
||||
|
||||
/**
|
||||
* @returns { Promise<{ label: string; entry: string; }[]> }
|
||||
*/
|
||||
function getBasicLanguages() {
|
||||
return new Promise((resolve, reject) => {
|
||||
glob('./node_modules/monaco-editor/esm/vs/basic-languages/*/*.contribution.js', { cwd: path.dirname(__dirname) }, (err, files) => {
|
||||
if (err) {
|
||||
reject(err);
|
||||
return;
|
||||
}
|
||||
|
||||
resolve(files.map((file) => {
|
||||
const entry = file.substring('./node_modules/monaco-editor/esm/'.length).replace(/\.js$/, '');
|
||||
const label = path.basename(file).replace(/\.contribution\.js$/, '');
|
||||
return {
|
||||
label: label,
|
||||
entry: entry
|
||||
};
|
||||
}));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns { Promise<string[]> }
|
||||
*/
|
||||
function readAdvancedLanguages() {
|
||||
return new Promise((resolve, reject) => {
|
||||
glob('./node_modules/monaco-editor/esm/vs/language/*/monaco.contribution.js', { cwd: path.dirname(__dirname) }, (err, files) => {
|
||||
if (err) {
|
||||
reject(err);
|
||||
return;
|
||||
}
|
||||
|
||||
resolve(
|
||||
files
|
||||
.map(file => file.substring('./node_modules/monaco-editor/esm/vs/language/'.length))
|
||||
.map(file => file.substring(0, file.length - '/monaco.contribution.js'.length))
|
||||
);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns { Promise<{ label: string; entry: string; worker: { id: string; entry: string; }; }[]> }
|
||||
*/
|
||||
function getAdvancedLanguages() {
|
||||
return readAdvancedLanguages().then((languages) => {
|
||||
let result = [];
|
||||
for (const lang of languages) {
|
||||
let shortLang = (lang === 'typescript' ? 'ts' : lang);
|
||||
const entry = `vs/language/${lang}/monaco.contribution`;
|
||||
checkFileExists(entry);
|
||||
const workerId = `vs/language/${lang}/${shortLang}Worker`;
|
||||
checkFileExists(workerId);
|
||||
const workerEntry = `vs/language/${lang}/${shortLang}.worker`;
|
||||
checkFileExists(workerEntry);
|
||||
result.push({
|
||||
label: lang,
|
||||
entry: entry,
|
||||
worker: {
|
||||
id: workerId,
|
||||
entry: workerEntry
|
||||
}
|
||||
});
|
||||
}
|
||||
return result;
|
||||
});
|
||||
|
||||
function checkFileExists(moduleName) {
|
||||
const filePath = path.join(__dirname, '..', 'node_modules/monaco-editor/esm', `${moduleName}.js`);
|
||||
if (!fs.existsSync(filePath)) {
|
||||
console.error(`Could not find ${filePath}.`);
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function generateLanguages() {
|
||||
return Promise.all([getBasicLanguages(), getAdvancedLanguages()]).then(([basicLanguages, advancedLanguages]) => {
|
||||
basicLanguages.sort(strcmp);
|
||||
advancedLanguages.sort(strcmp);
|
||||
|
||||
let i = 0, len = basicLanguages.length;
|
||||
let j = 0, lenJ = advancedLanguages.length;
|
||||
let result = [];
|
||||
while (i < len || j < lenJ) {
|
||||
if (i < len && j < lenJ) {
|
||||
if (basicLanguages[i].label === advancedLanguages[j].label) {
|
||||
let entry = [];
|
||||
entry.push(basicLanguages[i].entry);
|
||||
entry.push(advancedLanguages[j].entry);
|
||||
result.push({
|
||||
label: basicLanguages[i].label,
|
||||
entry: entry,
|
||||
worker: advancedLanguages[j].worker
|
||||
});
|
||||
i++;
|
||||
j++;
|
||||
} else if (basicLanguages[i].label < advancedLanguages[j].label) {
|
||||
result.push(basicLanguages[i]);
|
||||
i++;
|
||||
} else {
|
||||
result.push(advancedLanguages[j]);
|
||||
j++;
|
||||
}
|
||||
} else if (i < len) {
|
||||
result.push(basicLanguages[i]);
|
||||
i++;
|
||||
} else {
|
||||
result.push(advancedLanguages[j]);
|
||||
j++;
|
||||
}
|
||||
}
|
||||
|
||||
const code = `//
|
||||
// THIS IS A GENERATED FILE. PLEASE DO NOT EDIT DIRECTLY.
|
||||
// GENERATED USING node scripts/import-editor.js
|
||||
//
|
||||
import { IFeatureDefinition } from "./types";
|
||||
|
||||
export const languagesArr: IFeatureDefinition[] = ${
|
||||
JSON.stringify(result, null, ' ')
|
||||
.replace(/"label":/g, 'label:')
|
||||
.replace(/"entry":/g, 'entry:')
|
||||
.replace(/"worker":/g, 'worker:')
|
||||
.replace(/"id":/g, 'id:')
|
||||
.replace(/"/g, '\'')
|
||||
};
|
||||
|
||||
export type EditorLanguage = ${
|
||||
result.map(el => `'${el.label}'`).join(' | ')
|
||||
};
|
||||
|
||||
`
|
||||
fs.writeFileSync(path.join(__dirname, '../src/languages.ts'), code.replace(/\r\n/g, '\n'));
|
||||
|
||||
const readmeLanguages = (
|
||||
JSON.stringify(result.map(r => r.label))
|
||||
.replace(/"/g, '\'')
|
||||
.replace(/','/g, '\', \'')
|
||||
);
|
||||
let readme = fs.readFileSync(path.join(__dirname, '../README.md')).toString();
|
||||
readme = readme.replace(/<!-- LANGUAGES_BEGIN -->([^<]+)<!-- LANGUAGES_END -->/, `<!-- LANGUAGES_BEGIN -->\`${readmeLanguages}\`<!-- LANGUAGES_END -->`);
|
||||
fs.writeFileSync(path.join(__dirname, '../README.md'), readme);
|
||||
});
|
||||
}
|
||||
|
||||
function strcmp(a, b) {
|
||||
if (a < b) {
|
||||
return -1;
|
||||
}
|
||||
if (a > b) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns { string[] }
|
||||
*/
|
||||
function generateFeatures() {
|
||||
const skipImports = [
|
||||
'vs/editor/browser/widget/codeEditorWidget',
|
||||
'vs/editor/browser/widget/diffEditorWidget',
|
||||
'vs/editor/browser/widget/diffNavigator',
|
||||
'vs/editor/common/standaloneStrings',
|
||||
'vs/editor/contrib/tokenization/tokenization',
|
||||
'vs/editor/editor.all',
|
||||
'vs/base/browser/ui/codicons/codiconStyles',
|
||||
'vs/editor/contrib/gotoSymbol/documentSymbols',
|
||||
];
|
||||
|
||||
let features = [];
|
||||
const files = (
|
||||
fs.readFileSync(path.join(__dirname, '../node_modules/monaco-editor/esm/vs/editor/edcore.main.js')).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 '([^']+)'/);
|
||||
if (m) {
|
||||
const tmp = path.posix.join('vs/editor', m[1]).replace(/\.js$/, '');
|
||||
if (skipImports.indexOf(tmp) === -1) {
|
||||
features.push(tmp);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
let result = features.map((feature) => {
|
||||
return {
|
||||
label: customFeatureLabels[feature] || path.basename(path.dirname(feature)),
|
||||
entry: feature
|
||||
};
|
||||
});
|
||||
|
||||
result.sort((a, b) => {
|
||||
const labelCmp = strcmp(a.label, b.label);
|
||||
if (labelCmp === 0) {
|
||||
return strcmp(a.entry, b.entry);
|
||||
}
|
||||
return labelCmp;
|
||||
});
|
||||
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
if (i + 1 < result.length && result[i].label === result[i + 1].label) {
|
||||
if (typeof result[i].entry === 'string') {
|
||||
result[i].entry = [result[i].entry];
|
||||
}
|
||||
result[i].entry.push(result[i + 1].entry);
|
||||
result.splice(i + 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
const code = `//
|
||||
// THIS IS A GENERATED FILE. PLEASE DO NOT EDIT DIRECTLY.
|
||||
// GENERATED USING node scripts/import-editor.js
|
||||
//
|
||||
import { IFeatureDefinition } from "./types";
|
||||
|
||||
export const featuresArr: IFeatureDefinition[] = ${
|
||||
JSON.stringify(result, null, ' ')
|
||||
.replace(/"label":/g, 'label:')
|
||||
.replace(/"entry":/g, 'entry:')
|
||||
.replace(/"/g, '\'')
|
||||
};
|
||||
|
||||
export type EditorFeature = ${
|
||||
result.map(el => `'${el.label}'`).join(' | ')
|
||||
};
|
||||
|
||||
export type NegatedEditorFeature = ${
|
||||
result.map(el => `'!${el.label}'`).join(' | ')
|
||||
};
|
||||
`
|
||||
fs.writeFileSync(path.join(__dirname, '../src/features.ts'), code.replace(/\r\n/g, '\n'));
|
||||
|
||||
const readmeFeatures = (
|
||||
JSON.stringify(result.map(r => r.label))
|
||||
.replace(/"/g, '\'')
|
||||
.replace(/','/g, '\', \'')
|
||||
);
|
||||
let readme = fs.readFileSync(path.join(__dirname, '../README.md')).toString();
|
||||
readme = readme.replace(/<!-- FEATURES_BEGIN -->([^<]+)<!-- FEATURES_END -->/, `<!-- FEATURES_BEGIN -->\`${readmeFeatures}\`<!-- FEATURES_END -->`);
|
||||
fs.writeFileSync(path.join(__dirname, '../README.md'), readme);
|
||||
}
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See LICENSE in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
const glob = require('glob');
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
|
||||
const customFeatureLabels = {
|
||||
'vs/editor/browser/controller/coreCommands': 'coreCommands',
|
||||
'vs/editor/contrib/caretOperations/caretOperations': 'caretOperations',
|
||||
'vs/editor/contrib/caretOperations/transpose': 'transpose',
|
||||
'vs/editor/contrib/colorPicker/colorDetector': 'colorDetector',
|
||||
'vs/editor/contrib/rename/onTypeRename': 'onTypeRename',
|
||||
'vs/editor/contrib/gotoSymbol/link/goToDefinitionAtPosition': 'gotoSymbol',
|
||||
'vs/editor/contrib/snippet/snippetController2': 'snippets',
|
||||
'vs/editor/standalone/browser/quickAccess/standaloneGotoLineQuickAccess': 'gotoLine',
|
||||
'vs/editor/standalone/browser/quickAccess/standaloneCommandsQuickAccess': 'quickCommand',
|
||||
'vs/editor/standalone/browser/quickAccess/standaloneGotoSymbolQuickAccess': 'quickOutline',
|
||||
'vs/editor/standalone/browser/quickAccess/standaloneHelpQuickAccess': 'quickHelp'
|
||||
};
|
||||
|
||||
generateLanguages();
|
||||
generateFeatures();
|
||||
|
||||
/**
|
||||
* @returns { Promise<{ label: string; entry: string; }[]> }
|
||||
*/
|
||||
function getBasicLanguages() {
|
||||
return new Promise((resolve, reject) => {
|
||||
glob(
|
||||
'./node_modules/monaco-editor/esm/vs/basic-languages/*/*.contribution.js',
|
||||
{ cwd: path.dirname(__dirname) },
|
||||
(err, files) => {
|
||||
if (err) {
|
||||
reject(err);
|
||||
return;
|
||||
}
|
||||
|
||||
resolve(
|
||||
files.map((file) => {
|
||||
const entry = file
|
||||
.substring('./node_modules/monaco-editor/esm/'.length)
|
||||
.replace(/\.js$/, '');
|
||||
const label = path.basename(file).replace(/\.contribution\.js$/, '');
|
||||
return {
|
||||
label: label,
|
||||
entry: entry
|
||||
};
|
||||
})
|
||||
);
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns { Promise<string[]> }
|
||||
*/
|
||||
function readAdvancedLanguages() {
|
||||
return new Promise((resolve, reject) => {
|
||||
glob(
|
||||
'./node_modules/monaco-editor/esm/vs/language/*/monaco.contribution.js',
|
||||
{ cwd: path.dirname(__dirname) },
|
||||
(err, files) => {
|
||||
if (err) {
|
||||
reject(err);
|
||||
return;
|
||||
}
|
||||
|
||||
resolve(
|
||||
files
|
||||
.map((file) => file.substring('./node_modules/monaco-editor/esm/vs/language/'.length))
|
||||
.map((file) => file.substring(0, file.length - '/monaco.contribution.js'.length))
|
||||
);
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns { Promise<{ label: string; entry: string; worker: { id: string; entry: string; }; }[]> }
|
||||
*/
|
||||
function getAdvancedLanguages() {
|
||||
return readAdvancedLanguages().then((languages) => {
|
||||
let result = [];
|
||||
for (const lang of languages) {
|
||||
let shortLang = lang === 'typescript' ? 'ts' : lang;
|
||||
const entry = `vs/language/${lang}/monaco.contribution`;
|
||||
checkFileExists(entry);
|
||||
const workerId = `vs/language/${lang}/${shortLang}Worker`;
|
||||
checkFileExists(workerId);
|
||||
const workerEntry = `vs/language/${lang}/${shortLang}.worker`;
|
||||
checkFileExists(workerEntry);
|
||||
result.push({
|
||||
label: lang,
|
||||
entry: entry,
|
||||
worker: {
|
||||
id: workerId,
|
||||
entry: workerEntry
|
||||
}
|
||||
});
|
||||
}
|
||||
return result;
|
||||
});
|
||||
|
||||
function checkFileExists(moduleName) {
|
||||
const filePath = path.join(
|
||||
__dirname,
|
||||
'..',
|
||||
'node_modules/monaco-editor/esm',
|
||||
`${moduleName}.js`
|
||||
);
|
||||
if (!fs.existsSync(filePath)) {
|
||||
console.error(`Could not find ${filePath}.`);
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function generateLanguages() {
|
||||
return Promise.all([getBasicLanguages(), getAdvancedLanguages()]).then(
|
||||
([basicLanguages, advancedLanguages]) => {
|
||||
basicLanguages.sort(strcmp);
|
||||
advancedLanguages.sort(strcmp);
|
||||
|
||||
let i = 0,
|
||||
len = basicLanguages.length;
|
||||
let j = 0,
|
||||
lenJ = advancedLanguages.length;
|
||||
let result = [];
|
||||
while (i < len || j < lenJ) {
|
||||
if (i < len && j < lenJ) {
|
||||
if (basicLanguages[i].label === advancedLanguages[j].label) {
|
||||
let entry = [];
|
||||
entry.push(basicLanguages[i].entry);
|
||||
entry.push(advancedLanguages[j].entry);
|
||||
result.push({
|
||||
label: basicLanguages[i].label,
|
||||
entry: entry,
|
||||
worker: advancedLanguages[j].worker
|
||||
});
|
||||
i++;
|
||||
j++;
|
||||
} else if (basicLanguages[i].label < advancedLanguages[j].label) {
|
||||
result.push(basicLanguages[i]);
|
||||
i++;
|
||||
} else {
|
||||
result.push(advancedLanguages[j]);
|
||||
j++;
|
||||
}
|
||||
} else if (i < len) {
|
||||
result.push(basicLanguages[i]);
|
||||
i++;
|
||||
} else {
|
||||
result.push(advancedLanguages[j]);
|
||||
j++;
|
||||
}
|
||||
}
|
||||
|
||||
const code = `//
|
||||
// THIS IS A GENERATED FILE. PLEASE DO NOT EDIT DIRECTLY.
|
||||
// GENERATED USING node scripts/import-editor.js
|
||||
//
|
||||
import { IFeatureDefinition } from "./types";
|
||||
|
||||
export const languagesArr: IFeatureDefinition[] = ${JSON.stringify(result, null, ' ')
|
||||
.replace(/"label":/g, 'label:')
|
||||
.replace(/"entry":/g, 'entry:')
|
||||
.replace(/"worker":/g, 'worker:')
|
||||
.replace(/"id":/g, 'id:')
|
||||
.replace(/"/g, "'")};
|
||||
|
||||
export type EditorLanguage = ${result.map((el) => `'${el.label}'`).join(' | ')};
|
||||
|
||||
`;
|
||||
fs.writeFileSync(path.join(__dirname, '../src/languages.ts'), code.replace(/\r\n/g, '\n'));
|
||||
|
||||
const readmeLanguages = JSON.stringify(result.map((r) => r.label))
|
||||
.replace(/"/g, "'")
|
||||
.replace(/','/g, "', '");
|
||||
let readme = fs.readFileSync(path.join(__dirname, '../README.md')).toString();
|
||||
readme = readme.replace(
|
||||
/<!-- LANGUAGES_BEGIN -->([^<]+)<!-- LANGUAGES_END -->/,
|
||||
`<!-- LANGUAGES_BEGIN -->\`${readmeLanguages}\`<!-- LANGUAGES_END -->`
|
||||
);
|
||||
fs.writeFileSync(path.join(__dirname, '../README.md'), readme);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function strcmp(a, b) {
|
||||
if (a < b) {
|
||||
return -1;
|
||||
}
|
||||
if (a > b) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns { string[] }
|
||||
*/
|
||||
function generateFeatures() {
|
||||
const skipImports = [
|
||||
'vs/editor/browser/widget/codeEditorWidget',
|
||||
'vs/editor/browser/widget/diffEditorWidget',
|
||||
'vs/editor/browser/widget/diffNavigator',
|
||||
'vs/editor/common/standaloneStrings',
|
||||
'vs/editor/contrib/tokenization/tokenization',
|
||||
'vs/editor/editor.all',
|
||||
'vs/base/browser/ui/codicons/codiconStyles',
|
||||
'vs/editor/contrib/gotoSymbol/documentSymbols'
|
||||
];
|
||||
|
||||
let features = [];
|
||||
const files =
|
||||
fs
|
||||
.readFileSync(
|
||||
path.join(__dirname, '../node_modules/monaco-editor/esm/vs/editor/edcore.main.js')
|
||||
)
|
||||
.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 '([^']+)'/);
|
||||
if (m) {
|
||||
const tmp = path.posix.join('vs/editor', m[1]).replace(/\.js$/, '');
|
||||
if (skipImports.indexOf(tmp) === -1) {
|
||||
features.push(tmp);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
let result = features.map((feature) => {
|
||||
return {
|
||||
label: customFeatureLabels[feature] || path.basename(path.dirname(feature)),
|
||||
entry: feature
|
||||
};
|
||||
});
|
||||
|
||||
result.sort((a, b) => {
|
||||
const labelCmp = strcmp(a.label, b.label);
|
||||
if (labelCmp === 0) {
|
||||
return strcmp(a.entry, b.entry);
|
||||
}
|
||||
return labelCmp;
|
||||
});
|
||||
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
if (i + 1 < result.length && result[i].label === result[i + 1].label) {
|
||||
if (typeof result[i].entry === 'string') {
|
||||
result[i].entry = [result[i].entry];
|
||||
}
|
||||
result[i].entry.push(result[i + 1].entry);
|
||||
result.splice(i + 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
const code = `//
|
||||
// THIS IS A GENERATED FILE. PLEASE DO NOT EDIT DIRECTLY.
|
||||
// GENERATED USING node scripts/import-editor.js
|
||||
//
|
||||
import { IFeatureDefinition } from "./types";
|
||||
|
||||
export const featuresArr: IFeatureDefinition[] = ${JSON.stringify(result, null, ' ')
|
||||
.replace(/"label":/g, 'label:')
|
||||
.replace(/"entry":/g, 'entry:')
|
||||
.replace(/"/g, "'")};
|
||||
|
||||
export type EditorFeature = ${result.map((el) => `'${el.label}'`).join(' | ')};
|
||||
|
||||
export type NegatedEditorFeature = ${result.map((el) => `'!${el.label}'`).join(' | ')};
|
||||
`;
|
||||
fs.writeFileSync(path.join(__dirname, '../src/features.ts'), code.replace(/\r\n/g, '\n'));
|
||||
|
||||
const readmeFeatures = JSON.stringify(result.map((r) => r.label))
|
||||
.replace(/"/g, "'")
|
||||
.replace(/','/g, "', '");
|
||||
let readme = fs.readFileSync(path.join(__dirname, '../README.md')).toString();
|
||||
readme = readme.replace(
|
||||
/<!-- FEATURES_BEGIN -->([^<]+)<!-- FEATURES_END -->/,
|
||||
`<!-- FEATURES_BEGIN -->\`${readmeFeatures}\`<!-- FEATURES_END -->`
|
||||
);
|
||||
fs.writeFileSync(path.join(__dirname, '../README.md'), readme);
|
||||
}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
declare module 'loader-utils' {
|
||||
export function interpolateName(loaderContext: any, name: string, options?: any): string;
|
||||
}
|
||||
declare module 'loader-utils' {
|
||||
export function interpolateName(loaderContext: any, name: string, options?: any): string;
|
||||
}
|
||||
|
||||
@ -1,22 +1,21 @@
|
||||
const loaderUtils = require('loader-utils');
|
||||
|
||||
export function pitch(this: any, remainingRequest: any) {
|
||||
const { globals = undefined, pre = [], post = [] } = loaderUtils.getOptions(this) || {};
|
||||
const { globals = undefined, pre = [], post = [] } = loaderUtils.getOptions(this) || {};
|
||||
|
||||
// HACK: NamedModulesPlugin overwrites existing modules when requesting the same module via
|
||||
// different loaders, so we need to circumvent this by appending a suffix to make the name unique
|
||||
// See https://github.com/webpack/webpack/issues/4613#issuecomment-325178346 for details
|
||||
if (this._module && this._module.userRequest) {
|
||||
this._module.userRequest = `include-loader!${this._module.userRequest}`;
|
||||
}
|
||||
// HACK: NamedModulesPlugin overwrites existing modules when requesting the same module via
|
||||
// different loaders, so we need to circumvent this by appending a suffix to make the name unique
|
||||
// See https://github.com/webpack/webpack/issues/4613#issuecomment-325178346 for details
|
||||
if (this._module && this._module.userRequest) {
|
||||
this._module.userRequest = `include-loader!${this._module.userRequest}`;
|
||||
}
|
||||
|
||||
return [
|
||||
...(globals
|
||||
? Object.keys(globals).map((key) => `self[${JSON.stringify(key)}] = ${globals[key]};`)
|
||||
: []
|
||||
),
|
||||
...pre.map((include: any) => `require(${loaderUtils.stringifyRequest(this, include)});`),
|
||||
`module.exports = require(${loaderUtils.stringifyRequest(this, `!!${remainingRequest}`)});`,
|
||||
...post.map((include: any) => `require(${loaderUtils.stringifyRequest(this, include)});`),
|
||||
].join('\n');
|
||||
};
|
||||
return [
|
||||
...(globals
|
||||
? Object.keys(globals).map((key) => `self[${JSON.stringify(key)}] = ${globals[key]};`)
|
||||
: []),
|
||||
...pre.map((include: any) => `require(${loaderUtils.stringifyRequest(this, include)});`),
|
||||
`module.exports = require(${loaderUtils.stringifyRequest(this, `!!${remainingRequest}`)});`,
|
||||
...post.map((include: any) => `require(${loaderUtils.stringifyRequest(this, include)});`)
|
||||
].join('\n');
|
||||
}
|
||||
|
||||
@ -1,52 +1,63 @@
|
||||
import type * as webpack from 'webpack';
|
||||
|
||||
export interface IAddWorkerEntryPointPluginOptions {
|
||||
id: string;
|
||||
entry: string;
|
||||
filename: string;
|
||||
chunkFilename?: string;
|
||||
plugins: webpack.WebpackPluginInstance[];
|
||||
id: string;
|
||||
entry: string;
|
||||
filename: string;
|
||||
chunkFilename?: string;
|
||||
plugins: webpack.WebpackPluginInstance[];
|
||||
}
|
||||
|
||||
function getCompilerHook(compiler: webpack.Compiler, { id, entry, filename, chunkFilename, plugins }: IAddWorkerEntryPointPluginOptions) {
|
||||
const webpack = compiler.webpack ?? require('webpack');
|
||||
|
||||
return function (compilation: webpack.Compilation, callback: (error?: Error | null | false) => void) {
|
||||
const outputOptions = {
|
||||
filename,
|
||||
chunkFilename,
|
||||
publicPath: compilation.outputOptions.publicPath,
|
||||
// HACK: globalObject is necessary to fix https://github.com/webpack/webpack/issues/6642
|
||||
globalObject: 'this',
|
||||
};
|
||||
const childCompiler = compilation.createChildCompiler(id, outputOptions, [
|
||||
new webpack.webworker.WebWorkerTemplatePlugin(),
|
||||
new webpack.LoaderTargetPlugin('webworker'),
|
||||
]);
|
||||
const SingleEntryPlugin = webpack.EntryPlugin ?? webpack.SingleEntryPlugin;
|
||||
new SingleEntryPlugin(compiler.context, entry, 'main').apply(childCompiler);
|
||||
plugins.forEach((plugin) => plugin.apply(childCompiler));
|
||||
|
||||
childCompiler.runAsChild((err?: Error) => callback(err));
|
||||
}
|
||||
function getCompilerHook(
|
||||
compiler: webpack.Compiler,
|
||||
{ id, entry, filename, chunkFilename, plugins }: IAddWorkerEntryPointPluginOptions
|
||||
) {
|
||||
const webpack = compiler.webpack ?? require('webpack');
|
||||
|
||||
return function (
|
||||
compilation: webpack.Compilation,
|
||||
callback: (error?: Error | null | false) => void
|
||||
) {
|
||||
const outputOptions = {
|
||||
filename,
|
||||
chunkFilename,
|
||||
publicPath: compilation.outputOptions.publicPath,
|
||||
// HACK: globalObject is necessary to fix https://github.com/webpack/webpack/issues/6642
|
||||
globalObject: 'this'
|
||||
};
|
||||
const childCompiler = compilation.createChildCompiler(id, outputOptions, [
|
||||
new webpack.webworker.WebWorkerTemplatePlugin(),
|
||||
new webpack.LoaderTargetPlugin('webworker')
|
||||
]);
|
||||
const SingleEntryPlugin = webpack.EntryPlugin ?? webpack.SingleEntryPlugin;
|
||||
new SingleEntryPlugin(compiler.context, entry, 'main').apply(childCompiler);
|
||||
plugins.forEach((plugin) => plugin.apply(childCompiler));
|
||||
|
||||
childCompiler.runAsChild((err?: Error) => callback(err));
|
||||
};
|
||||
}
|
||||
|
||||
export class AddWorkerEntryPointPlugin implements webpack.WebpackPluginInstance {
|
||||
|
||||
private readonly options: IAddWorkerEntryPointPluginOptions;
|
||||
|
||||
constructor({ id, entry, filename, chunkFilename = undefined, plugins }: IAddWorkerEntryPointPluginOptions) {
|
||||
this.options = { id, entry, filename, chunkFilename, plugins };
|
||||
}
|
||||
|
||||
apply(compiler: webpack.Compiler) {
|
||||
const webpack = compiler.webpack ?? require('webpack');
|
||||
const compilerHook = getCompilerHook(compiler, this.options);
|
||||
const majorVersion = webpack.version.split('.')[0]
|
||||
if (parseInt(majorVersion) < 4) {
|
||||
(<any>compiler).plugin('make', compilerHook);
|
||||
} else {
|
||||
compiler.hooks.make.tapAsync('AddWorkerEntryPointPlugin', compilerHook);
|
||||
}
|
||||
}
|
||||
private readonly options: IAddWorkerEntryPointPluginOptions;
|
||||
|
||||
constructor({
|
||||
id,
|
||||
entry,
|
||||
filename,
|
||||
chunkFilename = undefined,
|
||||
plugins
|
||||
}: IAddWorkerEntryPointPluginOptions) {
|
||||
this.options = { id, entry, filename, chunkFilename, plugins };
|
||||
}
|
||||
|
||||
apply(compiler: webpack.Compiler) {
|
||||
const webpack = compiler.webpack ?? require('webpack');
|
||||
const compilerHook = getCompilerHook(compiler, this.options);
|
||||
const majorVersion = webpack.version.split('.')[0];
|
||||
if (parseInt(majorVersion) < 4) {
|
||||
(<any>compiler).plugin('make', compilerHook);
|
||||
} else {
|
||||
compiler.hooks.make.tapAsync('AddWorkerEntryPointPlugin', compilerHook);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
|
||||
export interface IWorkerDefinition {
|
||||
id: string;
|
||||
entry: string;
|
||||
}
|
||||
|
||||
export interface IFeatureDefinition {
|
||||
label: string;
|
||||
entry: string | string[] | undefined;
|
||||
worker?: IWorkerDefinition;
|
||||
}
|
||||
export interface IWorkerDefinition {
|
||||
id: string;
|
||||
entry: string;
|
||||
}
|
||||
|
||||
export interface IFeatureDefinition {
|
||||
label: string;
|
||||
entry: string | string[] | undefined;
|
||||
worker?: IWorkerDefinition;
|
||||
}
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container" style="width:800px;height:600px;border:1px solid #ccc"></div>
|
||||
<script type="text/javascript" src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container" style="width: 800px; height: 600px; border: 1px solid #ccc"></div>
|
||||
<script type="text/javascript" src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
|
||||
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
|
||||
|
||||
monaco.editor.create(document.getElementById('container'), {
|
||||
value: 'console.log("Hello, world")',
|
||||
language: 'javascript'
|
||||
});
|
||||
value: 'console.log("Hello, world")',
|
||||
language: 'javascript'
|
||||
});
|
||||
|
||||
@ -1,15 +1,11 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"outDir": "out",
|
||||
"target": "es6",
|
||||
"declaration": true,
|
||||
"strict": true
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"outDir": "out",
|
||||
"target": "es6",
|
||||
"declaration": true,
|
||||
"strict": true
|
||||
},
|
||||
"include": ["src"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
blank_issues_enabled: false
|
||||
contact_links:
|
||||
- name: Question
|
||||
url: https://stackoverflow.com/questions/tagged/monaco-editor
|
||||
url: https://stackoverflow.com/questions/tagged/monaco-editor
|
||||
about: Please ask and answer questions here.
|
||||
|
||||
@ -1,62 +1,63 @@
|
||||
{
|
||||
perform: true,
|
||||
commands: [
|
||||
{
|
||||
type: 'comment',
|
||||
name: 'question',
|
||||
allowUsers: [],
|
||||
action: 'updateLabels',
|
||||
addLabel: '*question'
|
||||
},
|
||||
{
|
||||
type: 'label',
|
||||
name: '*question',
|
||||
allowTriggerByBot: true,
|
||||
action: 'close',
|
||||
comment: "Please ask your question on [StackOverflow](https://stackoverflow.com/questions/tagged/monaco-editor). We have a great community over [there](https://stackoverflow.com/questions/tagged/monaco-editor). They have already answered hundreds of questions and are happy to answer yours as well. You can also try [searching through existing issues](https://github.com/microsoft/monaco-editor/issues?utf8=%E2%9C%93&q=is%3Aissue+), looking at [API usage samples](https://microsoft.github.io/monaco-editor/playground.html) or at [integration samples](https://github.com/Microsoft/monaco-editor-samples). See also our [issue reporting](https://aka.ms/vscodeissuereporting) guidelines.\n\nHappy Coding!"
|
||||
},
|
||||
{
|
||||
type: 'label',
|
||||
name: '*out-of-scope',
|
||||
allowTriggerByBot: true,
|
||||
action: 'close',
|
||||
comment: "We closed this issue because we don't plan to address it in the foreseeable future. You can find more detailed information about our decision-making process [here](https://aka.ms/vscode-out-of-scope). If you disagree and feel that this issue is crucial: We are happy to listen and to reconsider.\n\nIf you wonder what we are up to, please see our [roadmap](https://aka.ms/vscoderoadmap) and [issue reporting](https://aka.ms/vscodeissuereporting) guidelines.\n\nThanks for your understanding and happy coding!"
|
||||
},
|
||||
{
|
||||
type: 'label',
|
||||
name: '*as-designed',
|
||||
allowTriggerByBot: true,
|
||||
action: 'close',
|
||||
comment: "The described behavior is how it is expected to work. If you disagree, please explain what is expected and what is not in more detail. See also our [issue reporting](https://aka.ms/vscodeissuereporting) guidelines.\n\nHappy Coding!"
|
||||
},
|
||||
{
|
||||
type: 'label',
|
||||
name: '*english-please',
|
||||
allowTriggerByBot: true,
|
||||
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."
|
||||
},
|
||||
{
|
||||
type: 'comment',
|
||||
name: 'duplicate',
|
||||
allowUsers: [],
|
||||
action: 'updateLabels',
|
||||
addLabel: '*duplicate'
|
||||
},
|
||||
{
|
||||
type: 'label',
|
||||
name: '*duplicate',
|
||||
allowTriggerByBot: true,
|
||||
action: 'close',
|
||||
comment: "Thanks for creating this issue! We figured it's covering the same as another one we already have. Thus, we closed this one as a duplicate. You can search for existing issues [here](https://github.com/Microsoft/monaco-editor/issues). See also our [issue reporting](https://aka.ms/vscodeissuereporting) guidelines.\n\nHappy Coding!"
|
||||
},
|
||||
{
|
||||
type: 'comment',
|
||||
name: 'needsMoreInfo',
|
||||
allowUsers: [],
|
||||
action: 'updateLabels',
|
||||
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!"
|
||||
},
|
||||
]
|
||||
}
|
||||
{
|
||||
perform: true,
|
||||
commands:
|
||||
[
|
||||
{
|
||||
type: 'comment',
|
||||
name: 'question',
|
||||
allowUsers: [],
|
||||
action: 'updateLabels',
|
||||
addLabel: '*question'
|
||||
},
|
||||
{
|
||||
type: 'label',
|
||||
name: '*question',
|
||||
allowTriggerByBot: true,
|
||||
action: 'close',
|
||||
comment: "Please ask your question on [StackOverflow](https://stackoverflow.com/questions/tagged/monaco-editor). We have a great community over [there](https://stackoverflow.com/questions/tagged/monaco-editor). They have already answered hundreds of questions and are happy to answer yours as well. You can also try [searching through existing issues](https://github.com/microsoft/monaco-editor/issues?utf8=%E2%9C%93&q=is%3Aissue+), looking at [API usage samples](https://microsoft.github.io/monaco-editor/playground.html) or at [integration samples](https://github.com/Microsoft/monaco-editor-samples). See also our [issue reporting](https://aka.ms/vscodeissuereporting) guidelines.\n\nHappy Coding!"
|
||||
},
|
||||
{
|
||||
type: 'label',
|
||||
name: '*out-of-scope',
|
||||
allowTriggerByBot: true,
|
||||
action: 'close',
|
||||
comment: "We closed this issue because we don't plan to address it in the foreseeable future. You can find more detailed information about our decision-making process [here](https://aka.ms/vscode-out-of-scope). If you disagree and feel that this issue is crucial: We are happy to listen and to reconsider.\n\nIf you wonder what we are up to, please see our [roadmap](https://aka.ms/vscoderoadmap) and [issue reporting](https://aka.ms/vscodeissuereporting) guidelines.\n\nThanks for your understanding and happy coding!"
|
||||
},
|
||||
{
|
||||
type: 'label',
|
||||
name: '*as-designed',
|
||||
allowTriggerByBot: true,
|
||||
action: 'close',
|
||||
comment: "The described behavior is how it is expected to work. If you disagree, please explain what is expected and what is not in more detail. See also our [issue reporting](https://aka.ms/vscodeissuereporting) guidelines.\n\nHappy Coding!"
|
||||
},
|
||||
{
|
||||
type: 'label',
|
||||
name: '*english-please',
|
||||
allowTriggerByBot: true,
|
||||
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.'
|
||||
},
|
||||
{
|
||||
type: 'comment',
|
||||
name: 'duplicate',
|
||||
allowUsers: [],
|
||||
action: 'updateLabels',
|
||||
addLabel: '*duplicate'
|
||||
},
|
||||
{
|
||||
type: 'label',
|
||||
name: '*duplicate',
|
||||
allowTriggerByBot: true,
|
||||
action: 'close',
|
||||
comment: "Thanks for creating this issue! We figured it's covering the same as another one we already have. Thus, we closed this one as a duplicate. You can search for existing issues [here](https://github.com/Microsoft/monaco-editor/issues). See also our [issue reporting](https://aka.ms/vscodeissuereporting) guidelines.\n\nHappy Coding!"
|
||||
},
|
||||
{
|
||||
type: 'comment',
|
||||
name: 'needsMoreInfo',
|
||||
allowUsers: [],
|
||||
action: 'updateLabels',
|
||||
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!"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,6 +1 @@
|
||||
{
|
||||
daysAfterClose: 45,
|
||||
daysSinceLastUpdate: 3,
|
||||
ignoredLabels: ['*out-of-scope'],
|
||||
perform: true
|
||||
}
|
||||
{ daysAfterClose: 45, daysSinceLastUpdate: 3, ignoredLabels: ['*out-of-scope'], perform: true }
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
daysUntilClose: 7,
|
||||
needsMoreInfoLabel: 'needs-more-info',
|
||||
perform: true,
|
||||
closeComment: "This issue has been closed automatically because it needs more information and has not had recent activity. See also our [issue reporting](https://aka.ms/vscodeissuereporting) guidelines.\n\nHappy Coding!"
|
||||
}
|
||||
{
|
||||
daysUntilClose: 7,
|
||||
needsMoreInfoLabel: 'needs-more-info',
|
||||
perform: true,
|
||||
closeComment: "This issue has been closed automatically because it needs more information and has not had recent activity. See also our [issue reporting](https://aka.ms/vscodeissuereporting) guidelines.\n\nHappy Coding!"
|
||||
}
|
||||
|
||||
@ -1,30 +1,26 @@
|
||||
{
|
||||
// Use IntelliSense to learn about possible attributes.
|
||||
// Hover to view descriptions of existing attributes.
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"name": "gulp release",
|
||||
"program": "${workspaceFolder}/node_modules/gulp/bin/gulp.js",
|
||||
"stopOnEntry": true,
|
||||
"args": [
|
||||
"release"
|
||||
],
|
||||
"cwd": "${workspaceFolder}"
|
||||
},
|
||||
{
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"name": "gulp website",
|
||||
"program": "${workspaceFolder}/node_modules/gulp/bin/gulp.js",
|
||||
"stopOnEntry": true,
|
||||
"args": [
|
||||
"website"
|
||||
],
|
||||
"cwd": "${workspaceFolder}"
|
||||
},
|
||||
]
|
||||
}
|
||||
{
|
||||
// Use IntelliSense to learn about possible attributes.
|
||||
// Hover to view descriptions of existing attributes.
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"name": "gulp release",
|
||||
"program": "${workspaceFolder}/node_modules/gulp/bin/gulp.js",
|
||||
"stopOnEntry": true,
|
||||
"args": ["release"],
|
||||
"cwd": "${workspaceFolder}"
|
||||
},
|
||||
{
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"name": "gulp website",
|
||||
"program": "${workspaceFolder}/node_modules/gulp/bin/gulp.js",
|
||||
"stopOnEntry": true,
|
||||
"args": ["website"],
|
||||
"cwd": "${workspaceFolder}"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,54 +1,60 @@
|
||||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
mode: 'production',
|
||||
entry: {
|
||||
"core": './ci/core.js',
|
||||
"editor.worker": './vscode/out-monaco-editor-core/esm/vs/editor/editor.worker.js',
|
||||
"json.worker": 'monaco-json/release/esm/json.worker',
|
||||
"css.worker": 'monaco-css/release/esm/css.worker',
|
||||
"html.worker": 'monaco-html/release/esm/html.worker',
|
||||
"ts.worker": 'monaco-typescript/release/esm/ts.worker',
|
||||
},
|
||||
output: {
|
||||
globalObject: 'self',
|
||||
filename: '[name].bundle.js',
|
||||
path: path.resolve(__dirname, '../dist')
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ['style-loader', 'css-loader'],
|
||||
},
|
||||
{
|
||||
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]',
|
||||
outputPath: 'fonts/'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
resolve: {
|
||||
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': path.resolve(__dirname, '../vscode/out-monaco-editor-core/esm/vs/editor/editor.main.js'),
|
||||
}
|
||||
},
|
||||
stats: {
|
||||
all: false,
|
||||
modules: true,
|
||||
errors: true,
|
||||
warnings: true,
|
||||
// our additional options
|
||||
moduleTrace: true,
|
||||
errorDetails: true,
|
||||
chunks: true
|
||||
}
|
||||
mode: 'production',
|
||||
entry: {
|
||||
core: './ci/core.js',
|
||||
'editor.worker': './vscode/out-monaco-editor-core/esm/vs/editor/editor.worker.js',
|
||||
'json.worker': 'monaco-json/release/esm/json.worker',
|
||||
'css.worker': 'monaco-css/release/esm/css.worker',
|
||||
'html.worker': 'monaco-html/release/esm/html.worker',
|
||||
'ts.worker': 'monaco-typescript/release/esm/ts.worker'
|
||||
},
|
||||
output: {
|
||||
globalObject: 'self',
|
||||
filename: '[name].bundle.js',
|
||||
path: path.resolve(__dirname, '../dist')
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ['style-loader', 'css-loader']
|
||||
},
|
||||
{
|
||||
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]',
|
||||
outputPath: 'fonts/'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
resolve: {
|
||||
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': path.resolve(
|
||||
__dirname,
|
||||
'../vscode/out-monaco-editor-core/esm/vs/editor/editor.main.js'
|
||||
)
|
||||
}
|
||||
},
|
||||
stats: {
|
||||
all: false,
|
||||
modules: true,
|
||||
errors: true,
|
||||
warnings: true,
|
||||
// our additional options
|
||||
moduleTrace: true,
|
||||
errorDetails: true,
|
||||
chunks: true
|
||||
}
|
||||
};
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,87 +1,85 @@
|
||||
(function () {
|
||||
|
||||
var METADATA = {
|
||||
CORE: {
|
||||
paths: {
|
||||
src: '/vscode/out/vs',
|
||||
'npm/dev': 'node_modules/monaco-editor-core/dev/vs',
|
||||
'npm/min': 'node_modules/monaco-editor-core/min/vs',
|
||||
built: '/vscode/out-monaco-editor-core/min/vs',
|
||||
releaseDev: 'release/dev/vs',
|
||||
releaseMin: 'release/min/vs',
|
||||
}
|
||||
},
|
||||
PLUGINS: [
|
||||
{
|
||||
name: 'monaco-typescript',
|
||||
contrib: 'vs/language/typescript/monaco.contribution',
|
||||
modulePrefix: 'vs/language/typescript',
|
||||
thirdPartyNotices: 'node_modules/monaco-typescript/ThirdPartyNotices.txt',
|
||||
paths: {
|
||||
// use ./ to indicate it is relative to the repository root
|
||||
src: './monaco-typescript/release/dev',
|
||||
'npm/dev': 'node_modules/monaco-typescript/release/dev',
|
||||
'npm/min': 'node_modules/monaco-typescript/release/min',
|
||||
esm: 'node_modules/monaco-typescript/release/esm',
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'monaco-css',
|
||||
contrib: 'vs/language/css/monaco.contribution',
|
||||
modulePrefix: 'vs/language/css',
|
||||
paths: {
|
||||
// use ./ to indicate it is relative to the repository root
|
||||
src: './monaco-css/release/dev',
|
||||
'npm/dev': 'node_modules/monaco-css/release/dev',
|
||||
'npm/min': 'node_modules/monaco-css/release/min',
|
||||
esm: 'node_modules/monaco-css/release/esm',
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'monaco-json',
|
||||
contrib: 'vs/language/json/monaco.contribution',
|
||||
modulePrefix: 'vs/language/json',
|
||||
paths: {
|
||||
// use ./ to indicate it is relative to the repository root
|
||||
src: './monaco-json/release/dev',
|
||||
'npm/dev': 'node_modules/monaco-json/release/dev',
|
||||
'npm/min': 'node_modules/monaco-json/release/min',
|
||||
esm: 'node_modules/monaco-json/release/esm',
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'monaco-html',
|
||||
contrib: 'vs/language/html/monaco.contribution',
|
||||
modulePrefix: 'vs/language/html',
|
||||
thirdPartyNotices: 'node_modules/monaco-html/ThirdPartyNotices.txt',
|
||||
paths: {
|
||||
// use ./ to indicate it is relative to the repository root
|
||||
src: './monaco-html/release/dev',
|
||||
'npm/dev': 'node_modules/monaco-html/release/dev',
|
||||
'npm/min': 'node_modules/monaco-html/release/min',
|
||||
esm: 'node_modules/monaco-html/release/esm',
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'monaco-languages',
|
||||
contrib: 'vs/basic-languages/monaco.contribution',
|
||||
modulePrefix: 'vs/basic-languages',
|
||||
thirdPartyNotices: 'node_modules/monaco-languages/ThirdPartyNotices.txt',
|
||||
paths: {
|
||||
// use ./ to indicate it is relative to the repository root
|
||||
src: './monaco-languages/release/dev',
|
||||
'npm/dev': 'node_modules/monaco-languages/release/dev',
|
||||
'npm/min': 'node_modules/monaco-languages/release/min',
|
||||
esm: 'node_modules/monaco-languages/release/esm',
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
if (typeof exports !== 'undefined') {
|
||||
exports.METADATA = METADATA
|
||||
} else {
|
||||
self.METADATA = METADATA;
|
||||
}
|
||||
|
||||
})();
|
||||
(function () {
|
||||
var METADATA = {
|
||||
CORE: {
|
||||
paths: {
|
||||
src: '/vscode/out/vs',
|
||||
'npm/dev': 'node_modules/monaco-editor-core/dev/vs',
|
||||
'npm/min': 'node_modules/monaco-editor-core/min/vs',
|
||||
built: '/vscode/out-monaco-editor-core/min/vs',
|
||||
releaseDev: 'release/dev/vs',
|
||||
releaseMin: 'release/min/vs'
|
||||
}
|
||||
},
|
||||
PLUGINS: [
|
||||
{
|
||||
name: 'monaco-typescript',
|
||||
contrib: 'vs/language/typescript/monaco.contribution',
|
||||
modulePrefix: 'vs/language/typescript',
|
||||
thirdPartyNotices: 'node_modules/monaco-typescript/ThirdPartyNotices.txt',
|
||||
paths: {
|
||||
// use ./ to indicate it is relative to the repository root
|
||||
src: './monaco-typescript/release/dev',
|
||||
'npm/dev': 'node_modules/monaco-typescript/release/dev',
|
||||
'npm/min': 'node_modules/monaco-typescript/release/min',
|
||||
esm: 'node_modules/monaco-typescript/release/esm'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'monaco-css',
|
||||
contrib: 'vs/language/css/monaco.contribution',
|
||||
modulePrefix: 'vs/language/css',
|
||||
paths: {
|
||||
// use ./ to indicate it is relative to the repository root
|
||||
src: './monaco-css/release/dev',
|
||||
'npm/dev': 'node_modules/monaco-css/release/dev',
|
||||
'npm/min': 'node_modules/monaco-css/release/min',
|
||||
esm: 'node_modules/monaco-css/release/esm'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'monaco-json',
|
||||
contrib: 'vs/language/json/monaco.contribution',
|
||||
modulePrefix: 'vs/language/json',
|
||||
paths: {
|
||||
// use ./ to indicate it is relative to the repository root
|
||||
src: './monaco-json/release/dev',
|
||||
'npm/dev': 'node_modules/monaco-json/release/dev',
|
||||
'npm/min': 'node_modules/monaco-json/release/min',
|
||||
esm: 'node_modules/monaco-json/release/esm'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'monaco-html',
|
||||
contrib: 'vs/language/html/monaco.contribution',
|
||||
modulePrefix: 'vs/language/html',
|
||||
thirdPartyNotices: 'node_modules/monaco-html/ThirdPartyNotices.txt',
|
||||
paths: {
|
||||
// use ./ to indicate it is relative to the repository root
|
||||
src: './monaco-html/release/dev',
|
||||
'npm/dev': 'node_modules/monaco-html/release/dev',
|
||||
'npm/min': 'node_modules/monaco-html/release/min',
|
||||
esm: 'node_modules/monaco-html/release/esm'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'monaco-languages',
|
||||
contrib: 'vs/basic-languages/monaco.contribution',
|
||||
modulePrefix: 'vs/basic-languages',
|
||||
thirdPartyNotices: 'node_modules/monaco-languages/ThirdPartyNotices.txt',
|
||||
paths: {
|
||||
// use ./ to indicate it is relative to the repository root
|
||||
src: './monaco-languages/release/dev',
|
||||
'npm/dev': 'node_modules/monaco-languages/release/dev',
|
||||
'npm/min': 'node_modules/monaco-languages/release/min',
|
||||
esm: 'node_modules/monaco-languages/release/esm'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
if (typeof exports !== 'undefined') {
|
||||
exports.METADATA = METADATA;
|
||||
} else {
|
||||
self.METADATA = METADATA;
|
||||
}
|
||||
})();
|
||||
|
||||
@ -1,35 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
#container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.dev-setup-control {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container"></div>
|
||||
<script src="../../metadata.js"></script>
|
||||
<script src="../dev-setup.js"></script>
|
||||
<script src="iframe.js"></script>
|
||||
</body>
|
||||
.dev-setup-control {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container"></div>
|
||||
<script src="../../metadata.js"></script>
|
||||
<script src="../dev-setup.js"></script>
|
||||
<script src="iframe.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
const init = () => {
|
||||
loadEditor(function() {
|
||||
// create the editor
|
||||
const target = document.getElementById('container');
|
||||
const editor = monaco.editor.create(target, { language: 'html' });
|
||||
loadEditor(function () {
|
||||
// create the editor
|
||||
const target = document.getElementById('container');
|
||||
const editor = monaco.editor.create(target, { language: 'html' });
|
||||
|
||||
// load some sample data
|
||||
(async () => {
|
||||
const response = await fetch('https://microsoft.github.io/monaco-editor/');
|
||||
const html = await response.text();
|
||||
editor.getModel().setValue(html);
|
||||
})();
|
||||
});
|
||||
// load some sample data
|
||||
(async () => {
|
||||
const response = await fetch('https://microsoft.github.io/monaco-editor/');
|
||||
const html = await response.text();
|
||||
editor.getModel().setValue(html);
|
||||
})();
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
if (!window.innerWidth || !window.innerHeight) {
|
||||
window.addEventListener('resize', init, { once: true });
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
if (!window.innerWidth || !window.innerHeight) {
|
||||
window.addEventListener('resize', init, { once: true });
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,42 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script type="module">
|
||||
class MonacoEditorElement extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.style = 'display: block;';
|
||||
const shadow = this.attachShadow({ mode: 'open' });
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.src = new URL('iframe.html?editor=src', import.meta.url).href;
|
||||
iframe.style = `width: 100%; height: 100%;`;
|
||||
shadow.appendChild(iframe);
|
||||
}
|
||||
}
|
||||
<head>
|
||||
<script type="module">
|
||||
class MonacoEditorElement extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.style = 'display: block;';
|
||||
const shadow = this.attachShadow({ mode: 'open' });
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.src = new URL('iframe.html?editor=src', import.meta.url).href;
|
||||
iframe.style = `width: 100%; height: 100%;`;
|
||||
shadow.appendChild(iframe);
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('monaco-editor', MonacoEditorElement);
|
||||
</script>
|
||||
<style>
|
||||
section {
|
||||
margin: 80px;
|
||||
}
|
||||
customElements.define('monaco-editor', MonacoEditorElement);
|
||||
</script>
|
||||
<style>
|
||||
section {
|
||||
margin: 80px;
|
||||
}
|
||||
|
||||
iframe,
|
||||
monaco-editor {
|
||||
width: 640px;
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section>
|
||||
<h1>Monaco in a shadowRoot + iframe context</h1>
|
||||
<monaco-editor></monaco-editor>
|
||||
</section>
|
||||
<hr>
|
||||
<section>
|
||||
<h1>Monaco in an iframe context</h1>
|
||||
<iframe src="iframe.html?editor=src"></iframe>
|
||||
</section>
|
||||
</body>
|
||||
iframe,
|
||||
monaco-editor {
|
||||
width: 640px;
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section>
|
||||
<h1>Monaco in a shadowRoot + iframe context</h1>
|
||||
<monaco-editor></monaco-editor>
|
||||
</section>
|
||||
<hr />
|
||||
<section>
|
||||
<h1>Monaco in an iframe context</h1>
|
||||
<iframe src="iframe.html?editor=src"></iframe>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,35 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.dev-setup-control {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container"></div>
|
||||
<script src="../../metadata.js"></script>
|
||||
<script src="../dev-setup.js"></script>
|
||||
<script src="iframe.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.dev-setup-control {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container"></div>
|
||||
<script src="../../metadata.js"></script>
|
||||
<script src="../dev-setup.js"></script>
|
||||
<script src="iframe.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
const init = () => {
|
||||
loadEditor(function() {
|
||||
// create the editor
|
||||
const target = document.getElementById('container');
|
||||
const editor = monaco.editor.create(target, { language: 'html' });
|
||||
loadEditor(function () {
|
||||
// create the editor
|
||||
const target = document.getElementById('container');
|
||||
const editor = monaco.editor.create(target, { language: 'html' });
|
||||
|
||||
// load some sample data
|
||||
(async () => {
|
||||
const response = await fetch('https://microsoft.github.io/monaco-editor/');
|
||||
const html = await response.text();
|
||||
editor.getModel().setValue(html);
|
||||
})();
|
||||
});
|
||||
// load some sample data
|
||||
(async () => {
|
||||
const response = await fetch('https://microsoft.github.io/monaco-editor/');
|
||||
const html = await response.text();
|
||||
editor.getModel().setValue(html);
|
||||
})();
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
if (!window.innerWidth || !window.innerHeight) {
|
||||
window.addEventListener('resize', init, { once: true });
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
if (!window.innerWidth || !window.innerHeight) {
|
||||
window.addEventListener('resize', init, { once: true });
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head> </head>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,54 +1,54 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h2>Colorize example</h2>
|
||||
|
||||
<pre id="code" data-lang="text/css" style="width:500px;">
|
||||
/* Some example CSS */
|
||||
|
||||
@import url("something.css");
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 3em 6em;
|
||||
font-family: tahoma, arial, sans-serif;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#navigation a {
|
||||
font-weight: bold;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.7em;
|
||||
}
|
||||
|
||||
h1:before, h2:before {
|
||||
content: "some contents";
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: courier, monospace;
|
||||
font-size: 80%;
|
||||
color: #418A8A;
|
||||
}
|
||||
</pre>
|
||||
|
||||
<script src="../metadata.js"></script>
|
||||
<script src="dev-setup.js"></script>
|
||||
<script>
|
||||
loadEditor(function() {
|
||||
monaco.editor.colorizeElement(document.getElementById('code'));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
</head>
|
||||
<body>
|
||||
<h2>Colorize example</h2>
|
||||
|
||||
<pre id="code" data-lang="text/css" style="width: 500px">
|
||||
/* Some example CSS */
|
||||
|
||||
@import url("something.css");
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 3em 6em;
|
||||
font-family: tahoma, arial, sans-serif;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#navigation a {
|
||||
font-weight: bold;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.7em;
|
||||
}
|
||||
|
||||
h1:before, h2:before {
|
||||
content: "some contents";
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: courier, monospace;
|
||||
font-size: 80%;
|
||||
color: #418A8A;
|
||||
}
|
||||
</pre
|
||||
>
|
||||
|
||||
<script src="../metadata.js"></script>
|
||||
<script src="dev-setup.js"></script>
|
||||
<script>
|
||||
loadEditor(function () {
|
||||
monaco.editor.colorizeElement(document.getElementById('code'));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,26 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<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>
|
||||
|
||||
<script src="../metadata.js"></script>
|
||||
<script src="dev-setup.js"></script>
|
||||
<script>
|
||||
loadEditor(function() {
|
||||
monaco.editor.create(document.getElementById('container'), {
|
||||
value: document.documentElement.innerHTML,
|
||||
language: 'css'
|
||||
});
|
||||
}, 'http://localhost:8088');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
<script src="../metadata.js"></script>
|
||||
<script src="dev-setup.js"></script>
|
||||
<script>
|
||||
loadEditor(function () {
|
||||
monaco.editor.create(document.getElementById('container'), {
|
||||
value: document.documentElement.innerHTML,
|
||||
language: 'css'
|
||||
});
|
||||
}, 'http://localhost:8088');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,33 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<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>
|
||||
|
||||
<script src="../metadata.js"></script>
|
||||
<script src="dev-setup.js"></script>
|
||||
<script>
|
||||
window.MonacoEnvironment = {
|
||||
getWorkerUrl: function() {
|
||||
return 'cross-origin-worker-proxy.js#http://localhost:8088' + RESOLVED_CORE_PATH;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<script>
|
||||
loadEditor(function() {
|
||||
monaco.editor.create(document.getElementById('container'), {
|
||||
value: document.documentElement.innerHTML,
|
||||
language: 'css'
|
||||
});
|
||||
}, 'http://localhost:8088');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
<script src="../metadata.js"></script>
|
||||
<script src="dev-setup.js"></script>
|
||||
<script>
|
||||
window.MonacoEnvironment = {
|
||||
getWorkerUrl: function () {
|
||||
return 'cross-origin-worker-proxy.js#http://localhost:8088' + RESOLVED_CORE_PATH;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<script>
|
||||
loadEditor(function () {
|
||||
monaco.editor.create(document.getElementById('container'), {
|
||||
value: document.documentElement.innerHTML,
|
||||
language: 'css'
|
||||
});
|
||||
}, 'http://localhost:8088');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
var baseUrl = self.location.hash;
|
||||
baseUrl = baseUrl.replace(/^#/, '');
|
||||
baseUrl = baseUrl.replace(/vs$/, '');
|
||||
|
||||
console.log('WORKER BASE_URL: ' + baseUrl);
|
||||
|
||||
self.MonacoEnvironment = {
|
||||
baseUrl: baseUrl
|
||||
};
|
||||
importScripts(baseUrl + 'vs/base/worker/workerMain.js');
|
||||
var baseUrl = self.location.hash;
|
||||
baseUrl = baseUrl.replace(/^#/, '');
|
||||
baseUrl = baseUrl.replace(/vs$/, '');
|
||||
|
||||
console.log('WORKER BASE_URL: ' + baseUrl);
|
||||
|
||||
self.MonacoEnvironment = {
|
||||
baseUrl: baseUrl
|
||||
};
|
||||
importScripts(baseUrl + 'vs/base/worker/workerMain.js');
|
||||
|
||||
@ -1,204 +1,237 @@
|
||||
(function() {
|
||||
|
||||
let IS_FILE_PROTOCOL = (window.location.protocol === 'file:');
|
||||
let DIRNAME = null;
|
||||
if (IS_FILE_PROTOCOL) {
|
||||
let port = window.location.port;
|
||||
if (port.length > 0) {
|
||||
port = ':' + port;
|
||||
}
|
||||
DIRNAME = window.location.protocol + '//' + window.location.hostname + port + window.location.pathname.substr(0, window.location.pathname.lastIndexOf('/'));
|
||||
|
||||
let bases = document.getElementsByTagName('base');
|
||||
if (bases.length > 0) {
|
||||
DIRNAME = DIRNAME + '/' + bases[0].getAttribute('href');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let LOADER_OPTS = (function() {
|
||||
function parseQueryString() {
|
||||
let str = window.location.search;
|
||||
str = str.replace(/^\?/, '');
|
||||
let pieces = str.split(/&/);
|
||||
let result = {};
|
||||
pieces.forEach(function(piece) {
|
||||
let config = piece.split(/=/);
|
||||
result[config[0]] = config[1];
|
||||
});
|
||||
return result;
|
||||
}
|
||||
let overwrites = parseQueryString();
|
||||
let result = {};
|
||||
result['editor'] = overwrites['editor'] || 'npm/dev';
|
||||
METADATA.PLUGINS.map(function(plugin) {
|
||||
result[plugin.name] = overwrites[plugin.name] || 'npm/dev';
|
||||
});
|
||||
return result;
|
||||
})();
|
||||
function toHREF(search) {
|
||||
let port = window.location.port;
|
||||
if (port.length > 0) {
|
||||
port = ':' + port;
|
||||
}
|
||||
return window.location.protocol + '//' + window.location.hostname + port + window.location.pathname + search + window.location.hash;
|
||||
}
|
||||
|
||||
|
||||
function Component(name, modulePrefix, paths, contrib) {
|
||||
this.name = name;
|
||||
this.modulePrefix = modulePrefix;
|
||||
this.paths = paths;
|
||||
this.contrib = contrib;
|
||||
this.selectedPath = LOADER_OPTS[name];
|
||||
}
|
||||
Component.prototype.isRelease = function() {
|
||||
return /release/.test(this.selectedPath);
|
||||
};
|
||||
Component.prototype.getResolvedPath = function(PATH_PREFIX) {
|
||||
let resolvedPath = this.paths[this.selectedPath];
|
||||
if (/\.\//.test(resolvedPath)) {
|
||||
// starts with ./ => treat as relative to repo root
|
||||
if (IS_FILE_PROTOCOL) {
|
||||
resolvedPath = DIRNAME + '/../' + resolvedPath;
|
||||
} else {
|
||||
resolvedPath = PATH_PREFIX + '/monaco-editor/' + resolvedPath;
|
||||
}
|
||||
} else if (this.selectedPath === 'npm/dev' || this.selectedPath === 'npm/min' || this.isRelease()) {
|
||||
if (IS_FILE_PROTOCOL) {
|
||||
resolvedPath = DIRNAME + '/../' + resolvedPath;
|
||||
} else {
|
||||
resolvedPath = PATH_PREFIX + '/monaco-editor/' + resolvedPath;
|
||||
}
|
||||
} else {
|
||||
if (IS_FILE_PROTOCOL) {
|
||||
resolvedPath = DIRNAME + '/../..' + resolvedPath;
|
||||
} else {
|
||||
resolvedPath = PATH_PREFIX + resolvedPath;
|
||||
}
|
||||
}
|
||||
return resolvedPath;
|
||||
};
|
||||
Component.prototype.generateLoaderConfig = function(dest, PATH_PREFIX) {
|
||||
dest[this.modulePrefix] = this.getResolvedPath(PATH_PREFIX);
|
||||
};
|
||||
Component.prototype.generateUrlForPath = function(pathName) {
|
||||
let NEW_LOADER_OPTS = {};
|
||||
Object.keys(LOADER_OPTS).forEach(function(key) {
|
||||
NEW_LOADER_OPTS[key] = (LOADER_OPTS[key] === 'npm/dev' ? undefined : LOADER_OPTS[key]);
|
||||
});
|
||||
NEW_LOADER_OPTS[this.name] = (pathName === 'npm/dev' ? undefined : pathName);
|
||||
|
||||
let search = Object.keys(NEW_LOADER_OPTS).map(function(key) {
|
||||
let value = NEW_LOADER_OPTS[key];
|
||||
if (value) {
|
||||
return key + '=' + value;
|
||||
}
|
||||
return '';
|
||||
}).filter(function(assignment) { return !!assignment; }).join('&');
|
||||
if (search.length > 0) {
|
||||
search = '?' + search;
|
||||
}
|
||||
return toHREF(search);
|
||||
};
|
||||
Component.prototype.renderLoadingOptions = function() {
|
||||
return '<strong style="width:130px;display:inline-block;">' + this.name + '</strong>:   ' + Object.keys(this.paths).map(function(pathName) {
|
||||
if (pathName === this.selectedPath) {
|
||||
return '<strong>' + pathName + '</strong>';
|
||||
}
|
||||
return '<a href="' + this.generateUrlForPath(pathName) + '">' + pathName + '</a>';
|
||||
}.bind(this)).join('   ');
|
||||
};
|
||||
|
||||
|
||||
let RESOLVED_CORE = new Component('editor', 'vs', METADATA.CORE.paths);
|
||||
self.RESOLVED_CORE_PATH = RESOLVED_CORE.getResolvedPath('');
|
||||
let RESOLVED_PLUGINS = METADATA.PLUGINS.map(function(plugin) {
|
||||
return new Component(plugin.name, plugin.modulePrefix, plugin.paths, plugin.contrib);
|
||||
});
|
||||
METADATA = null;
|
||||
|
||||
|
||||
function loadScript(path, callback) {
|
||||
let script = document.createElement('script');
|
||||
script.onload = callback;
|
||||
script.async = true;
|
||||
script.type = 'text/javascript';
|
||||
script.src = path;
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
|
||||
|
||||
(function() {
|
||||
let allComponents = [RESOLVED_CORE];
|
||||
if (!RESOLVED_CORE.isRelease()) {
|
||||
allComponents = allComponents.concat(RESOLVED_PLUGINS);
|
||||
}
|
||||
|
||||
let div = document.createElement('div');
|
||||
div.className = 'dev-setup-control'
|
||||
div.style.position = 'fixed';
|
||||
div.style.top = 0;
|
||||
div.style.right = 0;
|
||||
div.style.background = 'lightgray';
|
||||
div.style.padding = '5px 20px 5px 5px';
|
||||
div.style.zIndex = '1000';
|
||||
|
||||
div.innerHTML = '<ul><li>' + allComponents.map(function(component) { return component.renderLoadingOptions(); }).join('</li><li>') + '</li></ul>';
|
||||
|
||||
document.body.appendChild(div);
|
||||
|
||||
let aElements = document.getElementsByTagName('a');
|
||||
for (let i = 0; i < aElements.length; i++) {
|
||||
let aElement = aElements[i];
|
||||
if (aElement.className === 'loading-opts') {
|
||||
aElement.href += window.location.search
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
self.getCodiconPath = function(PATH_PREFIX) {
|
||||
PATH_PREFIX = PATH_PREFIX || '';
|
||||
const result = RESOLVED_CORE.getResolvedPath(PATH_PREFIX);
|
||||
return result + '/base/browser/ui/codicons/codicon/codicon.ttf';
|
||||
};
|
||||
|
||||
|
||||
self.loadEditor = function(callback, PATH_PREFIX) {
|
||||
PATH_PREFIX = PATH_PREFIX || '';
|
||||
|
||||
loadScript(RESOLVED_CORE.getResolvedPath(PATH_PREFIX) + '/loader.js', function() {
|
||||
let loaderPathsConfig = {};
|
||||
if (!RESOLVED_CORE.isRelease()) {
|
||||
RESOLVED_PLUGINS.forEach(function(plugin) {
|
||||
plugin.generateLoaderConfig(loaderPathsConfig, PATH_PREFIX);
|
||||
});
|
||||
}
|
||||
RESOLVED_CORE.generateLoaderConfig(loaderPathsConfig, PATH_PREFIX);
|
||||
|
||||
console.log('LOADER CONFIG: ');
|
||||
console.log(JSON.stringify(loaderPathsConfig, null, '\t'));
|
||||
|
||||
require.config({
|
||||
paths: loaderPathsConfig,
|
||||
// 'vs/nls' : {
|
||||
// availableLanguages: {
|
||||
// '*': 'de'
|
||||
// }
|
||||
// }
|
||||
});
|
||||
|
||||
require(['vs/editor/editor.main'], function() {
|
||||
if (!RESOLVED_CORE.isRelease()) {
|
||||
// At this point we've loaded the monaco-editor-core
|
||||
require(RESOLVED_PLUGINS.map(function(plugin) { return plugin.contrib; }), function() {
|
||||
// At this point we've loaded all the plugins
|
||||
callback();
|
||||
});
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
})();
|
||||
(function () {
|
||||
let IS_FILE_PROTOCOL = window.location.protocol === 'file:';
|
||||
let DIRNAME = null;
|
||||
if (IS_FILE_PROTOCOL) {
|
||||
let port = window.location.port;
|
||||
if (port.length > 0) {
|
||||
port = ':' + port;
|
||||
}
|
||||
DIRNAME =
|
||||
window.location.protocol +
|
||||
'//' +
|
||||
window.location.hostname +
|
||||
port +
|
||||
window.location.pathname.substr(0, window.location.pathname.lastIndexOf('/'));
|
||||
|
||||
let bases = document.getElementsByTagName('base');
|
||||
if (bases.length > 0) {
|
||||
DIRNAME = DIRNAME + '/' + bases[0].getAttribute('href');
|
||||
}
|
||||
}
|
||||
|
||||
let LOADER_OPTS = (function () {
|
||||
function parseQueryString() {
|
||||
let str = window.location.search;
|
||||
str = str.replace(/^\?/, '');
|
||||
let pieces = str.split(/&/);
|
||||
let result = {};
|
||||
pieces.forEach(function (piece) {
|
||||
let config = piece.split(/=/);
|
||||
result[config[0]] = config[1];
|
||||
});
|
||||
return result;
|
||||
}
|
||||
let overwrites = parseQueryString();
|
||||
let result = {};
|
||||
result['editor'] = overwrites['editor'] || 'npm/dev';
|
||||
METADATA.PLUGINS.map(function (plugin) {
|
||||
result[plugin.name] = overwrites[plugin.name] || 'npm/dev';
|
||||
});
|
||||
return result;
|
||||
})();
|
||||
function toHREF(search) {
|
||||
let port = window.location.port;
|
||||
if (port.length > 0) {
|
||||
port = ':' + port;
|
||||
}
|
||||
return (
|
||||
window.location.protocol +
|
||||
'//' +
|
||||
window.location.hostname +
|
||||
port +
|
||||
window.location.pathname +
|
||||
search +
|
||||
window.location.hash
|
||||
);
|
||||
}
|
||||
|
||||
function Component(name, modulePrefix, paths, contrib) {
|
||||
this.name = name;
|
||||
this.modulePrefix = modulePrefix;
|
||||
this.paths = paths;
|
||||
this.contrib = contrib;
|
||||
this.selectedPath = LOADER_OPTS[name];
|
||||
}
|
||||
Component.prototype.isRelease = function () {
|
||||
return /release/.test(this.selectedPath);
|
||||
};
|
||||
Component.prototype.getResolvedPath = function (PATH_PREFIX) {
|
||||
let resolvedPath = this.paths[this.selectedPath];
|
||||
if (/\.\//.test(resolvedPath)) {
|
||||
// starts with ./ => treat as relative to repo root
|
||||
if (IS_FILE_PROTOCOL) {
|
||||
resolvedPath = DIRNAME + '/../' + resolvedPath;
|
||||
} else {
|
||||
resolvedPath = PATH_PREFIX + '/monaco-editor/' + resolvedPath;
|
||||
}
|
||||
} else if (
|
||||
this.selectedPath === 'npm/dev' ||
|
||||
this.selectedPath === 'npm/min' ||
|
||||
this.isRelease()
|
||||
) {
|
||||
if (IS_FILE_PROTOCOL) {
|
||||
resolvedPath = DIRNAME + '/../' + resolvedPath;
|
||||
} else {
|
||||
resolvedPath = PATH_PREFIX + '/monaco-editor/' + resolvedPath;
|
||||
}
|
||||
} else {
|
||||
if (IS_FILE_PROTOCOL) {
|
||||
resolvedPath = DIRNAME + '/../..' + resolvedPath;
|
||||
} else {
|
||||
resolvedPath = PATH_PREFIX + resolvedPath;
|
||||
}
|
||||
}
|
||||
return resolvedPath;
|
||||
};
|
||||
Component.prototype.generateLoaderConfig = function (dest, PATH_PREFIX) {
|
||||
dest[this.modulePrefix] = this.getResolvedPath(PATH_PREFIX);
|
||||
};
|
||||
Component.prototype.generateUrlForPath = function (pathName) {
|
||||
let NEW_LOADER_OPTS = {};
|
||||
Object.keys(LOADER_OPTS).forEach(function (key) {
|
||||
NEW_LOADER_OPTS[key] = LOADER_OPTS[key] === 'npm/dev' ? undefined : LOADER_OPTS[key];
|
||||
});
|
||||
NEW_LOADER_OPTS[this.name] = pathName === 'npm/dev' ? undefined : pathName;
|
||||
|
||||
let search = Object.keys(NEW_LOADER_OPTS)
|
||||
.map(function (key) {
|
||||
let value = NEW_LOADER_OPTS[key];
|
||||
if (value) {
|
||||
return key + '=' + value;
|
||||
}
|
||||
return '';
|
||||
})
|
||||
.filter(function (assignment) {
|
||||
return !!assignment;
|
||||
})
|
||||
.join('&');
|
||||
if (search.length > 0) {
|
||||
search = '?' + search;
|
||||
}
|
||||
return toHREF(search);
|
||||
};
|
||||
Component.prototype.renderLoadingOptions = function () {
|
||||
return (
|
||||
'<strong style="width:130px;display:inline-block;">' +
|
||||
this.name +
|
||||
'</strong>:   ' +
|
||||
Object.keys(this.paths)
|
||||
.map(
|
||||
function (pathName) {
|
||||
if (pathName === this.selectedPath) {
|
||||
return '<strong>' + pathName + '</strong>';
|
||||
}
|
||||
return '<a href="' + this.generateUrlForPath(pathName) + '">' + pathName + '</a>';
|
||||
}.bind(this)
|
||||
)
|
||||
.join('   ')
|
||||
);
|
||||
};
|
||||
|
||||
let RESOLVED_CORE = new Component('editor', 'vs', METADATA.CORE.paths);
|
||||
self.RESOLVED_CORE_PATH = RESOLVED_CORE.getResolvedPath('');
|
||||
let RESOLVED_PLUGINS = METADATA.PLUGINS.map(function (plugin) {
|
||||
return new Component(plugin.name, plugin.modulePrefix, plugin.paths, plugin.contrib);
|
||||
});
|
||||
METADATA = null;
|
||||
|
||||
function loadScript(path, callback) {
|
||||
let script = document.createElement('script');
|
||||
script.onload = callback;
|
||||
script.async = true;
|
||||
script.type = 'text/javascript';
|
||||
script.src = path;
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
|
||||
(function () {
|
||||
let allComponents = [RESOLVED_CORE];
|
||||
if (!RESOLVED_CORE.isRelease()) {
|
||||
allComponents = allComponents.concat(RESOLVED_PLUGINS);
|
||||
}
|
||||
|
||||
let div = document.createElement('div');
|
||||
div.className = 'dev-setup-control';
|
||||
div.style.position = 'fixed';
|
||||
div.style.top = 0;
|
||||
div.style.right = 0;
|
||||
div.style.background = 'lightgray';
|
||||
div.style.padding = '5px 20px 5px 5px';
|
||||
div.style.zIndex = '1000';
|
||||
|
||||
div.innerHTML =
|
||||
'<ul><li>' +
|
||||
allComponents
|
||||
.map(function (component) {
|
||||
return component.renderLoadingOptions();
|
||||
})
|
||||
.join('</li><li>') +
|
||||
'</li></ul>';
|
||||
|
||||
document.body.appendChild(div);
|
||||
|
||||
let aElements = document.getElementsByTagName('a');
|
||||
for (let i = 0; i < aElements.length; i++) {
|
||||
let aElement = aElements[i];
|
||||
if (aElement.className === 'loading-opts') {
|
||||
aElement.href += window.location.search;
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
self.getCodiconPath = function (PATH_PREFIX) {
|
||||
PATH_PREFIX = PATH_PREFIX || '';
|
||||
const result = RESOLVED_CORE.getResolvedPath(PATH_PREFIX);
|
||||
return result + '/base/browser/ui/codicons/codicon/codicon.ttf';
|
||||
};
|
||||
|
||||
self.loadEditor = function (callback, PATH_PREFIX) {
|
||||
PATH_PREFIX = PATH_PREFIX || '';
|
||||
|
||||
loadScript(RESOLVED_CORE.getResolvedPath(PATH_PREFIX) + '/loader.js', function () {
|
||||
let loaderPathsConfig = {};
|
||||
if (!RESOLVED_CORE.isRelease()) {
|
||||
RESOLVED_PLUGINS.forEach(function (plugin) {
|
||||
plugin.generateLoaderConfig(loaderPathsConfig, PATH_PREFIX);
|
||||
});
|
||||
}
|
||||
RESOLVED_CORE.generateLoaderConfig(loaderPathsConfig, PATH_PREFIX);
|
||||
|
||||
console.log('LOADER CONFIG: ');
|
||||
console.log(JSON.stringify(loaderPathsConfig, null, '\t'));
|
||||
|
||||
require.config({
|
||||
paths: loaderPathsConfig
|
||||
// 'vs/nls' : {
|
||||
// availableLanguages: {
|
||||
// '*': 'de'
|
||||
// }
|
||||
// }
|
||||
});
|
||||
|
||||
require(['vs/editor/editor.main'], function () {
|
||||
if (!RESOLVED_CORE.isRelease()) {
|
||||
// At this point we've loaded the monaco-editor-core
|
||||
require(RESOLVED_PLUGINS.map(function (plugin) {
|
||||
return plugin.contrib;
|
||||
}), function () {
|
||||
// At this point we've loaded all the plugins
|
||||
callback();
|
||||
});
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
})();
|
||||
|
||||
@ -1,19 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="container" style="float:left;width:800px;height:450px;border: 1px solid grey"></div>
|
||||
<div style="clear:both"></div>
|
||||
|
||||
<script src="../metadata.js"></script>
|
||||
<script src="dev-setup.js"></script>
|
||||
<script>
|
||||
loadEditor(function() {
|
||||
require(['./diff'], function() {});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="container"
|
||||
style="float: left; width: 800px; height: 450px; border: 1px solid grey"
|
||||
></div>
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<script src="../metadata.js"></script>
|
||||
<script src="dev-setup.js"></script>
|
||||
<script>
|
||||
loadEditor(function () {
|
||||
require(['./diff'], function () {});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,454 +1,451 @@
|
||||
/// <reference path="../node_modules/monaco-editor-core/monaco.d.ts" />
|
||||
define(['require'], function (require) {
|
||||
|
||||
var container = document.getElementById('container');
|
||||
|
||||
var original = monaco.editor.createModel(getOriginalStr(), 'javascript');
|
||||
var modified = monaco.editor.createModel(getModifiedStr(), 'javascript');
|
||||
|
||||
var diffEditor = monaco.editor.createDiffEditor(container, {
|
||||
});
|
||||
|
||||
diffEditor.setModel({
|
||||
original: original,
|
||||
modified: modified
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
function getOriginalStr() {
|
||||
return [
|
||||
'/*',
|
||||
' © Microsoft. All rights reserved.',
|
||||
'',
|
||||
' This library is supported for use in Windows Tailored Apps only.',
|
||||
'',
|
||||
' Build: 6.2.8100.0',
|
||||
' Version: 0.5',
|
||||
'*/',
|
||||
'',
|
||||
'(function (global, undefined) {',
|
||||
' "use strict";',
|
||||
' undefinedVariable = {};',
|
||||
' undefinedVariable.prop = 5;',
|
||||
'',
|
||||
' function initializeProperties(target, members) {',
|
||||
' var keys = Object.keys(members);',
|
||||
' var properties;',
|
||||
' var i, len;',
|
||||
' for (i = 0, len = keys.length; i < len; i++) {',
|
||||
' var key = keys[i];',
|
||||
' var enumerable = key.charCodeAt(0) !== /*_*/95;',
|
||||
' var member = members[key];',
|
||||
' if (member && typeof member === \'object\') {',
|
||||
' if (member.value !== undefined || typeof member.get === \'function\' || typeof member.set === \'function\') {',
|
||||
' if (member.enumerable === undefined) {',
|
||||
' member.enumerable = enumerable;',
|
||||
' }',
|
||||
' properties = properties || {};',
|
||||
' properties[key] = member;',
|
||||
' continue;',
|
||||
' }',
|
||||
' }',
|
||||
' // These next lines will be deleted',
|
||||
' if (!enumerable) {',
|
||||
' properties = properties || {};',
|
||||
' properties[key] = { value: member, enumerable: enumerable, configurable: true, writable: true }',
|
||||
' continue;',
|
||||
' }',
|
||||
' target[key] = member;',
|
||||
' }',
|
||||
' if (properties) {',
|
||||
' Object.defineProperties(target, properties);',
|
||||
' }',
|
||||
' }',
|
||||
'',
|
||||
' (function (rootNamespace) {',
|
||||
'',
|
||||
' // Create the rootNamespace in the global namespace',
|
||||
' if (!global[rootNamespace]) {',
|
||||
' global[rootNamespace] = Object.create(Object.prototype);',
|
||||
' }',
|
||||
'',
|
||||
' // Cache the rootNamespace we just created in a local variable',
|
||||
' var _rootNamespace = global[rootNamespace];',
|
||||
' if (!_rootNamespace.Namespace) {',
|
||||
' _rootNamespace.Namespace = Object.create(Object.prototype);',
|
||||
' }',
|
||||
'',
|
||||
' function defineWithParent(parentNamespace, name, members) {',
|
||||
' /// <summary locid="1">',
|
||||
' /// Defines a new namespace with the specified name, under the specified parent namespace.',
|
||||
' /// </summary>',
|
||||
' /// <param name="parentNamespace" type="Object" locid="2">',
|
||||
' /// The parent namespace which will contain the new namespace.',
|
||||
' /// </param>',
|
||||
' /// <param name="name" type="String" locid="3">',
|
||||
' /// Name of the new namespace.',
|
||||
' /// </param>',
|
||||
' /// <param name="members" type="Object" locid="4">',
|
||||
' /// Members in the new namespace.',
|
||||
' /// </param>',
|
||||
' /// <returns locid="5">',
|
||||
' /// The newly defined namespace.',
|
||||
' /// </returns>',
|
||||
' var currentNamespace = parentNamespace,',
|
||||
' namespaceFragments = name.split(".");',
|
||||
'',
|
||||
' for (var i = 0, len = namespaceFragments.length; i < len; i++) {',
|
||||
' var namespaceName = namespaceFragments[i];',
|
||||
' if (!currentNamespace[namespaceName]) {',
|
||||
' Object.defineProperty(currentNamespace, namespaceName,',
|
||||
' { value: {}, writable: false, enumerable: true, configurable: true }',
|
||||
' );',
|
||||
' }',
|
||||
' currentNamespace = currentNamespace[namespaceName];',
|
||||
' }',
|
||||
'',
|
||||
' if (members) {',
|
||||
' initializeProperties(currentNamespace, members);',
|
||||
' }',
|
||||
'',
|
||||
' return currentNamespace;',
|
||||
' }',
|
||||
'',
|
||||
' function define(name, members) {',
|
||||
' /// <summary locid="6">',
|
||||
' /// Defines a new namespace with the specified name.',
|
||||
' /// </summary>',
|
||||
' /// <param name="name" type="String" locid="7">',
|
||||
' /// Name of the namespace. This could be a dot-separated nested name.',
|
||||
' /// </param>',
|
||||
' /// <param name="members" type="Object" locid="4">',
|
||||
' /// Members in the new namespace.',
|
||||
' /// </param>',
|
||||
' /// <returns locid="5">',
|
||||
' /// The newly defined namespace.',
|
||||
' /// </returns>',
|
||||
' return defineWithParent(global, name, members);',
|
||||
' }',
|
||||
'',
|
||||
' // Establish members of the "WinJS.Namespace" namespace',
|
||||
' Object.defineProperties(_rootNamespace.Namespace, {',
|
||||
'',
|
||||
' defineWithParent: { value: defineWithParent, writable: true, enumerable: true },',
|
||||
'',
|
||||
' define: { value: define, writable: true, enumerable: true }',
|
||||
'',
|
||||
' });',
|
||||
'',
|
||||
' })("WinJS");',
|
||||
'',
|
||||
' (function (WinJS) {',
|
||||
'',
|
||||
' function define(constructor, instanceMembers, staticMembers) {',
|
||||
' /// <summary locid="8">',
|
||||
' /// Defines a class using the given constructor and with the specified instance members.',
|
||||
' /// </summary>',
|
||||
' /// <param name="constructor" type="Function" locid="9">',
|
||||
' /// A constructor function that will be used to instantiate this class.',
|
||||
' /// </param>',
|
||||
' /// <param name="instanceMembers" type="Object" locid="10">',
|
||||
' /// The set of instance fields, properties and methods to be made available on the class.',
|
||||
' /// </param>',
|
||||
' /// <param name="staticMembers" type="Object" locid="11">',
|
||||
' /// The set of static fields, properties and methods to be made available on the class.',
|
||||
' /// </param>',
|
||||
' /// <returns type="Function" locid="12">',
|
||||
' /// The newly defined class.',
|
||||
' /// </returns>',
|
||||
' constructor = constructor || function () { };',
|
||||
' if (instanceMembers) {',
|
||||
' initializeProperties(constructor.prototype, instanceMembers);',
|
||||
' }',
|
||||
' if (staticMembers) {',
|
||||
' initializeProperties(constructor, staticMembers);',
|
||||
' }',
|
||||
' return constructor;',
|
||||
' }',
|
||||
'',
|
||||
' function derive(baseClass, constructor, instanceMembers, staticMembers) {',
|
||||
' /// <summary locid="13">',
|
||||
' /// Uses prototypal inheritance to create a sub-class based on the supplied baseClass parameter.',
|
||||
' /// </summary>',
|
||||
' /// <param name="baseClass" type="Function" locid="14">',
|
||||
' /// The class to inherit from.',
|
||||
' /// </param>',
|
||||
' /// <param name="constructor" type="Function" locid="9">',
|
||||
' /// A constructor function that will be used to instantiate this class.',
|
||||
' /// </param>',
|
||||
' /// <param name="instanceMembers" type="Object" locid="10">',
|
||||
' /// The set of instance fields, properties and methods to be made available on the class.',
|
||||
' /// </param>',
|
||||
' /// <param name="staticMembers" type="Object" locid="11">',
|
||||
' /// The set of static fields, properties and methods to be made available on the class.',
|
||||
' /// </param>',
|
||||
' /// <returns type="Function" locid="12">',
|
||||
' /// The newly defined class.',
|
||||
' /// </returns>',
|
||||
' if (baseClass) {',
|
||||
' constructor = constructor || function () { };',
|
||||
' var basePrototype = baseClass.prototype;',
|
||||
' constructor.prototype = Object.create(basePrototype);',
|
||||
' Object.defineProperty(constructor.prototype, "_super", { value: basePrototype });',
|
||||
' Object.defineProperty(constructor.prototype, "constructor", { value: constructor });',
|
||||
' if (instanceMembers) {',
|
||||
' initializeProperties(constructor.prototype, instanceMembers);',
|
||||
' }',
|
||||
' if (staticMembers) {',
|
||||
' initializeProperties(constructor, staticMembers);',
|
||||
' }',
|
||||
' return constructor;',
|
||||
' } else {',
|
||||
' return define(constructor, instanceMembers, staticMembers);',
|
||||
' }',
|
||||
' }',
|
||||
'',
|
||||
' function mix(constructor) {',
|
||||
' /// <summary locid="15">',
|
||||
' /// Defines a class using the given constructor and the union of the set of instance members',
|
||||
' /// specified by all the mixin objects. The mixin parameter list can be of variable length.',
|
||||
' /// </summary>',
|
||||
' /// <param name="constructor" locid="9">',
|
||||
' /// A constructor function that will be used to instantiate this class.',
|
||||
' /// </param>',
|
||||
' /// <returns locid="12">',
|
||||
' /// The newly defined class.',
|
||||
' /// </returns>',
|
||||
' constructor = constructor || function () { };',
|
||||
' var i, len;',
|
||||
' for (i = 0, len = arguments.length; i < len; i++) {',
|
||||
' initializeProperties(constructor.prototype, arguments[i]);',
|
||||
' }',
|
||||
' return constructor;',
|
||||
' }',
|
||||
'',
|
||||
' // Establish members of "WinJS.Class" namespace',
|
||||
' WinJS.Namespace.define("WinJS.Class", {',
|
||||
' define: define,',
|
||||
' derive: derive,',
|
||||
' mix: mix',
|
||||
' });',
|
||||
'',
|
||||
' })(WinJS);',
|
||||
'',
|
||||
'})(this);'
|
||||
].join('\n');
|
||||
}
|
||||
|
||||
function getModifiedStr() {
|
||||
return [
|
||||
'/*',
|
||||
' © Microsoft. All rights reserved.',
|
||||
'',
|
||||
' This library is supported for use in Windows Tailored Apps only.',
|
||||
'',
|
||||
' Build: 6.2.8100.0',
|
||||
' Version: 0.5',
|
||||
'*/',
|
||||
'',
|
||||
'// Here are some inserted lines',
|
||||
'// with some extra comments',
|
||||
'',
|
||||
'(function (global, undefined) {',
|
||||
' "use strict";',
|
||||
' var definedVariable = {};',
|
||||
' definedVariable.prop = 5;',
|
||||
'',
|
||||
' function initializeProperties(target, members) {',
|
||||
' var keys = Object.keys(members);',
|
||||
' var properties;',
|
||||
' var i, len;',
|
||||
' for (i = 0, len = keys.length; i < len; i++) {',
|
||||
' var key = keys[i];',
|
||||
' var enumerable = key.charCodeAt(0) !== /*_*/95;',
|
||||
' var member = members[key];',
|
||||
' if (member && typeof member === \'object\') {',
|
||||
' if (member.value !== undefined || typeof member.get === \'function\' || typeof member.set === \'function\') {',
|
||||
' if (member.enumerable === undefined) {',
|
||||
' member.enumerable = enumerable;',
|
||||
' }',
|
||||
' properties = properties || {};',
|
||||
' properties[key] = member;',
|
||||
' continue;',
|
||||
' }',
|
||||
' }',
|
||||
' target[key] = member;',
|
||||
' }',
|
||||
' if (properties) {',
|
||||
' Object.defineProperties(target, properties);',
|
||||
' }',
|
||||
' }',
|
||||
'',
|
||||
' (function (rootNamespace) {',
|
||||
'',
|
||||
' // Create the rootNamespace in the global namespace',
|
||||
' if (!global[rootNamespace]) {',
|
||||
' global[rootNamespace] = Object.create(Object.prototype);',
|
||||
' }',
|
||||
'',
|
||||
' // Cache the rootNamespace we just created in a local variable',
|
||||
' var _rootNamespace = global[rootNamespace];',
|
||||
' if (!_rootNamespace.Namespace) {',
|
||||
' _rootNamespace.Namespace = Object.create(Object.prototype);',
|
||||
' }',
|
||||
'',
|
||||
' function defineWithParent(parentNamespace, name, members) {',
|
||||
' /// <summary locid="1">',
|
||||
' /// Defines a new namespace with the specified name, under the specified parent namespace.',
|
||||
' /// </summary>',
|
||||
' /// <param name="parentNamespace" type="Object" locid="2">',
|
||||
' /// The parent namespace which will contain the new namespace.',
|
||||
' /// </param>',
|
||||
' /// <param name="name" type="String" locid="3">',
|
||||
' /// Name of the new namespace.',
|
||||
' /// </param>',
|
||||
' /// <param name="members" type="Object" locid="4">',
|
||||
' /// Members in the new namespace.',
|
||||
' /// </param>',
|
||||
' /// <returns locid="5">',
|
||||
' /// The newly defined namespace.',
|
||||
' /// </returns>',
|
||||
' var currentNamespace = parentNamespace,',
|
||||
' namespaceFragments = name.split(".");',
|
||||
'',
|
||||
' for (var i = 0, len = namespaceFragments.length; i < len; i++) {',
|
||||
' var namespaceName = namespaceFragments[i];',
|
||||
' if (!currentNamespace[namespaceName]) {',
|
||||
' Object.defineProperty(currentNamespace, namespaceName,',
|
||||
' { value: {}, writable: false, enumerable: true, configurable: true }',
|
||||
' );',
|
||||
' }',
|
||||
' currentNamespace = currentNamespace[namespaceName];',
|
||||
' }',
|
||||
'',
|
||||
' if (members) {',
|
||||
' initializeProperties(currentNamespace, members);',
|
||||
' }',
|
||||
'',
|
||||
' return currentNamespace;',
|
||||
' }',
|
||||
'',
|
||||
' function define(name, members) {',
|
||||
' /// <summary locid="6">',
|
||||
' /// Defines a new namespace with the specified name.',
|
||||
' /// </summary>',
|
||||
' /// <param name="name" type="String" locid="7">',
|
||||
' /// Name of the namespace. This could be a dot-separated nested name.',
|
||||
' /// </param>',
|
||||
' /// <param name="members" type="Object" locid="4">',
|
||||
' /// Members in the new namespace.',
|
||||
' /// </param>',
|
||||
' /// <returns locid="5">',
|
||||
' /// The newly defined namespace.',
|
||||
' /// </returns>',
|
||||
' return defineWithParent(global, name, members);',
|
||||
' }',
|
||||
'',
|
||||
' // Establish members of the "WinJS.Namespace" namespace',
|
||||
' Object.defineProperties(_rootNamespace.Namespace, {',
|
||||
'',
|
||||
' defineWithParent: { value: defineWithParent, writable: true, enumerable: true },',
|
||||
'',
|
||||
' define: { value: define, writable: true, enumerable: true }',
|
||||
'',
|
||||
' });',
|
||||
'',
|
||||
' })("WinJS");',
|
||||
'',
|
||||
' (function (WinJS) {',
|
||||
'',
|
||||
' function define(constructor, instanceMembers, staticMembers) {',
|
||||
' /// <summary locid="8">',
|
||||
' /// Defines a class using the given constructor and with the specified instance members.',
|
||||
' /// </summary>',
|
||||
' /// <param name="constructor" type="Function" locid="9">',
|
||||
' /// A constructor function that will be used to instantiate this class.',
|
||||
' /// </param>',
|
||||
' /// <param name="instanceMembers" type="Object" locid="10">',
|
||||
' /// The set of instance fields, properties and methods to be made available on the class.',
|
||||
' /// </param>',
|
||||
' /// <param name="staticMembers" type="Object" locid="11">',
|
||||
' /// The set of static fields, properties and methods to be made available on the class.',
|
||||
' /// </param>',
|
||||
' /// <returns type="Function" locid="12">',
|
||||
' /// The newly defined class.',
|
||||
' /// </returns>',
|
||||
' constructor = constructor || function () { };',
|
||||
' if (instanceMembers) {',
|
||||
' initializeProperties(constructor.prototype, instanceMembers);',
|
||||
' }',
|
||||
' if (staticMembers) {',
|
||||
' initializeProperties(constructor, staticMembers);',
|
||||
' }',
|
||||
' return constructor;',
|
||||
' }',
|
||||
'',
|
||||
' function derive(baseClass, constructor, instanceMembers, staticMembers) {',
|
||||
' /// <summary locid="13">',
|
||||
' /// Uses prototypal inheritance to create a sub-class based on the supplied baseClass parameter.',
|
||||
' /// </summary>',
|
||||
' /// <param name="baseClass" type="Function" locid="14">',
|
||||
' /// The class to inherit from.',
|
||||
' /// </param>',
|
||||
' /// <param name="constructor" type="Function" locid="9">',
|
||||
' /// A constructor function that will be used to instantiate this class.',
|
||||
' /// </param>',
|
||||
' /// <param name="instanceMembers" type="Object" locid="10">',
|
||||
' /// The set of instance fields, properties and methods to be made available on the class.',
|
||||
' /// </param>',
|
||||
' /// <param name="staticMembers" type="Object" locid="11">',
|
||||
' /// The set of static fields, properties and methods to be made available on the class.',
|
||||
' /// </param>',
|
||||
' /// <returns type="Function" locid="12">',
|
||||
' /// The newly defined class.',
|
||||
' /// </returns>',
|
||||
' if (baseClass) {',
|
||||
' constructor = constructor || function () { };',
|
||||
' var basePrototype = baseClass.prototype;',
|
||||
' constructor.prototype = Object.create(basePrototype);',
|
||||
' Object.defineProperty(constructor.prototype, "_super", { value: basePrototype });',
|
||||
' Object.defineProperty(constructor.prototype, "constructor", { value: constructor });',
|
||||
' if (instanceMembers) {',
|
||||
' initializeProperties(constructor.prototype, instanceMembers);',
|
||||
' }',
|
||||
' if (staticMembers) {',
|
||||
' initializeProperties(constructor, staticMembers);',
|
||||
' }',
|
||||
' return constructor;',
|
||||
' } else {',
|
||||
' return define(constructor, instanceMembers, staticMembers);',
|
||||
' }',
|
||||
' }',
|
||||
'',
|
||||
' function mix(constructor) {',
|
||||
' /// <summary locid="15">',
|
||||
' /// Defines a class using the given constructor and the union of the set of instance members',
|
||||
' /// specified by all the mixin objects. The mixin parameter list can be of variable length.',
|
||||
' /// </summary>',
|
||||
' /// <param name="constructor" locid="9">',
|
||||
' /// A constructor function that will be used to instantiate this class.',
|
||||
' /// </param>',
|
||||
' /// <returns locid="12">',
|
||||
' /// The newly defined class.',
|
||||
' /// </returns>',
|
||||
' constructor = constructor || function () { };',
|
||||
' var i, len;',
|
||||
' for (i = 0, len = arguments.length; i < len; i++) {',
|
||||
' initializeProperties(constructor.prototype, arguments[i]);',
|
||||
' }',
|
||||
' return constructor;',
|
||||
' }',
|
||||
'',
|
||||
' // Establish members of "WinJS.Class" namespace',
|
||||
' WinJS.Namespace.define("WinJS.Class", {',
|
||||
' define: define,',
|
||||
' derive: derive,',
|
||||
' mix: mix',
|
||||
' });',
|
||||
'',
|
||||
' })(WinJS);',
|
||||
'',
|
||||
'})(this);',
|
||||
].join('\n');
|
||||
}
|
||||
/// <reference path="../../node_modules/monaco-editor-core/monaco.d.ts" />
|
||||
define(['require'], function (require) {
|
||||
var container = document.getElementById('container');
|
||||
|
||||
var original = monaco.editor.createModel(getOriginalStr(), 'javascript');
|
||||
var modified = monaco.editor.createModel(getModifiedStr(), 'javascript');
|
||||
|
||||
var diffEditor = monaco.editor.createDiffEditor(container, {});
|
||||
|
||||
diffEditor.setModel({
|
||||
original: original,
|
||||
modified: modified
|
||||
});
|
||||
});
|
||||
|
||||
function getOriginalStr() {
|
||||
return [
|
||||
'/*',
|
||||
' © Microsoft. All rights reserved.',
|
||||
'',
|
||||
' This library is supported for use in Windows Tailored Apps only.',
|
||||
'',
|
||||
' Build: 6.2.8100.0',
|
||||
' Version: 0.5',
|
||||
'*/',
|
||||
'',
|
||||
'(function (global, undefined) {',
|
||||
' "use strict";',
|
||||
' undefinedVariable = {};',
|
||||
' undefinedVariable.prop = 5;',
|
||||
'',
|
||||
' function initializeProperties(target, members) {',
|
||||
' var keys = Object.keys(members);',
|
||||
' var properties;',
|
||||
' var i, len;',
|
||||
' for (i = 0, len = keys.length; i < len; i++) {',
|
||||
' var key = keys[i];',
|
||||
' var enumerable = key.charCodeAt(0) !== /*_*/95;',
|
||||
' var member = members[key];',
|
||||
" if (member && typeof member === 'object') {",
|
||||
" if (member.value !== undefined || typeof member.get === 'function' || typeof member.set === 'function') {",
|
||||
' if (member.enumerable === undefined) {',
|
||||
' member.enumerable = enumerable;',
|
||||
' }',
|
||||
' properties = properties || {};',
|
||||
' properties[key] = member;',
|
||||
' continue;',
|
||||
' }',
|
||||
' }',
|
||||
' // These next lines will be deleted',
|
||||
' if (!enumerable) {',
|
||||
' properties = properties || {};',
|
||||
' properties[key] = { value: member, enumerable: enumerable, configurable: true, writable: true }',
|
||||
' continue;',
|
||||
' }',
|
||||
' target[key] = member;',
|
||||
' }',
|
||||
' if (properties) {',
|
||||
' Object.defineProperties(target, properties);',
|
||||
' }',
|
||||
' }',
|
||||
'',
|
||||
' (function (rootNamespace) {',
|
||||
'',
|
||||
' // Create the rootNamespace in the global namespace',
|
||||
' if (!global[rootNamespace]) {',
|
||||
' global[rootNamespace] = Object.create(Object.prototype);',
|
||||
' }',
|
||||
'',
|
||||
' // Cache the rootNamespace we just created in a local variable',
|
||||
' var _rootNamespace = global[rootNamespace];',
|
||||
' if (!_rootNamespace.Namespace) {',
|
||||
' _rootNamespace.Namespace = Object.create(Object.prototype);',
|
||||
' }',
|
||||
'',
|
||||
' function defineWithParent(parentNamespace, name, members) {',
|
||||
' /// <summary locid="1">',
|
||||
' /// Defines a new namespace with the specified name, under the specified parent namespace.',
|
||||
' /// </summary>',
|
||||
' /// <param name="parentNamespace" type="Object" locid="2">',
|
||||
' /// The parent namespace which will contain the new namespace.',
|
||||
' /// </param>',
|
||||
' /// <param name="name" type="String" locid="3">',
|
||||
' /// Name of the new namespace.',
|
||||
' /// </param>',
|
||||
' /// <param name="members" type="Object" locid="4">',
|
||||
' /// Members in the new namespace.',
|
||||
' /// </param>',
|
||||
' /// <returns locid="5">',
|
||||
' /// The newly defined namespace.',
|
||||
' /// </returns>',
|
||||
' var currentNamespace = parentNamespace,',
|
||||
' namespaceFragments = name.split(".");',
|
||||
'',
|
||||
' for (var i = 0, len = namespaceFragments.length; i < len; i++) {',
|
||||
' var namespaceName = namespaceFragments[i];',
|
||||
' if (!currentNamespace[namespaceName]) {',
|
||||
' Object.defineProperty(currentNamespace, namespaceName,',
|
||||
' { value: {}, writable: false, enumerable: true, configurable: true }',
|
||||
' );',
|
||||
' }',
|
||||
' currentNamespace = currentNamespace[namespaceName];',
|
||||
' }',
|
||||
'',
|
||||
' if (members) {',
|
||||
' initializeProperties(currentNamespace, members);',
|
||||
' }',
|
||||
'',
|
||||
' return currentNamespace;',
|
||||
' }',
|
||||
'',
|
||||
' function define(name, members) {',
|
||||
' /// <summary locid="6">',
|
||||
' /// Defines a new namespace with the specified name.',
|
||||
' /// </summary>',
|
||||
' /// <param name="name" type="String" locid="7">',
|
||||
' /// Name of the namespace. This could be a dot-separated nested name.',
|
||||
' /// </param>',
|
||||
' /// <param name="members" type="Object" locid="4">',
|
||||
' /// Members in the new namespace.',
|
||||
' /// </param>',
|
||||
' /// <returns locid="5">',
|
||||
' /// The newly defined namespace.',
|
||||
' /// </returns>',
|
||||
' return defineWithParent(global, name, members);',
|
||||
' }',
|
||||
'',
|
||||
' // Establish members of the "WinJS.Namespace" namespace',
|
||||
' Object.defineProperties(_rootNamespace.Namespace, {',
|
||||
'',
|
||||
' defineWithParent: { value: defineWithParent, writable: true, enumerable: true },',
|
||||
'',
|
||||
' define: { value: define, writable: true, enumerable: true }',
|
||||
'',
|
||||
' });',
|
||||
'',
|
||||
' })("WinJS");',
|
||||
'',
|
||||
' (function (WinJS) {',
|
||||
'',
|
||||
' function define(constructor, instanceMembers, staticMembers) {',
|
||||
' /// <summary locid="8">',
|
||||
' /// Defines a class using the given constructor and with the specified instance members.',
|
||||
' /// </summary>',
|
||||
' /// <param name="constructor" type="Function" locid="9">',
|
||||
' /// A constructor function that will be used to instantiate this class.',
|
||||
' /// </param>',
|
||||
' /// <param name="instanceMembers" type="Object" locid="10">',
|
||||
' /// The set of instance fields, properties and methods to be made available on the class.',
|
||||
' /// </param>',
|
||||
' /// <param name="staticMembers" type="Object" locid="11">',
|
||||
' /// The set of static fields, properties and methods to be made available on the class.',
|
||||
' /// </param>',
|
||||
' /// <returns type="Function" locid="12">',
|
||||
' /// The newly defined class.',
|
||||
' /// </returns>',
|
||||
' constructor = constructor || function () { };',
|
||||
' if (instanceMembers) {',
|
||||
' initializeProperties(constructor.prototype, instanceMembers);',
|
||||
' }',
|
||||
' if (staticMembers) {',
|
||||
' initializeProperties(constructor, staticMembers);',
|
||||
' }',
|
||||
' return constructor;',
|
||||
' }',
|
||||
'',
|
||||
' function derive(baseClass, constructor, instanceMembers, staticMembers) {',
|
||||
' /// <summary locid="13">',
|
||||
' /// Uses prototypal inheritance to create a sub-class based on the supplied baseClass parameter.',
|
||||
' /// </summary>',
|
||||
' /// <param name="baseClass" type="Function" locid="14">',
|
||||
' /// The class to inherit from.',
|
||||
' /// </param>',
|
||||
' /// <param name="constructor" type="Function" locid="9">',
|
||||
' /// A constructor function that will be used to instantiate this class.',
|
||||
' /// </param>',
|
||||
' /// <param name="instanceMembers" type="Object" locid="10">',
|
||||
' /// The set of instance fields, properties and methods to be made available on the class.',
|
||||
' /// </param>',
|
||||
' /// <param name="staticMembers" type="Object" locid="11">',
|
||||
' /// The set of static fields, properties and methods to be made available on the class.',
|
||||
' /// </param>',
|
||||
' /// <returns type="Function" locid="12">',
|
||||
' /// The newly defined class.',
|
||||
' /// </returns>',
|
||||
' if (baseClass) {',
|
||||
' constructor = constructor || function () { };',
|
||||
' var basePrototype = baseClass.prototype;',
|
||||
' constructor.prototype = Object.create(basePrototype);',
|
||||
' Object.defineProperty(constructor.prototype, "_super", { value: basePrototype });',
|
||||
' Object.defineProperty(constructor.prototype, "constructor", { value: constructor });',
|
||||
' if (instanceMembers) {',
|
||||
' initializeProperties(constructor.prototype, instanceMembers);',
|
||||
' }',
|
||||
' if (staticMembers) {',
|
||||
' initializeProperties(constructor, staticMembers);',
|
||||
' }',
|
||||
' return constructor;',
|
||||
' } else {',
|
||||
' return define(constructor, instanceMembers, staticMembers);',
|
||||
' }',
|
||||
' }',
|
||||
'',
|
||||
' function mix(constructor) {',
|
||||
' /// <summary locid="15">',
|
||||
' /// Defines a class using the given constructor and the union of the set of instance members',
|
||||
' /// specified by all the mixin objects. The mixin parameter list can be of variable length.',
|
||||
' /// </summary>',
|
||||
' /// <param name="constructor" locid="9">',
|
||||
' /// A constructor function that will be used to instantiate this class.',
|
||||
' /// </param>',
|
||||
' /// <returns locid="12">',
|
||||
' /// The newly defined class.',
|
||||
' /// </returns>',
|
||||
' constructor = constructor || function () { };',
|
||||
' var i, len;',
|
||||
' for (i = 0, len = arguments.length; i < len; i++) {',
|
||||
' initializeProperties(constructor.prototype, arguments[i]);',
|
||||
' }',
|
||||
' return constructor;',
|
||||
' }',
|
||||
'',
|
||||
' // Establish members of "WinJS.Class" namespace',
|
||||
' WinJS.Namespace.define("WinJS.Class", {',
|
||||
' define: define,',
|
||||
' derive: derive,',
|
||||
' mix: mix',
|
||||
' });',
|
||||
'',
|
||||
' })(WinJS);',
|
||||
'',
|
||||
'})(this);'
|
||||
].join('\n');
|
||||
}
|
||||
|
||||
function getModifiedStr() {
|
||||
return [
|
||||
'/*',
|
||||
' © Microsoft. All rights reserved.',
|
||||
'',
|
||||
' This library is supported for use in Windows Tailored Apps only.',
|
||||
'',
|
||||
' Build: 6.2.8100.0',
|
||||
' Version: 0.5',
|
||||
'*/',
|
||||
'',
|
||||
'// Here are some inserted lines',
|
||||
'// with some extra comments',
|
||||
'',
|
||||
'(function (global, undefined) {',
|
||||
' "use strict";',
|
||||
' var definedVariable = {};',
|
||||
' definedVariable.prop = 5;',
|
||||
'',
|
||||
' function initializeProperties(target, members) {',
|
||||
' var keys = Object.keys(members);',
|
||||
' var properties;',
|
||||
' var i, len;',
|
||||
' for (i = 0, len = keys.length; i < len; i++) {',
|
||||
' var key = keys[i];',
|
||||
' var enumerable = key.charCodeAt(0) !== /*_*/95;',
|
||||
' var member = members[key];',
|
||||
" if (member && typeof member === 'object') {",
|
||||
" if (member.value !== undefined || typeof member.get === 'function' || typeof member.set === 'function') {",
|
||||
' if (member.enumerable === undefined) {',
|
||||
' member.enumerable = enumerable;',
|
||||
' }',
|
||||
' properties = properties || {};',
|
||||
' properties[key] = member;',
|
||||
' continue;',
|
||||
' }',
|
||||
' }',
|
||||
' target[key] = member;',
|
||||
' }',
|
||||
' if (properties) {',
|
||||
' Object.defineProperties(target, properties);',
|
||||
' }',
|
||||
' }',
|
||||
'',
|
||||
' (function (rootNamespace) {',
|
||||
'',
|
||||
' // Create the rootNamespace in the global namespace',
|
||||
' if (!global[rootNamespace]) {',
|
||||
' global[rootNamespace] = Object.create(Object.prototype);',
|
||||
' }',
|
||||
'',
|
||||
' // Cache the rootNamespace we just created in a local variable',
|
||||
' var _rootNamespace = global[rootNamespace];',
|
||||
' if (!_rootNamespace.Namespace) {',
|
||||
' _rootNamespace.Namespace = Object.create(Object.prototype);',
|
||||
' }',
|
||||
'',
|
||||
' function defineWithParent(parentNamespace, name, members) {',
|
||||
' /// <summary locid="1">',
|
||||
' /// Defines a new namespace with the specified name, under the specified parent namespace.',
|
||||
' /// </summary>',
|
||||
' /// <param name="parentNamespace" type="Object" locid="2">',
|
||||
' /// The parent namespace which will contain the new namespace.',
|
||||
' /// </param>',
|
||||
' /// <param name="name" type="String" locid="3">',
|
||||
' /// Name of the new namespace.',
|
||||
' /// </param>',
|
||||
' /// <param name="members" type="Object" locid="4">',
|
||||
' /// Members in the new namespace.',
|
||||
' /// </param>',
|
||||
' /// <returns locid="5">',
|
||||
' /// The newly defined namespace.',
|
||||
' /// </returns>',
|
||||
' var currentNamespace = parentNamespace,',
|
||||
' namespaceFragments = name.split(".");',
|
||||
'',
|
||||
' for (var i = 0, len = namespaceFragments.length; i < len; i++) {',
|
||||
' var namespaceName = namespaceFragments[i];',
|
||||
' if (!currentNamespace[namespaceName]) {',
|
||||
' Object.defineProperty(currentNamespace, namespaceName,',
|
||||
' { value: {}, writable: false, enumerable: true, configurable: true }',
|
||||
' );',
|
||||
' }',
|
||||
' currentNamespace = currentNamespace[namespaceName];',
|
||||
' }',
|
||||
'',
|
||||
' if (members) {',
|
||||
' initializeProperties(currentNamespace, members);',
|
||||
' }',
|
||||
'',
|
||||
' return currentNamespace;',
|
||||
' }',
|
||||
'',
|
||||
' function define(name, members) {',
|
||||
' /// <summary locid="6">',
|
||||
' /// Defines a new namespace with the specified name.',
|
||||
' /// </summary>',
|
||||
' /// <param name="name" type="String" locid="7">',
|
||||
' /// Name of the namespace. This could be a dot-separated nested name.',
|
||||
' /// </param>',
|
||||
' /// <param name="members" type="Object" locid="4">',
|
||||
' /// Members in the new namespace.',
|
||||
' /// </param>',
|
||||
' /// <returns locid="5">',
|
||||
' /// The newly defined namespace.',
|
||||
' /// </returns>',
|
||||
' return defineWithParent(global, name, members);',
|
||||
' }',
|
||||
'',
|
||||
' // Establish members of the "WinJS.Namespace" namespace',
|
||||
' Object.defineProperties(_rootNamespace.Namespace, {',
|
||||
'',
|
||||
' defineWithParent: { value: defineWithParent, writable: true, enumerable: true },',
|
||||
'',
|
||||
' define: { value: define, writable: true, enumerable: true }',
|
||||
'',
|
||||
' });',
|
||||
'',
|
||||
' })("WinJS");',
|
||||
'',
|
||||
' (function (WinJS) {',
|
||||
'',
|
||||
' function define(constructor, instanceMembers, staticMembers) {',
|
||||
' /// <summary locid="8">',
|
||||
' /// Defines a class using the given constructor and with the specified instance members.',
|
||||
' /// </summary>',
|
||||
' /// <param name="constructor" type="Function" locid="9">',
|
||||
' /// A constructor function that will be used to instantiate this class.',
|
||||
' /// </param>',
|
||||
' /// <param name="instanceMembers" type="Object" locid="10">',
|
||||
' /// The set of instance fields, properties and methods to be made available on the class.',
|
||||
' /// </param>',
|
||||
' /// <param name="staticMembers" type="Object" locid="11">',
|
||||
' /// The set of static fields, properties and methods to be made available on the class.',
|
||||
' /// </param>',
|
||||
' /// <returns type="Function" locid="12">',
|
||||
' /// The newly defined class.',
|
||||
' /// </returns>',
|
||||
' constructor = constructor || function () { };',
|
||||
' if (instanceMembers) {',
|
||||
' initializeProperties(constructor.prototype, instanceMembers);',
|
||||
' }',
|
||||
' if (staticMembers) {',
|
||||
' initializeProperties(constructor, staticMembers);',
|
||||
' }',
|
||||
' return constructor;',
|
||||
' }',
|
||||
'',
|
||||
' function derive(baseClass, constructor, instanceMembers, staticMembers) {',
|
||||
' /// <summary locid="13">',
|
||||
' /// Uses prototypal inheritance to create a sub-class based on the supplied baseClass parameter.',
|
||||
' /// </summary>',
|
||||
' /// <param name="baseClass" type="Function" locid="14">',
|
||||
' /// The class to inherit from.',
|
||||
' /// </param>',
|
||||
' /// <param name="constructor" type="Function" locid="9">',
|
||||
' /// A constructor function that will be used to instantiate this class.',
|
||||
' /// </param>',
|
||||
' /// <param name="instanceMembers" type="Object" locid="10">',
|
||||
' /// The set of instance fields, properties and methods to be made available on the class.',
|
||||
' /// </param>',
|
||||
' /// <param name="staticMembers" type="Object" locid="11">',
|
||||
' /// The set of static fields, properties and methods to be made available on the class.',
|
||||
' /// </param>',
|
||||
' /// <returns type="Function" locid="12">',
|
||||
' /// The newly defined class.',
|
||||
' /// </returns>',
|
||||
' if (baseClass) {',
|
||||
' constructor = constructor || function () { };',
|
||||
' var basePrototype = baseClass.prototype;',
|
||||
' constructor.prototype = Object.create(basePrototype);',
|
||||
' Object.defineProperty(constructor.prototype, "_super", { value: basePrototype });',
|
||||
' Object.defineProperty(constructor.prototype, "constructor", { value: constructor });',
|
||||
' if (instanceMembers) {',
|
||||
' initializeProperties(constructor.prototype, instanceMembers);',
|
||||
' }',
|
||||
' if (staticMembers) {',
|
||||
' initializeProperties(constructor, staticMembers);',
|
||||
' }',
|
||||
' return constructor;',
|
||||
' } else {',
|
||||
' return define(constructor, instanceMembers, staticMembers);',
|
||||
' }',
|
||||
' }',
|
||||
'',
|
||||
' function mix(constructor) {',
|
||||
' /// <summary locid="15">',
|
||||
' /// Defines a class using the given constructor and the union of the set of instance members',
|
||||
' /// specified by all the mixin objects. The mixin parameter list can be of variable length.',
|
||||
' /// </summary>',
|
||||
' /// <param name="constructor" locid="9">',
|
||||
' /// A constructor function that will be used to instantiate this class.',
|
||||
' /// </param>',
|
||||
' /// <returns locid="12">',
|
||||
' /// The newly defined class.',
|
||||
' /// </returns>',
|
||||
' constructor = constructor || function () { };',
|
||||
' var i, len;',
|
||||
' for (i = 0, len = arguments.length; i < len; i++) {',
|
||||
' initializeProperties(constructor.prototype, arguments[i]);',
|
||||
' }',
|
||||
' return constructor;',
|
||||
' }',
|
||||
'',
|
||||
' // Establish members of "WinJS.Class" namespace',
|
||||
' WinJS.Namespace.define("WinJS.Class", {',
|
||||
' define: define,',
|
||||
' derive: derive,',
|
||||
' mix: mix',
|
||||
' });',
|
||||
'',
|
||||
' })(WinJS);',
|
||||
'',
|
||||
'})(this);'
|
||||
].join('\n');
|
||||
}
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
.monaco-editor .token.custom-info {
|
||||
color: grey !important;
|
||||
}
|
||||
.monaco-editor .token.custom-error {
|
||||
color: red !important;
|
||||
font-weight: bold !important;
|
||||
font-size: 1.2em !important;
|
||||
}
|
||||
.monaco-editor .token.custom-notice {
|
||||
color: orange !important;
|
||||
}
|
||||
.monaco-editor .token.custom-date {
|
||||
color: green !important;
|
||||
}
|
||||
.monaco-editor .token.custom-info {
|
||||
color: grey !important;
|
||||
}
|
||||
.monaco-editor .token.custom-error {
|
||||
color: red !important;
|
||||
font-weight: bold !important;
|
||||
font-size: 1.2em !important;
|
||||
}
|
||||
.monaco-editor .token.custom-notice {
|
||||
color: orange !important;
|
||||
}
|
||||
.monaco-editor .token.custom-date {
|
||||
color: green !important;
|
||||
}
|
||||
|
||||
@ -1,45 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<link rel="stylesheet" href="./index.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Jump to:
|
||||
<a class="loading-opts" href="./smoketest.html">[SMOKETEST]</a>
|
||||
 | 
|
||||
<a class="loading-opts" href="./playground.generated/index.html">[PLAYGROUND]</a>
|
||||
 | 
|
||||
<a class="loading-opts" href="./mouse-fixed.html">[fixed element]</a>
|
||||
 | 
|
||||
<a class="loading-opts" href="./mouse-scrollable-body.html">[scrollable body]</a>
|
||||
 | 
|
||||
<a class="loading-opts" href="./mouse-scrollable-element.html">[scrollable element]</a><br/>
|
||||
 | 
|
||||
<a class="loading-opts" href="./shadow-dom.html">[Shadow DOM]</a>
|
||||
 | 
|
||||
<a class="loading-opts" href="./colorize.html">[colorize element]</a>
|
||||
 | 
|
||||
<a class="loading-opts" href="./cross-origin-broken.html">[cross origin broken]</a>
|
||||
 | 
|
||||
<a class="loading-opts" href="./cross-origin-good.html">[cross origin good]</a>
|
||||
 | 
|
||||
<a class="loading-opts" href="./diff.html">[diff]</a>
|
||||
<br/><br/>
|
||||
|
||||
<div id="bar" style="margin-bottom: 6px;"></div>
|
||||
<div style="clear:both"></div>
|
||||
<div id="container" style="float:left;width:800px;height:450px;border: 1px solid grey"></div>
|
||||
<div id="options" style="float:left;width:220px;height:450px;border: 1px solid grey"></div>
|
||||
<div style="clear:both"></div>
|
||||
|
||||
<script src="../metadata.js"></script>
|
||||
<script src="dev-setup.js"></script>
|
||||
<script>
|
||||
loadEditor(function() {
|
||||
require(['./index'], function() {});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<link rel="stylesheet" href="./index.css" />
|
||||
</head>
|
||||
<body>
|
||||
Jump to:
|
||||
<a class="loading-opts" href="./smoketest.html">[SMOKETEST]</a>
|
||||
 | 
|
||||
<a class="loading-opts" href="./playground.generated/index.html">[PLAYGROUND]</a>
|
||||
 | 
|
||||
<a class="loading-opts" href="./mouse-fixed.html">[fixed element]</a>
|
||||
 | 
|
||||
<a class="loading-opts" href="./mouse-scrollable-body.html">[scrollable body]</a>
|
||||
 | 
|
||||
<a class="loading-opts" href="./mouse-scrollable-element.html">[scrollable element]</a><br />
|
||||
 | 
|
||||
<a class="loading-opts" href="./shadow-dom.html">[Shadow DOM]</a>
|
||||
 | 
|
||||
<a class="loading-opts" href="./colorize.html">[colorize element]</a>
|
||||
 | 
|
||||
<a class="loading-opts" href="./cross-origin-broken.html">[cross origin broken]</a>
|
||||
 | 
|
||||
<a class="loading-opts" href="./cross-origin-good.html">[cross origin good]</a>
|
||||
 | 
|
||||
<a class="loading-opts" href="./diff.html">[diff]</a>
|
||||
<br /><br />
|
||||
|
||||
<div id="bar" style="margin-bottom: 6px"></div>
|
||||
<div style="clear: both"></div>
|
||||
<div
|
||||
id="container"
|
||||
style="float: left; width: 800px; height: 450px; border: 1px solid grey"
|
||||
></div>
|
||||
<div
|
||||
id="options"
|
||||
style="float: left; width: 220px; height: 450px; border: 1px solid grey"
|
||||
></div>
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<script src="../metadata.js"></script>
|
||||
<script src="dev-setup.js"></script>
|
||||
<script>
|
||||
loadEditor(function () {
|
||||
require(['./index'], function () {});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,396 +1,428 @@
|
||||
/// <reference path="../node_modules/monaco-editor-core/monaco.d.ts" />
|
||||
/// <reference path="../node_modules/monaco-typescript/monaco.d.ts" />
|
||||
define(['require', './samples'], function(require, SAMPLES) {
|
||||
|
||||
var domutils = require('vs/base/browser/dom');
|
||||
|
||||
var model = monaco.editor.createModel('', 'plaintext');
|
||||
|
||||
monaco.languages.typescript.typescriptDefaults.setInlayHintsOptions({
|
||||
includeInlayParameterNameHints: 'all',
|
||||
includeInlayParameterNameHintsWhenArgumentMatchesName: true,
|
||||
includeInlayFunctionParameterTypeHints: true,
|
||||
includeInlayVariableTypeHints: true,
|
||||
includeInlayPropertyDeclarationTypeHints: true,
|
||||
includeInlayFunctionLikeReturnTypeHints: true,
|
||||
includeInlayEnumMemberValueHints: true
|
||||
});
|
||||
|
||||
var editor = monaco.editor.create(document.getElementById('container'), {
|
||||
model: model,
|
||||
glyphMargin: true,
|
||||
renderWhitespace: true
|
||||
});
|
||||
|
||||
editor.addCommand({
|
||||
ctrlCmd: true,
|
||||
key: 'F9'
|
||||
}, function(ctx, args) {
|
||||
alert('Command Running!!');
|
||||
console.log(ctx);
|
||||
});
|
||||
|
||||
editor.addAction({
|
||||
id: 'my-unique-id',
|
||||
label: 'My Label!!!',
|
||||
keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.F10],
|
||||
contextMenuGroupId: 'navigation',
|
||||
contextMenuOrder: 2.5,
|
||||
run: function(ed) {
|
||||
console.log("i'm running => " + ed.getPosition());
|
||||
}
|
||||
});
|
||||
|
||||
var currentSamplePromise = null;
|
||||
var samplesData = {};
|
||||
SAMPLES.sort(function(a,b) {
|
||||
return a.name.localeCompare(b.name);
|
||||
}).forEach(function(sample) {
|
||||
samplesData[sample.name] = function() {
|
||||
if (currentSamplePromise !== null) {
|
||||
currentSamplePromise.cancel();
|
||||
currentSamplePromise = null;
|
||||
}
|
||||
currentSamplePromise = sample.loadText().then(function(modelText) {
|
||||
currentSamplePromise = null;
|
||||
updateEditor(sample.mimeType, modelText, sample.name);
|
||||
});
|
||||
}
|
||||
});
|
||||
var examplesComboBox = new ComboBox('Template', samplesData);
|
||||
|
||||
|
||||
var modesData = {};
|
||||
monaco.languages.getLanguages().forEach(function(language) {
|
||||
modesData[language.id] = updateEditor.bind(this, language.id);
|
||||
});
|
||||
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);
|
||||
|
||||
|
||||
// Do it in a timeout to simplify profiles
|
||||
window.setTimeout(function () {
|
||||
var START_SAMPLE = 'Y___DefaultJS';
|
||||
|
||||
var url_matches = location.search.match(/sample=([^?&]+)/i);
|
||||
if (url_matches) {
|
||||
START_SAMPLE = url_matches[1];
|
||||
}
|
||||
|
||||
if (location.hash) {
|
||||
START_SAMPLE = location.hash.replace(/^\#/, '');
|
||||
START_SAMPLE = decodeURIComponent(START_SAMPLE);
|
||||
}
|
||||
|
||||
samplesData[START_SAMPLE]();
|
||||
examplesComboBox.set(START_SAMPLE);
|
||||
|
||||
createOptions(editor);
|
||||
createToolbar(editor);
|
||||
}, 0);
|
||||
|
||||
|
||||
function updateEditor(mode, value, sampleName) {
|
||||
if (sampleName) {
|
||||
window.location.hash = sampleName;
|
||||
}
|
||||
|
||||
if (typeof value !== 'undefined') {
|
||||
var oldModel = model;
|
||||
model = monaco.editor.createModel(value, mode);
|
||||
editor.setModel(model);
|
||||
if (oldModel) {
|
||||
oldModel.dispose();
|
||||
}
|
||||
} else {
|
||||
monaco.editor.setModelLanguage(model, mode);
|
||||
}
|
||||
|
||||
modesComboBox.set(mode);
|
||||
}
|
||||
|
||||
|
||||
function createToolbar(editor) {
|
||||
var bar = document.getElementById('bar');
|
||||
|
||||
bar.appendChild(examplesComboBox.domNode);
|
||||
|
||||
bar.appendChild(modesComboBox.domNode);
|
||||
|
||||
bar.appendChild(themesComboBox.domNode);
|
||||
|
||||
bar.appendChild(createButton("Dispose all", function (e) {
|
||||
editor.dispose();
|
||||
editor = null;
|
||||
if (model) {
|
||||
model.dispose();
|
||||
model = null;
|
||||
}
|
||||
}));
|
||||
|
||||
bar.appendChild(createButton("Remove Model", function(e) {
|
||||
editor.setModel(null);
|
||||
}));
|
||||
|
||||
bar.appendChild(createButton("Dispose Model", function(e) {
|
||||
if (model) {
|
||||
model.dispose();
|
||||
model = null;
|
||||
}
|
||||
}));
|
||||
|
||||
bar.appendChild(createButton('Ballistic scroll', (function() {
|
||||
var friction = 1000; // px per second
|
||||
var speed = 0; // px per second
|
||||
var isRunning = false;
|
||||
var lastTime;
|
||||
var r = 0;
|
||||
|
||||
var scroll = function() {
|
||||
var currentTime = new Date().getTime();
|
||||
var ellapsedTimeS = (currentTime - lastTime) / 1000;
|
||||
lastTime = currentTime;
|
||||
|
||||
speed = speed - friction * ellapsedTimeS;
|
||||
r = r + speed * ellapsedTimeS;
|
||||
editor.setScrollTop(r);
|
||||
|
||||
if (speed >= 0) {
|
||||
domutils.scheduleAtNextAnimationFrame(scroll);
|
||||
} else {
|
||||
isRunning = false;
|
||||
}
|
||||
}
|
||||
|
||||
return function (e) {
|
||||
speed += 2000;
|
||||
if (!isRunning) {
|
||||
isRunning = true;
|
||||
r = editor.getScrollTop();
|
||||
lastTime = new Date().getTime();
|
||||
domutils.runAtThisOrScheduleAtNextAnimationFrame(scroll);
|
||||
}
|
||||
};
|
||||
})()));
|
||||
}
|
||||
|
||||
function createButton(label, onClick) {
|
||||
var result = document.createElement("button");
|
||||
result.innerHTML = label;
|
||||
result.onclick = onClick;
|
||||
return result;
|
||||
}
|
||||
|
||||
function createOptions(editor) {
|
||||
var options = document.getElementById('options');
|
||||
|
||||
var lineNumbers;
|
||||
options.appendChild(createOptionToggle(
|
||||
editor,
|
||||
'lineNumbers',
|
||||
function() {
|
||||
return (lineNumbers === false ? false : true);
|
||||
},
|
||||
function(editor, newValue) {
|
||||
lineNumbers = newValue;
|
||||
editor.updateOptions({ lineNumbers: lineNumbers ? 'on' : 'off' });
|
||||
}
|
||||
));
|
||||
|
||||
var glyphMargin;
|
||||
options.appendChild(createOptionToggle(
|
||||
editor,
|
||||
'glyphMargin',
|
||||
function() {
|
||||
return (glyphMargin === false ? false : true);
|
||||
},
|
||||
function(editor, newValue) {
|
||||
glyphMargin = newValue;
|
||||
editor.updateOptions({ glyphMargin: glyphMargin });
|
||||
}
|
||||
));
|
||||
|
||||
var minimap;
|
||||
options.appendChild(createOptionToggle(
|
||||
editor,
|
||||
'minimap',
|
||||
function() {
|
||||
return (minimap === false ? false : true);
|
||||
},
|
||||
function(editor, newValue) {
|
||||
minimap = newValue;
|
||||
editor.updateOptions({ minimap: { enabled: minimap } });
|
||||
}
|
||||
));
|
||||
|
||||
var roundedSelection;
|
||||
options.appendChild(createOptionToggle(
|
||||
editor,
|
||||
'roundedSelection',
|
||||
function() {
|
||||
return (roundedSelection === false ? false : true);
|
||||
},
|
||||
function(editor, newValue) {
|
||||
roundedSelection = newValue;
|
||||
editor.updateOptions({ roundedSelection: roundedSelection });
|
||||
}
|
||||
));
|
||||
|
||||
var scrollBeyondLastLine;
|
||||
options.appendChild(createOptionToggle(
|
||||
editor,
|
||||
'scrollBeyondLastLine',
|
||||
function() {
|
||||
return (scrollBeyondLastLine === false ? false : true);
|
||||
},
|
||||
function(editor, newValue) {
|
||||
scrollBeyondLastLine = newValue;
|
||||
editor.updateOptions({ scrollBeyondLastLine: scrollBeyondLastLine });
|
||||
}
|
||||
));
|
||||
|
||||
var renderWhitespace;
|
||||
options.appendChild(createOptionToggle(
|
||||
editor,
|
||||
'renderWhitespace',
|
||||
function() {
|
||||
return (renderWhitespace === true ? true : false);
|
||||
},
|
||||
function(editor, newValue) {
|
||||
renderWhitespace = newValue;
|
||||
editor.updateOptions({ renderWhitespace: renderWhitespace });
|
||||
}
|
||||
));
|
||||
|
||||
var readOnly;
|
||||
options.appendChild(createOptionToggle(
|
||||
editor,
|
||||
'readOnly',
|
||||
function() {
|
||||
return (readOnly === true ? true : false);
|
||||
},
|
||||
function(editor, newValue) {
|
||||
readOnly = newValue;
|
||||
editor.updateOptions({ readOnly: readOnly });
|
||||
}
|
||||
));
|
||||
|
||||
var wordWrap;
|
||||
options.appendChild(createOptionToggle(
|
||||
editor,
|
||||
'wordWrap',
|
||||
function() {
|
||||
return (wordWrap === true ? true : false);
|
||||
},
|
||||
function(editor, newValue) {
|
||||
wordWrap = newValue;
|
||||
editor.updateOptions({ wordWrap: wordWrap ? 'on' : 'off' });
|
||||
}
|
||||
));
|
||||
|
||||
var folding;
|
||||
options.appendChild(createOptionToggle(
|
||||
editor,
|
||||
'folding',
|
||||
function() {
|
||||
return (folding === false ? false : true);
|
||||
},
|
||||
function(editor, newValue) {
|
||||
folding = newValue;
|
||||
editor.updateOptions({ folding: folding });
|
||||
}
|
||||
));
|
||||
|
||||
|
||||
var bracketPairColorizationEnabled = false;
|
||||
options.appendChild(createOptionToggle(
|
||||
editor,
|
||||
'bracketPairColorizationEnabled',
|
||||
function() {
|
||||
return (bracketPairColorizationEnabled === false ? false : true);
|
||||
},
|
||||
function(editor, newValue) {
|
||||
bracketPairColorizationEnabled = newValue;
|
||||
editor.updateOptions({ "bracketPairColorization.enabled": bracketPairColorizationEnabled, });
|
||||
}
|
||||
));
|
||||
}
|
||||
|
||||
|
||||
function createOptionToggle(editor, labelText, stateReader, setState) {
|
||||
var domNode = document.createElement('div');
|
||||
domNode.className = 'option toggle';
|
||||
|
||||
var input = document.createElement('input');
|
||||
input.type = 'checkbox';
|
||||
|
||||
var label = document.createElement('label');
|
||||
label.appendChild(input);
|
||||
label.appendChild(document.createTextNode(labelText));
|
||||
|
||||
domNode.appendChild(label);
|
||||
|
||||
var renderState = function() {
|
||||
input.checked = stateReader();
|
||||
};
|
||||
|
||||
renderState();
|
||||
editor.onDidChangeConfiguration(function() {
|
||||
renderState();
|
||||
});
|
||||
input.onchange = function() {
|
||||
setState(editor, !stateReader());
|
||||
};
|
||||
|
||||
return domNode;
|
||||
}
|
||||
|
||||
|
||||
function ComboBox(label, externalOptions) {
|
||||
this.id = 'combobox-' + label.toLowerCase().replace(/\s/g, '-');
|
||||
|
||||
this.domNode = document.createElement('div');
|
||||
this.domNode.setAttribute('style', 'display: inline; margin-right: 5px;');
|
||||
|
||||
this.label = document.createElement('label');
|
||||
this.label.innerHTML = label;
|
||||
this.label.setAttribute('for', this.id);
|
||||
this.domNode.appendChild(this.label);
|
||||
|
||||
this.comboBox = document.createElement('select');
|
||||
this.comboBox.setAttribute('id', this.id);
|
||||
this.comboBox.setAttribute('name', this.id);
|
||||
this.comboBox.onchange =(function (e) {
|
||||
var target = e.target || e.srcElement;
|
||||
this.options[target.options[target.selectedIndex].value].callback();
|
||||
}).bind(this);
|
||||
|
||||
this.domNode.appendChild(this.comboBox);
|
||||
|
||||
this.options = [];
|
||||
for (var name in externalOptions) {
|
||||
if (externalOptions.hasOwnProperty(name)) {
|
||||
var optionElement = document.createElement('option');
|
||||
optionElement.value = name;
|
||||
optionElement.innerHTML = name;
|
||||
this.options[name] = {
|
||||
element: optionElement,
|
||||
callback: externalOptions[name]
|
||||
};
|
||||
this.comboBox.appendChild(optionElement);
|
||||
}
|
||||
}
|
||||
}
|
||||
ComboBox.prototype.set = function (name) {
|
||||
if (this.options[name]) {
|
||||
this.options[name].element.selected = true;
|
||||
}
|
||||
};
|
||||
|
||||
});
|
||||
/// <reference path="../../node_modules/monaco-editor-core/monaco.d.ts" />
|
||||
/// <reference path="../../monaco-typescript/monaco.d.ts" />
|
||||
define(['require', './samples'], function (require, SAMPLES) {
|
||||
var domutils = require('vs/base/browser/dom');
|
||||
|
||||
var model = monaco.editor.createModel('', 'plaintext');
|
||||
|
||||
monaco.languages.typescript.typescriptDefaults.setInlayHintsOptions({
|
||||
includeInlayParameterNameHints: 'all',
|
||||
includeInlayParameterNameHintsWhenArgumentMatchesName: true,
|
||||
includeInlayFunctionParameterTypeHints: true,
|
||||
includeInlayVariableTypeHints: true,
|
||||
includeInlayPropertyDeclarationTypeHints: true,
|
||||
includeInlayFunctionLikeReturnTypeHints: true,
|
||||
includeInlayEnumMemberValueHints: true
|
||||
});
|
||||
|
||||
var editor = monaco.editor.create(document.getElementById('container'), {
|
||||
model: model,
|
||||
glyphMargin: true,
|
||||
renderWhitespace: true
|
||||
});
|
||||
|
||||
editor.addCommand(
|
||||
{
|
||||
ctrlCmd: true,
|
||||
key: 'F9'
|
||||
},
|
||||
function (ctx, args) {
|
||||
alert('Command Running!!');
|
||||
console.log(ctx);
|
||||
}
|
||||
);
|
||||
|
||||
editor.addAction({
|
||||
id: 'my-unique-id',
|
||||
label: 'My Label!!!',
|
||||
keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.F10],
|
||||
contextMenuGroupId: 'navigation',
|
||||
contextMenuOrder: 2.5,
|
||||
run: function (ed) {
|
||||
console.log("i'm running => " + ed.getPosition());
|
||||
}
|
||||
});
|
||||
|
||||
var currentSamplePromise = null;
|
||||
var samplesData = {};
|
||||
SAMPLES.sort(function (a, b) {
|
||||
return a.name.localeCompare(b.name);
|
||||
}).forEach(function (sample) {
|
||||
samplesData[sample.name] = function () {
|
||||
if (currentSamplePromise !== null) {
|
||||
currentSamplePromise.cancel();
|
||||
currentSamplePromise = null;
|
||||
}
|
||||
currentSamplePromise = sample.loadText().then(function (modelText) {
|
||||
currentSamplePromise = null;
|
||||
updateEditor(sample.mimeType, modelText, sample.name);
|
||||
});
|
||||
};
|
||||
});
|
||||
var examplesComboBox = new ComboBox('Template', samplesData);
|
||||
|
||||
var modesData = {};
|
||||
monaco.languages.getLanguages().forEach(function (language) {
|
||||
modesData[language.id] = updateEditor.bind(this, language.id);
|
||||
});
|
||||
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);
|
||||
|
||||
// Do it in a timeout to simplify profiles
|
||||
window.setTimeout(function () {
|
||||
var START_SAMPLE = 'Y___DefaultJS';
|
||||
|
||||
var url_matches = location.search.match(/sample=([^?&]+)/i);
|
||||
if (url_matches) {
|
||||
START_SAMPLE = url_matches[1];
|
||||
}
|
||||
|
||||
if (location.hash) {
|
||||
START_SAMPLE = location.hash.replace(/^\#/, '');
|
||||
START_SAMPLE = decodeURIComponent(START_SAMPLE);
|
||||
}
|
||||
|
||||
samplesData[START_SAMPLE]();
|
||||
examplesComboBox.set(START_SAMPLE);
|
||||
|
||||
createOptions(editor);
|
||||
createToolbar(editor);
|
||||
}, 0);
|
||||
|
||||
function updateEditor(mode, value, sampleName) {
|
||||
if (sampleName) {
|
||||
window.location.hash = sampleName;
|
||||
}
|
||||
|
||||
if (typeof value !== 'undefined') {
|
||||
var oldModel = model;
|
||||
model = monaco.editor.createModel(value, mode);
|
||||
editor.setModel(model);
|
||||
if (oldModel) {
|
||||
oldModel.dispose();
|
||||
}
|
||||
} else {
|
||||
monaco.editor.setModelLanguage(model, mode);
|
||||
}
|
||||
|
||||
modesComboBox.set(mode);
|
||||
}
|
||||
|
||||
function createToolbar(editor) {
|
||||
var bar = document.getElementById('bar');
|
||||
|
||||
bar.appendChild(examplesComboBox.domNode);
|
||||
|
||||
bar.appendChild(modesComboBox.domNode);
|
||||
|
||||
bar.appendChild(themesComboBox.domNode);
|
||||
|
||||
bar.appendChild(
|
||||
createButton('Dispose all', function (e) {
|
||||
editor.dispose();
|
||||
editor = null;
|
||||
if (model) {
|
||||
model.dispose();
|
||||
model = null;
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
bar.appendChild(
|
||||
createButton('Remove Model', function (e) {
|
||||
editor.setModel(null);
|
||||
})
|
||||
);
|
||||
|
||||
bar.appendChild(
|
||||
createButton('Dispose Model', function (e) {
|
||||
if (model) {
|
||||
model.dispose();
|
||||
model = null;
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
bar.appendChild(
|
||||
createButton(
|
||||
'Ballistic scroll',
|
||||
(function () {
|
||||
var friction = 1000; // px per second
|
||||
var speed = 0; // px per second
|
||||
var isRunning = false;
|
||||
var lastTime;
|
||||
var r = 0;
|
||||
|
||||
var scroll = function () {
|
||||
var currentTime = new Date().getTime();
|
||||
var ellapsedTimeS = (currentTime - lastTime) / 1000;
|
||||
lastTime = currentTime;
|
||||
|
||||
speed = speed - friction * ellapsedTimeS;
|
||||
r = r + speed * ellapsedTimeS;
|
||||
editor.setScrollTop(r);
|
||||
|
||||
if (speed >= 0) {
|
||||
domutils.scheduleAtNextAnimationFrame(scroll);
|
||||
} else {
|
||||
isRunning = false;
|
||||
}
|
||||
};
|
||||
|
||||
return function (e) {
|
||||
speed += 2000;
|
||||
if (!isRunning) {
|
||||
isRunning = true;
|
||||
r = editor.getScrollTop();
|
||||
lastTime = new Date().getTime();
|
||||
domutils.runAtThisOrScheduleAtNextAnimationFrame(scroll);
|
||||
}
|
||||
};
|
||||
})()
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function createButton(label, onClick) {
|
||||
var result = document.createElement('button');
|
||||
result.innerHTML = label;
|
||||
result.onclick = onClick;
|
||||
return result;
|
||||
}
|
||||
|
||||
function createOptions(editor) {
|
||||
var options = document.getElementById('options');
|
||||
|
||||
var lineNumbers;
|
||||
options.appendChild(
|
||||
createOptionToggle(
|
||||
editor,
|
||||
'lineNumbers',
|
||||
function () {
|
||||
return lineNumbers === false ? false : true;
|
||||
},
|
||||
function (editor, newValue) {
|
||||
lineNumbers = newValue;
|
||||
editor.updateOptions({ lineNumbers: lineNumbers ? 'on' : 'off' });
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
var glyphMargin;
|
||||
options.appendChild(
|
||||
createOptionToggle(
|
||||
editor,
|
||||
'glyphMargin',
|
||||
function () {
|
||||
return glyphMargin === false ? false : true;
|
||||
},
|
||||
function (editor, newValue) {
|
||||
glyphMargin = newValue;
|
||||
editor.updateOptions({ glyphMargin: glyphMargin });
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
var minimap;
|
||||
options.appendChild(
|
||||
createOptionToggle(
|
||||
editor,
|
||||
'minimap',
|
||||
function () {
|
||||
return minimap === false ? false : true;
|
||||
},
|
||||
function (editor, newValue) {
|
||||
minimap = newValue;
|
||||
editor.updateOptions({ minimap: { enabled: minimap } });
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
var roundedSelection;
|
||||
options.appendChild(
|
||||
createOptionToggle(
|
||||
editor,
|
||||
'roundedSelection',
|
||||
function () {
|
||||
return roundedSelection === false ? false : true;
|
||||
},
|
||||
function (editor, newValue) {
|
||||
roundedSelection = newValue;
|
||||
editor.updateOptions({ roundedSelection: roundedSelection });
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
var scrollBeyondLastLine;
|
||||
options.appendChild(
|
||||
createOptionToggle(
|
||||
editor,
|
||||
'scrollBeyondLastLine',
|
||||
function () {
|
||||
return scrollBeyondLastLine === false ? false : true;
|
||||
},
|
||||
function (editor, newValue) {
|
||||
scrollBeyondLastLine = newValue;
|
||||
editor.updateOptions({ scrollBeyondLastLine: scrollBeyondLastLine });
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
var renderWhitespace;
|
||||
options.appendChild(
|
||||
createOptionToggle(
|
||||
editor,
|
||||
'renderWhitespace',
|
||||
function () {
|
||||
return renderWhitespace === true ? true : false;
|
||||
},
|
||||
function (editor, newValue) {
|
||||
renderWhitespace = newValue;
|
||||
editor.updateOptions({ renderWhitespace: renderWhitespace });
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
var readOnly;
|
||||
options.appendChild(
|
||||
createOptionToggle(
|
||||
editor,
|
||||
'readOnly',
|
||||
function () {
|
||||
return readOnly === true ? true : false;
|
||||
},
|
||||
function (editor, newValue) {
|
||||
readOnly = newValue;
|
||||
editor.updateOptions({ readOnly: readOnly });
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
var wordWrap;
|
||||
options.appendChild(
|
||||
createOptionToggle(
|
||||
editor,
|
||||
'wordWrap',
|
||||
function () {
|
||||
return wordWrap === true ? true : false;
|
||||
},
|
||||
function (editor, newValue) {
|
||||
wordWrap = newValue;
|
||||
editor.updateOptions({ wordWrap: wordWrap ? 'on' : 'off' });
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
var folding;
|
||||
options.appendChild(
|
||||
createOptionToggle(
|
||||
editor,
|
||||
'folding',
|
||||
function () {
|
||||
return folding === false ? false : true;
|
||||
},
|
||||
function (editor, newValue) {
|
||||
folding = newValue;
|
||||
editor.updateOptions({ folding: folding });
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
var bracketPairColorizationEnabled = false;
|
||||
options.appendChild(
|
||||
createOptionToggle(
|
||||
editor,
|
||||
'bracketPairColorizationEnabled',
|
||||
function () {
|
||||
return bracketPairColorizationEnabled === false ? false : true;
|
||||
},
|
||||
function (editor, newValue) {
|
||||
bracketPairColorizationEnabled = newValue;
|
||||
editor.updateOptions({
|
||||
'bracketPairColorization.enabled': bracketPairColorizationEnabled
|
||||
});
|
||||
}
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
function createOptionToggle(editor, labelText, stateReader, setState) {
|
||||
var domNode = document.createElement('div');
|
||||
domNode.className = 'option toggle';
|
||||
|
||||
var input = document.createElement('input');
|
||||
input.type = 'checkbox';
|
||||
|
||||
var label = document.createElement('label');
|
||||
label.appendChild(input);
|
||||
label.appendChild(document.createTextNode(labelText));
|
||||
|
||||
domNode.appendChild(label);
|
||||
|
||||
var renderState = function () {
|
||||
input.checked = stateReader();
|
||||
};
|
||||
|
||||
renderState();
|
||||
editor.onDidChangeConfiguration(function () {
|
||||
renderState();
|
||||
});
|
||||
input.onchange = function () {
|
||||
setState(editor, !stateReader());
|
||||
};
|
||||
|
||||
return domNode;
|
||||
}
|
||||
|
||||
function ComboBox(label, externalOptions) {
|
||||
this.id = 'combobox-' + label.toLowerCase().replace(/\s/g, '-');
|
||||
|
||||
this.domNode = document.createElement('div');
|
||||
this.domNode.setAttribute('style', 'display: inline; margin-right: 5px;');
|
||||
|
||||
this.label = document.createElement('label');
|
||||
this.label.innerHTML = label;
|
||||
this.label.setAttribute('for', this.id);
|
||||
this.domNode.appendChild(this.label);
|
||||
|
||||
this.comboBox = document.createElement('select');
|
||||
this.comboBox.setAttribute('id', this.id);
|
||||
this.comboBox.setAttribute('name', this.id);
|
||||
this.comboBox.onchange = function (e) {
|
||||
var target = e.target || e.srcElement;
|
||||
this.options[target.options[target.selectedIndex].value].callback();
|
||||
}.bind(this);
|
||||
|
||||
this.domNode.appendChild(this.comboBox);
|
||||
|
||||
this.options = [];
|
||||
for (var name in externalOptions) {
|
||||
if (externalOptions.hasOwnProperty(name)) {
|
||||
var optionElement = document.createElement('option');
|
||||
optionElement.value = name;
|
||||
optionElement.innerHTML = name;
|
||||
this.options[name] = {
|
||||
element: optionElement,
|
||||
callback: externalOptions[name]
|
||||
};
|
||||
this.comboBox.appendChild(optionElement);
|
||||
}
|
||||
}
|
||||
}
|
||||
ComboBox.prototype.set = function (name) {
|
||||
if (this.options[name]) {
|
||||
this.options[name].element.selected = true;
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
@ -1,23 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
</head>
|
||||
<body style="height:2000px">
|
||||
|
||||
<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">
|
||||
|
||||
<script src="../metadata.js"></script>
|
||||
<script src="dev-setup.js"></script>
|
||||
<script>
|
||||
loadEditor(function() {
|
||||
monaco.editor.create(document.getElementById('Editor'), {
|
||||
value: document.documentElement.innerHTML,
|
||||
language: 'xml'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
</head>
|
||||
<body style="height: 2000px">
|
||||
<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>
|
||||
|
||||
<script src="../metadata.js"></script>
|
||||
<script src="dev-setup.js"></script>
|
||||
<script>
|
||||
loadEditor(function () {
|
||||
monaco.editor.create(document.getElementById('Editor'), {
|
||||
value: document.documentElement.innerHTML,
|
||||
language: 'xml'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,182 +1,287 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<style type="text/css">
|
||||
#editor {
|
||||
position: relative;
|
||||
left: 500px;
|
||||
top: 20px;
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<div id="editor"></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.
|
||||
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>
|
||||
|
||||
<script src="../metadata.js"></script>
|
||||
<script src="dev-setup.js"></script>
|
||||
<script>
|
||||
loadEditor(function() {
|
||||
monaco.editor.create(document.getElementById('editor'), {
|
||||
value: document.documentElement.innerHTML,
|
||||
language: 'xml'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<style type="text/css">
|
||||
#editor {
|
||||
position: relative;
|
||||
left: 500px;
|
||||
top: 20px;
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
<div id="editor"></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. 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>
|
||||
|
||||
<script src="../metadata.js"></script>
|
||||
<script src="dev-setup.js"></script>
|
||||
<script>
|
||||
loadEditor(function () {
|
||||
monaco.editor.create(document.getElementById('editor'), {
|
||||
value: document.documentElement.innerHTML,
|
||||
language: 'xml'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,134 +1,205 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<style type="text/css">
|
||||
#editor {
|
||||
position: relative;
|
||||
left: 500px;
|
||||
top: 20px;
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<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 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.
|
||||
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>
|
||||
|
||||
<div style="clear:both"></div>
|
||||
|
||||
<script src="../metadata.js"></script>
|
||||
<script src="dev-setup.js"></script>
|
||||
<script>
|
||||
loadEditor(function() {
|
||||
monaco.editor.create(document.getElementById('editor'), {
|
||||
value: document.documentElement.innerHTML,
|
||||
language: 'xml'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<style type="text/css">
|
||||
#editor {
|
||||
position: relative;
|
||||
left: 500px;
|
||||
top: 20px;
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<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 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. 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>
|
||||
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<script src="../metadata.js"></script>
|
||||
<script src="dev-setup.js"></script>
|
||||
<script>
|
||||
loadEditor(function () {
|
||||
monaco.editor.create(document.getElementById('editor'), {
|
||||
value: document.documentElement.innerHTML,
|
||||
language: 'xml'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,18 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<base href="../../vscode-prs/out-editor-esm-bundle/" />
|
||||
</head>
|
||||
<body>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<base href="../../vscode-prs/out-editor-esm-bundle/" />
|
||||
</head>
|
||||
<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>
|
||||
<div id="container" style="float:left;width:800px;height:450px;border: 1px solid grey"></div>
|
||||
<div style="clear:both"></div>
|
||||
|
||||
<script src="core.bundle.js"></script>
|
||||
|
||||
</body>
|
||||
<script src="core.bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,244 +1,287 @@
|
||||
/// <reference path="../node_modules/monaco-editor-core/monaco.d.ts" />
|
||||
|
||||
define(['./samples-all.generated'], function (ALL_SAMPLES) {
|
||||
|
||||
var XHR_SAMPLES = {};
|
||||
ALL_SAMPLES.forEach(function (sample) {
|
||||
XHR_SAMPLES[sample.name] = sample.content;
|
||||
});
|
||||
|
||||
var samples = [];
|
||||
|
||||
var modesIds = monaco.languages.getLanguages().map(function (language) { return language.id; });
|
||||
modesIds.sort();
|
||||
|
||||
modesIds.forEach(function (modeId) {
|
||||
samples.push({
|
||||
name: 'sample - ' + modeId,
|
||||
mimeType: modeId,
|
||||
loadText: function () {
|
||||
return Promise.resolve(XHR_SAMPLES['sample.' + modeId + '.txt']);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function addXHRSample(name, modelUrl, mimeType, textModifier) {
|
||||
textModifier = textModifier || function (text) { return text; };
|
||||
samples.push({
|
||||
name: name,
|
||||
mimeType: mimeType,
|
||||
loadText: function () {
|
||||
return Promise.resolve(XHR_SAMPLES[modelUrl]).then(textModifier);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function addStringPowerXHRSample(name, modelUrl, mimeType, power) {
|
||||
addXHRSample(name, modelUrl, mimeType, function (text) {
|
||||
var result = text;
|
||||
for (var i = 0; i < power; ++i) {
|
||||
result += "\n" + result;
|
||||
}
|
||||
return result;
|
||||
});
|
||||
}
|
||||
|
||||
function addSample(name, mimeType, modelText) {
|
||||
samples.push({
|
||||
name: name,
|
||||
mimeType: mimeType,
|
||||
loadText: function () {
|
||||
return Promise.resolve(modelText);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
addXHRSample('Y___FailingJS', 'run-editor-failing-js.txt', 'text/javascript');
|
||||
addXHRSample('Y___DefaultJS', 'run-editor-sample-js.txt', 'text/javascript');
|
||||
addStringPowerXHRSample('Y___BigJS', 'run-editor-sample-js.txt', 'text/javascript', 11);
|
||||
addXHRSample('Y___BigJS_msn', 'run-editor-sample-msn-js.txt', 'text/javascript');
|
||||
addXHRSample('Y___BigCSS', 'run-editor-sample-big-css.txt', 'text/css');
|
||||
addStringPowerXHRSample('Y___BigHTML', 'run-editor-sample-html.txt', 'text/html', 10);
|
||||
addXHRSample('Y___Korean', 'run-editor-korean.txt', 'text/plain');
|
||||
addXHRSample('Y___BOM.cs', 'run-editor-sample-bom-cs.txt', 'text/x-csharp');
|
||||
addXHRSample('Z___CR.ps1', 'run-editor-sample-cr-ps1.txt', 'text/x-powershell');
|
||||
|
||||
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) {
|
||||
console.log('here I am');
|
||||
var lines = text.split('\n');
|
||||
var newLines = lines.slice(0);
|
||||
|
||||
var problemIsAt = 80733 + 5;
|
||||
while (newLines.length < problemIsAt) {
|
||||
newLines = newLines.concat(lines);
|
||||
}
|
||||
|
||||
newLines = newLines.slice(0, problemIsAt);
|
||||
return newLines.join('\n');
|
||||
});
|
||||
|
||||
addSample('Z___special-chars', 'text/plain', [
|
||||
"// 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
|
||||
addSample('Z___invalid-unicode', 'text/plain', [
|
||||
'\uFFFE\uFFFF',
|
||||
'\uD800\uDC00',
|
||||
'\uD800\uDFFF',
|
||||
'\uDB7F\uDC00',
|
||||
'\uDB7F\uDFFF',
|
||||
'\uDB80\uDC00',
|
||||
'\uDB80\uDFFF',
|
||||
'\uDBFF\uDC00',
|
||||
'\uDBFF\uDFFF'
|
||||
].join('\n'));
|
||||
|
||||
addSample('Z___easy-debug.js', 'text/plain', (function () {
|
||||
var myValue = "Line1";
|
||||
for (var i = 2; i < 50; i++) {
|
||||
myValue += "\nLine" + i;
|
||||
}
|
||||
return myValue;
|
||||
})());
|
||||
|
||||
addSample('Z___copy-paste.txt', 'text/plain', (function () {
|
||||
var i = 0, sampleCopyPasteLine = '';
|
||||
while (sampleCopyPasteLine.length < 1000) {
|
||||
i++;
|
||||
sampleCopyPasteLine += i;
|
||||
}
|
||||
var sampleCopyPaste = sampleCopyPasteLine;
|
||||
for (i = 1; i <= 600; i++) {
|
||||
sampleCopyPaste += '\n' + sampleCopyPasteLine;
|
||||
}
|
||||
return sampleCopyPaste;
|
||||
})());
|
||||
|
||||
addSample('Z___xss', 'text/html', (function () {
|
||||
var xssRepresentations = [
|
||||
'<',
|
||||
'BAD\u2028CHARACTER',
|
||||
'%3C',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'\x3c',
|
||||
'\x3C',
|
||||
'\u003c',
|
||||
'\u003C'
|
||||
];
|
||||
return xssRepresentations.length + ':\n' + xssRepresentations.join('\n');
|
||||
})());
|
||||
|
||||
addSample('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) {
|
||||
result += "\n" + result;
|
||||
}
|
||||
return "/*" + result + "\n*/";
|
||||
})());
|
||||
|
||||
addSample('Z___line-separators.js', 'text/javascript', (function () {
|
||||
return [
|
||||
"var x = '1'; // And\u2028 here I have a nice comment.",
|
||||
"",
|
||||
"var y = x + ' +\u2028 2 = res';",
|
||||
"",
|
||||
"y.replace(/re\u2028s/gi, '3');"
|
||||
].join('\n');
|
||||
})());
|
||||
|
||||
addXHRSample('Z___intellisense.js', 'run-editor-intellisense-js.txt', 'text/javascript');
|
||||
|
||||
addSample('Z___recursion attack', 'text/html', (function () {
|
||||
var arr = [];
|
||||
for (var i = 0; i < 10000; i++) {
|
||||
arr.push('\n<script type="text/html">');
|
||||
}
|
||||
return arr.length + ':\n' + arr.join('');
|
||||
})());
|
||||
|
||||
addSample('empty', 'text/plain', '');
|
||||
|
||||
addXHRSample('Z___dynamic', 'run-editor-sample-dynamic.txt', {
|
||||
name: 'custom.1.',
|
||||
tokenizer: {
|
||||
root: [
|
||||
[/\[error.*/, "custom-error"],
|
||||
[/\[notice.*/, "custom-notice"],
|
||||
[/\[info.*/, "custom-info"],
|
||||
[/\[[a-zA-Z 0-9:]+\]/, "custom-date"],
|
||||
],
|
||||
}
|
||||
});
|
||||
|
||||
addXHRSample('Z___f12___css', 'run-editor-sample-f12-css.txt', 'text/css');
|
||||
|
||||
return samples;
|
||||
});
|
||||
/// <reference path="../../node_modules/monaco-editor-core/monaco.d.ts" />
|
||||
|
||||
define(['./samples-all.generated'], function (ALL_SAMPLES) {
|
||||
var XHR_SAMPLES = {};
|
||||
ALL_SAMPLES.forEach(function (sample) {
|
||||
XHR_SAMPLES[sample.name] = sample.content;
|
||||
});
|
||||
|
||||
var samples = [];
|
||||
|
||||
var modesIds = monaco.languages.getLanguages().map(function (language) {
|
||||
return language.id;
|
||||
});
|
||||
modesIds.sort();
|
||||
|
||||
modesIds.forEach(function (modeId) {
|
||||
samples.push({
|
||||
name: 'sample - ' + modeId,
|
||||
mimeType: modeId,
|
||||
loadText: function () {
|
||||
return Promise.resolve(XHR_SAMPLES['sample.' + modeId + '.txt']);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function addXHRSample(name, modelUrl, mimeType, textModifier) {
|
||||
textModifier =
|
||||
textModifier ||
|
||||
function (text) {
|
||||
return text;
|
||||
};
|
||||
samples.push({
|
||||
name: name,
|
||||
mimeType: mimeType,
|
||||
loadText: function () {
|
||||
return Promise.resolve(XHR_SAMPLES[modelUrl]).then(textModifier);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function addStringPowerXHRSample(name, modelUrl, mimeType, power) {
|
||||
addXHRSample(name, modelUrl, mimeType, function (text) {
|
||||
var result = text;
|
||||
for (var i = 0; i < power; ++i) {
|
||||
result += '\n' + result;
|
||||
}
|
||||
return result;
|
||||
});
|
||||
}
|
||||
|
||||
function addSample(name, mimeType, modelText) {
|
||||
samples.push({
|
||||
name: name,
|
||||
mimeType: mimeType,
|
||||
loadText: function () {
|
||||
return Promise.resolve(modelText);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
addXHRSample('Y___FailingJS', 'run-editor-failing-js.txt', 'text/javascript');
|
||||
addXHRSample('Y___DefaultJS', 'run-editor-sample-js.txt', 'text/javascript');
|
||||
addStringPowerXHRSample('Y___BigJS', 'run-editor-sample-js.txt', 'text/javascript', 11);
|
||||
addXHRSample('Y___BigJS_msn', 'run-editor-sample-msn-js.txt', 'text/javascript');
|
||||
addXHRSample('Y___BigCSS', 'run-editor-sample-big-css.txt', 'text/css');
|
||||
addStringPowerXHRSample('Y___BigHTML', 'run-editor-sample-html.txt', 'text/html', 10);
|
||||
addXHRSample('Y___Korean', 'run-editor-korean.txt', 'text/plain');
|
||||
addXHRSample('Y___BOM.cs', 'run-editor-sample-bom-cs.txt', 'text/x-csharp');
|
||||
addXHRSample('Z___CR.ps1', 'run-editor-sample-cr-ps1.txt', 'text/x-powershell');
|
||||
|
||||
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) {
|
||||
console.log('here I am');
|
||||
var lines = text.split('\n');
|
||||
var newLines = lines.slice(0);
|
||||
|
||||
var problemIsAt = 80733 + 5;
|
||||
while (newLines.length < problemIsAt) {
|
||||
newLines = newLines.concat(lines);
|
||||
}
|
||||
|
||||
newLines = newLines.slice(0, problemIsAt);
|
||||
return newLines.join('\n');
|
||||
}
|
||||
);
|
||||
|
||||
addSample(
|
||||
'Z___special-chars',
|
||||
'text/plain',
|
||||
[
|
||||
'// 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
|
||||
addSample(
|
||||
'Z___invalid-unicode',
|
||||
'text/plain',
|
||||
[
|
||||
'\uFFFE\uFFFF',
|
||||
'\uD800\uDC00',
|
||||
'\uD800\uDFFF',
|
||||
'\uDB7F\uDC00',
|
||||
'\uDB7F\uDFFF',
|
||||
'\uDB80\uDC00',
|
||||
'\uDB80\uDFFF',
|
||||
'\uDBFF\uDC00',
|
||||
'\uDBFF\uDFFF'
|
||||
].join('\n')
|
||||
);
|
||||
|
||||
addSample(
|
||||
'Z___easy-debug.js',
|
||||
'text/plain',
|
||||
(function () {
|
||||
var myValue = 'Line1';
|
||||
for (var i = 2; i < 50; i++) {
|
||||
myValue += '\nLine' + i;
|
||||
}
|
||||
return myValue;
|
||||
})()
|
||||
);
|
||||
|
||||
addSample(
|
||||
'Z___copy-paste.txt',
|
||||
'text/plain',
|
||||
(function () {
|
||||
var i = 0,
|
||||
sampleCopyPasteLine = '';
|
||||
while (sampleCopyPasteLine.length < 1000) {
|
||||
i++;
|
||||
sampleCopyPasteLine += i;
|
||||
}
|
||||
var sampleCopyPaste = sampleCopyPasteLine;
|
||||
for (i = 1; i <= 600; i++) {
|
||||
sampleCopyPaste += '\n' + sampleCopyPasteLine;
|
||||
}
|
||||
return sampleCopyPaste;
|
||||
})()
|
||||
);
|
||||
|
||||
addSample(
|
||||
'Z___xss',
|
||||
'text/html',
|
||||
(function () {
|
||||
var xssRepresentations = [
|
||||
'<',
|
||||
'BAD\u2028CHARACTER',
|
||||
'%3C',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'<',
|
||||
'\x3c',
|
||||
'\x3C',
|
||||
'\u003c',
|
||||
'\u003C'
|
||||
];
|
||||
return xssRepresentations.length + ':\n' + xssRepresentations.join('\n');
|
||||
})()
|
||||
);
|
||||
|
||||
addSample(
|
||||
'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) {
|
||||
result += '\n' + result;
|
||||
}
|
||||
return '/*' + result + '\n*/';
|
||||
})()
|
||||
);
|
||||
|
||||
addSample(
|
||||
'Z___line-separators.js',
|
||||
'text/javascript',
|
||||
(function () {
|
||||
return [
|
||||
"var x = '1'; // And\u2028 here I have a nice comment.",
|
||||
'',
|
||||
"var y = x + ' +\u2028 2 = res';",
|
||||
'',
|
||||
"y.replace(/re\u2028s/gi, '3');"
|
||||
].join('\n');
|
||||
})()
|
||||
);
|
||||
|
||||
addXHRSample('Z___intellisense.js', 'run-editor-intellisense-js.txt', 'text/javascript');
|
||||
|
||||
addSample(
|
||||
'Z___recursion attack',
|
||||
'text/html',
|
||||
(function () {
|
||||
var arr = [];
|
||||
for (var i = 0; i < 10000; i++) {
|
||||
arr.push('\n<script type="text/html">');
|
||||
}
|
||||
return arr.length + ':\n' + arr.join('');
|
||||
})()
|
||||
);
|
||||
|
||||
addSample('empty', 'text/plain', '');
|
||||
|
||||
addXHRSample('Z___dynamic', 'run-editor-sample-dynamic.txt', {
|
||||
name: 'custom.1.',
|
||||
tokenizer: {
|
||||
root: [
|
||||
[/\[error.*/, 'custom-error'],
|
||||
[/\[notice.*/, 'custom-notice'],
|
||||
[/\[info.*/, 'custom-info'],
|
||||
[/\[[a-zA-Z 0-9:]+\]/, 'custom-date']
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
addXHRSample('Z___f12___css', 'run-editor-sample-f12-css.txt', 'text/css');
|
||||
|
||||
return samples;
|
||||
});
|
||||
|
||||
@ -1,30 +1,25 @@
|
||||
define([
|
||||
'vs/base/common/severity'
|
||||
], function(severity) {
|
||||
'use strict';
|
||||
function ValidateParticipant() {
|
||||
|
||||
}
|
||||
|
||||
ValidateParticipant.ID = 'doc.validateParticipant';
|
||||
ValidateParticipant.prototype.validate = function(mirrorModel, markerService) {
|
||||
|
||||
var marker = {
|
||||
severity: severity.Error,
|
||||
message: [
|
||||
{ isText: true, text: '\u2188 ' },
|
||||
{ tagName: 'span', style: 'color:red', text: 'I AM' },
|
||||
{ isText: true, text: ' A VALIDATION PARTICIPANT \u2188' }
|
||||
],
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 1,
|
||||
endColumn: 3
|
||||
};
|
||||
|
||||
markerService.changeOne(ValidateParticipant.ID, mirrorModel.getAssociatedResource(), [marker]);
|
||||
};
|
||||
return {
|
||||
ValidateParticipant: ValidateParticipant
|
||||
};
|
||||
});
|
||||
define(['vs/base/common/severity'], function (severity) {
|
||||
'use strict';
|
||||
function ValidateParticipant() {}
|
||||
|
||||
ValidateParticipant.ID = 'doc.validateParticipant';
|
||||
ValidateParticipant.prototype.validate = function (mirrorModel, markerService) {
|
||||
var marker = {
|
||||
severity: severity.Error,
|
||||
message: [
|
||||
{ isText: true, text: '\u2188 ' },
|
||||
{ tagName: 'span', style: 'color:red', text: 'I AM' },
|
||||
{ isText: true, text: ' A VALIDATION PARTICIPANT \u2188' }
|
||||
],
|
||||
startLineNumber: 1,
|
||||
startColumn: 1,
|
||||
endLineNumber: 1,
|
||||
endColumn: 3
|
||||
};
|
||||
|
||||
markerService.changeOne(ValidateParticipant.ID, mirrorModel.getAssociatedResource(), [marker]);
|
||||
};
|
||||
return {
|
||||
ValidateParticipant: ValidateParticipant
|
||||
};
|
||||
});
|
||||
|
||||
@ -1,59 +1,57 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
</head>
|
||||
<body>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
</head>
|
||||
<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>
|
||||
<div id="container" style="float:left;width:800px;height:450px;border: 1px solid grey"></div>
|
||||
<div style="clear:both"></div>
|
||||
<script src="../metadata.js"></script>
|
||||
<script src="dev-setup.js"></script>
|
||||
<script>
|
||||
const container = document.getElementById('container');
|
||||
const shadowRoot = container.attachShadow({
|
||||
mode: 'closed'
|
||||
});
|
||||
loadEditor(function () {
|
||||
const innerContainer = document.createElement('div');
|
||||
shadowRoot.appendChild(innerContainer);
|
||||
innerContainer.style.width = '800px';
|
||||
innerContainer.style.height = '450px';
|
||||
|
||||
<script src="../metadata.js"></script>
|
||||
<script src="dev-setup.js"></script>
|
||||
<script>
|
||||
const container = document.getElementById('container');
|
||||
const shadowRoot = container.attachShadow({
|
||||
mode: "closed"
|
||||
});
|
||||
loadEditor(function() {
|
||||
const innerContainer = document.createElement('div');
|
||||
shadowRoot.appendChild(innerContainer);
|
||||
innerContainer.style.width = '800px';
|
||||
innerContainer.style.height = '450px';
|
||||
// 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) => {
|
||||
if (/vs\/(base|editor|platform)/.test(documentLink.getAttribute('href'))) {
|
||||
return true;
|
||||
}
|
||||
console.log(`Not moving: `, documentLink);
|
||||
return true;
|
||||
});
|
||||
documentLinks.forEach((documentLink) => shadowRoot.appendChild(documentLink));
|
||||
|
||||
// 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) => {
|
||||
if (/vs\/(base|editor|platform)/.test(documentLink.getAttribute('href'))) {
|
||||
return true;
|
||||
}
|
||||
console.log(`Not moving: `, documentLink);
|
||||
return true;
|
||||
});
|
||||
documentLinks.forEach(documentLink => shadowRoot.appendChild(documentLink));
|
||||
// We must define the font face outside the shadowroot
|
||||
const codiconCSS = `@font-face { font-family: "codicon"; src: url("${getCodiconPath()}") format("truetype"); }`;
|
||||
const style = document.createElement('style');
|
||||
style.type = 'text/css';
|
||||
style.media = 'screen';
|
||||
document.getElementsByTagName('head')[0].appendChild(style);
|
||||
style.innerHTML = codiconCSS;
|
||||
|
||||
// We must define the font face outside the shadowroot
|
||||
const codiconCSS = `@font-face { font-family: "codicon"; src: url("${getCodiconPath()}") format("truetype"); }`;
|
||||
const style = document.createElement('style');
|
||||
style.type = 'text/css';
|
||||
style.media = 'screen';
|
||||
document.getElementsByTagName('head')[0].appendChild(style);
|
||||
style.innerHTML = codiconCSS;
|
||||
|
||||
monaco.editor.create(innerContainer, {
|
||||
value: [
|
||||
'function hello() {',
|
||||
'\tconsole.log("hello world");',
|
||||
'}',
|
||||
''
|
||||
].join('\n'),
|
||||
language: 'javascript',
|
||||
ariaContainerElement: innerContainer
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
monaco.editor.create(innerContainer, {
|
||||
value: ['function hello() {', '\tconsole.log("hello world");', '}', ''].join('\n'),
|
||||
language: 'javascript',
|
||||
ariaContainerElement: innerContainer
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,41 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<style>
|
||||
#errors {
|
||||
position:fixed;
|
||||
top:0;
|
||||
right:0;
|
||||
font-size: 20px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
#editor {
|
||||
float:left;
|
||||
width: 1250px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h2>Smoke Test</h2>
|
||||
|
||||
<div id="control"></div>
|
||||
<div id="editor"></div>
|
||||
<div id="errors"></div>
|
||||
<div style="clear:both"></div>
|
||||
|
||||
<script src="../metadata.js"></script>
|
||||
<script src="dev-setup.js"></script>
|
||||
<script>
|
||||
loadEditor(function() {
|
||||
require(['./smoketest'], function() {});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
||||
<style>
|
||||
#errors {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-size: 20px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
#editor {
|
||||
float: left;
|
||||
width: 1250px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Smoke Test</h2>
|
||||
|
||||
<div id="control"></div>
|
||||
<div id="editor"></div>
|
||||
<div id="errors"></div>
|
||||
<div style="clear: both"></div>
|
||||
|
||||
<script src="../metadata.js"></script>
|
||||
<script src="dev-setup.js"></script>
|
||||
<script>
|
||||
loadEditor(function () {
|
||||
require(['./smoketest'], function () {});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,139 +1,145 @@
|
||||
/// <reference path="../node_modules/monaco-editor-core/monaco.d.ts" />
|
||||
define(['./samples-all.generated'], function(ALL_SAMPLES) {
|
||||
|
||||
var XHR_SAMPLES = {};
|
||||
ALL_SAMPLES.forEach(function(sample) {
|
||||
XHR_SAMPLES[sample.name] = sample.content;
|
||||
});
|
||||
|
||||
var actions = (function() {
|
||||
"use strict";
|
||||
|
||||
return [
|
||||
{
|
||||
name: 'Undo',
|
||||
run: function (editor) {
|
||||
editor.trigger('keyboard', monaco.editor.Handler.Undo);
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'type & suggest',
|
||||
run: function (editor) {
|
||||
editor.setPosition({
|
||||
lineNumber: 1,
|
||||
column: 1
|
||||
});
|
||||
var firstChar = editor.getModel().getLineContent(1).charAt(0);
|
||||
editor.trigger('keyboard', monaco.editor.Handler.CursorEnd);
|
||||
editor.trigger('keyboard', monaco.editor.Handler.Type, {
|
||||
text: '\n' + firstChar
|
||||
});
|
||||
editor.focus();
|
||||
editor.trigger('test', 'editor.action.triggerSuggest');
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'links',
|
||||
run: function (editor) {
|
||||
editor.setPosition({
|
||||
lineNumber: 1,
|
||||
column: 1
|
||||
});
|
||||
var commentsSupport = editor.getModel().getMode().commentsSupport;
|
||||
var text = 'http://www.test.com';
|
||||
if (commentsSupport) {
|
||||
var commentsConfig = commentsSupport.getCommentsConfiguration();
|
||||
if (commentsConfig && commentsConfig.lineCommentTokens) {
|
||||
text = commentsConfig.lineCommentTokens[0] + ' ' + text;
|
||||
} else if (commentsConfig && commentsConfig.blockCommentStartToken) {
|
||||
text = commentsConfig.blockCommentStartToken + ' ' + text + ' ' + commentsConfig.blockCommentEndToken;
|
||||
}
|
||||
}
|
||||
editor.trigger('keyboard', monaco.editor.Handler.Type, {
|
||||
text: text + '\n'
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'multicursor',
|
||||
run: function (editor) {
|
||||
editor.setPosition({
|
||||
lineNumber: 1,
|
||||
column: 1
|
||||
});
|
||||
editor.trigger('keyboard', monaco.editor.Handler.AddCursorDown);
|
||||
editor.trigger('keyboard', monaco.editor.Handler.AddCursorDown);
|
||||
editor.trigger('keyboard', monaco.editor.Handler.AddCursorDown);
|
||||
editor.trigger('keyboard', monaco.editor.Handler.AddCursorDown);
|
||||
editor.trigger('keyboard', monaco.editor.Handler.AddCursorDown);
|
||||
editor.trigger('keyboard', monaco.editor.Handler.Type, {
|
||||
text: 'some text - '
|
||||
});
|
||||
}
|
||||
}
|
||||
];
|
||||
})();
|
||||
|
||||
var panelContainer = document.getElementById('control');
|
||||
var editorContainer = document.getElementById('editor');
|
||||
var editors = {}, models = {};
|
||||
|
||||
function onError(err) {
|
||||
console.error(err);
|
||||
alert('error!!');
|
||||
}
|
||||
|
||||
function getAllModes() {
|
||||
var result = monaco.languages.getLanguages().map(function(language) { return language.id; });
|
||||
result.sort();
|
||||
return result;
|
||||
}
|
||||
|
||||
function createEditor(container, mode) {
|
||||
editors[mode] = monaco.editor.create(container, {
|
||||
value: mode
|
||||
});
|
||||
var value = mode + '\n' + XHR_SAMPLES['sample.' + mode + '.txt'];
|
||||
var model = monaco.editor.createModel(value, mode);
|
||||
editors[mode].setModel(model);
|
||||
}
|
||||
|
||||
function createEditors(modes) {
|
||||
for (var i = 0; i < modes.length; i++) {
|
||||
var container = document.createElement('div');
|
||||
container.style.width = '300px';
|
||||
container.style.cssFloat = 'left';
|
||||
container.style.height = '200px';
|
||||
container.style.border = '1px solid #ccc';
|
||||
container.style.background = 'red';
|
||||
container.setAttribute('data-mime', modes[i]);
|
||||
editorContainer.appendChild(container);
|
||||
createEditor(container, modes[i]);
|
||||
}
|
||||
|
||||
var clearer = document.createElement('div');
|
||||
clearer.style.clear = 'both';
|
||||
editorContainer.appendChild(clearer);
|
||||
}
|
||||
|
||||
function executeAction(action) {
|
||||
for (var mime in editors) {
|
||||
if (editors.hasOwnProperty(mime)) {
|
||||
action(editors[mime]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function createActions(actions) {
|
||||
for (var i = 0; i < actions.length; i++) {
|
||||
var btn = document.createElement('button');
|
||||
btn.appendChild(document.createTextNode('<<' + actions[i].name + '>>'));
|
||||
btn.onclick = executeAction.bind(this, actions[i].run);
|
||||
panelContainer.appendChild(btn);
|
||||
}
|
||||
}
|
||||
|
||||
createEditors(getAllModes());
|
||||
createActions(actions);
|
||||
|
||||
});
|
||||
/// <reference path="../../node_modules/monaco-editor-core/monaco.d.ts" />
|
||||
define(['./samples-all.generated'], function (ALL_SAMPLES) {
|
||||
var XHR_SAMPLES = {};
|
||||
ALL_SAMPLES.forEach(function (sample) {
|
||||
XHR_SAMPLES[sample.name] = sample.content;
|
||||
});
|
||||
|
||||
var actions = (function () {
|
||||
'use strict';
|
||||
|
||||
return [
|
||||
{
|
||||
name: 'Undo',
|
||||
run: function (editor) {
|
||||
editor.trigger('keyboard', monaco.editor.Handler.Undo);
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'type & suggest',
|
||||
run: function (editor) {
|
||||
editor.setPosition({
|
||||
lineNumber: 1,
|
||||
column: 1
|
||||
});
|
||||
var firstChar = editor.getModel().getLineContent(1).charAt(0);
|
||||
editor.trigger('keyboard', monaco.editor.Handler.CursorEnd);
|
||||
editor.trigger('keyboard', monaco.editor.Handler.Type, {
|
||||
text: '\n' + firstChar
|
||||
});
|
||||
editor.focus();
|
||||
editor.trigger('test', 'editor.action.triggerSuggest');
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'links',
|
||||
run: function (editor) {
|
||||
editor.setPosition({
|
||||
lineNumber: 1,
|
||||
column: 1
|
||||
});
|
||||
var commentsSupport = editor.getModel().getMode().commentsSupport;
|
||||
var text = 'http://www.test.com';
|
||||
if (commentsSupport) {
|
||||
var commentsConfig = commentsSupport.getCommentsConfiguration();
|
||||
if (commentsConfig && commentsConfig.lineCommentTokens) {
|
||||
text = commentsConfig.lineCommentTokens[0] + ' ' + text;
|
||||
} else if (commentsConfig && commentsConfig.blockCommentStartToken) {
|
||||
text =
|
||||
commentsConfig.blockCommentStartToken +
|
||||
' ' +
|
||||
text +
|
||||
' ' +
|
||||
commentsConfig.blockCommentEndToken;
|
||||
}
|
||||
}
|
||||
editor.trigger('keyboard', monaco.editor.Handler.Type, {
|
||||
text: text + '\n'
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'multicursor',
|
||||
run: function (editor) {
|
||||
editor.setPosition({
|
||||
lineNumber: 1,
|
||||
column: 1
|
||||
});
|
||||
editor.trigger('keyboard', monaco.editor.Handler.AddCursorDown);
|
||||
editor.trigger('keyboard', monaco.editor.Handler.AddCursorDown);
|
||||
editor.trigger('keyboard', monaco.editor.Handler.AddCursorDown);
|
||||
editor.trigger('keyboard', monaco.editor.Handler.AddCursorDown);
|
||||
editor.trigger('keyboard', monaco.editor.Handler.AddCursorDown);
|
||||
editor.trigger('keyboard', monaco.editor.Handler.Type, {
|
||||
text: 'some text - '
|
||||
});
|
||||
}
|
||||
}
|
||||
];
|
||||
})();
|
||||
|
||||
var panelContainer = document.getElementById('control');
|
||||
var editorContainer = document.getElementById('editor');
|
||||
var editors = {},
|
||||
models = {};
|
||||
|
||||
function onError(err) {
|
||||
console.error(err);
|
||||
alert('error!!');
|
||||
}
|
||||
|
||||
function getAllModes() {
|
||||
var result = monaco.languages.getLanguages().map(function (language) {
|
||||
return language.id;
|
||||
});
|
||||
result.sort();
|
||||
return result;
|
||||
}
|
||||
|
||||
function createEditor(container, mode) {
|
||||
editors[mode] = monaco.editor.create(container, {
|
||||
value: mode
|
||||
});
|
||||
var value = mode + '\n' + XHR_SAMPLES['sample.' + mode + '.txt'];
|
||||
var model = monaco.editor.createModel(value, mode);
|
||||
editors[mode].setModel(model);
|
||||
}
|
||||
|
||||
function createEditors(modes) {
|
||||
for (var i = 0; i < modes.length; i++) {
|
||||
var container = document.createElement('div');
|
||||
container.style.width = '300px';
|
||||
container.style.cssFloat = 'left';
|
||||
container.style.height = '200px';
|
||||
container.style.border = '1px solid #ccc';
|
||||
container.style.background = 'red';
|
||||
container.setAttribute('data-mime', modes[i]);
|
||||
editorContainer.appendChild(container);
|
||||
createEditor(container, modes[i]);
|
||||
}
|
||||
|
||||
var clearer = document.createElement('div');
|
||||
clearer.style.clear = 'both';
|
||||
editorContainer.appendChild(clearer);
|
||||
}
|
||||
|
||||
function executeAction(action) {
|
||||
for (var mime in editors) {
|
||||
if (editors.hasOwnProperty(mime)) {
|
||||
action(editors[mime]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function createActions(actions) {
|
||||
for (var i = 0; i < actions.length; i++) {
|
||||
var btn = document.createElement('button');
|
||||
btn.appendChild(document.createTextNode('<<' + actions[i].name + '>>'));
|
||||
btn.onclick = executeAction.bind(this, actions[i].run);
|
||||
panelContainer.appendChild(btn);
|
||||
}
|
||||
}
|
||||
|
||||
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
@ -1,7 +1,7 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "CommonJS"
|
||||
},
|
||||
"include": ["monaco.d.ts"],
|
||||
"exclude": ["theme"]
|
||||
"compilerOptions": {
|
||||
"module": "CommonJS"
|
||||
},
|
||||
"include": ["monaco.d.ts"],
|
||||
"exclude": ["theme"]
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
{
|
||||
"entryPoints": ["monaco.d.ts"],
|
||||
"out": "../../monaco-editor-website/api",
|
||||
"theme": "./theme",
|
||||
"name": "Monaco Editor API",
|
||||
"readme": "none",
|
||||
"hideGenerator": true
|
||||
"entryPoints": ["monaco.d.ts"],
|
||||
"out": "../../monaco-editor-website/api",
|
||||
"theme": "./theme",
|
||||
"name": "Monaco Editor API",
|
||||
"readme": "none",
|
||||
"hideGenerator": true
|
||||
}
|
||||
|
||||
@ -1,291 +1,302 @@
|
||||
body {
|
||||
padding: 54px 0 40px 0;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
body.home {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
body,
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea,
|
||||
.navbar-search .search-query {
|
||||
font: 400 14px/1.4em "Segoe UI", "Open Sans", Calibri, Candara, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.navbar .nav {
|
||||
float: left;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #0066cc;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
letter-spacing: -0.01em;
|
||||
margin: 0;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/***** Bootstrap Cosmo Overrides *****/
|
||||
h1, h2 {
|
||||
font-family: "Segoe UI Light", "Segoe UI", "Open Sans", Calibri, Candara, Arial, sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
h1 {
|
||||
font-size: 72px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.hero-unit h1 {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1 small,
|
||||
h2 small,
|
||||
h3 small,
|
||||
h4 small,
|
||||
h5 small,
|
||||
h6 small {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.alert-heading,
|
||||
.alert h1,
|
||||
.alert h2,
|
||||
.alert h3,
|
||||
.alert h4,
|
||||
.alert h5,
|
||||
.alert h6 {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
color: #3a87ad;
|
||||
background-color: #d9edf7;
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-inner {
|
||||
background-color: #68217A;
|
||||
-webkit-filter: none;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.navbar-inverse.home .navbar-inner {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.navbar-inverse .btn-navbar {
|
||||
background: transparent;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.navbar-inverse .btn-navbar:hover,
|
||||
.navbar-inverse .btn-navbar:focus,
|
||||
.navbar-inverse .btn-navbar:active,
|
||||
.navbar-inverse .btn-navbar.active,
|
||||
.navbar-inverse .btn-navbar.disabled,
|
||||
.navbar-inverse .btn-navbar[disabled] {
|
||||
background: #442359;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #0072C6;
|
||||
}
|
||||
|
||||
.home .hero-unit {
|
||||
margin-top: -54px;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.hero-unit {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.hero-unit h1 {
|
||||
margin: 0 0 6px;
|
||||
}
|
||||
|
||||
.nav-tabs > li > a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.nav-tabs > li > a:hover {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.nav-tabs > .active > a,
|
||||
.nav-tabs > .active > a:hover,
|
||||
.nav-tabs > .active > a:focus {
|
||||
color: #0072C6;
|
||||
}
|
||||
|
||||
/***** General *****/
|
||||
|
||||
body > section > .container {
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.masthead {
|
||||
background-color: #0072C6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.masthead .hero-unit {
|
||||
padding: 30px 0 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.navbar.home {
|
||||
position: relative;
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
.navbar .nav>li>a {
|
||||
text-shadow: none;
|
||||
padding-top: 18px;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.navbar-inverse .nav-collapse .nav>li>a {
|
||||
color: white;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.navbar-inverse .nav>li>a.nav-item:focus, .navbar-inverse .nav>li>a.nav-item:hover {
|
||||
background-color: rgba(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 {
|
||||
color:#fff;
|
||||
background-color: rgba(0,0,0,.24);
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.navbar .logo {
|
||||
/*background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTIxIDBsLTExIDEyLTcuMzMzLTUuNjY2LTIuNjY3IDEuNjgydjEzLjk4NGwyLjY2NyAxLjY2NiA3LjMzMy01LjY2NiAxMSAxMSA3LTN2LTIyLjMzM2wtNy0zLjY2N3ptLTE4IDE5di05bDQgNS00IDR6bTExLTRsNy02djEybC03LTZ6Ii8+PC9zdmc+") left center no-repeat;*/
|
||||
/*padding: 16px 12px 0 34px;*/
|
||||
padding: 16px 12px 0 0px;
|
||||
height: 35px;
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.navbar .logo a {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
.navbar-fixed-top {
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
.flgroup:after {
|
||||
content: "";
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Controls */
|
||||
|
||||
/* Media Queries */
|
||||
@media (min-width: 1200px) {
|
||||
h1, h2 {
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.hero-unit h1 {
|
||||
font-size: 72px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#gh-link {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border: 0;
|
||||
margin:0;
|
||||
z-index: 1000;
|
||||
}
|
||||
@media (min-width: 980px) {
|
||||
#gh-link {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 980px) {
|
||||
.navbar .nav {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.navbar-inverse .nav-collapse .nav>li>a {
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 979px) {
|
||||
h1 {
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 979px) {
|
||||
body {
|
||||
padding: inherit;
|
||||
}
|
||||
|
||||
.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
|
||||
margin-right: inherit;
|
||||
margin-left: inherit;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.navbar-fixed-top .navbar-inner {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.navbar .container {
|
||||
width: 724px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.navbar .container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.navbar .logo a {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
body {
|
||||
padding: 54px 0 40px 0;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
body.home {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
body,
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea,
|
||||
.navbar-search .search-query {
|
||||
font: 400 14px/1.4em 'Segoe UI', 'Open Sans', Calibri, Candara, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.navbar .nav {
|
||||
float: left;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #0066cc;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
letter-spacing: -0.01em;
|
||||
margin: 0;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/***** Bootstrap Cosmo Overrides *****/
|
||||
h1,
|
||||
h2 {
|
||||
font-family: 'Segoe UI Light', 'Segoe UI', 'Open Sans', Calibri, Candara, Arial, sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
h1 {
|
||||
font-size: 72px;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.hero-unit h1 {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1 small,
|
||||
h2 small,
|
||||
h3 small,
|
||||
h4 small,
|
||||
h5 small,
|
||||
h6 small {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.alert-heading,
|
||||
.alert h1,
|
||||
.alert h2,
|
||||
.alert h3,
|
||||
.alert h4,
|
||||
.alert h5,
|
||||
.alert h6 {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
color: #3a87ad;
|
||||
background-color: #d9edf7;
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-inner {
|
||||
background-color: #68217a;
|
||||
-webkit-filter: none;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.navbar-inverse.home .navbar-inner {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.navbar-inverse .btn-navbar {
|
||||
background: transparent;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.navbar-inverse .btn-navbar:hover,
|
||||
.navbar-inverse .btn-navbar:focus,
|
||||
.navbar-inverse .btn-navbar:active,
|
||||
.navbar-inverse .btn-navbar.active,
|
||||
.navbar-inverse .btn-navbar.disabled,
|
||||
.navbar-inverse .btn-navbar[disabled] {
|
||||
background: #442359;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #0072c6;
|
||||
}
|
||||
|
||||
.home .hero-unit {
|
||||
margin-top: -54px;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.hero-unit {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.hero-unit h1 {
|
||||
margin: 0 0 6px;
|
||||
}
|
||||
|
||||
.nav-tabs > li > a {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.nav-tabs > li > a:hover {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.nav-tabs > .active > a,
|
||||
.nav-tabs > .active > a:hover,
|
||||
.nav-tabs > .active > a:focus {
|
||||
color: #0072c6;
|
||||
}
|
||||
|
||||
/***** General *****/
|
||||
|
||||
body > section > .container {
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.masthead {
|
||||
background-color: #0072c6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.masthead .hero-unit {
|
||||
padding: 30px 0 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.navbar.home {
|
||||
position: relative;
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
.navbar .nav > li > a {
|
||||
text-shadow: none;
|
||||
padding-top: 18px;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.navbar-inverse .nav-collapse .nav > li > a {
|
||||
color: white;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.navbar-inverse .nav > li > a.nav-item:focus,
|
||||
.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 {
|
||||
color: #fff;
|
||||
background-color: rgba(0, 0, 0, 0.24);
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.navbar .logo {
|
||||
/*background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTIxIDBsLTExIDEyLTcuMzMzLTUuNjY2LTIuNjY3IDEuNjgydjEzLjk4NGwyLjY2NyAxLjY2NiA3LjMzMy01LjY2NiAxMSAxMSA3LTN2LTIyLjMzM2wtNy0zLjY2N3ptLTE4IDE5di05bDQgNS00IDR6bTExLTRsNy02djEybC03LTZ6Ii8+PC9zdmc+") left center no-repeat;*/
|
||||
/*padding: 16px 12px 0 34px;*/
|
||||
padding: 16px 12px 0 0px;
|
||||
height: 35px;
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.navbar .logo a {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
.navbar-fixed-top {
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
.flgroup:after {
|
||||
content: '';
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Controls */
|
||||
|
||||
/* Media Queries */
|
||||
@media (min-width: 1200px) {
|
||||
h1,
|
||||
h2 {
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.hero-unit h1 {
|
||||
font-size: 72px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
#gh-link {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
@media (min-width: 980px) {
|
||||
#gh-link {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 980px) {
|
||||
.navbar .nav {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.navbar-inverse .nav-collapse .nav > li > a {
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 979px) {
|
||||
h1 {
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 979px) {
|
||||
body {
|
||||
padding: inherit;
|
||||
}
|
||||
|
||||
.navbar-fixed-top,
|
||||
.navbar-fixed-bottom,
|
||||
.navbar-static-top {
|
||||
margin-right: inherit;
|
||||
margin-left: inherit;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.navbar-fixed-top .navbar-inner {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.navbar .container {
|
||||
width: 724px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.navbar .container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.navbar .logo a {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,168 +1,229 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<title>Monaco Editor</title>
|
||||
|
||||
<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="./all.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">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<pre data-preload="index/samples/sample.typescript.txt"></pre>
|
||||
<pre data-preload="index/samples/diff.lhs.txt"></pre>
|
||||
<pre data-preload="index/samples/diff.rhs.txt"></pre>
|
||||
<a id="gh-link" href="https://github.com/Microsoft/monaco-editor"><img
|
||||
width="149" height="149" alt="Fork me on GitHub" src="./fork.png"/></a>
|
||||
<nav class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<a href="index.html">Monaco Editor</a>
|
||||
</div>
|
||||
<!-- collapse button for smaller screens -->
|
||||
<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>
|
||||
</button>
|
||||
|
||||
<!-- navbar title -->
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
<li><a class="nav-item" href="index.html">Home</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="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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<section class="try">
|
||||
<div class="container">
|
||||
<h3>About</h3>
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<br/>
|
||||
<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>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>
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
<h3>Download v{{version}}</h3>
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<br/>
|
||||
<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>
|
||||
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>
|
||||
<hr/>
|
||||
<h3>Editor</h3>
|
||||
<div class="editor row">
|
||||
<div class="span3">
|
||||
<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>
|
||||
<br>
|
||||
<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,
|
||||
Python, Ruby, SASS, R, Objective-C</p>
|
||||
<br>
|
||||
<p>Colorizers are implemented using <a href="monarch.html"
|
||||
target="_blank">Monarch</a>.</p>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<label class="control-label">Language</label>
|
||||
<select class="language-picker"></select>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<label class="control-label">Theme</label>
|
||||
<select class="theme-picker">
|
||||
<option>Visual Studio</option>
|
||||
<option>Visual Studio Dark</option>
|
||||
<option>High Contrast Dark</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor-frame">
|
||||
<div class="loading editor" style="display: none;">
|
||||
<div class="progress progress-striped active">
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="editor"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<h3>Diff Editor</h3>
|
||||
<div class="editor row">
|
||||
<div class="span3">
|
||||
<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>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<div class="row">
|
||||
<div class="span8">
|
||||
<div class="checkbox">
|
||||
<label class="control-label">
|
||||
<input id="inline-diff-checkbox" type="checkbox" value=""> Inline diff
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor-frame">
|
||||
<div class="loading diff-editor" style="display: none;">
|
||||
<div class="progress progress-striped active">
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="diff-editor"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<footer class="container">
|
||||
<hr>
|
||||
<p class="text-center">
|
||||
<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;">
|
||||
</a>
|
||||
<br/>
|
||||
<small>© {{year}} Microsoft</small>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<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 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.js"></script>
|
||||
<script data-inline="yes-please" src="./index/index.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<title>Monaco Editor</title>
|
||||
|
||||
<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="./all.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"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<pre data-preload="index/samples/sample.typescript.txt"></pre>
|
||||
<pre data-preload="index/samples/diff.lhs.txt"></pre>
|
||||
<pre data-preload="index/samples/diff.rhs.txt"></pre>
|
||||
<a id="gh-link" href="https://github.com/Microsoft/monaco-editor"
|
||||
><img width="149" height="149" alt="Fork me on GitHub" src="./fork.png"
|
||||
/></a>
|
||||
<nav class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<a href="index.html">Monaco Editor</a>
|
||||
</div>
|
||||
<!-- collapse button for smaller screens -->
|
||||
<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>
|
||||
</button>
|
||||
|
||||
<!-- navbar title -->
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
<li><a class="nav-item" href="index.html">Home</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="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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<section class="try">
|
||||
<div class="container">
|
||||
<h3>About</h3>
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<br />
|
||||
<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>
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<h3>Download v{{version}}</h3>
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<br />
|
||||
<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
|
||||
>
|
||||
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>
|
||||
<hr />
|
||||
<h3>Editor</h3>
|
||||
<div class="editor row">
|
||||
<div class="span3">
|
||||
<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>
|
||||
<br />
|
||||
<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, Python, Ruby, SASS, R, Objective-C
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
Colorizers are implemented using
|
||||
<a href="monarch.html" target="_blank">Monarch</a>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<label class="control-label">Language</label>
|
||||
<select class="language-picker"></select>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<label class="control-label">Theme</label>
|
||||
<select class="theme-picker">
|
||||
<option>Visual Studio</option>
|
||||
<option>Visual Studio Dark</option>
|
||||
<option>High Contrast Dark</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor-frame">
|
||||
<div class="loading editor" style="display: none">
|
||||
<div class="progress progress-striped active">
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="editor"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<h3>Diff Editor</h3>
|
||||
<div class="editor row">
|
||||
<div class="span3">
|
||||
<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>
|
||||
</div>
|
||||
<div class="span9">
|
||||
<div class="row">
|
||||
<div class="span8">
|
||||
<div class="checkbox">
|
||||
<label class="control-label">
|
||||
<input id="inline-diff-checkbox" type="checkbox" value="" />
|
||||
Inline diff
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor-frame">
|
||||
<div class="loading diff-editor" style="display: none">
|
||||
<div class="progress progress-striped active">
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="diff-editor"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="container">
|
||||
<hr />
|
||||
<p class="text-center">
|
||||
<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"
|
||||
/>
|
||||
</a>
|
||||
<br />
|
||||
<small>© {{year}} Microsoft</small>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<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 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.js"></script>
|
||||
<script data-inline="yes-please" src="./index/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,256 +1,258 @@
|
||||
.try .drops {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.try .drops li {
|
||||
float: left;
|
||||
width: auto;
|
||||
height: auto;
|
||||
text-indent: 0;
|
||||
font-size: 26px;
|
||||
line-height: normal;
|
||||
margin: 0 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.try .drops li a:hover,
|
||||
.try .drops li a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.try .drops li h4 {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.try .drops li.active h4,
|
||||
.try .drops li.active:hover h4 {
|
||||
color: #0072C6;
|
||||
}
|
||||
|
||||
.try .drops li:hover h4 {
|
||||
color: rgba(0, 114, 198, .5);
|
||||
}
|
||||
|
||||
.try .editor.row {
|
||||
padding: 18px 0
|
||||
}
|
||||
|
||||
.try .row h4 {
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.try .tile {
|
||||
position: relative;
|
||||
height: 72px;
|
||||
border: 1px solid #ddd;
|
||||
text-align: right;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
|
||||
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
|
||||
|
||||
-webkit-box-sizing: border-box;
|
||||
-o-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.try .tile:hover {
|
||||
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
|
||||
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.try .tile h4 {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
bottom: 12px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.try .tile .glyph {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
bottom: -6px;
|
||||
background: url('../img/cloud.png') no-repeat;
|
||||
background-size: 80px 43px;
|
||||
height: 43px;
|
||||
width: 80px;
|
||||
|
||||
opacity: .5;
|
||||
transition: opacity .5s ease, bottom .5s ease;
|
||||
-webkit-transition: opacity .5s ease, bottom .5s ease;
|
||||
}
|
||||
|
||||
.try .tile:hover .glyph {
|
||||
opacity: 1;
|
||||
bottom: -2px;
|
||||
}
|
||||
|
||||
.try .editor.row h4 small {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.try .editor.row .control-label {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -4px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.try .editor.row .monaco-editor .find-widget input[type="text"] {
|
||||
margin-bottom: 0;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
-o-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.try .editor.row .monaco-editor .find-widget .monaco-checkbox .label {
|
||||
min-height: 20px;
|
||||
min-width: 20px;
|
||||
}
|
||||
|
||||
.try .editor.row .monaco-editor .find-widget .close {
|
||||
float: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.try .editor .editor-frame {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.try .editor .editor-frame #editor,
|
||||
.try .editor .editor-frame #diff-editor {
|
||||
height: 400px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
.try .editor .editor-frame .loading {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(255, 255, 255, .5);
|
||||
margin: 0 auto;
|
||||
display: none;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.try .editor .editor-frame .progress {
|
||||
width: 50%;
|
||||
margin: 15% auto 0;
|
||||
}
|
||||
|
||||
.try .editor .editor-frame .progress .bar {
|
||||
width: 100%;
|
||||
background-color: #4bb1cf;
|
||||
}
|
||||
|
||||
.try .editor .editor-frame #editor .alert,
|
||||
.try .editor .editor-frame #diff-editor .alert {
|
||||
margin: 18% auto 0;
|
||||
width: 30%;
|
||||
text-align: center;
|
||||
color: #b94a48;
|
||||
background-color: #f2dede;
|
||||
border-color: #eed3d7;
|
||||
}
|
||||
|
||||
.try .editor #editor .monaco-editor .row,
|
||||
.try .editor #diff-editor .monaco-editor .row {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.try .editor .vs.monaco-editor .context-view.monaco-menu-container a {
|
||||
color: #646465;
|
||||
}
|
||||
|
||||
.try .editor .vs-dark.monaco-editor .context-view.monaco-menu-container a {
|
||||
color: #BBB;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.try .editor .row {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.try .container {
|
||||
margin: 0 24px;
|
||||
}
|
||||
|
||||
.try .tile h4 {
|
||||
right: 6px;
|
||||
}
|
||||
|
||||
.try .editor > .span9 .row .span4 {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.try .editor h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.try .editor > .span3 p,
|
||||
.try .editor > .span3 h4 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 320px) {
|
||||
.try .editor > .span9 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ------- BEGIN bootstrap fixes for the editor ------- */
|
||||
|
||||
.monaco-editor .container:before, .monaco-editor .row:before {
|
||||
content: "";
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.monaco-editor .container:after, .monaco-editor .row:after {
|
||||
clear: inherit;
|
||||
}
|
||||
|
||||
.monaco-editor .container {
|
||||
width: auto;
|
||||
margin: inherit;
|
||||
padding: inherit;
|
||||
}
|
||||
|
||||
.monaco-editor .close {
|
||||
float: none;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
text-shadow: inherit;
|
||||
opacity: inherit;
|
||||
filter: inherit;
|
||||
}
|
||||
|
||||
.monaco-editor .row {
|
||||
margin: inherit;
|
||||
}
|
||||
|
||||
.monaco-editor .invisible {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* ------- END bootstrap fixes for the editor ------- */
|
||||
.try .drops {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.try .drops li {
|
||||
float: left;
|
||||
width: auto;
|
||||
height: auto;
|
||||
text-indent: 0;
|
||||
font-size: 26px;
|
||||
line-height: normal;
|
||||
margin: 0 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.try .drops li a:hover,
|
||||
.try .drops li a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.try .drops li h4 {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.try .drops li.active h4,
|
||||
.try .drops li.active:hover h4 {
|
||||
color: #0072c6;
|
||||
}
|
||||
|
||||
.try .drops li:hover h4 {
|
||||
color: rgba(0, 114, 198, 0.5);
|
||||
}
|
||||
|
||||
.try .editor.row {
|
||||
padding: 18px 0;
|
||||
}
|
||||
|
||||
.try .row h4 {
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.try .tile {
|
||||
position: relative;
|
||||
height: 72px;
|
||||
border: 1px solid #ddd;
|
||||
text-align: right;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
|
||||
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
|
||||
|
||||
-webkit-box-sizing: border-box;
|
||||
-o-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.try .tile:hover {
|
||||
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
|
||||
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.try .tile h4 {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
bottom: 12px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.try .tile .glyph {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
bottom: -6px;
|
||||
background: url('../img/cloud.png') no-repeat;
|
||||
background-size: 80px 43px;
|
||||
height: 43px;
|
||||
width: 80px;
|
||||
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.5s ease, bottom 0.5s ease;
|
||||
-webkit-transition: opacity 0.5s ease, bottom 0.5s ease;
|
||||
}
|
||||
|
||||
.try .tile:hover .glyph {
|
||||
opacity: 1;
|
||||
bottom: -2px;
|
||||
}
|
||||
|
||||
.try .editor.row h4 small {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.try .editor.row .control-label {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -4px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.try .editor.row .monaco-editor .find-widget input[type='text'] {
|
||||
margin-bottom: 0;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
-o-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.try .editor.row .monaco-editor .find-widget .monaco-checkbox .label {
|
||||
min-height: 20px;
|
||||
min-width: 20px;
|
||||
}
|
||||
|
||||
.try .editor.row .monaco-editor .find-widget .close {
|
||||
float: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.try .editor .editor-frame {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.try .editor .editor-frame #editor,
|
||||
.try .editor .editor-frame #diff-editor {
|
||||
height: 400px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
.try .editor .editor-frame .loading {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
margin: 0 auto;
|
||||
display: none;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.try .editor .editor-frame .progress {
|
||||
width: 50%;
|
||||
margin: 15% auto 0;
|
||||
}
|
||||
|
||||
.try .editor .editor-frame .progress .bar {
|
||||
width: 100%;
|
||||
background-color: #4bb1cf;
|
||||
}
|
||||
|
||||
.try .editor .editor-frame #editor .alert,
|
||||
.try .editor .editor-frame #diff-editor .alert {
|
||||
margin: 18% auto 0;
|
||||
width: 30%;
|
||||
text-align: center;
|
||||
color: #b94a48;
|
||||
background-color: #f2dede;
|
||||
border-color: #eed3d7;
|
||||
}
|
||||
|
||||
.try .editor #editor .monaco-editor .row,
|
||||
.try .editor #diff-editor .monaco-editor .row {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.try .editor .vs.monaco-editor .context-view.monaco-menu-container a {
|
||||
color: #646465;
|
||||
}
|
||||
|
||||
.try .editor .vs-dark.monaco-editor .context-view.monaco-menu-container a {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.try .editor .row {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.try .container {
|
||||
margin: 0 24px;
|
||||
}
|
||||
|
||||
.try .tile h4 {
|
||||
right: 6px;
|
||||
}
|
||||
|
||||
.try .editor > .span9 .row .span4 {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.try .editor h4 {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.try .editor > .span3 p,
|
||||
.try .editor > .span3 h4 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 320px) {
|
||||
.try .editor > .span9 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ------- BEGIN bootstrap fixes for the editor ------- */
|
||||
|
||||
.monaco-editor .container:before,
|
||||
.monaco-editor .row:before {
|
||||
content: '';
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.monaco-editor .container:after,
|
||||
.monaco-editor .row:after {
|
||||
clear: inherit;
|
||||
}
|
||||
|
||||
.monaco-editor .container {
|
||||
width: auto;
|
||||
margin: inherit;
|
||||
padding: inherit;
|
||||
}
|
||||
|
||||
.monaco-editor .close {
|
||||
float: none;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
text-shadow: inherit;
|
||||
opacity: inherit;
|
||||
filter: inherit;
|
||||
}
|
||||
|
||||
.monaco-editor .row {
|
||||
margin: inherit;
|
||||
}
|
||||
|
||||
.monaco-editor .invisible {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* ------- END bootstrap fixes for the editor ------- */
|
||||
|
||||
@ -1,168 +1,174 @@
|
||||
/// <reference path="../../release/monaco.d.ts" />
|
||||
|
||||
"use strict";
|
||||
|
||||
var editor = null, diffEditor = null;
|
||||
|
||||
$(document).ready(function() {
|
||||
require(['vs/editor/editor.main'], function () {
|
||||
var MODES = (function() {
|
||||
var modesIds = monaco.languages.getLanguages().map(function(lang) { return lang.id; });
|
||||
modesIds.sort();
|
||||
|
||||
return modesIds.map(function(modeId) {
|
||||
return {
|
||||
modeId: modeId,
|
||||
sampleURL: 'index/samples/sample.' + modeId + '.txt'
|
||||
};
|
||||
});
|
||||
})();
|
||||
|
||||
var startModeIndex = 0;
|
||||
for (var i = 0; i < MODES.length; i++) {
|
||||
var o = document.createElement('option');
|
||||
o.textContent = MODES[i].modeId;
|
||||
if (MODES[i].modeId === 'typescript') {
|
||||
startModeIndex = i;
|
||||
}
|
||||
$(".language-picker").append(o);
|
||||
}
|
||||
$(".language-picker")[0].selectedIndex = startModeIndex;
|
||||
loadSample(MODES[startModeIndex]);
|
||||
$(".language-picker").change(function() {
|
||||
loadSample(MODES[this.selectedIndex]);
|
||||
});
|
||||
|
||||
$(".theme-picker").change(function() {
|
||||
changeTheme(this.selectedIndex);
|
||||
});
|
||||
|
||||
loadDiffSample();
|
||||
|
||||
$('#inline-diff-checkbox').change(function () {
|
||||
diffEditor.updateOptions({
|
||||
renderSideBySide: !$(this).is(':checked')
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
window.onresize = function () {
|
||||
if (editor) {
|
||||
editor.layout();
|
||||
}
|
||||
if (diffEditor) {
|
||||
diffEditor.layout();
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
var preloaded = {};
|
||||
(function() {
|
||||
var elements = Array.prototype.slice.call(document.querySelectorAll('pre[data-preload]'), 0);
|
||||
|
||||
elements.forEach(function(el) {
|
||||
var path = el.getAttribute('data-preload');
|
||||
preloaded[path] = el.innerText || el.textContent;
|
||||
el.parentNode.removeChild(el);
|
||||
});
|
||||
})();
|
||||
|
||||
function xhr(url, cb) {
|
||||
if (preloaded[url]) {
|
||||
return cb(null, preloaded[url]);
|
||||
}
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: url,
|
||||
dataType: 'text',
|
||||
error: function () {
|
||||
cb(this, null);
|
||||
}
|
||||
}).done(function(data) {
|
||||
cb(null, data);
|
||||
});
|
||||
}
|
||||
|
||||
function loadSample(mode) {
|
||||
$('.loading.editor').show();
|
||||
xhr(mode.sampleURL, function(err, data) {
|
||||
if (err) {
|
||||
if (editor) {
|
||||
if (editor.getModel()) {
|
||||
editor.getModel().dispose();
|
||||
}
|
||||
editor.dispose();
|
||||
editor = null;
|
||||
}
|
||||
$('.loading.editor').fadeOut({ duration: 200 });
|
||||
$('#editor').empty();
|
||||
$('#editor').append('<p class="alert alert-error">Failed to load ' + mode.modeId + ' sample</p>');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!editor) {
|
||||
$('#editor').empty();
|
||||
editor = monaco.editor.create(document.getElementById('editor'), {
|
||||
model: null,
|
||||
});
|
||||
}
|
||||
|
||||
var oldModel = editor.getModel();
|
||||
var newModel = monaco.editor.createModel(data, mode.modeId);
|
||||
editor.setModel(newModel);
|
||||
if (oldModel) {
|
||||
oldModel.dispose();
|
||||
}
|
||||
$('.loading.editor').fadeOut({ duration: 300 });
|
||||
})
|
||||
}
|
||||
|
||||
function loadDiffSample() {
|
||||
|
||||
var onError = function() {
|
||||
$('.loading.diff-editor').fadeOut({ duration: 200 });
|
||||
$('#diff-editor').append('<p class="alert alert-error">Failed to load diff editor sample</p>');
|
||||
};
|
||||
|
||||
$('.loading.diff-editor').show();
|
||||
|
||||
var lhsData = null, rhsData = null, jsMode = null;
|
||||
|
||||
xhr('index/samples/diff.lhs.txt', function(err, data) {
|
||||
if (err) {
|
||||
return onError();
|
||||
}
|
||||
lhsData = data;
|
||||
onProgress();
|
||||
})
|
||||
xhr('index/samples/diff.rhs.txt', function(err, data) {
|
||||
if (err) {
|
||||
return onError();
|
||||
}
|
||||
rhsData = data;
|
||||
onProgress();
|
||||
})
|
||||
|
||||
function onProgress() {
|
||||
if (lhsData && rhsData) {
|
||||
diffEditor = monaco.editor.createDiffEditor(document.getElementById('diff-editor'), {
|
||||
enableSplitViewResizing: false
|
||||
});
|
||||
|
||||
var lhsModel = monaco.editor.createModel(lhsData, 'text/javascript');
|
||||
var rhsModel = monaco.editor.createModel(rhsData, 'text/javascript');
|
||||
|
||||
diffEditor.setModel({
|
||||
original: lhsModel,
|
||||
modified: rhsModel
|
||||
});
|
||||
|
||||
$('.loading.diff-editor').fadeOut({ duration: 300 });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function changeTheme(theme) {
|
||||
var newTheme = (theme === 1 ? 'vs-dark' : ( theme === 0 ? 'vs' : 'hc-black' ));
|
||||
monaco.editor.setTheme(newTheme);
|
||||
}
|
||||
/// <reference path="../../release/monaco.d.ts" />
|
||||
|
||||
'use strict';
|
||||
|
||||
var editor = null,
|
||||
diffEditor = null;
|
||||
|
||||
$(document).ready(function () {
|
||||
require(['vs/editor/editor.main'], function () {
|
||||
var MODES = (function () {
|
||||
var modesIds = monaco.languages.getLanguages().map(function (lang) {
|
||||
return lang.id;
|
||||
});
|
||||
modesIds.sort();
|
||||
|
||||
return modesIds.map(function (modeId) {
|
||||
return {
|
||||
modeId: modeId,
|
||||
sampleURL: 'index/samples/sample.' + modeId + '.txt'
|
||||
};
|
||||
});
|
||||
})();
|
||||
|
||||
var startModeIndex = 0;
|
||||
for (var i = 0; i < MODES.length; i++) {
|
||||
var o = document.createElement('option');
|
||||
o.textContent = MODES[i].modeId;
|
||||
if (MODES[i].modeId === 'typescript') {
|
||||
startModeIndex = i;
|
||||
}
|
||||
$('.language-picker').append(o);
|
||||
}
|
||||
$('.language-picker')[0].selectedIndex = startModeIndex;
|
||||
loadSample(MODES[startModeIndex]);
|
||||
$('.language-picker').change(function () {
|
||||
loadSample(MODES[this.selectedIndex]);
|
||||
});
|
||||
|
||||
$('.theme-picker').change(function () {
|
||||
changeTheme(this.selectedIndex);
|
||||
});
|
||||
|
||||
loadDiffSample();
|
||||
|
||||
$('#inline-diff-checkbox').change(function () {
|
||||
diffEditor.updateOptions({
|
||||
renderSideBySide: !$(this).is(':checked')
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
window.onresize = function () {
|
||||
if (editor) {
|
||||
editor.layout();
|
||||
}
|
||||
if (diffEditor) {
|
||||
diffEditor.layout();
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
var preloaded = {};
|
||||
(function () {
|
||||
var elements = Array.prototype.slice.call(document.querySelectorAll('pre[data-preload]'), 0);
|
||||
|
||||
elements.forEach(function (el) {
|
||||
var path = el.getAttribute('data-preload');
|
||||
preloaded[path] = el.innerText || el.textContent;
|
||||
el.parentNode.removeChild(el);
|
||||
});
|
||||
})();
|
||||
|
||||
function xhr(url, cb) {
|
||||
if (preloaded[url]) {
|
||||
return cb(null, preloaded[url]);
|
||||
}
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: url,
|
||||
dataType: 'text',
|
||||
error: function () {
|
||||
cb(this, null);
|
||||
}
|
||||
}).done(function (data) {
|
||||
cb(null, data);
|
||||
});
|
||||
}
|
||||
|
||||
function loadSample(mode) {
|
||||
$('.loading.editor').show();
|
||||
xhr(mode.sampleURL, function (err, data) {
|
||||
if (err) {
|
||||
if (editor) {
|
||||
if (editor.getModel()) {
|
||||
editor.getModel().dispose();
|
||||
}
|
||||
editor.dispose();
|
||||
editor = null;
|
||||
}
|
||||
$('.loading.editor').fadeOut({ duration: 200 });
|
||||
$('#editor').empty();
|
||||
$('#editor').append(
|
||||
'<p class="alert alert-error">Failed to load ' + mode.modeId + ' sample</p>'
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!editor) {
|
||||
$('#editor').empty();
|
||||
editor = monaco.editor.create(document.getElementById('editor'), {
|
||||
model: null
|
||||
});
|
||||
}
|
||||
|
||||
var oldModel = editor.getModel();
|
||||
var newModel = monaco.editor.createModel(data, mode.modeId);
|
||||
editor.setModel(newModel);
|
||||
if (oldModel) {
|
||||
oldModel.dispose();
|
||||
}
|
||||
$('.loading.editor').fadeOut({ duration: 300 });
|
||||
});
|
||||
}
|
||||
|
||||
function loadDiffSample() {
|
||||
var onError = function () {
|
||||
$('.loading.diff-editor').fadeOut({ duration: 200 });
|
||||
$('#diff-editor').append('<p class="alert alert-error">Failed to load diff editor sample</p>');
|
||||
};
|
||||
|
||||
$('.loading.diff-editor').show();
|
||||
|
||||
var lhsData = null,
|
||||
rhsData = null,
|
||||
jsMode = null;
|
||||
|
||||
xhr('index/samples/diff.lhs.txt', function (err, data) {
|
||||
if (err) {
|
||||
return onError();
|
||||
}
|
||||
lhsData = data;
|
||||
onProgress();
|
||||
});
|
||||
xhr('index/samples/diff.rhs.txt', function (err, data) {
|
||||
if (err) {
|
||||
return onError();
|
||||
}
|
||||
rhsData = data;
|
||||
onProgress();
|
||||
});
|
||||
|
||||
function onProgress() {
|
||||
if (lhsData && rhsData) {
|
||||
diffEditor = monaco.editor.createDiffEditor(document.getElementById('diff-editor'), {
|
||||
enableSplitViewResizing: false
|
||||
});
|
||||
|
||||
var lhsModel = monaco.editor.createModel(lhsData, 'text/javascript');
|
||||
var rhsModel = monaco.editor.createModel(rhsData, 'text/javascript');
|
||||
|
||||
diffEditor.setModel({
|
||||
original: lhsModel,
|
||||
modified: rhsModel
|
||||
});
|
||||
|
||||
$('.loading.diff-editor').fadeOut({ duration: 300 });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function changeTheme(theme) {
|
||||
var newTheme = theme === 1 ? 'vs-dark' : theme === 0 ? 'vs' : 'hc-black';
|
||||
monaco.editor.setTheme(newTheme);
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,219 +1,296 @@
|
||||
|
||||
|
||||
/* common extra token classes */
|
||||
.monaco-editor .token.invalid { border-bottom: red dotted 1px }
|
||||
.monaco-editor .token.identifier { }
|
||||
.monaco-editor .token.comment.doc { font-style: normal; }
|
||||
|
||||
.monaco-editor .token.type { color: teal; }
|
||||
.monaco-editor .token.type.delimiter { 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 */
|
||||
|
||||
.monaco-editor.vs-dark .token.type { color: darkcyan;}
|
||||
.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.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 */
|
||||
.token.keyword.dot { color: black; }
|
||||
.token.typeparam { color: #555; }
|
||||
.token.typevar { font-style: italic; }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.monaco-editor .current-line,
|
||||
.monaco-editor.vs .current-line,
|
||||
.monaco-editor.monaco .current-line { border: none; }
|
||||
.monaco-editor.vs .key.js { color: navy;}
|
||||
|
||||
.monaco-editor.vs .token.string.escape,
|
||||
.token.regexp.escape { color: dimgray; }
|
||||
.token.regexp.escape.control { color: black; }
|
||||
|
||||
.token.emphasis { font-style: italic;}
|
||||
.token.strong { font-weight: bold; }
|
||||
.token.header { color: navy ;}
|
||||
|
||||
/* -------------------------------------------
|
||||
Workbench UI style
|
||||
--------------------------------------------*/
|
||||
#editor, #langPane {
|
||||
height: 60ex;
|
||||
border: 1px solid #ccc
|
||||
}
|
||||
|
||||
#langPane {
|
||||
height: 72ex;
|
||||
}
|
||||
|
||||
#main {
|
||||
font-family: "Segoe UI Light", "Segoe UI", Arial, "HelveticaNeue-Light", sans-serif;
|
||||
font-size: 12pt;
|
||||
width: 94%;
|
||||
padding: 0pt;
|
||||
margin: 1% 3% 5ex 3%;
|
||||
}
|
||||
|
||||
#leftPane {
|
||||
float: left;
|
||||
width: 58%;
|
||||
margin: 0pt;
|
||||
margin-bottom: 2ex;
|
||||
}
|
||||
|
||||
#rightPane {
|
||||
width: 40%;
|
||||
float: right;
|
||||
margin: 0pt;
|
||||
}
|
||||
|
||||
#header, #footer {
|
||||
clear: both;
|
||||
font-size: 18pt;
|
||||
margin-bottom: 1ex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
margin: 0pt 0pt 5pt -17px;
|
||||
padding: 0pt;
|
||||
width: 17px;
|
||||
}
|
||||
|
||||
#commandbar {
|
||||
margin-top: 4px;
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
|
||||
#monarchConsole {
|
||||
color: black;
|
||||
overflow: auto;
|
||||
height: 100px;
|
||||
border: lightgray 1px solid;
|
||||
padding-left: 1ex;
|
||||
margin-top: 10px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
#sampleselect {
|
||||
width: 15ex;
|
||||
}
|
||||
#themeselect, #sampleselect {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.paneheader {
|
||||
margin-bottom: 0.5ex;
|
||||
font-size: 14pt;
|
||||
}
|
||||
|
||||
.selectbox {
|
||||
float: right;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.button {
|
||||
border: 1px solid lightgray;
|
||||
cursor: pointer;
|
||||
padding: 0ex 0.5ex 0ex 0.5ex;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: lightgray;
|
||||
border-color: dimgray;
|
||||
}
|
||||
|
||||
.touchbutton:hover {
|
||||
background-color: #F8F8F8;
|
||||
}
|
||||
|
||||
.touchbutton {
|
||||
border: 1px solid;
|
||||
border-radius: 1000px; /* circle */
|
||||
height: 3ex;
|
||||
width: 3ex; /* needed for safari */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.touchbutton:hover {
|
||||
background-color: #F8F8F8;
|
||||
}
|
||||
|
||||
.arrowdown {
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
/*-------------------------------------------------------------------
|
||||
documentation style
|
||||
-------------------------------------------------------------------*/
|
||||
#documentation {
|
||||
clear: both;
|
||||
border: lightgray 1px solid;
|
||||
padding: 1ex 4ex 1ex 3ex;
|
||||
font-family: "Segoe UI", Arial, "HelveticaNeue-Light", sans-serif;
|
||||
}
|
||||
|
||||
#documentation a {
|
||||
color: navy;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
#documentation .monaco-editor.monaco .current-line,
|
||||
#documentation .monaco-editor { background-color: #fafafa }
|
||||
#documentation .string.escape { color: dimgray;}
|
||||
|
||||
h1,h2,h3,h4
|
||||
{ font-weight: normal;
|
||||
margin-top: 0pt;
|
||||
margin-left: -1.5ex;
|
||||
margin-bottom: 0pt;
|
||||
}
|
||||
|
||||
h2 { font-size: 16pt;}
|
||||
h3 { font-size: 120%;}
|
||||
|
||||
ul { padding-left: 1.5em
|
||||
; margin-left: 0pt
|
||||
}
|
||||
|
||||
.options,
|
||||
pre { border: 1px solid #888
|
||||
; padding: 1ex
|
||||
; background: #F8F8F8
|
||||
; font-size: 10pt;
|
||||
}
|
||||
|
||||
|
||||
code, pre,dt { font-family: Consolas, monospace }
|
||||
|
||||
strong { color: black }
|
||||
|
||||
td { vertical-align: top }
|
||||
img { margin: 2ex }
|
||||
|
||||
|
||||
dt { color: navy; margin-top: 2ex; padding: 2px;}
|
||||
.dt { color: navy }
|
||||
.adv { color: maroon; }
|
||||
|
||||
dl dl dt { margin-top: 1ex;}
|
||||
|
||||
#documentation .keyword { color: blue; }
|
||||
#documentation .tag { color: navy; }
|
||||
/* common extra token classes */
|
||||
.monaco-editor .token.invalid {
|
||||
border-bottom: red dotted 1px;
|
||||
}
|
||||
.monaco-editor .token.comment.doc {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.monaco-editor .token.type {
|
||||
color: teal;
|
||||
}
|
||||
.monaco-editor .token.type.delimiter {
|
||||
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 */
|
||||
|
||||
.monaco-editor.vs-dark .token.type {
|
||||
color: darkcyan;
|
||||
}
|
||||
.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.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 */
|
||||
.token.keyword.dot {
|
||||
color: black;
|
||||
}
|
||||
.token.typeparam {
|
||||
color: #555;
|
||||
}
|
||||
.token.typevar {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.monaco-editor .current-line,
|
||||
.monaco-editor.vs .current-line,
|
||||
.monaco-editor.monaco .current-line {
|
||||
border: none;
|
||||
}
|
||||
.monaco-editor.vs .key.js {
|
||||
color: navy;
|
||||
}
|
||||
|
||||
.monaco-editor.vs .token.string.escape,
|
||||
.token.regexp.escape {
|
||||
color: dimgray;
|
||||
}
|
||||
.token.regexp.escape.control {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.token.emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
.token.strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.header {
|
||||
color: navy;
|
||||
}
|
||||
|
||||
/* -------------------------------------------
|
||||
Workbench UI style
|
||||
--------------------------------------------*/
|
||||
#editor,
|
||||
#langPane {
|
||||
height: 60ex;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
#langPane {
|
||||
height: 72ex;
|
||||
}
|
||||
|
||||
#main {
|
||||
font-family: 'Segoe UI Light', 'Segoe UI', Arial, 'HelveticaNeue-Light', sans-serif;
|
||||
font-size: 12pt;
|
||||
width: 94%;
|
||||
padding: 0pt;
|
||||
margin: 1% 3% 5ex 3%;
|
||||
}
|
||||
|
||||
#leftPane {
|
||||
float: left;
|
||||
width: 58%;
|
||||
margin: 0pt;
|
||||
margin-bottom: 2ex;
|
||||
}
|
||||
|
||||
#rightPane {
|
||||
width: 40%;
|
||||
float: right;
|
||||
margin: 0pt;
|
||||
}
|
||||
|
||||
#header,
|
||||
#footer {
|
||||
clear: both;
|
||||
font-size: 18pt;
|
||||
margin-bottom: 1ex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
margin: 0pt 0pt 5pt -17px;
|
||||
padding: 0pt;
|
||||
width: 17px;
|
||||
}
|
||||
|
||||
#commandbar {
|
||||
margin-top: 4px;
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
#monarchConsole {
|
||||
color: black;
|
||||
overflow: auto;
|
||||
height: 100px;
|
||||
border: lightgray 1px solid;
|
||||
padding-left: 1ex;
|
||||
margin-top: 10px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
#sampleselect {
|
||||
width: 15ex;
|
||||
}
|
||||
#themeselect,
|
||||
#sampleselect {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.paneheader {
|
||||
margin-bottom: 0.5ex;
|
||||
font-size: 14pt;
|
||||
}
|
||||
|
||||
.selectbox {
|
||||
float: right;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.button {
|
||||
border: 1px solid lightgray;
|
||||
cursor: pointer;
|
||||
padding: 0ex 0.5ex 0ex 0.5ex;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: lightgray;
|
||||
border-color: dimgray;
|
||||
}
|
||||
|
||||
.touchbutton:hover {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.touchbutton {
|
||||
border: 1px solid;
|
||||
border-radius: 1000px; /* circle */
|
||||
height: 3ex;
|
||||
width: 3ex; /* needed for safari */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.touchbutton:hover {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.arrowdown {
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
/*-------------------------------------------------------------------
|
||||
documentation style
|
||||
-------------------------------------------------------------------*/
|
||||
#documentation {
|
||||
clear: both;
|
||||
border: lightgray 1px solid;
|
||||
padding: 1ex 4ex 1ex 3ex;
|
||||
font-family: 'Segoe UI', Arial, 'HelveticaNeue-Light', sans-serif;
|
||||
}
|
||||
|
||||
#documentation a {
|
||||
color: navy;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
#documentation .monaco-editor.monaco .current-line,
|
||||
#documentation .monaco-editor {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
#documentation .string.escape {
|
||||
color: dimgray;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
font-weight: normal;
|
||||
margin-top: 0pt;
|
||||
margin-left: -1.5ex;
|
||||
margin-bottom: 0pt;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 16pt;
|
||||
}
|
||||
h3 {
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 1.5em;
|
||||
margin-left: 0pt;
|
||||
}
|
||||
|
||||
.options,
|
||||
pre {
|
||||
border: 1px solid #888;
|
||||
padding: 1ex;
|
||||
background: #f8f8f8;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
code,
|
||||
pre,
|
||||
dt {
|
||||
font-family: Consolas, monospace;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: black;
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align: top;
|
||||
}
|
||||
img {
|
||||
margin: 2ex;
|
||||
}
|
||||
|
||||
dt {
|
||||
color: navy;
|
||||
margin-top: 2ex;
|
||||
padding: 2px;
|
||||
}
|
||||
.dt {
|
||||
color: navy;
|
||||
}
|
||||
.adv {
|
||||
color: maroon;
|
||||
}
|
||||
|
||||
dl dl dt {
|
||||
margin-top: 1ex;
|
||||
}
|
||||
|
||||
#documentation .keyword {
|
||||
color: blue;
|
||||
}
|
||||
#documentation .tag {
|
||||
color: navy;
|
||||
}
|
||||
|
||||
@ -1,174 +1,172 @@
|
||||
/// <reference path="../../release/monaco.d.ts" />
|
||||
|
||||
"use strict";
|
||||
|
||||
/*-----------------------------------------
|
||||
General helpers
|
||||
------------------------------------------*/
|
||||
function clearInnerText(elem) {
|
||||
elem.innerHTML = "";
|
||||
}
|
||||
|
||||
function getInnerText(elem) {
|
||||
var text = elem.innerText;
|
||||
if (!text) text = elem.textContent;
|
||||
return text;
|
||||
}
|
||||
|
||||
function escapeToHTML(text) {
|
||||
return text.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
}
|
||||
|
||||
function appendInnerText(elem, txt) {
|
||||
txt = escapeToHTML(txt);
|
||||
elem.innerHTML += txt;
|
||||
}
|
||||
|
||||
function setInnerText(elem, txt) {
|
||||
clearInnerText(elem);
|
||||
appendInnerText(elem, txt);
|
||||
}
|
||||
|
||||
function getTextFromId(id) {
|
||||
var elem = document.getElementById(id);
|
||||
if (elem == null) return null;
|
||||
return getInnerText(elem);
|
||||
}
|
||||
|
||||
|
||||
/* -----------------------------------------
|
||||
The main loader for the workbench UI
|
||||
------------------------------------------*/
|
||||
|
||||
var outputPane = document.getElementById("monarchConsole");
|
||||
|
||||
var isDirty = false;
|
||||
window.onbeforeunload = function (ev) {
|
||||
if (isDirty) {
|
||||
return "If you leave this page any unsaved work will be lost.";
|
||||
}
|
||||
};
|
||||
|
||||
function createLangModel(languageId, text) {
|
||||
monaco.languages.register({ id: languageId });
|
||||
|
||||
var langModel = monaco.editor.createModel(text, 'javascript');
|
||||
var update = function() {
|
||||
var def = null;
|
||||
try {
|
||||
def = eval("(function(){ " + langModel.getValue() + "; })()");
|
||||
} catch (err) {
|
||||
setInnerText(outputPane, err + '\n');
|
||||
return;
|
||||
}
|
||||
monaco.languages.setMonarchTokensProvider(languageId, def);
|
||||
setInnerText(outputPane, 'up-to-date\n');
|
||||
};
|
||||
langModel.onDidChangeContent(function() {
|
||||
isDirty = true;
|
||||
update();
|
||||
});
|
||||
update();
|
||||
|
||||
return langModel;
|
||||
}
|
||||
|
||||
function readSamples(sampleSelect) {
|
||||
var samples = {};
|
||||
|
||||
for (var i = 0; i < sampleSelect.options.length; i++) {
|
||||
var id = sampleSelect.options[i].value;
|
||||
if (!id || sampleSelect.options[i].disabled) {
|
||||
continue;
|
||||
}
|
||||
|
||||
var languageId = 'monarch-language-' + id;
|
||||
|
||||
var sampleText = getTextFromId(id + "-sample");
|
||||
|
||||
samples[id] = {
|
||||
languageId: languageId,
|
||||
langModel: createLangModel(languageId, getTextFromId(id)),
|
||||
langViewState: null,
|
||||
sampleModel: monaco.editor.createModel(sampleText, languageId),
|
||||
sampleViewState: null,
|
||||
};
|
||||
}
|
||||
|
||||
return samples;
|
||||
}
|
||||
|
||||
require(["vs/editor/editor.main"], function () {
|
||||
var sampleSelect = document.getElementById("sampleselect");
|
||||
var langPane = document.getElementById("langPane");
|
||||
var editorPane = document.getElementById("editor");
|
||||
|
||||
// Adjust height of editors
|
||||
var screenHeight = window.innerHeight;
|
||||
if (screenHeight) {
|
||||
var paneHeight = 0.76 * screenHeight;
|
||||
langPane.style.height = paneHeight + "px";
|
||||
editorPane.style.height = (paneHeight - 112) + "px"; // 100px + margin 10px + borders 2px
|
||||
}
|
||||
|
||||
var SAMPLES = readSamples(sampleSelect);
|
||||
var CURRENT_SAMPLE = null;
|
||||
|
||||
var langEditor = monaco.editor.create(langPane, {
|
||||
model: null,
|
||||
scrollBeyondLastLine: false
|
||||
});
|
||||
|
||||
var sampleEditor = monaco.editor.create(editorPane, {
|
||||
model: null,
|
||||
scrollBeyondLastLine: false
|
||||
});
|
||||
|
||||
var select = document.getElementById("themeselect");
|
||||
var currentTheme = "vs";
|
||||
select.onchange = function () {
|
||||
currentTheme = select.options[select.selectedIndex].value;
|
||||
monaco.editor.setTheme(currentTheme);
|
||||
};
|
||||
|
||||
// on resize
|
||||
function refreshLayout() {
|
||||
langEditor.layout();
|
||||
sampleEditor.layout();
|
||||
};
|
||||
window.onresize = refreshLayout;
|
||||
|
||||
// Switch to another sample
|
||||
function setEditorState(name) {
|
||||
if (!name || CURRENT_SAMPLE === name || !SAMPLES[name]) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Save previous sample's view state
|
||||
if (CURRENT_SAMPLE) {
|
||||
SAMPLES[CURRENT_SAMPLE].langViewState = langEditor.saveViewState();
|
||||
SAMPLES[CURRENT_SAMPLE].sampleViewState = sampleEditor.saveViewState();
|
||||
}
|
||||
|
||||
CURRENT_SAMPLE = name;
|
||||
|
||||
// Apply new sample
|
||||
langEditor.setModel(SAMPLES[CURRENT_SAMPLE].langModel);
|
||||
if (SAMPLES[CURRENT_SAMPLE].langViewState) {
|
||||
langEditor.restoreViewState(SAMPLES[CURRENT_SAMPLE].langViewState);
|
||||
}
|
||||
sampleEditor.setModel(SAMPLES[CURRENT_SAMPLE].sampleModel);
|
||||
if (SAMPLES[CURRENT_SAMPLE].sampleViewState) {
|
||||
sampleEditor.restoreViewState(SAMPLES[CURRENT_SAMPLE].sampleViewState);
|
||||
}
|
||||
}
|
||||
|
||||
// Refresh the sample text
|
||||
function refreshSample() {
|
||||
var name = sampleSelect.options[sampleSelect.selectedIndex].value;
|
||||
setEditorState(name);
|
||||
}
|
||||
sampleSelect.onchange = refreshSample;
|
||||
refreshSample(); // initialize initial text
|
||||
|
||||
}); // require
|
||||
/// <reference path="../../release/monaco.d.ts" />
|
||||
|
||||
'use strict';
|
||||
|
||||
/*-----------------------------------------
|
||||
General helpers
|
||||
------------------------------------------*/
|
||||
function clearInnerText(elem) {
|
||||
elem.innerHTML = '';
|
||||
}
|
||||
|
||||
function getInnerText(elem) {
|
||||
var text = elem.innerText;
|
||||
if (!text) text = elem.textContent;
|
||||
return text;
|
||||
}
|
||||
|
||||
function escapeToHTML(text) {
|
||||
return text.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
}
|
||||
|
||||
function appendInnerText(elem, txt) {
|
||||
txt = escapeToHTML(txt);
|
||||
elem.innerHTML += txt;
|
||||
}
|
||||
|
||||
function setInnerText(elem, txt) {
|
||||
clearInnerText(elem);
|
||||
appendInnerText(elem, txt);
|
||||
}
|
||||
|
||||
function getTextFromId(id) {
|
||||
var elem = document.getElementById(id);
|
||||
if (elem == null) return null;
|
||||
return getInnerText(elem);
|
||||
}
|
||||
|
||||
/* -----------------------------------------
|
||||
The main loader for the workbench UI
|
||||
------------------------------------------*/
|
||||
|
||||
var outputPane = document.getElementById('monarchConsole');
|
||||
|
||||
var isDirty = false;
|
||||
window.onbeforeunload = function (ev) {
|
||||
if (isDirty) {
|
||||
return 'If you leave this page any unsaved work will be lost.';
|
||||
}
|
||||
};
|
||||
|
||||
function createLangModel(languageId, text) {
|
||||
monaco.languages.register({ id: languageId });
|
||||
|
||||
var langModel = monaco.editor.createModel(text, 'javascript');
|
||||
var update = function () {
|
||||
var def = null;
|
||||
try {
|
||||
def = eval('(function(){ ' + langModel.getValue() + '; })()');
|
||||
} catch (err) {
|
||||
setInnerText(outputPane, err + '\n');
|
||||
return;
|
||||
}
|
||||
monaco.languages.setMonarchTokensProvider(languageId, def);
|
||||
setInnerText(outputPane, 'up-to-date\n');
|
||||
};
|
||||
langModel.onDidChangeContent(function () {
|
||||
isDirty = true;
|
||||
update();
|
||||
});
|
||||
update();
|
||||
|
||||
return langModel;
|
||||
}
|
||||
|
||||
function readSamples(sampleSelect) {
|
||||
var samples = {};
|
||||
|
||||
for (var i = 0; i < sampleSelect.options.length; i++) {
|
||||
var id = sampleSelect.options[i].value;
|
||||
if (!id || sampleSelect.options[i].disabled) {
|
||||
continue;
|
||||
}
|
||||
|
||||
var languageId = 'monarch-language-' + id;
|
||||
|
||||
var sampleText = getTextFromId(id + '-sample');
|
||||
|
||||
samples[id] = {
|
||||
languageId: languageId,
|
||||
langModel: createLangModel(languageId, getTextFromId(id)),
|
||||
langViewState: null,
|
||||
sampleModel: monaco.editor.createModel(sampleText, languageId),
|
||||
sampleViewState: null
|
||||
};
|
||||
}
|
||||
|
||||
return samples;
|
||||
}
|
||||
|
||||
require(['vs/editor/editor.main'], function () {
|
||||
var sampleSelect = document.getElementById('sampleselect');
|
||||
var langPane = document.getElementById('langPane');
|
||||
var editorPane = document.getElementById('editor');
|
||||
|
||||
// Adjust height of editors
|
||||
var screenHeight = window.innerHeight;
|
||||
if (screenHeight) {
|
||||
var paneHeight = 0.76 * screenHeight;
|
||||
langPane.style.height = paneHeight + 'px';
|
||||
editorPane.style.height = paneHeight - 112 + 'px'; // 100px + margin 10px + borders 2px
|
||||
}
|
||||
|
||||
var SAMPLES = readSamples(sampleSelect);
|
||||
var CURRENT_SAMPLE = null;
|
||||
|
||||
var langEditor = monaco.editor.create(langPane, {
|
||||
model: null,
|
||||
scrollBeyondLastLine: false
|
||||
});
|
||||
|
||||
var sampleEditor = monaco.editor.create(editorPane, {
|
||||
model: null,
|
||||
scrollBeyondLastLine: false
|
||||
});
|
||||
|
||||
var select = document.getElementById('themeselect');
|
||||
var currentTheme = 'vs';
|
||||
select.onchange = function () {
|
||||
currentTheme = select.options[select.selectedIndex].value;
|
||||
monaco.editor.setTheme(currentTheme);
|
||||
};
|
||||
|
||||
// on resize
|
||||
function refreshLayout() {
|
||||
langEditor.layout();
|
||||
sampleEditor.layout();
|
||||
}
|
||||
window.onresize = refreshLayout;
|
||||
|
||||
// Switch to another sample
|
||||
function setEditorState(name) {
|
||||
if (!name || CURRENT_SAMPLE === name || !SAMPLES[name]) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Save previous sample's view state
|
||||
if (CURRENT_SAMPLE) {
|
||||
SAMPLES[CURRENT_SAMPLE].langViewState = langEditor.saveViewState();
|
||||
SAMPLES[CURRENT_SAMPLE].sampleViewState = sampleEditor.saveViewState();
|
||||
}
|
||||
|
||||
CURRENT_SAMPLE = name;
|
||||
|
||||
// Apply new sample
|
||||
langEditor.setModel(SAMPLES[CURRENT_SAMPLE].langModel);
|
||||
if (SAMPLES[CURRENT_SAMPLE].langViewState) {
|
||||
langEditor.restoreViewState(SAMPLES[CURRENT_SAMPLE].langViewState);
|
||||
}
|
||||
sampleEditor.setModel(SAMPLES[CURRENT_SAMPLE].sampleModel);
|
||||
if (SAMPLES[CURRENT_SAMPLE].sampleViewState) {
|
||||
sampleEditor.restoreViewState(SAMPLES[CURRENT_SAMPLE].sampleViewState);
|
||||
}
|
||||
}
|
||||
|
||||
// Refresh the sample text
|
||||
function refreshSample() {
|
||||
var name = sampleSelect.options[sampleSelect.selectedIndex].value;
|
||||
setEditorState(name);
|
||||
}
|
||||
sampleSelect.onchange = refreshSample;
|
||||
refreshSample(); // initialize initial text
|
||||
}); // require
|
||||
|
||||
@ -1,83 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
|
||||
<title>Monaco Editor Playground</title>
|
||||
|
||||
<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="./all.css" rel="stylesheet" type="text/css" />
|
||||
<link data-inline="yes-please" href="./playground/spinner.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">
|
||||
</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.css"></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
|
||||
width="149" height="149" alt="Fork me on GitHub" src="./fork.png"/></a>
|
||||
|
||||
<nav class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<a href="index.html">Monaco Editor</a>
|
||||
</div>
|
||||
<!-- collapse button for smaller screens -->
|
||||
<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>
|
||||
</button>
|
||||
|
||||
<!-- navbar title -->
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
<li><a class="nav-item" href="index.html">Home</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="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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div id="loading">
|
||||
<div class="spinner">
|
||||
<div class="rect1"></div>
|
||||
<div class="rect2"></div>
|
||||
<div class="rect3"></div>
|
||||
<div class="rect4"></div>
|
||||
<div class="rect5"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="playground">
|
||||
</section>
|
||||
|
||||
<footer class="container">
|
||||
<hr>
|
||||
<p class="text-center">
|
||||
<small>© {{year}} Microsoft</small>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<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 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.js"></script>
|
||||
|
||||
<script data-inline="yes-please" src="./playground/new-samples/all.js"></script>
|
||||
<script data-inline="yes-please" src="./playground/playground.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
|
||||
<title>Monaco Editor Playground</title>
|
||||
|
||||
<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="./all.css" rel="stylesheet" type="text/css" />
|
||||
<link data-inline="yes-please" href="./playground/spinner.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"
|
||||
/>
|
||||
</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.css"></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 width="149" height="149" alt="Fork me on GitHub" src="./fork.png"
|
||||
/></a>
|
||||
|
||||
<nav class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<a href="index.html">Monaco Editor</a>
|
||||
</div>
|
||||
<!-- collapse button for smaller screens -->
|
||||
<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>
|
||||
</button>
|
||||
|
||||
<!-- navbar title -->
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
<li><a class="nav-item" href="index.html">Home</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="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>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div id="loading">
|
||||
<div class="spinner">
|
||||
<div class="rect1"></div>
|
||||
<div class="rect2"></div>
|
||||
<div class="rect3"></div>
|
||||
<div class="rect4"></div>
|
||||
<div class="rect5"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="playground"></section>
|
||||
|
||||
<footer class="container">
|
||||
<hr />
|
||||
<p class="text-center">
|
||||
<small>© {{year}} Microsoft</small>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<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 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.js"></script>
|
||||
|
||||
<script data-inline="yes-please" src="./playground/new-samples/all.js"></script>
|
||||
<script data-inline="yes-please" src="./playground/playground.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,186 +1,184 @@
|
||||
(function() {
|
||||
(function () {
|
||||
var PLAY_SAMPLES = [
|
||||
{
|
||||
chapter: 'Creating the editor',
|
||||
name: 'Hello world!',
|
||||
id: 'creating-the-editor-hello-world',
|
||||
path: 'creating-the-editor/hello-world'
|
||||
},
|
||||
{
|
||||
chapter: 'Creating the editor',
|
||||
name: 'Editor basic options',
|
||||
id: 'creating-the-editor-editor-basic-options',
|
||||
path: 'creating-the-editor/editor-basic-options'
|
||||
},
|
||||
{
|
||||
chapter: 'Creating the editor',
|
||||
name: 'Hard wrapping',
|
||||
id: 'creating-the-editor-hard-wrapping',
|
||||
path: 'creating-the-editor/hard-wrapping'
|
||||
},
|
||||
{
|
||||
chapter: 'Creating the editor',
|
||||
name: 'Syntax highlighting for HTML elements',
|
||||
id: 'creating-the-editor-syntax-highlighting-for-html-elements',
|
||||
path: 'creating-the-editor/syntax-highlighting-for-html-elements'
|
||||
},
|
||||
{
|
||||
chapter: 'Interacting with the editor',
|
||||
name: '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'
|
||||
},
|
||||
{
|
||||
chapter: 'Interacting with the editor',
|
||||
name: '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'
|
||||
},
|
||||
{
|
||||
chapter: 'Interacting with the editor',
|
||||
name: 'Revealing a position',
|
||||
id: 'interacting-with-the-editor-revealing-a-position',
|
||||
path: 'interacting-with-the-editor/revealing-a-position'
|
||||
},
|
||||
{
|
||||
chapter: 'Interacting with the editor',
|
||||
name: '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'
|
||||
},
|
||||
{
|
||||
chapter: 'Interacting with the editor',
|
||||
name: 'Line and Inline decorations',
|
||||
id: 'interacting-with-the-editor-line-and-inline-decorations',
|
||||
path: 'interacting-with-the-editor/line-and-inline-decorations'
|
||||
},
|
||||
{
|
||||
chapter: 'Interacting with the editor',
|
||||
name: 'Customizing the line numbers',
|
||||
id: 'interacting-with-the-editor-customizing-the-line-numbers',
|
||||
path: 'interacting-with-the-editor/customizing-the-line-numbers'
|
||||
},
|
||||
{
|
||||
chapter: 'Interacting with the editor',
|
||||
name: 'Listening to mouse events',
|
||||
id: 'interacting-with-the-editor-listening-to-mouse-events',
|
||||
path: 'interacting-with-the-editor/listening-to-mouse-events'
|
||||
},
|
||||
{
|
||||
chapter: 'Interacting with the editor',
|
||||
name: 'Listening to key events',
|
||||
id: 'interacting-with-the-editor-listening-to-key-events',
|
||||
path: 'interacting-with-the-editor/listening-to-key-events'
|
||||
},
|
||||
{
|
||||
chapter: 'Customizing the appearence',
|
||||
name: 'Exposed colors',
|
||||
id: 'customizing-the-appearence-exposed-colors',
|
||||
path: 'customizing-the-appearence/exposed-colors'
|
||||
},
|
||||
{
|
||||
chapter: 'Customizing the appearence',
|
||||
name: 'Scrollbars',
|
||||
id: 'customizing-the-appearence-scrollbars',
|
||||
path: 'customizing-the-appearence/scrollbars'
|
||||
},
|
||||
{
|
||||
chapter: 'Customizing the appearence',
|
||||
name: 'Tokens and colors',
|
||||
id: 'customizing-the-appearence-tokens-and-colors',
|
||||
path: 'customizing-the-appearence/tokens-and-colors'
|
||||
},
|
||||
{
|
||||
chapter: 'Creating the DiffEditor',
|
||||
name: 'Hello diff world!',
|
||||
id: 'creating-the-diffeditor-hello-diff-world',
|
||||
path: 'creating-the-diffeditor/hello-diff-world'
|
||||
},
|
||||
{
|
||||
chapter: 'Creating the DiffEditor',
|
||||
name: 'Multi-line example',
|
||||
id: 'creating-the-diffeditor-multi-line-example',
|
||||
path: 'creating-the-diffeditor/multi-line-example'
|
||||
},
|
||||
{
|
||||
chapter: 'Creating the DiffEditor',
|
||||
name: 'Inline Diff Example',
|
||||
id: 'creating-the-diffeditor-inline-diff-example',
|
||||
path: 'creating-the-diffeditor/inline-diff-example'
|
||||
},
|
||||
{
|
||||
chapter: 'Creating the DiffEditor',
|
||||
name: 'Navigating a Diff',
|
||||
id: 'creating-the-diffeditor-navigating-a-diff',
|
||||
path: 'creating-the-diffeditor/navigating-a-diff'
|
||||
},
|
||||
{
|
||||
chapter: 'Extending Language Services',
|
||||
name: 'Custom languages',
|
||||
id: 'extending-language-services-custom-languages',
|
||||
path: 'extending-language-services/custom-languages'
|
||||
},
|
||||
{
|
||||
chapter: 'Extending Language Services',
|
||||
name: 'Completion provider example',
|
||||
id: 'extending-language-services-completion-provider-example',
|
||||
path: 'extending-language-services/completion-provider-example'
|
||||
},
|
||||
{
|
||||
chapter: 'Extending Language Services',
|
||||
name: 'Codelens provider example',
|
||||
id: 'extending-language-services-codelens-provider-example',
|
||||
path: 'extending-language-services/codelens-provider-example'
|
||||
},
|
||||
{
|
||||
chapter: 'Extending Language Services',
|
||||
name: 'Color provider example',
|
||||
id: 'extending-language-services-color-provider-example',
|
||||
path: 'extending-language-services/color-provider-example'
|
||||
},
|
||||
{
|
||||
chapter: 'Extending Language Services',
|
||||
name: 'Symbols provider example',
|
||||
id: 'extending-language-services-symbols-provider-example',
|
||||
path: 'extending-language-services/symbols-provider-example'
|
||||
},
|
||||
{
|
||||
chapter: 'Extending Language Services',
|
||||
name: 'Folding provider example',
|
||||
id: 'extending-language-services-folding-provider-example',
|
||||
path: 'extending-language-services/folding-provider-example'
|
||||
},
|
||||
{
|
||||
chapter: 'Extending Language Services',
|
||||
name: 'Hover provider example',
|
||||
id: 'extending-language-services-hover-provider-example',
|
||||
path: 'extending-language-services/hover-provider-example'
|
||||
},
|
||||
{
|
||||
chapter: 'Extending Language Services',
|
||||
name: 'Semantic tokens provider example',
|
||||
id: 'extending-language-services-semantic-tokens-provider-example',
|
||||
path: 'extending-language-services/semantic-tokens-provider-example'
|
||||
},
|
||||
{
|
||||
chapter: 'Extending Language Services',
|
||||
name: 'Configure JavaScript defaults',
|
||||
id: 'extending-language-services-configure-javascript-defaults',
|
||||
path: 'extending-language-services/configure-javascript-defaults'
|
||||
},
|
||||
{
|
||||
chapter: 'Extending Language Services',
|
||||
name: 'Configure JSON defaults',
|
||||
id: 'extending-language-services-configure-json-defaults',
|
||||
path: 'extending-language-services/configure-json-defaults'
|
||||
}
|
||||
];
|
||||
|
||||
var PLAY_SAMPLES = [
|
||||
{
|
||||
chapter: "Creating the editor",
|
||||
name: "Hello world!",
|
||||
id: "creating-the-editor-hello-world",
|
||||
path: "creating-the-editor/hello-world"
|
||||
},
|
||||
{
|
||||
chapter: "Creating the editor",
|
||||
name: "Editor basic options",
|
||||
id: "creating-the-editor-editor-basic-options",
|
||||
path: "creating-the-editor/editor-basic-options"
|
||||
},
|
||||
{
|
||||
chapter: "Creating the editor",
|
||||
name: "Hard wrapping",
|
||||
id: "creating-the-editor-hard-wrapping",
|
||||
path: "creating-the-editor/hard-wrapping"
|
||||
},
|
||||
{
|
||||
chapter: "Creating the editor",
|
||||
name: "Syntax highlighting for HTML elements",
|
||||
id: "creating-the-editor-syntax-highlighting-for-html-elements",
|
||||
path: "creating-the-editor/syntax-highlighting-for-html-elements"
|
||||
},
|
||||
{
|
||||
chapter: "Interacting with the editor",
|
||||
name: "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"
|
||||
},
|
||||
{
|
||||
chapter: "Interacting with the editor",
|
||||
name: "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"
|
||||
},
|
||||
{
|
||||
chapter: "Interacting with the editor",
|
||||
name: "Revealing a position",
|
||||
id: "interacting-with-the-editor-revealing-a-position",
|
||||
path: "interacting-with-the-editor/revealing-a-position"
|
||||
},
|
||||
{
|
||||
chapter: "Interacting with the editor",
|
||||
name: "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"
|
||||
},
|
||||
{
|
||||
chapter: "Interacting with the editor",
|
||||
name: "Line and Inline decorations",
|
||||
id: "interacting-with-the-editor-line-and-inline-decorations",
|
||||
path: "interacting-with-the-editor/line-and-inline-decorations"
|
||||
},
|
||||
{
|
||||
chapter: "Interacting with the editor",
|
||||
name: "Customizing the line numbers",
|
||||
id: "interacting-with-the-editor-customizing-the-line-numbers",
|
||||
path: "interacting-with-the-editor/customizing-the-line-numbers"
|
||||
},
|
||||
{
|
||||
chapter: "Interacting with the editor",
|
||||
name: "Listening to mouse events",
|
||||
id: "interacting-with-the-editor-listening-to-mouse-events",
|
||||
path: "interacting-with-the-editor/listening-to-mouse-events"
|
||||
},
|
||||
{
|
||||
chapter: "Interacting with the editor",
|
||||
name: "Listening to key events",
|
||||
id: "interacting-with-the-editor-listening-to-key-events",
|
||||
path: "interacting-with-the-editor/listening-to-key-events"
|
||||
},
|
||||
{
|
||||
chapter: "Customizing the appearence",
|
||||
name: "Exposed colors",
|
||||
id: "customizing-the-appearence-exposed-colors",
|
||||
path: "customizing-the-appearence/exposed-colors"
|
||||
},
|
||||
{
|
||||
chapter: "Customizing the appearence",
|
||||
name: "Scrollbars",
|
||||
id: "customizing-the-appearence-scrollbars",
|
||||
path: "customizing-the-appearence/scrollbars"
|
||||
},
|
||||
{
|
||||
chapter: "Customizing the appearence",
|
||||
name: "Tokens and colors",
|
||||
id: "customizing-the-appearence-tokens-and-colors",
|
||||
path: "customizing-the-appearence/tokens-and-colors"
|
||||
},
|
||||
{
|
||||
chapter: "Creating the DiffEditor",
|
||||
name: "Hello diff world!",
|
||||
id: "creating-the-diffeditor-hello-diff-world",
|
||||
path: "creating-the-diffeditor/hello-diff-world"
|
||||
},
|
||||
{
|
||||
chapter: "Creating the DiffEditor",
|
||||
name: "Multi-line example",
|
||||
id: "creating-the-diffeditor-multi-line-example",
|
||||
path: "creating-the-diffeditor/multi-line-example"
|
||||
},
|
||||
{
|
||||
chapter: "Creating the DiffEditor",
|
||||
name: "Inline Diff Example",
|
||||
id: "creating-the-diffeditor-inline-diff-example",
|
||||
path: "creating-the-diffeditor/inline-diff-example"
|
||||
},
|
||||
{
|
||||
chapter: "Creating the DiffEditor",
|
||||
name: "Navigating a Diff",
|
||||
id: "creating-the-diffeditor-navigating-a-diff",
|
||||
path: "creating-the-diffeditor/navigating-a-diff"
|
||||
},
|
||||
{
|
||||
chapter: "Extending Language Services",
|
||||
name: "Custom languages",
|
||||
id: "extending-language-services-custom-languages",
|
||||
path: "extending-language-services/custom-languages"
|
||||
},
|
||||
{
|
||||
chapter: "Extending Language Services",
|
||||
name: "Completion provider example",
|
||||
id: "extending-language-services-completion-provider-example",
|
||||
path: "extending-language-services/completion-provider-example"
|
||||
},
|
||||
{
|
||||
chapter: "Extending Language Services",
|
||||
name: "Codelens provider example",
|
||||
id: "extending-language-services-codelens-provider-example",
|
||||
path: "extending-language-services/codelens-provider-example"
|
||||
},
|
||||
{
|
||||
chapter: "Extending Language Services",
|
||||
name: "Color provider example",
|
||||
id: "extending-language-services-color-provider-example",
|
||||
path: "extending-language-services/color-provider-example"
|
||||
},
|
||||
{
|
||||
chapter: "Extending Language Services",
|
||||
name: "Symbols provider example",
|
||||
id: "extending-language-services-symbols-provider-example",
|
||||
path: "extending-language-services/symbols-provider-example"
|
||||
},
|
||||
{
|
||||
chapter: "Extending Language Services",
|
||||
name: "Folding provider example",
|
||||
id: "extending-language-services-folding-provider-example",
|
||||
path: "extending-language-services/folding-provider-example"
|
||||
},
|
||||
{
|
||||
chapter: "Extending Language Services",
|
||||
name: "Hover provider example",
|
||||
id: "extending-language-services-hover-provider-example",
|
||||
path: "extending-language-services/hover-provider-example"
|
||||
},
|
||||
{
|
||||
chapter: "Extending Language Services",
|
||||
name: "Semantic tokens provider example",
|
||||
id: "extending-language-services-semantic-tokens-provider-example",
|
||||
path: "extending-language-services/semantic-tokens-provider-example"
|
||||
},
|
||||
{
|
||||
chapter: "Extending Language Services",
|
||||
name: "Configure JavaScript defaults",
|
||||
id: "extending-language-services-configure-javascript-defaults",
|
||||
path: "extending-language-services/configure-javascript-defaults"
|
||||
},
|
||||
{
|
||||
chapter: "Extending Language Services",
|
||||
name: "Configure JSON defaults",
|
||||
id: "extending-language-services-configure-json-defaults",
|
||||
path: "extending-language-services/configure-json-defaults"
|
||||
if (typeof exports !== 'undefined') {
|
||||
exports.PLAY_SAMPLES = PLAY_SAMPLES;
|
||||
} else {
|
||||
self.PLAY_SAMPLES = PLAY_SAMPLES;
|
||||
}
|
||||
];
|
||||
|
||||
if (typeof exports !== 'undefined') {
|
||||
exports.PLAY_SAMPLES = PLAY_SAMPLES
|
||||
} else {
|
||||
self.PLAY_SAMPLES = PLAY_SAMPLES;
|
||||
}
|
||||
|
||||
})();
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1 +1 @@
|
||||
<div id="container" style="height:100%;"></div>
|
||||
<div id="container" style="height: 100%"></div>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue