How to do nested blockquotes like github?

[sepsol]

I want to create this effect from github with plate but it doesn't seem to be possible using the default ELEMENT_BLOCKQUOTE. How can I modify my blockquote to support this and its markdown / autoformat rule?

This is a blockquote.
This is the second line in that blockquote.

This is a nested blockquote.
This is the next line in the nested blockquote.

• This is a bullet list in the blockquote.

• This is a checkbox in a nested blockquote.

> This is a blockquote.
> This is the second line in that blockquote.
> > This is a nested blockquote.
> > This is the next line in the nested blockquote.
> > * This is a bullet list in the blockquote.
> > [] This is a checkbox in a nested blockquote which is disabled.

[zbeyens]

Try out this rule (v2)

{
  mode: 'block',
  match: '> ',
  preFormat,
  format: (editor) =>
    wrapNodes(editor, { type: ELEMENT_BLOCKQUOTE, children: [] }),
  allowSameTypeAbove: true,
}

Note however this adds some complexity you'll need to handle, e.g. unwrapping nodes, normalizing

[sepsol]

Just tested this. This works great. As for the unwrapping, do you think it would be a good idea to have a field in the rules for that to handle that more easily? Like wrapMatch and unwrapMatch or wrapQuery and unwrapQuery?

I would say the desired outcome should be to have this rule only work when inserting > in markdowns, and thus backspacing should remove the nested blockquote. But for the toolbar, it should work the same as before, meaning it should only toggle the outer blockquote.

[zbeyens]

Autoformat is not the only plugin needing to handle unwrapping, there is also toolbar buttons, delete key, etc.

Let me know if you have use cases that query (conditions), preFormat (unwrap) and format (wrap) options don't cover.

The only nested structure we have is the list one but it would be nice to have reusable patterns.

We were thinking that each plugin should define handlers like reset, transform, etc. (encapsulation) that Plate will store in the editor object, so we can call these operations through e.g. editor.resetBlock(), without being aware of what needs to be unwrapped as it's the responsibility of the plugin. This excludes more complex cases which relates multiple plugins (e.g. another reset behavior for block of type A inside a block of type B).

[sepsol]

Thanks, I'll give it a try and let you know how it goes.