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

Extract playground samples from mdoc, add possiblity to run them from source

Browse source
This commit is contained in:
Alex Dima 2016-09-06 12:34:53 +02:00
parent df6136ea12
commit 5b86272f55
103 changed files with 3126 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

5
test/dev-setup.js
View file

@ -8,6 +8,11 @@
port = ':' + port; port = ':' + port;
} }
DIRNAME = window.location.protocol + '//' + window.location.hostname + port + window.location.pathname.substr(0, window.location.pathname.lastIndexOf('/')); DIRNAME = window.location.protocol + '//' + window.location.hostname + port + window.location.pathname.substr(0, window.location.pathname.lastIndexOf('/'));
var bases = document.getElementsByTagName('base');
if (bases.length > 0) {
DIRNAME = DIRNAME + '/' + bases[0].getAttribute('href');
}
} }

4
test/index.html
View file

@ -7,11 +7,11 @@
</head> </head>
<body> <body>
<h2>Monaco Editor (running from multiple sources)</h2>
Jump to: Jump to:
<a href="./smoketest.html?editor=releaseMin">[SMOKETEST]</a> <a href="./smoketest.html?editor=releaseMin">[SMOKETEST]</a>
&nbsp;|&nbsp; &nbsp;|&nbsp;
<a href="./playground.generated/index.html">[PLAYGROUND]</a>
&nbsp;|&nbsp;
<a href="./mouse-fixed.html">[fixed element]</a> <a href="./mouse-fixed.html">[fixed element]</a>
&nbsp;|&nbsp; &nbsp;|&nbsp;
<a href="./mouse-scrollable-body.html">[scrollable body]</a> <a href="./mouse-scrollable-body.html">[scrollable body]</a>

53
test/playground.generated/creating-the-diffeditor-hello-diff-world.html Normal file
View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples -->
<html>
<head>
<base href="..">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<style>
/*----------------------------------------SAMPLE CSS START*/
/*----------------------------------------SAMPLE CSS END*/
</style>
<a href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
THIS IS A GENERATED FILE VIA gulp generate-test-samples
<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 CSS END*/
});
</script>
</body>
</html>

59
test/playground.generated/creating-the-diffeditor-inline-diff-example.html Normal file
View file

@ -0,0 +1,59 @@
<!DOCTYPE html>
<!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples -->
<html>
<head>
<base href="..">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<style>
/*----------------------------------------SAMPLE CSS START*/
/*----------------------------------------SAMPLE CSS END*/
</style>
<a href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
THIS IS A GENERATED FILE VIA gulp generate-test-samples
<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 CSS END*/
});
</script>
</body>
</html>

56
test/playground.generated/creating-the-diffeditor-multi-line-example.html Normal file
View file

@ -0,0 +1,56 @@
<!DOCTYPE html>
<!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples -->
<html>
<head>
<base href="..">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<style>
/*----------------------------------------SAMPLE CSS START*/
/*----------------------------------------SAMPLE CSS END*/
</style>
<a href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
THIS IS A GENERATED FILE VIA gulp generate-test-samples
<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 CSS END*/
});
</script>
</body>
</html>

64
test/playground.generated/creating-the-diffeditor-navigating-a-diff.html Normal file
View file

@ -0,0 +1,64 @@
<!DOCTYPE html>
<!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples -->
<html>
<head>
<base href="..">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<style>
/*----------------------------------------SAMPLE CSS START*/
/*----------------------------------------SAMPLE CSS END*/
</style>
<a href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
THIS IS A GENERATED FILE VIA gulp generate-test-samples
<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 CSS END*/
});
</script>
</body>
</html>

64
test/playground.generated/creating-the-editor-editor-basic-options.html Normal file
View file

@ -0,0 +1,64 @@
<!DOCTYPE html>
<!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples -->
<html>
<head>
<base href="..">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<style>
/*----------------------------------------SAMPLE CSS START*/
/*----------------------------------------SAMPLE CSS END*/
</style>
<a href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
THIS IS A GENERATED FILE VIA gulp generate-test-samples
<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: false,
roundedSelection: false,
scrollBeyondLastLine: false,
readOnly: false,
theme: "vs-dark",
});
setTimeout(function() {
editor.updateOptions({
lineNumbers: true
});
}, 2000);
/*----------------------------------------SAMPLE CSS END*/
});
</script>
</body>
</html>

62
test/playground.generated/creating-the-editor-hard-wrapping.html Normal file
View file

File diff suppressed because one or more lines are too long

54
test/playground.generated/creating-the-editor-hello-world.html Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE html>
<!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples -->
<html>
<head>
<base href="..">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<style>
/*----------------------------------------SAMPLE CSS START*/
/*----------------------------------------SAMPLE CSS END*/
</style>
<a href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
THIS IS A GENERATED FILE VIA gulp generate-test-samples
<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 CSS END*/
});
</script>
</body>
</html>

84
test/playground.generated/creating-the-editor-syntax-highlighting-for-html-elements.html Normal file
View file

@ -0,0 +1,84 @@
<!DOCTYPE html>
<!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples -->
<html>
<head>
<base href="..">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<style>
/*----------------------------------------SAMPLE CSS START*/
/*----------------------------------------SAMPLE CSS END*/
</style>
<a href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
THIS IS A GENERATED FILE VIA gulp generate-test-samples
<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 CSS END*/
});
</script>
</body>
</html>

84
test/playground.generated/customizing-the-appearence-exposed-css-classes.html Normal file
View file

@ -0,0 +1,84 @@
<!DOCTYPE html>
<!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples -->
<html>
<head>
<base href="..">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<style>
/*----------------------------------------SAMPLE CSS START*/
.monaco-editor, .monaco-editor-background {
background: #EDF9FA;
}
/* Cursor */
.monaco-editor .cursor {
background: darkred !important;
}
/* Current line */
.monaco-editor .current-line {
background: rgba(0, 0, 255, 0.1);
}
/* Line Numbers */
.monaco-editor .line-numbers {
background-color: #EDF9FA;
color: green;
}
/* Line Decorations */
.monaco-editor .lines-decorations {
background-color: #EDF9FA;
}
/* Selection */
.monaco-editor .view-overlays.focused .selected-text {
background: rgba(128, 0, 0, 0.2) !important;
}
.monaco-editor .view-overlays .selected-text {
background: rgba(128, 0, 0, 0.1) !important;
}
/*----------------------------------------SAMPLE CSS END*/
</style>
<a href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
THIS IS A GENERATED FILE VIA gulp generate-test-samples
<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 exposes a set of CSS classes that can be overwritten.
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
});
/*----------------------------------------SAMPLE CSS END*/
});
</script>
</body>
</html>

85
test/playground.generated/customizing-the-appearence-scrollbars.html Normal file
View file

@ -0,0 +1,85 @@
<!DOCTYPE html>
<!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples -->
<html>
<head>
<base href="..">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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 href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
THIS IS A GENERATED FILE VIA gulp generate-test-samples
<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 CSS END*/
});
</script>
</body>
</html>

63
test/playground.generated/customizing-the-appearence-tokens-and-colors.html Normal file
View file

@ -0,0 +1,63 @@
<!DOCTYPE html>
<!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples -->
<html>
<head>
<base href="..">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<style>
/*----------------------------------------SAMPLE CSS START*/
/*
These rules customize the "Visual Studio" (vs) theme.
Token names can be discovered by:
a) exploring the .css theme files that come with the editor;
b) inspecting the dom elements rendered by the editor;
*/
.monaco-editor.vs .token.comment { color: orange; }
.monaco-editor.vs .token.comment.js { color: green; }
.monaco-editor.vs .token.comment.css { color: blue; }
/*----------------------------------------SAMPLE CSS END*/
</style>
<a href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
THIS IS A GENERATED FILE VIA gulp generate-test-samples
<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*/
// This example shows how to integrate the editor with a certain theme and then customize the token colors of that theme.
var htmlCode = "<html>\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"
});
/*----------------------------------------SAMPLE CSS END*/
});
</script>
</body>
</html>

85
test/playground.generated/extending-language-services-completion-provider-example.html Normal file
View file

@ -0,0 +1,85 @@
<!DOCTYPE html>
<!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples -->
<html>
<head>
<base href="..">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<style>
/*----------------------------------------SAMPLE CSS START*/
/*----------------------------------------SAMPLE CSS END*/
</style>
<a href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
THIS IS A GENERATED FILE VIA gulp generate-test-samples
<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() {
// 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": "*"'
},
{
label: '"express"',
kind: monaco.languages.CompletionItemKind.Function,
documentation: "Fast, unopinionated, minimalist web framework",
insertText: '"express": "*"'
},
{
label: '"mkdirp"',
kind: monaco.languages.CompletionItemKind.Function,
documentation: "Recursively mkdir, like <code>mkdir -p</code>",
insertText: '"mkdirp": "*"'
}
];
}
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 createDependencyProposals();
}
return [];
}
});
monaco.editor.create(document.getElementById("container"), {
value: "{\n\t\"dependencies\": {\n\t\t\n\t}\n}\n",
language: "json"
});
/*----------------------------------------SAMPLE CSS END*/
});
</script>
</body>
</html>

85
test/playground.generated/extending-language-services-configure-javascript-defaults.html Normal file
View file

@ -0,0 +1,85 @@
<!DOCTYPE html>
<!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples -->
<html>
<head>
<base href="..">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<style>
/*----------------------------------------SAMPLE CSS START*/
/*----------------------------------------SAMPLE CSS END*/
</style>
<a href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
THIS IS A GENERATED FILE VIA gulp generate-test-samples
<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 additonal 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
monaco.languages.typescript.javascriptDefaults.addExtraLib([
'declare class Facts {',
' /**',
' * Returns the next fact',
' */',
' static next():string',
'}',
].join('\n'), 'filename/facts.d.ts');
var jsCode = [
'"use strict";',
'',
"class Chuck {",
" greet() {",
" return Facts.next();",
" }",
"}"
].join('\n');
monaco.editor.create(document.getElementById("container"), {
value: jsCode,
language: "javascript"
});
/*----------------------------------------SAMPLE CSS END*/
});
</script>
</body>
</html>

84
test/playground.generated/extending-language-services-configure-json-defaults.html Normal file
View file

@ -0,0 +1,84 @@
<!DOCTYPE html>
<!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples -->
<html>
<head>
<base href="..">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<style>
/*----------------------------------------SAMPLE CSS START*/
/*----------------------------------------SAMPLE CSS END*/
</style>
<a href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
THIS IS A GENERATED FILE VIA gulp generate-test-samples
<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.
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
schemas: [{
uri: "http://myserver/foo-schema.json",
schema: {
type: "object",
properties: {
p1: {
enum: [ "v1", "v2"]
},
p2: {
$ref: "http://myserver/bar-schema.json"
}
}
}
},{
uri: "http://myserver/bar-schema.json",
schema: {
type: "object",
properties: {
q1: {
enum: [ "x1", "x2"]
}
}
}
}]
});
var jsonCode = [
'{',
' "$schema": "http://myserver/foo-schema.json"',
"}"
].join('\n');
monaco.editor.create(document.getElementById("container"), {
value: jsonCode,
language: "json"
});
/*----------------------------------------SAMPLE CSS END*/
});
</script>
</body>
</html>

159
test/playground.generated/extending-language-services-custom-languages.html Normal file
View file

@ -0,0 +1,159 @@
<!DOCTYPE html>
<!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples -->
<html>
<head>
<base href="..">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<style>
/*----------------------------------------SAMPLE CSS START*/
.monaco-editor .token.custom-info {
color: grey;
}
.monaco-editor .token.custom-error {
color: red;
font-weight: bold;
font-size: 1.2em;
}
.monaco-editor .token.custom-notice {
color: orange;
}
.monaco-editor .token.custom-date {
color: green;
}
/*----------------------------------------SAMPLE CSS END*/
</style>
<a href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
THIS IS A GENERATED FILE VIA gulp generate-test-samples
<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.setMonarchTokensProvider('mySpecialLanguage', {
tokenizer: {
root: [
[/\[error.*/, "custom-error"],
[/\[notice.*/, "custom-notice"],
[/\[info.*/, "custom-info"],
[/\[[a-zA-Z 0-9:]+\]/, "custom-date"],
]
}
});
monaco.languages.registerCompletionItemProvider('mySpecialLanguage', {
provideCompletionItems: () => {
return [
{
label: 'simpleText',
kind: monaco.languages.CompletionItemKind.Text
}, {
label: 'testing',
kind: monaco.languages.CompletionItemKind.Keyword,
insertText:'testing({{condition}})'
},
{
label: 'ifelse',
kind: monaco.languages.CompletionItemKind.Snippet,
insertText: [
'if ({{condition}}) {',
'\t{{}}',
'} else {',
'\t',
'}'
].join('\n'),
documentation: 'If-Else Statement'
}
]
}
});
monaco.editor.create(document.getElementById("container"), {
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 CSS END*/
});
</script>
</body>
</html>

95
test/playground.generated/extending-language-services-hover-provider-example.html Normal file
View file

@ -0,0 +1,95 @@
<!DOCTYPE html>
<!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples -->
<html>
<head>
<base href="..">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<style>
/*----------------------------------------SAMPLE CSS START*/
/*----------------------------------------SAMPLE CSS END*/
</style>
<a href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
THIS IS A GENERATED FILE VIA gulp generate-test-samples
<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: [
'**SOURCE**',
{ language: 'html', value: res.responseText.substring(0, 200) }
]
}
});
}
});
monaco.editor.create(document.getElementById("container"), {
value: '\n\nHover over this text',
language: 'mySpecialLanguage'
});
function xhr(url) {
var req = null;
return new monaco.Promise(function(c,e,p) {
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 () { };
} else {
p(req);
}
};
req.open("GET", url, true );
req.responseType = "";
req.send(null);
}, function () {
req._canceled = true;
req.abort();
});
}
/*----------------------------------------SAMPLE CSS END*/
});
</script>
</body>
</html>

34
test/playground.generated/index.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples -->
<html>
<head>
</head>
<body>
<a href="../index.html">[&lt;&lt; BACK]</a><br/>
THIS IS A GENERATED FILE VIA gulp generate-test-samples<br/><br/>
<a href="creating-the-editor-hello-world.html">Creating the editor &gt; Hello world!</a><br/>
<a href="creating-the-editor-editor-basic-options.html">Creating the editor &gt; Editor basic options</a><br/>
<a href="creating-the-editor-hard-wrapping.html">Creating the editor &gt; Hard wrapping</a><br/>
<a href="creating-the-editor-syntax-highlighting-for-html-elements.html">Creating the editor &gt; Syntax highlighting for HTML elements</a><br/>
<a href="interacting-with-the-editor-adding-a-command-to-an-editor-instance.html">Interacting with the editor &gt; Adding a command to an editor instance</a><br/>
<a href="interacting-with-the-editor-adding-an-action-to-an-editor-instance.html">Interacting with the editor &gt; Adding an action to an editor instance</a><br/>
<a href="interacting-with-the-editor-revealing-a-position.html">Interacting with the editor &gt; Revealing a position</a><br/>
<a href="interacting-with-the-editor-rendering-glyphs-in-the-margin.html">Interacting with the editor &gt; Rendering glyphs in the margin</a><br/>
<a href="interacting-with-the-editor-line-and-inline-decorations.html">Interacting with the editor &gt; Line and Inline decorations</a><br/>
<a href="interacting-with-the-editor-customizing-the-line-numbers.html">Interacting with the editor &gt; Customizing the line numbers</a><br/>
<a href="interacting-with-the-editor-listening-to-mouse-events.html">Interacting with the editor &gt; Listening to mouse events</a><br/>
<a href="interacting-with-the-editor-listening-to-key-events.html">Interacting with the editor &gt; Listening to key events</a><br/>
<a href="customizing-the-appearence-exposed-css-classes.html">Customizing the appearence &gt; Exposed CSS classes</a><br/>
<a href="customizing-the-appearence-scrollbars.html">Customizing the appearence &gt; Scrollbars</a><br/>
<a href="customizing-the-appearence-tokens-and-colors.html">Customizing the appearence &gt; Tokens and colors</a><br/>
<a href="creating-the-diffeditor-hello-diff-world.html">Creating the DiffEditor &gt; Hello diff world!</a><br/>
<a href="creating-the-diffeditor-multi-line-example.html">Creating the DiffEditor &gt; Multi-line example</a><br/>
<a href="creating-the-diffeditor-inline-diff-example.html">Creating the DiffEditor &gt; Inline Diff Example</a><br/>
<a href="creating-the-diffeditor-navigating-a-diff.html">Creating the DiffEditor &gt; Navigating a Diff</a><br/>
<a href="extending-language-services-custom-languages.html">Extending Language Services &gt; Custom languages</a><br/>
<a href="extending-language-services-completion-provider-example.html">Extending Language Services &gt; Completion provider example</a><br/>
<a href="extending-language-services-hover-provider-example.html">Extending Language Services &gt; Hover provider example</a><br/>
<a href="extending-language-services-configure-javascript-defaults.html">Extending Language Services &gt; Configure JavaScript defaults</a><br/>
<a href="extending-language-services-configure-json-defaults.html">Extending Language Services &gt; Configure JSON defaults</a>
</body>
</html>

77
test/playground.generated/interacting-with-the-editor-adding-a-command-to-an-editor-instance.html Normal file
View file

@ -0,0 +1,77 @@
<!DOCTYPE html>
<!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples -->
<html>
<head>
<base href="..">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<style>
/*----------------------------------------SAMPLE CSS START*/
/*----------------------------------------SAMPLE CSS END*/
</style>
<a href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
THIS IS A GENERATED FILE VIA gulp generate-test-samples
<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 CSS END*/
});
</script>
</body>
</html>

119
test/playground.generated/interacting-with-the-editor-adding-an-action-to-an-editor-instance.html Normal file
View file

@ -0,0 +1,119 @@
<!DOCTYPE html>
<!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples -->
<html>
<head>
<base href="..">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<style>
/*----------------------------------------SAMPLE CSS START*/
/*----------------------------------------SAMPLE CSS END*/
</style>
<a href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
THIS IS A GENERATED FILE VIA gulp generate-test-samples
<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:
// Try right clicking on an identifier or keyword => the action will be enabled (due to `tokensAtPosition`)
// Try right clicking on a string => the action will be disabled (due to `tokensAtPosition`)
// Try right clicking on whitespace => the action will be disabled (due to `wordAtPosition`)
// Press F1 (Alt-F1 in IE) => the action will appear and run if it is enabled
// Press Ctrl-F10 => 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],
keybindingContext: null,
// Control if the action should show up in the context menu and where.
// Built-in groups:
// 1_goto/* => e.g. 1_goto/1_peekDefinition
// 2_change/* => e.g. 2_change/2_format
// 3_edit/* => e.g. 3_edit/1_copy
// 4_tools/* => e.g. 4_tools/1_commands
// You can also create your own group.
// Defaults to null (don't show in context menu).
contextMenuGroupId: '2_change/2_bla',
// Method that will be executed when the action is triggered.
// @param editor The editor instance is passed in as a convinience
run: function(ed) {
alert("i'm running => " + ed.getPosition());
return null;
},
// Optional enablement conditions. All members are optional
enablement: {
// The action is enabled only if text in the editor is focused (e.g. blinking cursor).
// Warning: This condition will be disabled if the action is marked to be displayed in the context menu
// Defaults to false.
textFocus: true,
// The action is enabled only if the editor or its widgets have focus (e.g. focus is in find widget).
// Defaults to false.
//widgetFocus: true,
// The action is enabled only if the editor is not in read only mode.
// Defaults to false.
//writeableEditor: true,
// The action is enabled only if the cursor position is over a word (i.e. not whitespace).
// Defaults to false.
wordAtPosition: true,
// The action is enabled only if the cursor position is over tokens of a certain kind.
// Defaults to no tokens required.
tokensAtPosition: ['identifier', '', 'keyword'],
}
});
/*----------------------------------------SAMPLE CSS END*/
});
</script>
</body>
</html>

71
test/playground.generated/interacting-with-the-editor-customizing-the-line-numbers.html Normal file
View file

@ -0,0 +1,71 @@
<!DOCTYPE html>
<!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples -->
<html>
<head>
<base href="..">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<style>
/*----------------------------------------SAMPLE CSS START*/
/*----------------------------------------SAMPLE CSS END*/
</style>
<a href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
THIS IS A GENERATED FILE VIA gulp generate-test-samples
<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 CSS END*/
});
</script>
</body>
</html>

78
test/playground.generated/interacting-with-the-editor-line-and-inline-decorations.html Normal file
View file

@ -0,0 +1,78 @@
<!DOCTYPE html>
<!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples -->
<html>
<head>
<base href="..">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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;
left: 3px;
}
/*----------------------------------------SAMPLE CSS END*/
</style>
<a href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
THIS IS A GENERATED FILE VIA gulp generate-test-samples
<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 CSS END*/
});
</script>
</body>
</html>

56
test/playground.generated/interacting-with-the-editor-listening-to-key-events.html Normal file
View file

@ -0,0 +1,56 @@
<!DOCTYPE html>
<!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples -->
<html>
<head>
<base href="..">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<style>
/*----------------------------------------SAMPLE CSS START*/
/*----------------------------------------SAMPLE CSS END*/
</style>
<a href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
THIS IS A GENERATED FILE VIA gulp generate-test-samples
<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!');
});
// When cleaning up remember to call myBinding.dispose()
/*----------------------------------------SAMPLE CSS END*/
});
</script>
</body>
</html>

166
test/playground.generated/interacting-with-the-editor-listening-to-mouse-events.html Normal file
View file

@ -0,0 +1,166 @@
<!DOCTYPE html>
<!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples -->
<html>
<head>
<base href="..">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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 href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
THIS IS A GENERATED FILE VIA gulp generate-test-samples
<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,
nativeContextMenu: 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 CSS END*/
});
</script>
</body>
</html>

81
test/playground.generated/interacting-with-the-editor-rendering-glyphs-in-the-margin.html Normal file
View file

@ -0,0 +1,81 @@
<!DOCTYPE html>
<!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples -->
<html>
<head>
<base href="..">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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 href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
THIS IS A GENERATED FILE VIA gulp generate-test-samples
<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 CSS END*/
});
</script>
</body>
</html>

85
test/playground.generated/interacting-with-the-editor-revealing-a-position.html Normal file
View file

@ -0,0 +1,85 @@
<!DOCTYPE html>
<!-- THIS IS A GENERATED FILE VIA gulp generate-test-samples -->
<html>
<head>
<base href="..">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<style>
/*----------------------------------------SAMPLE CSS START*/
/*----------------------------------------SAMPLE CSS END*/
</style>
<a href="playground.generated/index.html">[&lt;&lt; BACK]</a> <br/>
THIS IS A GENERATED FILE VIA gulp generate-test-samples
<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 CSS END*/
});
</script>
</body>
</html>

1
website/monarch.html
View file

@ -4304,7 +4304,6 @@ return {
} }
}); });
</script> </script>
<!--<script type="text/javascript" src="./playground/samples/all.js"></script>-->
<script type="text/javascript" src="./monarch/monarch.js"></script> <script type="text/javascript" src="./monarch/monarch.js"></script>
</body> </body>
</html> </html>

2
website/playground.html
View file

@ -74,7 +74,7 @@
} }
}); });
</script> </script>
<script type="text/javascript" src="./playground/samples/all.js"></script> <script type="text/javascript" src="./playground/new-samples/all.js"></script>
<script type="text/javascript" src="./playground/playground.js"></script> <script type="text/javascript" src="./playground/playground.js"></script>
</body> </body>
</html> </html>

156
website/playground/new-samples/all.js Normal file
View file

@ -0,0 +1,156 @@
(function() {
var PLAY_SAMPLES = [
{
chapter: "Creating the editor",
name: "Hello world!",
id: "creating-the-editor-hello-world",
path: "creating-the-editor/hello-world"
},
{
chapter: "Creating the editor",
name: "Editor basic options",
id: "creating-the-editor-editor-basic-options",
path: "creating-the-editor/editor-basic-options"
},
{
chapter: "Creating the editor",
name: "Hard wrapping",
id: "creating-the-editor-hard-wrapping",
path: "creating-the-editor/hard-wrapping"
},
{
chapter: "Creating the editor",
name: "Syntax highlighting for HTML elements",
id: "creating-the-editor-syntax-highlighting-for-html-elements",
path: "creating-the-editor/syntax-highlighting-for-html-elements"
},
{
chapter: "Interacting with the editor",
name: "Adding a command to an editor instance",
id: "interacting-with-the-editor-adding-a-command-to-an-editor-instance",
path: "interacting-with-the-editor/adding-a-command-to-an-editor-instance"
},
{
chapter: "Interacting with the editor",
name: "Adding an action to an editor instance",
id: "interacting-with-the-editor-adding-an-action-to-an-editor-instance",
path: "interacting-with-the-editor/adding-an-action-to-an-editor-instance"
},
{
chapter: "Interacting with the editor",
name: "Revealing a position",
id: "interacting-with-the-editor-revealing-a-position",
path: "interacting-with-the-editor/revealing-a-position"
},
{
chapter: "Interacting with the editor",
name: "Rendering glyphs in the margin",
id: "interacting-with-the-editor-rendering-glyphs-in-the-margin",
path: "interacting-with-the-editor/rendering-glyphs-in-the-margin"
},
{
chapter: "Interacting with the editor",
name: "Line and Inline decorations",
id: "interacting-with-the-editor-line-and-inline-decorations",
path: "interacting-with-the-editor/line-and-inline-decorations"
},
{
chapter: "Interacting with the editor",
name: "Customizing the line numbers",
id: "interacting-with-the-editor-customizing-the-line-numbers",
path: "interacting-with-the-editor/customizing-the-line-numbers"
},
{
chapter: "Interacting with the editor",
name: "Listening to mouse events",
id: "interacting-with-the-editor-listening-to-mouse-events",
path: "interacting-with-the-editor/listening-to-mouse-events"
},
{
chapter: "Interacting with the editor",
name: "Listening to key events",
id: "interacting-with-the-editor-listening-to-key-events",
path: "interacting-with-the-editor/listening-to-key-events"
},
{
chapter: "Customizing the appearence",
name: "Exposed CSS classes",
id: "customizing-the-appearence-exposed-css-classes",
path: "customizing-the-appearence/exposed-css-classes"
},
{
chapter: "Customizing the appearence",
name: "Scrollbars",
id: "customizing-the-appearence-scrollbars",
path: "customizing-the-appearence/scrollbars"
},
{
chapter: "Customizing the appearence",
name: "Tokens and colors",
id: "customizing-the-appearence-tokens-and-colors",
path: "customizing-the-appearence/tokens-and-colors"
},
{
chapter: "Creating the DiffEditor",
name: "Hello diff world!",
id: "creating-the-diffeditor-hello-diff-world",
path: "creating-the-diffeditor/hello-diff-world"
},
{
chapter: "Creating the DiffEditor",
name: "Multi-line example",
id: "creating-the-diffeditor-multi-line-example",
path: "creating-the-diffeditor/multi-line-example"
},
{
chapter: "Creating the DiffEditor",
name: "Inline Diff Example",
id: "creating-the-diffeditor-inline-diff-example",
path: "creating-the-diffeditor/inline-diff-example"
},
{
chapter: "Creating the DiffEditor",
name: "Navigating a Diff",
id: "creating-the-diffeditor-navigating-a-diff",
path: "creating-the-diffeditor/navigating-a-diff"
},
{
chapter: "Extending Language Services",
name: "Custom languages",
id: "extending-language-services-custom-languages",
path: "extending-language-services/custom-languages"
},
{
chapter: "Extending Language Services",
name: "Completion provider example",
id: "extending-language-services-completion-provider-example",
path: "extending-language-services/completion-provider-example"
},
{
chapter: "Extending Language Services",
name: "Hover provider example",
id: "extending-language-services-hover-provider-example",
path: "extending-language-services/hover-provider-example"
},
{
chapter: "Extending Language Services",
name: "Configure JavaScript defaults",
id: "extending-language-services-configure-javascript-defaults",
path: "extending-language-services/configure-javascript-defaults"
},
{
chapter: "Extending Language Services",
name: "Configure JSON defaults",
id: "extending-language-services-configure-json-defaults",
path: "extending-language-services/configure-json-defaults"
}
];
if (typeof exports !== 'undefined') {
exports.PLAY_SAMPLES = PLAY_SAMPLES
} else {
self.PLAY_SAMPLES = PLAY_SAMPLES;
}
})();

0
website/playground/new-samples/creating-the-diffeditor/hello-diff-world/sample.css Normal file
View file

1
website/playground/new-samples/creating-the-diffeditor/hello-diff-world/sample.html Normal file
View file

@ -0,0 +1 @@
<div id="container" style="height:100%;"></div>

8
website/playground/new-samples/creating-the-diffeditor/hello-diff-world/sample.js Normal file
View file

@ -0,0 +1,8 @@
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
});

0
website/playground/new-samples/creating-the-diffeditor/inline-diff-example/sample.css Normal file
View file

1
website/playground/new-samples/creating-the-diffeditor/inline-diff-example/sample.html Normal file
View file

@ -0,0 +1 @@
<div id="container" style="height:100%;"></div>

14
website/playground/new-samples/creating-the-diffeditor/inline-diff-example/sample.js Normal file
View file

@ -0,0 +1,14 @@
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
});

0
website/playground/new-samples/creating-the-diffeditor/multi-line-example/sample.css Normal file
View file

1
website/playground/new-samples/creating-the-diffeditor/multi-line-example/sample.html Normal file
View file

@ -0,0 +1 @@
<div id="container" style="height:100%;"></div>

11
website/playground/new-samples/creating-the-diffeditor/multi-line-example/sample.js Normal file
View file

@ -0,0 +1,11 @@
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
});

0
website/playground/new-samples/creating-the-diffeditor/navigating-a-diff/sample.css Normal file
View file

1
website/playground/new-samples/creating-the-diffeditor/navigating-a-diff/sample.html Normal file
View file

@ -0,0 +1 @@
<div id="container" style="height:100%;"></div>

19
website/playground/new-samples/creating-the-diffeditor/navigating-a-diff/sample.js Normal file
View file

@ -0,0 +1,19 @@
// 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);

0
website/playground/new-samples/creating-the-editor/editor-basic-options/sample.css Normal file
View file

1
website/playground/new-samples/creating-the-editor/editor-basic-options/sample.html Normal file
View file

@ -0,0 +1 @@
<div id="container" style="height:100%;"></div>

19
website/playground/new-samples/creating-the-editor/editor-basic-options/sample.js Normal file
View file

@ -0,0 +1,19 @@
// 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: false,
roundedSelection: false,
scrollBeyondLastLine: false,
readOnly: false,
theme: "vs-dark",
});
setTimeout(function() {
editor.updateOptions({
lineNumbers: true
});
}, 2000);

0
website/playground/new-samples/creating-the-editor/hard-wrapping/sample.css Normal file
View file

1
website/playground/new-samples/creating-the-editor/hard-wrapping/sample.html Normal file
View file

@ -0,0 +1 @@
<div id="container" style="height:100%;"></div>

17
website/playground/new-samples/creating-the-editor/hard-wrapping/sample.js Normal file
View file

File diff suppressed because one or more lines are too long

0
website/playground/new-samples/creating-the-editor/hello-world/sample.css Normal file
View file

1
website/playground/new-samples/creating-the-editor/hello-world/sample.html Normal file
View file

@ -0,0 +1 @@
<div id="container" style="height:100%;"></div>

9
website/playground/new-samples/creating-the-editor/hello-world/sample.js Normal file
View file

@ -0,0 +1,9 @@
// 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"
});

1
website/playground/new-samples/creating-the-editor/syntax-highlighting-for-html-elements/sample.css Normal file
View file

@ -0,0 +1 @@

35
website/playground/new-samples/creating-the-editor/syntax-highlighting-for-html-elements/sample.html Normal file
View file

@ -0,0 +1,35 @@
<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>

4
website/playground/new-samples/creating-the-editor/syntax-highlighting-for-html-elements/sample.js Normal file
View file

@ -0,0 +1,4 @@
// 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'));

32
website/playground/new-samples/customizing-the-appearence/exposed-css-classes/sample.css Normal file
View file

@ -0,0 +1,32 @@
.monaco-editor, .monaco-editor-background {
background: #EDF9FA;
}
/* Cursor */
.monaco-editor .cursor {
background: darkred !important;
}
/* Current line */
.monaco-editor .current-line {
background: rgba(0, 0, 255, 0.1);
}
/* Line Numbers */
.monaco-editor .line-numbers {
background-color: #EDF9FA;
color: green;
}
/* Line Decorations */
.monaco-editor .lines-decorations {
background-color: #EDF9FA;
}
/* Selection */
.monaco-editor .view-overlays.focused .selected-text {
background: rgba(128, 0, 0, 0.2) !important;
}
.monaco-editor .view-overlays .selected-text {
background: rgba(128, 0, 0, 0.1) !important;
}

1
website/playground/new-samples/customizing-the-appearence/exposed-css-classes/sample.html Normal file
View file

@ -0,0 +1 @@
<div id="container" style="height:100%;"></div>

7
website/playground/new-samples/customizing-the-appearence/exposed-css-classes/sample.js Normal file
View file

@ -0,0 +1,7 @@
// The editor exposes a set of CSS classes that can be overwritten.
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
});

10
website/playground/new-samples/customizing-the-appearence/scrollbars/sample.css Normal file
View file

@ -0,0 +1,10 @@
/* 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);
}

1
website/playground/new-samples/customizing-the-appearence/scrollbars/sample.html Normal file
View file

@ -0,0 +1 @@
<div id="container" style="height:100%;"></div>

30
website/playground/new-samples/customizing-the-appearence/scrollbars/sample.js Normal file
View file

@ -0,0 +1,30 @@
// 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
}
});

10
website/playground/new-samples/customizing-the-appearence/tokens-and-colors/sample.css Normal file
View file

@ -0,0 +1,10 @@
/*
These rules customize the "Visual Studio" (vs) theme.
Token names can be discovered by:
a) exploring the .css theme files that come with the editor;
b) inspecting the dom elements rendered by the editor;
*/
.monaco-editor.vs .token.comment { color: orange; }
.monaco-editor.vs .token.comment.js { color: green; }
.monaco-editor.vs .token.comment.css { color: blue; }

1
website/playground/new-samples/customizing-the-appearence/tokens-and-colors/sample.html Normal file
View file

@ -0,0 +1 @@
<div id="container" style="height:100%;"></div>

8
website/playground/new-samples/customizing-the-appearence/tokens-and-colors/sample.js Normal file
View file

@ -0,0 +1,8 @@
// This example shows how to integrate the editor with a certain theme and then customize the token colors of that theme.
var htmlCode = "<html>\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"
});

0
website/playground/new-samples/extending-language-services/completion-provider-example/sample.css Normal file
View file

1
website/playground/new-samples/extending-language-services/completion-provider-example/sample.html Normal file
View file

@ -0,0 +1 @@
<div id="container" style="height:100%;"></div>

41
website/playground/new-samples/extending-language-services/completion-provider-example/sample.js Normal file
View file

@ -0,0 +1,41 @@
function createDependencyProposals() {
// 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": "*"'
},
{
label: '"express"',
kind: monaco.languages.CompletionItemKind.Function,
documentation: "Fast, unopinionated, minimalist web framework",
insertText: '"express": "*"'
},
{
label: '"mkdirp"',
kind: monaco.languages.CompletionItemKind.Function,
documentation: "Recursively mkdir, like <code>mkdir -p</code>",
insertText: '"mkdirp": "*"'
}
];
}
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 createDependencyProposals();
}
return [];
}
});
monaco.editor.create(document.getElementById("container"), {
value: "{\n\t\"dependencies\": {\n\t\t\n\t}\n}\n",
language: "json"
});

0
website/playground/new-samples/extending-language-services/configure-javascript-defaults/sample.css Normal file
View file

1
website/playground/new-samples/extending-language-services/configure-javascript-defaults/sample.html Normal file
View file

@ -0,0 +1 @@
<div id="container" style="height:100%;"></div>

41
website/playground/new-samples/extending-language-services/configure-javascript-defaults/sample.js Normal file
View file

@ -0,0 +1,41 @@
// Add additonal 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
monaco.languages.typescript.javascriptDefaults.addExtraLib([
'declare class Facts {',
' /**',
' * Returns the next fact',
' */',
' static next():string',
'}',
].join('\n'), 'filename/facts.d.ts');
var jsCode = [
'"use strict";',
'',
"class Chuck {",
" greet() {",
" return Facts.next();",
" }",
"}"
].join('\n');
monaco.editor.create(document.getElementById("container"), {
value: jsCode,
language: "javascript"
});

0
website/playground/new-samples/extending-language-services/configure-json-defaults/sample.css Normal file
View file

1
website/playground/new-samples/extending-language-services/configure-json-defaults/sample.html Normal file
View file

@ -0,0 +1 @@
<div id="container" style="height:100%;"></div>

40
website/playground/new-samples/extending-language-services/configure-json-defaults/sample.js Normal file
View file

@ -0,0 +1,40 @@
// Configures two JSON schemas, with references.
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
schemas: [{
uri: "http://myserver/foo-schema.json",
schema: {
type: "object",
properties: {
p1: {
enum: [ "v1", "v2"]
},
p2: {
$ref: "http://myserver/bar-schema.json"
}
}
}
},{
uri: "http://myserver/bar-schema.json",
schema: {
type: "object",
properties: {
q1: {
enum: [ "x1", "x2"]
}
}
}
}]
});
var jsonCode = [
'{',
' "$schema": "http://myserver/foo-schema.json"',
"}"
].join('\n');
monaco.editor.create(document.getElementById("container"), {
value: jsonCode,
language: "json"
});

15
website/playground/new-samples/extending-language-services/custom-languages/sample.css Normal file
View file

@ -0,0 +1,15 @@
.monaco-editor .token.custom-info {
color: grey;
}
.monaco-editor .token.custom-error {
color: red;
font-weight: bold;
font-size: 1.2em;
}
.monaco-editor .token.custom-notice {
color: orange;
}
.monaco-editor .token.custom-date {
color: green;
}

1
website/playground/new-samples/extending-language-services/custom-languages/sample.html Normal file
View file

@ -0,0 +1 @@
<div id="container" style="height:100%;"></div>

99
website/playground/new-samples/extending-language-services/custom-languages/sample.js Normal file
View file

@ -0,0 +1,99 @@
monaco.languages.register({ id: 'mySpecialLanguage' });
monaco.languages.setMonarchTokensProvider('mySpecialLanguage', {
tokenizer: {
root: [
[/\[error.*/, "custom-error"],
[/\[notice.*/, "custom-notice"],
[/\[info.*/, "custom-info"],
[/\[[a-zA-Z 0-9:]+\]/, "custom-date"],
]
}
});
monaco.languages.registerCompletionItemProvider('mySpecialLanguage', {
provideCompletionItems: () => {
return [
{
label: 'simpleText',
kind: monaco.languages.CompletionItemKind.Text
}, {
label: 'testing',
kind: monaco.languages.CompletionItemKind.Keyword,
insertText:'testing({{condition}})'
},
{
label: 'ifelse',
kind: monaco.languages.CompletionItemKind.Snippet,
insertText: [
'if ({{condition}}) {',
'\t{{}}',
'} else {',
'\t',
'}'
].join('\n'),
documentation: 'If-Else Statement'
}
]
}
});
monaco.editor.create(document.getElementById("container"), {
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');;
}

0
website/playground/new-samples/extending-language-services/hover-provider-example/sample.css Normal file
View file

1
website/playground/new-samples/extending-language-services/hover-provider-example/sample.html Normal file
View file

@ -0,0 +1 @@
<div id="container" style="height:100%;"></div>

50
website/playground/new-samples/extending-language-services/hover-provider-example/sample.js Normal file
View file

@ -0,0 +1,50 @@
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: [
'**SOURCE**',
{ language: 'html', value: res.responseText.substring(0, 200) }
]
}
});
}
});
monaco.editor.create(document.getElementById("container"), {
value: '\n\nHover over this text',
language: 'mySpecialLanguage'
});
function xhr(url) {
var req = null;
return new monaco.Promise(function(c,e,p) {
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 () { };
} else {
p(req);
}
};
req.open("GET", url, true );
req.responseType = "";
req.send(null);
}, function () {
req._canceled = true;
req.abort();
});
}

0
website/playground/new-samples/interacting-with-the-editor/adding-a-command-to-an-editor-instance/sample.css Normal file
View file

1
website/playground/new-samples/interacting-with-the-editor/adding-a-command-to-an-editor-instance/sample.html Normal file
View file

@ -0,0 +1 @@
<div id="container" style="height:100%;"></div>

33
website/playground/new-samples/interacting-with-the-editor/adding-a-command-to-an-editor-instance/sample.js Normal file
View file

@ -0,0 +1,33 @@
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);

0
website/playground/new-samples/interacting-with-the-editor/adding-an-action-to-an-editor-instance/sample.css Normal file
View file

1
website/playground/new-samples/interacting-with-the-editor/adding-an-action-to-an-editor-instance/sample.html Normal file
View file

@ -0,0 +1 @@
<div id="container" style="height:100%;"></div>

74
website/playground/new-samples/interacting-with-the-editor/adding-an-action-to-an-editor-instance/sample.js Normal file
View file

@ -0,0 +1,74 @@
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:
// Try right clicking on an identifier or keyword => the action will be enabled (due to `tokensAtPosition`)
// Try right clicking on a string => the action will be disabled (due to `tokensAtPosition`)
// Try right clicking on whitespace => the action will be disabled (due to `wordAtPosition`)
// Press F1 (Alt-F1 in IE) => the action will appear and run if it is enabled
// Press Ctrl-F10 => 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],
keybindingContext: null,
// Control if the action should show up in the context menu and where.
// Built-in groups:
// 1_goto/* => e.g. 1_goto/1_peekDefinition
// 2_change/* => e.g. 2_change/2_format
// 3_edit/* => e.g. 3_edit/1_copy
// 4_tools/* => e.g. 4_tools/1_commands
// You can also create your own group.
// Defaults to null (don't show in context menu).
contextMenuGroupId: '2_change/2_bla',
// Method that will be executed when the action is triggered.
// @param editor The editor instance is passed in as a convinience
run: function(ed) {
alert("i'm running => " + ed.getPosition());
return null;
},
// Optional enablement conditions. All members are optional
enablement: {
// The action is enabled only if text in the editor is focused (e.g. blinking cursor).
// Warning: This condition will be disabled if the action is marked to be displayed in the context menu
// Defaults to false.
textFocus: true,
// The action is enabled only if the editor or its widgets have focus (e.g. focus is in find widget).
// Defaults to false.
//widgetFocus: true,
// The action is enabled only if the editor is not in read only mode.
// Defaults to false.
//writeableEditor: true,
// The action is enabled only if the cursor position is over a word (i.e. not whitespace).
// Defaults to false.
wordAtPosition: true,
// The action is enabled only if the cursor position is over tokens of a certain kind.
// Defaults to no tokens required.
tokensAtPosition: ['identifier', '', 'keyword'],
}
});

1
website/playground/new-samples/interacting-with-the-editor/customizing-the-line-numbers/sample.css Normal file
View file

@ -0,0 +1 @@

1
website/playground/new-samples/interacting-with-the-editor/customizing-the-line-numbers/sample.html Normal file
View file

@ -0,0 +1 @@
<div id="container" style="height:100%"></div>

25
website/playground/new-samples/interacting-with-the-editor/customizing-the-line-numbers/sample.js Normal file
View file

@ -0,0 +1,25 @@
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
});

12
website/playground/new-samples/interacting-with-the-editor/line-and-inline-decorations/sample.css Normal file
View file

@ -0,0 +1,12 @@
.myInlineDecoration {
color: red !important;
cursor: pointer;
text-decoration: underline;
font-weight: bold;
font-style: oblique;
}
.myLineDecoration {
background: lightblue;
width: 5px !important;
left: 3px;
}

1
website/playground/new-samples/interacting-with-the-editor/line-and-inline-decorations/sample.html Normal file
View file

@ -0,0 +1 @@
<div id="container" style="height:100%;"></div>

21
website/playground/new-samples/interacting-with-the-editor/line-and-inline-decorations/sample.js Normal file
View file

@ -0,0 +1,21 @@
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' }},
]);

1
website/playground/new-samples/interacting-with-the-editor/listening-to-key-events/sample.css Normal file
View file

@ -0,0 +1 @@

1
website/playground/new-samples/interacting-with-the-editor/listening-to-key-events/sample.html Normal file
View file

@ -0,0 +1 @@
<div id="container" style="height:100%"></div>

10
website/playground/new-samples/interacting-with-the-editor/listening-to-key-events/sample.js Normal file
View file

@ -0,0 +1,10 @@
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!');
});
// When cleaning up remember to call myBinding.dispose()

6
website/playground/new-samples/interacting-with-the-editor/listening-to-mouse-events/sample.css Normal file
View file

@ -0,0 +1,6 @@
.myGlyphMarginClass {
background: red;
}
.myContentClass {
background: lightblue;
}

3
website/playground/new-samples/interacting-with-the-editor/listening-to-mouse-events/sample.html Normal file
View file

@ -0,0 +1,3 @@
<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>

113
website/playground/new-samples/interacting-with-the-editor/listening-to-mouse-events/sample.js Normal file
View file

@ -0,0 +1,113 @@
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,
nativeContextMenu: 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');
});

6
website/playground/new-samples/interacting-with-the-editor/rendering-glyphs-in-the-margin/sample.css Normal file
View file

@ -0,0 +1,6 @@
.myGlyphMarginClass {
background: red;
}
.myContentClass {
background: lightblue;
}

1
website/playground/new-samples/interacting-with-the-editor/rendering-glyphs-in-the-margin/sample.html Normal file
View file

@ -0,0 +1 @@
<div id="container" style="height:100%;"></div>

30
website/playground/new-samples/interacting-with-the-editor/rendering-glyphs-in-the-margin/sample.js Normal file
View file

@ -0,0 +1,30 @@
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

0
website/playground/new-samples/interacting-with-the-editor/revealing-a-position/sample.css Normal file
View file

Some files were not shown because too many files have changed in this diff Show more