Evitar/desactivar bloques personalizados dentro de otros bloques personalizados

Puedes usar el selector ':not()', por ejemplo. ':no(.excepto-esta-clase)'

Gracias @artf. Esta solución funciona, en su mayoría. Ahora me estoy encontrando con un nuevo problema donde desaparece un texto provisional.

En algunos elementos dentro de mis bloques, tengo un elemento HTML con un nodo de texto, y luego otro elemento html anidado. Un ejemplo sería una etiqueta de enlace que contiene un icono.

<a href="#">Click Me <i class="fa fa-chevron-right"></i></a>

Cuando añado la opción arrastrable al modelo de mi componente, los elementos HTML dentro del bloque, similar a la etiqueta A anterior, perderán su nodo de texto. Si envolvo estos nodos de texto con algo como una etiqueta span, el texto se quedará. Ejemplos de elementos que no cambian:

<h1>Soy un nodo de texto solitario</h1>
<a href="#><span>este nodo de texto es seguro</span><i class="fa fa-chevron-right"></i></a>

¿Sabes de algo que haga desaparecer los nodos de texto si aparecen dentro de un contenedor junto con otros elementos?

Así es como estoy creando mi componente personalizado:

editor. DomComponents.addType('MySectionBlock', {
            Modelo: Editor. DomComponents.getType('default').model.extend({
                arrastrable: ':not(.mi-bloque-sección)'
            }),
            Ver: Editor. DomComponents.getType('default').view.extend({
                init() {
                    this.listenTo(this.model, 'active', this.act());
                },
                act() {
                        Haz cosas para manipular la vista

},
            })
        });

Mis disculpas si este nuevo problema es vago. Todavía estoy intentando solucionar problemas y estoy muy confundido sobre cómo esta opción de configuración arrastrable puede afectar a la vista de mi componente. ¿Crees que de alguna manera estoy eliminando estos nodos de texto después de iniciar la vista de mi componente?

Gracias de nuevo.

Estás definiendo el componente con la antigua API, que requiere otras cosas para funcionar correctamente y eso podría ser la causa del problema (he probado por mi parte y todo funciona como esperaba). Por favor, comprueba aquí la API correcta https://grapesjs.com/docs/modules/Components.html#define-custom-component-type

Gracias por informar de esto, @stljeff1.

Buena pregunta sobre Impedir/Desactivar bloques personalizados que se dejen caer dentro de otros bloques personalizados. El enfoque recomendado con Componentes es utilizar 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!