Add a button changes text alignment

Change the text alignment in your Tiptap editor with this button UI component.

Install

You can add the component via Tiptap CLI (for Vite or Next.js)

npx @tiptap/cli add text-align-button

Manual Integration

For frameworks other than Vite or Next.js, add the component manually from the open-source repository.

Import styles

This component requires you to import our styles which were added to styles/keyframe-animation.scss and styles/_variables.scss.

Usage

import { EditorContent, EditorContext, useEditor } from '@tiptap/react'
import { StarterKit } from '@tiptap/starter-kit'
import { TextAlign } from '@tiptap/extension-text-align'
import { TextAlignButton } from '@/components/tiptap-ui/text-align-button'

import '@/components/tiptap-node/paragraph-node/paragraph-node.scss'

export default function MyEditor() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [StarterKit, TextAlign.configure({ types: ['heading', 'paragraph'] })],
    content: `
        <p>Try selecting a paragraph and clicking one of the text alignment buttons.</p>
        <p style="text-align: left">Left-aligned text.</p>
        <p style="text-align: center">Center-aligned text.</p>
        <p style="text-align: right">Right-aligned text.</p>
        <p style="text-align: justify">Justified text.</p>
        `,
  })

  return (
    <EditorContext.Provider value={{ editor }}>
      <div className="tiptap-button-group" data-orientation="horizontal">
        <TextAlignButton align="left" />
        <TextAlignButton align="center" />
        <TextAlignButton align="right" />
        <TextAlignButton align="justify" />
      </div>

      <EditorContent editor={editor} role="presentation" />
    </EditorContext.Provider>
  )
}

Props

Name	Type	Default	Description
editor	Editor \| null	null	The Tiptap editor instance
align	'left' \| 'center' \| 'right' \| 'justify'	required	The text alignment to apply
hideWhenUnavailable	boolean	false	Whether the button should be hide if not available
text	string	-	Text to display alongside the icon

Requirements

Used reference components

use-tiptap-editor (hook)
button (primitive)
align-left-icon (icon)
align-right-icon (icon)
align-center-icon (icon)
align-justify-icon (icon)

Open source feature(s)

@tiptap/extension-text-align