Unable to add traits for custom components via Settings

[pakhi96]

Hi Team
I'm trying to add support for user input using the trait manager feature of GrapesJs and for that I'm trying to add the Settings sector in style like in the demo. But I'm unable to add it as I keep getting the below error:
Failed to execute 'appendchild' on 'node' parameter 1 is not of type 'node'

The code is as below:
`editor.on("load", function () {
var $ = grapesjs.$;

    // Add Settings Sector
    var traitsSector = $(
      '<div class="gjs-sm-sector no-select">' +
        '<div class="gjs-sm-title"><span class="icon-settings fa fa-cog"></span> Settings</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-title").on("click", function () {
      var traitStyle = traitsProps.get(0).style;
      var hidden = traitStyle.display == "none";
      if (hidden) {
        traitStyle.display = "block";
      } else {
        traitStyle.display = "none";
      }
    });
  });`
  
Any help would be highly appreaciated.
Thanks in advance!

[pakhi96]

@artf Can you please help with how I can add traits to custom components for user input?

[artf]

Please check the demo page if you need to reuse the same logic.