CSS definitions of nested components are not handled properly

[pety-dc]

With grapesjs-component-code-editor when I select a component that has a child component, the CSS editor field lists the CSS definiton of both components

this plugin however only lists the CSS of the currently selected component. This may be an intentional design choice. But unfortunately when the parent component is selected and HTML content gets applied, the CSS definitions of the child element get dismissed.

Again I can see that this plugin has similarities with grapesjs-component-code-editor which updates the CSS editor field with this code part:

this.cssCodeEditor.setContent(this.editor.CodeManager.getCode(this.component, 'css', {
                cssc: this.editor.Css
            }));

You use the same solution only for the wrapper (root) component. I don't know for that reason, but maybe instead of using the

if (component.attributes.type === 'wrapper') 

the

if (component.components().length) 

as condition that handles CSS of nested components would be more approprate.

Unfortunately this is not enough as the CSS of the child component appears in the css editor field, but still doesn't get saved this way.

[pety-dc]

This is because there is a newline character between two CSS rule definitions. Fortunetely there is a solution for that too.

in the updateHtml method:

.map((cssObjectRule) => {
                    if (!(/}$/.test(cssObjectRule))) {
                        //* Have to check closing bracket existence for every rule cause it can be missed after split and add it if it doesnt match
                        return `${cssObjectRule}}`;
                    }
                    return cssObjectRule;
                })

should become:

.map((cssObjectRule) => {
                    cssObjectRule = cssObjectRule.trim();
                    if (!(/}$/.test(cssObjectRule))) {
                        //* Have to check closing bracket existence for every rule cause it can be missed after split and add it if it doesnt match
                        return `${cssObjectRule}}`;
                    }
                    return cssObjectRule;
                })