feat(web): text alignment

[kacperzolkiewski]

Summary

Text alignment for Web

Test Plan

• Run example web app and play with textAlignment when different styles are toggled.
• Check if paragraphs/lists with different textAlignment than auto are properly parsed and contain style="text-align:center|right|justify" inside HTML
• Run yarn test:e2e:web to see if all the tests pass

Screenshots / Videos

Screen.Recording.2026-06-24.at.12.15.03.mov

Compatibility

OS	Implemented
iOS	❌
Android	❌
Web	✅

Checklist

• E2E tests are passing
• Required E2E tests have been added (if applicable)

[Copilot]

Pull request overview

Adds web-only text alignment support to the enriched editor by integrating TipTap’s text-align extension, exposing an imperative alignment API, and ensuring alignment survives common block/list transformations.

Changes:

• Add @tiptap/extension-text-align and a custom EnrichedTextAlign extension to apply alignment to list wrappers (<ol>/<ul>) when appropriate.
• Preserve alignment through block-style toggles and list operations via withPreservedAlignment + state reporting via getCurrentAlignment.
• Extend the example web toolbar + add Playwright coverage for HTML round-tripping, interactions, and a visual regression screenshot.

Reviewed changes

Copilot reviewed 16 out of 18 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
package.json	Adds TipTap text-align dependency.
yarn.lock	Locks the new TipTap dependency.
src/web/formats/EnrichedTextAlign.ts	Introduces custom text-align behavior (notably for lists) + keyboard shortcut handling.
src/web/EnrichedTextInput.tsx	Registers EnrichedTextAlign and implements setTextAlignment on the web imperative handle.
src/web/useOnChangeState.ts	Reports current alignment in onChangeState and includes it in the state hash.
src/web/formats/formatRules.ts	Adds alignment helpers and preserves alignment when toggling paragraph formats.
src/web/formats/applyWrappingListToSelection.ts	Preserves alignment when wrapping a selection into a list.
src/web/formats/listKeyboard.ts	Preserves alignment when lifting list items via backspace behavior.
src/web/formats/EnrichedOrderedList.ts	Preserves alignment when toggling ordered lists on/off.
src/web/formats/EnrichedUnorderedList.ts	Preserves alignment when toggling unordered lists on/off.
src/web/formats/EnrichedCheckboxList.ts	Preserves alignment when toggling checkbox lists on/off.
src/web/formats/EnrichedHeading.ts	Updates paragraph-format toggling to preserve alignment.
src/web/formats/EnrichedBlockquote.ts	Updates paragraph-format toggling to preserve alignment.
src/web/formats/EnrichedCodeBlock.ts	Updates paragraph-format toggling to preserve alignment.
src/web/normalization/tiptapHtmlNormalizer.ts	Makes list <li><p…> stripping more robust to whitespace/attrs.
apps/example-web/src/components/Toolbar.tsx	Adds alignment buttons to the example toolbar.
.playwright/tests/textAlignment.spec.ts	Adds E2E coverage for alignment behavior and rendering.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[hejsztynx]

Screen.Recording.2026-06-24.at.16.28.18.mov

When we select all content with command + A, then toggle a paragraph style, the alignment isn't persisted

[hejsztynx]

Screen.Recording.2026-06-24.at.17.35.47.mov

It looks like the issue is still there - again when using cmd + A, but only when switching from blockquote or codeblock to a different paragraph style.