Run prettier

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

View file

@ -6,4 +6,4 @@
"**/release": true,
"**/out": true
}
}
}

View file

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

View file

@ -1,31 +1,33 @@
# Monaco HTML
HTML language plugin for the Monaco Editor. It provides the following features when editing HTML files:
* Code completion
* Formatting
* Document Highlights
* Link detection
* Syntax highlighting
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
in [Visual Studio Code](https://github.com/Microsoft/vscode) to power the HTML editing experience.
## Issues
Please file issues concering `monaco-html` in the [`monaco-editor` repository](https://github.com/Microsoft/monaco-editor/issues).
## Installing
This npm module is bundled and distributed in the [monaco-editor](https://www.npmjs.com/package/monaco-editor) npm module.
## Development
* `git clone https://github.com/Microsoft/monaco-html`
* `cd monaco-html`
* `npm install .`
* `npm run watch`
* open `$/monaco-html/test/index.html` in your favorite browser.
## License
[MIT](https://github.com/Microsoft/monaco-html/blob/master/LICENSE.md)
# Monaco HTML
HTML language plugin for the Monaco Editor. It provides the following features when editing HTML files:
- Code completion
- Formatting
- Document Highlights
- Link detection
- Syntax highlighting
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
in [Visual Studio Code](https://github.com/Microsoft/vscode) to power the HTML editing experience.
## Issues
Please file issues concering `monaco-html` in the [`monaco-editor` repository](https://github.com/Microsoft/monaco-editor/issues).
## Installing
This npm module is bundled and distributed in the [monaco-editor](https://www.npmjs.com/package/monaco-editor) npm module.
## Development
- `git clone https://github.com/Microsoft/monaco-html`
- `cd monaco-html`
- `npm install .`
- `npm run watch`
- open `$/monaco-html/test/index.html` in your favorite browser.
## License
[MIT](https://github.com/Microsoft/monaco-html/blob/master/LICENSE.md)

1572
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -1,36 +1,41 @@
{
"name": "monaco-html",
"version": "2.7.0",
"description": "HTML plugin for the Monaco Editor",
"scripts": {
"compile": "mrmdir ./out && tsc -p ./src/tsconfig.json && tsc -p ./src/tsconfig.esm.json",
"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",
"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",
"prettier": "prettier --write ."
},
"author": "Microsoft Corporation",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/Microsoft/monaco-html"
},
"bugs": {
"url": "https://github.com/Microsoft/monaco-editor/issues"
},
"devDependencies": {
"husky": "^4.2.5",
"monaco-editor-core": "0.20.0",
"monaco-languages": "^1.10.0",
"monaco-plugin-helpers": "^1.0.2",
"prettier": "^2.1.1",
"pretty-quick": "^3.0.0",
"requirejs": "^2.3.6",
"typescript": "^3.7.5",
"terser": "^4.6.3",
"vscode-html-languageservice": "3.0.4-next.12",
"vscode-languageserver-types": "3.15.0-next.9",
"vscode-languageserver-textdocument": "^1.0.0-next.5"
}
"name": "monaco-html",
"version": "2.7.0",
"description": "HTML plugin for the Monaco Editor",
"scripts": {
"compile": "mrmdir ./out && tsc -p ./src/tsconfig.json && tsc -p ./src/tsconfig.esm.json",
"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",
"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",
"prettier": "prettier --write ."
},
"author": "Microsoft Corporation",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/Microsoft/monaco-html"
},
"bugs": {
"url": "https://github.com/Microsoft/monaco-editor/issues"
},
"devDependencies": {
"husky": "^4.2.5",
"monaco-editor-core": "0.20.0",
"monaco-languages": "^1.10.0",
"monaco-plugin-helpers": "^1.0.2",
"prettier": "^2.1.1",
"pretty-quick": "^3.0.0",
"requirejs": "^2.3.6",
"typescript": "^3.7.5",
"terser": "^4.6.3",
"vscode-html-languageservice": "3.0.4-next.12",
"vscode-languageserver-types": "3.15.0-next.9",
"vscode-languageserver-textdocument": "^1.0.0-next.5"
},
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged"
}
}
}

View file

@ -1,7 +1,7 @@
const requirejs = require('requirejs');
const path = require('path');
const fs = require('fs');
const terser = require("terser");
const terser = require('terser');
const helpers = require('monaco-plugin-helpers');
const REPO_ROOT = path.resolve(__dirname, '..');
@ -25,49 +25,75 @@ bundleOne('htmlMode');
bundleOne('htmlWorker');
function bundleOne(moduleId, exclude) {
requirejs.optimize({
baseUrl: 'out/amd/',
name: 'vs/language/html/' + moduleId,
out: 'release/dev/' + moduleId + '.js',
exclude: exclude,
paths: {
'vs/language/html': REPO_ROOT + '/out/amd'
requirejs.optimize(
{
baseUrl: 'out/amd/',
name: 'vs/language/html/' + moduleId,
out: 'release/dev/' + moduleId + '.js',
exclude: exclude,
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',
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'
}]
}, 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);
})
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);
}
);
}

View file

@ -12,19 +12,13 @@ helpers.packageESM({
repoRoot: REPO_ROOT,
esmSource: 'out/esm',
esmDestination: 'release/esm',
entryPoints: [
'monaco.contribution.js',
'htmlMode.js',
'html.worker.js'
],
entryPoints: ['monaco.contribution.js', 'htmlMode.js', 'html.worker.js'],
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: [
'monaco-editor-core'
],
resolveSkip: ['monaco-editor-core'],
destinationFolderSimplification: {
'node_modules': '_deps',
node_modules: '_deps',
'vscode-languageserver-types/lib/esm': 'vscode-languageserver-types',
'vscode-uri/lib/esm': 'vscode-uri',
'vscode-html-languageservice/lib/esm': 'vscode-html-languageservice'

View file

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

View file

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

View file

@ -1,114 +1,195 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
'use strict';
import { WorkerManager } from './workerManager';
import { HTMLWorker } from './htmlWorker';
import { LanguageServiceDefaultsImpl } from './monaco.contribution';
import * as languageFeatures from './languageFeatures';
import Uri = monaco.Uri;
import IDisposable = monaco.IDisposable;
export function setupMode1(defaults: LanguageServiceDefaultsImpl): void {
const client = new WorkerManager(defaults);
const worker: languageFeatures.WorkerAccessor = (...uris: Uri[]): Promise<HTMLWorker> => {
return client.getLanguageServiceWorker(...uris);
};
let languageId = defaults.languageId;
// all modes
monaco.languages.registerCompletionItemProvider(languageId, new languageFeatures.CompletionAdapter(worker));
monaco.languages.registerHoverProvider(languageId, new languageFeatures.HoverAdapter(worker));
monaco.languages.registerDocumentHighlightProvider(languageId, new languageFeatures.DocumentHighlightAdapter(worker));
monaco.languages.registerLinkProvider(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
if (languageId === 'html') {
monaco.languages.registerDocumentFormattingEditProvider(languageId, new languageFeatures.DocumentFormattingEditProvider(worker));
monaco.languages.registerDocumentRangeFormattingEditProvider(languageId, new languageFeatures.DocumentRangeFormattingEditProvider(worker));
new languageFeatures.DiagnosticsAdapter(languageId, worker, defaults);
}
}
export function setupMode(defaults: LanguageServiceDefaultsImpl): IDisposable {
const disposables: IDisposable[] = [];
const providers: IDisposable[] = [];
const client = new WorkerManager(defaults);
disposables.push(client);
const worker: languageFeatures.WorkerAccessor = (...uris: Uri[]): Promise<HTMLWorker> => {
return client.getLanguageServiceWorker(...uris);
};
function registerProviders(): void {
const { languageId, modeConfiguration } = defaults;
disposeAll(providers);
if (modeConfiguration.completionItems) {
providers.push(monaco.languages.registerCompletionItemProvider(languageId, new languageFeatures.CompletionAdapter(worker)));
}
if (modeConfiguration.hovers) {
providers.push(monaco.languages.registerHoverProvider(languageId, new languageFeatures.HoverAdapter(worker)));
}
if (modeConfiguration.documentHighlights) {
providers.push(monaco.languages.registerDocumentHighlightProvider(languageId, new languageFeatures.DocumentHighlightAdapter(worker)));
}
if (modeConfiguration.links) {
providers.push(monaco.languages.registerLinkProvider(languageId, new languageFeatures.DocumentLinkAdapter(worker)));
}
if (modeConfiguration.documentSymbols) {
providers.push(monaco.languages.registerDocumentSymbolProvider(languageId, new languageFeatures.DocumentSymbolAdapter(worker)));
}
if (modeConfiguration.rename) {
providers.push(monaco.languages.registerRenameProvider(languageId, new languageFeatures.RenameAdapter(worker)));
}
if (modeConfiguration.foldingRanges) {
providers.push(monaco.languages.registerFoldingRangeProvider(languageId, new languageFeatures.FoldingRangeAdapter(worker)));
}
if (modeConfiguration.selectionRanges) {
providers.push(monaco.languages.registerSelectionRangeProvider(languageId, new languageFeatures.SelectionRangeAdapter(worker)));
}
if (modeConfiguration.documentFormattingEdits) {
providers.push(monaco.languages.registerDocumentFormattingEditProvider(languageId, new languageFeatures.DocumentFormattingEditProvider(worker)));
}
if (modeConfiguration.documentRangeFormattingEdits) {
providers.push(monaco.languages.registerDocumentRangeFormattingEditProvider(languageId, new languageFeatures.DocumentRangeFormattingEditProvider(worker)));
}
if (modeConfiguration.diagnostics) {
providers.push(new languageFeatures.DiagnosticsAdapter(languageId, worker, defaults));
}
}
registerProviders();
disposables.push(asDisposable(providers));
return asDisposable(disposables);
}
function asDisposable(disposables: IDisposable[]): IDisposable {
return { dispose: () => disposeAll(disposables) };
}
function disposeAll(disposables: IDisposable[]) {
while (disposables.length) {
disposables.pop().dispose();
}
}
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
'use strict';
import { WorkerManager } from './workerManager';
import { HTMLWorker } from './htmlWorker';
import { LanguageServiceDefaultsImpl } from './monaco.contribution';
import * as languageFeatures from './languageFeatures';
import Uri = monaco.Uri;
import IDisposable = monaco.IDisposable;
export function setupMode1(defaults: LanguageServiceDefaultsImpl): void {
const client = new WorkerManager(defaults);
const worker: languageFeatures.WorkerAccessor = (
...uris: Uri[]
): Promise<HTMLWorker> => {
return client.getLanguageServiceWorker(...uris);
};
let languageId = defaults.languageId;
// all modes
monaco.languages.registerCompletionItemProvider(
languageId,
new languageFeatures.CompletionAdapter(worker)
);
monaco.languages.registerHoverProvider(
languageId,
new languageFeatures.HoverAdapter(worker)
);
monaco.languages.registerDocumentHighlightProvider(
languageId,
new languageFeatures.DocumentHighlightAdapter(worker)
);
monaco.languages.registerLinkProvider(
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
if (languageId === 'html') {
monaco.languages.registerDocumentFormattingEditProvider(
languageId,
new languageFeatures.DocumentFormattingEditProvider(worker)
);
monaco.languages.registerDocumentRangeFormattingEditProvider(
languageId,
new languageFeatures.DocumentRangeFormattingEditProvider(worker)
);
new languageFeatures.DiagnosticsAdapter(languageId, worker, defaults);
}
}
export function setupMode(defaults: LanguageServiceDefaultsImpl): IDisposable {
const disposables: IDisposable[] = [];
const providers: IDisposable[] = [];
const client = new WorkerManager(defaults);
disposables.push(client);
const worker: languageFeatures.WorkerAccessor = (
...uris: Uri[]
): Promise<HTMLWorker> => {
return client.getLanguageServiceWorker(...uris);
};
function registerProviders(): void {
const { languageId, modeConfiguration } = defaults;
disposeAll(providers);
if (modeConfiguration.completionItems) {
providers.push(
monaco.languages.registerCompletionItemProvider(
languageId,
new languageFeatures.CompletionAdapter(worker)
)
);
}
if (modeConfiguration.hovers) {
providers.push(
monaco.languages.registerHoverProvider(
languageId,
new languageFeatures.HoverAdapter(worker)
)
);
}
if (modeConfiguration.documentHighlights) {
providers.push(
monaco.languages.registerDocumentHighlightProvider(
languageId,
new languageFeatures.DocumentHighlightAdapter(worker)
)
);
}
if (modeConfiguration.links) {
providers.push(
monaco.languages.registerLinkProvider(
languageId,
new languageFeatures.DocumentLinkAdapter(worker)
)
);
}
if (modeConfiguration.documentSymbols) {
providers.push(
monaco.languages.registerDocumentSymbolProvider(
languageId,
new languageFeatures.DocumentSymbolAdapter(worker)
)
);
}
if (modeConfiguration.rename) {
providers.push(
monaco.languages.registerRenameProvider(
languageId,
new languageFeatures.RenameAdapter(worker)
)
);
}
if (modeConfiguration.foldingRanges) {
providers.push(
monaco.languages.registerFoldingRangeProvider(
languageId,
new languageFeatures.FoldingRangeAdapter(worker)
)
);
}
if (modeConfiguration.selectionRanges) {
providers.push(
monaco.languages.registerSelectionRangeProvider(
languageId,
new languageFeatures.SelectionRangeAdapter(worker)
)
);
}
if (modeConfiguration.documentFormattingEdits) {
providers.push(
monaco.languages.registerDocumentFormattingEditProvider(
languageId,
new languageFeatures.DocumentFormattingEditProvider(worker)
)
);
}
if (modeConfiguration.documentRangeFormattingEdits) {
providers.push(
monaco.languages.registerDocumentRangeFormattingEditProvider(
languageId,
new languageFeatures.DocumentRangeFormattingEditProvider(worker)
)
);
}
if (modeConfiguration.diagnostics) {
providers.push(
new languageFeatures.DiagnosticsAdapter(languageId, worker, defaults)
);
}
}
registerProviders();
disposables.push(asDisposable(providers));
return asDisposable(disposables);
}
function asDisposable(disposables: IDisposable[]): IDisposable {
return { dispose: () => disposeAll(disposables) };
}
function disposeAll(disposables: IDisposable[]) {
while (disposables.length) {
disposables.pop().dispose();
}
}

View file

@ -1,96 +1,151 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
'use strict';
import IWorkerContext = monaco.worker.IWorkerContext;
import * as htmlService from 'vscode-html-languageservice';
export class HTMLWorker {
private _ctx: IWorkerContext;
private _languageService: htmlService.LanguageService;
private _languageSettings: monaco.languages.html.Options;
private _languageId: string;
constructor(ctx: IWorkerContext, createData: ICreateData) {
this._ctx = ctx;
this._languageSettings = createData.languageSettings;
this._languageId = createData.languageId;
this._languageService = htmlService.getLanguageService();
}
async doValidation(uri: string): Promise<htmlService.Diagnostic[]> {
// not yet suported
return Promise.resolve([]);
}
async doComplete(uri: string, position: htmlService.Position): Promise<htmlService.CompletionList> {
let document = this._getTextDocument(uri);
let htmlDocument = this._languageService.parseHTMLDocument(document);
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[]> {
let document = this._getTextDocument(uri);
let textEdits = this._languageService.format(document, range, this._languageSettings && this._languageSettings.format);
return Promise.resolve(textEdits);
}
async doHover(uri: string, position: htmlService.Position): Promise<htmlService.Hover> {
let document = this._getTextDocument(uri);
let htmlDocument = this._languageService.parseHTMLDocument(document);
let hover = this._languageService.doHover(document, position, htmlDocument);
return Promise.resolve(hover);
}
async findDocumentHighlights(uri: string, position: htmlService.Position): Promise<htmlService.DocumentHighlight[]> {
let document = this._getTextDocument(uri);
let htmlDocument = this._languageService.parseHTMLDocument(document);
let highlights = this._languageService.findDocumentHighlights(document, position, htmlDocument);
return Promise.resolve(highlights);
}
async findDocumentLinks(uri: string): Promise<htmlService.DocumentLink[]> {
let document = this._getTextDocument(uri);
let links = this._languageService.findDocumentLinks(document, null);
return Promise.resolve(links);
}
async findDocumentSymbols(uri: string): Promise<htmlService.SymbolInformation[]> {
let document = this._getTextDocument(uri);
let htmlDocument = this._languageService.parseHTMLDocument(document);
let symbols = this._languageService.findDocumentSymbols(document, htmlDocument);
return Promise.resolve(symbols);
}
async getFoldingRanges(uri: string, context?: { rangeLimit?: number; }): Promise<htmlService.FoldingRange[]> {
let document = this._getTextDocument(uri);
let ranges = this._languageService.getFoldingRanges(document, context);
return Promise.resolve(ranges);
}
async getSelectionRanges(uri: string, positions: htmlService.Position[]): Promise<htmlService.SelectionRange[]> {
let document = this._getTextDocument(uri);
let ranges = this._languageService.getSelectionRanges(document, positions);
return Promise.resolve(ranges);
}
async doRename(uri: string, position: htmlService.Position, newName: string): Promise<htmlService.WorkspaceEdit> {
let document = this._getTextDocument(uri);
let htmlDocument = this._languageService.parseHTMLDocument(document);
let renames = this._languageService.doRename(document, position, newName, htmlDocument);
return Promise.resolve(renames);
}
private _getTextDocument(uri: string): htmlService.TextDocument {
let models = this._ctx.getMirrorModels();
for (let model of models) {
if (model.uri.toString() === uri) {
return htmlService.TextDocument.create(uri, this._languageId, model.version, model.getValue());
}
}
return null;
}
}
export interface ICreateData {
languageId: string;
languageSettings: monaco.languages.html.Options;
}
export function create(ctx: IWorkerContext, createData: ICreateData): HTMLWorker {
return new HTMLWorker(ctx, createData);
}
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
'use strict';
import IWorkerContext = monaco.worker.IWorkerContext;
import * as htmlService from 'vscode-html-languageservice';
export class HTMLWorker {
private _ctx: IWorkerContext;
private _languageService: htmlService.LanguageService;
private _languageSettings: monaco.languages.html.Options;
private _languageId: string;
constructor(ctx: IWorkerContext, createData: ICreateData) {
this._ctx = ctx;
this._languageSettings = createData.languageSettings;
this._languageId = createData.languageId;
this._languageService = htmlService.getLanguageService();
}
async doValidation(uri: string): Promise<htmlService.Diagnostic[]> {
// not yet suported
return Promise.resolve([]);
}
async doComplete(
uri: string,
position: htmlService.Position
): Promise<htmlService.CompletionList> {
let document = this._getTextDocument(uri);
let htmlDocument = this._languageService.parseHTMLDocument(document);
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[]> {
let document = this._getTextDocument(uri);
let textEdits = this._languageService.format(
document,
range,
this._languageSettings && this._languageSettings.format
);
return Promise.resolve(textEdits);
}
async doHover(
uri: string,
position: htmlService.Position
): Promise<htmlService.Hover> {
let document = this._getTextDocument(uri);
let htmlDocument = this._languageService.parseHTMLDocument(document);
let hover = this._languageService.doHover(document, position, htmlDocument);
return Promise.resolve(hover);
}
async findDocumentHighlights(
uri: string,
position: htmlService.Position
): Promise<htmlService.DocumentHighlight[]> {
let document = this._getTextDocument(uri);
let htmlDocument = this._languageService.parseHTMLDocument(document);
let highlights = this._languageService.findDocumentHighlights(
document,
position,
htmlDocument
);
return Promise.resolve(highlights);
}
async findDocumentLinks(uri: string): Promise<htmlService.DocumentLink[]> {
let document = this._getTextDocument(uri);
let links = this._languageService.findDocumentLinks(document, null);
return Promise.resolve(links);
}
async findDocumentSymbols(
uri: string
): Promise<htmlService.SymbolInformation[]> {
let document = this._getTextDocument(uri);
let htmlDocument = this._languageService.parseHTMLDocument(document);
let symbols = this._languageService.findDocumentSymbols(
document,
htmlDocument
);
return Promise.resolve(symbols);
}
async getFoldingRanges(
uri: string,
context?: { rangeLimit?: number }
): Promise<htmlService.FoldingRange[]> {
let document = this._getTextDocument(uri);
let ranges = this._languageService.getFoldingRanges(document, context);
return Promise.resolve(ranges);
}
async getSelectionRanges(
uri: string,
positions: htmlService.Position[]
): Promise<htmlService.SelectionRange[]> {
let document = this._getTextDocument(uri);
let ranges = this._languageService.getSelectionRanges(document, positions);
return Promise.resolve(ranges);
}
async doRename(
uri: string,
position: htmlService.Position,
newName: string
): Promise<htmlService.WorkspaceEdit> {
let document = this._getTextDocument(uri);
let htmlDocument = this._languageService.parseHTMLDocument(document);
let renames = this._languageService.doRename(
document,
position,
newName,
htmlDocument
);
return Promise.resolve(renames);
}
private _getTextDocument(uri: string): htmlService.TextDocument {
let models = this._ctx.getMirrorModels();
for (let model of models) {
if (model.uri.toString() === uri) {
return htmlService.TextDocument.create(
uri,
this._languageId,
model.version,
model.getValue()
);
}
}
return null;
}
}
export interface ICreateData {
languageId: string;
languageSettings: monaco.languages.html.Options;
}
export function create(
ctx: IWorkerContext,
createData: ICreateData
): HTMLWorker {
return new HTMLWorker(ctx, createData);
}

File diff suppressed because it is too large Load diff

View file

@ -1,133 +1,156 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
'use strict';
import * as mode from './htmlMode';
import Emitter = monaco.Emitter;
import IEvent = monaco.IEvent;
// --- HTML configuration and defaults ---------
export class LanguageServiceDefaultsImpl implements monaco.languages.html.LanguageServiceDefaults {
private _onDidChange = new Emitter<monaco.languages.html.LanguageServiceDefaults>();
private _options: monaco.languages.html.Options;
private _modeConfiguration: monaco.languages.html.ModeConfiguration;
private _languageId: string;
constructor(languageId: string, options: monaco.languages.html.Options, modeConfiguration: monaco.languages.html.ModeConfiguration) {
this._languageId = languageId;
this.setOptions(options);
this.setModeConfiguration(modeConfiguration);
}
get onDidChange(): IEvent<monaco.languages.html.LanguageServiceDefaults> {
return this._onDidChange.event;
}
get languageId(): string {
return this._languageId;
}
get options(): monaco.languages.html.Options {
return this._options;
}
get modeConfiguration(): monaco.languages.html.ModeConfiguration {
return this._modeConfiguration;
}
setOptions(options: monaco.languages.html.Options): void {
this._options = options || Object.create(null);
this._onDidChange.fire(this);
}
setModeConfiguration(modeConfiguration: monaco.languages.html.ModeConfiguration): void {
this._modeConfiguration = modeConfiguration || Object.create(null);
this._onDidChange.fire(this);
};
}
const formatDefaults: Required<monaco.languages.html.HTMLFormatConfiguration> = {
tabSize: 4,
insertSpaces: false,
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',
contentUnformatted: 'pre',
indentInnerHtml: false,
preserveNewLines: true,
maxPreserveNewLines: null,
indentHandlebars: false,
endWithNewline: false,
extraLiners: 'head, body, /html',
wrapAttributes: 'auto'
};
const htmlOptionsDefault: Required<monaco.languages.html.Options> = {
format: formatDefaults,
suggest: { html5: true, angular1: true, ionic: true }
}
const handlebarOptionsDefault: Required<monaco.languages.html.Options> = {
format: formatDefaults,
suggest: { html5: true }
}
const razorOptionsDefault: Required<monaco.languages.html.Options> = {
format: formatDefaults,
suggest: { html5: true, razor: true }
}
function getConfigurationDefault(languageId: string): Required<monaco.languages.html.ModeConfiguration> {
return {
completionItems: true,
hovers: true,
documentSymbols: true,
links: true,
documentHighlights: true,
rename: true,
colors: true,
foldingRanges: true,
selectionRanges: true,
diagnostics: languageId === htmlLanguageId, // turned off for Razor and Handlebar
documentFormattingEdits: languageId === htmlLanguageId, // turned off for Razor and Handlebar
documentRangeFormattingEdits: languageId === htmlLanguageId // turned off for Razor and Handlebar
};
}
const htmlLanguageId = 'html';
const handlebarsLanguageId = 'handlebars';
const razorLanguageId = 'razor';
const htmlDefaults = new LanguageServiceDefaultsImpl(htmlLanguageId, htmlOptionsDefault, getConfigurationDefault(htmlLanguageId));
const handlebarDefaults = new LanguageServiceDefaultsImpl(handlebarsLanguageId, handlebarOptionsDefault, getConfigurationDefault(handlebarsLanguageId));
const razorDefaults = new LanguageServiceDefaultsImpl(razorLanguageId, razorOptionsDefault, getConfigurationDefault(razorLanguageId));
// Export API
function createAPI(): typeof monaco.languages.html {
return {
htmlDefaults: htmlDefaults,
razorDefaults: razorDefaults,
handlebarDefaults: handlebarDefaults
}
}
monaco.languages.html = createAPI();
// --- Registration to monaco editor ---
function getMode(): Promise<typeof mode> {
return import('./htmlMode');
}
monaco.languages.onLanguage(htmlLanguageId, () => {
getMode().then(mode => mode.setupMode(htmlDefaults));
});
monaco.languages.onLanguage(handlebarsLanguageId, () => {
getMode().then(mode => mode.setupMode(handlebarDefaults));
});
monaco.languages.onLanguage(razorLanguageId, () => {
getMode().then(mode => mode.setupMode(razorDefaults));
});
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
'use strict';
import * as mode from './htmlMode';
import Emitter = monaco.Emitter;
import IEvent = monaco.IEvent;
// --- HTML configuration and defaults ---------
export class LanguageServiceDefaultsImpl
implements monaco.languages.html.LanguageServiceDefaults {
private _onDidChange = new Emitter<
monaco.languages.html.LanguageServiceDefaults
>();
private _options: monaco.languages.html.Options;
private _modeConfiguration: monaco.languages.html.ModeConfiguration;
private _languageId: string;
constructor(
languageId: string,
options: monaco.languages.html.Options,
modeConfiguration: monaco.languages.html.ModeConfiguration
) {
this._languageId = languageId;
this.setOptions(options);
this.setModeConfiguration(modeConfiguration);
}
get onDidChange(): IEvent<monaco.languages.html.LanguageServiceDefaults> {
return this._onDidChange.event;
}
get languageId(): string {
return this._languageId;
}
get options(): monaco.languages.html.Options {
return this._options;
}
get modeConfiguration(): monaco.languages.html.ModeConfiguration {
return this._modeConfiguration;
}
setOptions(options: monaco.languages.html.Options): void {
this._options = options || Object.create(null);
this._onDidChange.fire(this);
}
setModeConfiguration(
modeConfiguration: monaco.languages.html.ModeConfiguration
): void {
this._modeConfiguration = modeConfiguration || Object.create(null);
this._onDidChange.fire(this);
}
}
const formatDefaults: Required<monaco.languages.html.HTMLFormatConfiguration> = {
tabSize: 4,
insertSpaces: false,
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',
contentUnformatted: 'pre',
indentInnerHtml: false,
preserveNewLines: true,
maxPreserveNewLines: null,
indentHandlebars: false,
endWithNewline: false,
extraLiners: 'head, body, /html',
wrapAttributes: 'auto'
};
const htmlOptionsDefault: Required<monaco.languages.html.Options> = {
format: formatDefaults,
suggest: { html5: true, angular1: true, ionic: true }
};
const handlebarOptionsDefault: Required<monaco.languages.html.Options> = {
format: formatDefaults,
suggest: { html5: true }
};
const razorOptionsDefault: Required<monaco.languages.html.Options> = {
format: formatDefaults,
suggest: { html5: true, razor: true }
};
function getConfigurationDefault(
languageId: string
): Required<monaco.languages.html.ModeConfiguration> {
return {
completionItems: true,
hovers: true,
documentSymbols: true,
links: true,
documentHighlights: true,
rename: true,
colors: true,
foldingRanges: true,
selectionRanges: true,
diagnostics: languageId === htmlLanguageId, // turned off for Razor and Handlebar
documentFormattingEdits: languageId === htmlLanguageId, // turned off for Razor and Handlebar
documentRangeFormattingEdits: languageId === htmlLanguageId // turned off for Razor and Handlebar
};
}
const htmlLanguageId = 'html';
const handlebarsLanguageId = 'handlebars';
const razorLanguageId = 'razor';
const htmlDefaults = new LanguageServiceDefaultsImpl(
htmlLanguageId,
htmlOptionsDefault,
getConfigurationDefault(htmlLanguageId)
);
const handlebarDefaults = new LanguageServiceDefaultsImpl(
handlebarsLanguageId,
handlebarOptionsDefault,
getConfigurationDefault(handlebarsLanguageId)
);
const razorDefaults = new LanguageServiceDefaultsImpl(
razorLanguageId,
razorOptionsDefault,
getConfigurationDefault(razorLanguageId)
);
// Export API
function createAPI(): typeof monaco.languages.html {
return {
htmlDefaults: htmlDefaults,
razorDefaults: razorDefaults,
handlebarDefaults: handlebarDefaults
};
}
monaco.languages.html = createAPI();
// --- Registration to monaco editor ---
function getMode(): Promise<typeof mode> {
return import('./htmlMode');
}
monaco.languages.onLanguage(htmlLanguageId, () => {
getMode().then((mode) => mode.setupMode(htmlDefaults));
});
monaco.languages.onLanguage(handlebarsLanguageId, () => {
getMode().then((mode) => mode.setupMode(handlebarDefaults));
});
monaco.languages.onLanguage(razorLanguageId, () => {
getMode().then((mode) => mode.setupMode(razorDefaults));
});

9
src/monaco.d.ts vendored
View file

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

View file

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

View file

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

View file

@ -2,4 +2,4 @@
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
/// <reference path='../../node_modules/monaco-editor-core/monaco.d.ts'/>
/// <reference path='../../node_modules/monaco-editor-core/monaco.d.ts'/>

View file

@ -1,89 +1,92 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
'use strict';
import { LanguageServiceDefaultsImpl } from './monaco.contribution';
import { HTMLWorker } from './htmlWorker';
import IDisposable = monaco.IDisposable;
import Uri = monaco.Uri;
const STOP_WHEN_IDLE_FOR = 2 * 60 * 1000; // 2min
export class WorkerManager {
private _defaults: LanguageServiceDefaultsImpl;
private _idleCheckInterval: number;
private _lastUsedTime: number;
private _configChangeListener: IDisposable;
private _worker: monaco.editor.MonacoWebWorker<HTMLWorker>;
private _client: Promise<HTMLWorker>;
constructor(defaults: LanguageServiceDefaultsImpl) {
this._defaults = defaults;
this._worker = null;
this._idleCheckInterval = setInterval(() => this._checkIfIdle(), 30 * 1000);
this._lastUsedTime = 0;
this._configChangeListener = this._defaults.onDidChange(() => this._stopWorker());
}
private _stopWorker(): void {
if (this._worker) {
this._worker.dispose();
this._worker = null;
}
this._client = null;
}
dispose(): void {
clearInterval(this._idleCheckInterval);
this._configChangeListener.dispose();
this._stopWorker();
}
private _checkIfIdle(): void {
if (!this._worker) {
return;
}
let timePassedSinceLastUsed = Date.now() - this._lastUsedTime;
if (timePassedSinceLastUsed > STOP_WHEN_IDLE_FOR) {
this._stopWorker();
}
}
private _getClient(): Promise<HTMLWorker> {
this._lastUsedTime = Date.now();
if (!this._client) {
this._worker = monaco.editor.createWebWorker<HTMLWorker>({
// module that exports the create() method and returns a `HTMLWorker` instance
moduleId: 'vs/language/html/htmlWorker',
// passed in to the create() method
createData: {
languageSettings: this._defaults.options,
languageId: this._defaults.languageId
},
label: this._defaults.languageId
});
this._client = <Promise<HTMLWorker>>this._worker.getProxy();
}
return this._client;
}
getLanguageServiceWorker(...resources: Uri[]): Promise<HTMLWorker> {
let _client: HTMLWorker;
return this._getClient().then((client) => {
_client = client
}).then(_ => {
return this._worker.withSyncedResources(resources)
}).then(_ => _client);
}
}
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
'use strict';
import { LanguageServiceDefaultsImpl } from './monaco.contribution';
import { HTMLWorker } from './htmlWorker';
import IDisposable = monaco.IDisposable;
import Uri = monaco.Uri;
const STOP_WHEN_IDLE_FOR = 2 * 60 * 1000; // 2min
export class WorkerManager {
private _defaults: LanguageServiceDefaultsImpl;
private _idleCheckInterval: number;
private _lastUsedTime: number;
private _configChangeListener: IDisposable;
private _worker: monaco.editor.MonacoWebWorker<HTMLWorker>;
private _client: Promise<HTMLWorker>;
constructor(defaults: LanguageServiceDefaultsImpl) {
this._defaults = defaults;
this._worker = null;
this._idleCheckInterval = setInterval(() => this._checkIfIdle(), 30 * 1000);
this._lastUsedTime = 0;
this._configChangeListener = this._defaults.onDidChange(() =>
this._stopWorker()
);
}
private _stopWorker(): void {
if (this._worker) {
this._worker.dispose();
this._worker = null;
}
this._client = null;
}
dispose(): void {
clearInterval(this._idleCheckInterval);
this._configChangeListener.dispose();
this._stopWorker();
}
private _checkIfIdle(): void {
if (!this._worker) {
return;
}
let timePassedSinceLastUsed = Date.now() - this._lastUsedTime;
if (timePassedSinceLastUsed > STOP_WHEN_IDLE_FOR) {
this._stopWorker();
}
}
private _getClient(): Promise<HTMLWorker> {
this._lastUsedTime = Date.now();
if (!this._client) {
this._worker = monaco.editor.createWebWorker<HTMLWorker>({
// module that exports the create() method and returns a `HTMLWorker` instance
moduleId: 'vs/language/html/htmlWorker',
// passed in to the create() method
createData: {
languageSettings: this._defaults.options,
languageId: this._defaults.languageId
},
label: this._defaults.languageId
});
this._client = <Promise<HTMLWorker>>this._worker.getProxy();
}
return this._client;
}
getLanguageServiceWorker(...resources: Uri[]): Promise<HTMLWorker> {
let _client: HTMLWorker;
return this._getClient()
.then((client) => {
_client = client;
})
.then((_) => {
return this._worker.withSyncedResources(resources);
})
.then((_) => _client);
}
}

View file

@ -1,73 +1,81 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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">
</head>
<body>
<h2>Monaco Editor HTML test page</h2>
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>
<script>
// 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>
require([
'vs/basic-languages/monaco.contribution',
'vs/language/html/monaco.contribution'
], function() {
var editor = monaco.editor.create(document.getElementById('container'), {
value: [
'<!DOCTYPE HTML>',
'<!--',
' Comments are overrated',
'-->',
'<html>',
'<head>',
' <title>HTML Sample</title>',
' <meta http-equiv="X-UA-Compatible" content="IE=edge">',
' <style type="text/css">',
' 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>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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"
/>
</head>
<body>
<h2>Monaco Editor HTML test page</h2>
<div
id="container"
style="width: 800px; height: 600px; border: 1px solid grey"
></div>
<script>
// 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>
require([
'vs/basic-languages/monaco.contribution',
'vs/language/html/monaco.contribution'
], function () {
var editor = monaco.editor.create(
document.getElementById('container'),
{
value: [
'<!DOCTYPE HTML>',
'<!--',
' Comments are overrated',
'-->',
'<html>',
'<head>',
' <title>HTML Sample</title>',
' <meta http-equiv="X-UA-Compatible" content="IE=edge">',
' <style type="text/css">',
' 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>