未验证 提交 2029730d 编写于 作者: A Alex Dima

Merge the `monaco-editor-samples` repository

/node_modules/
**/node_modules/
\ No newline at end of file
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npm run pretty-quick
/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
{
"arrowParens": "always",
"singleQuote": true,
"trailingComma": "none",
"semi": true,
"useTabs": true,
"printWidth": 100
}
// Place your settings in this file to overwrite default and user settings.
{
"files.trimTrailingWhitespace": true,
"editor.tabSize": 4,
"editor.insertSpaces": false
}
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.
# Monaco Editor Samples
Standalone HTML samples showing how to integrate the Monaco Editor.
## Running
```bash
git clone https://github.com/Microsoft/monaco-editor-samples.git
cd monaco-editor-samples
npm install .
npm run simpleserver
```
Go to <a href="http://localhost:8888">localhost:8888</a> and explore the samples!
## Issues
Please file issues concering `monaco-editor-samples` in the [`monaco-editor` repository](https://github.com/Microsoft/monaco-editor/issues).
## Loading variations
- `browser-amd-editor`: running in a browser using `AMD` lazy loading.
- `browser-script-editor`: running in a browser using `AMD` synchronous loading via `<script>` tags.
- `browser-esm-webpack`: running in a browser using webpack.
- `browser-esm-webpack-small`: running in a browser using webpack (only a subset of the editor).
- `electron-amd`: running in electron.
- `nwjs-amd` and `nwjs-amd-v2`: running in nwjs. it is reported that v2 works and the initial version does not.
## Other examples & techniques
- `browser-amd-diff-editor`: running the diff editor in a browser.
- `browser-amd-iframe`: running in an `<iframe>`.
- `browser-amd-localized`: running with the `German` locale.
- `browser-amd-monarch`: running with a custom language grammar written with Monarch.
- `browser-amd-shared-model`: using the same text model in two editors.
## License
MIT
<!-- 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 -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<h2>Monaco Diff Editor Sample</h2>
<div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
<script>
require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });
require(['vs/editor/editor.main'], function () {
var diffEditor = monaco.editor.createDiffEditor(document.getElementById('container'));
Promise.all([xhr('original.txt'), xhr('modified.txt')]).then(function (r) {
var originalTxt = r[0].responseText;
var modifiedTxt = r[1].responseText;
diffEditor.setModel({
original: monaco.editor.createModel(originalTxt, 'javascript'),
modified: monaco.editor.createModel(modifiedTxt, 'javascript')
});
});
});
</script>
<script>
function xhr(url) {
var req = null;
return new Promise(
function (c, e) {
req = new XMLHttpRequest();
req.onreadystatechange = function () {
if (req._canceled) {
return;
}
if (req.readyState === 4) {
if ((req.status >= 200 && req.status < 300) || req.status === 1223) {
c(req);
} else {
e(req);
}
req.onreadystatechange = function () {};
}
};
req.open('GET', url, true);
req.responseType = '';
req.send(null);
},
function () {
req._canceled = true;
req.abort();
}
);
}
</script>
</body>
</html>
/// <reference path="../../references.js" />
(function () {
"use strict";
var deltaDecorations = function (oldDecorations, newDecorations) {
/// <summary>
/// Update oldDecorations to match newDecorations.
/// It will remove old decorations which are not found in new decorations
/// and add only the really new decorations.
/// </summary>
/// <param name="oldDecorations" type="Array">
/// An array containing ids of existing decorations
/// </param>
/// <param name="newDecorations" type="Array">
/// An array containing literal objects describing new decorations. A
/// literal contains the following two fields:
/// range
/// options
/// </param>
/// <returns type="Array">
/// Returns an array of decorations ids
/// </returns>
var hashFunc = function (range, options) {
return range.startLineNumber + "," + range.startColumn + "-" + range.endLineNumber + "," + range.endColumn +
"-" + options.hoverMessage + "-" + options.className + "-" + options.isOverlay + "-" + options.showInOverviewRuler;
};
return this.changeDecorations(function (changeAccessor) {
var i, len, oldDecorationsMap = {}, hash;
// Record old decorations in a map
// Two decorations can have the same hash
for (i = 0, len = oldDecorations.length; i < len; i++) {
hash = hashFunc(this.getDecorationRange(oldDecorations[i]), this.getDecorationOptions(oldDecorations[i]));
oldDecorationsMap[hash] = oldDecorationsMap[hash] || [];
oldDecorationsMap[hash].push(oldDecorations[i]);
}
// Add only new decorations & mark reused ones
var j, lenJ, result = [], usedOldDecorations = {}, oldDecorationsCandidates, reusedOldDecoration;
for (i = 0, len = newDecorations.length; i < len; i++) {
hash = hashFunc(newDecorations[i].range, newDecorations[i].options);
reusedOldDecoration = false;
if (oldDecorationsMap.hasOwnProperty(hash)) {
oldDecorationsCandidates = oldDecorationsMap[hash];
// We can try reusing an old decoration (if it hasn't been reused before)
for (j = 0, lenJ = oldDecorationsCandidates.length; j < lenJ; j++) {
if (!usedOldDecorations.hasOwnProperty(oldDecorationsCandidates[j])) {
// Found an old decoration which can be reused & it hasn't been reused before
reusedOldDecoration = true;
usedOldDecorations[oldDecorationsCandidates[j]] = true;
result.push(oldDecorationsCandidates[j]);
break;
}
}
}
if (!reusedOldDecoration) {
result.push(changeAccessor.addDecoration(newDecorations[i].range, newDecorations[i].options));
}
}
// Remove unused old decorations
for (i = 0, len = oldDecorations.length; i < len; i++) {
if (!usedOldDecorations.hasOwnProperty(oldDecorations[i])) {
changeAccessor.removeDecoration(oldDecorations[i]);
}
}
return result;
}.bind(this));
};
})();
/// <reference path="../../references.js" />
(function () {
"use strict";
// Some useless comment
var deltaDecorations = function (oldDecorations, newDecorations) {
/// <summary>
/// Update oldDecorations to match newDecorations.
/// It will remove old decorations which are not found in new decorations
/// and add only the really new decorations.
/// </summary>
/// <param name="oldDecorations" type="Array">
/// An array containing ids of existing decorations
/// </param>
/// <param name="newDecorations" type="Array">
/// An array containing literal objects describing new decorations. A
/// literal contains the following two fields:
/// range
/// options
/// </param>
/// <returns type="Array">
/// Returns an array of decorations ids
/// </returns>
var hashFunc = function (range, options) {
return range.startLineNumber + "," + range.startColumn + "-" + range.endLineNumber + "," + range.endColumn +
"-" + options.hoverMessage + "-" + options.className + "-" + options.isOverlay + "-" + options.showInOverviewRuler;
};
return this.changeDecorations(function (changeAccessor) {
var i, len, oldDecorationsMap = {}, hash;
// Record old decorations in a map
for (i = 0, len = oldDecorations.length; i < len; i++) {
hash = hashFunc(this.getDecorationRange(oldDecorations[i]), this.getDecorationOptions(oldDecorations[i]));
oldDecorationsMap[hash] = i;
}
// Add only new decorations & mark reused ones
var result = [], usedOldDecorationsMap = {};
for (i = 0, len = newDecorations.length; i < len; i++) {
hash = hashFunc(newDecorations[i].range, newDecorations[i].options);
if (oldDecorationsMap.hasOwnProperty(hash)) {
usedOldDecorationsMap[oldDecorationsMap[hash]] = true;
result.push(oldDecorations[oldDecorationsMap[hash]]);
} else {
result.push(changeAccessor.addDecoration(newDecorations[i].range, newDecorations[i].options));
}
}
// Remove unused old decorations
for (i = 0, len = oldDecorations.length; i < len; i++) {
if (!usedOldDecorationsMap.hasOwnProperty(i)) {
changeAccessor.removeDecoration(oldDecorations[i]);
}
}
return result;
}.bind(this));
};
})();
<!DOCTYPE html>
<html>
<head>
<title>browser-amd-editor</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<h2>Monaco Editor Sample</h2>
<div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>
<!-- OR ANY OTHER AMD LOADER HERE INSTEAD OF loader.js -->
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
<script>
require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });
require(['vs/editor/editor.main'], function () {
var editor = monaco.editor.create(document.getElementById('container'), {
value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
language: 'javascript'
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Editor in tiny iframe</title>
<style>
#myIframe1 {
border: 1px solid blue;
width: 0;
height: 0;
}
#myIframe2 {
border: 1px solid red;
display: none;
}
#myIframe3 {
border: 1px solid green;
visibility: hidden;
}
#programmaticIframe {
border: 1px solid yellow;
}
</style>
</head>
<body>
<h2>Monaco Editor inside iframes sample</h2>
<br />
<br />
0x0:
<br />
<iframe id="myIframe1" src="inner.html"></iframe>
display:none:
<br />
<iframe id="myIframe2" src="inner.html"></iframe>
visibility:hidden:
<br />
<iframe id="myIframe3" src="inner.html"></iframe>
taken off-dom while loading:
<br />
<script>
var myIframe1 = document.getElementById('myIframe1');
var myIframe2 = document.getElementById('myIframe2');
var myIframe3 = document.getElementById('myIframe3');
var programmaticIframe = document.createElement('iframe');
programmaticIframe.id = 'programmaticIframe';
programmaticIframe.src = 'inner.html';
// trigger its loading & take it off dom
document.body.appendChild(programmaticIframe);
setTimeout(function () {
document.body.removeChild(programmaticIframe);
}, 10);
setTimeout(function () {
document.body.appendChild(programmaticIframe);
[myIframe1, myIframe2, myIframe3, programmaticIframe].forEach(reveal);
}, 3000);
function reveal(iframe) {
iframe.style.width = '400px';
iframe.style.height = '100px';
iframe.style.display = 'block';
iframe.style.visibility = 'visible';
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container" style="width: 100%; height: 100%"></div>
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
<script>
require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });
require(['vs/editor/editor.main'], function () {
var editor = monaco.editor.create(document.getElementById('container'), {
value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
language: 'javascript'
});
window.onresize = function () {
editor.layout();
};
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<h2>Monaco Editor Localization Sample</h2>
<div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
<script>
require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });
require.config({
'vs/nls': {
availableLanguages: {
'*': 'de'
}
}
});
require(['vs/editor/editor.main'], function () {
var editor = monaco.editor.create(document.getElementById('container'), {
value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
language: 'javascript'
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<h2>Monarch Tokenizer Sample</h2>
<div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
<script>
require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });
require(['vs/editor/editor.main'], function () {
monaco.languages.register({
id: 'myCustomLanguage'
});
monaco.languages.setMonarchTokensProvider('myCustomLanguage', {
tokenizer: {
root: [
[/\[error.*/, 'custom-error'],
[/\[notice.*/, 'custom-notice'],
[/\[info.*/, 'custom-info'],
[/\[[a-zA-Z 0-9:]+\]/, 'custom-date']
]
}
});
// Define a new theme that constains only rules that match this language
monaco.editor.defineTheme('myCoolTheme', {
base: 'vs',
inherit: false,
rules: [
{ token: 'custom-info', foreground: '808080' },
{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
{ token: 'custom-notice', foreground: 'FFA500' },
{ token: 'custom-date', foreground: '008800' }
]
});
var editor = monaco.editor.create(document.getElementById('container'), {
theme: 'myCoolTheme',
value: getCode(),
language: 'myCustomLanguage'
});
});
function getCode() {
return [
'[Sun Mar 7 16:02:00 2004] [notice] Apache/1.3.29 (Unix) configured -- resuming normal operations',
'[Sun Mar 7 16:02:00 2004] [info] Server built: Feb 27 2004 13:56:37',
'[Sun Mar 7 16:02:00 2004] [notice] Accept mutex: sysvsem (Default: sysvsem)',
'[Sun Mar 7 16:05:49 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Sun Mar 7 16:45:56 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Sun Mar 7 17:13:50 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Sun Mar 7 17:21:44 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Sun Mar 7 17:23:53 2004] statistics: Use of uninitialized value in concatenation (.) or string at /home/httpd/twiki/lib/TWiki.pm line 528.',
"[Sun Mar 7 17:23:53 2004] statistics: Can't create file /home/httpd/twiki/data/Main/WebStatistics.txt - Permission denied",
'[Sun Mar 7 17:27:37 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Sun Mar 7 17:31:39 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Sun Mar 7 17:58:00 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Sun Mar 7 18:00:09 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Sun Mar 7 18:10:09 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Sun Mar 7 18:19:01 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Sun Mar 7 18:42:29 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Sun Mar 7 18:52:30 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Sun Mar 7 18:58:52 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Sun Mar 7 19:03:58 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Sun Mar 7 19:08:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Sun Mar 7 20:04:35 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Sun Mar 7 20:11:33 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Sun Mar 7 20:12:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Sun Mar 7 20:25:31 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Sun Mar 7 20:44:48 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Sun Mar 7 20:58:27 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Sun Mar 7 21:16:17 2004] [error] [client xx.xx.xx.xx] File does not exist: /home/httpd/twiki/view/Main/WebHome',
'[Sun Mar 7 21:20:14 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Sun Mar 7 21:31:12 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Sun Mar 7 21:39:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Sun Mar 7 21:44:10 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Mon Mar 8 01:35:13 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',