[FR] Add image resizer for mobile and desktop

[alihassan143]

Description

user can resize image by selecting it

Impact

it will mostly complete the image block component

Additional Context

No response

[LucasXu0]

The editor has supported resizing the image on desktop.

[alihassan143]

@LucasXu0 ok but mobile need to have resizer

[hyj1204]

@alihassan143 Since the width of the screen on mobile is very narrow and we only allow one image in a single line(node). I think it is good to lay the image in the following ways:

1. When the image width is less than the screen width: Lay the image with the original size in the center.
2. When the image width is more than the screen width: The image occupies the whole width of the screen and keeps the same ratio as the original photo.

I feel it would be nice to give the option to check the original image(when double click the image), so users can zoom in/out to see the detail of the image instead of resizing it.

I am not sure it is a good idea to do the resizing within the editor in mobile, because I feel all the image editing work(like sizing, cropping, rotating, etc.) should be processed in photo editing apps. It's best for users to import their edited images into the document once they're done with their editing in other apps.

What do you think? @alihassan143 @annieappflowy @LucasXu0

[alihassan143]

@hyj1204 crop_your_imagewe can use this package for cropping rotating sizing its written purely in dart and we can easily be able to handle the image resources using this package for mobile we can create a simple editor like screen where user can select edit image on that after doing apply changes user can add image in editor when user longpress or double click on that same image user can also edit change that image its easy to implement and easy to handle @LucasXu0 what do you think about this idea? we can also use this same for desktop instead of doing in new screen we can user the dialog inn center to that kind of thing because mostly editor do that same