Issue 1:
Hi,

sorry if this is the wrong place to ask for this.

It is really awesome that VS Code is now open-source. Some time ago I created a issue in the TypeScript repo (microsoft/TypeScript#5324) asking if it'd be possible to embed the Monaco Editor (as used in the TypeScript Playground) into your own HTML pages.

I'd like to:

Show the Monaco editor in the HTML page using the Typescript Language Service.

Specify the initial TypeScript editor contents and my own .d.ts definition files to be used by the TS Language Service.

Get the displayed TypeScript and the transpiled Javascript when e.g. a button is clicked.

Be able to dispose of the editor when e.g. another button is clicked.

So I'd like to use the editor similar to the Typescript Playground, with the difference that I would specify my own .d.ts files and to not have a JavaScript editor at the right-hand side.

However I don't know how to do this correctly.

I checked out the vscode repository and invoked tsc in the src folder. Then I created a HTML page in that folder using the TS playground as a template:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<h1>Test Monaco</h1>

<div id="typescriptEditor"></div>

<script type="text/javascript">
var require = {
baseUrl: "/"
};
</script>
<script type="text/javascript" src="vs/loader.js"></script>
<script type="text/javascript" src="vs/editor/editor.main.js"></script>
<script type="text/javascript">

if (!window.console.info) {
window.console.info = function(){}
}

(function () {
'use strict';

var domnode = document.getElementById('typescriptEditor')
var typescriptMode = null;

require(['vs/editor/editor.main'], function () {

Monaco.Editor.getOrCreateMode('text/typescript').then(function (mode) {
typescriptMode = mode;

var editor = Monaco.Editor.create(domnode, {
value: '',
mode: 'text/plain',
fontIsMonospace: true,
suggestOnTriggerCharacters: true,
showTypeScriptWarnings: false
});
});

});

})();
</script>
</body>
</html>

However, when hosting the directory in IIS Express and opening the HTML file in a browser, I'm getting errors such as

GET
http://localhost:8080/vs/editor/contrib/comment/common/color.css [HTTP/1.1 404 Not Found 16ms]
GET
http://localhost:8080/vs/editor/contrib/inPlaceReplace/common/gotoError.css [HTTP/1.1 404 Not Found 13ms]
GET
http://localhost:8080/vs/editor/contrib/referenceSearch/browser/rename.css [HTTP/1.1 404 Not Found 125ms]
TypeError: Browser.isInWebWorker is not a function browserService.js:25:17
TypeError: nls.localize is not a function pluginsRegistry.js:330:30
TypeError: EditorCommon.LineTokensBinaryEncoding is undefined tokenIterator.js:7:9

Can anybody give me some pointers how to embed the editor correctly using the TS service?

Thank you!

Issue 2:
Now that VS Code is open source, it also means that the Monaco Editor is open source (at-least to some extent).

I would really like to use this editor in my own web application for editing TypeScript files. The only problem is I can't find any documentation about how to do this. I know its possible because the editor is on TypeScript Playground and a few other places.

As far as I can tell, the open sourcing of VS Code is the first time the source code of the Monaco editor has been made public. Also, I think that the VS Code repository is the primary source of the Monaco editor (someone from Microsoft please confirm?).

So far, there have been many questions about using the Monaco Editor on Stack Overflow and other forums, but I have yet to see an official reply from Microsoft.

Can someone please provide some documentation on using the Monaco Editor in a web site, or perhaps release the source code of TypeScript Playground (There is nothing to hide now that we have the Monaco source in the VS Code repository).

Currently, the only thing keeping me from using TypeScript as a JavaScript replacement is the fact that I can't easily use the Monaco Editor inside of my web application. I'm currently using the ACE Editor with a Tern plugin I created. I don't want to go through all of the work of creating full Intellisense support for TypeScript inside of ACE because its a significant undertaking- Instead I'd rather contribute to the Monaco editor and use it as a replacement for ACE (and replace JavaScript with TypeScript).