Skip to content

[WIP][lexical-playground] Feature: Add zoom functionality to editor #7468

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
wants to merge 9 commits into
base: main
Choose a base branch
from
Draft

[WIP][lexical-playground] Feature: Add zoom functionality to editor #7468

wants to merge 9 commits into from
+101 −7

Conversation

kirandash
Copy link
Contributor

@kirandash kirandash commented Apr 13, 2025 •
edited
Loading

Description

Current Behvior:

The playground editor doesn't have any zoom functionality, making it difficult for users to adjust content size for better readability or detailed editing.

This PR adds:

  • A new zoom dropdown in the toolbar with options: 50%, 75%, 90%, 100%, 125%, 150%, 200%
  • Cross-browser compatible zoom implementation using CSS zoom property
  • Mobile-responsive zoom display that shows current zoom level
  • Styling that matches existing Lexical toolbar dropdowns
  • Zoom state management through ToolbarContext

Closes #7467

Test plan

Before

No Zoom functionality

After

Desktop:

lexical-fix-7467.mov

Mobie:

image

  1. Toolbar with new zoom dropdown
  2. Dropdown expanded showing all zoom options with separator
  3. Mobile view showing zoom level
  4. Editor at different zoom levels (ex: 100%, 200%)

@kirandash
feat(toolbar): add zoom functionality to editor
68a6f58 
- Add zoom dropdown with Fit and percentage options (50-200%)
- Implement CSS zoom-based content scaling
- Add mobile-responsive zoom display
- Calculate and apply Fit zoom option
- Style zoom dropdown to match existing toolbar patterns

Closes facebook#7467
@vercel Vercel
Copy link

vercel bot commented Apr 13, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
lexical ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 14, 2025 2:02pm
lexical-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 14, 2025 2:02pm

@facebook-github-bot facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Apr 13, 2025
@kirandash kirandash marked this pull request as draft April 13, 2025 16:55
@kirandash kirandash changed the title [lexical-playground] Feature: Add zoom functionality to editor [WIP][lexical-playground] Feature: Add zoom functionality to editor Apr 13, 2025
@kirandash
refactor(toolbar): replace zoom CSS property with transform scale
6eaa835 
- Replace non-standard zoom property with transform:scale() for better TypeScript support
- Improve cross-browser compatibility in zoom functionality
- Fix TS2339 error by removing dependency on CSSStyleDeclaration zoom property
- Maintain same zoom levels and UX while using standard CSS transforms
@kirandash kirandash marked this pull request as ready for review April 14, 2025 04:44
@kirandash kirandash changed the title [WIP][lexical-playground] Feature: Add zoom functionality to editor [lexical-playground] Feature: Add zoom functionality to editor Apr 14, 2025
@takuyakanbr
Copy link
Contributor

Latest commit seems to have some issues for me (Mac, Chrome):

  • action buttons on the left not aligned with the node
  • content spilling out of the editor
  • content being blocked by the debugger
Screenshot 2025-04-14 at 5 20 25 PM

Additional questions:

  • Should we remove the "Fit" option? It seems to act the same as "100%"
  • It'd be nice if the toolbar doesn't require scrolling when the editor width is at its maximum (with #7462 applied). To that end, maybe we can drop the label on the alignment dropdown (and move it to the left of "Insert"?)

@kirandash
Merge branch 'main' into feature/toolbar-zoom-functionality
a17f400
@kirandash
Revert "refactor(toolbar): replace zoom CSS property with transform s…
6b1e239 
…cale"\n\nThis reverts commit 6eaa835.
@kirandash
fix(toolbar): add type support for zoom CSS property
88cf21b 
- Add StyleWithZoom type to properly type the zoom CSS property
- Use type assertion to handle non-standard zoom property in TypeScript
- Fix TS2339 errors while maintaining existing zoom functionality
@kirandash
refactor(toolbar): simplify zoom functionality by removing Fit option
b01bcd9 
- Remove 'Fit' option from zoom levels
- Simplify type to numeric-only zoom values
- Remove unnecessary type checks and conditional logic
- Clean up related code
@kirandash
refactor: simplify ElementFormatDropdown to show only icons
aa04aa7 
- Remove text label from alignment dropdown button
- Keep only icon display for cleaner toolbar UI
- Maintain all alignment functionality while reducing visual clutter
@kirandash
Copy link
Contributor Author

kirandash commented Apr 14, 2025 •
edited
Loading

Latest commit seems to have some issues for me (Mac, Chrome):

  • action buttons on the left not aligned with the node
  • content spilling out of the editor
  • content being blocked by the debugger
Screenshot 2025-04-14 at 5 20 25 PM Additional questions:
  • Should we remove the "Fit" option? It seems to act the same as "100%"
  • It'd be nice if the toolbar doesn't require scrolling when the editor width is at its maximum (with #7462 applied). To that end, maybe we can drop the label on the alignment dropdown (and move it to the left of "Insert"?)

Hi @takuyakanbr! Thanks for reviewing and reporting these issues! I've made some changes to address them:

  1. Reverted my last commit and replaced transform: scale() with the zoom property which should fix the content spillover issues. Also, fixed TypeScript type issues related to the zoom property
  2. Fixed the alignment dropdown by removing the label text and keeping only icon, which should help reduce toolbar width and prevent scrolling at maximum editor width
  3. Moved the alignment dropdown to the left of "Insert" as suggested
  4. Removed the "Fit" option

Desktop:
image

These changes have been committed and pushed. Let me know if there's anything else that needs adjustment.

@kirandash
refactor: remove 'Fit' option from zoom level types
3f38d1d 
- Update zoomLevel type in ToolbarContext to only use number
@kirandash
style: reorganize zoom menu CSS
5c710dc 
- Improve organization of zoom-related styles
@takuyakanbr takuyakanbr added the extended-tests Run extended e2e tests on a PR label Apr 15, 2025
@takuyakanbr
Copy link
Contributor

Hmm I'm still seeing alignment issues with the action buttons on the left (the one that allows for adding empty paragraphs and dragging to reorder), when zoom isn't 100%.

There are also some tests that we may need to modify to account for the changes to the alignment dropdown, e.g. those using .toolbar-item.alignment and .toolbar-item.spaced.alignment > .text.dropdown-button-text as selectors.

This is more of a UI nit, but I think we can remove the divider that's directly on the left of the alignment dropdown.

@vadimkantorov
Copy link

In Google Docs, option "Fit" reduces the white margins and scales the document content accordingly. So in Google Docs, "Fit" is not equivalent to "100%"

@kirandash kirandash marked this pull request as draft April 23, 2025 06:06
@kirandash kirandash changed the title [lexical-playground] Feature: Add zoom functionality to editor [WIP][lexical-playground] Feature: Add zoom functionality to editor Apr 23, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@zurfyx zurfyx Awaiting requested review from zurfyx zurfyx is a code owner

@fantactuka fantactuka Awaiting requested review from fantactuka fantactuka is a code owner

@acywatson acywatson Awaiting requested review from acywatson acywatson is a code owner

@Fetz Fetz Awaiting requested review from Fetz Fetz is a code owner

@ivailop7 ivailop7 Awaiting requested review from ivailop7 ivailop7 is a code owner

@Sahejkm Sahejkm Awaiting requested review from Sahejkm Sahejkm is a code owner

@potatowagon potatowagon Awaiting requested review from potatowagon potatowagon is a code owner

@lilshady lilshady Awaiting requested review from lilshady lilshady is a code owner

@takuyakanbr takuyakanbr Awaiting requested review from takuyakanbr takuyakanbr is a code owner

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. extended-tests Run extended e2e tests on a PR
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Feature: Add zoom functionality to editor
4 participants
@kirandash @takuyakanbr @vadimkantorov @facebook-github-bot