TextAlign

Version Downloads

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.

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