Custom traits are not loading inside a custom block

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Version 133.0.6943.98

Reproducible demo link

https://codesandbox.io/p/sandbox/loving-breeze-mdls43?file=%2Findex.js%3A77%2C6

Describe the bug

Iam trying to add some custom triats to my block unfortunately i can only see the default triats [id,title] my block have few html code but if i remove all the html code and put only one string like hellow world without any html in component property the triats will show

  components: `
          <h2 class="text-2xl font-bold text-gray-800" data-event-title>
            Event Name
          </h2>
          <p class="text-gray-600 mt-2">
            Start Date: <span data-event-start>YYYY-MM-DD</span>
          </p>
          <p class="text-gray-600">
            End Date: <span data-event-end>YYYY-MM-DD</span>
          </p>
        `, when do like this it traits will not come

but

 components: `
        Hello world
        `,
if i put like this all my triats will come


this is my entire block code



const myEventBlockPlugin = (editor, options = {}) => {
  editor.Components.addType("event-block", {
    model: {
      defaults: {
        tagName: "div",
        draggable: true,
        droppable: false,
        attributes: { class: "p-4 bg-white shadow-lg rounded-lg text-center" },
            components: `
          <h2 class="text-2xl font-bold text-gray-800" data-event-title>
            Event Name
          </h2>
          <p class="text-gray-600 mt-2">
            Start Date: <span data-event-start>YYYY-MM-DD</span>
          </p>
          <p class="text-gray-600">
            End Date: <span data-event-end>YYYY-MM-DD</span>
          </p>
        `,
        traits: [
          {
            name: "event-title",
            label: "Event Name",
            type: "text",
            changeProp: true,
          },
          {
            name: "event-start",
            label: "Start Date",
            type: "date",
            changeProp: true,
          },
          {
            name: "event-end",
            label: "End Date",
            type: "date",
            changeProp: true,
          },
        ],
        props: {
          "event-title": "Event Name",
          "event-start": "YYYY-MM-DD",
          "event-end": "YYYY-MM-DD",
        },
      },

      init() {
        this.on("change:event-title", this.updateTitle);
        this.on("change:event-start", this.updateStartDate);
        this.on("change:event-end", this.updateEndDate);
      },

      updateTitle() {
        const title = this.get("event-title");
        this.view.el.querySelector("[data-event-title]").innerText = title;
      },

      updateStartDate() {
        const startDate = this.get("event-start");
        this.view.el.querySelector("[data-event-start]").innerText = startDate;
      },

      updateEndDate() {
        const endDate = this.get("event-end");
        this.view.el.querySelector("[data-event-end]").innerText = endDate;
      },
    },
  });

  editor.Blocks.add("event-block", {
    label: "Event Block",
    content: { type: "event-block" },
    category: "Basic",
  });
};

Code of Conduct

• I agree to follow this project's Code of Conduct