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

25
README.md
View file

@ -1,4 +1,3 @@
# Monaco Editor Samples
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).
## 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.
- `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.
- `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

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

@ -2,41 +2,53 @@
<html>
<head>
<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>
<body>
<h2>Monaco Diff Editor Sample</h2>
<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 src="../node_modules/monaco-editor/min/vs/loader.js"></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 () {
var diffEditor = monaco.editor.createDiffEditor(document.getElementById('container'));
var diffEditor = monaco.editor.createDiffEditor(
document.getElementById('container')
);
Promise.all([xhr('original.txt'), xhr('modified.txt')]).then(function(r) {
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'),
})
modified: monaco.editor.createModel(modifiedTxt, 'javascript')
});
});
});
</script>
<script>
function xhr(url) {
var req = null;
return new Promise(function(c,e) {
return new Promise(
function (c, e) {
req = new XMLHttpRequest();
req.onreadystatechange = function () {
if (req._canceled) { return; }
if (req._canceled) {
return;
}
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);
} else {
e(req);
@ -45,14 +57,16 @@
}
};
req.open("GET", url, true );
req.responseType = "";
req.open('GET', url, true);
req.responseType = '';
req.send(null);
}, function () {
},
function () {
req._canceled = true;
req.abort();
});
}
);
}
</script>
</body>

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

@ -3,27 +3,32 @@
<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" >
<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>
<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.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });
require(['vs/editor/editor.main'], function () {
var editor = monaco.editor.create(document.getElementById('container'), {
var editor = monaco.editor.create(
document.getElementById('container'),
{
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
});
}
);
});
</script>
</body>

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

@ -1,6 +1,5 @@
<!DOCTYPE html>
<html>
<head>
<title>Editor in tiny iframe</title>
@ -25,11 +24,11 @@
</head>
<body>
<h2>Monaco Editor inside iframes sample</h2>
<br />
<br/> 0x0:
<br />
0x0:
<br />
<iframe id="myIframe1" src="inner.html"></iframe>
display:none:
@ -42,13 +41,12 @@ 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";
programmaticIframe.src = 'inner.html';
// trigger its loading & take it off dom
document.body.appendChild(programmaticIframe);
@ -58,12 +56,7 @@ setTimeout(function() {
setTimeout(function () {
document.body.appendChild(programmaticIframe);
[
myIframe1,
myIframe2,
myIframe3,
programmaticIframe
].forEach(reveal);
[myIframe1, myIframe2, myIframe3, programmaticIframe].forEach(reveal);
}, 3000);
function reveal(iframe) {
@ -72,8 +65,6 @@ function reveal(iframe) {
iframe.style.display = 'block';
iframe.style.visibility = 'visible';
}
</script>
</body>
</html>

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

@ -2,7 +2,7 @@
<html>
<head>
<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">
html,
body {
@ -18,17 +18,20 @@
<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.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });
require(['vs/editor/editor.main'], function () {
var editor = monaco.editor.create(document.getElementById('container'), {
var editor = monaco.editor.create(
document.getElementById('container'),
{
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
});
}
);
window.onresize = function () {
editor.layout();

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

@ -2,16 +2,18 @@
<html>
<head>
<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>
<body>
<h2>Monaco Editor Localization Sample</h2>
<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 src="../node_modules/monaco-editor/min/vs/loader.js"></script>
<script>
require.config({ paths: { 'vs': '../node_modules/monaco-editor/min/vs' }});
require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });
require.config({
'vs/nls': {
@ -22,14 +24,17 @@
});
require(['vs/editor/editor.main'], function () {
var editor = monaco.editor.create(document.getElementById('container'), {
var editor = monaco.editor.create(
document.getElementById('container'),
{
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
});
}
);
});
</script>
</body>

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

@ -5,27 +5,28 @@
<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>
<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({ 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"],
],
[/\[error.*/, 'custom-error'],
[/\[notice.*/, 'custom-notice'],
[/\[info.*/, 'custom-info'],
[/\[[a-zA-Z 0-9:]+\]/, 'custom-date']
]
}
});
@ -37,15 +38,18 @@
{ token: 'custom-info', foreground: '808080' },
{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
{ 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',
value: getCode(),
language: 'myCustomLanguage'
});
}
);
});
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: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: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',
@ -99,8 +103,8 @@
'[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');;
'<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>

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

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

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

@ -2,32 +2,40 @@
<html>
<head>
<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>
<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>
<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.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'),
var model = monaco.editor.createModel(
['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
'javascript'
);
var editor1 = monaco.editor.create(document.getElementById('container1'), {
var editor1 = monaco.editor.create(
document.getElementById('container1'),
{
model: model
});
var editor2 = monaco.editor.create(document.getElementById('container2'), {
}
);
var editor2 = monaco.editor.create(
document.getElementById('container2'),
{
model: model
});
}
);
});
</script>
</body>

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

@ -2,10 +2,9 @@
<html>
<head>
<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>
<body>
<h2>Monaco Editor Parcel Bundler Sample</h2>
This sample shows how to load a small subset of the editor:
@ -20,9 +19,9 @@ To run this sample, you need to:
$/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>
</html>

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

@ -5,7 +5,10 @@
<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="index.js"></script>
</body>

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

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

@ -5,8 +5,6 @@
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<script src="./main.bundle.js"></script>
</body>
</html>

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

@ -1,11 +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">
<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>
To run this sample, you need to:
@ -13,9 +12,9 @@ To run this sample, you need to:
<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>

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 () {
// 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'),
{
monaco.editor.create(document.getElementById('root'), {
value: `const foo = () => 0;`,
language: 'javascript',
theme: 'vs-dark'
}
);
});

23
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: [{
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader",],
}, {
use: ['style-loader', 'css-loader']
},
{
test: /\.ttf$/,
use: ['file-loader']
}],
}
]
},
plugins: [
new MonacoWebpackPlugin({
languages: ["typescript", "javascript", "css"],
languages: ['typescript', 'javascript', 'css']
})
]
};

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

@ -5,10 +5,11 @@
<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>

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

@ -2,10 +2,9 @@
<html>
<head>
<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>
<body>
<h2>Monaco Editor Webpack Sample</h2>
This sample shows how to load a small subset of the editor:
@ -19,9 +18,9 @@ To run this sample, you need to:
<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>

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

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

26
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 === 'json') {
return './json.worker.bundle.js';
}
if (label === "css") {
return "./css.worker.bundle.js";
if (label === 'css') {
return './css.worker.bundle.js';
}
if (label === "html") {
return "./html.worker.bundle.js";
if (label === 'html') {
return './html.worker.bundle.js';
}
if (label === "typescript" || label === "javascript") {
return "./ts.worker.bundle.js";
if (label === 'typescript' || label === 'javascript') {
return './ts.worker.bundle.js';
}
return "./editor.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'
});

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

@ -1,34 +1,34 @@
const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
mode: "development",
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"
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"]
extensions: ['.ts', '.js']
},
output: {
globalObject: "self",
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist")
globalObject: 'self',
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.ts?$/,
use: "ts-loader",
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
use: ['style-loader', 'css-loader']
},
{
test: /\.ttf$/,
@ -38,7 +38,7 @@ module.exports = {
},
plugins: [
new HtmlWebPackPlugin({
title: "Monaco Editor Sample"
title: 'Monaco Editor Sample'
})
]
};

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

@ -5,10 +5,11 @@
<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>

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

@ -2,10 +2,9 @@
<html>
<head>
<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>
<body>
<h2>Monaco Editor Webpack Sample</h2>
To run this sample, you need to:
@ -13,9 +12,9 @@ To run this sample, you need to:
<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>

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

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

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

@ -2,29 +2,34 @@
<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">
<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>
<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>
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'),
value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join(
'\n'
),
language: 'javascript'
});
</script>
</body>
</html>

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

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

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

@ -1,12 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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>
<div
id="container"
style="width: 500px; height: 300px; border: 1px solid #ccc"
></div>
</body>
<script>
@ -25,21 +28,26 @@
}
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
self.module = undefined;
amdRequire(['vs/editor/editor.main'], function () {
var editor = monaco.editor.create(document.getElementById('container'), {
var editor = monaco.editor.create(
document.getElementById('container'),
{
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
});
}
);
});
})();
</script>

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

@ -2,17 +2,20 @@
<html>
<head>
<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>
<body>
<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>
$/electron-amd> electron main.js
</pre>
</pre
>
</body>
</html>

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

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

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

@ -1,8 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta charset="UTF-8" />
<title>Monaco Editor!</title>
</head>
@ -10,24 +9,24 @@
<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>
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.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'),
value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join(
'\n'
),
language: 'javascript'
});
});
</script>
</html>

13
electron-amd/index.html
View file

@ -2,17 +2,20 @@
<html>
<head>
<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>
<body>
<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>
$/electron-amd> electron main.js
</pre>
</pre
>
</body>
</html>

26
electron-amd/main.js
View file

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

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

@ -1,14 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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;}
body,
#container {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
height: 100vh;
overflow: hidden;
}
#container {
overflow: hidden;
height: 100vh;
}
.toolbox {
height: 200px;
}
@ -25,11 +36,11 @@
</script-->
<!--script src="/node_modules/monaco-editor/min/vs/loader1.js"></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
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
self.module = undefined;
@ -37,13 +48,11 @@
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'),
value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join(
'\n'
),
language: 'javascript',
theme: "vs-dark"
theme: 'vs-dark'
});
});
</script>

21
nwjs-amd/index.html
View file

@ -1,13 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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">
<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>
<div
id="container"
style="width: 500px; height: 300px; border: 1px solid #ccc"
></div>
</body>
<script>
@ -36,11 +43,9 @@
amdRequire(['vs/editor/editor.main'], function () {
var editor = 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'
});
});