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",
"singleQuote": true,
"trailingComma": "none",
"semi": true,
"useTabs": true
"arrowParens": "always",
"singleQuote": true,
"trailingComma": "none",
"semi": true,
"useTabs": true
}

2
.vscode/settings.json vendored
View file

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

42
LICENSE.md
View file

@ -1,21 +1,21 @@
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.
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.

77
README.md
View file

@ -1,38 +1,39 @@
# 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
# 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

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

@ -1,59 +1,73 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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>

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

@ -1,30 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<title>browser-amd-editor</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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>browser-amd-editor</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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>

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

@ -1,79 +1,70 @@
<!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>
<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>

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

@ -1,39 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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="X-UA-Compatible" content="IE=edge" />
<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>

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

@ -1,36 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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="X-UA-Compatible" content="IE=edge" />
<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>

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

@ -1,107 +1,111 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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',
'[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 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 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 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 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 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 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 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:22:55 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 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 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 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 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 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',
'<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',
'<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',
].join('\n');;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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',
'[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 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 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 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 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 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 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 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:22:55 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 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 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 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 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 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',
'<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',
'<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'
].join('\n');
}
</script>
</body>
</html>

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

@ -1,28 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<h2>Monaco Editor Sample - Loading with requirejs</h2>
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js" integrity="sha256-0SGl1PJNDyJwcV5T+weg2zpEMrh7xvlwO4oXgvZCeZk=" crossorigin="anonymous"></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>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<h2>Monaco Editor Sample - Loading with requirejs</h2>
<div
id="container"
style="width: 800px; height: 600px; border: 1px solid grey"
></div>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"
integrity="sha256-0SGl1PJNDyJwcV5T+weg2zpEMrh7xvlwO4oXgvZCeZk="
crossorigin="anonymous"
></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>

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

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

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

@ -1,28 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<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:
<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:
To run this sample, you need to:
<pre>
<pre>
$/browser-esm-parcel> npm install .
$/browser-esm-parcel> npm run build
$/browser-esm-parcel> npm run simpleserver
</pre>
</pre
>
Then, open <a href="http://localhost:9999/">http://localhost:9999/</a>.
</body>
Then, open <a href="http://localhost:9999/">http://localhost:9999/</a>.
</body>
</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",
"dependencies": {},
"scripts": {
"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-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-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-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"
},
"devDependencies": {
"monaco-editor": "0.20.0",
"yaserver": "^0.3.0",
"parcel": "^1.12.4"
}
"name": "helloworld",
"dependencies": {},
"scripts": {
"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-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-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-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"
},
"devDependencies": {
"monaco-editor": "0.20.0",
"yaserver": "^0.3.0",
"parcel": "^1.12.4"
}
}

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

@ -1,12 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<div id="container" style="width:800px;height:600px;border:1px solid #ccc"></div>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<div
id="container"
style="width: 800px; height: 600px; border: 1px solid #ccc"
></div>
<script src="index.js"></script>
</body>
</html>
<script src="index.js"></script>
</body>
</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';
self.MonacoEnvironment = {
@ -16,14 +15,10 @@ self.MonacoEnvironment = {
return './ts.worker.js';
}
return './editor.worker.js';
},
}
};
monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
language: 'javascript'
});

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

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

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

@ -1,21 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<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> ./node_modules/.bin/webpack
</pre>
</pre
>
Then, <a href="./dist">open the ./dist folder</a>.
</body>
Then, <a href="./dist">open the ./dist folder</a>.
</body>
</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 () {
// 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);
})();
monaco.editor.create(
document.getElementById('root'),
{
value: `const foo = () => 0;`,
language: 'javascript',
theme: 'vs-dark'
}
);
monaco.editor.create(document.getElementById('root'), {
value: `const foo = () => 0;`,
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 MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
const path = require('path');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = {
mode: process.env.NODE_ENV,
entry: "./index.js",
entry: './index.js',
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].bundle.js",
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js'
},
module: {
rules: [{
test: /\.css$/,
use: ["style-loader", "css-loader",],
}, {
test: /\.ttf$/,
use: ['file-loader']
}],
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.ttf$/,
use: ['file-loader']
}
]
},
plugins: [
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>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<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>
</html>
<script src="./app.bundle.js"></script>
</body>
</html>

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

@ -1,27 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<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:
<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:
To run this sample, you need to:
<pre>
<pre>
$/browser-esm-webpack-small> npm install .
$/browser-esm-webpack-small> ./node_modules/.bin/webpack
</pre>
</pre
>
Then, <a href="./dist">open the ./dist folder</a>.
</body>
</html>
Then, <a href="./dist">open the ./dist folder</a>.
</body>
</html>

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

@ -1,4 +1,3 @@
// (1) Desired editor features:
import 'monaco-editor/esm/vs/editor/browser/controller/coreCommands.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/typescript/typescript.contribution';
self.MonacoEnvironment = {
getWorkerUrl: function (moduleId, label) {
// if (label === 'json') {
@ -108,7 +105,7 @@ self.MonacoEnvironment = {
// }
return './editor.worker.bundle.js';
}
}
};
monaco.editor.create(document.getElementById('container'), {
value: [
@ -118,12 +115,12 @@ monaco.editor.create(document.getElementById('container'), {
' # Bananas the monkey can eat.',
' capacity = 10',
' def eat(self, N):',
' \'\'\'Make the monkey eat N bananas!\'\'\'',
" '''Make the monkey eat N bananas!'''",
' capacity = capacity - N*banana.size',
'',
' def feeding_frenzy(self):',
' eat(9.25)',
' return "Yum yum"',
' return "Yum yum"'
].join('\n'),
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",
"dependencies": {},
"scripts": {
"build": "webpack --progress"
},
"devDependencies": {
"css-loader": "^4.2.0",
"file-loader": "^6.0.0",
"monaco-editor": "^0.20.0",
"style-loader": "^1.2.1",
"terser-webpack-plugin": "^4.0.0",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
}
"name": "helloworld",
"dependencies": {},
"scripts": {
"build": "webpack --progress"
},
"devDependencies": {
"css-loader": "^4.2.0",
"file-loader": "^6.0.0",
"monaco-editor": "^0.20.0",
"style-loader": "^1.2.1",
"terser-webpack-plugin": "^4.0.0",
"webpack": "^4.44.1",
"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 = {
mode: 'production',
entry: {
"app": './index.js',
"editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js',
app: './index.js',
'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js'
// "json.worker": 'monaco-editor/esm/vs/language/json/json.worker',
// "css.worker": 'monaco-editor/esm/vs/language/css/css.worker',
// "html.worker": 'monaco-editor/esm/vs/language/html/html.worker',
@ -17,16 +17,19 @@ module.exports = {
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}, {
test: /\.ttf$/,
use: ['file-loader']
}]
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.ttf$/,
use: ['file-loader']
}
]
},
optimization: {
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",
"scripts": {
"start": "webpack-dev-server",
"name": "monaco-esm-webpack-typescript",
"scripts": {
"start": "webpack-dev-server",
"build": "webpack --progress"
},
"dependencies": {},
"devDependencies": {
"css-loader": "^4.2.0",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"monaco-editor": "^0.20.0",
"style-loader": "^1.2.1",
"ts-loader": "^8.0.2",
"typescript": "^3.9.7",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
},
"dependencies": {},
"devDependencies": {
"css-loader": "^4.2.0",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"monaco-editor": "^0.20.0",
"style-loader": "^1.2.1",
"ts-loader": "^8.0.2",
"typescript": "^3.9.7",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
}

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

@ -1,5 +1,5 @@
body {
width: 800px;
height: 600px;
border: 1px solid #ccc;
width: 800px;
height: 600px;
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 "./index.css";
import * as monaco from 'monaco-editor';
import './index.css';
// @ts-ignore
self.MonacoEnvironment = {
getWorkerUrl: function(moduleId, label) {
if (label === "json") {
return "./json.worker.bundle.js";
}
if (label === "css") {
return "./css.worker.bundle.js";
}
if (label === "html") {
return "./html.worker.bundle.js";
}
if (label === "typescript" || label === "javascript") {
return "./ts.worker.bundle.js";
}
return "./editor.worker.bundle.js";
}
getWorkerUrl: function (moduleId, label) {
if (label === 'json') {
return './json.worker.bundle.js';
}
if (label === 'css') {
return './css.worker.bundle.js';
}
if (label === 'html') {
return './html.worker.bundle.js';
}
if (label === 'typescript' || label === 'javascript') {
return './ts.worker.bundle.js';
}
return './editor.worker.bundle.js';
}
};
monaco.editor.create(document.body, {
value: ["function x() {", '\tconsole.log("Hello world!");', "}"].join("\n"),
language: "typescript"
value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
language: 'typescript'
});

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

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

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

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

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

@ -1,14 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<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>
</html>
<script src="./app.bundle.js"></script>
</body>
</html>

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

@ -1,21 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<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> ./node_modules/.bin/webpack
</pre>
</pre
>
Then, <a href="./dist">open the ./dist folder</a>.
</body>
</html>
Then, <a href="./dist">open the ./dist folder</a>.
</body>
</html>

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

@ -16,13 +16,9 @@ self.MonacoEnvironment = {
}
return './editor.worker.bundle.js';
}
}
};
monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
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",
"dependencies": {},
"scripts": {
"build": "webpack --progress"
},
"devDependencies": {
"css-loader": "^4.2.0",
"file-loader": "^6.0.0",
"monaco-editor": "^0.20.0",
"style-loader": "^1.2.1",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
}
"name": "helloworld",
"dependencies": {},
"scripts": {
"build": "webpack --progress"
},
"devDependencies": {
"css-loader": "^4.2.0",
"file-loader": "^6.0.0",
"monaco-editor": "^0.20.0",
"style-loader": "^1.2.1",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
}
}

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

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

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

@ -1,30 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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">
</head>
<body>
<h2>Monaco Editor Sync Loading Sample</h2>
<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 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="X-UA-Compatible" content="IE=edge" />
<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"
/>
</head>
<body>
<h2>Monaco Editor Sync Loading Sample</h2>
<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 editor = monaco.editor.create(document.getElementById('container'), {
value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join(
'\n'
),
language: 'javascript'
});
</script>
</body>
</html>

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

@ -1,104 +1,117 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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">
</head>
<body>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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"
/>
</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">
<button id="undoButton" name="undo" onclick="undo();" disabled="true">Undo</button>
<button id="redoButton" name="redo" onclick="redo();" disabled="true">Redo</button>
</div>
<div
id="container"
style="width: 800px; height: 600px; border: 1px solid grey"
></div>
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>
<script>
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 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>
const value = [
'define([], function() {',
'\treturn ({p1, p2}) => {',
'\t\treturn Promise.resolve("Hello, World");',
'\t};',
'});'
].join('\n');
<script>
const value = [
'define([], function() {',
'\treturn ({p1, p2}) => {',
'\t\treturn Promise.resolve("Hello, World");',
'\t};',
'});'
].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();
const editor = monaco.editor.create(
document.getElementById('container'),
{
value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join(
'\n'
),
language: 'javascript'
}
} else { // adding new change, disable redo when adding new changes
disableRedoButton();
if (currentVersion > lastVersion) {
lastVersion = currentVersion;
);
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) {
lastVersion = currentVersion;
}
}
enableUndoButton();
}
currentVersion = versionId;
});
function undo() {
editor.trigger('aaaa', 'undo', 'aaaa');
editor.focus();
}
enableUndoButton();
}
currentVersion = versionId;
});
function undo() {
editor.trigger('aaaa', 'undo', 'aaaa');
editor.focus();
}
function redo() {
editor.trigger('aaaa', 'redo', 'aaaa');
editor.focus();
}
function redo() {
editor.trigger('aaaa', 'redo', 'aaaa');
editor.focus();
}
function enableUndoButton() {
document.getElementById('undoButton').disabled = false;
}
function enableUndoButton() {
document.getElementById("undoButton").disabled = false;
}
function disableUndoButton() {
document.getElementById('undoButton').disabled = true;
}
function disableUndoButton() {
document.getElementById("undoButton").disabled = true;
}
function enableRedoButton() {
document.getElementById('redoButton').disabled = false;
}
function enableRedoButton() {
document.getElementById("redoButton").disabled = false;
}
function disableRedoButton() {
document.getElementById("redoButton").disabled = true;
}
</script>
</body>
</html>
function disableRedoButton() {
document.getElementById('redoButton').disabled = true;
}
</script>
</body>
</html>

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

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

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

@ -1,18 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<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
</pre>
</body>
</html>
</pre
>
</body>
</html>

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

@ -1,34 +1,34 @@
const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
mainWindow.loadURL(`file://${__dirname}/electron-index.html`)
mainWindow.webContents.openDevTools()
mainWindow.on('closed', function () {
mainWindow = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
if (mainWindow === null) {
createWindow()
}
})
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
mainWindow.loadURL(`file://${__dirname}/electron-index.html`);
mainWindow.webContents.openDevTools();
mainWindow.on('closed', function () {
mainWindow = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', function () {
if (mainWindow === null) {
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",
"dependencies": {},
"scripts": {
"execute": "electron ."
},
"main": "./main",
"devDependencies": {
"electron": "^9.1.2",
"monaco-editor": "0.20.0"
}
"name": "helloworld",
"dependencies": {},
"scripts": {
"execute": "electron ."
},
"main": "./main",
"devDependencies": {
"electron": "^9.1.2",
"monaco-editor": "0.20.0"
}
}

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

@ -1,33 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Monaco Editor!</title>
</head>
<body>
<h1>Monaco Editor in Electron (without nodeIntegration)!</h1>
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
just fine. <br /></br />
<div id="container" style="width:500px;height:300px;border:1px solid #ccc"></div>
</body>
<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>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Monaco Editor!</title>
</head>
<body>
<h1>Monaco Editor in Electron (without nodeIntegration)!</h1>
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
just fine. <br /><br />
<div
id="container"
style="width: 500px; height: 300px; border: 1px solid #ccc"
></div>
</body>
<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>
</html>

29
electron-amd/index.html
View file

@ -1,18 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<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
</pre>
</body>
</html>
</pre
>
</body>
</html>

56
electron-amd/main.js
View file

@ -1,28 +1,28 @@
const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({ width: 800, height: 600 })
mainWindow.loadURL(`file://${__dirname}/electron-index.html`)
mainWindow.webContents.openDevTools()
mainWindow.on('closed', function () {
mainWindow = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
if (mainWindow === null) {
createWindow()
}
})
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({ width: 800, height: 600 });
mainWindow.loadURL(`file://${__dirname}/electron-index.html`);
mainWindow.webContents.openDevTools();
mainWindow.on('closed', function () {
mainWindow = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', function () {
if (mainWindow === null) {
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",
"dependencies": {},
"scripts": {
"execute": "electron ."
},
"main": "./main",
"devDependencies": {
"electron": "^9.1.2",
"monaco-editor": "0.20.0"
}
"name": "helloworld",
"dependencies": {},
"scripts": {
"execute": "electron ."
},
"main": "./main",
"devDependencies": {
"electron": "^9.1.2",
"monaco-editor": "0.20.0"
}
}

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

@ -1,50 +1,59 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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" type="text/css" href="/resources/css/flex-boxes.css"-->
<style type="text/css">
body,#container{margin:0px;padding:0px;box-sizing:border-box;}
body{height:100vh;overflow:hidden;}
#container{overflow:hidden;height:100vh;}
.toolbox{
height:200px;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
<!--script>
// 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.
var nodeRequire1 = require;
</script-->
<!--script src="/node_modules/monaco-editor/min/vs/loader1.js"></script-->
<script>
var ERequire = require("../../node_modules/monaco-editor/min/vs/loader.js");
//__dirname == root path of you application
ERequire.config({
baseUrl: "file:///"+__dirname+"/node_modules/monaco-editor/min/"
})
// workaround monaco-css not understanding the environment
self.module = undefined;
// workaround monaco-typescript not understanding the environment
self.process.browser = true;
ERequire(['vs/editor/editor.main'], function() {
var editor = monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript',
theme: "vs-dark"
});
});
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<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" type="text/css" href="/resources/css/flex-boxes.css"-->
<style type="text/css">
body,
#container {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
height: 100vh;
overflow: hidden;
}
#container {
overflow: hidden;
height: 100vh;
}
.toolbox {
height: 200px;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
<!--script>
// 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.
var nodeRequire1 = require;
</script-->
<!--script src="/node_modules/monaco-editor/min/vs/loader1.js"></script-->
<script>
var ERequire = require('../../node_modules/monaco-editor/min/vs/loader.js');
//__dirname == root path of you application
ERequire.config({
baseUrl: 'file:///' + __dirname + '/node_modules/monaco-editor/min/'
});
// workaround monaco-css not understanding the environment
self.module = undefined;
// workaround monaco-typescript not understanding the environment
self.process.browser = true;
ERequire(['vs/editor/editor.main'], function () {
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",
"requires": true,
"lockfileVersion": 1,
"dependencies": {
"monaco-editor": {
"version": "0.19.0",
"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.19.0.tgz",
"integrity": "sha512-ida++HI/s9V8ma8yYS9CAS0UJEFwW1gbt9G6oviEdv/aHhFd/kV3sXrINqC63TVdKzOZdKjPRRCOPJJ80zvLbw=="
}
}
"name": "helloworld",
"requires": true,
"lockfileVersion": 1,
"dependencies": {
"monaco-editor": {
"version": "0.19.0",
"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.19.0.tgz",
"integrity": "sha512-ida++HI/s9V8ma8yYS9CAS0UJEFwW1gbt9G6oviEdv/aHhFd/kV3sXrINqC63TVdKzOZdKjPRRCOPJJ80zvLbw=="
}
}
}

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

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

101
nwjs-amd/index.html
View file

@ -1,48 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link rel="stylesheet" data-name="vs/editor/editor.main" href="node_modules/monaco-editor/min/vs/editor/editor.main.css">
</head>
<body>
<h1>Hello World!</h1>
<div id="container" style="width:500px;height:300px;border:1px solid #ccc"></div>
</body>
<script>
// 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.
var nodeRequire = require;
</script>
<script src="node_modules/monaco-editor/min/vs/loader.js"></script>
<script>
// Save Monaco's amd require and restore Node's require
var amdRequire = require;
require = nodeRequire;
require.nodeRequire = require;
</script>
<script>
amdRequire.config({
baseUrl: 'node_modules/monaco-editor/min'
});
// workaround monaco-css not understanding the environment
self.module = undefined;
// workaround monaco-typescript not understanding the environment
self.process.browser = true;
amdRequire(['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>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
<link
rel="stylesheet"
data-name="vs/editor/editor.main"
href="node_modules/monaco-editor/min/vs/editor/editor.main.css"
/>
</head>
<body>
<h1>Hello World!</h1>
<div
id="container"
style="width: 500px; height: 300px; border: 1px solid #ccc"
></div>
</body>
<script>
// 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.
var nodeRequire = require;
</script>
<script src="node_modules/monaco-editor/min/vs/loader.js"></script>
<script>
// Save Monaco's amd require and restore Node's require
var amdRequire = require;
require = nodeRequire;
require.nodeRequire = require;
</script>
<script>
amdRequire.config({
baseUrl: 'node_modules/monaco-editor/min'
});
// workaround monaco-css not understanding the environment
self.module = undefined;
// workaround monaco-typescript not understanding the environment
self.process.browser = true;
amdRequire(['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>
</html>

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

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

10
nwjs-amd/package.json
View file

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