Feature Request: Integrating a CSS Editor into the StyleManager

[rashidali99]

Hi there,

I’m currently working with GrapesJS, and I wanted to suggest an enhancement to the StyleManager. The goal is to improve the user experience by providing a more advanced, interactive CSS editing experience when selecting components.

Currently, when an element is selected, its styles are shown in a simple textarea in the StyleManager. While this works for basic needs, I believe integrating a full-featured CSS editor (e.g., using CodeMirror or a similar editor) could significantly enhance the workflow, offering features such as:

Syntax highlighting
Line numbers
Bracket matching
Autocomplete for CSS properties and values
My Goal:
I would like to achieve the following functionality:

Element Style Retrieval: When a component is selected, its current styles (e.g., from getStyle()) should be extracted and displayed inside a code editor, such as CodeMirror, within the StyleManager.

Example Workflow:
A user selects an element on the canvas.
The StyleManager displays a CSS editor populated with the component's current styles in a CodeMirror (or similar) editor.
The user makes changes, and these changes are immediately applied to the element on the canvas.

Current Code

// Add Custom CSS sector to the Style Manager
editor.StyleManager.addSector('Custom', {
    name: 'Custom CSS',
    open: false,
    properties: [
        {
            property: 'custom-css',
            type: 'textarea',
            full: true,
            clear: true,
        },
    ],
});

// Listen for the component being selected and update the textarea with its CSS
editor.on('component:selected', () => {
    const selected = editor.getSelected();
    if (selected) {
        const styles = selected.getStyle();
        let cssText = '';

        const tagName = selected.get('tagName').toLowerCase();
        let selector = tagName;

        if (selected.get('attributes').id) {
            selector = `#${selected.get('attributes').id}`;
        } else if (selected.get('attributes').class) {
            const classNames = selected.get('attributes').class.split(' ').join('.');
            selector = `.${classNames}`;
        }

        cssText += `${selector} {\n`;

        for (const prop in styles) {
            if (styles[prop]) {
                cssText += `  ${prop}: ${styles[prop]};\n`;
            }
        }

        cssText += '}';
        const customCssProperty = editor.StyleManager.getProperty('Custom', 'custom-css').set({ default: cssText })
        if (customCssProperty) { 
            customCssProperty.set({ value: cssText });
        }
    }
});

[artf]

You should be able to create your own style manager properties: https://grapesjs.com/docs/modules/Style-manager.html#customization