2021-10-14 06:13:50 +08:00
---
description: Left, right, center, whatever! Align the text however you like.
2021-10-15 03:20:21 +08:00
icon: align-left
2021-10-14 06:13:50 +08:00
---
2020-10-28 05:43:38 +08:00
# TextAlign
2021-01-25 17:35:52 +08:00
[![Version ](https://img.shields.io/npm/v/@tiptap/extension-text-align.svg?label=version )](https://www.npmjs.com/package/@tiptap/extension-text-align)
[![Downloads ](https://img.shields.io/npm/dm/@tiptap/extension-text-align.svg )](https://npmcharts.com/compare/@tiptap/extension-text-align?minimal=true)
2020-11-06 22:44:23 +08:00
This extension adds a text align attribute to a specified list of nodes. The attribute is used to align the text.
2020-10-23 21:23:40 +08:00
2021-04-08 22:06:58 +08:00
:::warning Firefox bug
`text-align: justify` doesn't work together with `white-space: pre-wrap` in Firefox, [that’ s a known issue ](https://bugzilla.mozilla.org/show_bug.cgi?id=1253840 ).
:::
2020-10-23 21:23:40 +08:00
## Installation
```bash
npm install @tiptap/extension -text-align
```
2020-11-03 23:43:35 +08:00
## Settings
2021-10-02 07:20:09 +08:00
### types
A list of nodes where the text align attribute should be applied to. Usually something like `['heading', 'paragraph']` .
Default: `[]`
```js
TextAlign.configure({
types: ['heading', 'paragraph'],
})
```
### alignments
A list of available options for the text align attribute.
Default: `['left', 'center', 'right', 'justify']`
```js
TextAlign.configure({
alignments: ['left', 'right'],
})
```
### defaultAlignment
The default text align.
Default: `'left'`
```js
TextAlign.configure({
defaultAlignment: 'right',
})
```
2020-11-03 23:43:35 +08:00
## Commands
2021-10-02 07:20:09 +08:00
### setTextAlign()
Set the text align to the specified value.
```js
editor.commands.setTextAlign('right')
```
### unsetTextAlign()
Remove the text align value.
```js
editor.commands.unsetTextAlign()
```
2020-11-03 23:43:35 +08:00
## Keyboard shortcuts
2021-10-02 05:13:49 +08:00
| 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` |
2020-11-19 08:16:10 +08:00
2020-10-23 21:23:40 +08:00
## Source code
2021-04-21 21:31:11 +08:00
[packages/extension-text-align/ ](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text-align/ )
2020-10-23 21:23:40 +08:00
## Usage
2021-10-19 00:01:47 +08:00
https://embed.tiptap.dev/preview/Extensions/TextAlign