[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)
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 #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...
Issue #2991
Editor.getSelected() giving me undefined.
Hi @artf I want to append dynamic pages to the specific link trait. Here is what i am using. const component = editor.getSelected(); compon...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.