mirror of
https://github.com/microsoft/vscode.git
synced 2026-04-25 02:58:56 +01:00
[html] add css support to html extension as library
This commit is contained in:
Martin Aeschlimann
95
extensions/html/client/src/colorDecorators.ts
Normal file
95
extensions/html/client/src/colorDecorators.ts
Normal file
@@ -0,0 +1,95 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* 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 { window, workspace, DecorationOptions, DecorationRenderOptions, Disposable, Range, TextDocument, TextEditor } from 'vscode';
|
||||
|
||||
const MAX_DECORATORS = 500;
|
||||
|
||||
let decorationType: DecorationRenderOptions = {
|
||||
before: {
|
||||
contentText: ' ',
|
||||
border: 'solid 0.1em #000',
|
||||
margin: '0.1em 0.2em 0 0.2em',
|
||||
width: '0.8em',
|
||||
height: '0.8em'
|
||||
},
|
||||
dark: {
|
||||
before: {
|
||||
border: 'solid 0.1em #eee'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export function activateColorDecorations(decoratorProvider: (uri: string) => Thenable<Range[]>, supportedLanguages: { [id: string]: boolean }): Disposable {
|
||||
|
||||
let disposables: Disposable[] = [];
|
||||
|
||||
let colorsDecorationType = window.createTextEditorDecorationType(decorationType);
|
||||
disposables.push(colorsDecorationType);
|
||||
|
||||
let pendingUpdateRequests: { [key: string]: NodeJS.Timer; } = {};
|
||||
|
||||
// we care about all visible editors
|
||||
window.visibleTextEditors.forEach(editor => {
|
||||
if (editor.document) {
|
||||
triggerUpdateDecorations(editor.document);
|
||||
}
|
||||
});
|
||||
// to get visible one has to become active
|
||||
window.onDidChangeActiveTextEditor(editor => {
|
||||
if (editor) {
|
||||
triggerUpdateDecorations(editor.document);
|
||||
}
|
||||
}, null, disposables);
|
||||
|
||||
workspace.onDidChangeTextDocument(event => triggerUpdateDecorations(event.document), null, disposables);
|
||||
workspace.onDidOpenTextDocument(triggerUpdateDecorations, null, disposables);
|
||||
workspace.onDidCloseTextDocument(triggerUpdateDecorations, null, disposables);
|
||||
|
||||
workspace.textDocuments.forEach(triggerUpdateDecorations);
|
||||
|
||||
function triggerUpdateDecorations(document: TextDocument) {
|
||||
let triggerUpdate = supportedLanguages[document.languageId];
|
||||
let documentUri = document.uri;
|
||||
let documentUriStr = documentUri.toString();
|
||||
let timeout = pendingUpdateRequests[documentUriStr];
|
||||
if (typeof timeout !== 'undefined') {
|
||||
clearTimeout(timeout);
|
||||
triggerUpdate = true; // force update, even if languageId is not supported (anymore)
|
||||
}
|
||||
if (triggerUpdate) {
|
||||
pendingUpdateRequests[documentUriStr] = setTimeout(() => {
|
||||
// check if the document is in use by an active editor
|
||||
window.visibleTextEditors.forEach(editor => {
|
||||
if (editor.document && documentUriStr === editor.document.uri.toString()) {
|
||||
updateDecorationForEditor(editor, documentUriStr);
|
||||
}
|
||||
});
|
||||
delete pendingUpdateRequests[documentUriStr];
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
|
||||
function updateDecorationForEditor(editor: TextEditor, contentUri: string) {
|
||||
let document = editor.document;
|
||||
decoratorProvider(contentUri).then(ranges => {
|
||||
let decorations = ranges.slice(0, MAX_DECORATORS).map(range => {
|
||||
let color = document.getText(range);
|
||||
return <DecorationOptions>{
|
||||
range: range,
|
||||
renderOptions: {
|
||||
before: {
|
||||
backgroundColor: color
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
editor.setDecorations(colorsDecorationType, decorations);
|
||||
});
|
||||
}
|
||||
|
||||
return Disposable.from(...disposables);
|
||||
}
|
||||
@@ -1,124 +0,0 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* 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 { workspace, Uri, EventEmitter, Disposable, TextDocument } from 'vscode';
|
||||
import { LanguageClient, RequestType, NotificationType } from 'vscode-languageclient';
|
||||
import { getEmbeddedContentUri, getEmbeddedLanguageId, getHostDocumentUri, isEmbeddedContentUri, EMBEDDED_CONTENT_SCHEME } from './embeddedContentUri';
|
||||
|
||||
interface EmbeddedContentParams {
|
||||
uri: string;
|
||||
embeddedLanguageId: string;
|
||||
}
|
||||
|
||||
interface EmbeddedContent {
|
||||
content: string;
|
||||
version: number;
|
||||
}
|
||||
|
||||
namespace EmbeddedContentRequest {
|
||||
export const type: RequestType<EmbeddedContentParams, EmbeddedContent, any> = { get method() { return 'embedded/content'; } };
|
||||
}
|
||||
|
||||
export interface EmbeddedDocuments extends Disposable {
|
||||
getEmbeddedContentUri: (parentDocumentUri: string, embeddedLanguageId: string) => Uri;
|
||||
openEmbeddedContentDocument: (embeddedContentUri: Uri, expectedVersion: number) => Thenable<TextDocument>;
|
||||
}
|
||||
|
||||
interface EmbeddedContentChangedParams {
|
||||
uri: string;
|
||||
version: number;
|
||||
embeddedLanguageIds: string[];
|
||||
}
|
||||
|
||||
namespace EmbeddedContentChangedNotification {
|
||||
export const type: NotificationType<EmbeddedContentChangedParams> = { get method() { return 'embedded/contentchanged'; } };
|
||||
}
|
||||
|
||||
export function initializeEmbeddedContentDocuments(parentDocumentSelector: string[], embeddedLanguages: { [languageId: string]: boolean }, client: LanguageClient): EmbeddedDocuments {
|
||||
let toDispose: Disposable[] = [];
|
||||
|
||||
let embeddedContentChanged = new EventEmitter<Uri>();
|
||||
|
||||
// remember all open virtual documents with the version of the content
|
||||
let openVirtualDocuments: { [uri: string]: number } = {};
|
||||
|
||||
// documents are closed after a time out or when collected.
|
||||
toDispose.push(workspace.onDidCloseTextDocument(d => {
|
||||
if (isEmbeddedContentUri(d.uri)) {
|
||||
delete openVirtualDocuments[d.uri.toString()];
|
||||
}
|
||||
}));
|
||||
|
||||
// virtual document provider
|
||||
toDispose.push(workspace.registerTextDocumentContentProvider(EMBEDDED_CONTENT_SCHEME, {
|
||||
provideTextDocumentContent: uri => {
|
||||
if (isEmbeddedContentUri(uri)) {
|
||||
let contentRequestParms = { uri: getHostDocumentUri(uri), embeddedLanguageId: getEmbeddedLanguageId(uri) };
|
||||
return client.sendRequest(EmbeddedContentRequest.type, contentRequestParms).then(content => {
|
||||
if (content) {
|
||||
openVirtualDocuments[uri.toString()] = content.version;
|
||||
return content.content;
|
||||
} else {
|
||||
delete openVirtualDocuments[uri.toString()];
|
||||
return '';
|
||||
}
|
||||
});
|
||||
}
|
||||
return '';
|
||||
},
|
||||
onDidChange: embeddedContentChanged.event
|
||||
}));
|
||||
|
||||
// diagnostics for embedded contents
|
||||
client.onNotification(EmbeddedContentChangedNotification.type, p => {
|
||||
for (let languageId in embeddedLanguages) {
|
||||
if (p.embeddedLanguageIds.indexOf(languageId) !== -1) {
|
||||
// open the document so that validation is triggered in the embedded mode
|
||||
let virtualUri = getEmbeddedContentUri(p.uri, languageId);
|
||||
openEmbeddedContentDocument(virtualUri, p.version);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function ensureContentUpdated(virtualURI: Uri, expectedVersion: number) {
|
||||
let virtualURIString = virtualURI.toString();
|
||||
let virtualDocVersion = openVirtualDocuments[virtualURIString];
|
||||
if (isDefined(virtualDocVersion) && virtualDocVersion !== expectedVersion) {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
let subscription = workspace.onDidChangeTextDocument(d => {
|
||||
if (d.document.uri.toString() === virtualURIString) {
|
||||
subscription.dispose();
|
||||
resolve();
|
||||
}
|
||||
});
|
||||
embeddedContentChanged.fire(virtualURI);
|
||||
});
|
||||
}
|
||||
return Promise.resolve();
|
||||
};
|
||||
|
||||
function openEmbeddedContentDocument(virtualURI: Uri, expectedVersion: number): Thenable<TextDocument> {
|
||||
return ensureContentUpdated(virtualURI, expectedVersion).then(_ => {
|
||||
return workspace.openTextDocument(virtualURI).then(document => {
|
||||
if (expectedVersion === openVirtualDocuments[virtualURI.toString()]) {
|
||||
return document;
|
||||
}
|
||||
return void 0;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
getEmbeddedContentUri,
|
||||
openEmbeddedContentDocument,
|
||||
dispose: Disposable.from(...toDispose).dispose
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
function isDefined(o: any) {
|
||||
return typeof o !== 'undefined';
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* 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 { Uri } from 'vscode';
|
||||
|
||||
export const EMBEDDED_CONTENT_SCHEME = 'embedded-content';
|
||||
|
||||
export function isEmbeddedContentUri(virtualDocumentUri: Uri): boolean {
|
||||
return virtualDocumentUri.scheme === EMBEDDED_CONTENT_SCHEME;
|
||||
}
|
||||
|
||||
export function getEmbeddedContentUri(parentDocumentUri: string, embeddedLanguageId: string): Uri {
|
||||
return new Uri().with({ scheme: EMBEDDED_CONTENT_SCHEME, authority: embeddedLanguageId, path: '/' + encodeURIComponent(parentDocumentUri) + '.' + embeddedLanguageId });
|
||||
};
|
||||
|
||||
export function getHostDocumentUri(virtualDocumentUri: Uri): string {
|
||||
let languageId = virtualDocumentUri.authority;
|
||||
let path = virtualDocumentUri.path.substring(1, virtualDocumentUri.path.length - languageId.length - 1); // remove leading '/' and new file extension
|
||||
return decodeURIComponent(path);
|
||||
};
|
||||
|
||||
export function getEmbeddedLanguageId(virtualDocumentUri: Uri): string {
|
||||
return virtualDocumentUri.authority;
|
||||
}
|
||||
@@ -6,35 +6,16 @@
|
||||
|
||||
import * as path from 'path';
|
||||
|
||||
import { languages, workspace, ExtensionContext, IndentAction, commands, CompletionList, Hover } from 'vscode';
|
||||
import { LanguageClient, LanguageClientOptions, ServerOptions, TransportKind, Position, RequestType, Protocol2Code, Code2Protocol } from 'vscode-languageclient';
|
||||
import { CompletionList as LSCompletionList, Hover as LSHover } from 'vscode-languageserver-types';
|
||||
import { languages, workspace, ExtensionContext, IndentAction } from 'vscode';
|
||||
import { LanguageClient, LanguageClientOptions, ServerOptions, TransportKind, Range, RequestType, Protocol2Code } from 'vscode-languageclient';
|
||||
import { EMPTY_ELEMENTS } from './htmlEmptyTagsShared';
|
||||
import { initializeEmbeddedContentDocuments } from './embeddedContentDocuments';
|
||||
import { activateColorDecorations } from './colorDecorators';
|
||||
|
||||
import * as nls from 'vscode-nls';
|
||||
let localize = nls.loadMessageBundle();
|
||||
|
||||
interface EmbeddedCompletionParams {
|
||||
uri: string;
|
||||
version: number;
|
||||
embeddedLanguageId: string;
|
||||
position: Position;
|
||||
}
|
||||
|
||||
namespace EmbeddedCompletionRequest {
|
||||
export const type: RequestType<EmbeddedCompletionParams, LSCompletionList, any> = { get method() { return 'embedded/completion'; } };
|
||||
}
|
||||
|
||||
interface EmbeddedHoverParams {
|
||||
uri: string;
|
||||
version: number;
|
||||
embeddedLanguageId: string;
|
||||
position: Position;
|
||||
}
|
||||
|
||||
namespace EmbeddedHoverRequest {
|
||||
export const type: RequestType<EmbeddedHoverParams, LSHover, any> = { get method() { return 'embedded/hover'; } };
|
||||
namespace ColorSymbolRequest {
|
||||
export const type: RequestType<string, Range[], any> = { get method() { return 'css/colorSymbols'; } };
|
||||
}
|
||||
|
||||
export function activate(context: ExtensionContext) {
|
||||
@@ -67,56 +48,20 @@ export function activate(context: ExtensionContext) {
|
||||
};
|
||||
|
||||
// Create the language client and start the client.
|
||||
let client = new LanguageClient('html', localize('htmlserver.name', 'HTML Language Server'), serverOptions, clientOptions);
|
||||
|
||||
let embeddedDocuments = initializeEmbeddedContentDocuments(documentSelector, embeddedLanguages, client);
|
||||
context.subscriptions.push(embeddedDocuments);
|
||||
|
||||
client.onRequest(EmbeddedCompletionRequest.type, params => {
|
||||
let position = Protocol2Code.asPosition(params.position);
|
||||
let virtualDocumentURI = embeddedDocuments.getEmbeddedContentUri(params.uri, params.embeddedLanguageId);
|
||||
|
||||
return embeddedDocuments.openEmbeddedContentDocument(virtualDocumentURI, params.version).then(document => {
|
||||
if (document) {
|
||||
return commands.executeCommand<CompletionList>('vscode.executeCompletionItemProvider', virtualDocumentURI, position).then(completionList => {
|
||||
if (completionList) {
|
||||
return {
|
||||
isIncomplete: completionList.isIncomplete,
|
||||
items: completionList.items.map(Code2Protocol.asCompletionItem)
|
||||
};
|
||||
}
|
||||
return { isIncomplete: true, items: [] };
|
||||
});
|
||||
}
|
||||
return { isIncomplete: true, items: [] };
|
||||
});
|
||||
});
|
||||
|
||||
client.onRequest(EmbeddedHoverRequest.type, params => {
|
||||
let position = Protocol2Code.asPosition(params.position);
|
||||
let virtualDocumentURI = embeddedDocuments.getEmbeddedContentUri(params.uri, params.embeddedLanguageId);
|
||||
return embeddedDocuments.openEmbeddedContentDocument(virtualDocumentURI, params.version).then(document => {
|
||||
if (document) {
|
||||
return commands.executeCommand<Hover[]>('vscode.executeHoverProvider', virtualDocumentURI, position).then(hover => {
|
||||
if (hover && hover.length > 0) {
|
||||
return <LSHover>{
|
||||
contents: hover[0].contents,
|
||||
range: Code2Protocol.asRange(hover[0].range)
|
||||
};
|
||||
}
|
||||
return void 0;
|
||||
});
|
||||
}
|
||||
return void 0;
|
||||
});
|
||||
});
|
||||
|
||||
let client = new LanguageClient('html', localize('htmlserver.name', 'HTML Language Server'), serverOptions, clientOptions, true);
|
||||
let disposable = client.start();
|
||||
|
||||
// Push the disposable to the context's subscriptions so that the
|
||||
// client can be deactivated on extension deactivation
|
||||
context.subscriptions.push(disposable);
|
||||
|
||||
let colorRequestor = (uri: string) => {
|
||||
return client.sendRequest(ColorSymbolRequest.type, uri).then(ranges => ranges.map(Protocol2Code.asRange));
|
||||
};
|
||||
disposable = activateColorDecorations(colorRequestor, { html: true, handlebars: true, razor: true });
|
||||
context.subscriptions.push(disposable);
|
||||
|
||||
|
||||
languages.setLanguageConfiguration('html', {
|
||||
wordPattern: /(-?\d*\.\d\w*)|([^\`\~\!\@\$\^\&\*\(\)\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>\/\s]+)/g,
|
||||
onEnterRules: [
|
||||
|
||||
Reference in New Issue
Block a user