Cuando eliminas un componente, las clases duplicadas entre componentes se eliminan.

Deberías evitar poner estilos compartidos en los relacionados con componentes. Consulta esta discusión sobre cómo evitar esto: https://github.com/GrapesJS/grapesjs/discussions/5968

Como solución temporal, los estilos para cada componente se prefijan con id.

'''js importar { html as hero1html, css as hero1css } de './data/hero-1'; importar { html as content1html, css as content1css } desde './data/content-1'; fuentes const = [ { id: 'Héroe-1', nombre: 'Héroe 1', categoría: 'Héroe', html: hero1html, CSS: Hero1CSS, Clase: 'BG-Gray-100 P-5', }, { id: 'content-1', nombre: 'Contenido 1', categoría: 'Contenido', html: content1html, CSS: content1css, Clase: 'P-5', } ]

const escapeTailwindClasses = (str, id) => { return str.replace(/(.[ a-z0-9_-]+)(:\w+)/gi, (coincidencia, p1, p2) => { return '.${id}${p1.replace('.', '')}\${p2}'; }); };

export const importBlocks = (editor, options = {}) => { const domc = editor. DomComponents; const blockManager = editor. Jefe de bloque; sources.forEach(source => { prefijo const = source.id + '-'; const prefixedHtml = source.html.replace(/class="([^"]*)"/g, (match, nombreClase) => { return 'class="${className.split(' ').map(cn => prefijo + cn).join(' ')}"'; });

const prefijadoCss = source.css.replace(/.( [a-z0-9_-]+)(?=\s*[{,])/gi, (coincidencia, nombreClase) => { devolver '.' + prefijo + nombreClase; });

console.log(escapeTailwindClasses(prefijadoCss, prefijo)) const prefijadoClases = source.class.split(' ').map(cn => prefijo + cn).join(' '); domc.addType(source.id, { modelo: { Predeterminados: { atributos: { clase: prefijadoClases }, componentes: prefijadoHtml, estilos: escapeTailwindClasses (prefijadoCss, prefijo), }, }, }); blockManager.add(source.id, { Categoría: Fuente.Categoría, id: source.id, Etiqueta: source.name, Contenido: { Tipo: source.id, }, }); }); }

@artf Gracias por tu respuesta. Me gustaría confirmar el #5968

Gracias por informar de esto, @ihatov08.

Buena pregunta sobre Cuando eliminas un componente, se eliminan las clases duplicadas entre componentes.. El enfoque recomendado con StyleManager es usar la API orientada a eventos.

Empieza aquí:

1. Consulta la documentación de GrapesJS de tu módulo específico
2. Busca el método del oyente de eventos 'on()'
3. La mayoría de las operaciones se pueden realizar escuchando eventos del editor y de los componentes

Patrones comunes: '''javascript Prestad atención a los cambios editor.on('Change', () => console.log('Something Changed'));

Ciclo de vida de los componentes editor.on('component:mount', (c) => console.log('component ready', c)); editor.on('component:update', (c) => console.log('component updated', c));

**Si sigues atascado:**
- Compartir una reproducción mínima de CodeSandbox
- Incluye lo que ya has probado
- Menciona tu versión GrapesJS
- ¡La comunidad está aquí para ayudar!