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

description
Left, right, center, whatever! Align the text however you like.

TextAlign

This extension adds a text align attribute to a specified list of nodes. The attribute is used to align the text.

:::warning Firefox bug text-align: justify doesn't work together with white-space: pre-wrap in Firefox, that’s a known issue. :::

Installation

# with npm
npm install @tiptap/extension-text-align

# with Yarn
yarn add @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: []

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: 'left'

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()

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

Source code

packages/extension-text-align/

Usage