facebook / facebook/lexical

Feature: Vertical and Horizontal Layout for each page or group

Open
#7,710 1 comment 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
TypeScript
Stars
23.9k
Forks
2.2k
Avg merge
1d 14h
Merged PRs (30d)
55

Description

Description
I’m working on a document editor using Lexical v0.16.x where each page can have its own layout — either vertical (portrait) or horizontal (landscape). Currently, Lexical does not support pagination or content-wrapping capabilities that would allow grouping elements like

tags into logical page containers with a different layout per page.

Problem
I would like to conditionally wrap a group of paragraphs into a `

...
` or something similar so I can:

- Apply a vertical or horizontal layout (e.g., via CSS or a @media print rule)
- Print or export pages with varying page orientations
- Isolate content sections for rendering/exporting/styling purposes

This isn't possible right now, because:

- There’s no official pagination support
- Lexical doesn’t support wrapping arbitrary groups of nodes in a container node unless it’s done manually via a custom node type
- Even custom nodes do not have a built-in way to dynamically group and re-group content into page containers

Feature Request
Can Lexical support:

- Group container nodes that wrap a series of block-level children (like paragraphs)?

- A way to assign layout mode (e.g., horizontal or vertical) per group/page?

- Possibly expose a layout API or hook to allow the editor to determine where content should break and how it should be wrapped?

Alternatively, is there any current recommended way to:

- Enforce custom layout containers per N nodes?

- Implement a layout switch per section of the document?

Use Cases

- Word-like editing where one page is portrait and the next page is landscape (e.g., title page vs. wide table page)

Alternatives Considered
Manual wrapping using custom nodes (ParagraphGroupNode), but maintaining consistent behavior, selection, and serialization is difficult.

Static CSS-based layout switching, but it doesn’t allow part-of-document configuration.

Dynamic decoration/wrapping logic in plugins — this breaks on collab/Codox because DOM-wrapping is not persisted in state.

Additional Context
Pagination and layout control are major needs for professional editors (docs, reports, publishing). Supporting even basic grouping logic would enable developers to build this on top.

Impact
This feature would benefit:

Document editors that require print-ready layouts

Codox + Lexical collaborative editors

Any app aiming to offer mixed-orientation page editing

Used by:

Developers building Word/PDF-like editors

Educational, legal, and publishing apps

Estimated usage:

Frequently used for any paginated or print/export-oriented workflows

Would benefit hundreds of Lexical-based editor apps

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.