Text Align

TextAlign adds text alignment to paragraphs, headings, and other block nodes. It supports left, center, right, and justify alignment with keyboard shortcuts and a toolbar dropdown that shows the current alignment icon.

Not included in StarterKit. Add it separately.

Live Playground

Click in a paragraph and use the alignment dropdown in the toolbar to switch between left, center, right, and justify. The dropdown icon changes to reflect the current alignment. Each paragraph below starts with a different alignment.

With the default theme. The toolbar shows an alignment dropdown with a dynamic icon, plus individual alignment buttons.

Click to try it out

Plain editor without the theme. The buttons above call setTextAlign() directly with active state highlighting.

Click to try it out

Usage

import { Editor, Document, Paragraph, Text, TextAlign, defaultIcons } from '@domternal/core';
import '@domternal/theme';

const editorEl = document.getElementById('editor')!;

// Toolbar with alignment buttons
const toolbar = document.createElement('div');
toolbar.className = 'dm-toolbar';
toolbar.innerHTML = `<div class="dm-toolbar-group">
  <button class="dm-toolbar-button" data-align="left">${defaultIcons.textAlignLeft}</button>
  <button class="dm-toolbar-button" data-align="center">${defaultIcons.textAlignCenter}</button>
  <button class="dm-toolbar-button" data-align="right">${defaultIcons.textAlignRight}</button>
  <button class="dm-toolbar-button" data-align="justify">${defaultIcons.textAlignJustify}</button>
</div>`;
editorEl.before(toolbar);

const editor = new Editor({
  element: editorEl,
  extensions: [Document, Paragraph, Text, TextAlign],
  content: '<p>Try aligning this text with the buttons above or keyboard shortcuts.</p>',
});

toolbar.addEventListener('click', (e) => {
  const btn = (e.target as Element).closest<HTMLButtonElement>('[data-align]');
  if (btn) editor.chain().focus().setTextAlign(btn.dataset.align!).run();
});

With the full ToolbarController, TextAlign renders as a dropdown with a dynamic icon that reflects the current alignment.

import { Component, signal } from '@angular/core';
import { DomternalEditorComponent, DomternalToolbarComponent } from '@domternal/angular';
import { Editor, Document, Paragraph, Text, TextAlign } from '@domternal/core';

@Component({
  selector: 'app-editor',
  imports: [DomternalEditorComponent, DomternalToolbarComponent],
  templateUrl: './editor.html',
})
export class EditorComponent {
  editor = signal<Editor | null>(null);
  extensions = [Document, Paragraph, Text, TextAlign];
  content = '<p>Try aligning this text with the toolbar dropdown or keyboard shortcuts.</p>';
}

@if (editor(); as ed) {
  <domternal-toolbar [editor]="ed" />
}
<domternal-editor
  [extensions]="extensions"
  [content]="content"
  (editorCreated)="editor.set($event)"
/>

The toolbar auto-renders a text alignment dropdown with left, center, right, and justify options. The dropdown icon changes to reflect the current alignment.

import { Domternal } from '@domternal/react';
import { Document, Paragraph, Text, TextAlign } from '@domternal/core';

export default function Editor() {
  return (
    <Domternal
      extensions={[Document, Paragraph, Text, TextAlign]}
      content="<p>Try aligning this text with the toolbar dropdown or keyboard shortcuts.</p>"
    >
      <Domternal.Toolbar />
      <Domternal.Content />
    </Domternal>
  );
}

import { Editor, Document, Paragraph, Text, TextAlign } from '@domternal/core';

const editor = new Editor({
  element: document.getElementById('editor')!,
  extensions: [Document, Paragraph, Text, TextAlign],
});

// Set alignment programmatically
editor.commands.setTextAlign('center');
editor.commands.setTextAlign('right');
editor.commands.setTextAlign('justify');

// Reset to default alignment
editor.commands.unsetTextAlign();

Options

Option	Type	Default	Description
`types`	`string[]`	`['heading', 'paragraph']`	Node types that support text alignment
`alignments`	`string[]`	`['left', 'center', 'right', 'justify']`	Allowed alignment values
`defaultAlignment`	`string`	`'left'`	Default alignment (not rendered to HTML)

TextAlign.configure({
  types: ['heading', 'paragraph'],
  alignments: ['left', 'center', 'right'], // remove justify
  defaultAlignment: 'left',
})

Commands

setTextAlign

Sets the text alignment on all configured node types at the current selection. Returns false if the alignment value is not in the allowed alignments list.

editor.commands.setTextAlign('center');

// With chaining
editor.chain().focus().setTextAlign('right').run();

unsetTextAlign

Resets the text alignment to the default value on all configured node types at the current selection.

editor.commands.unsetTextAlign();

Keyboard shortcuts

Key	Command	Description
`Mod-Shift-L`	`setTextAlign('left')`	Align left
`Mod-Shift-E`	`setTextAlign('center')`	Align center
`Mod-Shift-R`	`setTextAlign('right')`	Align right
`Mod-Shift-J`	`setTextAlign('justify')`	Justify

Mod is Cmd on macOS and Ctrl on Windows/Linux.

Input rules

TextAlign does not register any input rules.

TextAlign registers a dropdown in the toolbar with the name textAlign in group alignment at priority 200.

Dropdown	Icon	Group	Priority	Dynamic icon
`textAlign`	`textAlignLeft`	alignment	200	Yes

The dropdown contains four items:

Item	Command	Icon	Shortcut	Active when
`alignLeft`	`setTextAlign('left')`	`textAlignLeft`	`Mod-Shift-L`	`textAlign: 'left'` on heading/paragraph
`alignCenter`	`setTextAlign('center')`	`textAlignCenter`	`Mod-Shift-E`	`textAlign: 'center'` on heading/paragraph
`alignRight`	`setTextAlign('right')`	`textAlignRight`	`Mod-Shift-R`	`textAlign: 'right'` on heading/paragraph
`alignJustify`	`setTextAlign('justify')`	`textAlignJustify`	`Mod-Shift-J`	`textAlign: 'justify'` on heading/paragraph

The dropdown has dynamicIcon: true, which means the trigger button shows the icon of the currently active alignment instead of a fixed icon.

How it works

Global attribute injection

TextAlign uses addGlobalAttributes() to inject a textAlign attribute into the configured node types (default: heading and paragraph). This is a global attribute, not per-extension - it applies to existing node types without modifying their schema definitions.

Parsing

The textAlign attribute is parsed from the style attribute of the HTML element:

parseHTML: (element) => element.style.textAlign || defaultAlignment

If no text-align style is present, the default alignment is used.

Rendering

Non-default alignments render as an inline style attribute:

<!-- center alignment -->
<p style="text-align: center">Centered text</p>

<!-- default (left) alignment - no style attribute -->
<p>Left-aligned text</p>

Command implementation

Both commands operate on all configured types simultaneously:

setTextAlign validates the alignment value, then calls updateAttributes(type, { textAlign: alignment }) on each configured type. Returns true if at least one type was updated.
unsetTextAlign calls resetAttributes(type, 'textAlign') on each type to reset to the default value.

Exports

import { TextAlign } from '@domternal/core';
import type { TextAlignOptions } from '@domternal/core';

Export	Type	Description
`TextAlign`	Extension	The text align extension
`TextAlignOptions`	TypeScript type	Options for `TextAlign.configure()`

Source

@domternal/core - TextAlign.ts