[BUG]: Customized Image Gets Enlarged When Edited

[annieyxy]

Describe the bug

After creating an customized image using the canvas in the Rich Text Editor and saving, when user tries to edit the image again, the image gets enlarged, dimensions are altered and can not be reversed to original size. This causes significant trouble for users.

URL of the page where the issue is observed.

https://www.oppia.org/creator-dashboard

Steps To Reproduce

1. Navigate to any instance of Rich Text Editor, click ‘Insert image’ icon
2. Create image from scratch, then save by clicking ‘Use this Image’
3. Click on the pencil icon on top right to edit again
4. See the image enlarged significantly

Expected Behavior

Image should remain consistent when user edits.

Screenshots/Videos

https://github.com/oppia/oppia/assets/103808391/bf368655-a585-499d-95d9-2b5685545c73

What device are you using?

Desktop

Operating System

MacOS

What browsers are you seeing the problem on?

Chrome

Browser version

No response

Additional context

No response

Tips for developers

Before addressing the bug, please identify which PR caused the issue (you can follow the steps here). If you identify the PR, comment on the issue with a link to it. If not, mention the commit hash of the oldest commit you saw the bug on (and the month and year it was made in).

Then, please leave a comment with details of the approach that you plan to take to fix the issue (see example).

Note: If this is your first Oppia issue, please make sure to follow our guidelines for choosing an issue and setting things up. You will also need to show a demo of the fix working correctly on your local machine. Thanks!

[hookerco]

I have a proposed solution for the bug. It seems to stem from issue #14178. The following methods come from oppia/extensions/objects/templates/svg-editor.component.ts. The method scaleToWidth() that runs after the continueDiagramEditor() method seems to be the issue. It was meant to fix the issue of images becoming smaller, but that issue was already solved with setCanvasDimensions(). This is the proposed edit I have made:

Please let me know if I can be assigned or if there are any suggestions.

[seanlip]

@hookerco Thanks for finding the original issue that caused this!

Can you show a demo video of this fix that follows the steps in the "proof video" in #14178 as well as https://github.com/oppia/oppia/issues/14083 ? Thanks.

[kevintab95]

Attaching the SVG I'd used in https://github.com/oppia/oppia/pull/14178 to test, in case it is useful.

Edit: Please make sure to test the "upload then edit" scenario as in the original issue. Thanks!