bingyi/vscode-extension-samples
1
0
Fork 0
mirror of https://github.com/microsoft/vscode-extension-samples.git synced 2026-04-27 16:55:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

update preview-css-sample to contain a command-link

Browse Source
This commit is contained in:
Johannes Rieken
2016-05-20 11:54:15 +02:00
parent 488137ee9b
commit d87b1073c5
3 changed files with 28 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
previewhtml-sample/README.md
View File

@ -1,6 +1,6 @@
# CSS Properties Preview Sample
This is an sample extension that illustrates the use of virtual documents or `TextDocumentContentProviders` together with the `vscode.previewHtml`
[command](https://code.visualstudio.com/docs/extensionAPI/vscode-api-commands#_commands).
This is an sample extension that illustrates the use of virtual documents or `TextDocumentContentProviders` together with the `vscode.previewHtml`
[command](https://code.visualstudio.com/docs/extensionAPI/vscode-api-commands#_commands).
It is not intended as a product quality extension.
@ -15,8 +15,9 @@ The purpose of the extension is to show a preview of the properties in the decla
# How it works
- The extension implements and registers a `TextDocumentProvider` for a particular resource URI.
- The TextDocumentProvider creates a HTML document that contains the declaration block of the selected CSS Rule in the active editor.
- The generated HTML document is then opened in an editor in the 2nd Column using the command `vscode.previewHtml`.
- The extension implements and registers a [`TextDocumentContentProvider`](http://code.visualstudio.com/docs/extensionAPI/vscode-api#TextDocumentContentProvider) for a particular URI scheme.
- The content provider creates a HTML document that contains the declaration block of the selected CSS rule in the active editor.
- The generated HTML document contains a link that invokes a contributed command to highlight the CSS rule in the source editor
- The generated HTML document is then opened in an editor in the 2nd Column using the command `vscode.previewHtml`.

2
previewhtml-sample/package.json
View File

@ -2,7 +2,7 @@
"name": "vscode-css-properties",
"displayName": "Preview CSS Properties Sample",
"description": "A sample illustrating the use of TextContentProviders and the `vscode.previewHtml` command, introduce in 0.10.7",
"version": "0.0.9",
"version": "0.0.10",
"publisher": "eg2",
"galleryBanner": {
"color": "#5c2d91",

26
previewhtml-sample/src/extension.ts
View File

@ -41,9 +41,9 @@ export function activate(context: vscode.ExtensionContext) {
if (propStart === -1 || propEnd === -1) {
return this.errorSnippet("Cannot determine the rule's properties.");
} else {
return this.snippet(editor.document, propStart, propEnd);
}
let properties = text.slice(propStart + 1, propEnd);
return this.snippet(properties);
}
private errorSnippet(error: string): string {
@ -53,14 +53,15 @@ export function activate(context: vscode.ExtensionContext) {
</body>`;
}
private snippet(properties): string {
private snippet(document: vscode.TextDocument, propStart: number, propEnd: number): string {
const properties = document.getText().slice(propStart + 1, propEnd);
return `<style>
#el {
${properties}
}
</style>
<body>
<div>Preview of the CSS properties</dev>
<div>Preview of the <a href="${encodeURI('command:extension.revealCssRule?' + JSON.stringify([document.uri, propStart, propEnd]))}">CSS properties</a></dev>
<hr>
<div id="el">Lorem ipsum dolor sit amet, mi et mauris nec ac luctus lorem, proin leo nulla integer metus vestibulum lobortis, eget</div>
</body>`;
@ -87,8 +88,23 @@ export function activate(context: vscode.ExtensionContext) {
}, (reason) => {
vscode.window.showErrorMessage(reason);
});
});
let highlight = vscode.window.createTextEditorDecorationType({ backgroundColor: 'rgba(200,200,200,.35)' });
vscode.commands.registerCommand('extension.revealCssRule', (uri: vscode.Uri, propStart: number, propEnd: number) => {
for (let editor of vscode.window.visibleTextEditors) {
if (editor.document.uri.toString() === uri.toString()) {
let start = editor.document.positionAt(propStart);
let end = editor.document.positionAt(propEnd + 1);
editor.setDecorations(highlight, [new vscode.Range(start, end)]);
setTimeout(() => editor.setDecorations(highlight, []), 1500);
}
}
});
context.subscriptions.push(disposable, registration);
}