[Image] | (DX) | Remove ZoomService in favor of WB Modal #3009

nishasy · 2025-10-31T00:38:21Z

Summary:

The old zoom service is a huge pain to work with. It's super old and very
non-modern-reacty.

I'm replacing it here with Wonder Blocks modal so that the zoom feature can be
easier to work with and maintain.

This is a prerequisite for making the graphies focusable and zoomable since the
old zoom service was trying to do too much with the image ref, making it impossible
to zoom in on graphies with their labels.

NOTE: The nice little transition is unfortunately gone with this approach. But I got
confirmation from our designer that we can go with this for now, and we can add
in transitions once WB Modal supports it next year.

Issue: https://khanacademy.atlassian.net/browse/LEMS-3689

Test plan:

Storybook
/?path=/story/widgets-image-widget-demo--image-with-different-sizes

Before

Screen.Recording.2025-10-30.at.5.14.11.PM.mov

After

Screen.Recording.2025-10-30.at.5.15.18.PM.mov

…ove ZoomService in favor of WB Modal

github-actions · 2025-10-31T00:39:07Z

🗄️ Schema Change: No Changes ✅

github-actions · 2025-10-31T00:39:36Z

Size Change: -2.09 kB (-0.42%)

Total Size: 497 kB

Filename	Size	Change
`packages/perseus-editor/dist/es/index.js`	97.9 kB	+41 B (+0.04%)
`packages/perseus/dist/es/index.js`	202 kB	-2.13 kB (-1.04%)

ℹ️ View Unchanged

Filename	Size
`packages/kas/dist/es/index.js`	20.8 kB
`packages/keypad-context/dist/es/index.js`	1 kB
`packages/kmath/dist/es/index.js`	5.98 kB
`packages/math-input/dist/es/index.js`	99.2 kB
`packages/math-input/dist/es/strings.js`	1.61 kB
`packages/perseus-core/dist/es/index.item-splitting.js`	13.1 kB
`packages/perseus-core/dist/es/index.js`	22.4 kB
`packages/perseus-linter/dist/es/index.js`	7.68 kB
`packages/perseus-score/dist/es/index.js`	9.2 kB
`packages/perseus-utils/dist/es/index.js`	403 B
`packages/perseus/dist/es/strings.js`	7.73 kB
`packages/pure-markdown/dist/es/index.js`	1.39 kB
`packages/simple-markdown/dist/es/index.js`	6.71 kB

_{compressed-size-action}

github-actions · 2025-10-31T00:39:39Z

🛠️ Item Splitting: No Changes ✅

github-actions · 2025-10-31T00:40:29Z

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (aa8d559) and published it to npm. You
can install it using the tag PR3009.

Example:

pnpm add @khanacademy/perseus@PR3009

If you are working in Khan Academy's frontend, you can run the below command.

./dev/tools/bump_perseus_version.ts -t PR3009

If you are working in Khan Academy's webapp, you can run the below command.

./dev/tools/bump_perseus_version.js -t PR3009

…e tested with unit tests

nishasy · 2025-10-31T22:29:38Z

packages/perseus/src/zoom.ts

Deleted zoom code

if not yet in our decision page, please add the decision why it this is removed

…e-zoom-with-modal

nishasy · 2025-11-12T20:10:00Z

packages/perseus/src/widgets/image/image.cypress.ts

Removed these cypress tests now that the unit tests cover the same thing.

do we want to retain the testing but updated logic?

We had a meeting about this last week when you were gone. We're going to move away from using cypress within the perseus repo altogether.

Cypress in frontend is still used though.

…han functions to remove hooks warning

…f screen on mobile

ivyolamit

@nishasy overall code looks good. Just one comment for code changes on removing unused css styling. The rest are question and non-blocking comment.

packages/perseus/src/components/image-loader.tsx

packages/perseus/src/components/zoom-image-button.tsx

packages/perseus/src/styles/styles.css

ivyolamit · 2025-11-12T23:38:38Z

packages/perseus/src/widgets/image/image.cypress.ts

do we want to retain the testing but updated logic?

packages/perseus/src/widgets/image/image.test.ts

ivyolamit · 2025-11-12T23:42:02Z

packages/perseus/src/zoom.ts

if not yet in our decision page, please add the decision why it this is removed

types/aphrodite.d.ts

…xplore modal

nishasy · 2025-11-13T18:45:45Z

Note to self: DO NOT LAND UNTIL QA IS COMPLETE

catandthemachines

Thank you so much for this improvement, it's so much cleaner and easier to read compared to the old zoom code. I had one question on the "closing dialog when image is clicked", but it's non blocking.

Thanks Nisha!

catandthemachines · 2025-11-14T01:04:05Z

packages/perseus/src/components/zoomed-image-view.module.css

@@ -0,0 +1,14 @@
+.contentWrapper {
+    /* Undo the ModalContent padding so that the image takes up the whole modal. */


Thank you for these comments!

catandthemachines · 2025-11-14T01:06:49Z

packages/perseus/src/styles/styles.css

    line-height: 1.5;
    margin: 0;
 }
-/* Derived from the MIT-licensed zoom.js:


catandthemachines · 2025-11-14T01:07:28Z

packages/perseus/src/widgets/grapher/grapher.tsx

                <SvgImage
                    src={imageDescription.url}
+                    allowZoom={false}
+                    // Don't allow zooming on an image that's being


nit: I'd move it above the property like other comments for consistency

Oh idk how that happened haha

catandthemachines · 2025-11-14T01:16:19Z

packages/perseus/src/widgets/image/image.test.ts

+            expect(screen.getByRole("dialog")).toBeVisible();
+        });
+
+        it("closes the modal when the image is clicked", async () => {


Question, was that in the old experience? Why should the modal close if the image is clicked? What if someone wants to copy the image or look at more closely? Closing on clicking the image seem odd.

Non-blocking and ignore me if design prefers this.

I was just trying to get it as close to the old experience as possible. You can see that in prod (Image article).

The old experience closed the modal with a click, space, enter, or escape anywhere within the zoomed view. This doesn't stop right-clicking. It also manually handles control+click/command+click to open the image in a new tab (which I manually implemented in the new experience too).

…e-zoom-with-modal

@nishasy

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @khanacademy/[email protected] ### Minor Changes - [#3037](#3037) [`39c890acc5`](39c890a) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (UX) | Allow zooming on Graphie images - [#3009](#3009) [`8d3beb2743`](8d3beb2) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (DX) | Remove ZoomService in favor of WB Modal ### Patch Changes - [#3044](#3044) [`78e15ef4e6`](78e15ef) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (UX) | Image zoom fixes - remove scrolling for portrait images, command click on main image instead of zoomed image - [#3043](#3043) [`98245b0f3a`](98245b0) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Fix bottom margin when rendering in mobile - Updated dependencies \[[`ceb7a70bfa`](ceb7a70), [`fc6273b10d`](fc6273b), [`18261c3294`](18261c3)]: - @khanacademy/[email protected] - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Minor Changes - [#3047](#3047) [`b84bc99def`](b84bc99) Thanks [@nishasy](https://github.com/nishasy)! - Add Issues Panel to Article Editor - [#2992](#2992) [`fc6273b10d`](fc6273b) Thanks [@nishasy](https://github.com/nishasy)! - Add radio and expression save wanrnings to the perseus linter. Add a callback for issues changed to item-editor.tsx. - [#3037](#3037) [`39c890acc5`](39c890a) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (UX) | Allow zooming on Graphie images ### Patch Changes - [#3044](#3044) [`78e15ef4e6`](78e15ef) Thanks [@nishasy](https://github.com/nishasy)! - [Image] | (UX) | Image zoom fixes - remove scrolling for portrait images, command click on main image instead of zoomed image - [#3049](#3049) [`18261c3294`](18261c3) Thanks [@nishasy](https://github.com/nishasy)! - Add Free Response widget save warnings to perseus linter - Updated dependencies \[[`ceb7a70bfa`](ceb7a70), [`78e15ef4e6`](78e15ef), [`fc6273b10d`](fc6273b), [`39c890acc5`](39c890a), [`8d3beb2743`](8d3beb2), [`98245b0f3a`](98245b0), [`18261c3294`](18261c3)]: - @khanacademy/[email protected] - @khanacademy/[email protected] - @khanacademy/[email protected] ## @khanacademy/[email protected] ### Minor Changes - [#2992](#2992) [`fc6273b10d`](fc6273b) Thanks [@nishasy](https://github.com/nishasy)! - Add radio and expression save wanrnings to the perseus linter. Add a callback for issues changed to item-editor.tsx. - [#3049](#3049) [`18261c3294`](18261c3) Thanks [@nishasy](https://github.com/nishasy)! - Add Free Response widget save warnings to perseus linter ## @khanacademy/[email protected] ### Patch Changes - [#3054](#3054) [`ceb7a70bfa`](ceb7a70) Thanks [@ivyolamit](https://github.com/ivyolamit)! - Add tabs and icon button package in math-input

nishasy added 2 commits October 30, 2025 17:34

[image-replace-zoom-with-modal] Replace zoom service with modal

f77bd9f

[image-replace-zoom-with-modal] docs(changeset): [Image] | (DX) | Rem…

364335c

…ove ZoomService in favor of WB Modal

nishasy self-assigned this Oct 31, 2025

nishasy added the olc-5.0.c60e1 label Oct 31, 2025

[image-replace-zoom-with-modal] Remove zoom service

1abdf85

nishasy added 3 commits October 30, 2025 17:41

[image-replace-zoom-with-modal] Update snapshots

70f30c6

[image-replace-zoom-with-modal] Remove cypress test since modal can b…

f463acf

…e tested with unit tests

[image-replace-zoom-with-modal] add unit tests

4505f9e

nishasy commented Oct 31, 2025

View reviewed changes

[image-replace-zoom-with-modal] Merge branch 'main' into image-replac…

1716d23

…e-zoom-with-modal

nishasy requested review from a team, SonicScrewdriver and jeremywiebe November 12, 2025 20:07

nishasy commented Nov 12, 2025

View reviewed changes

[image-replace-zoom-with-modal] style comments

e9715a3

nishasy marked this pull request as ready for review November 12, 2025 20:13

nishasy requested review from catandthemachines and ivyolamit as code owners November 12, 2025 20:13

nishasy added 2 commits November 12, 2025 13:59

[image-replace-zoom-with-modal] Use components as components rather t…

0db2ecc

…han functions to remove hooks warning

[image-replace-zoom-with-modal] Allow zoomed image to touches edges o…

656a40d

…f screen on mobile

ivyolamit reviewed Nov 12, 2025

View reviewed changes

nishasy added 3 commits November 12, 2025 16:20

[image-replace-zoom-with-modal] Make required

b91e0e5

[image-replace-zoom-with-modal] remove unused styles

c4abc1a

[image-replace-zoom-with-modal] Add a test for zoom behavior within e…

6fda1ca

…xplore modal

nishasy requested review from anakaren-rojas and mark-fitzgerald as code owners November 13, 2025 00:35

ivyolamit approved these changes Nov 13, 2025

View reviewed changes

[image-replace-zoom-with-modal] I think this is a minor change

fc6876d

catandthemachines approved these changes Nov 14, 2025

View reviewed changes

nishasy added 3 commits November 14, 2025 09:54

[image-replace-zoom-with-modal] Move comment

0648b69

[image-replace-zoom-with-modal] Merge branch 'main' into image-replac…

4cd5f80

…e-zoom-with-modal

[image-replace-zoom-with-modal] Merge branch 'main' into image-replac…

aa8d559

…e-zoom-with-modal

nishasy merged commit 8d3beb2 into main Nov 20, 2025
11 checks passed

nishasy deleted the image-replace-zoom-with-modal branch November 20, 2025 21:55

khan-actions-bot mentioned this pull request Nov 20, 2025

Version Packages #3048

Merged

		@@ -0,0 +1,14 @@
		.contentWrapper {
		/* Undo the ModalContent padding so that the image takes up the whole modal. */

[Image] | (DX) | Remove ZoomService in favor of WB Modal #3009

[Image] | (DX) | Remove ZoomService in favor of WB Modal #3009

Uh oh!

Conversation

nishasy commented Oct 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary:

Test plan:

Before

After

Uh oh!

github-actions bot commented Oct 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🗄️ Schema Change: No Changes ✅

Uh oh!

github-actions bot commented Oct 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Oct 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🛠️ Item Splitting: No Changes ✅

Uh oh!

github-actions bot commented Oct 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

npm Snapshot: Published

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ivyolamit left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

nishasy commented Nov 13, 2025

Uh oh!

catandthemachines left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

nishasy commented Oct 31, 2025 •

edited

Loading

github-actions bot commented Oct 31, 2025 •

edited

Loading

github-actions bot commented Oct 31, 2025 •

edited

Loading

github-actions bot commented Oct 31, 2025 •

edited

Loading

github-actions bot commented Oct 31, 2025 •

edited

Loading