Feature: Add zoom functionality to editor
- 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
Assessment
This issue has not been assessed yet.