Description

This feature request is related to #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