[Image] | (CX) | Add a warning for large images

[nishasy]

Summary:

If an image is too large, it can cause slowdowns in both the editor and for our learners.

Add a warning here to let the content authors know if that's the case.

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

Test plan:

pnpm jest packages/perseus-editor/src/widgets/__tests__/image-editor.test.tsx

Storybook

• Go to /?path=/story/editors-editorpage--with-all-flags
• Add an image widget
• Use a large image (example: https://cdn.kastatic.org/ka-perseus-images/01f44d5b73290da6bec97c75a5316fb05ab61f12.jpg)
• Confirm that a warning shows up about the image being too large
• Use a small image (example: https://cdn.kastatic.org/ka-content-images/61831c1329dbc32036d7dd0d03e06e7e2c622718.jpg)
• Confirm that the warning does not show up

Before	After

[claude]

Claude Code Review

This repository is configured for manual code reviews. Comment @claude review to trigger a review and subscribe this PR to future pushes, or @claude review once for a one-time review.

_{Tip: disable this comment in your organization's Code Review settings.}

[github-actions]

🗄️ Schema Change: No Changes ✅

[github-actions]

Size Change: +118 B (+0.02%)

Total Size: 499 kB

📦 View Changed

Filename	Size	Change
packages/perseus-editor/dist/es/index.js	102 kB	+118 B (+0.12%)

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	20.5 kB
packages/keypad-context/dist/es/index.js	1 kB
packages/kmath/dist/es/index.js	6.36 kB
packages/math-input/dist/es/index.js	98.5 kB
packages/math-input/dist/es/strings.js	1.61 kB
packages/perseus-core/dist/es/index.item-splitting.js	11.9 kB
packages/perseus-core/dist/es/index.js	25.1 kB
packages/perseus-linter/dist/es/index.js	9.3 kB
packages/perseus-score/dist/es/index.js	9.7 kB
packages/perseus-utils/dist/es/index.js	403 B
packages/perseus/dist/es/index.js	196 kB
packages/perseus/dist/es/strings.js	8.27 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]

🛠️ Item Splitting: No Changes ✅

[github-actions]

npm Snapshot: Published

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

Example:

pnpm add @khanacademy/perseus@PR3505

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

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

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

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

[catandthemachines]

Implementation looks good to me. One thing to note is that this feature is behind the scaling update. As long as that is expected I see no issues.