Want to ignore parse in certain situations

1

I’m making a wrapper called a photo grid. The photo grid sets content to have only two to four images.

content: 'image{2,4}'

With three images, I want to delete the images one by one and remove them from the photo grid when I have one image left.

Basically, the behavior of ProseMirror seems to automatically fill up the insufficient content when deleting.

What I want is to make sure that parsDOM doesn’t parse with the photo grid in certain situations, but this option doesn’t seem to exist.

parseDOM() {
  return [
    {
      tag: 'div[data-type="photo-grid"]',
      // ex
      validate: (element) => element.childNodes.length >= 2 && element.childNodes.length <= 4
    }
  ]
}

There will be various situations where i need to check the changes in content, is there a good way to handle it? (For example, when inserting initial data / inserting or moving with drag / cutting or removing with keyboard, etc.)

2

Use getAttrs to validate the DOM, and return false if you don’t want the rule to apply.

3

I made a simple example. Even if getAttrs is returned to false, it is output to that node.

화면 캡처 2023-10-18 175421
화면 캡처 2023-10-18 1754211270×694 145 KB

I want to make rendering ignored to that node if validate fails.

4

By adding your node before the paragraph type, you make it the default node type for wrapping inline content that isn’t already wrapped in a textblock. The node you’re seeing there was not produced by your parse rule.

5

I understood order of the schema. Thank you!