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

Run prettier

Browse source
This commit is contained in:
Alex Dima 2020-09-07 16:29:09 +02:00
parent ff1d221031
commit d089cc232d
No known key found for this signature in database
GPG key ID: 6E58D7B045760DA0
19 changed files with 2441 additions and 2045 deletions
Download patch file Download diff file Expand all files Collapse all files

22
README.md
View file

@ -1,11 +1,12 @@
# Monaco HTML # Monaco HTML
HTML language plugin for the Monaco Editor. It provides the following features when editing HTML files: HTML language plugin for the Monaco Editor. It provides the following features when editing HTML files:
* Code completion
* Formatting - Code completion
* Document Highlights - Formatting
* Link detection - Document Highlights
* Syntax highlighting - Link detection
- Syntax highlighting
Internally the HTML plugin uses the [vscode-html-languageservice](https://github.com/Microsoft/vscode-html-languageservice) Internally the HTML plugin uses the [vscode-html-languageservice](https://github.com/Microsoft/vscode-html-languageservice)
node module, providing the implementation of the functionally listed above. The same module is also used node module, providing the implementation of the functionally listed above. The same module is also used
@ -21,11 +22,12 @@ This npm module is bundled and distributed in the [monaco-editor](https://www.np
## Development ## Development
* `git clone https://github.com/Microsoft/monaco-html` - `git clone https://github.com/Microsoft/monaco-html`
* `cd monaco-html` - `cd monaco-html`
* `npm install .` - `npm install .`
* `npm run watch` - `npm run watch`
* open `$/monaco-html/test/index.html` in your favorite browser. - open `$/monaco-html/test/index.html` in your favorite browser.
## License ## License
[MIT](https://github.com/Microsoft/monaco-html/blob/master/LICENSE.md) [MIT](https://github.com/Microsoft/monaco-html/blob/master/LICENSE.md)

1572
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

73
package.json
View file

@ -1,36 +1,41 @@
{ {
"name": "monaco-html", "name": "monaco-html",
"version": "2.7.0", "version": "2.7.0",
"description": "HTML plugin for the Monaco Editor", "description": "HTML plugin for the Monaco Editor",
"scripts": { "scripts": {
"compile": "mrmdir ./out && tsc -p ./src/tsconfig.json && tsc -p ./src/tsconfig.esm.json", "compile": "mrmdir ./out && tsc -p ./src/tsconfig.json && tsc -p ./src/tsconfig.esm.json",
"watch": "tsc -p ./src --watch", "watch": "tsc -p ./src --watch",
"prepublishOnly": "mrmdir ./release && npm run compile && node ./scripts/release.js && node ./scripts/bundle && mcopy ./src/monaco.d.ts ./release/monaco.d.ts", "prepublishOnly": "mrmdir ./release && npm run compile && node ./scripts/release.js && node ./scripts/bundle && mcopy ./src/monaco.d.ts ./release/monaco.d.ts",
"install-service-next": "npm install vscode-html-languageservice@next -f -D && npm install vscode-languageserver-types@next -f -D", "install-service-next": "npm install vscode-html-languageservice@next -f -D && npm install vscode-languageserver-types@next -f -D",
"install-service-local": "npm install ../vscode-html-languageservice -f -D && npm install ../vscode-languageserver-node/types -f -D", "install-service-local": "npm install ../vscode-html-languageservice -f -D && npm install ../vscode-languageserver-node/types -f -D",
"prettier": "prettier --write ." "prettier": "prettier --write ."
}, },
"author": "Microsoft Corporation", "author": "Microsoft Corporation",
"license": "MIT", "license": "MIT",
"repository": { "repository": {
"type": "git", "type": "git",
"url": "https://github.com/Microsoft/monaco-html" "url": "https://github.com/Microsoft/monaco-html"
}, },
"bugs": { "bugs": {
"url": "https://github.com/Microsoft/monaco-editor/issues" "url": "https://github.com/Microsoft/monaco-editor/issues"
}, },
"devDependencies": { "devDependencies": {
"husky": "^4.2.5", "husky": "^4.2.5",
"monaco-editor-core": "0.20.0", "monaco-editor-core": "0.20.0",
"monaco-languages": "^1.10.0", "monaco-languages": "^1.10.0",
"monaco-plugin-helpers": "^1.0.2", "monaco-plugin-helpers": "^1.0.2",
"prettier": "^2.1.1", "prettier": "^2.1.1",
"pretty-quick": "^3.0.0", "pretty-quick": "^3.0.0",
"requirejs": "^2.3.6", "requirejs": "^2.3.6",
"typescript": "^3.7.5", "typescript": "^3.7.5",
"terser": "^4.6.3", "terser": "^4.6.3",
"vscode-html-languageservice": "3.0.4-next.12", "vscode-html-languageservice": "3.0.4-next.12",
"vscode-languageserver-types": "3.15.0-next.9", "vscode-languageserver-types": "3.15.0-next.9",
"vscode-languageserver-textdocument": "^1.0.0-next.5" "vscode-languageserver-textdocument": "^1.0.0-next.5"
} },
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged"
}
}
} }

116
scripts/bundle.js
View file

@ -1,7 +1,7 @@
const requirejs = require('requirejs'); const requirejs = require('requirejs');
const path = require('path'); const path = require('path');
const fs = require('fs'); const fs = require('fs');
const terser = require("terser"); const terser = require('terser');
const helpers = require('monaco-plugin-helpers'); const helpers = require('monaco-plugin-helpers');
const REPO_ROOT = path.resolve(__dirname, '..'); const REPO_ROOT = path.resolve(__dirname, '..');
@ -25,49 +25,75 @@ bundleOne('htmlMode');
bundleOne('htmlWorker'); bundleOne('htmlWorker');
function bundleOne(moduleId, exclude) { function bundleOne(moduleId, exclude) {
requirejs.optimize({ requirejs.optimize(
baseUrl: 'out/amd/', {
name: 'vs/language/html/' + moduleId, baseUrl: 'out/amd/',
out: 'release/dev/' + moduleId + '.js', name: 'vs/language/html/' + moduleId,
exclude: exclude, out: 'release/dev/' + moduleId + '.js',
paths: { exclude: exclude,
'vs/language/html': REPO_ROOT + '/out/amd' paths: {
'vs/language/html': REPO_ROOT + '/out/amd'
},
optimize: 'none',
packages: [
{
name: 'vscode-html-languageservice',
location: path.join(
REPO_ROOT,
'node_modules/vscode-html-languageservice/lib/umd'
),
main: 'htmlLanguageService'
},
{
name: 'vscode-languageserver-types',
location: path.join(
REPO_ROOT,
'node_modules/vscode-languageserver-types/lib/umd'
),
main: 'main'
},
{
name: 'vscode-languageserver-textdocument',
location: path.join(
REPO_ROOT,
'node_modules/vscode-languageserver-textdocument/lib/umd'
),
main: 'main'
},
{
name: 'vscode-uri',
location: path.join(REPO_ROOT, 'node_modules/vscode-uri/lib/umd'),
main: 'index'
},
{
name: 'vscode-nls',
location: path.join(REPO_ROOT, '/out/amd/fillers'),
main: 'vscode-nls'
}
]
}, },
optimize: 'none', function (buildResponse) {
packages: [{ const devFilePath = path.join(
name: 'vscode-html-languageservice', REPO_ROOT,
location: path.join(REPO_ROOT, 'node_modules/vscode-html-languageservice/lib/umd'), 'release/dev/' + moduleId + '.js'
main: 'htmlLanguageService' );
}, { const minFilePath = path.join(
name: 'vscode-languageserver-types', REPO_ROOT,
location: path.join(REPO_ROOT, 'node_modules/vscode-languageserver-types/lib/umd'), 'release/min/' + moduleId + '.js'
main: 'main' );
}, { const fileContents = fs.readFileSync(devFilePath).toString();
name: 'vscode-languageserver-textdocument', console.log();
location: path.join(REPO_ROOT, 'node_modules/vscode-languageserver-textdocument/lib/umd'), console.log(`Minifying ${devFilePath}...`);
main: 'main' const result = terser.minify(fileContents, {
}, { output: {
name: 'vscode-uri', comments: 'some'
location: path.join(REPO_ROOT, 'node_modules/vscode-uri/lib/umd'), }
main: 'index' });
}, { console.log(`Done.`);
name: 'vscode-nls', try {
location: path.join(REPO_ROOT, '/out/amd/fillers'), fs.mkdirSync(path.join(REPO_ROOT, 'release/min'));
main: 'vscode-nls' } catch (err) {}
}] fs.writeFileSync(minFilePath, BUNDLED_FILE_HEADER + result.code);
}, function (buildResponse) { }
const devFilePath = path.join(REPO_ROOT, 'release/dev/' + moduleId + '.js'); );
const minFilePath = path.join(REPO_ROOT, 'release/min/' + moduleId + '.js');
const fileContents = fs.readFileSync(devFilePath).toString();
console.log();
console.log(`Minifying ${devFilePath}...`);
const result = terser.minify(fileContents, {
output: {
comments: 'some'
}
});
console.log(`Done.`);
try { fs.mkdirSync(path.join(REPO_ROOT, 'release/min')) } catch (err) { }
fs.writeFileSync(minFilePath, BUNDLED_FILE_HEADER + result.code);
})
} }

14
scripts/release.js
View file

@ -12,19 +12,13 @@ helpers.packageESM({
repoRoot: REPO_ROOT, repoRoot: REPO_ROOT,
esmSource: 'out/esm', esmSource: 'out/esm',
esmDestination: 'release/esm', esmDestination: 'release/esm',
entryPoints: [ entryPoints: ['monaco.contribution.js', 'htmlMode.js', 'html.worker.js'],
'monaco.contribution.js',
'htmlMode.js',
'html.worker.js'
],
resolveAlias: { resolveAlias: {
'vscode-nls': path.join(REPO_ROOT, "out/esm/fillers/vscode-nls.js") 'vscode-nls': path.join(REPO_ROOT, 'out/esm/fillers/vscode-nls.js')
}, },
resolveSkip: [ resolveSkip: ['monaco-editor-core'],
'monaco-editor-core'
],
destinationFolderSimplification: { destinationFolderSimplification: {
'node_modules': '_deps', node_modules: '_deps',
'vscode-languageserver-types/lib/esm': 'vscode-languageserver-types', 'vscode-languageserver-types/lib/esm': 'vscode-languageserver-types',
'vscode-uri/lib/esm': 'vscode-uri', 'vscode-uri/lib/esm': 'vscode-uri',
'vscode-html-languageservice/lib/esm': 'vscode-html-languageservice' 'vscode-html-languageservice/lib/esm': 'vscode-html-languageservice'

12
src/fillers/vscode-nls.ts
View file

@ -20,7 +20,7 @@ export interface LoadFunc {
} }
function format(message: string, args: any[]): string { function format(message: string, args: any[]): string {
let result:string; let result: string;
if (args.length === 0) { if (args.length === 0) {
result = message; result = message;
@ -33,14 +33,18 @@ function format(message: string, args: any[]): string {
return result; return result;
} }
function localize(key: string | LocalizeInfo, message: string, ...args: any[]): string { function localize(
key: string | LocalizeInfo,
message: string,
...args: any[]
): string {
return format(message, args); return format(message, args);
} }
export function loadMessageBundle(file?: string): LocalizeFunc { export function loadMessageBundle(file?: string): LocalizeFunc {
return localize; return localize;
} }
export function config(opt?: Options | string): LoadFunc { export function config(opt?: Options | string): LoadFunc {
return loadMessageBundle; return loadMessageBundle;
} }

2
src/html.worker.ts
View file

@ -10,6 +10,6 @@ import { HTMLWorker } from './htmlWorker';
self.onmessage = () => { self.onmessage = () => {
// ignore the first message // ignore the first message
worker.initialize((ctx, createData) => { worker.initialize((ctx, createData) => {
return new HTMLWorker(ctx, createData) return new HTMLWorker(ctx, createData);
}); });
}; };

137
src/htmlMode.ts
View file

@ -13,91 +13,172 @@ import Uri = monaco.Uri;
import IDisposable = monaco.IDisposable; import IDisposable = monaco.IDisposable;
export function setupMode1(defaults: LanguageServiceDefaultsImpl): void { export function setupMode1(defaults: LanguageServiceDefaultsImpl): void {
const client = new WorkerManager(defaults); const client = new WorkerManager(defaults);
const worker: languageFeatures.WorkerAccessor = (...uris: Uri[]): Promise<HTMLWorker> => { const worker: languageFeatures.WorkerAccessor = (
...uris: Uri[]
): Promise<HTMLWorker> => {
return client.getLanguageServiceWorker(...uris); return client.getLanguageServiceWorker(...uris);
}; };
let languageId = defaults.languageId; let languageId = defaults.languageId;
// all modes // all modes
monaco.languages.registerCompletionItemProvider(languageId, new languageFeatures.CompletionAdapter(worker)); monaco.languages.registerCompletionItemProvider(
monaco.languages.registerHoverProvider(languageId, new languageFeatures.HoverAdapter(worker)); languageId,
new languageFeatures.CompletionAdapter(worker)
);
monaco.languages.registerHoverProvider(
languageId,
new languageFeatures.HoverAdapter(worker)
);
monaco.languages.registerDocumentHighlightProvider(languageId, new languageFeatures.DocumentHighlightAdapter(worker)); monaco.languages.registerDocumentHighlightProvider(
monaco.languages.registerLinkProvider(languageId, new languageFeatures.DocumentLinkAdapter(worker)); languageId,
monaco.languages.registerFoldingRangeProvider(languageId, new languageFeatures.FoldingRangeAdapter(worker)); new languageFeatures.DocumentHighlightAdapter(worker)
monaco.languages.registerDocumentSymbolProvider(languageId, new languageFeatures.DocumentSymbolAdapter(worker)); );
monaco.languages.registerSelectionRangeProvider(languageId, new languageFeatures.SelectionRangeAdapter(worker)); monaco.languages.registerLinkProvider(
monaco.languages.registerRenameProvider(languageId, new languageFeatures.RenameAdapter(worker)); languageId,
new languageFeatures.DocumentLinkAdapter(worker)
);
monaco.languages.registerFoldingRangeProvider(
languageId,
new languageFeatures.FoldingRangeAdapter(worker)
);
monaco.languages.registerDocumentSymbolProvider(
languageId,
new languageFeatures.DocumentSymbolAdapter(worker)
);
monaco.languages.registerSelectionRangeProvider(
languageId,
new languageFeatures.SelectionRangeAdapter(worker)
);
monaco.languages.registerRenameProvider(
languageId,
new languageFeatures.RenameAdapter(worker)
);
// only html // only html
if (languageId === 'html') { if (languageId === 'html') {
monaco.languages.registerDocumentFormattingEditProvider(languageId, new languageFeatures.DocumentFormattingEditProvider(worker)); monaco.languages.registerDocumentFormattingEditProvider(
monaco.languages.registerDocumentRangeFormattingEditProvider(languageId, new languageFeatures.DocumentRangeFormattingEditProvider(worker)); languageId,
new languageFeatures.DocumentFormattingEditProvider(worker)
);
monaco.languages.registerDocumentRangeFormattingEditProvider(
languageId,
new languageFeatures.DocumentRangeFormattingEditProvider(worker)
);
new languageFeatures.DiagnosticsAdapter(languageId, worker, defaults); new languageFeatures.DiagnosticsAdapter(languageId, worker, defaults);
} }
} }
export function setupMode(defaults: LanguageServiceDefaultsImpl): IDisposable { export function setupMode(defaults: LanguageServiceDefaultsImpl): IDisposable {
const disposables: IDisposable[] = []; const disposables: IDisposable[] = [];
const providers: IDisposable[] = []; const providers: IDisposable[] = [];
const client = new WorkerManager(defaults); const client = new WorkerManager(defaults);
disposables.push(client); disposables.push(client);
const worker: languageFeatures.WorkerAccessor = (...uris: Uri[]): Promise<HTMLWorker> => { const worker: languageFeatures.WorkerAccessor = (
...uris: Uri[]
): Promise<HTMLWorker> => {
return client.getLanguageServiceWorker(...uris); return client.getLanguageServiceWorker(...uris);
}; };
function registerProviders(): void { function registerProviders(): void {
const { languageId, modeConfiguration } = defaults; const { languageId, modeConfiguration } = defaults;
disposeAll(providers); disposeAll(providers);
if (modeConfiguration.completionItems) { if (modeConfiguration.completionItems) {
providers.push(monaco.languages.registerCompletionItemProvider(languageId, new languageFeatures.CompletionAdapter(worker))); providers.push(
monaco.languages.registerCompletionItemProvider(
languageId,
new languageFeatures.CompletionAdapter(worker)
)
);
} }
if (modeConfiguration.hovers) { if (modeConfiguration.hovers) {
providers.push(monaco.languages.registerHoverProvider(languageId, new languageFeatures.HoverAdapter(worker))); providers.push(
monaco.languages.registerHoverProvider(
languageId,
new languageFeatures.HoverAdapter(worker)
)
);
} }
if (modeConfiguration.documentHighlights) { if (modeConfiguration.documentHighlights) {
providers.push(monaco.languages.registerDocumentHighlightProvider(languageId, new languageFeatures.DocumentHighlightAdapter(worker))); providers.push(
monaco.languages.registerDocumentHighlightProvider(
languageId,
new languageFeatures.DocumentHighlightAdapter(worker)
)
);
} }
if (modeConfiguration.links) { if (modeConfiguration.links) {
providers.push(monaco.languages.registerLinkProvider(languageId, new languageFeatures.DocumentLinkAdapter(worker))); providers.push(
monaco.languages.registerLinkProvider(
languageId,
new languageFeatures.DocumentLinkAdapter(worker)
)
);
} }
if (modeConfiguration.documentSymbols) { if (modeConfiguration.documentSymbols) {
providers.push(monaco.languages.registerDocumentSymbolProvider(languageId, new languageFeatures.DocumentSymbolAdapter(worker))); providers.push(
monaco.languages.registerDocumentSymbolProvider(
languageId,
new languageFeatures.DocumentSymbolAdapter(worker)
)
);
} }
if (modeConfiguration.rename) { if (modeConfiguration.rename) {
providers.push(monaco.languages.registerRenameProvider(languageId, new languageFeatures.RenameAdapter(worker))); providers.push(
monaco.languages.registerRenameProvider(
languageId,
new languageFeatures.RenameAdapter(worker)
)
);
} }
if (modeConfiguration.foldingRanges) { if (modeConfiguration.foldingRanges) {
providers.push(monaco.languages.registerFoldingRangeProvider(languageId, new languageFeatures.FoldingRangeAdapter(worker))); providers.push(
monaco.languages.registerFoldingRangeProvider(
languageId,
new languageFeatures.FoldingRangeAdapter(worker)
)
);
} }
if (modeConfiguration.selectionRanges) { if (modeConfiguration.selectionRanges) {
providers.push(monaco.languages.registerSelectionRangeProvider(languageId, new languageFeatures.SelectionRangeAdapter(worker))); providers.push(
monaco.languages.registerSelectionRangeProvider(
languageId,
new languageFeatures.SelectionRangeAdapter(worker)
)
);
} }
if (modeConfiguration.documentFormattingEdits) { if (modeConfiguration.documentFormattingEdits) {
providers.push(monaco.languages.registerDocumentFormattingEditProvider(languageId, new languageFeatures.DocumentFormattingEditProvider(worker))); providers.push(
monaco.languages.registerDocumentFormattingEditProvider(
languageId,
new languageFeatures.DocumentFormattingEditProvider(worker)
)
);
} }
if (modeConfiguration.documentRangeFormattingEdits) { if (modeConfiguration.documentRangeFormattingEdits) {
providers.push(monaco.languages.registerDocumentRangeFormattingEditProvider(languageId, new languageFeatures.DocumentRangeFormattingEditProvider(worker))); providers.push(
monaco.languages.registerDocumentRangeFormattingEditProvider(
languageId,
new languageFeatures.DocumentRangeFormattingEditProvider(worker)
)
);
} }
if (modeConfiguration.diagnostics) { if (modeConfiguration.diagnostics) {
providers.push(new languageFeatures.DiagnosticsAdapter(languageId, worker, defaults)); providers.push(
new languageFeatures.DiagnosticsAdapter(languageId, worker, defaults)
);
} }
} }
registerProviders(); registerProviders();
disposables.push(asDisposable(providers)); disposables.push(asDisposable(providers));
return asDisposable(disposables); return asDisposable(disposables);

87
src/htmlWorker.ts
View file

@ -9,7 +9,6 @@ import IWorkerContext = monaco.worker.IWorkerContext;
import * as htmlService from 'vscode-html-languageservice'; import * as htmlService from 'vscode-html-languageservice';
export class HTMLWorker { export class HTMLWorker {
private _ctx: IWorkerContext; private _ctx: IWorkerContext;
private _languageService: htmlService.LanguageService; private _languageService: htmlService.LanguageService;
private _languageSettings: monaco.languages.html.Options; private _languageSettings: monaco.languages.html.Options;
@ -26,26 +25,54 @@ export class HTMLWorker {
// not yet suported // not yet suported
return Promise.resolve([]); return Promise.resolve([]);
} }
async doComplete(uri: string, position: htmlService.Position): Promise<htmlService.CompletionList> { async doComplete(
uri: string,
position: htmlService.Position
): Promise<htmlService.CompletionList> {
let document = this._getTextDocument(uri); let document = this._getTextDocument(uri);
let htmlDocument = this._languageService.parseHTMLDocument(document); let htmlDocument = this._languageService.parseHTMLDocument(document);
return Promise.resolve(this._languageService.doComplete(document, position, htmlDocument, this._languageSettings && this._languageSettings.suggest)); return Promise.resolve(
this._languageService.doComplete(
document,
position,
htmlDocument,
this._languageSettings && this._languageSettings.suggest
)
);
} }
async format(uri: string, range: htmlService.Range, options: htmlService.FormattingOptions): Promise<htmlService.TextEdit[]> { async format(
uri: string,
range: htmlService.Range,
options: htmlService.FormattingOptions
): Promise<htmlService.TextEdit[]> {
let document = this._getTextDocument(uri); let document = this._getTextDocument(uri);
let textEdits = this._languageService.format(document, range, this._languageSettings && this._languageSettings.format); let textEdits = this._languageService.format(
document,
range,
this._languageSettings && this._languageSettings.format
);
return Promise.resolve(textEdits); return Promise.resolve(textEdits);
} }
async doHover(uri: string, position: htmlService.Position): Promise<htmlService.Hover> { async doHover(
uri: string,
position: htmlService.Position
): Promise<htmlService.Hover> {
let document = this._getTextDocument(uri); let document = this._getTextDocument(uri);
let htmlDocument = this._languageService.parseHTMLDocument(document); let htmlDocument = this._languageService.parseHTMLDocument(document);
let hover = this._languageService.doHover(document, position, htmlDocument); let hover = this._languageService.doHover(document, position, htmlDocument);
return Promise.resolve(hover); return Promise.resolve(hover);
} }
async findDocumentHighlights(uri: string, position: htmlService.Position): Promise<htmlService.DocumentHighlight[]> { async findDocumentHighlights(
uri: string,
position: htmlService.Position
): Promise<htmlService.DocumentHighlight[]> {
let document = this._getTextDocument(uri); let document = this._getTextDocument(uri);
let htmlDocument = this._languageService.parseHTMLDocument(document); let htmlDocument = this._languageService.parseHTMLDocument(document);
let highlights = this._languageService.findDocumentHighlights(document, position, htmlDocument); let highlights = this._languageService.findDocumentHighlights(
document,
position,
htmlDocument
);
return Promise.resolve(highlights); return Promise.resolve(highlights);
} }
async findDocumentLinks(uri: string): Promise<htmlService.DocumentLink[]> { async findDocumentLinks(uri: string): Promise<htmlService.DocumentLink[]> {
@ -53,33 +80,58 @@ export class HTMLWorker {
let links = this._languageService.findDocumentLinks(document, null); let links = this._languageService.findDocumentLinks(document, null);
return Promise.resolve(links); return Promise.resolve(links);
} }
async findDocumentSymbols(uri: string): Promise<htmlService.SymbolInformation[]> { async findDocumentSymbols(
uri: string
): Promise<htmlService.SymbolInformation[]> {
let document = this._getTextDocument(uri); let document = this._getTextDocument(uri);
let htmlDocument = this._languageService.parseHTMLDocument(document); let htmlDocument = this._languageService.parseHTMLDocument(document);
let symbols = this._languageService.findDocumentSymbols(document, htmlDocument); let symbols = this._languageService.findDocumentSymbols(
document,
htmlDocument
);
return Promise.resolve(symbols); return Promise.resolve(symbols);
} }
async getFoldingRanges(uri: string, context?: { rangeLimit?: number; }): Promise<htmlService.FoldingRange[]> { async getFoldingRanges(
uri: string,
context?: { rangeLimit?: number }
): Promise<htmlService.FoldingRange[]> {
let document = this._getTextDocument(uri); let document = this._getTextDocument(uri);
let ranges = this._languageService.getFoldingRanges(document, context); let ranges = this._languageService.getFoldingRanges(document, context);
return Promise.resolve(ranges); return Promise.resolve(ranges);
} }
async getSelectionRanges(uri: string, positions: htmlService.Position[]): Promise<htmlService.SelectionRange[]> { async getSelectionRanges(
uri: string,
positions: htmlService.Position[]
): Promise<htmlService.SelectionRange[]> {
let document = this._getTextDocument(uri); let document = this._getTextDocument(uri);
let ranges = this._languageService.getSelectionRanges(document, positions); let ranges = this._languageService.getSelectionRanges(document, positions);
return Promise.resolve(ranges); return Promise.resolve(ranges);
} }
async doRename(uri: string, position: htmlService.Position, newName: string): Promise<htmlService.WorkspaceEdit> { async doRename(
uri: string,
position: htmlService.Position,
newName: string
): Promise<htmlService.WorkspaceEdit> {
let document = this._getTextDocument(uri); let document = this._getTextDocument(uri);
let htmlDocument = this._languageService.parseHTMLDocument(document); let htmlDocument = this._languageService.parseHTMLDocument(document);
let renames = this._languageService.doRename(document, position, newName, htmlDocument); let renames = this._languageService.doRename(
document,
position,
newName,
htmlDocument
);
return Promise.resolve(renames); return Promise.resolve(renames);
} }
private _getTextDocument(uri: string): htmlService.TextDocument { private _getTextDocument(uri: string): htmlService.TextDocument {
let models = this._ctx.getMirrorModels(); let models = this._ctx.getMirrorModels();
for (let model of models) { for (let model of models) {
if (model.uri.toString() === uri) { if (model.uri.toString() === uri) {
return htmlService.TextDocument.create(uri, this._languageId, model.version, model.getValue()); return htmlService.TextDocument.create(
uri,
this._languageId,
model.version,
model.getValue()
);
} }
} }
return null; return null;
@ -91,6 +143,9 @@ export interface ICreateData {
languageSettings: monaco.languages.html.Options; languageSettings: monaco.languages.html.Options;
} }
export function create(ctx: IWorkerContext, createData: ICreateData): HTMLWorker { export function create(
ctx: IWorkerContext,
createData: ICreateData
): HTMLWorker {
return new HTMLWorker(ctx, createData); return new HTMLWorker(ctx, createData);
} }

758
src/languageFeatures.ts
View file

@ -15,19 +15,21 @@ import Range = monaco.Range;
import CancellationToken = monaco.CancellationToken; import CancellationToken = monaco.CancellationToken;
import IDisposable = monaco.IDisposable; import IDisposable = monaco.IDisposable;
export interface WorkerAccessor { export interface WorkerAccessor {
(...more: Uri[]): Promise<HTMLWorker> (...more: Uri[]): Promise<HTMLWorker>;
} }
// --- diagnostics --- --- // --- diagnostics --- ---
export class DiagnosticsAdapter { export class DiagnosticsAdapter {
private _disposables: IDisposable[] = []; private _disposables: IDisposable[] = [];
private _listener: { [uri: string]: IDisposable } = Object.create(null); private _listener: { [uri: string]: IDisposable } = Object.create(null);
constructor(private _languageId: string, private _worker: WorkerAccessor, defaults: LanguageServiceDefaultsImpl) { constructor(
private _languageId: string,
private _worker: WorkerAccessor,
defaults: LanguageServiceDefaultsImpl
) {
const onModelAdd = (model: monaco.editor.IModel): void => { const onModelAdd = (model: monaco.editor.IModel): void => {
const modeId = model.getModeId(); const modeId = model.getModeId();
if (modeId !== this._languageId) { if (modeId !== this._languageId) {
@ -54,22 +56,28 @@ export class DiagnosticsAdapter {
}; };
this._disposables.push(monaco.editor.onDidCreateModel(onModelAdd)); this._disposables.push(monaco.editor.onDidCreateModel(onModelAdd));
this._disposables.push(monaco.editor.onWillDisposeModel(model => { this._disposables.push(
onModelRemoved(model); monaco.editor.onWillDisposeModel((model) => {
})); onModelRemoved(model);
this._disposables.push(monaco.editor.onDidChangeModelLanguage(event => { })
onModelRemoved(event.model); );
onModelAdd(event.model); this._disposables.push(
})); monaco.editor.onDidChangeModelLanguage((event) => {
onModelRemoved(event.model);
onModelAdd(event.model);
})
);
this._disposables.push(defaults.onDidChange(_ => { this._disposables.push(
monaco.editor.getModels().forEach(model => { defaults.onDidChange((_) => {
if (model.getModeId() === this._languageId) { monaco.editor.getModels().forEach((model) => {
onModelRemoved(model); if (model.getModeId() === this._languageId) {
onModelAdd(model); onModelRemoved(model);
} onModelAdd(model);
}); }
})); });
})
);
this._disposables.push({ this._disposables.push({
dispose: () => { dispose: () => {
@ -83,36 +91,49 @@ export class DiagnosticsAdapter {
} }
public dispose(): void { public dispose(): void {
this._disposables.forEach(d => d && d.dispose()); this._disposables.forEach((d) => d && d.dispose());
this._disposables = []; this._disposables = [];
} }
private _doValidate(resource: Uri, languageId: string): void { private _doValidate(resource: Uri, languageId: string): void {
this._worker(resource).then(worker => { this._worker(resource)
return worker.doValidation(resource.toString()).then(diagnostics => { .then((worker) => {
const markers = diagnostics.map(d => toDiagnostics(resource, d)); return worker.doValidation(resource.toString()).then((diagnostics) => {
monaco.editor.setModelMarkers(monaco.editor.getModel(resource), languageId, markers); const markers = diagnostics.map((d) => toDiagnostics(resource, d));
monaco.editor.setModelMarkers(
monaco.editor.getModel(resource),
languageId,
markers
);
});
})
.then(undefined, (err) => {
console.error(err);
}); });
}).then(undefined, err => {
console.error(err);
});
} }
} }
function toSeverity(lsSeverity: number): monaco.MarkerSeverity { function toSeverity(lsSeverity: number): monaco.MarkerSeverity {
switch (lsSeverity) { switch (lsSeverity) {
case htmlService.DiagnosticSeverity.Error: return monaco.MarkerSeverity.Error; case htmlService.DiagnosticSeverity.Error:
case htmlService.DiagnosticSeverity.Warning: return monaco.MarkerSeverity.Warning; return monaco.MarkerSeverity.Error;
case htmlService.DiagnosticSeverity.Information: return monaco.MarkerSeverity.Info; case htmlService.DiagnosticSeverity.Warning:
case htmlService.DiagnosticSeverity.Hint: return monaco.MarkerSeverity.Hint; return monaco.MarkerSeverity.Warning;
case htmlService.DiagnosticSeverity.Information:
return monaco.MarkerSeverity.Info;
case htmlService.DiagnosticSeverity.Hint:
return monaco.MarkerSeverity.Hint;
default: default:
return monaco.MarkerSeverity.Info; return monaco.MarkerSeverity.Info;
} }
} }
function toDiagnostics(resource: Uri, diag: htmlService.Diagnostic): monaco.editor.IMarkerData { function toDiagnostics(
const code = typeof diag.code === 'number' ? String(diag.code) : <string>diag.code; resource: Uri,
diag: htmlService.Diagnostic
): monaco.editor.IMarkerData {
const code =
typeof diag.code === 'number' ? String(diag.code) : <string>diag.code;
return { return {
severity: toSeverity(diag.severity), severity: toSeverity(diag.severity),
@ -139,138 +160,212 @@ function fromRange(range: Range): htmlService.Range {
if (!range) { if (!range) {
return void 0; return void 0;
} }
return { start: fromPosition(range.getStartPosition()), end: fromPosition(range.getEndPosition()) }; return {
start: fromPosition(range.getStartPosition()),
end: fromPosition(range.getEndPosition())
};
} }
function toRange(range: htmlService.Range): Range { function toRange(range: htmlService.Range): Range {
if (!range) { if (!range) {
return void 0; return void 0;
} }
return new Range(range.start.line + 1, range.start.character + 1, range.end.line + 1, range.end.character + 1); return new Range(
range.start.line + 1,
range.start.character + 1,
range.end.line + 1,
range.end.character + 1
);
} }
function toCompletionItemKind(kind: number): monaco.languages.CompletionItemKind { function toCompletionItemKind(
kind: number
): monaco.languages.CompletionItemKind {
const mItemKind = monaco.languages.CompletionItemKind; const mItemKind = monaco.languages.CompletionItemKind;
switch (kind) { switch (kind) {
case htmlService.CompletionItemKind.Text: return mItemKind.Text; case htmlService.CompletionItemKind.Text:
case htmlService.CompletionItemKind.Method: return mItemKind.Method; return mItemKind.Text;
case htmlService.CompletionItemKind.Function: return mItemKind.Function; case htmlService.CompletionItemKind.Method:
case htmlService.CompletionItemKind.Constructor: return mItemKind.Constructor; return mItemKind.Method;
case htmlService.CompletionItemKind.Field: return mItemKind.Field; case htmlService.CompletionItemKind.Function:
case htmlService.CompletionItemKind.Variable: return mItemKind.Variable; return mItemKind.Function;
case htmlService.CompletionItemKind.Class: return mItemKind.Class; case htmlService.CompletionItemKind.Constructor:
case htmlService.CompletionItemKind.Interface: return mItemKind.Interface; return mItemKind.Constructor;
case htmlService.CompletionItemKind.Module: return mItemKind.Module; case htmlService.CompletionItemKind.Field:
case htmlService.CompletionItemKind.Property: return mItemKind.Property; return mItemKind.Field;
case htmlService.CompletionItemKind.Unit: return mItemKind.Unit; case htmlService.CompletionItemKind.Variable:
case htmlService.CompletionItemKind.Value: return mItemKind.Value; return mItemKind.Variable;
case htmlService.CompletionItemKind.Enum: return mItemKind.Enum; case htmlService.CompletionItemKind.Class:
case htmlService.CompletionItemKind.Keyword: return mItemKind.Keyword; return mItemKind.Class;
case htmlService.CompletionItemKind.Snippet: return mItemKind.Snippet; case htmlService.CompletionItemKind.Interface:
case htmlService.CompletionItemKind.Color: return mItemKind.Color; return mItemKind.Interface;
case htmlService.CompletionItemKind.File: return mItemKind.File; case htmlService.CompletionItemKind.Module:
case htmlService.CompletionItemKind.Reference: return mItemKind.Reference; return mItemKind.Module;
case htmlService.CompletionItemKind.Property:
return mItemKind.Property;
case htmlService.CompletionItemKind.Unit:
return mItemKind.Unit;
case htmlService.CompletionItemKind.Value:
return mItemKind.Value;
case htmlService.CompletionItemKind.Enum:
return mItemKind.Enum;
case htmlService.CompletionItemKind.Keyword:
return mItemKind.Keyword;
case htmlService.CompletionItemKind.Snippet:
return mItemKind.Snippet;
case htmlService.CompletionItemKind.Color:
return mItemKind.Color;
case htmlService.CompletionItemKind.File:
return mItemKind.File;
case htmlService.CompletionItemKind.Reference:
return mItemKind.Reference;
} }
return mItemKind.Property; return mItemKind.Property;
} }
function fromCompletionItemKind(kind: monaco.languages.CompletionItemKind): htmlService.CompletionItemKind { function fromCompletionItemKind(
kind: monaco.languages.CompletionItemKind
): htmlService.CompletionItemKind {
const mItemKind = monaco.languages.CompletionItemKind; const mItemKind = monaco.languages.CompletionItemKind;
switch (kind) { switch (kind) {
case mItemKind.Text: return htmlService.CompletionItemKind.Text; case mItemKind.Text:
case mItemKind.Method: return htmlService.CompletionItemKind.Method; return htmlService.CompletionItemKind.Text;
case mItemKind.Function: return htmlService.CompletionItemKind.Function; case mItemKind.Method:
case mItemKind.Constructor: return htmlService.CompletionItemKind.Constructor; return htmlService.CompletionItemKind.Method;
case mItemKind.Field: return htmlService.CompletionItemKind.Field; case mItemKind.Function:
case mItemKind.Variable: return htmlService.CompletionItemKind.Variable; return htmlService.CompletionItemKind.Function;
case mItemKind.Class: return htmlService.CompletionItemKind.Class; case mItemKind.Constructor:
case mItemKind.Interface: return htmlService.CompletionItemKind.Interface; return htmlService.CompletionItemKind.Constructor;
case mItemKind.Module: return htmlService.CompletionItemKind.Module; case mItemKind.Field:
case mItemKind.Property: return htmlService.CompletionItemKind.Property; return htmlService.CompletionItemKind.Field;
case mItemKind.Unit: return htmlService.CompletionItemKind.Unit; case mItemKind.Variable:
case mItemKind.Value: return htmlService.CompletionItemKind.Value; return htmlService.CompletionItemKind.Variable;
case mItemKind.Enum: return htmlService.CompletionItemKind.Enum; case mItemKind.Class:
case mItemKind.Keyword: return htmlService.CompletionItemKind.Keyword; return htmlService.CompletionItemKind.Class;
case mItemKind.Snippet: return htmlService.CompletionItemKind.Snippet; case mItemKind.Interface:
case mItemKind.Color: return htmlService.CompletionItemKind.Color; return htmlService.CompletionItemKind.Interface;
case mItemKind.File: return htmlService.CompletionItemKind.File; case mItemKind.Module:
case mItemKind.Reference: return htmlService.CompletionItemKind.Reference; return htmlService.CompletionItemKind.Module;
case mItemKind.Property:
return htmlService.CompletionItemKind.Property;
case mItemKind.Unit:
return htmlService.CompletionItemKind.Unit;
case mItemKind.Value:
return htmlService.CompletionItemKind.Value;
case mItemKind.Enum:
return htmlService.CompletionItemKind.Enum;
case mItemKind.Keyword:
return htmlService.CompletionItemKind.Keyword;
case mItemKind.Snippet:
return htmlService.CompletionItemKind.Snippet;
case mItemKind.Color:
return htmlService.CompletionItemKind.Color;
case mItemKind.File:
return htmlService.CompletionItemKind.File;
case mItemKind.Reference:
return htmlService.CompletionItemKind.Reference;
} }
return htmlService.CompletionItemKind.Property; return htmlService.CompletionItemKind.Property;
} }
function toTextEdit(textEdit: htmlService.TextEdit): monaco.editor.ISingleEditOperation { function toTextEdit(
textEdit: htmlService.TextEdit
): monaco.editor.ISingleEditOperation {
if (!textEdit) { if (!textEdit) {
return void 0; return void 0;
} }
return { return {
range: toRange(textEdit.range), range: toRange(textEdit.range),
text: textEdit.newText text: textEdit.newText
} };
} }
export class CompletionAdapter implements monaco.languages.CompletionItemProvider { export class CompletionAdapter
implements monaco.languages.CompletionItemProvider {
constructor(private _worker: WorkerAccessor) { constructor(private _worker: WorkerAccessor) {}
}
public get triggerCharacters(): string[] { public get triggerCharacters(): string[] {
return ['.', ':', '<', '"', '=', '/']; return ['.', ':', '<', '"', '=', '/'];
} }
provideCompletionItems(model: monaco.editor.IReadOnlyModel, position: Position, context: monaco.languages.CompletionContext, token: CancellationToken): Promise<monaco.languages.CompletionList> { provideCompletionItems(
model: monaco.editor.IReadOnlyModel,
position: Position,
context: monaco.languages.CompletionContext,
token: CancellationToken
): Promise<monaco.languages.CompletionList> {
const resource = model.uri; const resource = model.uri;
return this._worker(resource).then(worker => { return this._worker(resource)
return worker.doComplete(resource.toString(), fromPosition(position)); .then((worker) => {
}).then(info => { return worker.doComplete(resource.toString(), fromPosition(position));
if (!info) { })
return; .then((info) => {
} if (!info) {
const wordInfo = model.getWordUntilPosition(position); return;
const wordRange = new Range(position.lineNumber, wordInfo.startColumn, position.lineNumber, wordInfo.endColumn); }
const wordInfo = model.getWordUntilPosition(position);
const wordRange = new Range(
position.lineNumber,
wordInfo.startColumn,
position.lineNumber,
wordInfo.endColumn
);
const items: monaco.languages.CompletionItem[] = info.items.map(entry => { const items: monaco.languages.CompletionItem[] = info.items.map(
const item: monaco.languages.CompletionItem = { (entry) => {
label: entry.label, const item: monaco.languages.CompletionItem = {
insertText: entry.insertText || entry.label, label: entry.label,
sortText: entry.sortText, insertText: entry.insertText || entry.label,
filterText: entry.filterText, sortText: entry.sortText,
documentation: entry.documentation, filterText: entry.filterText,
detail: entry.detail, documentation: entry.documentation,
range: wordRange, detail: entry.detail,
kind: toCompletionItemKind(entry.kind), range: wordRange,
kind: toCompletionItemKind(entry.kind)
};
if (entry.textEdit) {
item.range = toRange(entry.textEdit.range);
item.insertText = entry.textEdit.newText;
}
if (entry.additionalTextEdits) {
item.additionalTextEdits = entry.additionalTextEdits.map(
toTextEdit
);
}
if (
entry.insertTextFormat === htmlService.InsertTextFormat.Snippet
) {
item.insertTextRules =
monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet;
}
return item;
}
);
return {
isIncomplete: info.isIncomplete,
suggestions: items
}; };
if (entry.textEdit) {
item.range = toRange(entry.textEdit.range);
item.insertText = entry.textEdit.newText;
}
if (entry.additionalTextEdits) {
item.additionalTextEdits = entry.additionalTextEdits.map(toTextEdit)
}
if (entry.insertTextFormat === htmlService.InsertTextFormat.Snippet) {
item.insertTextRules = monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet;
}
return item;
}); });
return {
isIncomplete: info.isIncomplete,
suggestions: items
};
});
} }
} }
// --- hover ------ // --- hover ------
function isMarkupContent(thing: any): thing is htmlService.MarkupContent { function isMarkupContent(thing: any): thing is htmlService.MarkupContent {
return thing && typeof thing === 'object' && typeof (<htmlService.MarkupContent>thing).kind === 'string'; return (
thing &&
typeof thing === 'object' &&
typeof (<htmlService.MarkupContent>thing).kind === 'string'
);
} }
function toMarkdownString(entry: htmlService.MarkupContent | htmlService.MarkedString): monaco.IMarkdownString { function toMarkdownString(
entry: htmlService.MarkupContent | htmlService.MarkedString
): monaco.IMarkdownString {
if (typeof entry === 'string') { if (typeof entry === 'string') {
return { return {
value: entry value: entry
@ -290,7 +385,12 @@ function toMarkdownString(entry: htmlService.MarkupContent | htmlService.MarkedS
return { value: '```' + entry.language + '\n' + entry.value + '\n```\n' }; return { value: '```' + entry.language + '\n' + entry.value + '\n```\n' };
} }
function toMarkedStringArray(contents: htmlService.MarkupContent | htmlService.MarkedString | htmlService.MarkedString[]): monaco.IMarkdownString[] { function toMarkedStringArray(
contents:
| htmlService.MarkupContent
| htmlService.MarkedString
| htmlService.MarkedString[]
): monaco.IMarkdownString[] {
if (!contents) { if (!contents) {
return void 0; return void 0;
} }
@ -301,199 +401,271 @@ function toMarkedStringArray(contents: htmlService.MarkupContent | htmlService.M
} }
export class HoverAdapter implements monaco.languages.HoverProvider { export class HoverAdapter implements monaco.languages.HoverProvider {
constructor(private _worker: WorkerAccessor) {}
constructor(private _worker: WorkerAccessor) { provideHover(
} model: monaco.editor.IReadOnlyModel,
position: Position,
provideHover(model: monaco.editor.IReadOnlyModel, position: Position, token: CancellationToken): Promise<monaco.languages.Hover> { token: CancellationToken
): Promise<monaco.languages.Hover> {
let resource = model.uri; let resource = model.uri;
return this._worker(resource).then(worker => { return this._worker(resource)
return worker.doHover(resource.toString(), fromPosition(position)); .then((worker) => {
}).then(info => { return worker.doHover(resource.toString(), fromPosition(position));
if (!info) { })
return; .then((info) => {
} if (!info) {
return <monaco.languages.Hover>{ return;
range: toRange(info.range), }
contents: toMarkedStringArray(info.contents) return <monaco.languages.Hover>{
}; range: toRange(info.range),
}); contents: toMarkedStringArray(info.contents)
};
});
} }
} }
// --- document highlights ------ // --- document highlights ------
function toHighlighKind(kind: htmlService.DocumentHighlightKind): monaco.languages.DocumentHighlightKind { function toHighlighKind(
kind: htmlService.DocumentHighlightKind
): monaco.languages.DocumentHighlightKind {
const mKind = monaco.languages.DocumentHighlightKind; const mKind = monaco.languages.DocumentHighlightKind;
switch (kind) { switch (kind) {
case htmlService.DocumentHighlightKind.Read: return mKind.Read; case htmlService.DocumentHighlightKind.Read:
case htmlService.DocumentHighlightKind.Write: return mKind.Write; return mKind.Read;
case htmlService.DocumentHighlightKind.Text: return mKind.Text; case htmlService.DocumentHighlightKind.Write:
return mKind.Write;
case htmlService.DocumentHighlightKind.Text:
return mKind.Text;
} }
return mKind.Text; return mKind.Text;
} }
export class DocumentHighlightAdapter
implements monaco.languages.DocumentHighlightProvider {
constructor(private _worker: WorkerAccessor) {}
export class DocumentHighlightAdapter implements monaco.languages.DocumentHighlightProvider { public provideDocumentHighlights(
model: monaco.editor.IReadOnlyModel,
constructor(private _worker: WorkerAccessor) { position: Position,
} token: CancellationToken
): Promise<monaco.languages.DocumentHighlight[]> {
public provideDocumentHighlights(model: monaco.editor.IReadOnlyModel, position: Position, token: CancellationToken): Promise<monaco.languages.DocumentHighlight[]> {
const resource = model.uri; const resource = model.uri;
return this._worker(resource).then(worker => worker.findDocumentHighlights(resource.toString(), fromPosition(position))).then(items => { return this._worker(resource)
if (!items) { .then((worker) =>
return; worker.findDocumentHighlights(
} resource.toString(),
return items.map(item => ({ fromPosition(position)
range: toRange(item.range), )
kind: toHighlighKind(item.kind) )
})); .then((items) => {
}); if (!items) {
return;
}
return items.map((item) => ({
range: toRange(item.range),
kind: toHighlighKind(item.kind)
}));
});
} }
} }
// --- document symbols ------ // --- document symbols ------
function toSymbolKind(kind: htmlService.SymbolKind): monaco.languages.SymbolKind { function toSymbolKind(
kind: htmlService.SymbolKind
): monaco.languages.SymbolKind {
let mKind = monaco.languages.SymbolKind; let mKind = monaco.languages.SymbolKind;
switch (kind) { switch (kind) {
case htmlService.SymbolKind.File: return mKind.Array; case htmlService.SymbolKind.File:
case htmlService.SymbolKind.Module: return mKind.Module; return mKind.Array;
case htmlService.SymbolKind.Namespace: return mKind.Namespace; case htmlService.SymbolKind.Module:
case htmlService.SymbolKind.Package: return mKind.Package; return mKind.Module;
case htmlService.SymbolKind.Class: return mKind.Class; case htmlService.SymbolKind.Namespace:
case htmlService.SymbolKind.Method: return mKind.Method; return mKind.Namespace;
case htmlService.SymbolKind.Property: return mKind.Property; case htmlService.SymbolKind.Package:
case htmlService.SymbolKind.Field: return mKind.Field; return mKind.Package;
case htmlService.SymbolKind.Constructor: return mKind.Constructor; case htmlService.SymbolKind.Class:
case htmlService.SymbolKind.Enum: return mKind.Enum; return mKind.Class;
case htmlService.SymbolKind.Interface: return mKind.Interface; case htmlService.SymbolKind.Method:
case htmlService.SymbolKind.Function: return mKind.Function; return mKind.Method;
case htmlService.SymbolKind.Variable: return mKind.Variable; case htmlService.SymbolKind.Property:
case htmlService.SymbolKind.Constant: return mKind.Constant; return mKind.Property;
case htmlService.SymbolKind.String: return mKind.String; case htmlService.SymbolKind.Field:
case htmlService.SymbolKind.Number: return mKind.Number; return mKind.Field;
case htmlService.SymbolKind.Boolean: return mKind.Boolean; case htmlService.SymbolKind.Constructor:
case htmlService.SymbolKind.Array: return mKind.Array; return mKind.Constructor;
case htmlService.SymbolKind.Enum:
return mKind.Enum;
case htmlService.SymbolKind.Interface:
return mKind.Interface;
case htmlService.SymbolKind.Function:
return mKind.Function;
case htmlService.SymbolKind.Variable:
return mKind.Variable;
case htmlService.SymbolKind.Constant:
return mKind.Constant;
case htmlService.SymbolKind.String:
return mKind.String;
case htmlService.SymbolKind.Number:
return mKind.Number;
case htmlService.SymbolKind.Boolean:
return mKind.Boolean;
case htmlService.SymbolKind.Array:
return mKind.Array;
} }
return mKind.Function; return mKind.Function;
} }
export class DocumentSymbolAdapter implements monaco.languages.DocumentSymbolProvider { export class DocumentSymbolAdapter
implements monaco.languages.DocumentSymbolProvider {
constructor(private _worker: WorkerAccessor) {}
constructor(private _worker: WorkerAccessor) { public provideDocumentSymbols(
} model: monaco.editor.IReadOnlyModel,
token: CancellationToken
public provideDocumentSymbols(model: monaco.editor.IReadOnlyModel, token: CancellationToken): Promise<monaco.languages.DocumentSymbol[]> { ): Promise<monaco.languages.DocumentSymbol[]> {
const resource = model.uri; const resource = model.uri;
return this._worker(resource).then(worker => worker.findDocumentSymbols(resource.toString())).then(items => { return this._worker(resource)
if (!items) { .then((worker) => worker.findDocumentSymbols(resource.toString()))
return; .then((items) => {
} if (!items) {
return items.map(item => ({ return;
name: item.name, }
detail: '', return items.map((item) => ({
containerName: item.containerName, name: item.name,
kind: toSymbolKind(item.kind), detail: '',
tags: [], containerName: item.containerName,
range: toRange(item.location.range), kind: toSymbolKind(item.kind),
selectionRange: toRange(item.location.range) tags: [],
})); range: toRange(item.location.range),
}); selectionRange: toRange(item.location.range)
}));
});
} }
} }
export class DocumentLinkAdapter implements monaco.languages.LinkProvider { export class DocumentLinkAdapter implements monaco.languages.LinkProvider {
constructor(private _worker: WorkerAccessor) {}
constructor(private _worker: WorkerAccessor) { public provideLinks(
} model: monaco.editor.IReadOnlyModel,
token: CancellationToken
public provideLinks(model: monaco.editor.IReadOnlyModel, token: CancellationToken): Promise<monaco.languages.ILinksList> { ): Promise<monaco.languages.ILinksList> {
const resource = model.uri; const resource = model.uri;
return this._worker(resource).then(worker => worker.findDocumentLinks(resource.toString())).then(items => { return this._worker(resource)
if (!items) { .then((worker) => worker.findDocumentLinks(resource.toString()))
return; .then((items) => {
} if (!items) {
return { return;
links: items.map(item => ({ }
range: toRange(item.range), return {
url: item.target links: items.map((item) => ({
})) range: toRange(item.range),
}; url: item.target
}); }))
};
});
} }
} }
function fromFormattingOptions(
function fromFormattingOptions(options: monaco.languages.FormattingOptions): htmlService.FormattingOptions { options: monaco.languages.FormattingOptions
): htmlService.FormattingOptions {
return { return {
tabSize: options.tabSize, tabSize: options.tabSize,
insertSpaces: options.insertSpaces insertSpaces: options.insertSpaces
}; };
} }
export class DocumentFormattingEditProvider implements monaco.languages.DocumentFormattingEditProvider { export class DocumentFormattingEditProvider
implements monaco.languages.DocumentFormattingEditProvider {
constructor(private _worker: WorkerAccessor) {}
constructor(private _worker: WorkerAccessor) { public provideDocumentFormattingEdits(
} model: monaco.editor.IReadOnlyModel,
options: monaco.languages.FormattingOptions,
public provideDocumentFormattingEdits(model: monaco.editor.IReadOnlyModel, options: monaco.languages.FormattingOptions, token: CancellationToken): Promise<monaco.editor.ISingleEditOperation[]> { token: CancellationToken
): Promise<monaco.editor.ISingleEditOperation[]> {
const resource = model.uri; const resource = model.uri;
return this._worker(resource).then(worker => { return this._worker(resource).then((worker) => {
return worker.format(resource.toString(), null, fromFormattingOptions(options)).then(edits => { return worker
if (!edits || edits.length === 0) { .format(resource.toString(), null, fromFormattingOptions(options))
return; .then((edits) => {
} if (!edits || edits.length === 0) {
return edits.map(toTextEdit); return;
}); }
return edits.map(toTextEdit);
});
}); });
} }
} }
export class DocumentRangeFormattingEditProvider implements monaco.languages.DocumentRangeFormattingEditProvider { export class DocumentRangeFormattingEditProvider
implements monaco.languages.DocumentRangeFormattingEditProvider {
constructor(private _worker: WorkerAccessor) {}
constructor(private _worker: WorkerAccessor) { public provideDocumentRangeFormattingEdits(
} model: monaco.editor.IReadOnlyModel,
range: Range,
public provideDocumentRangeFormattingEdits(model: monaco.editor.IReadOnlyModel, range: Range, options: monaco.languages.FormattingOptions, token: CancellationToken): Promise<monaco.editor.ISingleEditOperation[]> { options: monaco.languages.FormattingOptions,
token: CancellationToken
): Promise<monaco.editor.ISingleEditOperation[]> {
const resource = model.uri; const resource = model.uri;
return this._worker(resource).then(worker => { return this._worker(resource).then((worker) => {
return worker.format(resource.toString(), fromRange(range), fromFormattingOptions(options)).then(edits => { return worker
if (!edits || edits.length === 0) { .format(
return; resource.toString(),
} fromRange(range),
return edits.map(toTextEdit); fromFormattingOptions(options)
}); )
.then((edits) => {
if (!edits || edits.length === 0) {
return;
}
return edits.map(toTextEdit);
});
}); });
} }
} }
export class RenameAdapter implements monaco.languages.RenameProvider { export class RenameAdapter implements monaco.languages.RenameProvider {
constructor(private _worker: WorkerAccessor) {}
constructor(private _worker: WorkerAccessor) { provideRenameEdits(
} model: monaco.editor.IReadOnlyModel,
position: Position,
provideRenameEdits(model: monaco.editor.IReadOnlyModel, position: Position, newName: string, token: CancellationToken): Promise<monaco.languages.WorkspaceEdit> { newName: string,
token: CancellationToken
): Promise<monaco.languages.WorkspaceEdit> {
const resource = model.uri; const resource = model.uri;
return this._worker(resource).then(worker => { return this._worker(resource)
return worker.doRename(resource.toString(), fromPosition(position), newName); .then((worker) => {
}).then(edit => { return worker.doRename(
return toWorkspaceEdit(edit); resource.toString(),
}); fromPosition(position),
newName
);
})
.then((edit) => {
return toWorkspaceEdit(edit);
});
} }
} }
function toWorkspaceEdit(edit: htmlService.WorkspaceEdit): monaco.languages.WorkspaceEdit { function toWorkspaceEdit(
edit: htmlService.WorkspaceEdit
): monaco.languages.WorkspaceEdit {
if (!edit || !edit.changes) { if (!edit || !edit.changes) {
return void 0; return void 0;
} }
@ -512,65 +684,85 @@ function toWorkspaceEdit(edit: htmlService.WorkspaceEdit): monaco.languages.Work
} }
return { return {
edits: resourceEdits edits: resourceEdits
} };
} }
export class FoldingRangeAdapter implements monaco.languages.FoldingRangeProvider { export class FoldingRangeAdapter
implements monaco.languages.FoldingRangeProvider {
constructor(private _worker: WorkerAccessor) {}
constructor(private _worker: WorkerAccessor) { public provideFoldingRanges(
} model: monaco.editor.IReadOnlyModel,
context: monaco.languages.FoldingContext,
public provideFoldingRanges(model: monaco.editor.IReadOnlyModel, context: monaco.languages.FoldingContext, token: CancellationToken): Promise<monaco.languages.FoldingRange[]> { token: CancellationToken
): Promise<monaco.languages.FoldingRange[]> {
const resource = model.uri; const resource = model.uri;
return this._worker(resource).then(worker => worker.getFoldingRanges(resource.toString(), context)).then(ranges => { return this._worker(resource)
if (!ranges) { .then((worker) => worker.getFoldingRanges(resource.toString(), context))
return; .then((ranges) => {
} if (!ranges) {
return ranges.map(range => { return;
const result: monaco.languages.FoldingRange = {
start: range.startLine + 1,
end: range.endLine + 1
};
if (typeof range.kind !== 'undefined') {
result.kind = toFoldingRangeKind(<htmlService.FoldingRangeKind>range.kind);
} }
return result; return ranges.map((range) => {
const result: monaco.languages.FoldingRange = {
start: range.startLine + 1,
end: range.endLine + 1
};
if (typeof range.kind !== 'undefined') {
result.kind = toFoldingRangeKind(
<htmlService.FoldingRangeKind>range.kind
);
}
return result;
});
}); });
});
} }
} }
function toFoldingRangeKind(kind: htmlService.FoldingRangeKind): monaco.languages.FoldingRangeKind { function toFoldingRangeKind(
kind: htmlService.FoldingRangeKind
): monaco.languages.FoldingRangeKind {
switch (kind) { switch (kind) {
case htmlService.FoldingRangeKind.Comment: return monaco.languages.FoldingRangeKind.Comment; case htmlService.FoldingRangeKind.Comment:
case htmlService.FoldingRangeKind.Imports: return monaco.languages.FoldingRangeKind.Imports; return monaco.languages.FoldingRangeKind.Comment;
case htmlService.FoldingRangeKind.Region: return monaco.languages.FoldingRangeKind.Region; case htmlService.FoldingRangeKind.Imports:
return monaco.languages.FoldingRangeKind.Imports;
case htmlService.FoldingRangeKind.Region:
return monaco.languages.FoldingRangeKind.Region;
} }
} }
export class SelectionRangeAdapter implements monaco.languages.SelectionRangeProvider { export class SelectionRangeAdapter
implements monaco.languages.SelectionRangeProvider {
constructor(private _worker: WorkerAccessor) {}
constructor(private _worker: WorkerAccessor) { public provideSelectionRanges(
} model: monaco.editor.IReadOnlyModel,
positions: Position[],
public provideSelectionRanges(model: monaco.editor.IReadOnlyModel, positions: Position[], token: CancellationToken): Promise<monaco.languages.SelectionRange[][]> { token: CancellationToken
): Promise<monaco.languages.SelectionRange[][]> {
const resource = model.uri; const resource = model.uri;
return this._worker(resource).then(worker => worker.getSelectionRanges(resource.toString(), positions.map(fromPosition))).then(selectionRanges => { return this._worker(resource)
if (!selectionRanges) { .then((worker) =>
return; worker.getSelectionRanges(
} resource.toString(),
return selectionRanges.map(selectionRange => { positions.map(fromPosition)
const result: monaco.languages.SelectionRange[] = []; )
while (selectionRange) { )
result.push({ range: toRange(selectionRange.range) }); .then((selectionRanges) => {
selectionRange = selectionRange.parent; if (!selectionRanges) {
return;
} }
return result; return selectionRanges.map((selectionRange) => {
const result: monaco.languages.SelectionRange[] = [];
while (selectionRange) {
result.push({ range: toRange(selectionRange.range) });
selectionRange = selectionRange.parent;
}
return result;
});
}); });
});
} }
} }

59
src/monaco.contribution.ts
View file

@ -11,14 +11,20 @@ import IEvent = monaco.IEvent;
// --- HTML configuration and defaults --------- // --- HTML configuration and defaults ---------
export class LanguageServiceDefaultsImpl implements monaco.languages.html.LanguageServiceDefaults { export class LanguageServiceDefaultsImpl
implements monaco.languages.html.LanguageServiceDefaults {
private _onDidChange = new Emitter<monaco.languages.html.LanguageServiceDefaults>(); private _onDidChange = new Emitter<
monaco.languages.html.LanguageServiceDefaults
>();
private _options: monaco.languages.html.Options; private _options: monaco.languages.html.Options;
private _modeConfiguration: monaco.languages.html.ModeConfiguration; private _modeConfiguration: monaco.languages.html.ModeConfiguration;
private _languageId: string; private _languageId: string;
constructor(languageId: string, options: monaco.languages.html.Options, modeConfiguration: monaco.languages.html.ModeConfiguration) { constructor(
languageId: string,
options: monaco.languages.html.Options,
modeConfiguration: monaco.languages.html.ModeConfiguration
) {
this._languageId = languageId; this._languageId = languageId;
this.setOptions(options); this.setOptions(options);
this.setModeConfiguration(modeConfiguration); this.setModeConfiguration(modeConfiguration);
@ -45,17 +51,20 @@ export class LanguageServiceDefaultsImpl implements monaco.languages.html.Langua
this._onDidChange.fire(this); this._onDidChange.fire(this);
} }
setModeConfiguration(modeConfiguration: monaco.languages.html.ModeConfiguration): void { setModeConfiguration(
modeConfiguration: monaco.languages.html.ModeConfiguration
): void {
this._modeConfiguration = modeConfiguration || Object.create(null); this._modeConfiguration = modeConfiguration || Object.create(null);
this._onDidChange.fire(this); this._onDidChange.fire(this);
}; }
} }
const formatDefaults: Required<monaco.languages.html.HTMLFormatConfiguration> = { const formatDefaults: Required<monaco.languages.html.HTMLFormatConfiguration> = {
tabSize: 4, tabSize: 4,
insertSpaces: false, insertSpaces: false,
wrapLineLength: 120, wrapLineLength: 120,
unformatted: 'default": "a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, select, small, span, strong, sub, sup, textarea, tt, var', unformatted:
'default": "a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, select, small, span, strong, sub, sup, textarea, tt, var',
contentUnformatted: 'pre', contentUnformatted: 'pre',
indentInnerHtml: false, indentInnerHtml: false,
preserveNewLines: true, preserveNewLines: true,
@ -69,19 +78,21 @@ const formatDefaults: Required<monaco.languages.html.HTMLFormatConfiguration> =
const htmlOptionsDefault: Required<monaco.languages.html.Options> = { const htmlOptionsDefault: Required<monaco.languages.html.Options> = {
format: formatDefaults, format: formatDefaults,
suggest: { html5: true, angular1: true, ionic: true } suggest: { html5: true, angular1: true, ionic: true }
} };
const handlebarOptionsDefault: Required<monaco.languages.html.Options> = { const handlebarOptionsDefault: Required<monaco.languages.html.Options> = {
format: formatDefaults, format: formatDefaults,
suggest: { html5: true } suggest: { html5: true }
} };
const razorOptionsDefault: Required<monaco.languages.html.Options> = { const razorOptionsDefault: Required<monaco.languages.html.Options> = {
format: formatDefaults, format: formatDefaults,
suggest: { html5: true, razor: true } suggest: { html5: true, razor: true }
} };
function getConfigurationDefault(languageId: string): Required<monaco.languages.html.ModeConfiguration> { function getConfigurationDefault(
languageId: string
): Required<monaco.languages.html.ModeConfiguration> {
return { return {
completionItems: true, completionItems: true,
hovers: true, hovers: true,
@ -102,9 +113,21 @@ const htmlLanguageId = 'html';
const handlebarsLanguageId = 'handlebars'; const handlebarsLanguageId = 'handlebars';
const razorLanguageId = 'razor'; const razorLanguageId = 'razor';
const htmlDefaults = new LanguageServiceDefaultsImpl(htmlLanguageId, htmlOptionsDefault, getConfigurationDefault(htmlLanguageId)); const htmlDefaults = new LanguageServiceDefaultsImpl(
const handlebarDefaults = new LanguageServiceDefaultsImpl(handlebarsLanguageId, handlebarOptionsDefault, getConfigurationDefault(handlebarsLanguageId)); htmlLanguageId,
const razorDefaults = new LanguageServiceDefaultsImpl(razorLanguageId, razorOptionsDefault, getConfigurationDefault(razorLanguageId)); htmlOptionsDefault,
getConfigurationDefault(htmlLanguageId)
);
const handlebarDefaults = new LanguageServiceDefaultsImpl(
handlebarsLanguageId,
handlebarOptionsDefault,
getConfigurationDefault(handlebarsLanguageId)
);
const razorDefaults = new LanguageServiceDefaultsImpl(
razorLanguageId,
razorOptionsDefault,
getConfigurationDefault(razorLanguageId)
);
// Export API // Export API
function createAPI(): typeof monaco.languages.html { function createAPI(): typeof monaco.languages.html {
@ -112,7 +135,7 @@ function createAPI(): typeof monaco.languages.html {
htmlDefaults: htmlDefaults, htmlDefaults: htmlDefaults,
razorDefaults: razorDefaults, razorDefaults: razorDefaults,
handlebarDefaults: handlebarDefaults handlebarDefaults: handlebarDefaults
} };
} }
monaco.languages.html = createAPI(); monaco.languages.html = createAPI();
@ -123,11 +146,11 @@ function getMode(): Promise<typeof mode> {
} }
monaco.languages.onLanguage(htmlLanguageId, () => { monaco.languages.onLanguage(htmlLanguageId, () => {
getMode().then(mode => mode.setupMode(htmlDefaults)); getMode().then((mode) => mode.setupMode(htmlDefaults));
}); });
monaco.languages.onLanguage(handlebarsLanguageId, () => { monaco.languages.onLanguage(handlebarsLanguageId, () => {
getMode().then(mode => mode.setupMode(handlebarDefaults)); getMode().then((mode) => mode.setupMode(handlebarDefaults));
}); });
monaco.languages.onLanguage(razorLanguageId, () => { monaco.languages.onLanguage(razorLanguageId, () => {
getMode().then(mode => mode.setupMode(razorDefaults)); getMode().then((mode) => mode.setupMode(razorDefaults));
}); });

7
src/monaco.d.ts vendored
View file

@ -16,7 +16,11 @@ declare module monaco.languages.html {
readonly indentHandlebars: boolean; readonly indentHandlebars: boolean;
readonly endWithNewline: boolean; readonly endWithNewline: boolean;
readonly extraLiners: string; readonly extraLiners: string;
readonly wrapAttributes: 'auto' | 'force' | 'force-aligned' | 'force-expand-multiline'; readonly wrapAttributes:
| 'auto'
| 'force'
| 'force-aligned'
| 'force-expand-multiline';
} }
export interface CompletionConfiguration { export interface CompletionConfiguration {
@ -94,7 +98,6 @@ declare module monaco.languages.html {
* Defines whether the built-in documentRangeFormattingEdit provider is enabled. * Defines whether the built-in documentRangeFormattingEdit provider is enabled.
*/ */
readonly documentRangeFormattingEdits?: boolean; readonly documentRangeFormattingEdits?: boolean;
} }
export interface LanguageServiceDefaults { export interface LanguageServiceDefaults {

26
src/tsconfig.esm.json
View file

@ -1,15 +1,15 @@
{ {
"compilerOptions": { "compilerOptions": {
"module": "esnext", "module": "esnext",
"moduleResolution": "node", "moduleResolution": "node",
"outDir": "../out/esm", "outDir": "../out/esm",
"target": "es5", "target": "es5",
"lib": [ "lib": [
"dom", "dom",
"es5", "es5",
"es2015.collection", "es2015.collection",
"es2015.promise", "es2015.promise",
"es2015.iterable" "es2015.iterable"
] ]
} }
} }

26
src/tsconfig.json
View file

@ -1,15 +1,15 @@
{ {
"compilerOptions": { "compilerOptions": {
"module": "amd", "module": "amd",
"moduleResolution": "node", "moduleResolution": "node",
"outDir": "../out/amd", "outDir": "../out/amd",
"target": "es5", "target": "es5",
"lib": [ "lib": [
"dom", "dom",
"es5", "es5",
"es2015.collection", "es2015.collection",
"es2015.promise", "es2015.promise",
"es2015.iterable" "es2015.iterable"
] ]
} }
} }

19
src/workerManager.ts
View file

@ -13,7 +13,6 @@ import Uri = monaco.Uri;
const STOP_WHEN_IDLE_FOR = 2 * 60 * 1000; // 2min const STOP_WHEN_IDLE_FOR = 2 * 60 * 1000; // 2min
export class WorkerManager { export class WorkerManager {
private _defaults: LanguageServiceDefaultsImpl; private _defaults: LanguageServiceDefaultsImpl;
private _idleCheckInterval: number; private _idleCheckInterval: number;
private _lastUsedTime: number; private _lastUsedTime: number;
@ -27,7 +26,9 @@ export class WorkerManager {
this._worker = null; this._worker = null;
this._idleCheckInterval = setInterval(() => this._checkIfIdle(), 30 * 1000); this._idleCheckInterval = setInterval(() => this._checkIfIdle(), 30 * 1000);
this._lastUsedTime = 0; this._lastUsedTime = 0;
this._configChangeListener = this._defaults.onDidChange(() => this._stopWorker()); this._configChangeListener = this._defaults.onDidChange(() =>
this._stopWorker()
);
} }
private _stopWorker(): void { private _stopWorker(): void {
@ -59,7 +60,6 @@ export class WorkerManager {
if (!this._client) { if (!this._client) {
this._worker = monaco.editor.createWebWorker<HTMLWorker>({ this._worker = monaco.editor.createWebWorker<HTMLWorker>({
// module that exports the create() method and returns a `HTMLWorker` instance // module that exports the create() method and returns a `HTMLWorker` instance
moduleId: 'vs/language/html/htmlWorker', moduleId: 'vs/language/html/htmlWorker',
@ -80,10 +80,13 @@ export class WorkerManager {
getLanguageServiceWorker(...resources: Uri[]): Promise<HTMLWorker> { getLanguageServiceWorker(...resources: Uri[]): Promise<HTMLWorker> {
let _client: HTMLWorker; let _client: HTMLWorker;
return this._getClient().then((client) => { return this._getClient()
_client = client .then((client) => {
}).then(_ => { _client = client;
return this._worker.withSyncedResources(resources) })
}).then(_ => _client); .then((_) => {
return this._worker.withSyncedResources(resources);
})
.then((_) => _client);
} }
} }

144
test/index.html
View file

@ -1,73 +1,81 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" data-name="vs/editor/editor.main" href="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.css"> <link
</head> rel="stylesheet"
<body> data-name="vs/editor/editor.main"
href="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.css"
/>
</head>
<body>
<h2>Monaco Editor HTML test page</h2>
<div
id="container"
style="width: 800px; height: 600px; border: 1px solid grey"
></div>
<h2>Monaco Editor HTML test page</h2> <script>
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div> // Loading basic-languages to get the html language definition
var paths = {
'vs/basic-languages': '../node_modules/monaco-languages/release/dev',
'vs/language/html': '../release/dev',
vs: '../node_modules/monaco-editor-core/dev/vs'
};
if (document.location.protocol === 'http:') {
// Add support for running local http server
let testIndex = document.location.pathname.indexOf('/test/');
if (testIndex !== -1) {
let prefix = document.location.pathname.substr(0, testIndex);
paths['vs/language/html'] = prefix + '/release/dev';
}
}
var require = {
paths: paths
};
</script>
<script src="../node_modules/monaco-editor-core/dev/vs/loader.js"></script>
<script src="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.nls.js"></script>
<script src="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.js"></script>
<script> <script>
// Loading basic-languages to get the html language definition require([
var paths = { 'vs/basic-languages/monaco.contribution',
'vs/basic-languages': '../node_modules/monaco-languages/release/dev', 'vs/language/html/monaco.contribution'
'vs/language/html': '../release/dev', ], function () {
'vs': '../node_modules/monaco-editor-core/dev/vs' var editor = monaco.editor.create(
}; document.getElementById('container'),
if (document.location.protocol === 'http:') { {
// Add support for running local http server value: [
let testIndex = document.location.pathname.indexOf('/test/'); '<!DOCTYPE HTML>',
if (testIndex !== -1) { '<!--',
let prefix = document.location.pathname.substr(0, testIndex); ' Comments are overrated',
paths['vs/language/html'] = prefix + '/release/dev'; '-->',
} '<html>',
} '<head>',
var require = { ' <title>HTML Sample</title>',
paths: paths ' <meta http-equiv="X-UA-Compatible" content="IE=edge">',
}; ' <style type="text/css">',
</script> ' h1 {',
<script src="../node_modules/monaco-editor-core/dev/vs/loader.js"></script> ' color: #CCA3A3;',
<script src="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.nls.js"></script> ' }',
<script src="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.js"></script> ' </style>',
' <script type="text/javascript">',
<script> ' window.alert("I am a sample...");',
require([ ' var x = 3;',
'vs/basic-languages/monaco.contribution', ' </' + 'script>',
'vs/language/html/monaco.contribution' '</head>',
], function() { '<body>',
var editor = monaco.editor.create(document.getElementById('container'), { ' <h1>Heading No.1</h1>',
value: [ ' <input disabled type="button" value="Click me" />',
'<!DOCTYPE HTML>', '</body>',
'<!--', '</html>'
' Comments are overrated', ].join('\n'),
'-->', language: 'html'
'<html>', }
'<head>', );
' <title>HTML Sample</title>', });
' <meta http-equiv="X-UA-Compatible" content="IE=edge">', </script>
' <style type="text/css">', </body>
' h1 {',
' color: #CCA3A3;',
' }',
' </style>',
' <script type="text/javascript">',
' window.alert("I am a sample...");',
' var x = 3;',
' </'+'script>',
'</head>',
'<body>',
' <h1>Heading No.1</h1>',
' <input disabled type="button" value="Click me" />',
'</body>',
'</html>'
].join('\n'),
language: 'html'
});
});
</script>
</body>
</html> </html>