Tiptap text align: save alignment on the intended document nodes

An original workshop handout needs a centered session heading while its equipment instructions stay left aligned. The author should be able to center the heading, save the handout, and reopen it with the body unchanged. Applying center alignment to the entire editing surface would obscure that distinction.

Enable alignment only where it belongs

In an existing Tiptap 3 editor with heading and paragraph nodes enabled, add one configured TextAlign extension:

import TextAlign from '@tiptap/extension-text-align';

const handoutAlignment = TextAlign.configure({
  types: ['heading', 'paragraph'],
  alignments: ['left', 'center', 'right'],
  defaultAlignment: null
});

Include handoutAlignment in the existing extension list. Keep the application's base schema and other extensions. This configuration allows three choices for headings and paragraphs; it does not create the heading node or initialize an editor by itself.

The example omits justified text because this handout does not need it. The extension's default list also includes justify. If your document requires justification, enable it deliberately and check the reader layout. The official page notes a Firefox interaction between justification and white-space: pre-wrap.

Apply the command to the author's selection

With editor referring to the initialized handout instance, use a button handler that restores focus before running the command:

function centerSelectedBlocks() {
  editor.chain().focus().setTextAlign('center').run();
}

function clearSelectedAlignment() {
  editor.chain().focus().unsetTextAlign().run();
}

Connect these functions to visible buttons with type="button" so they do not accidentally submit a surrounding form. Keep the selection within the heading when centering that heading. A selection spanning the heading and an instruction paragraph can legitimately target more than one block.

unsetTextAlign() removes the explicit attribute. Its visible result follows the remaining document and stylesheet defaults. If the reader stylesheet centers all headings, removing an author's explicit center value will not necessarily make the heading look left aligned.

The extension also provides toggleTextAlign(value): applying the current value removes it. Choose that behavior only if it matches the toolbar's interaction, and distinguish “clear explicit alignment” from a button that explicitly chooses left alignment.

Inspect the saved node attribute

Use this original fixture to check the boundary:

<h2>Bench calibration workshop</h2>
<p>Bring the reference probe to the equipment desk.</p>

Center only the heading, then inspect editor.getJSON(). The heading should carry a textAlign attribute with the value center. Inspect the paragraph separately rather than assuming the command affected only the heading because it looks that way.

Capture the application's chosen HTML or JSON representation through its ordinary save handler. The Tiptap document integration covers that choice. Reopen the same record with the compatible schema and TextAlign configuration. Confirm that the heading remains centered and the instruction retains its intended alignment.

If a conversion or cleanup step removes the stored style or node attribute, find that step before adding a global CSS rule to imitate the lost result. A global rule can make the fixture look correct while still losing each author's saved choice.

Separate stored alignment from reader styling

If the editor reopens correctly but the reader page differs, inspect the exported representation and the reader's computed styles. A reader rule with higher priority can override the exported alignment. If the attribute is absent from the saved record, inspect the original selection, configured types, and storage conversion instead.

The CSS text alignment guide explains how lines sit inside a block and why text alignment does not center the block itself. In this editor integration, the additional responsibility is preserving the author's node-level choice. Read the saved workshop handout at a narrow width, where the centered heading may wrap, and confirm that the equipment instruction still reads as a separate left-aligned paragraph.