Manually fire style "sync"?

[ctrhub]

Currently, we are allowed to create your own UI for the Style Manager. And that's great, but the only thing I can't find is a way to fire the "sync" styles event.

https://github.com/GrapesJS/grapesjs/blob/dev/src/selector_manager/view/ClassTagsView.ts#L103

Maybe I'm missing something?

[ctrhub]

This is what I have come to so far, but I don't like this solution. At least it doesn't sync state(hover) styles. Maybe there is something built in?

export const syncStyle = (editor: Editor) => {
  const em = editor.EditorModel;
  const target = em.getSelected();
  const targets = em.getSelectedAll();
  const cssC = em.Css;
  const opts = { noDisabled: 1 };
  const selectors = em.Selectors.__getCommonSelectors(targets, { opts });
  const state = em.get('state');
  const mediaText = em.getCurrentMedia();
  const ruleComponents: CssRule[] = [];
  const rule = cssC.get(selectors, state, mediaText) || cssC.add(selectors, state, mediaText);
  let style;

  targets.forEach((component) => {
    const ruleComponent = cssC.getIdRule(component.getId(), {
      state,
      mediaText,
    })!;
    style = ruleComponent.getStyle();
    ruleComponent.setStyle({});
    ruleComponents.push(ruleComponent);
  });

  if (style) {
    rule.addStyle(style);
  }
  em.trigger('component:toggled');
  em.trigger('component:sync-style', {
    component: target,
    selectors,
    mediaText,
    rule,
    ruleComponents,
    state,
  });
};

And check

export const checkSync = (editor: Editor) => {
  const collection = editor.SelectorManager.getSelected();
  const target = editor.getSelected();
  const componentFirst = editor.SelectorManager.getComponentFirst();

  let hasStyle;

  if (target && componentFirst && collection.length) {
    const style = target.getStyle();
    hasStyle = Object.keys(style).length > 0;
  }
  return hasStyle;
};

[ctrhub]

Any ideas 🤔?

[artf]

This is what I have come to so far, but I don't like this solution. At least it doesn't sync state(hover) styles. Maybe there is something built in?

I think it would be a matter of checking the available API and figuring out your own logic here.

[glaprida]

Might be a bit hacky... but I had the same issue, and I solved with this line

document.querySelector('.gjs-clm-tags-btn__sync').click() // manually click the sync button

Hope it helps!