Componente personalizado para nodo de texto que incluye caracteres especiales

Hola @malonecj no estoy seguro de cómo esperarías ver y gestionar exactamente esos componentes (especialmente cuando combinas plantillas dentro de condiciones), pero creo que tu enfoque actual en 'isComponent' no es del todo correcto porque tienes que lidiar con nodos de texto. Dentro de tu handle líquido 'isComponent' usas 'el.textContent', que creo que debería ser similar a liquid condition con 'el.nodeValue', ya que solo está disponible en nodos de texto (probablemente sería mejor comprobar si realmente es un nodo de texto 'el.nodeType === 3'). Como primer paso, intenta actualizar tus componentes personalizados de esta manera, ya que actualmente se saltan del analizador debido a esta condición '''js editor. Components.addType("condición líquida", { isComponent: (el) => { const { nodeValue } = el; const isComponent = nodeValue?. trim().includes("{%"); Esto probablemente te ayudará a entender mejor cómo procesa el analizador los nodos console.log('isComponent liquid-condition', { el, nodeValue, isComponent });

if (isComponent) { return { etiquetaNombre: 'liquid-condition-el', componentes: { type: 'textnode', content: nodeValue }, } } }, ...

editor. Components.addType("liquid-handle", { isComponent: (el) => { const { nodeValue } = el; const isComponent = nodeValue?. trim().includes("{{"); console.log('isComponent liquid-handle', { el, nodeValue, isComponent });

if (isComponent) { return { etiquetaNombre: 'mango-líquido-el', componentes: { type: 'textnode', content: nodeValue }, } } }, ...

Pero no creo que este enfoque funcione una vez que empieces a mezclar plantillas con condiciones, ya que desde la perspectiva del analizador HTML recibes algo así:

• div
  • textNode - que contiene contenido que comienza desde '{% caso...' a '{% en mayúscula final %}'
  • div - que contiene 'Hello World!!'
  • textNode - que contiene '{{ some_content }}'

Así que probablemente otro enfoque sería usar un componente personalizado como analizador del motor de plantillas
'''js

Components.addType("condición-caso-líquido", {
   aquí no hace falta isComponent, solo el analizador generará componentes para el motor
    modelo: {
        toHTML(opts) {
            return '{% caso ${this.get('conditionName')} %}
                ${this.getInnerHTML(opts)}
            {% en mayúscula %}';
        }
    },
});

// ... Otros componentes para manejar mejor el motor de plantillas

Components.addType("template-engine", {
    isComponent: (el) => {
        const { nodeValue } = el;

si (¿nodeValue?. trim().includes("{%")) {
          const parsedTextNode = parseEngineText(nodeValue);
          Transforma cosas analizadas en componentes para el editor, por ejemplo.
          return {
              Tipo: 'motor-plantilla',
              Componentes: [
                  {
                      Tipo: 'condición de caso líquido',
                      NombreCondición: 'shop.subscription.NombrePlanActual',
                      Componentes: [
                          // ... Otros componentes del motor plantilla
                      ]
                }
                // ...
              ]
          };
        }
      },
});

Voy a cerrar esto porque no hay problemas con el núcleo en sí, si tienes alguna otra pregunta @malonecj dímelo.

Gracias por informar de esto, @malonecj.

¡Gran sugerencia sobre componente personalizado para nodo de texto incluyendo caracteres especiales! Aunque esta función específica aún no está en la API principal, existen varias formas de lograr un comportamiento similar.

Usando el sistema de eventos: '''javascript editor.on('component:update', (component) => { Tu lógica aquí });

**Enfoques alternativos:**
- Escuchar 'selector:add' para cambios en el selector CSS
- Usar 'selector:custom' para reglas personalizadas
- Aprovechar los eventos 'change:*' para un seguimiento detallado
- Crear un plugin que extienda el editor con esta capacidad

**Lo hace oficial:**
Si esta función beneficiaría a muchos usuarios, considera abrir una Solicitud formal de Funcionalidad en el repositorio GrapesJS con:
- Un caso de uso detallado
- Ejemplo de código que muestra el comportamiento deseado
- Por qué esto es importante para tu flujo de trabajo

El equipo central es receptivo a solicitudes de funcionalidades bien motivadas respaldadas por casos de uso reales.