Skip to content

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

Open
nishasy wants to merge 5 commits intomainfrom
image-size-warning
Open

[Image] | (CX) | Add a warning for large images#3505
nishasy wants to merge 5 commits intomainfrom
image-size-warning

Conversation

@nishasy
Copy link
Copy Markdown
Contributor

@nishasy nishasy commented Apr 16, 2026

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
Screenshot 2026-04-16 at 2 37 47 PM Screenshot 2026-04-16 at 2 37 52 PM

@nishasy nishasy self-assigned this Apr 16, 2026
@github-actions github-actions bot added the schema-change Attached to PRs when we detect Perseus Schema changes in it label Apr 16, 2026
@nishasy nishasy marked this pull request as ready for review April 16, 2026 21:42
Copy link
Copy Markdown

@claude claude bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 github-actions bot removed the schema-change Attached to PRs when we detect Perseus Schema changes in it label Apr 16, 2026
@github-actions
Copy link
Copy Markdown
Contributor

🗄️ Schema Change: No Changes ✅

@github-actions
Copy link
Copy Markdown
Contributor

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
Copy link
Copy Markdown
Contributor

🛠️ Item Splitting: No Changes ✅

@github-actions
Copy link
Copy Markdown
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant