chore(rte): styling of image dialog

Author: gjulivan

packages/pluggableWidgets/rich-text-web/src/__mocks__/quill-resize-module.ts

@@ -5,10 +5,18 @@ export class QuillResizeToolbar {
     }
 }
 
+// eslint-disable-next-line @typescript-eslint/no-extraneous-class
+export class QuillResizeResize {
+    constructor() {
+        return this;
+    }
+}
+
 // eslint-disable-next-line @typescript-eslint/no-extraneous-class
 export default class QuillResize {
     static Modules = {
-        Toolbar: QuillResizeToolbar
+        Toolbar: QuillResizeToolbar,
+        Resize: QuillResizeResize
     };
     constructor() {
         return this;

packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/Dialog.scss

@@ -30,9 +30,44 @@
             }
         }
 
+        &.image-dialog {
+            .image-dialog-size {
+                input {
+                    min-width: 20px;
+                    &[disabled] {
+                        text-decoration: line-through;
+                    }
+                }
+
+                &-input {
+                    flex: 2;
+                    align-items: center;
+                    justify-content: center;
+                }
+
+                &-label {
+                    flex: 1;
+                    align-items: center;
+                    justify-content: flex-end;
+                    padding-right: var(--spacing-medium, 16px);
+                }
+
+                &-container {
+                    align-items: center;
+                    justify-content: center;
+                }
+            }
+
+            .image-dialog-upload {
+                max-height: var(--max-dialog-height, 70vh);
+                overflow-y: auto;
+            }
+        }
+
         .nav-tabs {
             li {
                 cursor: pointer;
+
                 a {
                     pointer-events: none;
                 }
@@ -57,6 +92,7 @@
 
         .mx-image-dialog-thumbnail {
             max-height: 100px;
+
             &-small {
                 max-height: 50px;
             }
@@ -79,6 +115,7 @@
                         background-color: var(--color-background, #fff);
                         cursor: pointer;
                         transition: transform 0.2s ease-in-out;
+
                         &:hover {
                             transform: scale3d(1.05, 1.05, 1);
                         }

packages/pluggableWidgets/rich-text-web/src/components/ModalDialog/ImageDialog.tsx

@@ -1,6 +1,6 @@
 import { If } from "@mendix/widget-plugin-component-kit/If";
 import classNames from "classnames";
-import { ChangeEvent, createElement, ReactElement, useEffect, useRef, useState } from "react";
+import { ChangeEvent, createElement, ReactElement, SyntheticEvent, useEffect, useRef, useState } from "react";
 import { RichTextContainerProps } from "../../../typings/RichTextProps";
 import { type imageConfigType } from "../../utils/formats";
 import { IMG_MIME_TYPES } from "../CustomToolbars/constants";
@@ -109,6 +109,10 @@ export default function ImageDialog(props: ImageDialogProps): ReactElement {
         setSelectedImageEntity(undefined);
     };
 
+    const onImageLoaded = (e: SyntheticEvent<HTMLImageElement>): void => {
+        setFormState({ ...formState, width: e.currentTarget.naturalWidth, height: e.currentTarget.naturalHeight });
+    };
+
     useEffect(() => {
         // event listener for image selection triggered from custom widgets JS Action
         const imgRef = imageUploadElementRef.current;
@@ -123,7 +127,7 @@ export default function ImageDialog(props: ImageDialogProps): ReactElement {
     }, [imageUploadElementRef.current]);
 
     return (
-        <DialogContent className="video-dialog">
+        <DialogContent className="image-dialog">
             <DialogHeader onClose={onClose}>{activeTab === "general" ? "Insert/Edit" : "Embed"} Images</DialogHeader>
             <DialogBody>
                 <div ref={imageUploadElementRef}>
@@ -170,6 +174,7 @@ export default function ImageDialog(props: ImageDialogProps): ReactElement {
                                             src={selectedImageEntity.thumbnailUrl || selectedImageEntity.url}
                                             alt={selectedImageEntity.id}
                                             className="mx-image-dialog-thumbnail-small"
+                                            onLoad={onImageLoaded}
                                         />
                                         <span className="icon-container">
                                             <span className="icons icon-Delete" onClick={onEmbedDeleted}></span>
@@ -195,28 +200,35 @@ export default function ImageDialog(props: ImageDialogProps): ReactElement {
                                     ref={inputReference}
                                 />
                             </FormControl>
-                            <FormControl label="Width">
-                                <input
-                                    className="form-control"
-                                    type="number"
-                                    name="width"
-                                    onChange={onInputChange}
-                                    value={formState.width}
-                                />
-                                px
-                            </FormControl>
-                            <FormControl label="Height">
-                                <input
-                                    className="form-control"
-                                    type="number"
-                                    name="height"
-                                    onChange={onInputChange}
-                                    value={formState.height}
-                                    disabled={formState.keepAspectRatio}
-                                />
-                                px
+                            <FormControl label="Width" className="image-dialog-size">
+                                <div className="flexcontainer image-dialog-size-container">
+                                    <div className="flexcontainer image-dialog-size-input">
+                                        <input
+                                            className="form-control"
+                                            type="number"
+                                            name="width"
+                                            onChange={onInputChange}
+                                            value={formState.width}
+                                        />
+                                        <span>px</span>
+                                    </div>
+                                    <div className="flexcontainer image-dialog-size-label">
+                                        <label className="control-label">Height</label>
+                                    </div>
+                                    <div className="flexcontainer image-dialog-size-input">
+                                        <input
+                                            className="form-control"
+                                            type="number"
+                                            name="height"
+                                            onChange={onInputChange}
+                                            value={formState.height}
+                                            disabled={formState.keepAspectRatio}
+                                        />
+                                        <span>px</span>
+                                    </div>
+                                </div>
                             </FormControl>
-                            <FormControl label="Keep aspect ratio">
+                            <FormControl label="Keep ratio">
                                 <input
                                     type="checkbox"
                                     name="keepAspectRatio"
@@ -227,7 +239,7 @@ export default function ImageDialog(props: ImageDialogProps): ReactElement {
                             <DialogFooter onSubmit={() => onSubmit(formState)} onClose={onClose}></DialogFooter>
                         </If>
                         <If condition={activeTab === "embed"}>
-                            <div>{imageSourceContent}</div>
+                            <div className="image-dialog-upload">{imageSourceContent}</div>
                         </If>
                     </div>
                 </div>

packages/pluggableWidgets/rich-text-web/src/utils/modules/resize.ts

@@ -22,7 +22,7 @@ type limitType = {
 
 type eventType = { clientX: number; clientY: number };
 // eslint-disable-next-line no-unsafe-optional-chaining
-export default class MxResize extends QuillResize.Modules?.Resize {
+export default class MxResize extends QuillResize.Modules.Resize {
     // modified from https://github.com/mudoo/quill-resize-module/blob/master/src/modules/Resize.js
     calcSize(evt: eventType, limit: limitType = {}): resultSizeType {
         // update size