Traits Tab inside of Style Manager

[PaulSchult]

Hey there,

I want to move the Traits Tab into the Style Manager, just like you did it in the Website Demo. Sadly, the docs didn't yield any answers.
While inspecting the demo code, I found your solution to the problem:

var traitsSector = $('<div class="gjs-sm-sector no-select">'+
  '<div class="gjs-sm-sector-title"><span class="icon-settings fa fa-cog"></span> <span class="gjs-sm-sector-label">Settings</span></div>' +
  '<div class="gjs-sm-properties" style="display: none;"></div></div>');
var traitsProps = traitsSector.find('.gjs-sm-properties');
traitsProps.append($('.gjs-trt-traits'));
$('.gjs-sm-sectors').before(traitsSector);
traitsSector.find('.gjs-sm-sector-title').on('click', function(){
   var traitStyle = traitsProps.get(0).style;
   var hidden = traitStyle.display == 'none';
   if (hidden) {
       traitStyle.display = 'block';
    } else {
       traitStyle.display = 'none';
    }
});

You used jQuery to "fake" the Traits Tab into the Style Manager.

Now to the Request:
Is there already a way to do this without using jQuery or any other kind of "faking" I didnt find? If not I'd think it would a great addition to grapesJS, if you could build nested section more easily, cleaner and safer.

Greetings,
Paul

[ronaldohoch]

Hello!

I think you can use this website to adapt the code: https://youmightnotneedjquery.com/