Skip to content

Commit a80259f

Browse files
committed
docs: add partial nested-blocks description
1 parent 536ea9d commit a80259f

File tree

1 file changed

+155
-0
lines changed

1 file changed

+155
-0
lines changed

adr/2025_06_16-nested-blocks.md

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
# BlockNote Nested Blocks
2+
3+
There are two separate problems when it comes to "nested blocks" support in BlockNote:
4+
5+
- **nested-blocks** The first is the ability for a block to contain other blocks within it (e.g. a table cell having not just inline content, but actual other blocks inside it)
6+
- **content-fields** The second is the ability for a block to contain multiple pieces of content within it (e.g. an alert block having a title & description field (which contain inline content))
7+
8+
Let's start with the first problem, nested blocks. By describing existing block relationships:
9+
10+
## Block with inline content
11+
12+
This is the simplest case, and the only one that is currently supported by BlockNote.
13+
14+
```json
15+
{
16+
"type": "block-type",
17+
"content": [
18+
{
19+
"type": "text",
20+
"text": "Hello, world!"
21+
}
22+
],
23+
}
24+
```
25+
26+
There is a 1:1 relationship between the block type and it's content. And, no restrictions of the inline content allowed within the block.
27+
28+
> TODO come up with a description of the sorts of keybinds & cursor behavior that should be supported for this block type
29+
30+
## Block with nested blocks
31+
32+
This is a proposal for how to support nested blocks.
33+
34+
```json
35+
{
36+
"type": "custom-block-type",
37+
"props": {
38+
"abc": 123
39+
},
40+
"content": null,
41+
"children": [
42+
{
43+
"type": "nested-block",
44+
"content": [
45+
{
46+
"type": "block",
47+
"content": [
48+
{
49+
"type": "text",
50+
"text": "Hello, world!"
51+
}
52+
]
53+
}
54+
]
55+
}
56+
]
57+
}
58+
```
59+
60+
This would completely enclose all nested blocks within the `custom-block-type` block. And, works the same way as the multi-column example.
61+
62+
> TODO come up with a description of the sorts of keybinds & cursor behavior that should be supported for this block type
63+
64+
## Block with structured inline content fields
65+
66+
This is a proposal for how to support multiple inline content fields within a block.
67+
68+
```json
69+
{
70+
"type": "alert",
71+
"content": null,
72+
"children": [
73+
{
74+
"type": "alert-title",
75+
"content": [
76+
{
77+
"type": "text",
78+
"text": "Hello, world!"
79+
}
80+
]
81+
},
82+
{
83+
"type": "alert-content",
84+
"content": [
85+
{
86+
"type": "text",
87+
"text": "Hello, world!"
88+
}
89+
]
90+
}
91+
]
92+
}
93+
```
94+
95+
The core idea is that the `parent` block restricts what content is allowed within it's children.
96+
97+
> TODO come up with a description of the sorts of keybinds & cursor behavior that should be supported for this block type
98+
99+
## Examples
100+
101+
### Rebuilding tables with nested blocks
102+
103+
Using this new structure, we can rebuild tables if we had this new API:
104+
105+
```json
106+
{
107+
"type": "table",
108+
"content": null,
109+
"props": {
110+
"backgroundColor": "default",
111+
"textColor": "default",
112+
"columnWidths": [100, 100, 100],
113+
"headerRows": 1,
114+
"headerCols": 1,
115+
},
116+
"children": [
117+
{
118+
"type": "table-row",
119+
"content": null,
120+
"children": [
121+
{
122+
"type": "table-cell",
123+
"content": null,
124+
"children": [
125+
{
126+
"type": "paragraph",
127+
"content": [
128+
{
129+
"type": "text",
130+
"text": "Hello, world!"
131+
}
132+
]
133+
}
134+
]
135+
},
136+
{
137+
"type": "table-cell",
138+
"content": null,
139+
"children": [
140+
{
141+
"type": "paragraph",
142+
"content": [
143+
{
144+
"type": "text",
145+
"text": "Hello, world!"
146+
}
147+
]
148+
}
149+
]
150+
}
151+
]
152+
}
153+
]
154+
}
155+
```

0 commit comments

Comments
 (0)