Skip to content

Commit 6dcc1c0

Browse files
alexdimaalexdima
committed
Initial version
1 parent 7ac7ab9 commit 6dcc1c0

File tree

16 files changed

+625
-2
lines changed

16 files changed

+625
-2
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/node_modules/

‎.npmignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/.gitignore
2+
/.vscode/

‎.vscode/settings.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// Place your settings in this file to overwrite default and user settings.
2+
{
3+
"files.trimTrailingWhitespace": true,
4+
"editor.tabSize": 4,
5+
"editor.insertSpaces": false
6+
}

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2016 Microsoft Corporation
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,27 @@
1-
# monaco-editor-samples
2-
Samples for using the Monaco Editor
1+
2+
# Monaco Editor Samples
3+
4+
Standalone HTML samples showing how to integrate the Monaco Editor.
5+
6+
## Running
7+
8+
From npm:
9+
```
10+
npm install monaco-editor-samples
11+
cd node_modules/monaco-editor-samples
12+
npm run simpleserver
13+
```
14+
15+
From source:
16+
```
17+
git clone https://github.com/Microsoft/monaco-editor-samples.git
18+
cd monaco-editor-samples
19+
npm install .
20+
npm run simpleserver
21+
```
22+
23+
Go to <a href="http://localhost:8888">localhost:8888</a> and explore the samples!
24+
25+
## License
26+
27+
MIT

‎package.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "monaco-editor-samples",
3+
"version": "0.0.1",
4+
"description": "Samples for using the Monaco Editor",
5+
"main": "index.js",
6+
"scripts": {
7+
"simpleserver": "node_modules/.bin/http-server -c-1 ./ -p 8888"
8+
},
9+
"author": "Microsoft Corporation",
10+
"license": "MIT",
11+
"dependencies": {
12+
"http-server": "^0.9.0",
13+
"monaco-editor": "0.x.x"
14+
}
15+
}

‎sample-diff-editor/index.html

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
6+
</head>
7+
<body>
8+
9+
<h2>Monaco Diff Editor Sample</h2>
10+
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>
11+
12+
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
13+
<script>
14+
require.config({ paths: { 'vs': '../node_modules/monaco-editor/min/vs' }});
15+
16+
require(['vs/editor/editor.main'], function() {
17+
var diffEditor = monaco.editor.createDiffEditor(document.getElementById('container'));
18+
19+
monaco.Promise.join([xhr('original.txt'), xhr('modified.txt')]).then(function(r) {
20+
var originalTxt = r[0].responseText;
21+
var modifiedTxt = r[1].responseText;
22+
23+
diffEditor.setModel({
24+
original: monaco.editor.createModel(originalTxt, 'javascript'),
25+
modified: monaco.editor.createModel(modifiedTxt, 'javascript'),
26+
})
27+
});
28+
});
29+
</script>
30+
<script>
31+
function xhr(url) {
32+
var req = null;
33+
return new monaco.Promise(function(c,e,p) {
34+
req = new XMLHttpRequest();
35+
req.onreadystatechange = function () {
36+
if (req._canceled) { return; }
37+
38+
if (req.readyState === 4) {
39+
if ((req.status >= 200 && req.status < 300) || req.status === 1223) {
40+
c(req);
41+
} else {
42+
e(req);
43+
}
44+
req.onreadystatechange = function () { };
45+
} else {
46+
p(req);
47+
}
48+
};
49+
50+
req.open("GET", url, true );
51+
req.responseType = "";
52+
53+
req.send(null);
54+
}, function () {
55+
req._canceled = true;
56+
req.abort();
57+
});
58+
}
59+
</script>
60+
</body>
61+
</html>

‎sample-diff-editor/modified.txt

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
2+
/// <reference path="../../references.js" />
3+
(function () {
4+
"use strict";
5+
6+
var deltaDecorations = function (oldDecorations, newDecorations) {
7+
/// <summary>
8+
/// Update oldDecorations to match newDecorations.
9+
/// It will remove old decorations which are not found in new decorations
10+
/// and add only the really new decorations.
11+
/// </summary>
12+
/// <param name="oldDecorations" type="Array">
13+
/// An array containing ids of existing decorations
14+
/// </param>
15+
/// <param name="newDecorations" type="Array">
16+
/// An array containing literal objects describing new decorations. A
17+
/// literal contains the following two fields:
18+
/// range
19+
/// options
20+
/// </param>
21+
/// <returns type="Array">
22+
/// Returns an array of decorations ids
23+
/// </returns>
24+
var hashFunc = function (range, options) {
25+
return range.startLineNumber + "," + range.startColumn + "-" + range.endLineNumber + "," + range.endColumn +
26+
"-" + options.hoverMessage + "-" + options.className + "-" + options.isOverlay + "-" + options.showInOverviewRuler;
27+
};
28+
return this.changeDecorations(function (changeAccessor) {
29+
var i, len, oldDecorationsMap = {}, hash;
30+
31+
// Record old decorations in a map
32+
// Two decorations can have the same hash
33+
for (i = 0, len = oldDecorations.length; i < len; i++) {
34+
hash = hashFunc(this.getDecorationRange(oldDecorations[i]), this.getDecorationOptions(oldDecorations[i]));
35+
oldDecorationsMap[hash] = oldDecorationsMap[hash] || [];
36+
oldDecorationsMap[hash].push(oldDecorations[i]);
37+
}
38+
39+
// Add only new decorations & mark reused ones
40+
var j, lenJ, result = [], usedOldDecorations = {}, oldDecorationsCandidates, reusedOldDecoration;
41+
for (i = 0, len = newDecorations.length; i < len; i++) {
42+
hash = hashFunc(newDecorations[i].range, newDecorations[i].options);
43+
reusedOldDecoration = false;
44+
if (oldDecorationsMap.hasOwnProperty(hash)) {
45+
oldDecorationsCandidates = oldDecorationsMap[hash];
46+
// We can try reusing an old decoration (if it hasn't been reused before)
47+
for (j = 0, lenJ = oldDecorationsCandidates.length; j < lenJ; j++) {
48+
if (!usedOldDecorations.hasOwnProperty(oldDecorationsCandidates[j])) {
49+
// Found an old decoration which can be reused & it hasn't been reused before
50+
reusedOldDecoration = true;
51+
usedOldDecorations[oldDecorationsCandidates[j]] = true;
52+
result.push(oldDecorationsCandidates[j]);
53+
break;
54+
}
55+
}
56+
}
57+
58+
if (!reusedOldDecoration) {
59+
result.push(changeAccessor.addDecoration(newDecorations[i].range, newDecorations[i].options));
60+
}
61+
}
62+
63+
// Remove unused old decorations
64+
for (i = 0, len = oldDecorations.length; i < len; i++) {
65+
if (!usedOldDecorations.hasOwnProperty(oldDecorations[i])) {
66+
changeAccessor.removeDecoration(oldDecorations[i]);
67+
}
68+
}
69+
70+
return result;
71+
}.bind(this));
72+
};
73+
74+
})();

‎sample-diff-editor/original.txt

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/// <reference path="../../references.js" />
2+
(function () {
3+
"use strict";
4+
5+
// Some useless comment
6+
7+
var deltaDecorations = function (oldDecorations, newDecorations) {
8+
/// <summary>
9+
/// Update oldDecorations to match newDecorations.
10+
/// It will remove old decorations which are not found in new decorations
11+
/// and add only the really new decorations.
12+
/// </summary>
13+
/// <param name="oldDecorations" type="Array">
14+
/// An array containing ids of existing decorations
15+
/// </param>
16+
/// <param name="newDecorations" type="Array">
17+
/// An array containing literal objects describing new decorations. A
18+
/// literal contains the following two fields:
19+
/// range
20+
/// options
21+
/// </param>
22+
/// <returns type="Array">
23+
/// Returns an array of decorations ids
24+
/// </returns>
25+
var hashFunc = function (range, options) {
26+
return range.startLineNumber + "," + range.startColumn + "-" + range.endLineNumber + "," + range.endColumn +
27+
"-" + options.hoverMessage + "-" + options.className + "-" + options.isOverlay + "-" + options.showInOverviewRuler;
28+
};
29+
return this.changeDecorations(function (changeAccessor) {
30+
var i, len, oldDecorationsMap = {}, hash;
31+
32+
// Record old decorations in a map
33+
for (i = 0, len = oldDecorations.length; i < len; i++) {
34+
hash = hashFunc(this.getDecorationRange(oldDecorations[i]), this.getDecorationOptions(oldDecorations[i]));
35+
oldDecorationsMap[hash] = i;
36+
}
37+
38+
// Add only new decorations & mark reused ones
39+
var result = [], usedOldDecorationsMap = {};
40+
for (i = 0, len = newDecorations.length; i < len; i++) {
41+
hash = hashFunc(newDecorations[i].range, newDecorations[i].options);
42+
if (oldDecorationsMap.hasOwnProperty(hash)) {
43+
usedOldDecorationsMap[oldDecorationsMap[hash]] = true;
44+
result.push(oldDecorations[oldDecorationsMap[hash]]);
45+
} else {
46+
result.push(changeAccessor.addDecoration(newDecorations[i].range, newDecorations[i].options));
47+
}
48+
}
49+
50+
// Remove unused old decorations
51+
for (i = 0, len = oldDecorations.length; i < len; i++) {
52+
if (!usedOldDecorationsMap.hasOwnProperty(i)) {
53+
changeAccessor.removeDecoration(oldDecorations[i]);
54+
}
55+
}
56+
57+
return result;
58+
}.bind(this));
59+
};
60+
61+
})();

‎sample-editor/index.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
6+
</head>
7+
<body>
8+
9+
<h2>Monaco Editor Sample</h2>
10+
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>
11+
12+
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
13+
<script>
14+
require.config({ paths: { 'vs': '../node_modules/monaco-editor/min/vs' }});
15+
16+
require(['vs/editor/editor.main'], function() {
17+
var editor = monaco.editor.create(document.getElementById('container'), {
18+
value: [
19+
'function x() {',
20+
'\tconsole.log("Hello world!");',
21+
'}'
22+
].join('\n'),
23+
language: 'javascript'
24+
});
25+
});
26+
</script>
27+
</body>
28+
</html>

0 commit comments

Comments
 (0)