Los rasgos personalizados no se cargan dentro de un bloque personalizado

Versión GrapesJS

• Confirmo que uso la última versión de GrapesJS

¿Qué navegador usas?

Versión 133.0.6943.98

Enlace de demo reproducible

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

Describe el bicho

Estoy intentando añadir algunos triats personalizados a mi bloque. Por desgracia, solo puedo ver los triats predeterminados [id,title]. Mi bloque tiene pocos códigos html, pero si elimino todo el código HTML y pongo solo una cadena como hellow world, sin ningún HTML en la propiedad de componente, los triats se mostrarán

'''js

Componentes: ' <h2 class="text-2xl font-bold text-gray-800" data-event-title> Nombre del evento </h2> <p class="text-gray-600 mt-2"> Fecha de inicio: <span data-evento-inicio>YYYY-MM-DD</span> </p> <p class="text-gray-600"> Fecha de finalización: <span datos-evento-fin>YYYY-MM-DD</span> </p> ', cuando hacen esto, los rasgos no llegan

pero

Componentes: ' Hola mundo `, Si pongo así, todos mis triats vendrán

Este es todo mi código de bloque

const myEventBlockPlugin = (editor, options = {}) => { editor. Components.addType("bloque-evento", { modelo: { Predeterminados: { etiquetaNombre: "div", Arrastrable: Cierto, Droppable: falso, atributos: { clase: "p-4 BG-Sombra blanca-LG redondeada-lg Text-Center" }, Componentes: ' <h2 class="text-2xl font-bold text-gray-800" data-event-title> Nombre del evento </h2> <p class="text-gray-600 mt-2"> Fecha de inicio: <span data-evento-inicio>YYYY-MM-DD</span> </p> <p class="text-gray-600"> Fecha de finalización: <span datos-evento-fin>YYYY-MM-DD</span> </p> `, Rasgos: [ { Nombre: "Evento-Título", etiqueta: "Nombre del evento", Tipo: "texto", cambioProp: cierto, }, { Nombre: "Inicio del evento", etiqueta: "Fecha de inicio", Tipo: "fecha", cambioProp: cierto, }, { Nombre: "Final-Evento", etiqueta: "Fecha de Finalización", Tipo: "fecha", cambioProp: cierto, }, ], Utilería: { "título del evento": "Nombre del evento", "inicio del evento": "AAAAAAAAAAAAAAAA", "final del evento": "YYYY-MM-DD", }, },

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

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

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

updateEndDate() { const endDate = this.get("evento-fin"); this.view.el.querySelector("[data-evento-fin]").innerTexto = finFecha; }, }, });

editor. Blocks.add("evento-bloque", { etiqueta: "Event Block", Contenido: { Tipo: "Bloque de eventos" }, categoría: "Básico", }); };

### Código de conducta

- [x] Acepto seguir el Código de Conducta de este proyecto