fix(rte): update based on feedbacks

Author: gjulivan

packages/pluggableWidgets/rich-text-web/src/components/Editor.tsx

@@ -167,7 +167,7 @@ const Editor = forwardRef((props: EditorProps, ref: MutableRefObject<Quill | nul
                         if (arg[0].href) {
                             customLinkHandler(arg[0]);
                         } else if (arg[0].src) {
-                            // open dialog editor for updating imag or video
+                            // open dialog editor for updating image or video
                             if (arg[0].type === "video") {
                                 customVideoHandler(arg[0]);
                             } else {

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

@@ -6,7 +6,7 @@ import { type imageConfigType } from "../../utils/formats";
 import { IMG_MIME_TYPES } from "../CustomToolbars/constants";
 import { DialogBody, DialogContent, DialogFooter, DialogHeader, FormControl } from "./DialogContent";
 
-type imageListType = {
+type Image = {
     id: string;
     url: string;
     thumbnailUrl?: string;
@@ -30,7 +30,7 @@ export interface ImageDialogProps extends Pick<RichTextContainerProps, "imageSou
 export default function ImageDialog(props: ImageDialogProps): ReactElement {
     const { onClose, defaultValue, onSubmit, imageSource, imageSourceContent, enableDefaultUpload } = props;
     const [activeTab, setActiveTab] = useState("general");
-    const [selectedImageEntity, setSelectedImageEntity] = useState<imageListType>();
+    const [selectedImageEntity, setSelectedImageEntity] = useState<Image>();
     const imageUploadElementRef = useRef<HTMLDivElement>(null);
     // disable embed tab if it is about modifying current video
     const disableEmbed =
@@ -50,7 +50,7 @@ export default function ImageDialog(props: ImageDialogProps): ReactElement {
             !isInputProcessed.current
         ) {
             // if there is a file given, and imageSource is available
-            // asume that we want to do image upload to entity
+            // assume that we want to do image upload to entity
             // and switch to embed tab
             setActiveTab("embed");
         }
@@ -93,13 +93,13 @@ export default function ImageDialog(props: ImageDialogProps): ReactElement {
         setFormState({ ...formState, keepAspectRatio: !formState.keepAspectRatio });
     };
 
-    const onEmbedSelected = (image: imageListType): void => {
+    const onEmbedSelected = (image: Image): void => {
         setFormState({ ...formState, entityGuid: image.id, src: undefined, files: null });
         setSelectedImageEntity(image);
         setActiveTab("general");
     };
 
-    const handleImageSelected = (event: CustomEvent<imageListType>): void => {
+    const handleImageSelected = (event: CustomEvent<Image>): void => {
         const image = event.detail;
         onEmbedSelected(image);
     };

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

@@ -1,17 +1,18 @@
 import QuillResize from "quill-resize-module";
 
-type sizeType = {
+type ImageSize = {
     width?: number;
     height?: number;
 };
-type resultSizeType =
-    | sizeType
-    | {
-          width?: string;
-          height?: string;
-      };
-
-type limitType = {
+
+type ImageSizeWithUnit = {
+    width?: string;
+    height?: string;
+};
+
+type ImageSizes = ImageSize | ImageSizeWithUnit;
+
+type LimitConfig = {
     ratio?: number;
     minWidth?: number;
     maxWidth?: number;
@@ -20,22 +21,24 @@ type limitType = {
     unit?: string;
 };
 
-type eventType = { clientX: number; clientY: number };
-// eslint-disable-next-line no-unsafe-optional-chaining
+type CalculateSizeEvent = { clientX: number; clientY: number };
+
 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 {
+    calcSize(evt: CalculateSizeEvent, limit: LimitConfig = {}): ImageSizes {
         // update size
         const deltaX = evt.clientX - this.dragStartX;
         const deltaY = evt.clientY - this.dragStartY;
 
-        const size: sizeType = {};
+        const size: ImageSize = {};
         let direction = 1;
 
         (this.blotOptions.attribute || ["width"]).forEach((key: "width" | "height") => {
             size[key] = this.preDragSize[key];
         });
 
+        // modification to check if height attribute is exist from current image
+        // this is to maintain ratio by resizing width only
         const allowHeight =
             this.activeEle.getAttribute("height") !== undefined && this.activeEle.getAttribute("height") !== null;
         if (!allowHeight) {
@@ -86,7 +89,7 @@ export default class MxResize extends QuillResize.Modules.Resize {
                 if (limit.maxHeight) height = Math.min(limit.maxHeight, height!);
             }
         }
-        const res: resultSizeType = {};
+        const res: ImageSizes = {};
 
         if (limit.unit) {
             if (width) res.width = width + "px";