SystemSh0cker/monaco-editor
1
0
Fork 0
mirror of https://github.com/microsoft/monaco-editor.git synced 2025-12-22 17:25:39 +01:00
Code Issues Projects Releases Packages Activity

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

Browse source
This commit is contained in:
Martin Aeschlimann 2018-04-30 12:43:38 +02:00
parent c77aec86d5
commit 1fc63ab25c
4 changed files with 78 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

3
README.md
View file

@ -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

9
src/cssMode.ts
View file

@ -4,9 +4,9 @@
*--------------------------------------------------------------------------------------------*/
'use strict';
import {WorkerManager} from './workerManager';
import {CSSWorker} from './cssWorker';
import {LanguageServiceDefaultsImpl} from './monaco.contribution';
import { WorkerManager } from './workerManager';
import { CSSWorker } from './cssWorker';
import { LanguageServiceDefaultsImpl } from './monaco.contribution';
import * as languageFeatures from './languageFeatures';
import Promise = monaco.Promise;
@ -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);
}

16
src/cssWorker.ts
View file

@ -14,12 +14,12 @@ export class CSSWorker {
// --- model sync -----------------------
private _ctx:IWorkerContext;
private _ctx: IWorkerContext;
private _languageService: cssService.LanguageService;
private _languageSettings: cssService.LanguageSettings;
private _languageId: string;
constructor(ctx:IWorkerContext, createData: ICreateData) {
constructor(ctx: IWorkerContext, createData: ICreateData) {
this._ctx = ctx;
this._languageSettings = createData.languageSettings;
this._languageId = createData.languageId;
@ -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);
@ -120,6 +126,6 @@ export interface ICreateData {
languageSettings: cssService.LanguageSettings;
}
export function create(ctx:IWorkerContext, createData: ICreateData): CSSWorker {
export function create(ctx: IWorkerContext, createData: ICreateData): CSSWorker {
return new CSSWorker(ctx, createData);
}

56
src/languageFeatures.ts
View file

@ -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 {
@ -200,7 +201,7 @@ export class CompletionAdapter implements monaco.languages.CompletionItemProvide
return;
}
let items: monaco.languages.CompletionItem[] = info.items.map(entry => {
let item : monaco.languages.CompletionItem = {
let item: monaco.languages.CompletionItem = {
label: entry.label,
insertText: entry.insertText,
sortText: entry.sortText,
@ -213,8 +214,11 @@ 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 };
item.insertText = { value: <string>item.insertText };
}
return item;
});
@ -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
*/