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

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);
});

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])
});

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
 }
});

Thanks for reporting this, @Nielsticot.

Great question about When Style Manager is in another div, the message "Select an element before using Style Manager" is not showing. The recommended approach with ProseMirror is to use the event-driven API.

Start here:

1. Check the GrapesJS documentation for your specific module
2. Look for the on() event listener method
3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

• Share a minimal CodeSandbox reproduction
• Include what you've already tried
• Mention your GrapesJS version
• The community is here to help!