StyleManager - SectorsView - addToCollection() utiliza el atributo "name" para construir el ID y falla con varios espacios o caracteres especiales

Hola @artf,

Usando la propiedad pluginOpts del método grapesjs.init(), personalicé los sectores que aparecen en el Style Manager (a través del plugin Newsletter), así:

'''js grapesjs.init({ [...] Plugins: ['GJS-plugin-CKEDITOR', 'GJS-Blocks-Basic', 'GJS-Preset-Newsletter', 'GJS-Preset-Webpage'], pluginsOpts: { [...] 'gjs-preset-newsletter': { SectoresEstiloGestionado: [ { id: "dimensiones", nombre: "Mi etiqueta personalizada con espacios" buildProps: [ [...] ], [...] } ] } } );

El objetivo es traducir las etiquetas a otro idioma.

Pero he visto que también se usa la propiedad de "nombre"... para construir el atributo id de la etiqueta HTML de cada sector, con un prefijo personalizado, como "gjs-<namePropertyInLowercase>".

El problema surge cuando "name" contiene varios espacios: solo el primero se reemplaza, lo que lleva a un atributo id HTML inválido (con espacios), que no puede ser dirigido a través de CSS para aplicar algún estilo personalizado en el panel del Gestor de Estilos (ver captura de pantalla adjunta).

Abrí grapes.js y encontré esto en el método addToCollection():

'''js
    var view = new SectorView({
      modelo: modelo,
      id: this.pfx + model.get('name').replace(' ', '_').toLowerCase(),
      Nombre: Model.Get('Nombre'),
      propiedades: model.get('propiedades'),
      Objetivo: esto. Objetivo,
      propTarget: this.propTarget,
      config: this.config
    });

Como sabrás, el método estándar de "reemplazar" de JavaScript está actuando un poco raro por defecto, reemplazando solo la primera aparición en la cadena de origen, si no configuras explícitamente un RegExp con la bandera g (a diferencia de todos los demás lenguajes de programación disponibles en la Tierra, que se encargan de esto automáticamente). De ahí el error.

Además, el atributo "nombre" puede contener caracteres especiales (acentuados) en algunos idiomas, y también podrían romper el ID, ya que no se escapa de ellos.

Si usar el atributo "name" es intencionado aquí, y no un error de copiar/pegar (por si te referías a 'model.get('id')' en lugar de 'model.get('name')'), ¿cuál es el propósito de esto? En lugar de usar, por ejemplo, una propiedad de "id", podríamos definirnos nosotros mismos? (y naturalmente evitando usar espacios o caracteres especiales con tal propiedad).

Podrías usar el atributo "id" si está definido, y recurrir a tu conversión actual de atributo "nombre" si es necesario (teniendo cuidado de reemplazar TODOS los espacios).

Por eso, cambié esta línea en grapes.js: 'id: this.pfx + model.get('name').replace(' ', '_').toLowerCase(),' con: 'id: this.pfx + model.get('id'),'

Y, en mi código: SectoresEstiloGestionado: [ { id: "dimensiones", nombre: "Mi etiqueta personalizada con espacios", [...] } ]

Así que el ID de mis sectores ahora es "gjs-sm-dimensions" como era de esperar, y no "etiqueta gjs-sm-my_custom con espacios".

Pregunta secundaria: ¿es peligroso guardar este cambio mientras esperas una solución oficial (o no) por tu parte?

Gracias por tu opinión.

-Maxime