Container
Container directives allow you to nest lists of Livingdocs components. Common examples for containers are separations into header, body, sidebar, etc.

Example

1
module.exports = {
2
"label": "Bullet List",
3
"name": "bullet-list",
4
"directives": [{
5
"name": "list",
6
"type": "container",
7
"defaultComponents": {
8
"paragraph": "bullet-list-item"
9
},
10
"defaultContent": [{
11
"component": "bullet-list-item"
12
}],
13
"allowedChildren": ["bullet-list-item"]
14
}],
15
"html": dedent`
16
<ul doc-container="list" class="ld-list"></ul>
17
`
18
}
Copied!
The above example is an idiomatic bullet list. The container (list) will have one item by default and upon pressing enter in an item, a new item is inserted (defaultComponents.paragraph).

Config Options

defaultComponents: object, allows you to overwrite the global default components for all components within a container directive. Probably the most important one is the paragraph default component which defines what happens upon pressing the "Enter" key. in the example above it is used to insert a new list item when pressing "Enter" in a bullet list.
defaultContent: array, defines a set of components that are available by default in the container. In the example above it is used to add one list item in the bullet list by default. ATTENTION: This applies only when the component is dragged in by a human. If a component is created by a machine (e.g. import or data migration) no default content is set.
allowedChildren: array, allows you to define which components are allowed within a certain container.
Last modified 1yr ago
Copy link