Text alignment
Text alignment is a paragraph-level attribute that round-trips between DOCX and the editor. Configure the TextAlign extension and alignment is preserved through import, editing, and export.
What you need
- Extensions:
ConvertKit— bundlesTextAlignand preconfigures it withtypes: ['paragraph', 'heading']. - Configuration: None required.
- That is it. Alignment works end-to-end with the standard ConvertKit setup.
Support overview
| Import | Editor | Export | |
|---|---|---|---|
| Left | Supported | Supported | Supported |
| Center | Supported | Supported | Supported |
| Right | Supported | Supported | Supported |
| Justify | Supported | Supported | Supported |
Import
Import text alignment using the editor extension or the REST API. Both produce identical output.
The conversion service reads the <w:jc> element from each DOCX paragraph and maps it to a textAlign attribute on the corresponding Tiptap node.
Word <w:jc> value | Tiptap textAlign |
|---|---|
left | left |
center | center |
right | right |
both | justify |
start | start (passed through, may not be recognized by TextAlign) |
end | end (passed through, may not be recognized by TextAlign) |
The textAlign attribute is set on both paragraph and heading nodes.
Right-to-left text direction is not supported
DOCX paragraph direction (<w:bidi>) and run direction (<w:rtl>) are not parsed by the importer. Documents authored in Arabic, Hebrew, Persian, Urdu, or other RTL languages render with Tiptap's CSS direction (LTR by default), regardless of how the source document was authored. The exporter does not write direction back either, so a document edited as LTR exports as LTR. To handle RTL content today, set dir="rtl" on the editor root in your CSS or detect language at the application level and apply direction yourself.
Editor rendering
The TextAlign extension adds textAlign as a global attribute on the node types you specify. It renders as an inline style="text-align: ..." on the HTML element. ConvertKit registers it with types: ['paragraph', 'heading'] so imported alignment renders out of the box:
import { ConvertKit } from '@tiptap-pro/extension-convert-kit'
new Editor({ extensions: [ConvertKit] })If you need different types (e.g. table cells), override the slot:
ConvertKit.configure({
textAlign: { types: ['paragraph', 'heading', 'tableCell'] },
})Disabling textAlign drops the attribute
If you set ConvertKit.configure({ textAlign: false }), the textAlign attribute from import isn't recognized by the schema and won't be applied. No error is thrown. See the invalid schema guide for more on this behavior.
Export
Export text alignment using the editor extension or the REST API. Both handle text alignment identically.
The exporter reads node.attrs.textAlign from each paragraph and heading and maps it back to the DOCX alignment type. No additional configuration is required. If import and editor are configured correctly, export follows automatically.