tiptap/docs/api/extensions/text-align.md

86 lines
2.3 KiB
Markdown
Raw Normal View History

---
description: Left, right, center, whatever! Align the text however you like.
2021-10-15 03:20:21 +08:00
icon: align-left
---
# 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, [thats 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
```
## Settings
### 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',
})
```
## Commands
### setTextAlign()
Set the text align to the specified value.
```js
editor.commands.setTextAlign('right')
```
### unsetTextAlign()
Remove the text align value.
```js
editor.commands.unsetTextAlign()
```
## 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` |
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