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

Add color provider sample (#775)

Browse source
This commit is contained in:
Alex Dima 2018-03-29 16:31:34 +02:00
parent 53ad835ce7
commit 6fa2a2ec0e
6 changed files with 178 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

0
website/playground/new-samples/extending-language-services/color-provider-example/sample.css Normal file
View file

1
website/playground/new-samples/extending-language-services/color-provider-example/sample.html Normal file
View file

@ -0,0 +1 @@
<div id="container" style="height:100%;"></div>

63
website/playground/new-samples/extending-language-services/color-provider-example/sample.js Normal file
View file

@ -0,0 +1,63 @@
monaco.languages.register({
id: "colorLanguage"
})
monaco.editor.create(document.getElementById("container"), {
value: "red\nblue\ngreen",
language: "colorLanguage",
colorDecorators: true
});
monaco.languages.registerColorProvider("colorLanguage", {
provideColorPresentations: (model, colorInfo) => {
var color = colorInfo.color;
var red256 = Math.round(color.red * 255);
var green256 = Math.round(color.green * 255);
var blue256 = Math.round(color.blue * 255);
var label;
if (color.alpha === 1) {
label = "rgb(" + red256 + ", " + green256 + ", " + blue256 + ")";
} else {
label = "rgba(" + red256 + ", " + green256 + ", " + blue256 + ", " + color.alpha + ")";
}
return [
{
label: label
}
];
},
provideDocumentColors: () => {
return [
{
color: { red: 1, blue: 0, green: 0, alpha: 1 },
range:{
startLineNumber: 1,
startColumn: 0,
endLineNumber: 1,
endColumn: 0
}
},
{
color: { red: 0, blue: 1, green: 0, alpha: 1 },
range:{
startLineNumber: 2,
startColumn: 0,
endLineNumber: 2,
endColumn: 0
}
},
{
color: { red: 0, blue: 0, green: 1, alpha: 1 },
range:{
startLineNumber: 3,
startColumn: 0,
endLineNumber: 3,
endColumn: 0
}
}
]
}
})