add color decorators. Fixes Microsoft/monaco-editor#132

README.md

@@ -6,6 +6,7 @@ CSS language plugin for the Monaco Editor. It provides the following features wh
 * Validation: Syntax errors and linting
 * Find definition, references & highlights for symbols in the same file
 * Document Symbols
+* Color Decorators
 
 Linting an be configured through the API. See [here](https://github.com/Microsoft/monaco-css/blob/master/src/monaco.d.ts) for the API that the
 CSS plugin offers to configure the CSS/LESS/SCSS language support.
@@ -27,7 +28,7 @@ This npm module is bundled and distributed in the [monaco-editor](https://www.np
 * `git clone https://github.com/Microsoft/monaco-css`
 * `cd monaco-css`
 * `npm install .`
-* `npm run watch`
+* `npm run prepublish`
 * open `$/monaco-css/test/index.html` in your favorite browser.
 
 ## License

src/cssMode.ts

@@ -29,7 +29,8 @@ export function setupMode(defaults: LanguageServiceDefaultsImpl): void {
 	monaco.languages.registerReferenceProvider(languageId, new languageFeatures.ReferenceAdapter(worker));
 	monaco.languages.registerDocumentSymbolProvider(languageId, new languageFeatures.DocumentSymbolAdapter(worker));
 	monaco.languages.registerRenameProvider(languageId, new languageFeatures.RenameAdapter(worker));
-	new languageFeatures.DiagnostcsAdapter(languageId, worker));
+	monaco.languages.registerColorProvider(languageId, new languageFeatures.DocumentColorAdapter(worker));
+	new languageFeatures.DiagnostcsAdapter(languageId, worker);
 }
 
 

src/cssWorker.ts

@@ -92,12 +92,18 @@ export class CSSWorker {
 		let actions = this._languageService.doCodeActions(document, range, context, stylesheet);
 		return Promise.as(actions);
 	}
-    findColorSymbols(uri: string): Promise<ls.Range[]> {
+	findDocumentColors(uri: string): Promise<cssService.ColorInformation[]> {
 		let document = this._getTextDocument(uri);
 		let stylesheet = this._languageService.parseStylesheet(document);
-		let colorSymbols = this._languageService.findColorSymbols(document, stylesheet);
+		let colorSymbols = this._languageService.findDocumentColors(document, stylesheet);
 		return Promise.as(colorSymbols);
 	}
+	getColorPresentations(uri: string, color: cssService.Color, range: ls.Range): Promise<cssService.ColorPresentation[]> {
+		let document = this._getTextDocument(uri);
+		let stylesheet = this._languageService.parseStylesheet(document);
+		let colorPresentations = this._languageService.getColorPresentations(document, stylesheet, color, range);
+		return Promise.as(colorPresentations);
+	}
 	doRename(uri: string, position: ls.Position, newName: string): Promise<ls.WorkspaceEdit> {
 		let document = this._getTextDocument(uri);
 		let stylesheet = this._languageService.parseStylesheet(document);

src/languageFeatures.ts

@@ -11,6 +11,7 @@ import * as ls from 'vscode-languageserver-types';
 
 import Uri = monaco.Uri;
 import Position = monaco.Position;
+import IRange = monaco.IRange;
 import Range = monaco.Range;
 import Thenable = monaco.Thenable;
 import Promise = monaco.Promise;
@@ -130,18 +131,18 @@ function fromPosition(position: Position): ls.Position {
 	return { character: position.column - 1, line: position.lineNumber - 1 };
 }
 
-function fromRange(range: Range): ls.Range {
+function fromRange(range: IRange): ls.Range {
 	if (!range) {
 		return void 0;
 	}
-	return { start: fromPosition(range.getStartPosition()), end: fromPosition(range.getEndPosition()) };
+	return { start: { line: range.startLineNumber - 1, character: range.startColumn - 1 }, end: { line: range.endLineNumber - 1, character: range.endColumn - 1 } };
 }
 
 function toRange(range: ls.Range): Range {
 	if (!range) {
 		return void 0;
 	}
-	return new Range(range.start.line + 1, range.start.character + 1, range.end.line + 1, range.end.character + 1);
+	return new monaco.Range(range.start.line + 1, range.start.character + 1, range.end.line + 1, range.end.character + 1);
 }
 
 function toCompletionItemKind(kind: number): monaco.languages.CompletionItemKind {
@@ -213,6 +214,9 @@ export class CompletionAdapter implements monaco.languages.CompletionItemProvide
 					item.range = toRange(entry.textEdit.range);
 					item.insertText = entry.textEdit.newText;
 				}
+				if (entry.additionalTextEdits) {
+					item.additionalTextEdits = entry.additionalTextEdits.map(toTextEdit)
+				}
 				if (entry.insertTextFormat === ls.InsertTextFormat.Snippet) {
 					item.insertText = { value: <string>item.insertText };
 				}
@@ -462,6 +466,48 @@ export class DocumentSymbolAdapter implements monaco.languages.DocumentSymbolPro
 	}
 }
 
+export class DocumentColorAdapter implements monaco.languages.DocumentColorProvider {
+
+	constructor(private _worker: WorkerAccessor) {
+	}
+
+	public provideDocumentColors(model: monaco.editor.IReadOnlyModel, token: CancellationToken): Thenable<monaco.languages.IColorInformation[]> {
+		const resource = model.uri;
+
+		return wireCancellationToken(token, this._worker(resource).then(worker => worker.findDocumentColors(resource.toString())).then(infos => {
+			if (!infos) {
+				return;
+			}
+			return infos.map(item => ({
+				color: item.color,
+				range: toRange(item.range)
+			}));
+		}));
+	}
+
+	public provideColorPresentations(model: monaco.editor.IReadOnlyModel, info: monaco.languages.IColorInformation, token: CancellationToken): Thenable<monaco.languages.IColorPresentation[]> {
+		const resource = model.uri;
+
+		return wireCancellationToken(token, this._worker(resource).then(worker => worker.getColorPresentations(resource.toString(), info.color, fromRange(info.range))).then(presentations => {
+			if (!presentations) {
+				return;
+			}
+			return presentations.map(presentation => {
+				let item: monaco.languages.IColorPresentation = {
+					label: presentation.label,
+				};
+				if (presentation.textEdit) {
+					item.textEdit = toTextEdit(presentation.textEdit)
+				}
+				if (presentation.additionalTextEdits) {
+					item.additionalTextEdits = presentation.additionalTextEdits.map(toTextEdit)
+				}
+				return item;
+			});
+		}));
+	}
+}
+
 /**
  * Hook a cancellation token to a WinJS Promise
  */