diff --git a/previewhtml-sample/README.md b/previewhtml-sample/README.md index a424c978..693bb6ff 100644 --- a/previewhtml-sample/README.md +++ b/previewhtml-sample/README.md @@ -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`. diff --git a/previewhtml-sample/package.json b/previewhtml-sample/package.json index e5cb4718..41ccbf99 100644 --- a/previewhtml-sample/package.json +++ b/previewhtml-sample/package.json @@ -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", diff --git a/previewhtml-sample/src/extension.ts b/previewhtml-sample/src/extension.ts index 62a106ea..c839f0ac 100644 --- a/previewhtml-sample/src/extension.ts +++ b/previewhtml-sample/src/extension.ts @@ -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) { `; } - private snippet(properties): string { + private snippet(document: vscode.TextDocument, propStart: number, propEnd: number): string { + const properties = document.getText().slice(propStart + 1, propEnd); return ` -
Preview of the CSS properties +
Preview of the CSS properties
Lorem ipsum dolor sit amet, mi et mauris nec ac luctus lorem, proin leo nulla integer metus vestibulum lobortis, eget
`; @@ -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); }