facebook / facebook/lexical

Feature: Add zoom functionality to editor

Open
#7,467 0 comments 3 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

This feature request is related to https://github.com/facebook/lexical/issues/6449 where there's a discussion about making Playground's toolbar similar to Google Docs toolbar.

I'm working on making the editor more accessible and user-friendly, and would like to add zoom functionality similar to Google Docs. But a simpler one. This would allow users to adjust the editor's content size for better readability and editing experience.

## Use cases:
- Users who need larger text for better visibility
- Users working on detailed content who need to zoom in for precision
- Users who want to see more content at once by zooming out
- Users who want content to fit their viewport width automatically

## Alternative solutions considered:
1. Complex implementation using CSS transform/scale (like Google Docs)
- Pros: Better browser compatibility, more precise control
- Cons: Significantly more complex, requires major changes
2. Current simple implementation using CSS zoom property
- Pros: Easy to implement, good performance, works well for basic use cases
- Cons: Potential layout issues with complex content

## Implementation details:
- Add zoom dropdown in toolbar with options: Fit, 50%, 75%, 90%, 100%, 125%, 150%, 200%
- "Fit" option should automatically calculate zoom to fit content width
- Should work on both desktop and mobile views
- Add a dropdown to toolbar that follows Lexical's existing dropdown UI patterns

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.