[lexical-utils] Bug Fix: Add feature detection to calculateZoomLevel

[etrepum]

Description

Add feature detection to calculateZoomLevel in situations when we are not sure if the browser implements standardized CSS zoom. We still assume that Firefox does, but since only Chrome >= 128 implements it and Safari doesn't implement it yet we use feature detection (creating a div in the document but off-screen, measuring it with and without zoom, then removing it). It's measured twice in case there's a zoom on the body which could cancel out a static measurement.

Closes #6863

Test plan

Before

Insert relevant screenshots/recordings/automated-tests

After

Insert relevant screenshots/recordings/automated-tests

[vercel]

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	Nov 26, 2024 10:21am
lexical-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 26, 2024 10:21am

[github-actions]

size-limit report 📦

Path	Size
lexical - cjs	30.91 KB (0%)
lexical - esm	30.79 KB (0%)
@lexical/rich-text - cjs	39.62 KB (0%)
@lexical/rich-text - esm	32.65 KB (0%)
@lexical/plain-text - cjs	38.21 KB (0%)
@lexical/plain-text - esm	29.93 KB (0%)
@lexical/react - cjs	41.34 KB (0%)
@lexical/react - esm	34 KB (0%)

[ivailop7]

This looks reasonable. Was originally thinking, since the method is used only in 3 places in 'lexical-react', if we have a way to get it out and have at playground level-only, but besides passing an extra argument to the 3 plugins (draggable block, checklist, context menu), dont have anything better. Chrome 128+ already has a pretty decent market share, so Ideally in 6-7 months we can remove the solution we come up with.

[etrepum]

I think we still need it for Safari

[ivailop7]

I think we still need it for Safari

it's in the official spec now, I believe it already works in Safari and according to https://caniuse.com/css-zoom seems ok

[etrepum]

That's just the zoom CSS property and according to that table it's been supported in Chromium since 4 (2010). Running this code in Safari 18.1.1 (macOS) sets NEEDS_MANUAL_ZOOM to true where Firefox and Chromium set it to false.

    const div = document.createElement('div');
    div.style.cssText =
      'position: absolute; opacity: 0; width: 100px; left: -1000px;';
    document.body.appendChild(div);
    const noZoom = div.getBoundingClientRect();
    div.style.setProperty('zoom', '2');
    NEEDS_MANUAL_ZOOM = div.getBoundingClientRect().width === noZoom.width;
    document.body.removeChild(div);

[etrepum]

Safari

Chrome

[ivailop7]

Safari

Chrome

Fair enough. I do remember trying it in WebKit a year+ ago and it worked. Thanks for checking.

[etrepum]

We don't have any tests that cover this but I think it should be fine. I'm not impacted or interested enough to write e2e for this myself, but if anyone else wants to do that it would be appreciated.

[potatowagon]

We don't have any tests that cover this but I think it should be fine. I'm not impacted or interested enough to write e2e for this myself, but if anyone else wants to do that it would be appreciated.

have added tests-needed label

[potatowagon]

is this related to browser zoom? ie ctrl + shift + +/- to zoom in and out

[ivailop7]

is this related to browser zoom? ie ctrl + shift + +/- to zoom in and out

The browser-level zoom behaves correctly already. The problem this fixed is when you embed the editor in anything that uses CSS Zoom and the clickable regions would respect the browser-level zoom, but not the CSS zoom, despite resizing correctly, which is used for content reflow rather than transform, also the CSS Zoom didn't propagate to iframe tags prior to the Chromium-level fix.

[ivailop7]

Appreciate the quick help on this!