Custom blocks cannot be nested in the editor

[ClementEXWiki]

Describe the bug Some blocks cannot be nested, including all custom blocks. For instance, editing a custom block in the editor and inserting a heading will make the heading appear below the custom block, instead of inside it.

Inserting a custom block inside another will result in the same behavior.

There's already another issue on that matter, but a reproduction example was apparently missing, so I'll provide one here.

To Reproduce Minimal reproduction sandbox: https://stackblitz.com/edit/github-df1nzmdk In the editor, type /wrapper to insert the custom demo element, then inside it type /wrapper again (or some other 'big' blocks like headings). Insert of the element being inserted inside the first wrapper, it is created below it.

Misc

• Node version: v22.14.0
• Package manager: 10.5.0
• Browser: Firefox 136

[leTranTienPhat]

This is the problem I'm currently facing as well.

I'm building an Accordion (toggle list) custom block, and I want to be able to have a nested Accordion inside of the content, but it seem impossible to do that within the current version.

[YousefED]

At this point, BlockNote does not support nested custom blocks indeed. If we're adding an API for this, I think we need to carefully design it to:

• keep the regular API surface simple (i.e.: not add an enormous amount of complexity, specifically for this feature)
• ideally, make it work with the strongly-typed schema that BlockNote supports

More importantly; we need to make sure we can implement this without introducing all kinds of UX quirks that would need to be handled manually per type of nested blocks users want to add. e.g.: do different types of nested blocks have different requirements in terms of cursor / key handling?

Let's use this thread to collect different kind of nested blocks that people want to add so we can identify if (and which) an API for this makes sense:

• Toggle list
• Blocks within Callouts / alerts (https://github.com/TypeCellOS/BlockNote/issues/1368 video)
• "IF" / "Loop" logical blocks (https://github.com/TypeCellOS/BlockNote/issues/1368)
• blocks inside of tables: https://github.com/TypeCellOS/BlockNote/issues/1514 #1814
• marks in image caption: https://github.com/TypeCellOS/BlockNote/issues/551
• ... (@ClementEXWiki what are you looking to build with this?)

[ClementEXWiki]

I'm trying to replace the current editor we have at XWiki (CKEditor 4) with a more modern approach. We are rebuilding the editor and a lot of things that revolve around it, it's a pretty massive project.

One of the features we need to support is macros. Basically these are custom blocks that are rendered either cilent-side or server-side, and most of them can be nested.

One example of such macros would be the alert example you give in the docs. You have a banner with a yellow / blue / red background and some icon, and inside that you put some content. But you should be able to put some headings inside, some blockquotes, some code blocks, and so on.

We have hundreds of macros and are writing new ones very frequently, and they need to support nested blocks.

We could use some hacks to make nested blocks work but they would be just that - hacks. Having actual first-party support in BlockNote would be immensely better. Now I don't know how hard it would be to implement, maybe it's very difficult, so I'm just exposing the context of the feature request.

For the API design part, I'm not sure there are tons of things to change - the current types already support block nesting, e.g.:

const editor = useCreateBlockNote({
  initialContent: [
    {
      type: "alert",
      children: [{ type: "alert" }],
    },
  ],
});

Works just fine, and we have correct typing (so we inner alert type is autocompleted in the IDE).

I think support for nested blocks should be as simple as possible: their content can be anything that you would write anywhere in the editor. So custom blocks would either have no content, inline content, or "full nested" content - which includes headings, blockquotes, etc.

What do you think?

[sailxjx]

I see that some default modules support nesting, like bulletListItem, so what is the difficulty of the api of custom nested blocks?

[FatefulNur]

@YousefED Here also has my requirement for

1. Stepper:
2. Tabs:

[AgainstLightning]

Also requesting this feature. What have others landed on?

What hacks are you talking about @ClementEXWiki ?

BlockNote supports custom blocks and nested blocks but not nested custom blocks, which I found surprising!

[ClementEXWiki]

What hacks are you talking about @ClementEXWiki ?

One way of doing this would be to put a full BlockNote editor DOM inside each custom block. This would be a disaster in terms of performance and be a very ugly hack, but it would work.

[andrewluetgers]

Yes, I'm also looking for this functionality. Arbitrary nesting of arbitrary blocks would be ideal.

[rsevs3]

Just chiming in to say that this would be a highly desirable feature for us too. Even just nesting images etc in the tables would be a great step forward. We are developing a django app to use BN and I can already see our users asking for table nesting.

[jedmund]

I also really want this! Trying to implement toggle lists and its a pain.

[andrewluetgers]

I was able to use the CSS has: selector to style parent containers to create the effect I am going for but it seems like a hack and there are styling bugs related to the + :: buttons for nested items that I have only partially dealt with.

[stefanpl]

just a friendly +1 here :)

[CodingSoot]

This feature would be SO valuable, along with the ability to nest blocks inside tables. I hope this gets implemented soon ! 🙏

[CodingSoot]

@YousefED Is it currently possible to nest blocks inside a Quote block, like in Notion ? If not, could you add it to the list please