SystemSh0cker/monaco-editor
1
0
Fork 0
mirror of https://github.com/microsoft/monaco-editor.git synced 2025-12-22 23:13:02 +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

25
README.md
View file

@ -1,4 +1,3 @@
# 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.
@ -19,19 +18,21 @@ Go to <a href="http://localhost:8888">localhost:8888</a> and explore the samples
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-script-editor`: running in a browser using `AMD` synchronous loading via `<script>` tags. - `browser-amd-editor`: running in a browser using `AMD` lazy loading.
* `browser-esm-webpack`: running in a browser using webpack. - `browser-script-editor`: running in a browser using `AMD` synchronous loading via `<script>` tags.
* `browser-esm-webpack-small`: running in a browser using webpack (only a subset of the editor). - `browser-esm-webpack`: running in a browser using webpack.
* `electron-amd`: running in electron. - `browser-esm-webpack-small`: running in a browser using webpack (only a subset of the editor).
* `nwjs-amd` and `nwjs-amd-v2`: running in nwjs. it is reported that v2 works and the initial version does not. - `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 ## 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

68
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>
<div
id="container"
style="width: 800px; height: 600px; border: 1px solid grey"
></div>
<h2>Monaco Diff Editor Sample</h2> <script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div> <script>
require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script> require(['vs/editor/editor.main'], function () {
<script> var diffEditor = monaco.editor.createDiffEditor(
require.config({ paths: { 'vs': '../node_modules/monaco-editor/min/vs' }}); document.getElementById('container')
);
require(['vs/editor/editor.main'], function() { Promise.all([xhr('original.txt'), xhr('modified.txt')]).then(function (
var diffEditor = monaco.editor.createDiffEditor(document.getElementById('container')); r
) {
Promise.all([xhr('original.txt'), xhr('modified.txt')]).then(function(r) {
var originalTxt = r[0].responseText; var originalTxt = r[0].responseText;
var modifiedTxt = r[1].responseText; var modifiedTxt = r[1].responseText;
diffEditor.setModel({ diffEditor.setModel({
original: monaco.editor.createModel(originalTxt, 'javascript'), original: monaco.editor.createModel(originalTxt, 'javascript'),
modified: monaco.editor.createModel(modifiedTxt, 'javascript'), modified: monaco.editor.createModel(modifiedTxt, 'javascript')
})
}); });
}); });
</script> });
<script> </script>
<script>
function xhr(url) { function xhr(url) {
var req = null; var req = null;
return new Promise(function(c,e) { return new Promise(
function (c, e) {
req = new XMLHttpRequest(); req = new XMLHttpRequest();
req.onreadystatechange = function () { req.onreadystatechange = function () {
if (req._canceled) { return; } if (req._canceled) {
return;
}
if (req.readyState === 4) { if (req.readyState === 4) {
if ((req.status >= 200 && req.status < 300) || req.status === 1223) { if (
(req.status >= 200 && req.status < 300) ||
req.status === 1223
) {
c(req); c(req);
} else { } else {
e(req); e(req);
} }
req.onreadystatechange = function () { }; req.onreadystatechange = function () {};
} }
}; };
req.open("GET", url, true ); req.open('GET', url, true);
req.responseType = ""; req.responseType = '';
req.send(null); req.send(null);
}, function () { },
function () {
req._canceled = true; req._canceled = true;
req.abort(); req.abort();
});
} }
</script> );
</body> }
</script>
</body>
</html> </html>

37
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>
<div
id="container"
style="width: 800px; height: 600px; border: 1px solid grey"
></div>
<h2>Monaco Editor Sample</h2> <!-- OR ANY OTHER AMD LOADER HERE INSTEAD OF loader.js -->
<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' } });
<!-- OR ANY OTHER AMD LOADER HERE INSTEAD OF loader.js --> require(['vs/editor/editor.main'], function () {
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script> var editor = monaco.editor.create(
<script> document.getElementById('container'),
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: [ value: [
'function x() {', 'function x() {',
'\tconsole.log("Hello world!");', '\tconsole.log("Hello world!");',
'}' '}'
].join('\n'), ].join('\n'),
language: 'javascript' language: 'javascript'
}
);
}); });
}); </script>
</script> </body>
</body>
</html> </html>

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

@ -1,7 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head>
<title>Editor in tiny iframe</title> <title>Editor in tiny iframe</title>
<style> <style>
@ -22,58 +21,50 @@
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 />
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 />
<br/> <script>
<br/> 0x0: var myIframe1 = document.getElementById('myIframe1');
<br/> var myIframe2 = document.getElementById('myIframe2');
<iframe id="myIframe1" src="inner.html"></iframe> var myIframe3 = document.getElementById('myIframe3');
display:none: var programmaticIframe = document.createElement('iframe');
<br/> programmaticIframe.id = 'programmaticIframe';
<iframe id="myIframe2" src="inner.html"></iframe> programmaticIframe.src = 'inner.html';
visibility:hidden: // trigger its loading & take it off dom
<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); document.body.appendChild(programmaticIframe);
[
myIframe1,
myIframe2,
myIframe3,
programmaticIframe
].forEach(reveal);
}, 3000);
function reveal(iframe) { 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.width = '400px';
iframe.style.height = '100px'; iframe.style.height = '100px';
iframe.style.display = 'block'; iframe.style.display = 'block';
iframe.style.visibility = 'visible'; iframe.style.visibility = 'visible';
} }
</script>
</script> </body>
</body>
</html> </html>

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

@ -1,8 +1,8 @@
<!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 {
@ -13,27 +13,30 @@
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(
document.getElementById('container'),
{
value: [ value: [
'function x() {', 'function x() {',
'\tconsole.log("Hello world!");', '\tconsole.log("Hello world!");',
'}' '}'
].join('\n'), ].join('\n'),
language: 'javascript' language: 'javascript'
}); }
);
window.onresize = function() { window.onresize = function () {
editor.layout(); editor.layout();
}; };
}); });
</script> </script>
</body> </body>
</html> </html>

37
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>
<div
id="container"
style="width: 800px; height: 600px; border: 1px solid grey"
></div>
<h2>Monaco Editor Localization Sample</h2> <script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
<div id="container" style="width:800px;height:600px;border:1px solid grey"></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({ paths: { 'vs': '../node_modules/monaco-editor/min/vs' }});
require.config({ require.config({
'vs/nls' : { 'vs/nls': {
availableLanguages: { availableLanguages: {
'*': 'de' '*': 'de'
} }
} }
}); });
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(
document.getElementById('container'),
{
value: [ value: [
'function x() {', 'function x() {',
'\tconsole.log("Hello world!");', '\tconsole.log("Hello world!");',
'}' '}'
].join('\n'), ].join('\n'),
language: 'javascript' language: 'javascript'
}
);
}); });
}); </script>
</script> </body>
</body>
</html> </html>

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

@ -1,31 +1,32 @@
<!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>
<div
id="container"
style="width: 800px; height: 600px; border: 1px solid grey"
></div>
<h2>Monarch Tokenizer Sample</h2> <script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
<div id="container" style="width:800px;height:600px;border:1px solid grey"></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({ paths: { 'vs': '../node_modules/monaco-editor/min/vs' }});
require(['vs/editor/editor.main'], function() {
require(['vs/editor/editor.main'], function () {
monaco.languages.register({ monaco.languages.register({
id: 'myCustomLanguage' id: 'myCustomLanguage'
}); });
monaco.languages.setMonarchTokensProvider('myCustomLanguage', { monaco.languages.setMonarchTokensProvider('myCustomLanguage', {
tokenizer: { tokenizer: {
root: [ root: [
[/\[error.*/, "custom-error"], [/\[error.*/, 'custom-error'],
[/\[notice.*/, "custom-notice"], [/\[notice.*/, 'custom-notice'],
[/\[info.*/, "custom-info"], [/\[info.*/, 'custom-info'],
[/\[[a-zA-Z 0-9:]+\]/, "custom-date"], [/\[[a-zA-Z 0-9:]+\]/, 'custom-date']
], ]
} }
}); });
@ -37,15 +38,18 @@
{ token: 'custom-info', foreground: '808080' }, { token: 'custom-info', foreground: '808080' },
{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' }, { token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
{ token: 'custom-notice', foreground: 'FFA500' }, { token: 'custom-notice', foreground: 'FFA500' },
{ token: 'custom-date', foreground: '008800' }, { token: 'custom-date', foreground: '008800' }
] ]
}); });
var editor = monaco.editor.create(document.getElementById('container'), { var editor = monaco.editor.create(
document.getElementById('container'),
{
theme: 'myCoolTheme', theme: 'myCoolTheme',
value: getCode(), value: getCode(),
language: 'myCustomLanguage' language: 'myCustomLanguage'
}); }
);
}); });
function getCode() { function getCode() {
@ -58,7 +62,7 @@
'[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: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: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: 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: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: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: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 17:58:00 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
@ -99,9 +103,9 @@
'[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: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', '[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[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', '<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');; ].join('\n');
} }
</script> </script>
</body> </body>
</html> </html>

39
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>
<div
id="container"
style="width: 800px; height: 600px; border: 1px solid grey"
></div>
<h2>Monaco Editor Sample - Loading with requirejs</h2> <script
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div> 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' } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js" integrity="sha256-0SGl1PJNDyJwcV5T+weg2zpEMrh7xvlwO4oXgvZCeZk=" crossorigin="anonymous"></script> require(['vs/editor/editor.main'], function () {
<script> var editor = monaco.editor.create(
require.config({ paths: { 'vs': '../node_modules/monaco-editor/min/vs' }}); document.getElementById('container'),
{
require(['vs/editor/editor.main'], function() {
var editor = monaco.editor.create(document.getElementById('container'), {
value: [ value: [
'function x() {', 'function x() {',
'\tconsole.log("Hello world!");', '\tconsole.log("Hello world!");',
'}' '}'
].join('\n'), ].join('\n'),
language: 'javascript' language: 'javascript'
}
);
}); });
}); </script>
</script> </body>
</body>
</html> </html>

54
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>
<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>
<h2>Monaco Editor Shared Models Sample</h2> <script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
<div id="container1" style="width:400px;height:200px;border:1px solid grey"></div> <script>
<div id="container2" style="width:400px;height:200px;border:1px solid grey"></div> require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script> require(['vs/editor/editor.main'], function () {
<script> var model = monaco.editor.createModel(
require.config({ paths: { 'vs': '../node_modules/monaco-editor/min/vs' }}); ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
require(['vs/editor/editor.main'], function() {
var model = monaco.editor.createModel([
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
'javascript' 'javascript'
); );
var editor1 = monaco.editor.create(document.getElementById('container1'), { var editor1 = monaco.editor.create(
document.getElementById('container1'),
{
model: model model: model
}); }
var editor2 = monaco.editor.create(document.getElementById('container2'), { );
var editor2 = monaco.editor.create(
document.getElementById('container2'),
{
model: model model: model
}
);
}); });
}); </script>
</script> </body>
</body>
</html> </html>

29
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>
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 core editor and the find widget</li>
<li>Only the json language coloring</li> <li>Only the json language coloring</li>
</ul> </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 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>

13
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'
}); });

12
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>

10
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;`, value: `const foo = () => 0;`,
language: 'javascript', language: 'javascript',
theme: 'vs-dark' theme: 'vs-dark'
} });
);

23
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$/, 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 MonacoWebpackPlugin({ new MonacoWebpackPlugin({
languages: ["typescript", "javascript", "css"], languages: ['typescript', 'javascript', 'css']
}) })
] ]
}; };

17
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>
</body>
</html> </html>

29
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>
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 core editor and the find widget</li>
<li>Only the python language coloring</li> <li>Only the python language coloring</li>
</ul> </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> 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'
}); });

17
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$/, test: /\.css$/,
use: ['style-loader', 'css-loader'] use: ['style-loader', 'css-loader']
}, { },
{
test: /\.ttf$/, test: /\.ttf$/,
use: ['file-loader'] use: ['file-loader']
}] }
]
}, },
optimization: { optimization: {
minimize: true, minimize: true,
minimizer: [new TerserPlugin()], minimizer: [new TerserPlugin()]
}, }
}; };

28
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'
}); });

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

@ -1,34 +1,34 @@
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$/,
@ -38,7 +38,7 @@ module.exports = {
}, },
plugins: [ plugins: [
new HtmlWebPackPlugin({ new HtmlWebPackPlugin({
title: "Monaco Editor Sample" title: 'Monaco Editor Sample'
}) })
] ]
}; };

17
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>
</body>
</html> </html>

23
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'
}); });

23
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$/, test: /\.css$/,
use: ['style-loader', 'css-loader'] use: ['style-loader', 'css-loader']
}, { },
{
test: /\.ttf$/, test: /\.ttf$/,
use: ['file-loader'] use: ['file-loader']
}] }
}, ]
}
}; };

47
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"
/>
</head>
<body>
<h2>Monaco Editor Sync Loading Sample</h2>
<div
id="container"
style="width: 800px; height: 600px; border: 1px solid grey"
></div>
<h2>Monaco Editor Sync Loading Sample</h2> <script>
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div> 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>
<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'), { var editor = monaco.editor.create(document.getElementById('container'), {
value: [ value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join(
'function x() {', '\n'
'\tconsole.log("Hello world!");', ),
'}'
].join('\n'),
language: 'javascript' language: 'javascript'
}); });
</script> </script>
</body>
</body>
</html> </html>

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

@ -1,27 +1,39 @@
<!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>
<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 = [ const value = [
'define([], function() {', 'define([], function() {',
'\treturn ({p1, p2}) => {', '\treturn ({p1, p2}) => {',
@ -30,14 +42,15 @@
'});' '});'
].join('\n'); ].join('\n');
const editor = monaco.editor.create(document.getElementById('container'), { const editor = monaco.editor.create(
value: [ document.getElementById('container'),
'function x() {', {
'\tconsole.log("Hello world!");', value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join(
'}' '\n'
].join('\n'), ),
language: 'javascript' language: 'javascript'
}); }
);
editor.focus(); editor.focus();
editor.setPosition({ lineNumber: 2, column: 30 }); editor.setPosition({ lineNumber: 2, column: 30 });
@ -46,7 +59,7 @@
let currentVersion = initialVersion; let currentVersion = initialVersion;
let lastVersion = initialVersion; let lastVersion = initialVersion;
editor.onDidChangeModelContent(e => { editor.onDidChangeModelContent((e) => {
const versionId = editor.getModel().getAlternativeVersionId(); const versionId = editor.getModel().getAlternativeVersionId();
// undoing // undoing
if (versionId < currentVersion) { if (versionId < currentVersion) {
@ -62,7 +75,8 @@
if (versionId == lastVersion) { if (versionId == lastVersion) {
disableRedoButton(); disableRedoButton();
} }
} else { // adding new change, disable redo when adding new changes } else {
// adding new change, disable redo when adding new changes
disableRedoButton(); disableRedoButton();
if (currentVersion > lastVersion) { if (currentVersion > lastVersion) {
lastVersion = currentVersion; lastVersion = currentVersion;
@ -84,21 +98,20 @@
} }
function enableUndoButton() { function enableUndoButton() {
document.getElementById("undoButton").disabled = false; document.getElementById('undoButton').disabled = false;
} }
function disableUndoButton() { function disableUndoButton() {
document.getElementById("undoButton").disabled = true; document.getElementById('undoButton').disabled = true;
} }
function enableRedoButton() { function enableRedoButton() {
document.getElementById("redoButton").disabled = false; document.getElementById('redoButton').disabled = false;
} }
function disableRedoButton() { function disableRedoButton() {
document.getElementById("redoButton").disabled = true; document.getElementById('redoButton').disabled = true;
} }
</script> </script>
</body>
</body>
</html> </html>

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

@ -1,16 +1,19 @@
<!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
id="container"
style="width: 500px; height: 300px; border: 1px solid #ccc"
></div>
</body> </body>
<script> <script>
(function() { (function () {
const path = require('path'); const path = require('path');
const amdLoader = require('../node_modules/monaco-editor/min/vs/loader.js'); const amdLoader = require('../node_modules/monaco-editor/min/vs/loader.js');
const amdRequire = amdLoader.require; const amdRequire = amdLoader.require;
@ -25,21 +28,26 @@
} }
amdRequire.config({ amdRequire.config({
baseUrl: uriFromPath(path.join(__dirname, '../node_modules/monaco-editor/min')) baseUrl: uriFromPath(
path.join(__dirname, '../node_modules/monaco-editor/min')
)
}); });
// workaround monaco-css not understanding the environment // workaround monaco-css not understanding the environment
self.module = undefined; self.module = undefined;
amdRequire(['vs/editor/editor.main'], function() { amdRequire(['vs/editor/editor.main'], function () {
var editor = monaco.editor.create(document.getElementById('container'), { var editor = monaco.editor.create(
document.getElementById('container'),
{
value: [ value: [
'function x() {', 'function x() {',
'\tconsole.log("Hello world!");', '\tconsole.log("Hello world!");',
'}' '}'
].join('\n'), ].join('\n'),
language: 'javascript' language: 'javascript'
}); }
);
}); });
})(); })();
</script> </script>

25
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>

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

@ -1,6 +1,6 @@
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;
@ -12,23 +12,23 @@ function createWindow() {
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();
} }
}) });

35
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 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"
></div>
</body>
<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(document.getElementById('container'), {
value: [ value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join(
'function x() {', '\n'
'\tconsole.log("Hello world!");', ),
'}'
].join('\n'),
language: 'javascript' language: 'javascript'
}); });
}); });
</script> </script>
</html> </html>

25
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>

26
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();
} }
}) });

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

@ -1,16 +1,27 @@
<!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;
}
body {
height: 100vh;
overflow: hidden;
}
#container {
overflow: hidden;
height: 100vh;
}
.toolbox {
height: 200px;
} }
</style> </style>
</head> </head>
@ -25,25 +36,23 @@
</script--> </script-->
<!--script src="/node_modules/monaco-editor/min/vs/loader1.js"></script--> <!--script src="/node_modules/monaco-editor/min/vs/loader1.js"></script-->
<script> <script>
var ERequire = require("../../node_modules/monaco-editor/min/vs/loader.js"); var ERequire = require('../../node_modules/monaco-editor/min/vs/loader.js');
//__dirname == root path of you application //__dirname == root path of you application
ERequire.config({ ERequire.config({
baseUrl: "file:///"+__dirname+"/node_modules/monaco-editor/min/" baseUrl: 'file:///' + __dirname + '/node_modules/monaco-editor/min/'
}) });
// workaround monaco-css not understanding the environment // workaround monaco-css not understanding the environment
self.module = undefined; self.module = undefined;
// workaround monaco-typescript not understanding the environment // workaround monaco-typescript not understanding the environment
self.process.browser = true; self.process.browser = true;
ERequire(['vs/editor/editor.main'], function() { ERequire(['vs/editor/editor.main'], function () {
var editor = monaco.editor.create(document.getElementById('container'), { var editor = monaco.editor.create(document.getElementById('container'), {
value: [ value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join(
'function x() {', '\n'
'\tconsole.log("Hello world!");', ),
'}'
].join('\n'),
language: 'javascript', language: 'javascript',
theme: "vs-dark" theme: 'vs-dark'
}); });
}); });
</script> </script>

23
nwjs-amd/index.html
View file

@ -1,13 +1,20 @@
<!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
rel="stylesheet"
data-name="vs/editor/editor.main"
href="node_modules/monaco-editor/min/vs/editor/editor.main.css"
/>
</head> </head>
<body> <body>
<h1>Hello World!</h1> <h1>Hello World!</h1>
<div id="container" style="width:500px;height:300px;border:1px solid #ccc"></div> <div
id="container"
style="width: 500px; height: 300px; border: 1px solid #ccc"
></div>
</body> </body>
<script> <script>
@ -34,13 +41,11 @@
// workaround monaco-typescript not understanding the environment // workaround monaco-typescript not understanding the environment
self.process.browser = true; self.process.browser = true;
amdRequire(['vs/editor/editor.main'], function() { amdRequire(['vs/editor/editor.main'], function () {
var editor = monaco.editor.create(document.getElementById('container'), { var editor = monaco.editor.create(document.getElementById('container'), {
value: [ value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join(
'function x() {', '\n'
'\tconsole.log("Hello world!");', ),
'}'
].join('\n'),
language: 'javascript' language: 'javascript'
}); });
}); });