mirror of
https://github.com/microsoft/monaco-editor.git
synced 2025-12-22 12:45:39 +01:00
Ignore generated files
This commit is contained in:
Alex Dima
parent
979d6a1b26
commit
91c9c0cec3
34 changed files with 15 additions and 3230 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -1,3 +1,4 @@
|
||||||
**/node_modules/
|
**/node_modules/
|
||||||
**/out/
|
**/out/
|
||||||
**/release/
|
**/release/
|
||||||
|
/test/manual/generated/**
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,6 @@
|
||||||
/samples/browser-esm-webpack-typescript-react/dist/*.js
|
/samples/browser-esm-webpack-typescript-react/dist/*.js
|
||||||
/src/typescript/lib/
|
/src/typescript/lib/
|
||||||
/test/manual/samples-all.generated.js
|
/test/manual/samples-all.generated.js
|
||||||
/test/manual/playground.generated/
|
/test/manual/generated/
|
||||||
/website/lib/
|
/website/lib/
|
||||||
/website/typedoc/monaco.d.ts
|
/website/typedoc/monaco.d.ts
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@ const fs = require('fs');
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
const http = require('http');
|
const http = require('http');
|
||||||
const yaserver = require('yaserver');
|
const yaserver = require('yaserver');
|
||||||
const { REPO_ROOT } = require('./utils');
|
const { REPO_ROOT, ensureDir } = require('./utils');
|
||||||
|
|
||||||
const WEBSITE_GENERATED_PATH = path.join(REPO_ROOT, 'website/playground/new-samples');
|
const WEBSITE_GENERATED_PATH = path.join(REPO_ROOT, 'website/playground/new-samples');
|
||||||
|
|
||||||
|
|
@ -73,7 +73,7 @@ function generateTestSamplesTask() {
|
||||||
'<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->',
|
'<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->',
|
||||||
'<html>',
|
'<html>',
|
||||||
'<head>',
|
'<head>',
|
||||||
' <base href="..">',
|
' <base href="../..">',
|
||||||
' <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>',
|
||||||
|
|
@ -84,7 +84,7 @@ function generateTestSamplesTask() {
|
||||||
'',
|
'',
|
||||||
'/*----------------------------------------SAMPLE CSS END*/',
|
'/*----------------------------------------SAMPLE CSS END*/',
|
||||||
'</style>',
|
'</style>',
|
||||||
'<a class="loading-opts" href="playground.generated/index.html">[<< BACK]</a> <br/>',
|
'<a class="loading-opts" href="generated/playground/index.html">[<< BACK]</a> <br/>',
|
||||||
'THIS IS A GENERATED FILE VIA `npm run simpleserver`',
|
'THIS IS A GENERATED FILE VIA `npm run simpleserver`',
|
||||||
'',
|
'',
|
||||||
'<div id="bar" style="margin-bottom: 6px;"></div>',
|
'<div id="bar" style="margin-bottom: 6px;"></div>',
|
||||||
|
|
@ -113,10 +113,13 @@ function generateTestSamplesTask() {
|
||||||
'</body>',
|
'</body>',
|
||||||
'</html>'
|
'</html>'
|
||||||
];
|
];
|
||||||
fs.writeFileSync(
|
|
||||||
path.join(REPO_ROOT, 'test/manual/playground.generated/' + sampleId + '.html'),
|
const destination = path.join(
|
||||||
result.join('\n')
|
REPO_ROOT,
|
||||||
|
'test/manual/generated/playground/' + sampleId + '.html'
|
||||||
);
|
);
|
||||||
|
ensureDir(path.dirname(destination));
|
||||||
|
fs.writeFileSync(destination, result.join('\n'));
|
||||||
locations.push({
|
locations.push({
|
||||||
path: sampleId + '.html',
|
path: sampleId + '.html',
|
||||||
name: sample.chapter + ' > ' + sample.name
|
name: sample.chapter + ' > ' + sample.name
|
||||||
|
|
@ -128,7 +131,7 @@ function generateTestSamplesTask() {
|
||||||
'<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->',
|
'<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->',
|
||||||
'<html>',
|
'<html>',
|
||||||
'<head>',
|
'<head>',
|
||||||
' <base href="..">',
|
' <base href="../..">',
|
||||||
'</head>',
|
'</head>',
|
||||||
'<body>',
|
'<body>',
|
||||||
'<a class="loading-opts" href="index.html">[<< BACK]</a><br/>',
|
'<a class="loading-opts" href="index.html">[<< BACK]</a><br/>',
|
||||||
|
|
@ -136,7 +139,7 @@ function generateTestSamplesTask() {
|
||||||
locations
|
locations
|
||||||
.map(function (location) {
|
.map(function (location) {
|
||||||
return (
|
return (
|
||||||
'<a class="loading-opts" href="playground.generated/' +
|
'<a class="loading-opts" href="generated/playground/' +
|
||||||
location.path +
|
location.path +
|
||||||
'">' +
|
'">' +
|
||||||
location.name +
|
location.name +
|
||||||
|
|
@ -150,7 +153,7 @@ function generateTestSamplesTask() {
|
||||||
'</html>'
|
'</html>'
|
||||||
];
|
];
|
||||||
fs.writeFileSync(
|
fs.writeFileSync(
|
||||||
path.join(REPO_ROOT, 'test/manual/playground.generated/index.html'),
|
path.join(REPO_ROOT, 'test/manual/generated/playground/index.html'),
|
||||||
index.join('\n')
|
index.join('\n')
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
Jump to:
|
Jump to:
|
||||||
<a class="loading-opts" href="./playground.generated/index.html">[PLAYGROUND]</a>
|
<a class="loading-opts" href="./generated/playground/index.html">[PLAYGROUND]</a>
|
||||||
 | 
|
 | 
|
||||||
<a class="loading-opts" href="./mouse-fixed.html">[fixed element]</a>
|
<a class="loading-opts" href="./mouse-fixed.html">[fixed element]</a>
|
||||||
 | 
|
 | 
|
||||||
|
|
|
||||||
|
|
@ -1,52 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<base href="..">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<style>
|
|
||||||
/*----------------------------------------SAMPLE CSS START*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE CSS END*/
|
|
||||||
</style>
|
|
||||||
<a class="loading-opts" href="playground.generated/index.html">[<< BACK]</a> <br/>
|
|
||||||
THIS IS A GENERATED FILE VIA `npm run simpleserver`
|
|
||||||
|
|
||||||
<div id="bar" style="margin-bottom: 6px;"></div>
|
|
||||||
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML START-->
|
|
||||||
|
|
||||||
<div id="container" style="height: 100%"></div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML END-->
|
|
||||||
</div>
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
|
|
||||||
<script src="../../metadata.js"></script>
|
|
||||||
<script src="dev-setup.js"></script>
|
|
||||||
<script>
|
|
||||||
loadEditor(function() {
|
|
||||||
/*----------------------------------------SAMPLE JS START*/
|
|
||||||
|
|
||||||
var originalModel = monaco.editor.createModel('heLLo world!', 'text/plain');
|
|
||||||
var modifiedModel = monaco.editor.createModel('hello orlando!', 'text/plain');
|
|
||||||
|
|
||||||
var diffEditor = monaco.editor.createDiffEditor(document.getElementById('container'));
|
|
||||||
diffEditor.setModel({
|
|
||||||
original: originalModel,
|
|
||||||
modified: modifiedModel
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE JS END*/
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,64 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<base href="..">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<style>
|
|
||||||
/*----------------------------------------SAMPLE CSS START*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE CSS END*/
|
|
||||||
</style>
|
|
||||||
<a class="loading-opts" href="playground.generated/index.html">[<< BACK]</a> <br/>
|
|
||||||
THIS IS A GENERATED FILE VIA `npm run simpleserver`
|
|
||||||
|
|
||||||
<div id="bar" style="margin-bottom: 6px;"></div>
|
|
||||||
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML START-->
|
|
||||||
|
|
||||||
<div id="container" style="height: 100%"></div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML END-->
|
|
||||||
</div>
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
|
|
||||||
<script src="../../metadata.js"></script>
|
|
||||||
<script src="dev-setup.js"></script>
|
|
||||||
<script>
|
|
||||||
loadEditor(function() {
|
|
||||||
/*----------------------------------------SAMPLE JS START*/
|
|
||||||
|
|
||||||
var originalModel = monaco.editor.createModel(
|
|
||||||
'This line is removed on the right.\njust some text\nabcd\nefgh\nSome more text',
|
|
||||||
'text/plain'
|
|
||||||
);
|
|
||||||
var modifiedModel = monaco.editor.createModel(
|
|
||||||
'just some text\nabcz\nzzzzefgh\nSome more text\nThis line is removed on the left.',
|
|
||||||
'text/plain'
|
|
||||||
);
|
|
||||||
|
|
||||||
var diffEditor = monaco.editor.createDiffEditor(document.getElementById('container'), {
|
|
||||||
// You can optionally disable the resizing
|
|
||||||
enableSplitViewResizing: false,
|
|
||||||
|
|
||||||
// Render the diff inline
|
|
||||||
renderSideBySide: false
|
|
||||||
});
|
|
||||||
diffEditor.setModel({
|
|
||||||
original: originalModel,
|
|
||||||
modified: modifiedModel
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE JS END*/
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,61 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<base href="..">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<style>
|
|
||||||
/*----------------------------------------SAMPLE CSS START*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE CSS END*/
|
|
||||||
</style>
|
|
||||||
<a class="loading-opts" href="playground.generated/index.html">[<< BACK]</a> <br/>
|
|
||||||
THIS IS A GENERATED FILE VIA `npm run simpleserver`
|
|
||||||
|
|
||||||
<div id="bar" style="margin-bottom: 6px;"></div>
|
|
||||||
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML START-->
|
|
||||||
|
|
||||||
<div id="container" style="height: 100%"></div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML END-->
|
|
||||||
</div>
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
|
|
||||||
<script src="../../metadata.js"></script>
|
|
||||||
<script src="dev-setup.js"></script>
|
|
||||||
<script>
|
|
||||||
loadEditor(function() {
|
|
||||||
/*----------------------------------------SAMPLE JS START*/
|
|
||||||
|
|
||||||
var originalModel = monaco.editor.createModel(
|
|
||||||
'This line is removed on the right.\njust some text\nabcd\nefgh\nSome more text',
|
|
||||||
'text/plain'
|
|
||||||
);
|
|
||||||
var modifiedModel = monaco.editor.createModel(
|
|
||||||
'just some text\nabcz\nzzzzefgh\nSome more text.\nThis line is removed on the left.',
|
|
||||||
'text/plain'
|
|
||||||
);
|
|
||||||
|
|
||||||
var diffEditor = monaco.editor.createDiffEditor(document.getElementById('container'), {
|
|
||||||
// You can optionally disable the resizing
|
|
||||||
enableSplitViewResizing: false
|
|
||||||
});
|
|
||||||
diffEditor.setModel({
|
|
||||||
original: originalModel,
|
|
||||||
modified: modifiedModel
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE JS END*/
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<base href="..">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<style>
|
|
||||||
/*----------------------------------------SAMPLE CSS START*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE CSS END*/
|
|
||||||
</style>
|
|
||||||
<a class="loading-opts" href="playground.generated/index.html">[<< BACK]</a> <br/>
|
|
||||||
THIS IS A GENERATED FILE VIA `npm run simpleserver`
|
|
||||||
|
|
||||||
<div id="bar" style="margin-bottom: 6px;"></div>
|
|
||||||
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML START-->
|
|
||||||
|
|
||||||
<div id="container" style="height: 100%"></div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML END-->
|
|
||||||
</div>
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
|
|
||||||
<script src="../../metadata.js"></script>
|
|
||||||
<script src="dev-setup.js"></script>
|
|
||||||
<script>
|
|
||||||
loadEditor(function() {
|
|
||||||
/*----------------------------------------SAMPLE JS START*/
|
|
||||||
|
|
||||||
// The diff editor offers a navigator to jump between changes. Once the diff is computed the <em>next()</em> and <em>previous()</em> method allow navigation. By default setting the selection in the editor manually resets the navigation state.
|
|
||||||
var originalModel = monaco.editor.createModel(
|
|
||||||
'just some text\n\nHello World\n\nSome more text',
|
|
||||||
'text/plain'
|
|
||||||
);
|
|
||||||
var modifiedModel = monaco.editor.createModel(
|
|
||||||
'just some Text\n\nHello World\n\nSome more changes',
|
|
||||||
'text/plain'
|
|
||||||
);
|
|
||||||
|
|
||||||
var diffEditor = monaco.editor.createDiffEditor(document.getElementById('container'));
|
|
||||||
diffEditor.setModel({
|
|
||||||
original: originalModel,
|
|
||||||
modified: modifiedModel
|
|
||||||
});
|
|
||||||
|
|
||||||
var navi = monaco.editor.createDiffNavigator(diffEditor, {
|
|
||||||
followsCaret: true, // resets the navigator state when the user selects something in the editor
|
|
||||||
ignoreCharChanges: true // jump from line to line
|
|
||||||
});
|
|
||||||
|
|
||||||
window.setInterval(function () {
|
|
||||||
navi.next();
|
|
||||||
}, 2000);
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE JS END*/
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,63 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<base href="..">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<style>
|
|
||||||
/*----------------------------------------SAMPLE CSS START*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE CSS END*/
|
|
||||||
</style>
|
|
||||||
<a class="loading-opts" href="playground.generated/index.html">[<< BACK]</a> <br/>
|
|
||||||
THIS IS A GENERATED FILE VIA `npm run simpleserver`
|
|
||||||
|
|
||||||
<div id="bar" style="margin-bottom: 6px;"></div>
|
|
||||||
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML START-->
|
|
||||||
|
|
||||||
<div id="container" style="height: 100%"></div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML END-->
|
|
||||||
</div>
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
|
|
||||||
<script src="../../metadata.js"></script>
|
|
||||||
<script src="dev-setup.js"></script>
|
|
||||||
<script>
|
|
||||||
loadEditor(function() {
|
|
||||||
/*----------------------------------------SAMPLE JS START*/
|
|
||||||
|
|
||||||
// Through the options literal, the behaviour of the editor can be easily customized.
|
|
||||||
// Here are a few examples of config options that can be passed to the editor.
|
|
||||||
// You can also call editor.updateOptions at any time to change the options.
|
|
||||||
|
|
||||||
var editor = monaco.editor.create(document.getElementById('container'), {
|
|
||||||
value: "// First line\nfunction hello() {\n\talert('Hello world!');\n}\n// Last line",
|
|
||||||
language: 'javascript',
|
|
||||||
|
|
||||||
lineNumbers: 'off',
|
|
||||||
roundedSelection: false,
|
|
||||||
scrollBeyondLastLine: false,
|
|
||||||
readOnly: false,
|
|
||||||
theme: 'vs-dark'
|
|
||||||
});
|
|
||||||
setTimeout(function () {
|
|
||||||
editor.updateOptions({
|
|
||||||
lineNumbers: 'on'
|
|
||||||
});
|
|
||||||
}, 2000);
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE JS END*/
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,53 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<base href="..">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<style>
|
|
||||||
/*----------------------------------------SAMPLE CSS START*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE CSS END*/
|
|
||||||
</style>
|
|
||||||
<a class="loading-opts" href="playground.generated/index.html">[<< BACK]</a> <br/>
|
|
||||||
THIS IS A GENERATED FILE VIA `npm run simpleserver`
|
|
||||||
|
|
||||||
<div id="bar" style="margin-bottom: 6px;"></div>
|
|
||||||
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML START-->
|
|
||||||
|
|
||||||
<div id="container" style="height: 100%"></div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML END-->
|
|
||||||
</div>
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
|
|
||||||
<script src="../../metadata.js"></script>
|
|
||||||
<script src="dev-setup.js"></script>
|
|
||||||
<script>
|
|
||||||
loadEditor(function() {
|
|
||||||
/*----------------------------------------SAMPLE JS START*/
|
|
||||||
|
|
||||||
// The Monaco Editor can be easily created, given an
|
|
||||||
// empty container and an options literal.
|
|
||||||
// Two members of the literal are "value" and "language".
|
|
||||||
// The editor takes the full size of its container.
|
|
||||||
|
|
||||||
monaco.editor.create(document.getElementById('container'), {
|
|
||||||
value: "function hello() {\n\talert('Hello world!');\n}",
|
|
||||||
language: 'javascript'
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE JS END*/
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,82 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<base href="..">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<style>
|
|
||||||
/*----------------------------------------SAMPLE CSS START*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE CSS END*/
|
|
||||||
</style>
|
|
||||||
<a class="loading-opts" href="playground.generated/index.html">[<< BACK]</a> <br/>
|
|
||||||
THIS IS A GENERATED FILE VIA `npm run simpleserver`
|
|
||||||
|
|
||||||
<div id="bar" style="margin-bottom: 6px;"></div>
|
|
||||||
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML START-->
|
|
||||||
|
|
||||||
<pre id="code" data-lang="text/css" style="width: 500px">
|
|
||||||
/* Some example CSS */
|
|
||||||
|
|
||||||
@import url("something.css");
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
padding: 3em 6em;
|
|
||||||
font-family: tahoma, arial, sans-serif;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
#navigation a {
|
|
||||||
font-weight: bold;
|
|
||||||
text-decoration: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 1.7em;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1:before, h2:before {
|
|
||||||
content: "some contents";
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
font-family: courier, monospace;
|
|
||||||
font-size: 80%;
|
|
||||||
color: #418A8A;
|
|
||||||
}
|
|
||||||
</pre>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML END-->
|
|
||||||
</div>
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
|
|
||||||
<script src="../../metadata.js"></script>
|
|
||||||
<script src="dev-setup.js"></script>
|
|
||||||
<script>
|
|
||||||
loadEditor(function() {
|
|
||||||
/*----------------------------------------SAMPLE JS START*/
|
|
||||||
|
|
||||||
// The colorizeElement-function will read the data-lang-attribute
|
|
||||||
// from the element to select the correct language mode. In this
|
|
||||||
// sample it is text/css.
|
|
||||||
monaco.editor.colorizeElement(document.getElementById('code'));
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE JS END*/
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,194 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<base href="..">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<style>
|
|
||||||
/*----------------------------------------SAMPLE CSS START*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE CSS END*/
|
|
||||||
</style>
|
|
||||||
<a class="loading-opts" href="playground.generated/index.html">[<< BACK]</a> <br/>
|
|
||||||
THIS IS A GENERATED FILE VIA `npm run simpleserver`
|
|
||||||
|
|
||||||
<div id="bar" style="margin-bottom: 6px;"></div>
|
|
||||||
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML START-->
|
|
||||||
|
|
||||||
<div id="container" style="height: 100%"></div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML END-->
|
|
||||||
</div>
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
|
|
||||||
<script src="../../metadata.js"></script>
|
|
||||||
<script src="dev-setup.js"></script>
|
|
||||||
<script>
|
|
||||||
loadEditor(function() {
|
|
||||||
/*----------------------------------------SAMPLE JS START*/
|
|
||||||
|
|
||||||
// The editor colors can be customized through CSS or through JS
|
|
||||||
|
|
||||||
monaco.editor.defineTheme('myTheme', {
|
|
||||||
base: 'vs',
|
|
||||||
inherit: true,
|
|
||||||
rules: [{ background: 'EDF9FA' }],
|
|
||||||
colors: {
|
|
||||||
'editor.foreground': '#000000',
|
|
||||||
'editor.background': '#EDF9FA',
|
|
||||||
'editorCursor.foreground': '#8B0000',
|
|
||||||
'editor.lineHighlightBackground': '#0000FF20',
|
|
||||||
'editorLineNumber.foreground': '#008800',
|
|
||||||
'editor.selectionBackground': '#88000030',
|
|
||||||
'editor.inactiveSelectionBackground': '#88000015'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
monaco.editor.setTheme('myTheme');
|
|
||||||
|
|
||||||
monaco.editor.create(document.getElementById('container'), {
|
|
||||||
value: 'My to-do list:\n* buy milk\n* buy coffee\n* write awesome code',
|
|
||||||
language: 'text/plain',
|
|
||||||
fontFamily: 'Arial',
|
|
||||||
fontSize: 20
|
|
||||||
});
|
|
||||||
|
|
||||||
// A list of color names:
|
|
||||||
('foreground'); // Overall foreground color. This color is only used if not overridden by a component.
|
|
||||||
('errorForeground'); // Overall foreground color for error messages. This color is only used if not overridden by a component.
|
|
||||||
('descriptionForeground'); // Foreground color for description text providing additional information, for example for a label.
|
|
||||||
('focusBorder'); // Overall border color for focused elements. This color is only used if not overridden by a component.
|
|
||||||
('contrastBorder'); // An extra border around elements to separate them from others for greater contrast.
|
|
||||||
('contrastActiveBorder'); // An extra border around active elements to separate them from others for greater contrast.
|
|
||||||
('selection.background'); // The background color of text selections in the workbench (e.g. for input fields or text areas). Note that this does not apply to selections within the editor.
|
|
||||||
('textSeparator.foreground'); // Color for text separators.
|
|
||||||
('textLink.foreground'); // Foreground color for links in text.
|
|
||||||
('textLink.activeForeground'); // Foreground color for active links in text.
|
|
||||||
('textPreformat.foreground'); // Foreground color for preformatted text segments.
|
|
||||||
('textBlockQuote.background'); // Background color for block quotes in text.
|
|
||||||
('textBlockQuote.border'); // Border color for block quotes in text.
|
|
||||||
('textCodeBlock.background'); // Background color for code blocks in text.
|
|
||||||
('widget.shadow'); // Shadow color of widgets such as find/replace inside the editor.
|
|
||||||
('input.background'); // Input box background.
|
|
||||||
('input.foreground'); // Input box foreground.
|
|
||||||
('input.border'); // Input box border.
|
|
||||||
('inputOption.activeBorder'); // Border color of activated options in input fields.
|
|
||||||
('input.placeholderForeground'); // Input box foreground color for placeholder text.
|
|
||||||
('inputValidation.infoBackground'); // Input validation background color for information severity.
|
|
||||||
('inputValidation.infoBorder'); // Input validation border color for information severity.
|
|
||||||
('inputValidation.warningBackground'); // Input validation background color for information warning.
|
|
||||||
('inputValidation.warningBorder'); // Input validation border color for warning severity.
|
|
||||||
('inputValidation.errorBackground'); // Input validation background color for error severity.
|
|
||||||
('inputValidation.errorBorder'); // Input validation border color for error severity.
|
|
||||||
('dropdown.background'); // Dropdown background.
|
|
||||||
('dropdown.foreground'); // Dropdown foreground.
|
|
||||||
('dropdown.border'); // Dropdown border.
|
|
||||||
('list.focusBackground'); // List/Tree background color for the focused item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.
|
|
||||||
('list.focusForeground'); // List/Tree foreground color for the focused item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.
|
|
||||||
('list.activeSelectionBackground'); // List/Tree background color for the selected item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.
|
|
||||||
('list.activeSelectionForeground'); // List/Tree foreground color for the selected item when the list/tree is active. An active list/tree has keyboard focus, an inactive does not.
|
|
||||||
('list.inactiveSelectionBackground'); // List/Tree background color for the selected item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not.
|
|
||||||
('list.inactiveSelectionForeground'); // List/Tree foreground color for the selected item when the list/tree is inactive. An active list/tree has keyboard focus, an inactive does not.
|
|
||||||
('list.hoverBackground'); // List/Tree background when hovering over items using the mouse.
|
|
||||||
('list.hoverForeground'); // List/Tree foreground when hovering over items using the mouse.
|
|
||||||
('list.dropBackground'); // List/Tree drag and drop background when moving items around using the mouse.
|
|
||||||
('list.highlightForeground'); // List/Tree foreground color of the match highlights when searching inside the list/tree.
|
|
||||||
('pickerGroup.foreground'); // Quick picker color for grouping labels.
|
|
||||||
('pickerGroup.border'); // Quick picker color for grouping borders.
|
|
||||||
('button.foreground'); // Button foreground color.
|
|
||||||
('button.background'); // Button background color.
|
|
||||||
('button.hoverBackground'); // Button background color when hovering.
|
|
||||||
('badge.background'); // Badge background color. Badges are small information labels, e.g. for search results count.
|
|
||||||
('badge.foreground'); // Badge foreground color. Badges are small information labels, e.g. for search results count.
|
|
||||||
('scrollbar.shadow'); // Scrollbar shadow to indicate that the view is scrolled.
|
|
||||||
('scrollbarSlider.background'); // Slider background color.
|
|
||||||
('scrollbarSlider.hoverBackground'); // Slider background color when hovering.
|
|
||||||
('scrollbarSlider.activeBackground'); // Slider background color when active.
|
|
||||||
('progressBar.background'); // Background color of the progress bar that can show for long running operations.
|
|
||||||
('editor.background'); // Editor background color.
|
|
||||||
('editor.foreground'); // Editor default foreground color.
|
|
||||||
('editorWidget.background'); // Background color of editor widgets, such as find/replace.
|
|
||||||
('editorWidget.border'); // Border color of editor widgets. The color is only used if the widget chooses to have a border and if the color is not overridden by a widget.
|
|
||||||
('editor.selectionBackground'); // Color of the editor selection.
|
|
||||||
('editor.selectionForeground'); // Color of the selected text for high contrast.
|
|
||||||
('editor.inactiveSelectionBackground'); // Color of the selection in an inactive editor.
|
|
||||||
('editor.selectionHighlightBackground'); // Color for regions with the same content as the selection.
|
|
||||||
('editor.findMatchBackground'); // Color of the current search match.
|
|
||||||
('editor.findMatchHighlightBackground'); // Color of the other search matches.
|
|
||||||
('editor.findRangeHighlightBackground'); // Color the range limiting the search.
|
|
||||||
('editor.hoverHighlightBackground'); // Highlight below the word for which a hover is shown.
|
|
||||||
('editorHoverWidget.background'); // Background color of the editor hover.
|
|
||||||
('editorHoverWidget.border'); // Border color of the editor hover.
|
|
||||||
('editorLink.activeForeground'); // Color of active links.
|
|
||||||
('diffEditor.insertedTextBackground'); // Background color for text that got inserted.
|
|
||||||
('diffEditor.removedTextBackground'); // Background color for text that got removed.
|
|
||||||
('diffEditor.insertedTextBorder'); // Outline color for the text that got inserted.
|
|
||||||
('diffEditor.removedTextBorder'); // Outline color for text that got removed.
|
|
||||||
('editorOverviewRuler.currentContentForeground'); // Current overview ruler foreground for inline merge-conflicts.
|
|
||||||
('editorOverviewRuler.incomingContentForeground'); // Incoming overview ruler foreground for inline merge-conflicts.
|
|
||||||
('editorOverviewRuler.commonContentForeground'); // Common ancestor overview ruler foreground for inline merge-conflicts.
|
|
||||||
('editor.lineHighlightBackground'); // Background color for the highlight of line at the cursor position.
|
|
||||||
('editor.lineHighlightBorder'); // Background color for the border around the line at the cursor position.
|
|
||||||
('editor.rangeHighlightBackground'); // Background color of highlighted ranges, like by quick open and find features.
|
|
||||||
('editorCursor.foreground'); // Color of the editor cursor.
|
|
||||||
('editorWhitespace.foreground'); // Color of whitespace characters in the editor.
|
|
||||||
('editorIndentGuide.background'); // Color of the editor indentation guides.
|
|
||||||
('editorLineNumber.foreground'); // Color of editor line numbers.
|
|
||||||
('editorLineNumber.activeForeground'); // Color of editor active line number.
|
|
||||||
('editorRuler.foreground'); // Color of the editor rulers.
|
|
||||||
('editorCodeLens.foreground'); // Foreground color of editor code lenses
|
|
||||||
('editorInlayHint.foreground'); // Foreground color of editor inlay hints
|
|
||||||
('editorInlayHint.background'); // Background color of editor inlay hints
|
|
||||||
('editorBracketMatch.background'); // Background color behind matching brackets
|
|
||||||
('editorBracketMatch.border'); // Color for matching brackets boxes
|
|
||||||
('editorOverviewRuler.border'); // Color of the overview ruler border.
|
|
||||||
('editorGutter.background'); // Background color of the editor gutter. The gutter contains the glyph margins and the line numbers.
|
|
||||||
('editorError.foreground'); // Foreground color of error squigglies in the editor.
|
|
||||||
('editorError.border'); // Border color of error squigglies in the editor.
|
|
||||||
('editorWarning.foreground'); // Foreground color of warning squigglies in the editor.
|
|
||||||
('editorWarning.border'); // Border color of warning squigglies in the editor.
|
|
||||||
('editorMarkerNavigationError.background'); // Editor marker navigation widget error color.
|
|
||||||
('editorMarkerNavigationWarning.background'); // Editor marker navigation widget warning color.
|
|
||||||
('editorMarkerNavigation.background'); // Editor marker navigation widget background.
|
|
||||||
('editorSuggestWidget.background'); // Background color of the suggest widget.
|
|
||||||
('editorSuggestWidget.border'); // Border color of the suggest widget.
|
|
||||||
('editorSuggestWidget.foreground'); // Foreground color of the suggest widget.
|
|
||||||
('editorSuggestWidget.selectedBackground'); // Background color of the selected entry in the suggest widget.
|
|
||||||
('editorSuggestWidget.highlightForeground'); // Color of the match highlights in the suggest widget.
|
|
||||||
('editor.wordHighlightBackground'); // Background color of a symbol during read-access, like reading a variable.
|
|
||||||
('editor.wordHighlightStrongBackground'); // Background color of a symbol during write-access, like writing to a variable.
|
|
||||||
('peekViewTitle.background'); // Background color of the peek view title area.
|
|
||||||
('peekViewTitleLabel.foreground'); // Color of the peek view title.
|
|
||||||
('peekViewTitleDescription.foreground'); // Color of the peek view title info.
|
|
||||||
('peekView.border'); // Color of the peek view borders and arrow.
|
|
||||||
('peekViewResult.background'); // Background color of the peek view result list.
|
|
||||||
('peekViewResult.lineForeground'); // Foreground color for line nodes in the peek view result list.
|
|
||||||
('peekViewResult.fileForeground'); // Foreground color for file nodes in the peek view result list.
|
|
||||||
('peekViewResult.selectionBackground'); // Background color of the selected entry in the peek view result list.
|
|
||||||
('peekViewResult.selectionForeground'); // Foreground color of the selected entry in the peek view result list.
|
|
||||||
('peekViewEditor.background'); // Background color of the peek view editor.
|
|
||||||
('peekViewEditorGutter.background'); // Background color of the gutter in the peek view editor.
|
|
||||||
('peekViewResult.matchHighlightBackground'); // Match highlight color in the peek view result list.
|
|
||||||
('peekViewEditor.matchHighlightBackground'); // Match highlight color in the peek view editor.
|
|
||||||
|
|
||||||
/*
|
|
||||||
var colors = require('vs/platform/registry/common/platform').Registry.data.get('base.contributions.colors').colorSchema.properties
|
|
||||||
Object.keys(colors).forEach(function(key) {
|
|
||||||
var val = colors[key];
|
|
||||||
console.log( '//' + val.description + '\n' + key);
|
|
||||||
})
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE JS END*/
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,86 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<base href="..">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<style>
|
|
||||||
/*----------------------------------------SAMPLE CSS START*/
|
|
||||||
|
|
||||||
/* Make horizontal scrollbar, decorations overview ruler and vertical scrollbar arrows opaque */
|
|
||||||
.monaco-editor .monaco-scrollable-element .scrollbar.horizontal,
|
|
||||||
.monaco-editor .decorationsOverviewRuler,
|
|
||||||
.monaco-editor .monaco-scrollable-element .scrollbar.vertical .arrow-background {
|
|
||||||
background: rgba(230, 230, 230, 255);
|
|
||||||
}
|
|
||||||
/* Make vertical scrollbar transparent to allow decorations overview ruler to be visible */
|
|
||||||
.monaco-editor .monaco-scrollable-element .scrollbar.vertical {
|
|
||||||
background: rgba(0, 0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE CSS END*/
|
|
||||||
</style>
|
|
||||||
<a class="loading-opts" href="playground.generated/index.html">[<< BACK]</a> <br/>
|
|
||||||
THIS IS A GENERATED FILE VIA `npm run simpleserver`
|
|
||||||
|
|
||||||
<div id="bar" style="margin-bottom: 6px;"></div>
|
|
||||||
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML START-->
|
|
||||||
|
|
||||||
<div id="container" style="height: 100%"></div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML END-->
|
|
||||||
</div>
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
|
|
||||||
<script src="../../metadata.js"></script>
|
|
||||||
<script src="dev-setup.js"></script>
|
|
||||||
<script>
|
|
||||||
loadEditor(function() {
|
|
||||||
/*----------------------------------------SAMPLE JS START*/
|
|
||||||
|
|
||||||
// Remember to check out the CSS too!
|
|
||||||
var htmlCode =
|
|
||||||
'<html><!--long linelong linelong linelong linelong linelong linelong linelong linelong linelong line-->\n<head>\n <!-- HTML comment -->\n <style type="text/css">\n /* CSS comment */\n </style>\n <script type="javascript">\n // JavaScript comment\n </' +
|
|
||||||
'script>\n</head>\n<body></body>\n</html>';
|
|
||||||
|
|
||||||
monaco.editor.create(document.getElementById('container'), {
|
|
||||||
value: htmlCode,
|
|
||||||
language: 'text/html',
|
|
||||||
theme: 'vs',
|
|
||||||
scrollbar: {
|
|
||||||
// Subtle shadows to the left & top. Defaults to true.
|
|
||||||
useShadows: false,
|
|
||||||
|
|
||||||
// Render vertical arrows. Defaults to false.
|
|
||||||
verticalHasArrows: true,
|
|
||||||
// Render horizontal arrows. Defaults to false.
|
|
||||||
horizontalHasArrows: true,
|
|
||||||
|
|
||||||
// Render vertical scrollbar.
|
|
||||||
// Accepted values: 'auto', 'visible', 'hidden'.
|
|
||||||
// Defaults to 'auto'
|
|
||||||
vertical: 'visible',
|
|
||||||
// Render horizontal scrollbar.
|
|
||||||
// Accepted values: 'auto', 'visible', 'hidden'.
|
|
||||||
// Defaults to 'auto'
|
|
||||||
horizontal: 'visible',
|
|
||||||
|
|
||||||
verticalScrollbarSize: 17,
|
|
||||||
horizontalScrollbarSize: 17,
|
|
||||||
arrowSize: 30
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE JS END*/
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,77 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<base href="..">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<style>
|
|
||||||
/*----------------------------------------SAMPLE CSS START*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE CSS END*/
|
|
||||||
</style>
|
|
||||||
<a class="loading-opts" href="playground.generated/index.html">[<< BACK]</a> <br/>
|
|
||||||
THIS IS A GENERATED FILE VIA `npm run simpleserver`
|
|
||||||
|
|
||||||
<div id="bar" style="margin-bottom: 6px;"></div>
|
|
||||||
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML START-->
|
|
||||||
|
|
||||||
<div id="container" style="height: 100%"></div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML END-->
|
|
||||||
</div>
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
|
|
||||||
<script src="../../metadata.js"></script>
|
|
||||||
<script src="dev-setup.js"></script>
|
|
||||||
<script>
|
|
||||||
loadEditor(function() {
|
|
||||||
/*----------------------------------------SAMPLE JS START*/
|
|
||||||
|
|
||||||
// Theme matching (i.e. applying a style to a token) happens in JavaScript.
|
|
||||||
// We must therefore register the theme rules in JavaScript.
|
|
||||||
|
|
||||||
// A custom theme must name its base theme (i.e. 'vs', 'vs-dark' or 'hc-black')
|
|
||||||
// It can then choose to inherit the rules from the base theme or not
|
|
||||||
// A rule token matching is prefix based: e.g.
|
|
||||||
// - string will match a token with type: string, string.double.js or string.html
|
|
||||||
// - string.double will match a token with type string.double but will not match string or string.html
|
|
||||||
|
|
||||||
// !!! Tokens can be inspected using F1 > Developer: Inspect Tokens !!!
|
|
||||||
|
|
||||||
monaco.editor.defineTheme('myCustomTheme', {
|
|
||||||
base: 'vs', // can also be vs-dark or hc-black
|
|
||||||
inherit: true, // can also be false to completely replace the builtin rules
|
|
||||||
rules: [
|
|
||||||
{ token: 'comment', foreground: 'ffa500', fontStyle: 'italic underline' },
|
|
||||||
{ token: 'comment.js', foreground: '008800', fontStyle: 'bold' },
|
|
||||||
{ token: 'comment.css', foreground: '0000ff' } // will inherit fontStyle from `comment` above
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
monaco.editor.create(document.getElementById('container'), {
|
|
||||||
value: getCode(),
|
|
||||||
language: 'text/html',
|
|
||||||
theme: 'myCustomTheme'
|
|
||||||
});
|
|
||||||
|
|
||||||
function getCode() {
|
|
||||||
return (
|
|
||||||
'<html><!-- // !!! Tokens can be inspected using F1 > Developer: Inspect Tokens !!! -->\n<head>\n <!-- HTML comment -->\n <style type="text/css">\n /* CSS comment */\n </style>\n <script type="javascript">\n // JavaScript comment\n </' +
|
|
||||||
'script>\n</head>\n<body></body>\n</html>'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE JS END*/
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,83 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<base href="..">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<style>
|
|
||||||
/*----------------------------------------SAMPLE CSS START*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE CSS END*/
|
|
||||||
</style>
|
|
||||||
<a class="loading-opts" href="playground.generated/index.html">[<< BACK]</a> <br/>
|
|
||||||
THIS IS A GENERATED FILE VIA `npm run simpleserver`
|
|
||||||
|
|
||||||
<div id="bar" style="margin-bottom: 6px;"></div>
|
|
||||||
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML START-->
|
|
||||||
|
|
||||||
<div id="container" style="height: 100%"></div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML END-->
|
|
||||||
</div>
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
|
|
||||||
<script src="../../metadata.js"></script>
|
|
||||||
<script src="dev-setup.js"></script>
|
|
||||||
<script>
|
|
||||||
loadEditor(function() {
|
|
||||||
/*----------------------------------------SAMPLE JS START*/
|
|
||||||
|
|
||||||
var editor = monaco.editor.create(document.getElementById('container'), {
|
|
||||||
value: '{\n\t"dependencies": {\n\t\t\n\t}\n}\n',
|
|
||||||
language: 'json'
|
|
||||||
});
|
|
||||||
|
|
||||||
var commandId = editor.addCommand(
|
|
||||||
0,
|
|
||||||
function () {
|
|
||||||
// services available in `ctx`
|
|
||||||
alert('my command is executing!');
|
|
||||||
},
|
|
||||||
''
|
|
||||||
);
|
|
||||||
|
|
||||||
monaco.languages.registerCodeLensProvider('json', {
|
|
||||||
provideCodeLenses: function (model, token) {
|
|
||||||
return {
|
|
||||||
lenses: [
|
|
||||||
{
|
|
||||||
range: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
},
|
|
||||||
id: 'First Line',
|
|
||||||
command: {
|
|
||||||
id: commandId,
|
|
||||||
title: 'First Line'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
dispose: () => {}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
resolveCodeLens: function (model, codeLens, token) {
|
|
||||||
return codeLens;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE JS END*/
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,106 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<base href="..">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<style>
|
|
||||||
/*----------------------------------------SAMPLE CSS START*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE CSS END*/
|
|
||||||
</style>
|
|
||||||
<a class="loading-opts" href="playground.generated/index.html">[<< BACK]</a> <br/>
|
|
||||||
THIS IS A GENERATED FILE VIA `npm run simpleserver`
|
|
||||||
|
|
||||||
<div id="bar" style="margin-bottom: 6px;"></div>
|
|
||||||
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML START-->
|
|
||||||
|
|
||||||
<div id="container" style="height: 100%"></div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML END-->
|
|
||||||
</div>
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
|
|
||||||
<script src="../../metadata.js"></script>
|
|
||||||
<script src="dev-setup.js"></script>
|
|
||||||
<script>
|
|
||||||
loadEditor(function() {
|
|
||||||
/*----------------------------------------SAMPLE JS START*/
|
|
||||||
|
|
||||||
monaco.languages.register({
|
|
||||||
id: 'colorLanguage'
|
|
||||||
});
|
|
||||||
|
|
||||||
monaco.editor.create(document.getElementById('container'), {
|
|
||||||
value: 'red\nblue\ngreen',
|
|
||||||
language: 'colorLanguage',
|
|
||||||
colorDecorators: true
|
|
||||||
});
|
|
||||||
|
|
||||||
monaco.languages.registerColorProvider('colorLanguage', {
|
|
||||||
provideColorPresentations: (model, colorInfo) => {
|
|
||||||
var color = colorInfo.color;
|
|
||||||
var red256 = Math.round(color.red * 255);
|
|
||||||
var green256 = Math.round(color.green * 255);
|
|
||||||
var blue256 = Math.round(color.blue * 255);
|
|
||||||
var label;
|
|
||||||
if (color.alpha === 1) {
|
|
||||||
label = 'rgb(' + red256 + ', ' + green256 + ', ' + blue256 + ')';
|
|
||||||
} else {
|
|
||||||
label = 'rgba(' + red256 + ', ' + green256 + ', ' + blue256 + ', ' + color.alpha + ')';
|
|
||||||
}
|
|
||||||
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
label: label
|
|
||||||
}
|
|
||||||
];
|
|
||||||
},
|
|
||||||
|
|
||||||
provideDocumentColors: () => {
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
color: { red: 1, blue: 0, green: 0, alpha: 1 },
|
|
||||||
range: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 0,
|
|
||||||
endLineNumber: 1,
|
|
||||||
endColumn: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
color: { red: 0, blue: 1, green: 0, alpha: 1 },
|
|
||||||
range: {
|
|
||||||
startLineNumber: 2,
|
|
||||||
startColumn: 0,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
color: { red: 0, blue: 0, green: 1, alpha: 1 },
|
|
||||||
range: {
|
|
||||||
startLineNumber: 3,
|
|
||||||
startColumn: 0,
|
|
||||||
endLineNumber: 3,
|
|
||||||
endColumn: 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE JS END*/
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,112 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<base href="..">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<style>
|
|
||||||
/*----------------------------------------SAMPLE CSS START*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE CSS END*/
|
|
||||||
</style>
|
|
||||||
<a class="loading-opts" href="playground.generated/index.html">[<< BACK]</a> <br/>
|
|
||||||
THIS IS A GENERATED FILE VIA `npm run simpleserver`
|
|
||||||
|
|
||||||
<div id="bar" style="margin-bottom: 6px;"></div>
|
|
||||||
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML START-->
|
|
||||||
|
|
||||||
<div id="container" style="height: 100%"></div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML END-->
|
|
||||||
</div>
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
|
|
||||||
<script src="../../metadata.js"></script>
|
|
||||||
<script src="dev-setup.js"></script>
|
|
||||||
<script>
|
|
||||||
loadEditor(function() {
|
|
||||||
/*----------------------------------------SAMPLE JS START*/
|
|
||||||
|
|
||||||
function createDependencyProposals(range) {
|
|
||||||
// returning a static list of proposals, not even looking at the prefix (filtering is done by the Monaco editor),
|
|
||||||
// here you could do a server side lookup
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
label: '"lodash"',
|
|
||||||
kind: monaco.languages.CompletionItemKind.Function,
|
|
||||||
documentation: 'The Lodash library exported as Node.js modules.',
|
|
||||||
insertText: '"lodash": "*"',
|
|
||||||
range: range
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '"express"',
|
|
||||||
kind: monaco.languages.CompletionItemKind.Function,
|
|
||||||
documentation: 'Fast, unopinionated, minimalist web framework',
|
|
||||||
insertText: '"express": "*"',
|
|
||||||
range: range
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '"mkdirp"',
|
|
||||||
kind: monaco.languages.CompletionItemKind.Function,
|
|
||||||
documentation: 'Recursively mkdir, like <code>mkdir -p</code>',
|
|
||||||
insertText: '"mkdirp": "*"',
|
|
||||||
range: range
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '"my-third-party-library"',
|
|
||||||
kind: monaco.languages.CompletionItemKind.Function,
|
|
||||||
documentation: 'Describe your library here',
|
|
||||||
insertText: '"${1:my-third-party-library}": "${2:1.2.3}"',
|
|
||||||
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
|
|
||||||
range: range
|
|
||||||
}
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
monaco.languages.registerCompletionItemProvider('json', {
|
|
||||||
provideCompletionItems: function (model, position) {
|
|
||||||
// find out if we are completing a property in the 'dependencies' object.
|
|
||||||
var textUntilPosition = model.getValueInRange({
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: position.lineNumber,
|
|
||||||
endColumn: position.column
|
|
||||||
});
|
|
||||||
var match = textUntilPosition.match(
|
|
||||||
/"dependencies"\s*:\s*\{\s*("[^"]*"\s*:\s*"[^"]*"\s*,\s*)*([^"]*)?$/
|
|
||||||
);
|
|
||||||
if (!match) {
|
|
||||||
return { suggestions: [] };
|
|
||||||
}
|
|
||||||
var word = model.getWordUntilPosition(position);
|
|
||||||
var range = {
|
|
||||||
startLineNumber: position.lineNumber,
|
|
||||||
endLineNumber: position.lineNumber,
|
|
||||||
startColumn: word.startColumn,
|
|
||||||
endColumn: word.endColumn
|
|
||||||
};
|
|
||||||
return {
|
|
||||||
suggestions: createDependencyProposals(range)
|
|
||||||
};
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
monaco.editor.create(document.getElementById('container'), {
|
|
||||||
value: '{\n\t"dependencies": {\n\t\t\n\t}\n}\n',
|
|
||||||
language: 'json'
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE JS END*/
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,90 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<base href="..">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<style>
|
|
||||||
/*----------------------------------------SAMPLE CSS START*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE CSS END*/
|
|
||||||
</style>
|
|
||||||
<a class="loading-opts" href="playground.generated/index.html">[<< BACK]</a> <br/>
|
|
||||||
THIS IS A GENERATED FILE VIA `npm run simpleserver`
|
|
||||||
|
|
||||||
<div id="bar" style="margin-bottom: 6px;"></div>
|
|
||||||
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML START-->
|
|
||||||
|
|
||||||
<div id="container" style="height: 100%"></div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML END-->
|
|
||||||
</div>
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
|
|
||||||
<script src="../../metadata.js"></script>
|
|
||||||
<script src="dev-setup.js"></script>
|
|
||||||
<script>
|
|
||||||
loadEditor(function() {
|
|
||||||
/*----------------------------------------SAMPLE JS START*/
|
|
||||||
|
|
||||||
// Add additional d.ts files to the JavaScript language service and change.
|
|
||||||
// Also change the default compilation options.
|
|
||||||
// The sample below shows how a class Facts is declared and introduced
|
|
||||||
// to the system and how the compiler is told to use ES6 (target=2).
|
|
||||||
|
|
||||||
// validation settings
|
|
||||||
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
|
|
||||||
noSemanticValidation: true,
|
|
||||||
noSyntaxValidation: false
|
|
||||||
});
|
|
||||||
|
|
||||||
// compiler options
|
|
||||||
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
|
|
||||||
target: monaco.languages.typescript.ScriptTarget.ES6,
|
|
||||||
allowNonTsExtensions: true
|
|
||||||
});
|
|
||||||
|
|
||||||
// extra libraries
|
|
||||||
var libSource = [
|
|
||||||
'declare class Facts {',
|
|
||||||
' /**',
|
|
||||||
' * Returns the next fact',
|
|
||||||
' */',
|
|
||||||
' static next():string',
|
|
||||||
'}'
|
|
||||||
].join('\n');
|
|
||||||
var libUri = 'ts:filename/facts.d.ts';
|
|
||||||
monaco.languages.typescript.javascriptDefaults.addExtraLib(libSource, libUri);
|
|
||||||
// When resolving definitions and references, the editor will try to use created models.
|
|
||||||
// Creating a model for the library allows "peek definition/references" commands to work with the library.
|
|
||||||
monaco.editor.createModel(libSource, 'typescript', monaco.Uri.parse(libUri));
|
|
||||||
|
|
||||||
var jsCode = [
|
|
||||||
'"use strict";',
|
|
||||||
'',
|
|
||||||
'class Chuck {',
|
|
||||||
' greet() {',
|
|
||||||
' return Facts.next();',
|
|
||||||
' }',
|
|
||||||
'}'
|
|
||||||
].join('\n');
|
|
||||||
|
|
||||||
monaco.editor.create(document.getElementById('container'), {
|
|
||||||
value: jsCode,
|
|
||||||
language: 'javascript'
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE JS END*/
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,86 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<base href="..">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<style>
|
|
||||||
/*----------------------------------------SAMPLE CSS START*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE CSS END*/
|
|
||||||
</style>
|
|
||||||
<a class="loading-opts" href="playground.generated/index.html">[<< BACK]</a> <br/>
|
|
||||||
THIS IS A GENERATED FILE VIA `npm run simpleserver`
|
|
||||||
|
|
||||||
<div id="bar" style="margin-bottom: 6px;"></div>
|
|
||||||
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML START-->
|
|
||||||
|
|
||||||
<div id="container" style="height: 100%"></div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML END-->
|
|
||||||
</div>
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
|
|
||||||
<script src="../../metadata.js"></script>
|
|
||||||
<script src="dev-setup.js"></script>
|
|
||||||
<script>
|
|
||||||
loadEditor(function() {
|
|
||||||
/*----------------------------------------SAMPLE JS START*/
|
|
||||||
|
|
||||||
// Configures two JSON schemas, with references.
|
|
||||||
|
|
||||||
var jsonCode = ['{', ' "p1": "v3",', ' "p2": false', '}'].join('\n');
|
|
||||||
var modelUri = monaco.Uri.parse('a://b/foo.json'); // a made up unique URI for our model
|
|
||||||
var model = monaco.editor.createModel(jsonCode, 'json', modelUri);
|
|
||||||
|
|
||||||
// configure the JSON language support with schemas and schema associations
|
|
||||||
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
|
|
||||||
validate: true,
|
|
||||||
schemas: [
|
|
||||||
{
|
|
||||||
uri: 'http://myserver/foo-schema.json', // id of the first schema
|
|
||||||
fileMatch: [modelUri.toString()], // associate with our model
|
|
||||||
schema: {
|
|
||||||
type: 'object',
|
|
||||||
properties: {
|
|
||||||
p1: {
|
|
||||||
enum: ['v1', 'v2']
|
|
||||||
},
|
|
||||||
p2: {
|
|
||||||
$ref: 'http://myserver/bar-schema.json' // reference the second schema
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
uri: 'http://myserver/bar-schema.json', // id of the second schema
|
|
||||||
schema: {
|
|
||||||
type: 'object',
|
|
||||||
properties: {
|
|
||||||
q1: {
|
|
||||||
enum: ['x1', 'x2']
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
monaco.editor.create(document.getElementById('container'), {
|
|
||||||
model: model
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE JS END*/
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,158 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<base href="..">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<style>
|
|
||||||
/*----------------------------------------SAMPLE CSS START*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE CSS END*/
|
|
||||||
</style>
|
|
||||||
<a class="loading-opts" href="playground.generated/index.html">[<< BACK]</a> <br/>
|
|
||||||
THIS IS A GENERATED FILE VIA `npm run simpleserver`
|
|
||||||
|
|
||||||
<div id="bar" style="margin-bottom: 6px;"></div>
|
|
||||||
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML START-->
|
|
||||||
|
|
||||||
<div id="container" style="height: 100%"></div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML END-->
|
|
||||||
</div>
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
|
|
||||||
<script src="../../metadata.js"></script>
|
|
||||||
<script src="dev-setup.js"></script>
|
|
||||||
<script>
|
|
||||||
loadEditor(function() {
|
|
||||||
/*----------------------------------------SAMPLE JS START*/
|
|
||||||
|
|
||||||
// Register a new language
|
|
||||||
monaco.languages.register({ id: 'mySpecialLanguage' });
|
|
||||||
|
|
||||||
// Register a tokens provider for the language
|
|
||||||
monaco.languages.setMonarchTokensProvider('mySpecialLanguage', {
|
|
||||||
tokenizer: {
|
|
||||||
root: [
|
|
||||||
[/\[error.*/, 'custom-error'],
|
|
||||||
[/\[notice.*/, 'custom-notice'],
|
|
||||||
[/\[info.*/, 'custom-info'],
|
|
||||||
[/\[[a-zA-Z 0-9:]+\]/, 'custom-date']
|
|
||||||
]
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Define a new theme that contains only rules that match this language
|
|
||||||
monaco.editor.defineTheme('myCoolTheme', {
|
|
||||||
base: 'vs',
|
|
||||||
inherit: false,
|
|
||||||
rules: [
|
|
||||||
{ token: 'custom-info', foreground: '808080' },
|
|
||||||
{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
|
|
||||||
{ token: 'custom-notice', foreground: 'FFA500' },
|
|
||||||
{ token: 'custom-date', foreground: '008800' }
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
// Register a completion item provider for the new language
|
|
||||||
monaco.languages.registerCompletionItemProvider('mySpecialLanguage', {
|
|
||||||
provideCompletionItems: () => {
|
|
||||||
var suggestions = [
|
|
||||||
{
|
|
||||||
label: 'simpleText',
|
|
||||||
kind: monaco.languages.CompletionItemKind.Text,
|
|
||||||
insertText: 'simpleText'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'testing',
|
|
||||||
kind: monaco.languages.CompletionItemKind.Keyword,
|
|
||||||
insertText: 'testing(${1:condition})',
|
|
||||||
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'ifelse',
|
|
||||||
kind: monaco.languages.CompletionItemKind.Snippet,
|
|
||||||
insertText: ['if (${1:condition}) {', '\t$0', '} else {', '\t', '}'].join('\n'),
|
|
||||||
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
|
|
||||||
documentation: 'If-Else Statement'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
return { suggestions: suggestions };
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
monaco.editor.create(document.getElementById('container'), {
|
|
||||||
theme: 'myCoolTheme',
|
|
||||||
value: getCode(),
|
|
||||||
language: 'mySpecialLanguage'
|
|
||||||
});
|
|
||||||
|
|
||||||
function getCode() {
|
|
||||||
return [
|
|
||||||
'[Sun Mar 7 16:02:00 2004] [notice] Apache/1.3.29 (Unix) configured -- resuming normal operations',
|
|
||||||
'[Sun Mar 7 16:02:00 2004] [info] Server built: Feb 27 2004 13:56:37',
|
|
||||||
'[Sun Mar 7 16:02:00 2004] [notice] Accept mutex: sysvsem (Default: sysvsem)',
|
|
||||||
'[Sun Mar 7 16:05:49 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Sun Mar 7 16:45:56 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Sun Mar 7 17:13:50 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Sun Mar 7 17:21:44 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Sun Mar 7 17:23:53 2004] statistics: Use of uninitialized value in concatenation (.) or string at /home/httpd/twiki/lib/TWiki.pm line 528.',
|
|
||||||
"[Sun Mar 7 17:23:53 2004] statistics: Can't create file /home/httpd/twiki/data/Main/WebStatistics.txt - Permission denied",
|
|
||||||
'[Sun Mar 7 17:27:37 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Sun Mar 7 17:31:39 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Sun Mar 7 17:58:00 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Sun Mar 7 18:00:09 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Sun Mar 7 18:10:09 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Sun Mar 7 18:19:01 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Sun Mar 7 18:42:29 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Sun Mar 7 18:52:30 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Sun Mar 7 18:58:52 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Sun Mar 7 19:03:58 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Sun Mar 7 19:08:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Sun Mar 7 20:04:35 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Sun Mar 7 20:11:33 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Sun Mar 7 20:12:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Sun Mar 7 20:25:31 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Sun Mar 7 20:44:48 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Sun Mar 7 20:58:27 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Sun Mar 7 21:16:17 2004] [error] [client xx.xx.xx.xx] File does not exist: /home/httpd/twiki/view/Main/WebHome',
|
|
||||||
'[Sun Mar 7 21:20:14 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Sun Mar 7 21:31:12 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Sun Mar 7 21:39:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Sun Mar 7 21:44:10 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Mon Mar 8 01:35:13 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Mon Mar 8 01:47:06 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Mon Mar 8 01:59:13 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Mon Mar 8 02:12:24 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Mon Mar 8 02:54:54 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Mon Mar 8 03:46:27 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Mon Mar 8 03:48:18 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Mon Mar 8 03:52:17 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Mon Mar 8 03:55:09 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Mon Mar 8 04:22:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Mon Mar 8 04:24:47 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Mon Mar 8 04:40:32 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Mon Mar 8 04:55:40 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Mon Mar 8 04:59:13 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Mon Mar 8 05:22:57 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Mon Mar 8 05:24:29 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'[Mon Mar 8 05:31:47 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
|
|
||||||
'<11>httpd[31628]: [error] [client xx.xx.xx.xx] File does not exist: /usr/local/installed/apache/htdocs/squirrelmail/_vti_inf.html in 29-Mar 15:18:20.50 from xx.xx.xx.xx',
|
|
||||||
'<11>httpd[25859]: [error] [client xx.xx.xx.xx] File does not exist: /usr/local/installed/apache/htdocs/squirrelmail/_vti_bin/shtml.exe/_vti_rpc in 29-Mar 15:18:20.54 from xx.xx.xx.xx'
|
|
||||||
].join('\n');
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE JS END*/
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,118 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<base href="..">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<style>
|
|
||||||
/*----------------------------------------SAMPLE CSS START*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE CSS END*/
|
|
||||||
</style>
|
|
||||||
<a class="loading-opts" href="playground.generated/index.html">[<< BACK]</a> <br/>
|
|
||||||
THIS IS A GENERATED FILE VIA `npm run simpleserver`
|
|
||||||
|
|
||||||
<div id="bar" style="margin-bottom: 6px;"></div>
|
|
||||||
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML START-->
|
|
||||||
|
|
||||||
<div id="container" style="height: 100%"></div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML END-->
|
|
||||||
</div>
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
|
|
||||||
<script src="../../metadata.js"></script>
|
|
||||||
<script src="dev-setup.js"></script>
|
|
||||||
<script>
|
|
||||||
loadEditor(function() {
|
|
||||||
/*----------------------------------------SAMPLE JS START*/
|
|
||||||
|
|
||||||
monaco.languages.register({
|
|
||||||
id: 'foldLanguage'
|
|
||||||
});
|
|
||||||
|
|
||||||
var value = `1. Hit F1 to bring up the Command Palette
|
|
||||||
2. Type 'fold'
|
|
||||||
3. Choose 'Fold All Block Comments' or 'Fold All Regions'
|
|
||||||
|
|
||||||
5. comment1
|
|
||||||
6. comment1
|
|
||||||
7. comment1
|
|
||||||
|
|
||||||
9. unfoldable text
|
|
||||||
10. unfoldable text
|
|
||||||
11. unfoldable text
|
|
||||||
|
|
||||||
13. comment2
|
|
||||||
14. comment2
|
|
||||||
15. comment2
|
|
||||||
16. comment2
|
|
||||||
17. comment2
|
|
||||||
|
|
||||||
19. foldable text
|
|
||||||
20. foldable text
|
|
||||||
21. foldable text
|
|
||||||
|
|
||||||
23. region1
|
|
||||||
24. region1
|
|
||||||
25. region1
|
|
||||||
|
|
||||||
27. region2
|
|
||||||
28. region2
|
|
||||||
29. region2`;
|
|
||||||
|
|
||||||
monaco.editor.create(document.getElementById('container'), {
|
|
||||||
value: value,
|
|
||||||
language: 'foldLanguage'
|
|
||||||
});
|
|
||||||
|
|
||||||
monaco.languages.registerFoldingRangeProvider('foldLanguage', {
|
|
||||||
provideFoldingRanges: function (model, context, token) {
|
|
||||||
return [
|
|
||||||
// comment1
|
|
||||||
{
|
|
||||||
start: 5,
|
|
||||||
end: 7,
|
|
||||||
kind: monaco.languages.FoldingRangeKind.Comment
|
|
||||||
},
|
|
||||||
// comment2
|
|
||||||
{
|
|
||||||
start: 13,
|
|
||||||
end: 17,
|
|
||||||
kind: monaco.languages.FoldingRangeKind.Comment
|
|
||||||
},
|
|
||||||
// foldable text
|
|
||||||
{
|
|
||||||
start: 19,
|
|
||||||
end: 21
|
|
||||||
},
|
|
||||||
// region1
|
|
||||||
{
|
|
||||||
start: 23,
|
|
||||||
end: 25,
|
|
||||||
kind: monaco.languages.FoldingRangeKind.Region
|
|
||||||
},
|
|
||||||
// region2
|
|
||||||
{
|
|
||||||
start: 27,
|
|
||||||
end: 29,
|
|
||||||
kind: monaco.languages.FoldingRangeKind.Region
|
|
||||||
}
|
|
||||||
];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE JS END*/
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,101 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<base href="..">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<style>
|
|
||||||
/*----------------------------------------SAMPLE CSS START*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE CSS END*/
|
|
||||||
</style>
|
|
||||||
<a class="loading-opts" href="playground.generated/index.html">[<< BACK]</a> <br/>
|
|
||||||
THIS IS A GENERATED FILE VIA `npm run simpleserver`
|
|
||||||
|
|
||||||
<div id="bar" style="margin-bottom: 6px;"></div>
|
|
||||||
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML START-->
|
|
||||||
|
|
||||||
<div id="container" style="height: 100%"></div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML END-->
|
|
||||||
</div>
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
|
|
||||||
<script src="../../metadata.js"></script>
|
|
||||||
<script src="dev-setup.js"></script>
|
|
||||||
<script>
|
|
||||||
loadEditor(function() {
|
|
||||||
/*----------------------------------------SAMPLE JS START*/
|
|
||||||
|
|
||||||
monaco.languages.register({ id: 'mySpecialLanguage' });
|
|
||||||
|
|
||||||
monaco.languages.registerHoverProvider('mySpecialLanguage', {
|
|
||||||
provideHover: function (model, position) {
|
|
||||||
return xhr('../playground.html').then(function (res) {
|
|
||||||
return {
|
|
||||||
range: new monaco.Range(
|
|
||||||
1,
|
|
||||||
1,
|
|
||||||
model.getLineCount(),
|
|
||||||
model.getLineMaxColumn(model.getLineCount())
|
|
||||||
),
|
|
||||||
contents: [
|
|
||||||
{ value: '**SOURCE**' },
|
|
||||||
{ value: '```html\n' + res.responseText.substring(0, 200) + '\n```' }
|
|
||||||
]
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
monaco.editor.create(document.getElementById('container'), {
|
|
||||||
value: '\n\nHover over this text',
|
|
||||||
language: 'mySpecialLanguage'
|
|
||||||
});
|
|
||||||
|
|
||||||
function xhr(url) {
|
|
||||||
var req = null;
|
|
||||||
return new Promise(
|
|
||||||
function (c, e) {
|
|
||||||
req = new XMLHttpRequest();
|
|
||||||
req.onreadystatechange = function () {
|
|
||||||
if (req._canceled) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (req.readyState === 4) {
|
|
||||||
if ((req.status >= 200 && req.status < 300) || req.status === 1223) {
|
|
||||||
c(req);
|
|
||||||
} else {
|
|
||||||
e(req);
|
|
||||||
}
|
|
||||||
req.onreadystatechange = function () {};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
req.open('GET', url, true);
|
|
||||||
req.responseType = '';
|
|
||||||
|
|
||||||
req.send(null);
|
|
||||||
},
|
|
||||||
function () {
|
|
||||||
req._canceled = true;
|
|
||||||
req.abort();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE JS END*/
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,210 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<base href="..">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<style>
|
|
||||||
/*----------------------------------------SAMPLE CSS START*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE CSS END*/
|
|
||||||
</style>
|
|
||||||
<a class="loading-opts" href="playground.generated/index.html">[<< BACK]</a> <br/>
|
|
||||||
THIS IS A GENERATED FILE VIA `npm run simpleserver`
|
|
||||||
|
|
||||||
<div id="bar" style="margin-bottom: 6px;"></div>
|
|
||||||
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML START-->
|
|
||||||
|
|
||||||
<div id="container" style="height: 100%"></div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML END-->
|
|
||||||
</div>
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
|
|
||||||
<script src="../../metadata.js"></script>
|
|
||||||
<script src="dev-setup.js"></script>
|
|
||||||
<script>
|
|
||||||
loadEditor(function() {
|
|
||||||
/*----------------------------------------SAMPLE JS START*/
|
|
||||||
|
|
||||||
/** @type {monaco.languages.SemanticTokensLegend} */
|
|
||||||
const legend = {
|
|
||||||
tokenTypes: [
|
|
||||||
'comment',
|
|
||||||
'string',
|
|
||||||
'keyword',
|
|
||||||
'number',
|
|
||||||
'regexp',
|
|
||||||
'operator',
|
|
||||||
'namespace',
|
|
||||||
'type',
|
|
||||||
'struct',
|
|
||||||
'class',
|
|
||||||
'interface',
|
|
||||||
'enum',
|
|
||||||
'typeParameter',
|
|
||||||
'function',
|
|
||||||
'member',
|
|
||||||
'macro',
|
|
||||||
'variable',
|
|
||||||
'parameter',
|
|
||||||
'property',
|
|
||||||
'label'
|
|
||||||
],
|
|
||||||
tokenModifiers: [
|
|
||||||
'declaration',
|
|
||||||
'documentation',
|
|
||||||
'readonly',
|
|
||||||
'static',
|
|
||||||
'abstract',
|
|
||||||
'deprecated',
|
|
||||||
'modification',
|
|
||||||
'async'
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
/** @type {(type: string)=>number} */
|
|
||||||
function getType(type) {
|
|
||||||
return legend.tokenTypes.indexOf(type);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** @type {(modifier: string[]|string|null)=>number} */
|
|
||||||
function getModifier(modifiers) {
|
|
||||||
if (typeof modifiers === 'string') {
|
|
||||||
modifiers = [modifiers];
|
|
||||||
}
|
|
||||||
if (Array.isArray(modifiers)) {
|
|
||||||
let nModifiers = 0;
|
|
||||||
for (let modifier of modifiers) {
|
|
||||||
const nModifier = legend.tokenModifiers.indexOf(modifier);
|
|
||||||
if (nModifier > -1) {
|
|
||||||
nModifiers |= (1 << nModifier) >>> 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return nModifiers;
|
|
||||||
} else {
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const tokenPattern = new RegExp('([a-zA-Z]+)((?:\\.[a-zA-Z]+)*)', 'g');
|
|
||||||
|
|
||||||
monaco.languages.registerDocumentSemanticTokensProvider('plaintext', {
|
|
||||||
getLegend: function () {
|
|
||||||
return legend;
|
|
||||||
},
|
|
||||||
provideDocumentSemanticTokens: function (model, lastResultId, token) {
|
|
||||||
const lines = model.getLinesContent();
|
|
||||||
|
|
||||||
/** @type {number[]} */
|
|
||||||
const data = [];
|
|
||||||
|
|
||||||
let prevLine = 0;
|
|
||||||
let prevChar = 0;
|
|
||||||
|
|
||||||
for (let i = 0; i < lines.length; i++) {
|
|
||||||
const line = lines[i];
|
|
||||||
|
|
||||||
for (let match = null; (match = tokenPattern.exec(line)); ) {
|
|
||||||
// translate token and modifiers to number representations
|
|
||||||
let type = getType(match[1]);
|
|
||||||
if (type === -1) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
let modifier = match[2].length ? getModifier(match[2].split('.').slice(1)) : 0;
|
|
||||||
|
|
||||||
data.push(
|
|
||||||
// translate line to deltaLine
|
|
||||||
i - prevLine,
|
|
||||||
// for the same line, translate start to deltaStart
|
|
||||||
prevLine === i ? match.index - prevChar : match.index,
|
|
||||||
match[0].length,
|
|
||||||
type,
|
|
||||||
modifier
|
|
||||||
);
|
|
||||||
|
|
||||||
prevLine = i;
|
|
||||||
prevChar = match.index;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
data: new Uint32Array(data),
|
|
||||||
resultId: null
|
|
||||||
};
|
|
||||||
},
|
|
||||||
releaseDocumentSemanticTokens: function (resultId) {}
|
|
||||||
});
|
|
||||||
|
|
||||||
// add some missing tokens
|
|
||||||
monaco.editor.defineTheme('myCustomTheme', {
|
|
||||||
base: 'vs',
|
|
||||||
inherit: true,
|
|
||||||
colors: {},
|
|
||||||
rules: [
|
|
||||||
{ token: 'comment', foreground: 'aaaaaa', fontStyle: 'italic' },
|
|
||||||
{ token: 'keyword', foreground: 'ce63eb' },
|
|
||||||
{ token: 'operator', foreground: '000000' },
|
|
||||||
{ token: 'namespace', foreground: '66afce' },
|
|
||||||
|
|
||||||
{ token: 'type', foreground: '1db010' },
|
|
||||||
{ token: 'struct', foreground: '0000ff' },
|
|
||||||
{ token: 'class', foreground: '0000ff', fontStyle: 'bold' },
|
|
||||||
{ token: 'interface', foreground: '007700', fontStyle: 'bold' },
|
|
||||||
{ token: 'enum', foreground: '0077ff', fontStyle: 'bold' },
|
|
||||||
{ token: 'typeParameter', foreground: '1db010' },
|
|
||||||
{ token: 'function', foreground: '94763a' },
|
|
||||||
|
|
||||||
{ token: 'member', foreground: '94763a' },
|
|
||||||
{ token: 'macro', foreground: '615a60' },
|
|
||||||
{ token: 'variable', foreground: '3e5bbf' },
|
|
||||||
{ token: 'parameter', foreground: '3e5bbf' },
|
|
||||||
{ token: 'property', foreground: '3e5bbf' },
|
|
||||||
{ token: 'label', foreground: '615a60' },
|
|
||||||
|
|
||||||
{ token: 'type.static', fontStyle: 'bold' },
|
|
||||||
{ token: 'class.static', foreground: 'ff0000', fontStyle: 'bold' }
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
const editor = monaco.editor.create(document.getElementById('container'), {
|
|
||||||
value: [
|
|
||||||
'Available token types:',
|
|
||||||
' [comment] [string] [keyword] [number] [regexp] [operator] [namespace]',
|
|
||||||
' [type] [struct] [class] [interface] [enum] [typeParameter] [function]',
|
|
||||||
' [member] [macro] [variable] [parameter] [property] [label]',
|
|
||||||
'',
|
|
||||||
'Available token modifiers:',
|
|
||||||
' [type.declaration] [type.documentation] [type.member] [type.static]',
|
|
||||||
' [type.abstract] [type.deprecated] [type.modification] [type.async]',
|
|
||||||
'',
|
|
||||||
'Some examples:',
|
|
||||||
' [class.static.token] [type.static.abstract]',
|
|
||||||
' [class.static.token] [type.static]',
|
|
||||||
'',
|
|
||||||
' [struct]',
|
|
||||||
'',
|
|
||||||
' [function.private]',
|
|
||||||
'',
|
|
||||||
'An error case:',
|
|
||||||
' [notInLegend]'
|
|
||||||
].join('\n'),
|
|
||||||
language: 'plaintext',
|
|
||||||
theme: 'myCustomTheme',
|
|
||||||
// semantic tokens provider is disabled by default
|
|
||||||
'semanticHighlighting.enabled': true
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE JS END*/
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,524 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<base href="..">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<style>
|
|
||||||
/*----------------------------------------SAMPLE CSS START*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE CSS END*/
|
|
||||||
</style>
|
|
||||||
<a class="loading-opts" href="playground.generated/index.html">[<< BACK]</a> <br/>
|
|
||||||
THIS IS A GENERATED FILE VIA `npm run simpleserver`
|
|
||||||
|
|
||||||
<div id="bar" style="margin-bottom: 6px;"></div>
|
|
||||||
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML START-->
|
|
||||||
|
|
||||||
<div id="container" style="height: 100%"></div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML END-->
|
|
||||||
</div>
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
|
|
||||||
<script src="../../metadata.js"></script>
|
|
||||||
<script src="dev-setup.js"></script>
|
|
||||||
<script>
|
|
||||||
loadEditor(function() {
|
|
||||||
/*----------------------------------------SAMPLE JS START*/
|
|
||||||
|
|
||||||
monaco.languages.registerDocumentSymbolProvider('json', {
|
|
||||||
provideDocumentSymbols: function (model, token) {
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
range: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
},
|
|
||||||
name: 'File',
|
|
||||||
kind: 0,
|
|
||||||
detail: '',
|
|
||||||
tags: [],
|
|
||||||
selectionRange: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
range: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
},
|
|
||||||
name: 'Module',
|
|
||||||
kind: 1,
|
|
||||||
detail: '',
|
|
||||||
tags: [],
|
|
||||||
selectionRange: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
range: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
},
|
|
||||||
name: 'Namespace',
|
|
||||||
kind: 2,
|
|
||||||
detail: '',
|
|
||||||
tags: [],
|
|
||||||
selectionRange: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
range: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
},
|
|
||||||
name: 'Package',
|
|
||||||
kind: 3,
|
|
||||||
detail: '',
|
|
||||||
tags: [],
|
|
||||||
selectionRange: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
range: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
},
|
|
||||||
name: 'Class',
|
|
||||||
kind: 4,
|
|
||||||
detail: '',
|
|
||||||
tags: [],
|
|
||||||
selectionRange: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
range: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
},
|
|
||||||
name: 'Method',
|
|
||||||
kind: 5,
|
|
||||||
detail: '',
|
|
||||||
tags: [],
|
|
||||||
selectionRange: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
range: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
},
|
|
||||||
name: 'Property',
|
|
||||||
kind: 6,
|
|
||||||
detail: '',
|
|
||||||
tags: [],
|
|
||||||
selectionRange: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
range: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
},
|
|
||||||
name: 'Field',
|
|
||||||
kind: 7,
|
|
||||||
detail: '',
|
|
||||||
tags: [],
|
|
||||||
selectionRange: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
range: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
},
|
|
||||||
name: 'Constructor',
|
|
||||||
kind: 8,
|
|
||||||
detail: '',
|
|
||||||
tags: [],
|
|
||||||
selectionRange: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
range: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
},
|
|
||||||
name: 'Enum',
|
|
||||||
kind: 9,
|
|
||||||
detail: '',
|
|
||||||
tags: [],
|
|
||||||
selectionRange: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
range: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
},
|
|
||||||
name: 'Interface',
|
|
||||||
kind: 10,
|
|
||||||
detail: '',
|
|
||||||
tags: [],
|
|
||||||
selectionRange: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
range: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
},
|
|
||||||
name: 'Function',
|
|
||||||
kind: 11,
|
|
||||||
detail: '',
|
|
||||||
tags: [],
|
|
||||||
selectionRange: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
range: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
},
|
|
||||||
name: 'Variable',
|
|
||||||
kind: 12,
|
|
||||||
detail: '',
|
|
||||||
tags: [],
|
|
||||||
selectionRange: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
range: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
},
|
|
||||||
name: 'Constant',
|
|
||||||
kind: 13,
|
|
||||||
detail: '',
|
|
||||||
tags: [],
|
|
||||||
selectionRange: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
range: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
},
|
|
||||||
name: 'String',
|
|
||||||
kind: 14,
|
|
||||||
detail: '',
|
|
||||||
tags: [],
|
|
||||||
selectionRange: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
range: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
},
|
|
||||||
name: 'Number',
|
|
||||||
kind: 15,
|
|
||||||
detail: '',
|
|
||||||
tags: [],
|
|
||||||
selectionRange: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
range: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
},
|
|
||||||
name: 'Boolean',
|
|
||||||
kind: 16,
|
|
||||||
detail: '',
|
|
||||||
tags: [],
|
|
||||||
selectionRange: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
range: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
},
|
|
||||||
name: 'Array',
|
|
||||||
kind: 17,
|
|
||||||
detail: '',
|
|
||||||
tags: [],
|
|
||||||
selectionRange: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
range: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
},
|
|
||||||
name: 'Object',
|
|
||||||
kind: 18,
|
|
||||||
detail: '',
|
|
||||||
tags: [],
|
|
||||||
selectionRange: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
range: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
},
|
|
||||||
name: 'Key',
|
|
||||||
kind: 19,
|
|
||||||
detail: '',
|
|
||||||
tags: [],
|
|
||||||
selectionRange: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
range: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
},
|
|
||||||
name: 'Null',
|
|
||||||
kind: 20,
|
|
||||||
detail: '',
|
|
||||||
tags: [],
|
|
||||||
selectionRange: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
range: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
},
|
|
||||||
name: 'EnumMember',
|
|
||||||
kind: 21,
|
|
||||||
detail: '',
|
|
||||||
tags: [],
|
|
||||||
selectionRange: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
range: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
},
|
|
||||||
name: 'Struct',
|
|
||||||
kind: 22,
|
|
||||||
detail: '',
|
|
||||||
tags: [],
|
|
||||||
selectionRange: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
range: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
},
|
|
||||||
name: 'Event',
|
|
||||||
kind: 23,
|
|
||||||
detail: '',
|
|
||||||
tags: [],
|
|
||||||
selectionRange: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
range: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
},
|
|
||||||
name: 'Operator',
|
|
||||||
kind: 24,
|
|
||||||
detail: '',
|
|
||||||
tags: [],
|
|
||||||
selectionRange: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
range: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
},
|
|
||||||
name: 'TypeParameter',
|
|
||||||
kind: 25,
|
|
||||||
detail: '',
|
|
||||||
tags: [],
|
|
||||||
selectionRange: {
|
|
||||||
startLineNumber: 1,
|
|
||||||
startColumn: 1,
|
|
||||||
endLineNumber: 2,
|
|
||||||
endColumn: 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// press Ctrl+Shift+O to show the symbols in the editor
|
|
||||||
monaco.editor.create(document.getElementById('container'), {
|
|
||||||
value: '{\n\t"dependencies": {\n\t\t\n\t}\n}\n',
|
|
||||||
language: 'json'
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE JS END*/
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<base href="..">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<a class="loading-opts" href="index.html">[<< BACK]</a><br/>
|
|
||||||
THIS IS A GENERATED FILE VIA `npm run simpleserver`<br/><br/>
|
|
||||||
<a class="loading-opts" href="playground.generated/creating-the-editor-hello-world.html">Creating the editor > Hello world!</a><br/>
|
|
||||||
<a class="loading-opts" href="playground.generated/creating-the-editor-editor-basic-options.html">Creating the editor > Editor basic options</a><br/>
|
|
||||||
<a class="loading-opts" href="playground.generated/creating-the-editor-hard-wrapping.html">Creating the editor > Hard wrapping</a><br/>
|
|
||||||
<a class="loading-opts" href="playground.generated/creating-the-editor-syntax-highlighting-for-html-elements.html">Creating the editor > Syntax highlighting for HTML elements</a><br/>
|
|
||||||
<a class="loading-opts" href="playground.generated/interacting-with-the-editor-adding-a-command-to-an-editor-instance.html">Interacting with the editor > Adding a command to an editor instance</a><br/>
|
|
||||||
<a class="loading-opts" href="playground.generated/interacting-with-the-editor-adding-an-action-to-an-editor-instance.html">Interacting with the editor > Adding an action to an editor instance</a><br/>
|
|
||||||
<a class="loading-opts" href="playground.generated/interacting-with-the-editor-revealing-a-position.html">Interacting with the editor > Revealing a position</a><br/>
|
|
||||||
<a class="loading-opts" href="playground.generated/interacting-with-the-editor-rendering-glyphs-in-the-margin.html">Interacting with the editor > Rendering glyphs in the margin</a><br/>
|
|
||||||
<a class="loading-opts" href="playground.generated/interacting-with-the-editor-line-and-inline-decorations.html">Interacting with the editor > Line and Inline decorations</a><br/>
|
|
||||||
<a class="loading-opts" href="playground.generated/interacting-with-the-editor-customizing-the-line-numbers.html">Interacting with the editor > Customizing the line numbers</a><br/>
|
|
||||||
<a class="loading-opts" href="playground.generated/interacting-with-the-editor-listening-to-mouse-events.html">Interacting with the editor > Listening to mouse events</a><br/>
|
|
||||||
<a class="loading-opts" href="playground.generated/interacting-with-the-editor-listening-to-key-events.html">Interacting with the editor > Listening to key events</a><br/>
|
|
||||||
<a class="loading-opts" href="playground.generated/customizing-the-appearence-exposed-colors.html">Customizing the appearence > Exposed colors</a><br/>
|
|
||||||
<a class="loading-opts" href="playground.generated/customizing-the-appearence-scrollbars.html">Customizing the appearence > Scrollbars</a><br/>
|
|
||||||
<a class="loading-opts" href="playground.generated/customizing-the-appearence-tokens-and-colors.html">Customizing the appearence > Tokens and colors</a><br/>
|
|
||||||
<a class="loading-opts" href="playground.generated/creating-the-diffeditor-hello-diff-world.html">Creating the DiffEditor > Hello diff world!</a><br/>
|
|
||||||
<a class="loading-opts" href="playground.generated/creating-the-diffeditor-multi-line-example.html">Creating the DiffEditor > Multi-line example</a><br/>
|
|
||||||
<a class="loading-opts" href="playground.generated/creating-the-diffeditor-inline-diff-example.html">Creating the DiffEditor > Inline Diff Example</a><br/>
|
|
||||||
<a class="loading-opts" href="playground.generated/creating-the-diffeditor-navigating-a-diff.html">Creating the DiffEditor > Navigating a Diff</a><br/>
|
|
||||||
<a class="loading-opts" href="playground.generated/extending-language-services-custom-languages.html">Extending Language Services > Custom languages</a><br/>
|
|
||||||
<a class="loading-opts" href="playground.generated/extending-language-services-completion-provider-example.html">Extending Language Services > Completion provider example</a><br/>
|
|
||||||
<a class="loading-opts" href="playground.generated/extending-language-services-codelens-provider-example.html">Extending Language Services > Codelens provider example</a><br/>
|
|
||||||
<a class="loading-opts" href="playground.generated/extending-language-services-color-provider-example.html">Extending Language Services > Color provider example</a><br/>
|
|
||||||
<a class="loading-opts" href="playground.generated/extending-language-services-symbols-provider-example.html">Extending Language Services > Symbols provider example</a><br/>
|
|
||||||
<a class="loading-opts" href="playground.generated/extending-language-services-folding-provider-example.html">Extending Language Services > Folding provider example</a><br/>
|
|
||||||
<a class="loading-opts" href="playground.generated/extending-language-services-hover-provider-example.html">Extending Language Services > Hover provider example</a><br/>
|
|
||||||
<a class="loading-opts" href="playground.generated/extending-language-services-semantic-tokens-provider-example.html">Extending Language Services > Semantic tokens provider example</a><br/>
|
|
||||||
<a class="loading-opts" href="playground.generated/extending-language-services-configure-javascript-defaults.html">Extending Language Services > Configure JavaScript defaults</a><br/>
|
|
||||||
<a class="loading-opts" href="playground.generated/extending-language-services-configure-json-defaults.html">Extending Language Services > Configure JSON defaults</a>
|
|
||||||
<script src="../../metadata.js"></script>
|
|
||||||
<script src="dev-setup.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,80 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<base href="..">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<style>
|
|
||||||
/*----------------------------------------SAMPLE CSS START*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE CSS END*/
|
|
||||||
</style>
|
|
||||||
<a class="loading-opts" href="playground.generated/index.html">[<< BACK]</a> <br/>
|
|
||||||
THIS IS A GENERATED FILE VIA `npm run simpleserver`
|
|
||||||
|
|
||||||
<div id="bar" style="margin-bottom: 6px;"></div>
|
|
||||||
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML START-->
|
|
||||||
|
|
||||||
<div id="container" style="height: 100%"></div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML END-->
|
|
||||||
</div>
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
|
|
||||||
<script src="../../metadata.js"></script>
|
|
||||||
<script src="dev-setup.js"></script>
|
|
||||||
<script>
|
|
||||||
loadEditor(function() {
|
|
||||||
/*----------------------------------------SAMPLE JS START*/
|
|
||||||
|
|
||||||
var jsCode = [
|
|
||||||
'"use strict";',
|
|
||||||
'function Person(age) {',
|
|
||||||
' if (age) {',
|
|
||||||
' this.age = age;',
|
|
||||||
' }',
|
|
||||||
'}',
|
|
||||||
'Person.prototype.getAge = function () {',
|
|
||||||
' return this.age;',
|
|
||||||
'};'
|
|
||||||
].join('\n');
|
|
||||||
|
|
||||||
var editor = monaco.editor.create(document.getElementById('container'), {
|
|
||||||
value: jsCode,
|
|
||||||
language: 'javascript'
|
|
||||||
});
|
|
||||||
|
|
||||||
var myCondition1 = editor.createContextKey(/*key name*/ 'myCondition1', /*default value*/ false);
|
|
||||||
var myCondition2 = editor.createContextKey(/*key name*/ 'myCondition2', /*default value*/ false);
|
|
||||||
|
|
||||||
editor.addCommand(
|
|
||||||
monaco.KeyCode.Tab,
|
|
||||||
function () {
|
|
||||||
// services available in `ctx`
|
|
||||||
alert('my command is executing!');
|
|
||||||
},
|
|
||||||
'myCondition1 && myCondition2'
|
|
||||||
);
|
|
||||||
|
|
||||||
myCondition1.set(true);
|
|
||||||
|
|
||||||
setTimeout(function () {
|
|
||||||
alert('now enabling also myCondition2, try pressing Tab!');
|
|
||||||
myCondition2.set(true);
|
|
||||||
// you can use myCondition2.reset() to go back to the default
|
|
||||||
}, 2000);
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE JS END*/
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,96 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<base href="..">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<style>
|
|
||||||
/*----------------------------------------SAMPLE CSS START*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE CSS END*/
|
|
||||||
</style>
|
|
||||||
<a class="loading-opts" href="playground.generated/index.html">[<< BACK]</a> <br/>
|
|
||||||
THIS IS A GENERATED FILE VIA `npm run simpleserver`
|
|
||||||
|
|
||||||
<div id="bar" style="margin-bottom: 6px;"></div>
|
|
||||||
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML START-->
|
|
||||||
|
|
||||||
<div id="container" style="height: 100%"></div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML END-->
|
|
||||||
</div>
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
|
|
||||||
<script src="../../metadata.js"></script>
|
|
||||||
<script src="dev-setup.js"></script>
|
|
||||||
<script>
|
|
||||||
loadEditor(function() {
|
|
||||||
/*----------------------------------------SAMPLE JS START*/
|
|
||||||
|
|
||||||
var editor = monaco.editor.create(document.getElementById('container'), {
|
|
||||||
value: [
|
|
||||||
'',
|
|
||||||
'class Example {',
|
|
||||||
'\tprivate m:number;',
|
|
||||||
'',
|
|
||||||
'\tpublic met(): string {',
|
|
||||||
'\t\treturn "Hello world!";',
|
|
||||||
'\t}',
|
|
||||||
'}'
|
|
||||||
].join('\n'),
|
|
||||||
language: 'typescript'
|
|
||||||
});
|
|
||||||
|
|
||||||
// Explanation:
|
|
||||||
// Press F1 => the action will appear and run if it is enabled
|
|
||||||
// Press Ctrl-F10 => the action will run if it is enabled
|
|
||||||
// Press Chord Ctrl-K, Ctrl-M => the action will run if it is enabled
|
|
||||||
|
|
||||||
editor.addAction({
|
|
||||||
// An unique identifier of the contributed action.
|
|
||||||
id: 'my-unique-id',
|
|
||||||
|
|
||||||
// A label of the action that will be presented to the user.
|
|
||||||
label: 'My Label!!!',
|
|
||||||
|
|
||||||
// An optional array of keybindings for the action.
|
|
||||||
keybindings: [
|
|
||||||
monaco.KeyMod.CtrlCmd | monaco.KeyCode.F10,
|
|
||||||
// chord
|
|
||||||
monaco.KeyMod.chord(
|
|
||||||
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyK,
|
|
||||||
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyM
|
|
||||||
)
|
|
||||||
],
|
|
||||||
|
|
||||||
// A precondition for this action.
|
|
||||||
precondition: null,
|
|
||||||
|
|
||||||
// A rule to evaluate on top of the precondition in order to dispatch the keybindings.
|
|
||||||
keybindingContext: null,
|
|
||||||
|
|
||||||
contextMenuGroupId: 'navigation',
|
|
||||||
|
|
||||||
contextMenuOrder: 1.5,
|
|
||||||
|
|
||||||
// Method that will be executed when the action is triggered.
|
|
||||||
// @param editor The editor instance is passed in as a convenience
|
|
||||||
run: function (ed) {
|
|
||||||
alert("i'm running => " + ed.getPosition());
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE JS END*/
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,69 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<base href="..">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<style>
|
|
||||||
/*----------------------------------------SAMPLE CSS START*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE CSS END*/
|
|
||||||
</style>
|
|
||||||
<a class="loading-opts" href="playground.generated/index.html">[<< BACK]</a> <br/>
|
|
||||||
THIS IS A GENERATED FILE VIA `npm run simpleserver`
|
|
||||||
|
|
||||||
<div id="bar" style="margin-bottom: 6px;"></div>
|
|
||||||
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML START-->
|
|
||||||
|
|
||||||
<div id="container" style="height: 100%"></div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML END-->
|
|
||||||
</div>
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
|
|
||||||
<script src="../../metadata.js"></script>
|
|
||||||
<script src="dev-setup.js"></script>
|
|
||||||
<script>
|
|
||||||
loadEditor(function() {
|
|
||||||
/*----------------------------------------SAMPLE JS START*/
|
|
||||||
|
|
||||||
function lineNumbersFunc(originalLineNumber) {
|
|
||||||
var map = ['O', 'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X'];
|
|
||||||
if (originalLineNumber < map.length) {
|
|
||||||
return map[originalLineNumber];
|
|
||||||
}
|
|
||||||
return originalLineNumber;
|
|
||||||
}
|
|
||||||
|
|
||||||
var jsCode = [
|
|
||||||
'"use strict";',
|
|
||||||
'function Person(age) {',
|
|
||||||
' if (age) {',
|
|
||||||
' this.age = age;',
|
|
||||||
' }',
|
|
||||||
'}',
|
|
||||||
'Person.prototype.getAge = function () {',
|
|
||||||
' return this.age;',
|
|
||||||
'};'
|
|
||||||
].join('\n');
|
|
||||||
|
|
||||||
var editor = monaco.editor.create(document.getElementById('container'), {
|
|
||||||
value: jsCode,
|
|
||||||
language: 'javascript',
|
|
||||||
lineNumbers: lineNumbersFunc
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE JS END*/
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,90 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<base href="..">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<style>
|
|
||||||
/*----------------------------------------SAMPLE CSS START*/
|
|
||||||
|
|
||||||
.myInlineDecoration {
|
|
||||||
color: red !important;
|
|
||||||
cursor: pointer;
|
|
||||||
text-decoration: underline;
|
|
||||||
font-weight: bold;
|
|
||||||
font-style: oblique;
|
|
||||||
}
|
|
||||||
|
|
||||||
.myLineDecoration {
|
|
||||||
background: lightblue;
|
|
||||||
width: 5px !important;
|
|
||||||
margin-left: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE CSS END*/
|
|
||||||
</style>
|
|
||||||
<a class="loading-opts" href="playground.generated/index.html">[<< BACK]</a> <br/>
|
|
||||||
THIS IS A GENERATED FILE VIA `npm run simpleserver`
|
|
||||||
|
|
||||||
<div id="bar" style="margin-bottom: 6px;"></div>
|
|
||||||
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML START-->
|
|
||||||
|
|
||||||
<div id="container" style="height: 100%"></div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML END-->
|
|
||||||
</div>
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
|
|
||||||
<script src="../../metadata.js"></script>
|
|
||||||
<script src="dev-setup.js"></script>
|
|
||||||
<script>
|
|
||||||
loadEditor(function() {
|
|
||||||
/*----------------------------------------SAMPLE JS START*/
|
|
||||||
|
|
||||||
var jsCode = [
|
|
||||||
'"use strict";',
|
|
||||||
'function Person(age) {',
|
|
||||||
' if (age) {',
|
|
||||||
' this.age = age;',
|
|
||||||
' }',
|
|
||||||
'}',
|
|
||||||
'Person.prototype.getAge = function () {',
|
|
||||||
' return this.age;',
|
|
||||||
'};'
|
|
||||||
].join('\n');
|
|
||||||
|
|
||||||
var editor = monaco.editor.create(document.getElementById('container'), {
|
|
||||||
value: jsCode,
|
|
||||||
language: 'javascript'
|
|
||||||
});
|
|
||||||
|
|
||||||
var decorations = editor.deltaDecorations(
|
|
||||||
[],
|
|
||||||
[
|
|
||||||
{
|
|
||||||
range: new monaco.Range(3, 1, 5, 1),
|
|
||||||
options: {
|
|
||||||
isWholeLine: true,
|
|
||||||
linesDecorationsClassName: 'myLineDecoration'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
range: new monaco.Range(7, 1, 7, 24),
|
|
||||||
options: { inlineClassName: 'myInlineDecoration' }
|
|
||||||
}
|
|
||||||
]
|
|
||||||
);
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE JS END*/
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,55 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<base href="..">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<style>
|
|
||||||
/*----------------------------------------SAMPLE CSS START*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE CSS END*/
|
|
||||||
</style>
|
|
||||||
<a class="loading-opts" href="playground.generated/index.html">[<< BACK]</a> <br/>
|
|
||||||
THIS IS A GENERATED FILE VIA `npm run simpleserver`
|
|
||||||
|
|
||||||
<div id="bar" style="margin-bottom: 6px;"></div>
|
|
||||||
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML START-->
|
|
||||||
|
|
||||||
<div id="container" style="height: 100%"></div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML END-->
|
|
||||||
</div>
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
|
|
||||||
<script src="../../metadata.js"></script>
|
|
||||||
<script src="dev-setup.js"></script>
|
|
||||||
<script>
|
|
||||||
loadEditor(function() {
|
|
||||||
/*----------------------------------------SAMPLE JS START*/
|
|
||||||
|
|
||||||
var editor = monaco.editor.create(document.getElementById('container'), {
|
|
||||||
value: "function hello() {\n\talert('Hello world!');\n}",
|
|
||||||
language: 'javascript'
|
|
||||||
});
|
|
||||||
|
|
||||||
var myBinding = editor.addCommand(monaco.KeyCode.F9, function () {
|
|
||||||
alert('F9 pressed!');
|
|
||||||
});
|
|
||||||
|
|
||||||
// You can't dispose `addCommand`
|
|
||||||
// If you need to dispose it you might use `addAction` or `registerCommand`
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE JS END*/
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,171 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<base href="..">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<style>
|
|
||||||
/*----------------------------------------SAMPLE CSS START*/
|
|
||||||
|
|
||||||
.myGlyphMarginClass {
|
|
||||||
background: red;
|
|
||||||
}
|
|
||||||
.myContentClass {
|
|
||||||
background: lightblue;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE CSS END*/
|
|
||||||
</style>
|
|
||||||
<a class="loading-opts" href="playground.generated/index.html">[<< BACK]</a> <br/>
|
|
||||||
THIS IS A GENERATED FILE VIA `npm run simpleserver`
|
|
||||||
|
|
||||||
<div id="bar" style="margin-bottom: 6px;"></div>
|
|
||||||
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML START-->
|
|
||||||
|
|
||||||
<div id="output" style="height: 29%; font-family: 'Courier New', monospace">
|
|
||||||
Last 3 events:<br />
|
|
||||||
</div>
|
|
||||||
<div style="background: #ccc; height: 1%"></div>
|
|
||||||
<div id="container" style="height: 70%"></div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML END-->
|
|
||||||
</div>
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
|
|
||||||
<script src="../../metadata.js"></script>
|
|
||||||
<script src="dev-setup.js"></script>
|
|
||||||
<script>
|
|
||||||
loadEditor(function() {
|
|
||||||
/*----------------------------------------SAMPLE JS START*/
|
|
||||||
|
|
||||||
var jsCode = [
|
|
||||||
'"use strict";',
|
|
||||||
'function Person(age) {',
|
|
||||||
' if (age) {',
|
|
||||||
' this.age = age;',
|
|
||||||
' }',
|
|
||||||
'}',
|
|
||||||
'Person.prototype.getAge = function () {',
|
|
||||||
' return this.age;',
|
|
||||||
'};'
|
|
||||||
].join('\n');
|
|
||||||
|
|
||||||
var editor = monaco.editor.create(document.getElementById('container'), {
|
|
||||||
value: jsCode,
|
|
||||||
language: 'javascript',
|
|
||||||
glyphMargin: true,
|
|
||||||
contextmenu: false
|
|
||||||
});
|
|
||||||
|
|
||||||
var decorations = editor.deltaDecorations(
|
|
||||||
[],
|
|
||||||
[
|
|
||||||
{
|
|
||||||
range: new monaco.Range(3, 1, 3, 1),
|
|
||||||
options: {
|
|
||||||
isWholeLine: true,
|
|
||||||
className: 'myContentClass',
|
|
||||||
glyphMarginClassName: 'myGlyphMarginClass'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
);
|
|
||||||
|
|
||||||
// Add a zone to make hit testing more interesting
|
|
||||||
var viewZoneId = null;
|
|
||||||
editor.changeViewZones(function (changeAccessor) {
|
|
||||||
var domNode = document.createElement('div');
|
|
||||||
domNode.style.background = 'lightgreen';
|
|
||||||
viewZoneId = changeAccessor.addZone({
|
|
||||||
afterLineNumber: 3,
|
|
||||||
heightInLines: 3,
|
|
||||||
domNode: domNode
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Add a content widget (scrolls inline with text)
|
|
||||||
var contentWidget = {
|
|
||||||
domNode: null,
|
|
||||||
getId: function () {
|
|
||||||
return 'my.content.widget';
|
|
||||||
},
|
|
||||||
getDomNode: function () {
|
|
||||||
if (!this.domNode) {
|
|
||||||
this.domNode = document.createElement('div');
|
|
||||||
this.domNode.innerHTML = 'My content widget';
|
|
||||||
this.domNode.style.background = 'grey';
|
|
||||||
}
|
|
||||||
return this.domNode;
|
|
||||||
},
|
|
||||||
getPosition: function () {
|
|
||||||
return {
|
|
||||||
position: {
|
|
||||||
lineNumber: 7,
|
|
||||||
column: 8
|
|
||||||
},
|
|
||||||
preference: [
|
|
||||||
monaco.editor.ContentWidgetPositionPreference.ABOVE,
|
|
||||||
monaco.editor.ContentWidgetPositionPreference.BELOW
|
|
||||||
]
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
editor.addContentWidget(contentWidget);
|
|
||||||
|
|
||||||
// Add an overlay widget
|
|
||||||
var overlayWidget = {
|
|
||||||
domNode: null,
|
|
||||||
getId: function () {
|
|
||||||
return 'my.overlay.widget';
|
|
||||||
},
|
|
||||||
getDomNode: function () {
|
|
||||||
if (!this.domNode) {
|
|
||||||
this.domNode = document.createElement('div');
|
|
||||||
this.domNode.innerHTML = 'My overlay widget';
|
|
||||||
this.domNode.style.background = 'grey';
|
|
||||||
this.domNode.style.right = '30px';
|
|
||||||
this.domNode.style.top = '50px';
|
|
||||||
}
|
|
||||||
return this.domNode;
|
|
||||||
},
|
|
||||||
getPosition: function () {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
editor.addOverlayWidget(overlayWidget);
|
|
||||||
|
|
||||||
var output = document.getElementById('output');
|
|
||||||
function showEvent(str) {
|
|
||||||
while (output.childNodes.length > 6) {
|
|
||||||
output.removeChild(output.firstChild.nextSibling.nextSibling);
|
|
||||||
}
|
|
||||||
output.appendChild(document.createTextNode(str));
|
|
||||||
output.appendChild(document.createElement('br'));
|
|
||||||
}
|
|
||||||
|
|
||||||
editor.onMouseMove(function (e) {
|
|
||||||
showEvent('mousemove - ' + e.target.toString());
|
|
||||||
});
|
|
||||||
editor.onMouseDown(function (e) {
|
|
||||||
showEvent('mousedown - ' + e.target.toString());
|
|
||||||
});
|
|
||||||
editor.onContextMenu(function (e) {
|
|
||||||
showEvent('contextmenu - ' + e.target.toString());
|
|
||||||
});
|
|
||||||
editor.onMouseLeave(function (e) {
|
|
||||||
showEvent('mouseleave');
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE JS END*/
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,83 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<base href="..">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<style>
|
|
||||||
/*----------------------------------------SAMPLE CSS START*/
|
|
||||||
|
|
||||||
.myGlyphMarginClass {
|
|
||||||
background: red;
|
|
||||||
}
|
|
||||||
.myContentClass {
|
|
||||||
background: lightblue;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE CSS END*/
|
|
||||||
</style>
|
|
||||||
<a class="loading-opts" href="playground.generated/index.html">[<< BACK]</a> <br/>
|
|
||||||
THIS IS A GENERATED FILE VIA `npm run simpleserver`
|
|
||||||
|
|
||||||
<div id="bar" style="margin-bottom: 6px;"></div>
|
|
||||||
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML START-->
|
|
||||||
|
|
||||||
<div id="container" style="height: 100%"></div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML END-->
|
|
||||||
</div>
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
|
|
||||||
<script src="../../metadata.js"></script>
|
|
||||||
<script src="dev-setup.js"></script>
|
|
||||||
<script>
|
|
||||||
loadEditor(function() {
|
|
||||||
/*----------------------------------------SAMPLE JS START*/
|
|
||||||
|
|
||||||
var jsCode = [
|
|
||||||
'"use strict";',
|
|
||||||
'function Person(age) {',
|
|
||||||
' if (age) {',
|
|
||||||
' this.age = age;',
|
|
||||||
' }',
|
|
||||||
'}',
|
|
||||||
'Person.prototype.getAge = function () {',
|
|
||||||
' return this.age;',
|
|
||||||
'};'
|
|
||||||
].join('\n');
|
|
||||||
|
|
||||||
var editor = monaco.editor.create(document.getElementById('container'), {
|
|
||||||
value: jsCode,
|
|
||||||
language: 'javascript',
|
|
||||||
glyphMargin: true
|
|
||||||
});
|
|
||||||
|
|
||||||
var decorations = editor.deltaDecorations(
|
|
||||||
[],
|
|
||||||
[
|
|
||||||
{
|
|
||||||
range: new monaco.Range(3, 1, 3, 1),
|
|
||||||
options: {
|
|
||||||
isWholeLine: true,
|
|
||||||
className: 'myContentClass',
|
|
||||||
glyphMarginClassName: 'myGlyphMarginClass'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
);
|
|
||||||
|
|
||||||
// You can now use `decorations` to change or remove the decoration
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE JS END*/
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,85 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!-- THIS IS A GENERATED FILE VIA `npm run simpleserver` -->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<base href="..">
|
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<style>
|
|
||||||
/*----------------------------------------SAMPLE CSS START*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE CSS END*/
|
|
||||||
</style>
|
|
||||||
<a class="loading-opts" href="playground.generated/index.html">[<< BACK]</a> <br/>
|
|
||||||
THIS IS A GENERATED FILE VIA `npm run simpleserver`
|
|
||||||
|
|
||||||
<div id="bar" style="margin-bottom: 6px;"></div>
|
|
||||||
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
<div id="outer-container" style="width:800px;height:450px;border: 1px solid grey">
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML START-->
|
|
||||||
|
|
||||||
<div id="container" style="height: 100%"></div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ----------------------------------------SAMPLE HTML END-->
|
|
||||||
</div>
|
|
||||||
<div style="clear:both"></div>
|
|
||||||
|
|
||||||
<script src="../../metadata.js"></script>
|
|
||||||
<script src="dev-setup.js"></script>
|
|
||||||
<script>
|
|
||||||
loadEditor(function() {
|
|
||||||
/*----------------------------------------SAMPLE JS START*/
|
|
||||||
|
|
||||||
var jsCodeArr = [
|
|
||||||
'// ------------------------------',
|
|
||||||
'// ------------------------------',
|
|
||||||
'function Person(age) {',
|
|
||||||
' if (age) {',
|
|
||||||
' this.age = age;',
|
|
||||||
' }',
|
|
||||||
'}',
|
|
||||||
'Person.prototype.getAge = function () {',
|
|
||||||
' return this.age;',
|
|
||||||
'};',
|
|
||||||
'',
|
|
||||||
''
|
|
||||||
];
|
|
||||||
|
|
||||||
jsCodeArr = jsCodeArr.concat(jsCodeArr.slice(0));
|
|
||||||
jsCodeArr = jsCodeArr.concat(jsCodeArr.slice(0));
|
|
||||||
jsCodeArr = jsCodeArr.concat(jsCodeArr.slice(0));
|
|
||||||
|
|
||||||
jsCodeArr[49] +=
|
|
||||||
'And this is some long line. And this is some long line. And this is some long line. And this is some long line. And this is some long line. ';
|
|
||||||
|
|
||||||
var editor = monaco.editor.create(document.getElementById('container'), {
|
|
||||||
value: jsCodeArr.join('\n'),
|
|
||||||
language: 'javascript'
|
|
||||||
});
|
|
||||||
|
|
||||||
editor.revealPositionInCenter({ lineNumber: 50, column: 120 });
|
|
||||||
// Also see:
|
|
||||||
// - editor.revealLine
|
|
||||||
// - editor.revealLineInCenter
|
|
||||||
// - editor.revealLineInCenterIfOutsideViewport
|
|
||||||
// - editor.revealLines
|
|
||||||
// - editor.revealLinesInCenter
|
|
||||||
// - editor.revealLinesInCenterIfOutsideViewport
|
|
||||||
// - editor.revealPosition
|
|
||||||
// - editor.revealPositionInCenter
|
|
||||||
// - editor.revealPositionInCenterIfOutsideViewport
|
|
||||||
// - editor.revealRange
|
|
||||||
// - editor.revealRangeInCenter
|
|
||||||
// - editor.revealRangeInCenterIfOutsideViewport
|
|
||||||
|
|
||||||
|
|
||||||
/*----------------------------------------SAMPLE JS END*/
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue