Indent List
The list indentation feature allows you to set list indentation for blocks such as paragraphs or headings.
The "indent list" plugin differs from the "list" plugin:
- the list plugin has a nested structure ("list" block having "list item" block children) whereas the indent list plugin has a flat structure, resulting into different queries and transforms
- any block can be indented as a list
- the rendered block tags stay the same (e.g.
div
) instead of usingul
/ol
- the indent list plugin has more freedom by default but anyone can extend it to reproduce the list plugin rules. The list plugin has strict rules between parent and children
#
Installation- npm
- Yarn
#
Usage- See Indent.
createIndentPlugin
sets the indentation style (margin left).createIndentListPlugin
sets the list style (display: list-item
)- Use the indent or outdent toolbar buttons in the editor below to control the level of indentation of the content, both for paragraph text and headers.
Live Editor
Result
#
CommandsindentList
#
- Increase the list indentation of the selected blocks.
outdentList
#
- Decrease the list indentation of the selected blocks.