11# Roots
22
3- Slate stores document content in named roots. The default root is ` main ` ; extra
4- roots let one editor own headers, footers, synced blocks, captions, side panels,
5- and other editable regions without creating separate editor instances.
3+ Slate stores the primary document as a normal block array. Extra roots let one
4+ editor own headers, footers, synced blocks, captions, side panels, and other
5+ editable regions without creating separate editor instances.
66
77Use roots when the content should share editor state, history, collaboration,
88schema, and commands. Use separate editors when the documents should be fully
@@ -11,45 +11,46 @@ independent.
1111## Value Shape
1212
1313The shortest editor value is still an array of blocks. Slate treats it as the
14- ` main ` root .
14+ primary document .
1515
1616``` tsx
1717const editor = createEditor ({
1818 initialValue: [{ type: ' paragraph' , children: [{ text: ' Body' }] }],
1919})
2020```
2121
22- Pass ` initialValue.roots ` when the editor owns more than one root.
22+ Pass ` initialValue.children ` plus ` initialValue.roots ` when the editor owns
23+ extra roots.
2324
2425``` tsx
2526const editor = createEditor ({
2627 initialValue: {
28+ children: [{ type: ' paragraph' , children: [{ text: ' Body' }] }],
2729 roots: {
2830 header: [{ type: ' paragraph' , children: [{ text: ' Draft' }] }],
29- main: [{ type: ' paragraph' , children: [{ text: ' Body' }] }],
3031 footer: [{ type: ' paragraph' , children: [{ text: ' Internal' }] }],
3132 },
3233 },
3334})
3435```
3536
3637Each root is a normal Slate block array. Rootless operations, points, and
37- selections resolve against the current editor or view root. The base editor's
38- current root defaults to ` main ` ; a root-bound view resolves rootless locations
39- against its own root.
38+ selections resolve against the current editor or view root. A root-bound view
39+ resolves rootless locations against its own root.
4040
4141Persist roots through the full [ Document State] ( 14-document-state.md ) value
42- instead of saving only the main root.
42+ instead of saving only the provider root.
4343
4444## Reading And Writing Roots
4545
46- Read all roots from ` state.value.get().roots ` .
46+ Read the primary document with ` state.value.root() ` . Read an extra root by key .
4747
4848``` tsx
49- const header = editor .read ((state ) => state .value .get ().roots .header )
49+ const body = editor .read ((state ) => state .value .root ())
50+ const header = editor .read ((state ) => state .value .root (' header' ))
5051```
5152
52- Create, replace, or delete non-main roots inside ` editor.update ` .
53+ Create, replace, or delete extra roots inside ` editor.update ` .
5354
5455``` tsx
5556editor .update ((tx ) => {
@@ -59,8 +60,8 @@ editor.update((tx) => {
5960})
6061```
6162
62- ` main ` is the stable document root. Mutate its children with normal node and
63- text transforms instead of ` tx.roots ` .
63+ Mutate the primary document with normal node and text transforms instead of
64+ ` tx.roots ` .
6465
6566## Rendering Roots
6667
@@ -96,7 +97,7 @@ that must run against a specific root.
9697Content roots attach an editable child root to an element in another root. The
9798element keeps an empty text child as its model anchor. ` element.childRoots[slot] `
9899stores the root key, and the editable content lives in
99- ` state.value.get().roots[ rootKey] ` .
100+ ` state.value.root( rootKey) ` .
100101
101102``` tsx
102103const syncedBlocks = defineEditorExtension ({
0 commit comments