Prevent/Disable Custom Blocks from being dropped inside other Custom Blocks

You can use :not() selector, eg. :not(.except-this-class)

Thanks @artf . This solution works, mostly. Now I am encountering a new problem where some placeholder text is disappearing.

On some elements inside my blocks, I'll have an HTML element with a text node, then some other nested html element. An example would be a link tag containing an icon.

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

When I add the draggable option to the model of my component, HTML elements inside the block similar to the A tag above will lose their text node. If I wrap these text nodes in something like a span tag, the text will stay. Examples of elements that don''t change:

<h1>I'm a Lonely textnode</h1>
<a href="#><span>this textnode is safe</span><i class="fa fa-chevron-right"></i></a>

Do you know of anything that will cause text nodes to disappear if they appear inside a container with other elements?

Here is how I am creating my custom component:

        editor.DomComponents.addType('MySectionBlock', {
            model: editor.DomComponents.getType('default').model.extend({
                draggable: ':not(.my-section-block)'
            }),
            view: editor.DomComponents.getType('default').view.extend({
                init() {
                    this.listenTo(this.model, 'active', this.act());
                },
                act() {
                        // do stuff to manipulate the view

                },
            })
        });

My apologies if this new issue is vague. I am still troubleshooting, and very confused how this draggable config option can affect my component's view. Do you think I am somehow deleting these text nodes after I initiate my component's view?

Thanks again.

You're defining the component with the old API, which requires other stuff to work properly and that might be the cause of the issue (I've tried on my side and everything works as expected). Please check here for the correct API https://grapesjs.com/docs/modules/Components.html#define-custom-component-type

Thanks for reporting this, @stljeff1.

Great question about Prevent/Disable Custom Blocks from being dropped inside other Custom Blocks. The recommended approach with Components is to use the event-driven API.

Start here:

1. Check the GrapesJS documentation for your specific module
2. Look for the on() event listener method
3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

• Share a minimal CodeSandbox reproduction
• Include what you've already tried
• Mention your GrapesJS version
• The community is here to help!