I can't add traits.

[PanuwatChinpratan]

When use editor.setComponents(content); can't get Traits But use this.components(content) can use
So how can I use the editor.setComponents(content); and use traits?

Traits

 editor.TraitManager.addType("edit-endpoint", {
        createInput({ trait }) {
          const currentValue = trait.get("value");
          return `<input type="text" value="${currentValue}" />`;
        },
        onEvent({ elInput, component }) {
          const inputValue = elInput.value;

          component.set("editendpoint", inputValue);
        },
      });

 editor.DomComponents.addType("api-block", {
        model: {
          defaults: {
            traits: [
              {
                type: "endpoint-trait",
                name: "endpoint",
                label: "Endpoint",
              },
              {
                type: "edit-endpoint",
                name: "editendpoint",
                label: "Custom Result",
              },
              {
                type: "hidedisplay",
                name: "hidedisplay",
                label: "hidedisplay",
              },

              {
                type: "map-title",
                name: "mapTitle",
                label: "Title",
              },

              {
                type: "map-body",
                name: "mapBody",
                label: "Body",
              },

              {
                type: "filter-index",
                name: "filterIndex",
                label: "Filter",
              },
            ],
            endpoint: "",
            title: "",
            body: "",
          },
          init() {
            [
              "change:endpoint",
              "change:title",
              "change:body",
              "change:filterIndex",
              "change:editendpoint",
              "change:hidedisplay",
            ].forEach((eventType) => {
              // console.log('eventType', eventType);
              this.listenTo(this, eventType, this.handleEndpointChange);
            });

            this.handleEndpointChange();
          },

          handleEndpointChange() {
            const {
              endpoint,
              title,
              body,
              filterIndex,
              editendpoint,
              hidedisplay,
            } = this.attributes;
            this.fetchAndRender(
              endpoint,
              title,
              body,
              filterIndex,
              editendpoint,
              hidedisplay
            );
          },
          fetchAndRender(
            endpoint,
            title,
            body,
            filterIndex,
            editendpoint,
            hidedisplay
          ) {
            const [startIndex, endIndex] = filterIndex
              ? filterIndex.split(",").map(Number)
              : [0, 0];

            fetch(endpoint)
              .then((response) => response.json())
              .then((data) => {
                let OBJ = data;
                if (editendpoint) {
                  const arr = editendpoint.split(".");
                  console.log("arr", arr);

                  arr.forEach((key) => {
                    if (key.includes("[") && key.includes("]")) {
                      // ถ้า key มีรูปแบบ [index]
                      const parts = key.split("[");
                      const objKey = parts[0];
                      const objIndex = parseInt(parts[1].replace("]", ""));

                      if (OBJ[objKey] && Array.isArray(OBJ[objKey])) {
                        OBJ = OBJ[objKey][objIndex];
                      } else {
                        // กรณีที่ key เป็นอะเรย์แต่ไม่ใช่ carts
                        OBJ = OBJ[objKey];
                      }
                    } else {
                      // กรณีที่ key ไม่มีรูปแบบ [index]
                      OBJ = OBJ[key];
                    }
                  });
                }
                console.log("fetch สำเร็จนะถ้าแสดงข้อมูล", OBJ);
                const content = OBJ.slice(startIndex, endIndex + 1)
                  .map((item) => {
                    // เงื่อนไขสำหรับการตรวจสอบการลบบางส่วน

                    const newDataTitle = item[title || "title"];
                    console.log("newDataTitle", newDataTitle);
                    const newDataBody = item[body || "body"];

                    console.log("newDataBody", newDataBody);

                    return `<div class="card_body">
                                        <div class="featured_content" style="border:1px solid">
                                          <div class="featured_content_post">
                                            <img src="${item.png}" alt="" class="profile"  />
                                            <h1 style="display:${hidedisplay}" >${newDataTitle}</h1>
                                            <div class="post_detail">
                                              <p>${newDataBody}</p>
                                            </div>
                                          </div>
                                        </div>
                                      </div>`;
                  })
                  .join("");
                const component = editor.setComponents(content);

                console.log("ดึงข้อมูลจาก API มาอัปเดตแล้ว", component);
              })
              .catch((error) => {
                const content = `<div class="card_body">
                                        <div class="featured_content">
                                          <div class="featured_content_post">
                                            <img src="../TEST/images/Mask Group-3.png" alt="" class="profile" />
                                            <h1>waiting Endpoint...</h1>
                                            <div class="post_detail">
                                              <p>waiting Endpoint...</p>
                                            </div>
                                          </div>
                                        </div>
                                      </div>`;

                const component = editor.setComponents(content);

                console.log("ดึงข้อมูลจาก API มาอัปเดตแล้ว", component);
              });
          },
        },
      });