Issue #2922Opened July 27, 2020by RJCAM2 reactions

[QUESTION]: Get all css without specific component and it's children

Question

Hi, so, in this issue #2861 we can get all the css of a selected element and it's children with:

const component = editor.getSelected();
let componentCss = editor.CodeManager.getCode(component,  'css', {
   cssc: editor.CssComposer
});

But if I want to get all the css but without specific component and it's children or exactly the inverse of the above Is there a way to do this?

Answers (3)

mcottretJuly 28, 20201 reactions

Hi @RJCAM !

I don't think there's a built-in way to achieve this, but building on top of the answer you linked, you can recursively concatenate all the components' CSS, filtering out the selected one & its children like the following (assuming window.editor for the example, may need to be adapted):

function getAllExceptSelectedComponentsCss(includeWrapper = true) {
    const selectedComponent = editor.getSelected();

    return includeWrapper ?
      allExceptSelectedComponentsCssReducer('', editor.getWrapper()) :
      editor.getComponents().reduce(allExceptSelectedComponentsCssReducer, '')
    ;

    function allExceptSelectedComponentsCssReducer(allExceptSelectedComponentsCss, component) {
      if (component !== selectedComponent) {
        /**
         * Since editor.CodeManager.getCode also retrieves a component children's styles, we need to silently
         *  remove each component's children before retrieving their CSS, & re-append them back afterwards, because the
         *  selected component might be nested.
         */
        const childrenComponents = component.components().models;

        component.empty({silent: true});

        allExceptSelectedComponentsCss += editor.CodeManager.getCode(component, 'css', {
          cssc: editor.CssComposer
        });

        if (childrenComponents.length) {
          component.append(childrenComponents, {silent: true});
          allExceptSelectedComponentsCss = childrenComponents.reduce(allExceptSelectedComponentsCssReducer, allExceptSelectedComponentsCss);
        }
      }

      return allExceptSelectedComponentsCss;
    }
}

Cheers !

EDITED: fixed styles of nested components being retrieved by parents

mcottretJuly 28, 20201 reactions

@RJCAM I'm sorry I just noticed that my previous answer wasn't working because retrieving the CSS of a component with children also included the children's CSS (it hence produced duplicated styles, as well as including the selected component's style if it was nested). I edited it to fix that.

RJCAMJuly 28, 20200 reactions

Hi @mcottret, thanks for your response I think your right, I'm going to edit your code to make it work as I expect I really appreciate your help, thank you!

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.