fix: Editor Image Display Size

[ktun95]

When an image is inserted into the editor, it should be displayed in its original aspect ratio.

Without explicitly setting the height/width of the img element or its container, the image should render in its original size and aspect ratio.

Maybe this design choice was necessary for resizing?

[ktun95]

Current:

flowchart TD
A[edtitor.dispatchCommand]
B[ImageNode]
C[ImageComponent] 
D[ResizableImage]
E[Container]
F[img]
G[ImageResizer]
S([imageDimension state])

A --> |src, height, width| B
B --> |src, height, width| C
C --> D
D --> E
E --> F
E --> G

C --> |initializes value| S
S --> |determines dimensions| E
S --> |used for initial value| G
G ----> |writes| S
G ----> |setDimensions| B

[ktun95]

Solution 1: When the ImageNode is created, do not pass any height or width data. Refactor the ImageComponent to render img element without height / width set. This will render the image in its original size and aspect ratio.

On resize, the ImageNode's height and width property will be set explicitly, and it's aspect ratio should be preserved by the resizing logic.

flowchart TD
A[ImageNode]
B[ImageComponent]
C[ImageComponent]
D[Use original image size / aspect ratio]
E[Use given height / width]
F[onResize]

A --> |undefined h, w| B
B --> D
D --> F

A --> |h, w set| C
C --> E
E --> F

F ----->|ImageNode.setDimensions| A