Unable to Update Style Manager with Correct Font Values & Changes Not Reflecting on Page

[asimex]

Hello everyone,

I’m working with GrapesJS and trying to get correct values from the selected component and push them into the Style Manager. I’m facing an issue where I can retrieve the font values, but they are not reflected in the Style Manager.

Here’s my code for capturing the style information:

editor.on('component:selected', (component) => {
const style = component.getStyle();
const fontFamily = style['font-family'];
const fontSize = style['font-size'];
const fontWeight = style['font-weight'];

console.log(`Font family: ${fontFamily}, Font size: ${fontSize}, Font weight: ${fontWeight}`);

});

In this code, I can log the correct values to the console, but I'm unable to update them in the Style Manager.

I also tried the following approach:
editor.on("component:selected", (component) => {
const element = component.view.el;
const computedStyles = window.getComputedStyle(element);

const fontSize = computedStyles.getPropertyValue("font-size");
const fontWeight = computedStyles.getPropertyValue("font-weight");
const fontFamily = computedStyles.getPropertyValue("font-family");
const fontColor = computedStyles.getPropertyValue("color");

console.log("Font Color:", fontColor);
console.log("Font Size:", fontSize);
console.log("Font Weight:", fontWeight);
console.log("Font Family:", fontFamily);

component.setStyle({
    'font-size': fontSize || 'inherit',
    'font-weight': fontWeight || 'normal',
    'font-family': fontFamily || 'sans-serif',
    'color': fontColor || 'black'
});

component.view.render();
component.trigger('change:style');
editor.StyleManager.render();

});
With this, I can get the values in the console, but the values are not being reflected in the Style Manager.

Additionally, even when I manually change a style (like font size or color) in the Style Manager, these changes are not being reflected on the page. It seems like the style manager is not updating the component on the canvas properly.

Could someone guide me on how to properly update the Style Manager with the correct values and ensure that any changes made in the Style Manager are reflected on the page?

Thank you!