SystemSh0cker/monaco-editor
1
0
Fork 0
mirror of https://github.com/microsoft/monaco-editor.git synced 2025-12-22 22:02:55 +01:00
Code Issues Projects Releases Packages Activity

Run prettier

Browse source
This commit is contained in:
Alex Dima 2020-09-02 17:35:10 +02:00
parent 9dd7846d25
commit 780a5b6022
No known key found for this signature in database
GPG key ID: 6E58D7B045760DA0
57 changed files with 24582 additions and 24505 deletions
Download patch file Download diff file Expand all files Collapse all files

10
.prettierrc
View file

@ -1,7 +1,7 @@
{ {
"arrowParens": "always", "arrowParens": "always",
"singleQuote": true, "singleQuote": true,
"trailingComma": "none", "trailingComma": "none",
"semi": true, "semi": true,
"useTabs": true "useTabs": true
} }

2
.vscode/settings.json vendored
View file

@ -3,4 +3,4 @@
"files.trimTrailingWhitespace": true, "files.trimTrailingWhitespace": true,
"editor.tabSize": 4, "editor.tabSize": 4,
"editor.insertSpaces": false "editor.insertSpaces": false
} }

42
LICENSE.md
View file

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

77
README.md
View file

@ -1,38 +1,39 @@
# Monaco Editor Samples
# Monaco Editor Samples
Standalone HTML samples showing how to integrate the Monaco Editor.
Standalone HTML samples showing how to integrate the Monaco Editor.
## Running
## Running
```bash
```bash git clone https://github.com/Microsoft/monaco-editor-samples.git
git clone https://github.com/Microsoft/monaco-editor-samples.git cd monaco-editor-samples
cd monaco-editor-samples npm install .
npm install . npm run simpleserver
npm run simpleserver ```
```
Go to <a href="http://localhost:8888">localhost:8888</a> and explore the samples!
Go to <a href="http://localhost:8888">localhost:8888</a> and explore the samples!
## Issues
## Issues
Please file issues concering `monaco-editor-samples` in the [`monaco-editor` repository](https://github.com/Microsoft/monaco-editor/issues).
Please file issues concering `monaco-editor-samples` in the [`monaco-editor` repository](https://github.com/Microsoft/monaco-editor/issues).
## Loading variations
## Loading variations
* `browser-amd-editor`: running in a browser using `AMD` lazy loading. - `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-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`: running in a browser using webpack.
* `browser-esm-webpack-small`: running in a browser using webpack (only a subset of the editor). - `browser-esm-webpack-small`: running in a browser using webpack (only a subset of the editor).
* `electron-amd`: running in electron. - `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. - `nwjs-amd` and `nwjs-amd-v2`: running in nwjs. it is reported that v2 works and the initial version does not.
## Other examples & techniques ## Other examples & techniques
* `browser-amd-diff-editor`: running the diff editor in a browser.
* `browser-amd-iframe`: running in an `<iframe>`. - `browser-amd-diff-editor`: running the diff editor in a browser.
* `browser-amd-localized`: running with the `German` locale. - `browser-amd-iframe`: running in an `<iframe>`.
* `browser-amd-monarch`: running with a custom language grammar written with Monarch. - `browser-amd-localized`: running with the `German` locale.
* `browser-amd-shared-model`: using the same text model in two editors. - `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
## License
MIT
MIT

132
browser-amd-diff-editor/index.html
View file

@ -1,59 +1,73 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head> </head>
<body> <body>
<h2>Monaco Diff Editor Sample</h2>
<h2>Monaco Diff Editor Sample</h2> <div
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div> id="container"
style="width: 800px; height: 600px; border: 1px solid grey"
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script> ></div>
<script>
require.config({ paths: { 'vs': '../node_modules/monaco-editor/min/vs' }}); <script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
<script>
require(['vs/editor/editor.main'], function() { require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });
var diffEditor = monaco.editor.createDiffEditor(document.getElementById('container'));
require(['vs/editor/editor.main'], function () {
Promise.all([xhr('original.txt'), xhr('modified.txt')]).then(function(r) { var diffEditor = monaco.editor.createDiffEditor(
var originalTxt = r[0].responseText; document.getElementById('container')
var modifiedTxt = r[1].responseText; );
diffEditor.setModel({ Promise.all([xhr('original.txt'), xhr('modified.txt')]).then(function (
original: monaco.editor.createModel(originalTxt, 'javascript'), r
modified: monaco.editor.createModel(modifiedTxt, 'javascript'), ) {
}) var originalTxt = r[0].responseText;
}); var modifiedTxt = r[1].responseText;
});
</script> diffEditor.setModel({
<script> original: monaco.editor.createModel(originalTxt, 'javascript'),
function xhr(url) { modified: monaco.editor.createModel(modifiedTxt, 'javascript')
var req = null; });
return new Promise(function(c,e) { });
req = new XMLHttpRequest(); });
req.onreadystatechange = function () { </script>
if (req._canceled) { return; } <script>
function xhr(url) {
if (req.readyState === 4) { var req = null;
if ((req.status >= 200 && req.status < 300) || req.status === 1223) { return new Promise(
c(req); function (c, e) {
} else { req = new XMLHttpRequest();
e(req); req.onreadystatechange = function () {
} if (req._canceled) {
req.onreadystatechange = function () { }; return;
} }
};
if (req.readyState === 4) {
req.open("GET", url, true ); if (
req.responseType = ""; (req.status >= 200 && req.status < 300) ||
req.status === 1223
req.send(null); ) {
}, function () { c(req);
req._canceled = true; } else {
req.abort(); e(req);
}); }
} req.onreadystatechange = function () {};
</script> }
</body> };
</html>
req.open('GET', url, true);
req.responseType = '';
req.send(null);
},
function () {
req._canceled = true;
req.abort();
}
);
}
</script>
</body>
</html>

65
browser-amd-editor/index.html
View file

@ -1,30 +1,35 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>browser-amd-editor</title> <title>browser-amd-editor</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head> </head>
<body> <body>
<h2>Monaco Editor Sample</h2>
<h2>Monaco Editor Sample</h2> <div
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div> id="container"
style="width: 800px; height: 600px; border: 1px solid grey"
<!-- OR ANY OTHER AMD LOADER HERE INSTEAD OF loader.js --> ></div>
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
<script> <!-- OR ANY OTHER AMD LOADER HERE INSTEAD OF loader.js -->
require.config({ paths: { 'vs': '../node_modules/monaco-editor/min/vs' }}); <script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
<script>
require(['vs/editor/editor.main'], function() { require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });
var editor = monaco.editor.create(document.getElementById('container'), {
value: [ require(['vs/editor/editor.main'], function () {
'function x() {', var editor = monaco.editor.create(
'\tconsole.log("Hello world!");', document.getElementById('container'),
'}' {
].join('\n'), value: [
language: 'javascript' 'function x() {',
}); '\tconsole.log("Hello world!");',
}); '}'
</script> ].join('\n'),
</body> language: 'javascript'
</html> }
);
});
</script>
</body>
</html>

149
browser-amd-iframe/index.html
View file

@ -1,79 +1,70 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head> <title>Editor in tiny iframe</title>
<title>Editor in tiny iframe</title>
<style>
<style> #myIframe1 {
#myIframe1 { border: 1px solid blue;
border: 1px solid blue; width: 0;
width: 0; height: 0;
height: 0; }
} #myIframe2 {
#myIframe2 { border: 1px solid red;
border: 1px solid red; display: none;
display: none; }
} #myIframe3 {
#myIframe3 { border: 1px solid green;
border: 1px solid green; visibility: hidden;
visibility: hidden; }
} #programmaticIframe {
#programmaticIframe { border: 1px solid yellow;
border: 1px solid yellow; }
} </style>
</style> </head>
</head>
<body>
<body> <h2>Monaco Editor inside iframes sample</h2>
<h2>Monaco Editor inside iframes sample</h2> <br />
<br />
<br/> 0x0:
<br/> 0x0: <br />
<br/> <iframe id="myIframe1" src="inner.html"></iframe>
<iframe id="myIframe1" src="inner.html"></iframe> display:none:
display:none: <br />
<br/> <iframe id="myIframe2" src="inner.html"></iframe>
<iframe id="myIframe2" src="inner.html"></iframe> visibility:hidden:
visibility:hidden: <br />
<br/> <iframe id="myIframe3" src="inner.html"></iframe>
<iframe id="myIframe3" src="inner.html"></iframe> taken off-dom while loading:
taken off-dom while loading: <br />
<br/>
<script>
<script> var myIframe1 = document.getElementById('myIframe1');
var myIframe2 = document.getElementById('myIframe2');
var myIframe1 = document.getElementById('myIframe1'); var myIframe3 = document.getElementById('myIframe3');
var myIframe2 = document.getElementById('myIframe2'); var programmaticIframe = document.createElement('iframe');
var myIframe3 = document.getElementById('myIframe3'); programmaticIframe.id = 'programmaticIframe';
var programmaticIframe = document.createElement('iframe'); programmaticIframe.src = 'inner.html';
programmaticIframe.id = 'programmaticIframe'; // trigger its loading & take it off dom
programmaticIframe.src = "inner.html"; document.body.appendChild(programmaticIframe);
// trigger its loading & take it off dom
document.body.appendChild(programmaticIframe); setTimeout(function () {
document.body.removeChild(programmaticIframe);
setTimeout(function() { }, 10);
document.body.removeChild(programmaticIframe);
}, 10); setTimeout(function () {
document.body.appendChild(programmaticIframe);
setTimeout(function() { [myIframe1, myIframe2, myIframe3, programmaticIframe].forEach(reveal);
document.body.appendChild(programmaticIframe); }, 3000);
[
myIframe1, function reveal(iframe) {
myIframe2, iframe.style.width = '400px';
myIframe3, iframe.style.height = '100px';
programmaticIframe iframe.style.display = 'block';
].forEach(reveal); iframe.style.visibility = 'visible';
}, 3000); }
</script>
function reveal(iframe) { </body>
iframe.style.width = '400px'; </html>
iframe.style.height = '100px';
iframe.style.display = 'block';
iframe.style.visibility = 'visible';
}
</script>
</body>
</html>

81
browser-amd-iframe/inner.html
View file

@ -1,39 +1,42 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css"> <style type="text/css">
html, html,
body { body {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="container" style="width:100%;height:100%"></div> <div id="container" style="width: 100%; height: 100%"></div>
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script> <script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
<script> <script>
require.config({ paths: { 'vs': '../node_modules/monaco-editor/min/vs' }}); require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });
require(['vs/editor/editor.main'], function() { require(['vs/editor/editor.main'], function () {
var editor = monaco.editor.create(document.getElementById('container'), { var editor = monaco.editor.create(
value: [ document.getElementById('container'),
'function x() {', {
'\tconsole.log("Hello world!");', value: [
'}' 'function x() {',
].join('\n'), '\tconsole.log("Hello world!");',
language: 'javascript' '}'
}); ].join('\n'),
language: 'javascript'
window.onresize = function() { }
editor.layout(); );
};
}); window.onresize = function () {
</script> editor.layout();
</body> };
</html> });
</script>
</body>
</html>

77
browser-amd-localized/index.html
View file

@ -1,36 +1,41 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head> </head>
<body> <body>
<h2>Monaco Editor Localization Sample</h2>
<h2>Monaco Editor Localization Sample</h2> <div
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div> id="container"
style="width: 800px; height: 600px; border: 1px solid grey"
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script> ></div>
<script>
require.config({ paths: { 'vs': '../node_modules/monaco-editor/min/vs' }}); <script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
<script>
require.config({ require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });
'vs/nls' : {
availableLanguages: { require.config({
'*': 'de' 'vs/nls': {
} availableLanguages: {
} '*': 'de'
}); }
}
require(['vs/editor/editor.main'], function() { });
var editor = monaco.editor.create(document.getElementById('container'), {
value: [ require(['vs/editor/editor.main'], function () {
'function x() {', var editor = monaco.editor.create(
'\tconsole.log("Hello world!");', document.getElementById('container'),
'}' {
].join('\n'), value: [
language: 'javascript' 'function x() {',
}); '\tconsole.log("Hello world!");',
}); '}'
</script> ].join('\n'),
</body> language: 'javascript'
</html> }
);
});
</script>
</body>
</html>

218
browser-amd-monarch/index.html
View file

@ -1,107 +1,111 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head> </head>
<body> <body>
<h2>Monarch Tokenizer Sample</h2>
<h2>Monarch Tokenizer Sample</h2> <div
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div> id="container"
style="width: 800px; height: 600px; border: 1px solid grey"
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script> ></div>
<script>
require.config({ paths: { 'vs': '../node_modules/monaco-editor/min/vs' }}); <script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
<script>
require(['vs/editor/editor.main'], function() { require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });
monaco.languages.register({ require(['vs/editor/editor.main'], function () {
id: 'myCustomLanguage' monaco.languages.register({
}); id: 'myCustomLanguage'
monaco.languages.setMonarchTokensProvider('myCustomLanguage', { });
tokenizer: { monaco.languages.setMonarchTokensProvider('myCustomLanguage', {
root: [ tokenizer: {
[/\[error.*/, "custom-error"], root: [
[/\[notice.*/, "custom-notice"], [/\[error.*/, 'custom-error'],
[/\[info.*/, "custom-info"], [/\[notice.*/, 'custom-notice'],
[/\[[a-zA-Z 0-9:]+\]/, "custom-date"], [/\[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', { // Define a new theme that constains only rules that match this language
base: 'vs', monaco.editor.defineTheme('myCoolTheme', {
inherit: false, base: 'vs',
rules: [ inherit: false,
{ token: 'custom-info', foreground: '808080' }, rules: [
{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' }, { token: 'custom-info', foreground: '808080' },
{ token: 'custom-notice', foreground: 'FFA500' }, { token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
{ token: 'custom-date', foreground: '008800' }, { token: 'custom-notice', foreground: 'FFA500' },
] { token: 'custom-date', foreground: '008800' }
}); ]
});
var editor = monaco.editor.create(document.getElementById('container'), {
theme: 'myCoolTheme', var editor = monaco.editor.create(
value: getCode(), document.getElementById('container'),
language: 'myCustomLanguage' {
}); 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)', function getCode() {
'[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', return [
'[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 16:02:00 2004] [notice] Apache/1.3.29 (Unix) configured -- resuming normal operations',
'[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 16:02:00 2004] [info] Server built: Feb 27 2004 13:56:37',
'[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 16:02:00 2004] [notice] Accept mutex: sysvsem (Default: sysvsem)',
'[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 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 17:23:53 2004] statistics: Can\'t create file /home/httpd/twiki/data/Main/WebStatistics.txt - Permission denied', '[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: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: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: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: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:58:00 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 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 17:23:53 2004] statistics: Can't create file /home/httpd/twiki/data/Main/WebStatistics.txt - Permission denied",
'[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 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 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 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 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 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: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: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:58:52 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 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 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 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 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 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 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 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 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 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 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 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 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: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: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:58:27 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 21:16:17 2004] [error] [client xx.xx.xx.xx] File does not exist: /home/httpd/twiki/view/Main/WebHome', '[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 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 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 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 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 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 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:44:10 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',
'[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', '[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',
'[Mon Mar 8 01:47:06 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',
'[Mon Mar 8 01:59:13 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',
'[Mon Mar 8 02:12:24 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 02:54:54 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',
'[Mon Mar 8 03:46:27 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed', '[Mon Mar 8 01:47:06 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Mon Mar 8 03:48:18 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed', '[Mon Mar 8 01:59:13 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Mon Mar 8 03:52:17 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed', '[Mon Mar 8 02:12:24 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Mon Mar 8 03:55:09 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed', '[Mon Mar 8 02:54:54 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Mon Mar 8 04:22:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed', '[Mon Mar 8 03:46:27 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Mon Mar 8 04:24:47 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed', '[Mon Mar 8 03:48:18 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Mon Mar 8 04:40:32 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed', '[Mon Mar 8 03:52:17 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Mon Mar 8 04:55:40 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed', '[Mon Mar 8 03:55:09 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Mon Mar 8 04:59:13 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed', '[Mon Mar 8 04:22:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Mon Mar 8 05:22:57 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed', '[Mon Mar 8 04:24:47 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Mon Mar 8 05:24:29 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed', '[Mon Mar 8 04:40:32 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'[Mon Mar 8 05:31:47 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed', '[Mon Mar 8 04:55:40 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'<11>httpd[31628]: [error] [client xx.xx.xx.xx] File does not exist: /usr/local/installed/apache/htdocs/squirrelmail/_vti_inf.html in 29-Mar 15:18:20.50 from xx.xx.xx.xx', '[Mon Mar 8 04:59:13 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
'<11>httpd[25859]: [error] [client xx.xx.xx.xx] File does not exist: /usr/local/installed/apache/htdocs/squirrelmail/_vti_bin/shtml.exe/_vti_rpc in 29-Mar 15:18:20.54 from xx.xx.xx.xx', '[Mon Mar 8 05:22:57 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
].join('\n');; '[Mon Mar 8 05:24:29 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
} '[Mon Mar 8 05:31:47 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
</script> '<11>httpd[31628]: [error] [client xx.xx.xx.xx] File does not exist: /usr/local/installed/apache/htdocs/squirrelmail/_vti_inf.html in 29-Mar 15:18:20.50 from xx.xx.xx.xx',
</body> '<11>httpd[25859]: [error] [client xx.xx.xx.xx] File does not exist: /usr/local/installed/apache/htdocs/squirrelmail/_vti_bin/shtml.exe/_vti_rpc in 29-Mar 15:18:20.54 from xx.xx.xx.xx'
</html> ].join('\n');
}
</script>
</body>
</html>

65
browser-amd-requirejs/index.html
View file

@ -1,28 +1,37 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head> </head>
<body> <body>
<h2>Monaco Editor Sample - Loading with requirejs</h2>
<h2>Monaco Editor Sample - Loading with requirejs</h2> <div
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div> id="container"
style="width: 800px; height: 600px; border: 1px solid grey"
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js" integrity="sha256-0SGl1PJNDyJwcV5T+weg2zpEMrh7xvlwO4oXgvZCeZk=" crossorigin="anonymous"></script> ></div>
<script>
require.config({ paths: { 'vs': '../node_modules/monaco-editor/min/vs' }}); <script
src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"
require(['vs/editor/editor.main'], function() { integrity="sha256-0SGl1PJNDyJwcV5T+weg2zpEMrh7xvlwO4oXgvZCeZk="
var editor = monaco.editor.create(document.getElementById('container'), { crossorigin="anonymous"
value: [ ></script>
'function x() {', <script>
'\tconsole.log("Hello world!");', require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });
'}'
].join('\n'), require(['vs/editor/editor.main'], function () {
language: 'javascript' var editor = monaco.editor.create(
}); document.getElementById('container'),
}); {
</script> value: [
</body> 'function x() {',
</html> '\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
}
);
});
</script>
</body>
</html>

76
browser-amd-shared-model/index.html
View file

@ -1,34 +1,42 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head> </head>
<body> <body>
<h2>Monaco Editor Shared Models Sample</h2>
<h2>Monaco Editor Shared Models Sample</h2> <div
<div id="container1" style="width:400px;height:200px;border:1px solid grey"></div> id="container1"
<div id="container2" style="width:400px;height:200px;border:1px solid grey"></div> style="width: 400px; height: 200px; border: 1px solid grey"
></div>
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script> <div
<script> id="container2"
require.config({ paths: { 'vs': '../node_modules/monaco-editor/min/vs' }}); style="width: 400px; height: 200px; border: 1px solid grey"
></div>
require(['vs/editor/editor.main'], function() {
var model = monaco.editor.createModel([ <script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
'function x() {', <script>
'\tconsole.log("Hello world!");', require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });
'}'
].join('\n'), require(['vs/editor/editor.main'], function () {
'javascript' var model = monaco.editor.createModel(
); ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
var editor1 = monaco.editor.create(document.getElementById('container1'), { 'javascript'
model: model );
}); var editor1 = monaco.editor.create(
var editor2 = monaco.editor.create(document.getElementById('container2'), { document.getElementById('container1'),
model: model {
}); model: model
}); }
</script> );
</body> var editor2 = monaco.editor.create(
</html> document.getElementById('container2'),
{
model: model
}
);
});
</script>
</body>
</html>

35
browser-esm-parcel/index.html
View file

@ -1,28 +1,27 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head> </head>
<body> <body>
<h2>Monaco Editor Parcel Bundler Sample</h2>
<h2>Monaco Editor Parcel Bundler Sample</h2> This sample shows how to load a small subset of the editor:
<ul>
<li>Only the core editor and the find widget</li>
<li>Only the json language coloring</li>
</ul>
This sample shows how to load a small subset of the editor: To run this sample, you need to:
<ul>
<li>Only the core editor and the find widget</li>
<li>Only the json language coloring</li>
</ul>
To run this sample, you need to: <pre>
<pre>
$/browser-esm-parcel> npm install . $/browser-esm-parcel> npm install .
$/browser-esm-parcel> npm run build $/browser-esm-parcel> npm run build
$/browser-esm-parcel> npm run simpleserver $/browser-esm-parcel> npm run simpleserver
</pre> </pre
>
Then, open <a href="http://localhost:9999/">http://localhost:9999/</a>. Then, open <a href="http://localhost:9999/">http://localhost:9999/</a>.
</body>
</body>
</html> </html>

13622
browser-esm-parcel/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

34
browser-esm-parcel/package.json
View file

@ -1,19 +1,19 @@
{ {
"name": "helloworld", "name": "helloworld",
"dependencies": {}, "dependencies": {},
"scripts": { "scripts": {
"simpleserver": "yaserver --root ./dist --port 9999", "simpleserver": "yaserver --root ./dist --port 9999",
"build": "npm run build-index && npm run build-json && npm run build-css && npm run build-html && npm run build-ts && npm run build-worker", "build": "npm run build-index && npm run build-json && npm run build-css && npm run build-html && npm run build-ts && npm run build-worker",
"build-index": "parcel build src/index.html", "build-index": "parcel build src/index.html",
"build-json": "parcel build node_modules/monaco-editor/esm/vs/language/json/json.worker.js --no-source-maps", "build-json": "parcel build node_modules/monaco-editor/esm/vs/language/json/json.worker.js --no-source-maps",
"build-css": "parcel build node_modules/monaco-editor/esm/vs/language/css/css.worker.js --no-source-maps", "build-css": "parcel build node_modules/monaco-editor/esm/vs/language/css/css.worker.js --no-source-maps",
"build-html": "parcel build node_modules/monaco-editor/esm/vs/language/html/html.worker.js --no-source-maps", "build-html": "parcel build node_modules/monaco-editor/esm/vs/language/html/html.worker.js --no-source-maps",
"build-ts": "parcel build node_modules/monaco-editor/esm/vs/language/typescript/ts.worker.js --no-source-maps", "build-ts": "parcel build node_modules/monaco-editor/esm/vs/language/typescript/ts.worker.js --no-source-maps",
"build-worker": "parcel build node_modules/monaco-editor/esm/vs/editor/editor.worker.js --no-source-maps" "build-worker": "parcel build node_modules/monaco-editor/esm/vs/editor/editor.worker.js --no-source-maps"
}, },
"devDependencies": { "devDependencies": {
"monaco-editor": "0.20.0", "monaco-editor": "0.20.0",
"yaserver": "^0.3.0", "yaserver": "^0.3.0",
"parcel": "^1.12.4" "parcel": "^1.12.4"
} }
} }

21
browser-esm-parcel/src/index.html
View file

@ -1,12 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head> </head>
<body> <body>
<div id="container" style="width:800px;height:600px;border:1px solid #ccc"></div> <div
id="container"
style="width: 800px; height: 600px; border: 1px solid #ccc"
></div>
<script src="index.js"></script> <script src="index.js"></script>
</body> </body>
</html> </html>

9
browser-esm-parcel/src/index.js
View file

@ -1,4 +1,3 @@
import * as monaco from 'monaco-editor/esm/vs/editor/editor.main.js'; import * as monaco from 'monaco-editor/esm/vs/editor/editor.main.js';
self.MonacoEnvironment = { self.MonacoEnvironment = {
@ -16,14 +15,10 @@ self.MonacoEnvironment = {
return './ts.worker.js'; return './ts.worker.js';
} }
return './editor.worker.js'; return './editor.worker.js';
}, }
}; };
monaco.editor.create(document.getElementById('container'), { monaco.editor.create(document.getElementById('container'), {
value: [ value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript' language: 'javascript'
}); });

16
browser-esm-webpack-monaco-plugin/dist/index.html vendored
View file

@ -1,12 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head> </head>
<body> <body>
<script src="./main.bundle.js"></script>
<script src="./main.bundle.js"></script> </body>
</body>
</html> </html>

25
browser-esm-webpack-monaco-plugin/index.html
View file

@ -1,21 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head> </head>
<body> <body>
<h2>Monaco Editor Webpack Plugin Sample</h2>
<h2>Monaco Editor Webpack Plugin Sample</h2> To run this sample, you need to:
To run this sample, you need to: <pre>
<pre>
$/browser-esm-webpack> npm install . $/browser-esm-webpack> npm install .
$/browser-esm-webpack> ./node_modules/.bin/webpack $/browser-esm-webpack> ./node_modules/.bin/webpack
</pre> </pre
>
Then, <a href="./dist">open the ./dist folder</a>. Then, <a href="./dist">open the ./dist folder</a>.
</body>
</body>
</html> </html>

16
browser-esm-webpack-monaco-plugin/index.js
View file

@ -1,4 +1,4 @@
import * as monaco from "monaco-editor/esm/vs/editor/editor.api"; import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
(function () { (function () {
// create div to avoid needing a HtmlWebpackPlugin template // create div to avoid needing a HtmlWebpackPlugin template
@ -9,12 +9,8 @@ import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
document.body.appendChild(div); document.body.appendChild(div);
})(); })();
monaco.editor.create( monaco.editor.create(document.getElementById('root'), {
document.getElementById('root'), value: `const foo = () => 0;`,
{ language: 'javascript',
value: `const foo = () => 0;`, theme: 'vs-dark'
language: 'javascript', });
theme: 'vs-dark'
}
);

29
browser-esm-webpack-monaco-plugin/webpack.config.js
View file

@ -1,25 +1,28 @@
const path = require("path"); const path = require('path');
const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin"); const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = { module.exports = {
mode: process.env.NODE_ENV, mode: process.env.NODE_ENV,
entry: "./index.js", entry: './index.js',
output: { output: {
path: path.resolve(__dirname, "dist"), path: path.resolve(__dirname, 'dist'),
filename: "[name].bundle.js", filename: '[name].bundle.js'
}, },
module: { module: {
rules: [{ rules: [
test: /\.css$/, {
use: ["style-loader", "css-loader",], test: /\.css$/,
}, { use: ['style-loader', 'css-loader']
test: /\.ttf$/, },
use: ['file-loader'] {
}], test: /\.ttf$/,
use: ['file-loader']
}
]
}, },
plugins: [ plugins: [
new MonacoWebpackPlugin({ new MonacoWebpackPlugin({
languages: ["typescript", "javascript", "css"], languages: ['typescript', 'javascript', 'css']
}) })
] ]
}; };

23
browser-esm-webpack-small/dist/index.html vendored
View file

@ -1,14 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head> </head>
<body> <body>
<div
id="container"
style="width: 800px; height: 600px; border: 1px solid #ccc"
></div>
<div id="container" style="width:800px;height:600px;border:1px solid #ccc"></div> <script src="./app.bundle.js"></script>
</body>
<script src="./app.bundle.js"></script> </html>
</body>
</html>

37
browser-esm-webpack-small/index.html
View file

@ -1,27 +1,26 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head> </head>
<body> <body>
<h2>Monaco Editor Webpack Sample</h2>
<h2>Monaco Editor Webpack Sample</h2> This sample shows how to load a small subset of the editor:
<ul>
<li>Only the core editor and the find widget</li>
<li>Only the python language coloring</li>
</ul>
This sample shows how to load a small subset of the editor: To run this sample, you need to:
<ul>
<li>Only the core editor and the find widget</li>
<li>Only the python language coloring</li>
</ul>
To run this sample, you need to: <pre>
<pre>
$/browser-esm-webpack-small> npm install . $/browser-esm-webpack-small> npm install .
$/browser-esm-webpack-small> ./node_modules/.bin/webpack $/browser-esm-webpack-small> ./node_modules/.bin/webpack
</pre> </pre
>
Then, <a href="./dist">open the ./dist folder</a>. Then, <a href="./dist">open the ./dist folder</a>.
</body>
</body> </html>
</html>

9
browser-esm-webpack-small/index.js
View file

@ -1,4 +1,3 @@
// (1) Desired editor features: // (1) Desired editor features:
import 'monaco-editor/esm/vs/editor/browser/controller/coreCommands.js'; import 'monaco-editor/esm/vs/editor/browser/controller/coreCommands.js';
// import 'monaco-editor/esm/vs/editor/browser/widget/codeEditorWidget.js'; // import 'monaco-editor/esm/vs/editor/browser/widget/codeEditorWidget.js';
@ -90,8 +89,6 @@ import 'monaco-editor/esm/vs/basic-languages/python/python.contribution.js';
// import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution'; // import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';
// import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution'; // import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution';
self.MonacoEnvironment = { self.MonacoEnvironment = {
getWorkerUrl: function (moduleId, label) { getWorkerUrl: function (moduleId, label) {
// if (label === 'json') { // if (label === 'json') {
@ -108,7 +105,7 @@ self.MonacoEnvironment = {
// } // }
return './editor.worker.bundle.js'; return './editor.worker.bundle.js';
} }
} };
monaco.editor.create(document.getElementById('container'), { monaco.editor.create(document.getElementById('container'), {
value: [ value: [
@ -118,12 +115,12 @@ monaco.editor.create(document.getElementById('container'), {
' # Bananas the monkey can eat.', ' # Bananas the monkey can eat.',
' capacity = 10', ' capacity = 10',
' def eat(self, N):', ' def eat(self, N):',
' \'\'\'Make the monkey eat N bananas!\'\'\'', " '''Make the monkey eat N bananas!'''",
' capacity = capacity - N*banana.size', ' capacity = capacity - N*banana.size',
'', '',
' def feeding_frenzy(self):', ' def feeding_frenzy(self):',
' eat(9.25)', ' eat(9.25)',
' return "Yum yum"', ' return "Yum yum"'
].join('\n'), ].join('\n'),
language: 'python' language: 'python'
}); });

8652
browser-esm-webpack-small/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

28
browser-esm-webpack-small/package.json
View file

@ -1,16 +1,16 @@
{ {
"name": "helloworld", "name": "helloworld",
"dependencies": {}, "dependencies": {},
"scripts": { "scripts": {
"build": "webpack --progress" "build": "webpack --progress"
}, },
"devDependencies": { "devDependencies": {
"css-loader": "^4.2.0", "css-loader": "^4.2.0",
"file-loader": "^6.0.0", "file-loader": "^6.0.0",
"monaco-editor": "^0.20.0", "monaco-editor": "^0.20.0",
"style-loader": "^1.2.1", "style-loader": "^1.2.1",
"terser-webpack-plugin": "^4.0.0", "terser-webpack-plugin": "^4.0.0",
"webpack": "^4.44.1", "webpack": "^4.44.1",
"webpack-cli": "^3.3.12" "webpack-cli": "^3.3.12"
} }
} }

25
browser-esm-webpack-small/webpack.config.js
View file

@ -4,8 +4,8 @@ const TerserPlugin = require('terser-webpack-plugin');
module.exports = { module.exports = {
mode: 'production', mode: 'production',
entry: { entry: {
"app": './index.js', app: './index.js',
"editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js', 'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js'
// "json.worker": 'monaco-editor/esm/vs/language/json/json.worker', // "json.worker": 'monaco-editor/esm/vs/language/json/json.worker',
// "css.worker": 'monaco-editor/esm/vs/language/css/css.worker', // "css.worker": 'monaco-editor/esm/vs/language/css/css.worker',
// "html.worker": 'monaco-editor/esm/vs/language/html/html.worker', // "html.worker": 'monaco-editor/esm/vs/language/html/html.worker',
@ -17,16 +17,19 @@ module.exports = {
path: path.resolve(__dirname, 'dist') path: path.resolve(__dirname, 'dist')
}, },
module: { module: {
rules: [{ rules: [
test: /\.css$/, {
use: ['style-loader', 'css-loader'] test: /\.css$/,
}, { use: ['style-loader', 'css-loader']
test: /\.ttf$/, },
use: ['file-loader'] {
}] test: /\.ttf$/,
use: ['file-loader']
}
]
}, },
optimization: { optimization: {
minimize: true, minimize: true,
minimizer: [new TerserPlugin()], minimizer: [new TerserPlugin()]
}, }
}; };

13654
browser-esm-webpack-typescript/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

34
browser-esm-webpack-typescript/package.json
View file

@ -1,20 +1,20 @@
{ {
"name": "monaco-esm-webpack-typescript", "name": "monaco-esm-webpack-typescript",
"scripts": { "scripts": {
"start": "webpack-dev-server", "start": "webpack-dev-server",
"build": "webpack --progress" "build": "webpack --progress"
}, },
"dependencies": {}, "dependencies": {},
"devDependencies": { "devDependencies": {
"css-loader": "^4.2.0", "css-loader": "^4.2.0",
"file-loader": "^6.0.0", "file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0", "html-webpack-plugin": "^4.3.0",
"monaco-editor": "^0.20.0", "monaco-editor": "^0.20.0",
"style-loader": "^1.2.1", "style-loader": "^1.2.1",
"ts-loader": "^8.0.2", "ts-loader": "^8.0.2",
"typescript": "^3.9.7", "typescript": "^3.9.7",
"webpack": "^4.44.1", "webpack": "^4.44.1",
"webpack-cli": "^3.3.12", "webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0" "webpack-dev-server": "^3.11.0"
} }
} }

6
browser-esm-webpack-typescript/src/index.css
View file

@ -1,5 +1,5 @@
body { body {
width: 800px; width: 800px;
height: 600px; height: 600px;
border: 1px solid #ccc; border: 1px solid #ccc;
} }

38
browser-esm-webpack-typescript/src/index.ts
View file

@ -1,26 +1,26 @@
import * as monaco from "monaco-editor"; import * as monaco from 'monaco-editor';
import "./index.css"; import './index.css';
// @ts-ignore // @ts-ignore
self.MonacoEnvironment = { self.MonacoEnvironment = {
getWorkerUrl: function(moduleId, label) { getWorkerUrl: function (moduleId, label) {
if (label === "json") { if (label === 'json') {
return "./json.worker.bundle.js"; return './json.worker.bundle.js';
} }
if (label === "css") { if (label === 'css') {
return "./css.worker.bundle.js"; return './css.worker.bundle.js';
} }
if (label === "html") { if (label === 'html') {
return "./html.worker.bundle.js"; return './html.worker.bundle.js';
} }
if (label === "typescript" || label === "javascript") { if (label === 'typescript' || label === 'javascript') {
return "./ts.worker.bundle.js"; return './ts.worker.bundle.js';
} }
return "./editor.worker.bundle.js"; return './editor.worker.bundle.js';
} }
}; };
monaco.editor.create(document.body, { monaco.editor.create(document.body, {
value: ["function x() {", '\tconsole.log("Hello world!");', "}"].join("\n"), value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
language: "typescript" language: 'typescript'
}); });

28
browser-esm-webpack-typescript/tsconfig.json
View file

@ -1,16 +1,16 @@
{ {
"compilerOptions": { "compilerOptions": {
"sourceMap": true, "sourceMap": true,
"module": "commonjs", "module": "commonjs",
"moduleResolution": "node", "moduleResolution": "node",
"target": "es5", "target": "es5",
"outDir": "./dist", "outDir": "./dist",
"lib": ["dom", "es5", "es2015.collection", "es2015.promise"], "lib": ["dom", "es5", "es2015.collection", "es2015.promise"],
"types": [], "types": [],
"baseUrl": "./node_modules", "baseUrl": "./node_modules",
"jsx": "preserve", "jsx": "preserve",
"typeRoots": ["node_modules/@types"] "typeRoots": ["node_modules/@types"]
}, },
"include": ["./src/**/*"], "include": ["./src/**/*"],
"exclude": ["node_modules"] "exclude": ["node_modules"]
} }

82
browser-esm-webpack-typescript/webpack.config.js
View file

@ -1,44 +1,44 @@
const path = require("path"); const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin"); const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = { module.exports = {
mode: "development", mode: 'development',
entry: { entry: {
app: "./src/index.ts", app: './src/index.ts',
"editor.worker": "monaco-editor/esm/vs/editor/editor.worker.js", 'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
"json.worker": "monaco-editor/esm/vs/language/json/json.worker", 'json.worker': 'monaco-editor/esm/vs/language/json/json.worker',
"css.worker": "monaco-editor/esm/vs/language/css/css.worker", 'css.worker': 'monaco-editor/esm/vs/language/css/css.worker',
"html.worker": "monaco-editor/esm/vs/language/html/html.worker", 'html.worker': 'monaco-editor/esm/vs/language/html/html.worker',
"ts.worker": "monaco-editor/esm/vs/language/typescript/ts.worker" 'ts.worker': 'monaco-editor/esm/vs/language/typescript/ts.worker'
}, },
resolve: { resolve: {
extensions: [".ts", ".js"] extensions: ['.ts', '.js']
}, },
output: { output: {
globalObject: "self", globalObject: 'self',
filename: "[name].bundle.js", filename: '[name].bundle.js',
path: path.resolve(__dirname, "dist") path: path.resolve(__dirname, 'dist')
}, },
module: { module: {
rules: [ rules: [
{ {
test: /\.ts?$/, test: /\.ts?$/,
use: "ts-loader", use: 'ts-loader',
exclude: /node_modules/ exclude: /node_modules/
}, },
{ {
test: /\.css$/, test: /\.css$/,
use: ["style-loader", "css-loader"] use: ['style-loader', 'css-loader']
}, },
{ {
test: /\.ttf$/, test: /\.ttf$/,
use: ['file-loader'] use: ['file-loader']
} }
] ]
}, },
plugins: [ plugins: [
new HtmlWebPackPlugin({ new HtmlWebPackPlugin({
title: "Monaco Editor Sample" title: 'Monaco Editor Sample'
}) })
] ]
}; };

23
browser-esm-webpack/dist/index.html vendored
View file

@ -1,14 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head> </head>
<body> <body>
<div
id="container"
style="width: 800px; height: 600px; border: 1px solid #ccc"
></div>
<div id="container" style="width:800px;height:600px;border:1px solid #ccc"></div> <script src="./app.bundle.js"></script>
</body>
<script src="./app.bundle.js"></script> </html>
</body>
</html>

27
browser-esm-webpack/index.html
View file

@ -1,21 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head> </head>
<body> <body>
<h2>Monaco Editor Webpack Sample</h2>
<h2>Monaco Editor Webpack Sample</h2> To run this sample, you need to:
To run this sample, you need to: <pre>
<pre>
$/browser-esm-webpack> npm install . $/browser-esm-webpack> npm install .
$/browser-esm-webpack> ./node_modules/.bin/webpack $/browser-esm-webpack> ./node_modules/.bin/webpack
</pre> </pre
>
Then, <a href="./dist">open the ./dist folder</a>. Then, <a href="./dist">open the ./dist folder</a>.
</body>
</body> </html>
</html>

8
browser-esm-webpack/index.js
View file

@ -16,13 +16,9 @@ self.MonacoEnvironment = {
} }
return './editor.worker.bundle.js'; return './editor.worker.bundle.js';
} }
} };
monaco.editor.create(document.getElementById('container'), { monaco.editor.create(document.getElementById('container'), {
value: [ value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript' language: 'javascript'
}); });

7702
browser-esm-webpack/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

26
browser-esm-webpack/package.json
View file

@ -1,15 +1,15 @@
{ {
"name": "helloworld", "name": "helloworld",
"dependencies": {}, "dependencies": {},
"scripts": { "scripts": {
"build": "webpack --progress" "build": "webpack --progress"
}, },
"devDependencies": { "devDependencies": {
"css-loader": "^4.2.0", "css-loader": "^4.2.0",
"file-loader": "^6.0.0", "file-loader": "^6.0.0",
"monaco-editor": "^0.20.0", "monaco-editor": "^0.20.0",
"style-loader": "^1.2.1", "style-loader": "^1.2.1",
"webpack": "^4.44.1", "webpack": "^4.44.1",
"webpack-cli": "^3.3.12" "webpack-cli": "^3.3.12"
} }
} }

31
browser-esm-webpack/webpack.config.js
View file

@ -3,12 +3,12 @@ const path = require('path');
module.exports = { module.exports = {
mode: 'development', mode: 'development',
entry: { entry: {
"app": './index.js', app: './index.js',
"editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js', 'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
"json.worker": 'monaco-editor/esm/vs/language/json/json.worker', 'json.worker': 'monaco-editor/esm/vs/language/json/json.worker',
"css.worker": 'monaco-editor/esm/vs/language/css/css.worker', 'css.worker': 'monaco-editor/esm/vs/language/css/css.worker',
"html.worker": 'monaco-editor/esm/vs/language/html/html.worker', 'html.worker': 'monaco-editor/esm/vs/language/html/html.worker',
"ts.worker": 'monaco-editor/esm/vs/language/typescript/ts.worker', 'ts.worker': 'monaco-editor/esm/vs/language/typescript/ts.worker'
}, },
output: { output: {
globalObject: 'self', globalObject: 'self',
@ -16,12 +16,15 @@ module.exports = {
path: path.resolve(__dirname, 'dist') path: path.resolve(__dirname, 'dist')
}, },
module: { module: {
rules: [{ rules: [
test: /\.css$/, {
use: ['style-loader', 'css-loader'] test: /\.css$/,
}, { use: ['style-loader', 'css-loader']
test: /\.ttf$/, },
use: ['file-loader'] {
}] test: /\.ttf$/,
}, use: ['file-loader']
}
]
}
}; };

65
browser-script-editor/index.html
View file

@ -1,30 +1,35 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" data-name="vs/editor/editor.main" href="../node_modules/monaco-editor/min/vs/editor/editor.main.css"> <link
</head> rel="stylesheet"
<body> data-name="vs/editor/editor.main"
href="../node_modules/monaco-editor/min/vs/editor/editor.main.css"
<h2>Monaco Editor Sync Loading Sample</h2> />
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div> </head>
<body>
<script>var require = { paths: { 'vs': '../node_modules/monaco-editor/min/vs' } };</script> <h2>Monaco Editor Sync Loading Sample</h2>
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script> <div
<script src="../node_modules/monaco-editor/min/vs/editor/editor.main.nls.js"></script> id="container"
<script src="../node_modules/monaco-editor/min/vs/editor/editor.main.js"></script> style="width: 800px; height: 600px; border: 1px solid grey"
></div>
<script>
var editor = monaco.editor.create(document.getElementById('container'), { <script>
value: [ var require = { paths: { vs: '../node_modules/monaco-editor/min/vs' } };
'function x() {', </script>
'\tconsole.log("Hello world!");', <script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
'}' <script src="../node_modules/monaco-editor/min/vs/editor/editor.main.nls.js"></script>
].join('\n'), <script src="../node_modules/monaco-editor/min/vs/editor/editor.main.js"></script>
language: 'javascript'
}); <script>
</script> var editor = monaco.editor.create(document.getElementById('container'), {
value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join(
</body> '\n'
</html> ),
language: 'javascript'
});
</script>
</body>
</html>

191
browser-undo-redo-controls/index.html
View file

@ -1,104 +1,117 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" data-name="vs/editor/editor.main" href="../node_modules/monaco-editor/min/vs/editor/editor.main.css"> <link
</head> rel="stylesheet"
<body> data-name="vs/editor/editor.main"
href="../node_modules/monaco-editor/min/vs/editor/editor.main.css"
/>
</head>
<body>
<h2>Monaco Editor Undo Redo Samples</h2>
<h2>Monaco Editor Undo Redo Samples</h2> <div style="padding: 5pt">
<button id="undoButton" name="undo" onclick="undo();" disabled="true">
Undo
</button>
<button id="redoButton" name="redo" onclick="redo();" disabled="true">
Redo
</button>
</div>
<div style="padding: 5pt"> <div
<button id="undoButton" name="undo" onclick="undo();" disabled="true">Undo</button> id="container"
<button id="redoButton" name="redo" onclick="redo();" disabled="true">Redo</button> style="width: 800px; height: 600px; border: 1px solid grey"
</div> ></div>
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div> <script>
var require = { paths: { vs: '../node_modules/monaco-editor/min/vs' } };
</script>
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
<script src="../node_modules/monaco-editor/min/vs/editor/editor.main.nls.js"></script>
<script src="../node_modules/monaco-editor/min/vs/editor/editor.main.js"></script>
<script>var require = { paths: { 'vs': '../node_modules/monaco-editor/min/vs' } };</script> <script>
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script> const value = [
<script src="../node_modules/monaco-editor/min/vs/editor/editor.main.nls.js"></script> 'define([], function() {',
<script src="../node_modules/monaco-editor/min/vs/editor/editor.main.js"></script> '\treturn ({p1, p2}) => {',
'\t\treturn Promise.resolve("Hello, World");',
'\t};',
'});'
].join('\n');
<script> const editor = monaco.editor.create(
const value = [ document.getElementById('container'),
'define([], function() {', {
'\treturn ({p1, p2}) => {', value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join(
'\t\treturn Promise.resolve("Hello, World");', '\n'
'\t};', ),
'});' language: 'javascript'
].join('\n');
const editor = monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
});
editor.focus();
editor.setPosition({ lineNumber: 2, column: 30 });
const initialVersion = editor.getModel().getAlternativeVersionId();
let currentVersion = initialVersion;
let lastVersion = initialVersion;
editor.onDidChangeModelContent(e => {
const versionId = editor.getModel().getAlternativeVersionId();
// undoing
if (versionId < currentVersion) {
enableRedoButton();
// no more undo possible
if (versionId === initialVersion) {
disableUndoButton();
}
} else {
// redoing
if (versionId <= lastVersion) {
// redoing the last change
if (versionId == lastVersion) {
disableRedoButton();
} }
} else { // adding new change, disable redo when adding new changes );
disableRedoButton();
if (currentVersion > lastVersion) { editor.focus();
lastVersion = currentVersion; editor.setPosition({ lineNumber: 2, column: 30 });
const initialVersion = editor.getModel().getAlternativeVersionId();
let currentVersion = initialVersion;
let lastVersion = initialVersion;
editor.onDidChangeModelContent((e) => {
const versionId = editor.getModel().getAlternativeVersionId();
// undoing
if (versionId < currentVersion) {
enableRedoButton();
// no more undo possible
if (versionId === initialVersion) {
disableUndoButton();
}
} else {
// redoing
if (versionId <= lastVersion) {
// redoing the last change
if (versionId == lastVersion) {
disableRedoButton();
}
} else {
// adding new change, disable redo when adding new changes
disableRedoButton();
if (currentVersion > lastVersion) {
lastVersion = currentVersion;
}
}
enableUndoButton();
} }
currentVersion = versionId;
});
function undo() {
editor.trigger('aaaa', 'undo', 'aaaa');
editor.focus();
} }
enableUndoButton();
}
currentVersion = versionId;
});
function undo() { function redo() {
editor.trigger('aaaa', 'undo', 'aaaa'); editor.trigger('aaaa', 'redo', 'aaaa');
editor.focus(); editor.focus();
} }
function redo() { function enableUndoButton() {
editor.trigger('aaaa', 'redo', 'aaaa'); document.getElementById('undoButton').disabled = false;
editor.focus(); }
}
function enableUndoButton() { function disableUndoButton() {
document.getElementById("undoButton").disabled = false; document.getElementById('undoButton').disabled = true;
} }
function disableUndoButton() { function enableRedoButton() {
document.getElementById("undoButton").disabled = true; document.getElementById('redoButton').disabled = false;
} }
function enableRedoButton() { function disableRedoButton() {
document.getElementById("redoButton").disabled = false; document.getElementById('redoButton').disabled = true;
} }
</script>
function disableRedoButton() { </body>
document.getElementById("redoButton").disabled = true; </html>
}
</script>
</body>
</html>

100
electron-amd-nodeIntegration/electron-index.html
View file

@ -1,46 +1,54 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<title>Monaco Editor!</title> <title>Monaco Editor!</title>
</head> </head>
<body> <body>
<h1>Monaco Editor in Electron!</h1> <h1>Monaco Editor in Electron!</h1>
<div id="container" style="width:500px;height:300px;border:1px solid #ccc"></div> <div
</body> id="container"
style="width: 500px; height: 300px; border: 1px solid #ccc"
<script> ></div>
(function() { </body>
const path = require('path');
const amdLoader = require('../node_modules/monaco-editor/min/vs/loader.js'); <script>
const amdRequire = amdLoader.require; (function () {
const amdDefine = amdLoader.require.define; const path = require('path');
const amdLoader = require('../node_modules/monaco-editor/min/vs/loader.js');
function uriFromPath(_path) { const amdRequire = amdLoader.require;
var pathName = path.resolve(_path).replace(/\\/g, '/'); const amdDefine = amdLoader.require.define;
if (pathName.length > 0 && pathName.charAt(0) !== '/') {
pathName = '/' + pathName; function uriFromPath(_path) {
} var pathName = path.resolve(_path).replace(/\\/g, '/');
return encodeURI('file://' + pathName); if (pathName.length > 0 && pathName.charAt(0) !== '/') {
} pathName = '/' + pathName;
}
amdRequire.config({ return encodeURI('file://' + pathName);
baseUrl: uriFromPath(path.join(__dirname, '../node_modules/monaco-editor/min')) }
});
amdRequire.config({
// workaround monaco-css not understanding the environment baseUrl: uriFromPath(
self.module = undefined; path.join(__dirname, '../node_modules/monaco-editor/min')
)
amdRequire(['vs/editor/editor.main'], function() { });
var editor = monaco.editor.create(document.getElementById('container'), {
value: [ // workaround monaco-css not understanding the environment
'function x() {', self.module = undefined;
'\tconsole.log("Hello world!");',
'}' amdRequire(['vs/editor/editor.main'], function () {
].join('\n'), var editor = monaco.editor.create(
language: 'javascript' document.getElementById('container'),
}); {
}); value: [
})(); 'function x() {',
</script> '\tconsole.log("Hello world!");',
</html> '}'
].join('\n'),
language: 'javascript'
}
);
});
})();
</script>
</html>

29
electron-amd-nodeIntegration/index.html
View file

@ -1,18 +1,21 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head> </head>
<body> <body>
<h2>Monaco Editor Electron Sample</h2>
<h2>Monaco Editor Electron Sample</h2> To run this sample, you need to
<a href="https://github.com/electron/electron/releases"
>download Electron</a
>
and then execute:
To run this sample, you need to <a href="https://github.com/electron/electron/releases">download Electron</a> and then execute: <pre>
<pre>
$/electron-amd> electron main.js $/electron-amd> electron main.js
</pre> </pre
>
</body> </body>
</html> </html>

68
electron-amd-nodeIntegration/main.js
View file

@ -1,34 +1,34 @@
const electron = require('electron') const electron = require('electron');
const app = electron.app const app = electron.app;
const BrowserWindow = electron.BrowserWindow const BrowserWindow = electron.BrowserWindow;
let mainWindow; let mainWindow;
function createWindow() { function createWindow() {
mainWindow = new BrowserWindow({ mainWindow = new BrowserWindow({
width: 800, width: 800,
height: 600, height: 600,
webPreferences: { webPreferences: {
nodeIntegration: true nodeIntegration: true
} }
}); });
mainWindow.loadURL(`file://${__dirname}/electron-index.html`) mainWindow.loadURL(`file://${__dirname}/electron-index.html`);
mainWindow.webContents.openDevTools() mainWindow.webContents.openDevTools();
mainWindow.on('closed', function () { mainWindow.on('closed', function () {
mainWindow = null mainWindow = null;
}) });
} }
app.on('ready', createWindow) app.on('ready', createWindow);
app.on('window-all-closed', function () { app.on('window-all-closed', function () {
if (process.platform !== 'darwin') { if (process.platform !== 'darwin') {
app.quit() app.quit();
} }
}) });
app.on('activate', function () { app.on('activate', function () {
if (mainWindow === null) { if (mainWindow === null) {
createWindow() createWindow();
} }
}) });

1470
electron-amd-nodeIntegration/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

20
electron-amd-nodeIntegration/package.json
View file

@ -1,12 +1,12 @@
{ {
"name": "helloworld", "name": "helloworld",
"dependencies": {}, "dependencies": {},
"scripts": { "scripts": {
"execute": "electron ." "execute": "electron ."
}, },
"main": "./main", "main": "./main",
"devDependencies": { "devDependencies": {
"electron": "^9.1.2", "electron": "^9.1.2",
"monaco-editor": "0.20.0" "monaco-editor": "0.20.0"
} }
} }

65
electron-amd/electron-index.html
View file

@ -1,33 +1,32 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <title>Monaco Editor!</title>
<title>Monaco Editor!</title> </head>
</head>
<body>
<body> <h1>Monaco Editor in Electron (without nodeIntegration)!</h1>
<h1>Monaco Editor in Electron (without nodeIntegration)!</h1> Note: Since Electron without nodeIntegration is very similar to a browser,
Note: Since Electron without nodeIntegration is very similar to a browser, you can have a look at all the other `browser-` samples, as they should work
you can have a look at all the other `browser-` samples, as they should work just fine. <br /><br />
just fine. <br /></br /> <div
<div id="container" style="width:500px;height:300px;border:1px solid #ccc"></div> id="container"
</body> style="width: 500px; height: 300px; border: 1px solid #ccc"
></div>
<script src="./node_modules/monaco-editor/min/vs/loader.js"></script> </body>
<script>
require.config({ paths: { 'vs': '../node_modules/monaco-editor/min/vs' } }); <script src="./node_modules/monaco-editor/min/vs/loader.js"></script>
<script>
require(['vs/editor/editor.main'], function () { require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });
var editor = monaco.editor.create(document.getElementById('container'), {
value: [ require(['vs/editor/editor.main'], function () {
'function x() {', var editor = monaco.editor.create(document.getElementById('container'), {
'\tconsole.log("Hello world!");', value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join(
'}' '\n'
].join('\n'), ),
language: 'javascript' language: 'javascript'
}); });
}); });
</script> </script>
</html>
</html>

29
electron-amd/index.html
View file

@ -1,18 +1,21 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head> </head>
<body> <body>
<h2>Monaco Editor Electron Sample</h2>
<h2>Monaco Editor Electron Sample</h2> To run this sample, you need to
<a href="https://github.com/electron/electron/releases"
>download Electron</a
>
and then execute:
To run this sample, you need to <a href="https://github.com/electron/electron/releases">download Electron</a> and then execute: <pre>
<pre>
$/electron-amd> electron main.js $/electron-amd> electron main.js
</pre> </pre
>
</body> </body>
</html> </html>

56
electron-amd/main.js
View file

@ -1,28 +1,28 @@
const electron = require('electron') const electron = require('electron');
const app = electron.app const app = electron.app;
const BrowserWindow = electron.BrowserWindow const BrowserWindow = electron.BrowserWindow;
let mainWindow; let mainWindow;
function createWindow() { function createWindow() {
mainWindow = new BrowserWindow({ width: 800, height: 600 }) mainWindow = new BrowserWindow({ width: 800, height: 600 });
mainWindow.loadURL(`file://${__dirname}/electron-index.html`) mainWindow.loadURL(`file://${__dirname}/electron-index.html`);
mainWindow.webContents.openDevTools() mainWindow.webContents.openDevTools();
mainWindow.on('closed', function () { mainWindow.on('closed', function () {
mainWindow = null mainWindow = null;
}) });
} }
app.on('ready', createWindow) app.on('ready', createWindow);
app.on('window-all-closed', function () { app.on('window-all-closed', function () {
if (process.platform !== 'darwin') { if (process.platform !== 'darwin') {
app.quit() app.quit();
} }
}) });
app.on('activate', function () { app.on('activate', function () {
if (mainWindow === null) { if (mainWindow === null) {
createWindow() createWindow();
} }
}) });

1470
electron-amd/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

20
electron-amd/package.json
View file

@ -1,12 +1,12 @@
{ {
"name": "helloworld", "name": "helloworld",
"dependencies": {}, "dependencies": {},
"scripts": { "scripts": {
"execute": "electron ." "execute": "electron ."
}, },
"main": "./main", "main": "./main",
"devDependencies": { "devDependencies": {
"electron": "^9.1.2", "electron": "^9.1.2",
"monaco-editor": "0.20.0" "monaco-editor": "0.20.0"
} }
} }

109
nwjs-amd-v2/index.html
View file

@ -1,50 +1,59 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<title>Monaco Editor under nodewebkit</title> <title>Monaco Editor under nodewebkit</title>
<!--link rel="stylesheet" data-name="vs/editor/editor.main" href="/node_modules/monaco-editor/min/vs/editor/editor.main.css"--> <!--link rel="stylesheet" data-name="vs/editor/editor.main" href="/node_modules/monaco-editor/min/vs/editor/editor.main.css"-->
<!--link rel="stylesheet" type="text/css" href="/resources/css/flex-boxes.css"--> <!--link rel="stylesheet" type="text/css" href="/resources/css/flex-boxes.css"-->
<style type="text/css"> <style type="text/css">
body,#container{margin:0px;padding:0px;box-sizing:border-box;} body,
body{height:100vh;overflow:hidden;} #container {
#container{overflow:hidden;height:100vh;} margin: 0px;
.toolbox{ padding: 0px;
height:200px; box-sizing: border-box;
} }
</style> body {
</head> height: 100vh;
<body> overflow: hidden;
<div id="container"></div> }
</body> #container {
overflow: hidden;
<!--script> height: 100vh;
// Monaco uses a custom amd loader that over-rides node's require. }
// Keep a reference to node's require so we can restore it after executing the amd loader file. .toolbox {
var nodeRequire1 = require; height: 200px;
</script--> }
<!--script src="/node_modules/monaco-editor/min/vs/loader1.js"></script--> </style>
<script> </head>
var ERequire = require("../../node_modules/monaco-editor/min/vs/loader.js"); <body>
//__dirname == root path of you application <div id="container"></div>
ERequire.config({ </body>
baseUrl: "file:///"+__dirname+"/node_modules/monaco-editor/min/"
}) <!--script>
// Monaco uses a custom amd loader that over-rides node's require.
// workaround monaco-css not understanding the environment // Keep a reference to node's require so we can restore it after executing the amd loader file.
self.module = undefined; var nodeRequire1 = require;
// workaround monaco-typescript not understanding the environment </script-->
self.process.browser = true; <!--script src="/node_modules/monaco-editor/min/vs/loader1.js"></script-->
ERequire(['vs/editor/editor.main'], function() { <script>
var editor = monaco.editor.create(document.getElementById('container'), { var ERequire = require('../../node_modules/monaco-editor/min/vs/loader.js');
value: [ //__dirname == root path of you application
'function x() {', ERequire.config({
'\tconsole.log("Hello world!");', baseUrl: 'file:///' + __dirname + '/node_modules/monaco-editor/min/'
'}' });
].join('\n'),
language: 'javascript', // workaround monaco-css not understanding the environment
theme: "vs-dark" self.module = undefined;
}); // workaround monaco-typescript not understanding the environment
}); self.process.browser = true;
</script> ERequire(['vs/editor/editor.main'], function () {
</html> var editor = monaco.editor.create(document.getElementById('container'), {
value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join(
'\n'
),
language: 'javascript',
theme: 'vs-dark'
});
});
</script>
</html>

20
nwjs-amd-v2/package-lock.json generated
View file

@ -1,12 +1,12 @@
{ {
"name": "helloworld", "name": "helloworld",
"requires": true, "requires": true,
"lockfileVersion": 1, "lockfileVersion": 1,
"dependencies": { "dependencies": {
"monaco-editor": { "monaco-editor": {
"version": "0.19.0", "version": "0.19.0",
"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.19.0.tgz", "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.19.0.tgz",
"integrity": "sha512-ida++HI/s9V8ma8yYS9CAS0UJEFwW1gbt9G6oviEdv/aHhFd/kV3sXrINqC63TVdKzOZdKjPRRCOPJJ80zvLbw==" "integrity": "sha512-ida++HI/s9V8ma8yYS9CAS0UJEFwW1gbt9G6oviEdv/aHhFd/kV3sXrINqC63TVdKzOZdKjPRRCOPJJ80zvLbw=="
} }
} }
} }

10
nwjs-amd-v2/package.json
View file

@ -1,7 +1,7 @@
{ {
"name": "helloworld", "name": "helloworld",
"main": "index.html", "main": "index.html",
"dependencies": { "dependencies": {
"monaco-editor": "0.19.0" "monaco-editor": "0.19.0"
} }
} }

101
nwjs-amd/index.html
View file

@ -1,48 +1,53 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<title>Hello World!</title> <title>Hello World!</title>
<link rel="stylesheet" data-name="vs/editor/editor.main" href="node_modules/monaco-editor/min/vs/editor/editor.main.css"> <link
</head> rel="stylesheet"
<body> data-name="vs/editor/editor.main"
<h1>Hello World!</h1> href="node_modules/monaco-editor/min/vs/editor/editor.main.css"
<div id="container" style="width:500px;height:300px;border:1px solid #ccc"></div> />
</body> </head>
<body>
<script> <h1>Hello World!</h1>
// Monaco uses a custom amd loader that over-rides node's require. <div
// Keep a reference to node's require so we can restore it after executing the amd loader file. id="container"
var nodeRequire = require; style="width: 500px; height: 300px; border: 1px solid #ccc"
</script> ></div>
<script src="node_modules/monaco-editor/min/vs/loader.js"></script> </body>
<script>
// Save Monaco's amd require and restore Node's require <script>
var amdRequire = require; // Monaco uses a custom amd loader that over-rides node's require.
require = nodeRequire; // Keep a reference to node's require so we can restore it after executing the amd loader file.
require.nodeRequire = require; var nodeRequire = require;
</script> </script>
<script src="node_modules/monaco-editor/min/vs/loader.js"></script>
<script> <script>
amdRequire.config({ // Save Monaco's amd require and restore Node's require
baseUrl: 'node_modules/monaco-editor/min' var amdRequire = require;
}); require = nodeRequire;
require.nodeRequire = require;
// workaround monaco-css not understanding the environment </script>
self.module = undefined;
<script>
// workaround monaco-typescript not understanding the environment amdRequire.config({
self.process.browser = true; baseUrl: 'node_modules/monaco-editor/min'
});
amdRequire(['vs/editor/editor.main'], function() {
var editor = monaco.editor.create(document.getElementById('container'), { // workaround monaco-css not understanding the environment
value: [ self.module = undefined;
'function x() {',
'\tconsole.log("Hello world!");', // workaround monaco-typescript not understanding the environment
'}' self.process.browser = true;
].join('\n'),
language: 'javascript' amdRequire(['vs/editor/editor.main'], function () {
}); var editor = monaco.editor.create(document.getElementById('container'), {
}); value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join(
</script> '\n'
</html> ),
language: 'javascript'
});
});
</script>
</html>

20
nwjs-amd/package-lock.json generated
View file

@ -1,12 +1,12 @@
{ {
"name": "helloworld", "name": "helloworld",
"requires": true, "requires": true,
"lockfileVersion": 1, "lockfileVersion": 1,
"dependencies": { "dependencies": {
"monaco-editor": { "monaco-editor": {
"version": "0.19.0", "version": "0.19.0",
"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.19.0.tgz", "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.19.0.tgz",
"integrity": "sha512-ida++HI/s9V8ma8yYS9CAS0UJEFwW1gbt9G6oviEdv/aHhFd/kV3sXrINqC63TVdKzOZdKjPRRCOPJJ80zvLbw==" "integrity": "sha512-ida++HI/s9V8ma8yYS9CAS0UJEFwW1gbt9G6oviEdv/aHhFd/kV3sXrINqC63TVdKzOZdKjPRRCOPJJ80zvLbw=="
} }
} }
} }

10
nwjs-amd/package.json
View file

@ -1,7 +1,7 @@
{ {
"name": "helloworld", "name": "helloworld",
"main": "index.html", "main": "index.html",
"dependencies": { "dependencies": {
"monaco-editor": "0.19.0" "monaco-editor": "0.19.0"
} }
} }