How to Create a Custom Language in Monaco Editor for Inline CSS (Without Selectors or Brackets)

Question

I am working on integrating Monaco Editor into a project and need to customize the CSS language support for a specific use case. My goal is to adapt the CSS language mode for inline styles, similar to what's used in HTML's style attribute. This means I need to configure the language mode to accept CSS properties and values without the need for selectors or curly braces.

Specific Problem: I am looking for a way to modify the existing CSS language configuration in Monaco Editor so that it accepts CSS properties and values directly (without the need for enclosing them in curly braces {}) and retains other features like syntax highlighting and autocomplete.

What I've Tried:

I've explored the Monaco Editor's documentation and examples, but most are focused on defining new languages from scratch or simple modifications to existing ones.
I've attempted to use monaco.languages.setMonarchTokensProvider to define a custom tokenizer, but I'm struggling with how to modify the existing CSS tokenizer to meet my requirements effectively.

languages.register({ id: "inlineStyle" });

languages.onLanguage("inlineStyle", () => {
    languages.setLanguageConfiguration("inlineStyle", conf);
    languages.setMonarchTokensProvider("inlineStyle", {tokenizer: {
        root: [
            [/([a-zA-Z\-]+)\s*:/, "property"],
            [/([a-zA-Z\-]+)\s*$/, "property"],
            [/([a-zA-Z\-]+)\s*;\s*$/, "property"],
            [/([a-zA-Z0-9\s\.\#\-\(\)]+)(?=;|$)/, "value"],
        ]
    }});

    function fetchCssProperties() {
        // This is a simplified example. In a real application, you might fetch these properties from a server or a file.
        return [
            { name: "color", values: ["red", "green", "blue"] },
            { name: "background-color", values: ["yellow", "cyan", "magenta"] },
            { name: "width", values: ["100px", "50%", "auto"] },
            { name: "height", values: ["200px", "75%", "auto"] },
            // Add more properties as needed...
        ];
    }

    languages.registerCompletionItemProvider("inlineStyle", {
        provideCompletionItems: function(model, position) {
            // Fetch CSS properties and their values from a data source
            const cssProperties = fetchCssProperties();

            // Map CSS properties and their values to Monaco Editor completion items
            const completionItems = cssProperties.flatMap(property => {
                const propertyCompletionItem = {
                    label: property.name,
                    kind: languages.CompletionItemKind.Property,
                    insertText: property.name + ": ",
                    detail: "CSS Property",
                    documentation: "Inserts a CSS property"
                };

                const valueCompletionItems = property.values.map(value => {
                    return {
                        label: value,
                        kind: languages.CompletionItemKind.Value,
                        insertText: value,
                        detail: "CSS Value",
                        documentation: `Inserts the value "${value}" for the CSS property "${property.name}"`
                    };
                });

                return [propertyCompletionItem, ...valueCompletionItems];
            });

            return { suggestions: completionItems };
        }
    });

});

The above code works (kind of) but relies only on the properties I wrote in fetchCssProperties. Also, the whole list of CSS properties and values might be quite extensive, and I don't think parsing it every time I type is a good idea. I'm pretty sure Monaco has a better way of dealing with this for their basic CSS language.

My Question: Could anyone provide guidance or examples on how to modify the existing CSS language configuration in Monaco Editor to support direct input of CSS properties and values, without selectors and curly braces?

Any help or pointers to relevant parts of the Monaco Editor API or similar implementations would be greatly appreciated.

Thank you!

Please stop closing my questions. If you consider that it needs more focus, make an effort and actually read the whole text. Thank you. — Dan
– Dan, Commented Dec 27, 2023 at 10:02

Mike Lischke · Accepted Answer · 2023-12-28 09:49:41Z

1

There's no way to modify an existing language configuration or highlighter or code completion provider etc.

All you could do is to create your own language. Certain parts like the language configuration (braces, keywords and such) can be imported from an existing definition and be used to create a new definition from, but that's it.

And before you ask how to do that: it's not a simple thing that can be answered with a single answer here.

answered Dec 28, 2023 at 9:49

Mike Lischke

54.3k18 gold badges142 silver badges209 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to Create a Custom Language in Monaco Editor for Inline CSS (Without Selectors or Brackets)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related