Cannot change style manager sector names on UI

[kla-ko]

I want change the (display) name of style manager sectors for translating the UI.
I use the following piece of code as an example:

      editor.StyleManager.getSector('general').setName('Allgemein');
      editor.StyleManager.getSector('dimension').setName('Abmessungen');

The style manager data structure become updated just fine, but these changes are not reflected on the UI.
So, do I need to re-render somehow at some point?

Thanks!

[glaprida]

Not sure why that doesn't work, but there are other ways you can do the same thing.

You can either define your sectors with a different name from the start (on the styleManager config inside editor.init() ) or make use of the i18n module.

Defining sector name in styleManager config

const editor = grapesjs.init({
   // options
   styleManager: {
     sectors: [
        {
          name: 'Allgemein',//previously 'General'
          open: false,
          properties: ['display', 'float', 'position', 'top', 'right', 'left', 'bottom'],
        },
        {
          name: 'Abmessungen',//previously 'Dimension'
          open: false,
          properties: ['width', 'height', 'max-width', 'min-height', 'margin', 'padding'],
        },
        //more sectors...
   }
});

Full SM Config

---

Using i18n module for translation

I18n docs
I personally find the following link very useful: I18n template

[kla-ko]

Thank you. Very helpful!! Will go one of these ways now ...

Still, maybe someone knows why this setName() thing doesn't work.

[artf]

I18n module has precedence here. So, if the style manager i18n path is defined (here the default values), the name of the sector itself will be skipped.