Skip to main content
The text align extension adds a textAlign attribute to specified node types, allowing users to align text left, center, right, or justify.

​
Basic Usage

import { defineTextAlign } from '@prosekit/extensions/text-align'

const extension = defineTextAlign({
  types: ['paragraph', 'heading'],
  default: 'left',
})
This adds text alignment capabilities to paragraph and heading nodes.

​
API Reference

​
defineTextAlign

​
types
string[]
required
The names of nodes to add the text alignment attribute to.
types: ['paragraph', 'heading']
​
default
string
default:"left"
The default alignment value.Options: "left", "center", "right", "justify"

​
Commands

The extension provides a setTextAlign command: 
interface TextAlignCommands {
  setTextAlign: (value: string | null) => Command
}

​
Usage

import { useEditor } from '@prosekit/react'

function TextAlignButtons() {
  const editor = useEditor()
  
  return (
    <div>
      <button onClick={() => editor.commands.setTextAlign('left')}>
        Align Left
      </button>
      <button onClick={() => editor.commands.setTextAlign('center')}>
        Align Center
      </button>
      <button onClick={() => editor.commands.setTextAlign('right')}>
        Align Right
      </button>
      <button onClick={() => editor.commands.setTextAlign('justify')}>
        Justify
      </button>
    </div>
  )
}

​
Keyboard Shortcuts

The extension includes default keyboard shortcuts:
ShortcutAction
Mod-LAlign left
Mod-EAlign center
Mod-RAlign right
Mod-JJustify
Mod is Cmd on macOS and Ctrl on Windows/Linux.

​
Styling

The extension renders text alignment as a CSS text-align style: 
<p style="text-align: center;">Centered text</p>
You can style aligned text in your CSS: 
/* Optional: Add visual feedback */
[style*="text-align: center"] {
  /* Center-aligned styles */
}

[style*="text-align: right"] {
  /* Right-aligned styles */
}

​
Complete Example

import { defineBasicExtension } from '@prosekit/extensions/basic'
import { defineTextAlign } from '@prosekit/extensions/text-align'
import { union } from '@prosekit/core'
import { createEditor } from '@prosekit/core'

const extension = union([
  defineBasicExtension(),
  defineTextAlign({
    types: ['paragraph', 'heading'],
    default: 'left',
  }),
])

const editor = createEditor({ extension })

​
React Component

import { useEditor } from '@prosekit/react'
import {
  AlignLeft,
  AlignCenter,
  AlignRight,
  AlignJustify,
} from 'lucide-react'

function TextAlignToolbar() {
  const editor = useEditor()
  
  const alignments = [
    { value: 'left', icon: AlignLeft, label: 'Align Left' },
    { value: 'center', icon: AlignCenter, label: 'Align Center' },
    { value: 'right', icon: AlignRight, label: 'Align Right' },
    { value: 'justify', icon: AlignJustify, label: 'Justify' },
  ]
  
  return (
    <div className="flex gap-1">
      {alignments.map(({ value, icon: Icon, label }) => (
        <button
          key={value}
          onClick={() => editor.commands.setTextAlign(value)}
          title={label}
          className="p-2 hover:bg-gray-100 rounded"
        >
          <Icon className="w-4 h-4" />
        </button>
      ))}
    </div>
  )
}

​
Vue Component

<script setup lang="ts">
import { useEditor } from '@prosekit/vue'

const editor = useEditor()

const setAlignment = (align: string) => {
  editor.value?.commands.setTextAlign(align)
}
</script>

<template>
  <div class="flex gap-1">
    <button @click="setAlignment('left')" title="Align Left">
      <AlignLeftIcon />
    </button>
    <button @click="setAlignment('center')" title="Align Center">
      <AlignCenterIcon />
    </button>
    <button @click="setAlignment('right')" title="Align Right">
      <AlignRightIcon />
    </button>
    <button @click="setAlignment('justify')" title="Justify">
      <AlignJustifyIcon />
    </button>
  </div>
</template>

​
Use Cases

Document Editors

Add professional text alignment controls to document editing interfaces.

Blog Posts

Let authors control text alignment for better visual presentation.

Marketing Content

Enable alignment controls for landing pages and marketing materials.

Email Composition

Provide alignment options for email and message editors.

​
Type Safety

The extension provides full TypeScript support: 
import type { TextAlignExtension } from '@prosekit/extensions/text-align'

type Extension = TextAlignExtension<'paragraph' | 'heading'>

// This provides type-safe commands:
// editor.commands.setTextAlign('left' | 'center' | 'right' | 'justify' | null)

​
Tips

Apply text alignment to block-level nodes like paragraphs and headings. Inline nodes don’t typically support alignment.
Consider providing visual indicators in your toolbar to show the current alignment state.
Remember that justify alignment may not work well with all fonts and languages. Test thoroughly with your content.