Auto-deletion of parent container upon moving children

Hey there, I have a use case where I have a custom node called page, wrapping content with the schema shown below.

// Page Node
const page: NodeSpec = {
  content: 'block*',
  selectable: false,
  parseDOM: [{ tag: 'div.editor-page' }],
  toDOM () {
    return  ['div', { class: 'editor-page' }, 0]
  }
}

// Doc
export const doc: NodeSpec = {
  content: 'page+'
}

Now, I’ve been working on adding D&D support to all nodes except for pages, and while this works perfectly fine and I’m able to move items around, I’m having an issue where the parent page node is not being deleted if the content has moved. Here’s a demo, and what I try to achieve is to automatically delete the container page node if there are no children left.

drag

On a side note, I should mention that for pages that I removed the content manually (and not by moving), the page gets removed, and the cursor goes back to the page before. But in this case, the editor does not perform the same operation, perhaps due to the differences between moving and replacing. I’m also unable to move my cursor to the page because it’s entirely empty.

I’m wondering if this is achievable on the schema level, or maybe I need to write the custom logic to handle this in the D&D plugin itself or maybe another plugin that listens to a transaction that has moved meta?

I appreciate the help.

Does changing the node’s content to block+ help? (More generally, empty (non-leaf) blocks are tricky for users to manipulate to it’s recommended to not allow them.)

1 Like

Wow, it indeed does resolve the issue! Thanks @marjin