feat(rte): keep image aspect ratio

Author: gjulivan

packages/pluggableWidgets/rich-text-web/src/components/CustomToolbars/useEmbedModal.ts

@@ -152,14 +152,16 @@ export function useEmbedModal(ref: MutableRefObject<Quill | null>): ModalReturnT
             dialogType: "image",
             config: {
                 onSubmit: (value: imageConfigType) => {
+                    const defaultImageConfig = {
+                        alt: value.alt,
+                        width: value.width,
+                        height: value.keepAspectRatio ? undefined : value.height
+                    };
+
                     if (value.src) {
                         const index = selection?.index ?? 0;
                         const length = 1;
-                        const imageConfig = {
-                            alt: value.alt,
-                            width: value.width,
-                            height: value.height
-                        };
+                        const imageConfig = defaultImageConfig;
                         // update existing image attribute
                         const imageUpdateDelta = new Delta().retain(index).retain(length, imageConfig);
                         ref.current?.updateContents(imageUpdateDelta, Emitter.sources.USER);
@@ -170,9 +172,7 @@ export function useEmbedModal(ref: MutableRefObject<Quill | null>): ModalReturnT
                                 uploadImage(ref, selection, value);
                             } else if (value.entityGuid) {
                                 const imageConfig = {
-                                    alt: value.alt,
-                                    width: value.width,
-                                    height: value.height,
+                                    ...defaultImageConfig,
                                     "data-src": value.entityGuid
                                 };
                                 const delta = new Delta()

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

@@ -74,7 +74,8 @@ export default function ImageDialog(props: ImageDialogProps): ReactElement {
         alt: defaultValue?.alt ?? "",
         width: defaultValue?.width ?? 100,
         height: defaultValue?.height ?? 100,
-        src: defaultValue?.src ?? undefined
+        src: defaultValue?.src ?? undefined,
+        keepAspectRatio: true
     });
 
     const onFileChange = (e: ChangeEvent<HTMLInputElement>): void => {
@@ -87,6 +88,11 @@ export default function ImageDialog(props: ImageDialogProps): ReactElement {
         setFormState({ ...formState, [e.target.name]: e.target.value });
     };
 
+    const onInputCheckboxChange = (e: ChangeEvent<HTMLInputElement>): void => {
+        e.stopPropagation();
+        setFormState({ ...formState, keepAspectRatio: !formState.keepAspectRatio });
+    };
+
     const onEmbedSelected = (image: imageListType): void => {
         setFormState({ ...formState, entityGuid: image.id, src: undefined, files: null });
         setSelectedImageEntity(image);
@@ -206,9 +212,18 @@ export default function ImageDialog(props: ImageDialogProps): ReactElement {
                                     name="height"
                                     onChange={onInputChange}
                                     value={formState.height}
+                                    disabled={formState.keepAspectRatio}
                                 />
                                 px
                             </FormControl>
+                            <FormControl label="Keep aspect ratio">
+                                <input
+                                    type="checkbox"
+                                    name="keepAspectRatio"
+                                    checked={formState.keepAspectRatio}
+                                    onChange={onInputCheckboxChange}
+                                />
+                            </FormControl>
                             <DialogFooter onSubmit={() => onSubmit(formState)} onClose={onClose}></DialogFooter>
                         </If>
                         <If condition={activeTab === "embed"}>

packages/pluggableWidgets/rich-text-web/src/utils/formats.d.ts

@@ -26,4 +26,5 @@ export type imageConfigType = {
     height?: number;
     src?: string;
     entityGuid?: string;
+    keepAspectRatio?: boolean;
 };

packages/pluggableWidgets/rich-text-web/src/utils/formats/image.ts

@@ -18,8 +18,10 @@ class CustomImage extends Image {
             super.format(name, value);
         }
 
-        if (name === "data-src") {
+        if (name === "data-src" && !this.domNode.dataset.entity) {
             this.domNode.setAttribute("src", fetchDocumentUrl(value, Date.now()));
+            // Mark the image as an entity to prevent further src changes
+            this.domNode.setAttribute("data-entity", "true");
         }
     }
 

packages/pluggableWidgets/rich-text-web/src/utils/formats/resizeModuleConfig.ts

@@ -1,46 +1,11 @@
 import Quill from "quill";
 import QuillResize from "quill-resize-module";
 import { ACTION_DISPATCHER } from "../helpers";
-
-type ToolbarTool = {
-    text: string;
-    className: string;
-    verify: (activeEle: HTMLElement) => boolean;
-    handler: (
-        this: typeof QuillResize.Modules.Base,
-        _evt: MouseEvent,
-        _button: HTMLElement,
-        activeEle: HTMLIFrameElement
-    ) => void;
-};
-
-// eslint-disable-next-line no-unsafe-optional-chaining
-class MxResizeToolbar extends QuillResize.Modules?.Toolbar {
-    _addToolbarButtons(): void {
-        const buttons: HTMLButtonElement[] = [];
-        this.options.tools.forEach((tool: ToolbarTool) => {
-            if (tool.verify && tool.verify.call(this, this.activeEle) === false) {
-                return;
-            }
-
-            const button = document.createElement("button");
-            button.className = tool.className;
-            buttons.push(button);
-            button.setAttribute("aria-label", tool.text);
-            button.setAttribute("type", "button");
-
-            button.addEventListener("click", evt => {
-                tool.handler.call(this, evt, button, this.activeEle);
-                // image may change position; redraw drag handles
-                this.requestUpdate();
-            });
-            this.toolbar.appendChild(button);
-        });
-    }
-}
+import MxResizeToolbar from "../modules/resizeToolbar";
+import MxResize from "../modules/resize";
 
 export const RESIZE_MODULE_CONFIG = {
-    modules: ["DisplaySize", MxResizeToolbar, "Resize", "Keyboard"],
+    modules: ["DisplaySize", MxResizeToolbar, MxResize, "Keyboard"],
     tools: [
         {
             text: "Edit Image",

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

@@ -0,0 +1,100 @@
+import QuillResize from "quill-resize-module";
+
+type sizeType = {
+    width?: number;
+    height?: number;
+};
+type resultSizeType =
+    | sizeType
+    | {
+          width?: string;
+          height?: string;
+      };
+
+type limitType = {
+    ratio?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    minHeight?: number;
+    maxHeight?: number;
+    unit?: string;
+};
+
+type eventType = { clientX: number; clientY: number };
+// eslint-disable-next-line no-unsafe-optional-chaining
+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
+        const deltaX = evt.clientX - this.dragStartX;
+        const deltaY = evt.clientY - this.dragStartY;
+
+        const size: sizeType = {};
+        let direction = 1;
+
+        (this.blotOptions.attribute || ["width"]).forEach((key: "width" | "height") => {
+            size[key] = this.preDragSize[key];
+        });
+
+        const allowHeight =
+            this.activeEle.getAttribute("height") !== undefined && this.activeEle.getAttribute("height") !== null;
+        if (!allowHeight) {
+            delete size.height;
+        }
+
+        // left-side
+        if (this.dragBox === this.boxes[0] || this.dragBox === this.boxes[3]) {
+            direction = -1;
+        }
+
+        if (size.width) {
+            size.width = Math.round(this.preDragSize.width + deltaX * direction);
+        }
+        if (size.height) {
+            size.height = Math.round(this.preDragSize.height + deltaY * direction);
+        }
+
+        let { width, height } = size;
+
+        // keep ratio
+        if (limit.ratio) {
+            let limitHeight;
+            if (limit.minWidth) width = Math.max(limit.minWidth, width!);
+            if (limit.maxWidth) width = Math.min(limit.maxWidth, width!);
+
+            height = width! * limit.ratio;
+
+            if (limit.minHeight && height < limit.minHeight) {
+                limitHeight = true;
+                height = limit.minHeight;
+            }
+            if (limit.maxHeight && height > limit.maxHeight) {
+                limitHeight = true;
+                height = limit.maxHeight;
+            }
+
+            if (limitHeight) {
+                width = height / limit.ratio;
+            }
+        } else {
+            if (size.width) {
+                if (limit.minWidth) width = Math.max(limit.minWidth, width!);
+                if (limit.maxWidth) width = Math.min(limit.maxWidth, width!);
+            }
+            if (size.height) {
+                if (limit.minHeight) height = Math.max(limit.minHeight, height!);
+                if (limit.maxHeight) height = Math.min(limit.maxHeight, height!);
+            }
+        }
+        const res: resultSizeType = {};
+
+        if (limit.unit) {
+            if (width) res.width = width + "px";
+            if (height) res.height = height + "px";
+        } else {
+            if (width) res.width = width;
+            if (height) res.height = height;
+        }
+        return res;
+    }
+}

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

@@ -0,0 +1,38 @@
+import QuillResize from "quill-resize-module";
+
+type ToolbarTool = {
+    text: string;
+    className: string;
+    verify: (activeEle: HTMLElement) => boolean;
+    handler: (
+        this: typeof QuillResize.Modules.Base,
+        _evt: MouseEvent,
+        _button: HTMLElement,
+        activeEle: HTMLIFrameElement
+    ) => void;
+};
+
+// eslint-disable-next-line no-unsafe-optional-chaining
+export default class MxResizeToolbar extends QuillResize.Modules?.Toolbar {
+    _addToolbarButtons(): void {
+        const buttons: HTMLButtonElement[] = [];
+        this.options.tools.forEach((tool: ToolbarTool) => {
+            if (tool.verify && tool.verify.call(this, this.activeEle) === false) {
+                return;
+            }
+
+            const button = document.createElement("button");
+            button.className = tool.className;
+            buttons.push(button);
+            button.setAttribute("aria-label", tool.text);
+            button.setAttribute("type", "button");
+
+            button.addEventListener("click", evt => {
+                tool.handler.call(this, evt, button, this.activeEle);
+                // image may change position; redraw drag handles
+                this.requestUpdate();
+            });
+            this.toolbar.appendChild(button);
+        });
+    }
+}