Get all css without specific component and it's children
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): Cheers ! EDITED: fi...
Read full answer below ↓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)
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
@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.
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.
Issue #1558
Code manager set code
Hi @artf. Is there something similar to this editor.CodeManager.setCode(component, 'css', {cssc: editor.CssComposer} to update the css rule...
Issue #3137
When I select an particular element I'm not getting its styles. This issue happens only with some elements.
Not getting styles of the selected element Here is my code, const model = editor.StyleManager.getModelToStyle(component); let styleObject =...
Issue #3627
[QUESTION]: I'm trying to duplicate the page, but the styles are not geting applied due to the Ids, changes to -2,-3 at the end.
This is what my function looks like. I am trying duplicate the page, the HTML part is fine but as css is applied through ids, when a new pa...
Issue #3421
[QUESTION] How to remove class selector css rule
I'm using componentFirst set to true to let my users apply needed style to component they selected. Selecting a component which is applied...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.