Monaco-editor: How does DocumentColorProvider work?

Created on 17 Mar 2018 · 6Comments · Source: microsoft/monaco-editor

monaco-editor version: 0.11.1
Browser: chrome
OS: win 10
Steps or JS usage snippet reproducing the issue:

How does DocumentColorProvider work? Can someone provide us an example I can try out on the playground?
ref: https://github.com/Microsoft/monaco-editor/blob/master/monaco.d.ts#L4945

Cheers in advance!

Source

gujiman

Most helpful comment

@gujiman I figured it out. Hope this helps!

monaco.languages.register({
    id: "colorLanguage"
})

monaco.editor.create(document.getElementById("container"), {
    value: "red\nblue\ngreen",
    language: "colorLanguage",
    colorDecorators: true
});

monaco.languages.registerColorProvider("colorLanguage", {
    provideColorPresentations: () => {
        return [
            {
                label: "color picker title text"
            }
        ];
    },

    provideDocumentColors: () => {
        return [
            {
                color: { red: 255, blue: 0, green: 0, },
                range:{
                    startLineNumber: 1,
                    startColumn: 0,
                    endLineNumber: 1,
                    endColumn: 0
                }
            },
            {
                color: { red: 0, blue: 255, green: 0, },
                range:{
                    startLineNumber: 2,
                    startColumn: 0,
                    endLineNumber: 2,
                    endColumn: 0
                }
            },
            {
                color: { red: 0, blue: 0, green: 255, },
                range:{
                    startLineNumber: 3,
                    startColumn: 0,
                    endLineNumber: 3,
                    endColumn: 0
                }
            }
        ]
    }

})

rcjsuen on 22 Mar 2018

👍3

All 6 comments

@gujiman I tried playing with this and couldn't get anything to work either. My provideColorPresentations and provideDocumentColors functions don't seem to be called at all.

rcjsuen on 17 Mar 2018

Did you register it? E.g. monaco.languages.registerColorProvider("css", new MyCssColorProvider());.

The cssWorker.js has a findDocumentColors - but I think there are some missing pieces to use that (?) - but I did not look much into that as I have made a custom find colors using tokens to also support SCSS vars and inline style in HTML etc.

AndersMad on 21 Mar 2018

@AndersMad Any chance you can let us view your code so we can test it out in the playground (anything basic to start us off)? cheers!

gujiman on 21 Mar 2018

@gujiman I figured it out. Hope this helps!

monaco.languages.register({
    id: "colorLanguage"
})

monaco.editor.create(document.getElementById("container"), {
    value: "red\nblue\ngreen",
    language: "colorLanguage",
    colorDecorators: true
});

monaco.languages.registerColorProvider("colorLanguage", {
    provideColorPresentations: () => {
        return [
            {
                label: "color picker title text"
            }
        ];
    },

    provideDocumentColors: () => {
        return [
            {
                color: { red: 255, blue: 0, green: 0, },
                range:{
                    startLineNumber: 1,
                    startColumn: 0,
                    endLineNumber: 1,
                    endColumn: 0
                }
            },
            {
                color: { red: 0, blue: 255, green: 0, },
                range:{
                    startLineNumber: 2,
                    startColumn: 0,
                    endLineNumber: 2,
                    endColumn: 0
                }
            },
            {
                color: { red: 0, blue: 0, green: 255, },
                range:{
                    startLineNumber: 3,
                    startColumn: 0,
                    endLineNumber: 3,
                    endColumn: 0
                }
            }
        ]
    }

})

rcjsuen on 22 Mar 2018

👍3

@rcjsuen code is a brilliant starting point for anyone that wants to use this feature

gujiman on 23 Mar 2018

Thank you for the code snippet, I've added a sample with it.