TextAlign extension
This extension adds a text align attribute to a specified list of nodes. The attribute is used to align the text.
Firefox bug
text-align: justify doesn’t work together with white-space: pre-wrap in Firefox, that’s a known issue.
Install
npm install @tiptap/extension-text-alignSettings
types
A list of nodes where the text align attribute should be applied to. Usually something like ['heading', 'paragraph'].
Default: []
TextAlign.configure({ types: ['heading', 'paragraph'], })alignments
A list of available options for the text align attribute.
Default: ['left', 'center', 'right', 'justify']
TextAlign.configure({ alignments: ['left', 'right'], })defaultAlignment
The default text align.
Default: null
TextAlign.configure({ defaultAlignment: 'right', })Commands
setTextAlign()
Set the text align to the specified value.
editor.commands.setTextAlign('right')unsetTextAlign()
Remove the text align value.
editor.commands.unsetTextAlign()toggleTextAlign()
Toggles the text align value. If the current value is the same as the specified value, it will be removed.
editor.commands.toggleTextAlign('right')Keyboard shortcuts
| Command | Windows/Linux | macOS |
|---|---|---|
| setTextAlign(left) | Ctrl + Shift + L | Cmd + Shift + L |
| setTextAlign(center) | Ctrl + Shift + E | Cmd + Shift + E |
| setTextAlign(right) | Ctrl + Shift + R | Cmd + Shift + R |
| setTextAlign(justify) | Ctrl + Shift + J | Cmd + Shift + J |