BUG: When Style Manager is in another div, the message "Select an element before using Style Manager" is not showing

[Nielsticot]

Version: 0.16.34

What is the expected behavior?

When the editor is initialized, no element is selected, so the style manager should say "Select an element before using Style Manager" like it does when not using "appendTo" in the editor configuration.

What is the current behavior?

When using "appendTo" in the editor config like this :

var editor = grapesjs.init({
  ...
  styleManager: {
      appendTo: "#styles"
  },
  ...
}

the style manager starts with all the sectors showing although no element is selected

Demo

The same behavior can be seen in the example from https://grapesjs.com/docs/getting-started.html#style-manager

[mosh-tudor]

I used this code to solve it:

const showStylesSector = editor => {
  const stylesButton = editor.Panels.getButton('panel-sidebar-header', 'show-styles');
  const layersButton = editor.Panels.getButton('panel-sidebar-header', 'show-layers');

  // Disable this feature if the layers manager is active.
  if (!layersButton.attributes.active) {
    stylesButton.set('active', 1);
  }
};

editor.on('component:selected', () => {
  showStylesSector(editor);
});

[Nielsticot]

This is not what I want, my issue is before any element is selected so before the event "component:selected" is trigerred. I temporarily fixed it by selecting an element on editor load but it is not what I really want

editor.on('load', () => {
    editor.select(editor.getWrapper().find('#entry-point')[0])
});

[artf]

If you're using the StyleManager in a custom element you have to handle that state on your own.

<div class="sm-wrapper">
  <div id="styles"></div><!-- here is where you append the style manager -->
  <div class="sm-empty-state">
     Select an element
  </div>
</div>

// use `component:toggled` as `component:selected` is not triggered if the selection is empty
editor.on('component:toggled', () => {
 if (editor.getSelected()) {
  // show style manager, hide empty state
 } else {
 // show empty state, hide style manager
 }
});